/* ============================================================
   ROBOT PISCINE PRO — RESORT EDITORIAL DESIGN SYSTEM
   v1.0.0 — 7 mai 2026
   Validé Mamadou. À ne pas écraser sans validation.
   ============================================================ */

:root {
  /* Tokens couleur */
  --bg: #FFF9F0;
  --bg-warm: #F5EBD9;
  --bg-deep: #1E3D4D;
  --water: #7CC8C0;
  --water-deep: #4A9A95;
  --txt: #1B2B33;
  --txt-soft: #4A5A63;
  --txt-mute: #94A2A8;
  --line: rgba(27, 43, 51, 0.08);
  --line-strong: rgba(27, 43, 51, 0.18);
  --gold: #9B7B3F;
  --gold-soft: #C9A96E;
  --error: #C84B3A;
  --success: #4A8B5F;

  /* Aliases compat existing rp-custom.css tokens */
  --blue: var(--water-deep);
  --blue-d: var(--bg-deep);
  --blue-50: var(--bg-warm);
  --blue-100: var(--bg-warm);
  --text: var(--txt);
  --text-2: var(--txt-soft);
  --text-3: var(--txt-mute);
  --border: var(--line-strong);
  --bg-2: var(--bg-warm);
  --bg-3: var(--bg-warm);
  --green: var(--success);

  /* Tokens typo */
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Tokens espacement */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 28px;
  --s-7: 40px;
  --s-8: 56px;
  --s-9: 80px;
  --s-10: 112px;

  /* Tokens radius */
  --radius: 12px;
  --radius-lg: 24px;
  --r-1: 4px;
  --r-2: 12px;
  --r-3: 24px;

  /* Animations */
  --t: 0.18s ease;
  --shadow: 0 1px 3px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.12);

  --max: 1280px;
}

/* ====================== Reset / Base ====================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; }
html, body { background: var(--bg); color: var(--txt); font-family: var(--sans); line-height: 1.6; font-size: 15px; }
body { overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; height: auto; }
button { font: inherit; border: 0; background: 0; cursor: pointer; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--water); color: var(--bg-deep); }

.rpp-container, .container, body .container { max-width: var(--max); margin: 0 auto; padding: 0 var(--s-5); }

/* ====================== Typo helpers ====================== */
.rpp-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  display: inline-block;
}
.rpp-eyebrow-deco::before, .rpp-eyebrow-deco::after { content: '— '; }
.rpp-serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; }
em.rpp-water, .rpp-h em { font-style: italic; color: var(--water-deep); font-weight: 400; }

/* Force serif on headings within Resort sections */
.rpp-resort h1, .rpp-resort h2, .rpp-resort h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--bg-deep);
}

/* ====================== TOP BAR ====================== */
.rpp-top-bar {
  background: var(--bg-deep);
  color: rgba(255, 249, 240, 0.78);
  font-size: 12px;
  text-align: center;
  padding: var(--s-2) var(--s-4);
  letter-spacing: 0.04em;
}
.rpp-top-bar strong { color: var(--gold-soft); font-weight: 500; }

/* ====================== HEADER ====================== */
.rpp-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 249, 240, 0.92);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.rpp-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--s-5);
}
.rpp-logo {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--bg-deep);
  display: block;
}
.rpp-logo em {
  font-style: italic;
  font-weight: 400;
  color: var(--water-deep);
}
.rpp-logo small {
  display: block;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--txt-mute);
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 4px;
}
.rpp-nav-icons { display: flex; gap: var(--s-3); align-items: center; }
.rpp-nav-icons a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; transition: background 0.2s; position: relative; color: var(--bg-deep); }
.rpp-nav-icons a:hover { background: var(--bg-warm); }
.rpp-nav-icons svg { width: 18px; height: 18px; stroke: var(--bg-deep); fill: none; stroke-width: 1.4; }
.rpp-nav-icons .rpp-badge {
  position: absolute; top: 2px; right: 2px;
  background: var(--bg-deep);
  color: var(--bg);
  font-size: 9.5px;
  font-weight: 600;
  border-radius: 100px;
  padding: 1px 5px;
  min-width: 16px;
  text-align: center;
  line-height: 1.4;
}

/* Mobile burger */
.rpp-burger {
  display: none;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 4px;
}
.rpp-burger span { display: block; width: 18px; height: 1.5px; background: var(--bg-deep); border-radius: 1px; }
@media (max-width: 720px) {
  .rpp-burger { display: inline-flex; }
}

/* ====================== Buttons ====================== */
.rpp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 14px 28px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  border-radius: 100px;
  transition: all 0.2s;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.2;
}
.rpp-btn svg { width: 16px; height: 16px; }
.rpp-btn-primary { background: var(--bg-deep); color: var(--bg); }
.rpp-btn-primary:hover { background: var(--water-deep); transform: translateY(-1px); color: var(--bg); }
.rpp-btn-cream { background: var(--bg); color: var(--bg-deep); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15); }
.rpp-btn-cream:hover { background: var(--gold-soft); color: var(--bg); transform: translateY(-1px); }
.rpp-btn-ghost {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
}
.rpp-btn-ghost:hover { background: rgba(255, 255, 255, 0.18); color: white; }
.rpp-btn-outline {
  background: transparent;
  color: var(--bg-deep);
  border: 1px solid var(--line-strong);
}
.rpp-btn-outline:hover { border-color: var(--bg-deep); }
.rpp-btn-block { display: flex; width: 100%; }
.rpp-btn-lg { padding: 18px 32px; font-size: 15px; }

/* ====================== Forms ====================== */
.rpp-field { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-4); }
.rpp-field label, .rpp-field > .label {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--txt-soft);
  font-weight: 500;
}
.rpp-field input, .rpp-field select, .rpp-field textarea {
  background: white;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-1);
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--txt);
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}
.rpp-field input:focus, .rpp-field select:focus, .rpp-field textarea:focus {
  outline: 0;
  border-color: var(--water-deep);
  box-shadow: 0 0 0 3px rgba(74, 154, 149, 0.15);
}
.rpp-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
@media (max-width: 600px) { .rpp-field-row { grid-template-columns: 1fr; gap: 0; } }

/* ====================== FOOTER ====================== */
.rpp-footer {
  background: var(--bg-warm);
  color: var(--bg-deep);
  padding: var(--s-9) 0 var(--s-5);
  margin-top: var(--s-9);
}
.rpp-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid rgba(27, 43, 51, 0.12);
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--s-5); padding-right: var(--s-5);
}
@media (min-width: 720px) { .rpp-footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s-7); } }
.rpp-footer-brand h3 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  margin-bottom: var(--s-3);
  letter-spacing: -0.02em;
  color: var(--bg-deep);
}
.rpp-footer-brand h3 em { font-style: italic; color: var(--water-deep); }
.rpp-footer-brand p { font-size: 14px; color: var(--txt-soft); line-height: 1.7; max-width: 360px; margin: 0; }
.rpp-footer-brand a { color: var(--bg-deep); border-bottom: 1px solid var(--gold-soft); text-decoration: none; }
.rpp-footer-brand a:hover { color: var(--water-deep); }
.rpp-footer-col h4 {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: var(--s-3);
  color: var(--gold);
  font-weight: 500;
}
.rpp-footer-col a {
  display: block;
  font-family: var(--serif);
  font-size: 16px;
  padding: var(--s-1) 0;
  color: var(--bg-deep);
  transition: color 0.15s;
  font-weight: 400;
  text-decoration: none;
}
.rpp-footer-col a:hover { color: var(--water-deep); }
.rpp-footer-bottom {
  margin-top: var(--s-5);
  font-size: 12px;
  color: var(--txt-soft);
  line-height: 1.7;
  text-align: center;
  max-width: var(--max);
  margin-inline: auto;
  padding: 0 var(--s-5);
}
.rpp-footer-bottom strong { color: var(--bg-deep); font-family: var(--serif); font-size: 16px; font-weight: 400; }

/* ====================== UTIL HIDE OLD KADENCE ELEMENTS ====================== */
/* Hide Kadence default header/footer when Resort is loaded */
body.rpp-resort-active .site-header,
body.rpp-resort-active .site-footer,
body.rpp-resort-active #colophon,
body.rpp-resort-active .site-top-header-wrap,
body.rpp-resort-active .site-main-header-wrap {
  display: none !important;
}
body.rpp-resort-active #wrapper { padding-top: 0; }

/* Anti-tear : prevent FOUC on Resort sections */
.rpp-resort h1, .rpp-resort h2, .rpp-resort h3, .rpp-resort h4 { font-display: swap; }