/* AZORA — Accueil — design tokens extracted verbatim from the Claude Design maquette
   (v1.0-FINAL/AZORA Accueil v5.2.dc.html + AZORA Header.dc.html). See BRIEF-CLAUDE-CODE.md §0bis.2/§7. */

:root {
  --navy: #1F2A44;
  --navy-deep: #16203A;      /* hero / CTA-final background */
  --navy-mid: #2A3A5E;       /* "Pourquoi AZORA" section background */
  --cream: #F3ECDD;
  --beige: #EADCC0;
  --beige-dark: #E0CFAC;     /* service-tag hover */
  --gold: #C6A75E;
  --gold-step: #A98C43;      /* "01" "02" step numerals */
  --grey-blue: #5C7184;
  --white: #FFFFFF;

  --border-subtle: rgba(31, 42, 68, 0.08);
  --border-mid: rgba(31, 42, 68, 0.09);
  --border-strong: rgba(31, 42, 68, 0.2);

  --cream-85: rgba(243, 236, 221, 0.85);
  --cream-75: rgba(243, 236, 221, 0.75);
  --cream-72: rgba(243, 236, 221, 0.72);
  --cream-65: rgba(243, 236, 221, 0.65);
  --cream-60: rgba(243, 236, 221, 0.6);
  --cream-55: rgba(243, 236, 221, 0.55);
  --cream-50: rgba(243, 236, 221, 0.5);
  --cream-12: rgba(243, 236, 221, 0.12);

  --gold-35: rgba(198, 167, 94, 0.35);
  --gold-25: rgba(198, 167, 94, 0.25);
  --gold-3: rgba(198, 167, 94, 0.3);
  --gold-45: rgba(198, 167, 94, 0.45);
  --gold-5: rgba(198, 167, 94, 0.5);
  --gold-55: rgba(198, 167, 94, 0.55);
  --gold-6: rgba(198, 167, 94, 0.6);
  --gold-7: rgba(198, 167, 94, 0.7);
  --gold-14: rgba(198, 167, 94, 0.14);
  --gold-16: rgba(198, 167, 94, 0.16);
  --gold-28: rgba(198, 167, 94, 0.28);

  --font-serif: 'Newsreader', serif;
  --font-sans: 'Archivo', sans-serif;

  --radius: 4px;
  --container-max: 1200px;
  --container-pad: clamp(20px, 4vw, 40px);

  --ease-reveal: cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--gold); }
::selection { background: var(--gold); color: var(--navy-deep); }

img { max-width: 100%; display: block; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* Skip link — accessibility addition (brief §12), no visible text/color change to the design */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  background: var(--navy);
  color: var(--cream);
  padding: 12px 20px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  z-index: 200;
  transition: top 0.2s;
}
.skip-link:focus { top: 12px; color: var(--cream); }

/* Focus visibility — never remove outline without replacement (brief §12) */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ---------- Reveal-on-scroll (replaces reveal.js, IntersectionObserver-driven) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s var(--ease-reveal), transform 0.65s var(--ease-reveal);
}
[data-reveal].is-revealed { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .az-snow { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(243, 236, 221, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-sans);
}
.site-header .container {
  padding-top: 14px;
  padding-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 38px; height: auto; }
.brand-word {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--navy);
}

.nav-desktop { display: flex; align-items: center; gap: 26px; font-size: 14px; font-weight: 500; letter-spacing: 0.03em; white-space: nowrap; }
.nav-link { color: var(--navy); padding: 10px 0; border-bottom: 1px solid transparent; transition: color 0.25s, border-color 0.25s; }
.nav-link:hover { color: var(--gold); border-bottom: 1px solid var(--gold); }
.nav-link[aria-current="page"] { border-bottom: 1px solid var(--gold); }

.nav-cta {
  display: inline-block;
  padding: 12px 22px;
  background: var(--navy);
  color: var(--cream);
  border-radius: var(--radius);
  font-weight: 600;
  transition: background 0.25s, transform 0.25s;
}
.nav-cta:hover { background: var(--navy-deep); color: var(--cream); transform: translateY(-1px); }

.stations { position: relative; }
.stations-toggle {
  display: flex; align-items: center; gap: 7px;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500; letter-spacing: 0.03em;
  color: var(--navy); padding: 10px 0; border-bottom: 1px solid transparent;
}
.stations-toggle:hover { color: var(--gold); }
.stations-toggle.is-active { border-bottom: 1px solid var(--gold); }
.stations-toggle .chevron { font-size: 10px; color: var(--gold); }
.stations-menu {
  position: absolute; top: 100%; left: -16px; margin-top: 6px;
  background: var(--white); border: 1px solid var(--border-strong); border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(22, 32, 58, 0.14);
  padding: 8px; display: flex; flex-direction: column; min-width: 170px;
}
.stations-menu[hidden] { display: none; }
.stations-menu a { padding: 12px 16px; border-radius: var(--radius); font-size: 14px; color: var(--navy); transition: background 0.2s; }
.stations-menu a:hover { background: var(--cream); color: var(--navy); }

.nav-lang {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 22px; padding: 0; flex: none;
  border: 1px solid rgba(31,42,68,0.22); border-radius: 4px;
  overflow: hidden; text-indent: -9999px; white-space: nowrap;
  background-repeat: no-repeat; background-position: center; background-size: 20px 14px;
  transition: border-color 0.25s, transform 0.25s;
}
.nav-lang:hover { border-color: var(--gold); transform: translateY(-1px); }
.nav-lang[hreflang="en"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' stroke='%23C8102E' stroke-width='2.5'/%3E%3Cpath d='M30,0 V30 M0,15 H60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0 V30 M0,15 H60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E"); }
.nav-lang[hreflang="fr"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='1' height='2' fill='%230055A4'/%3E%3Crect width='1' height='2' x='1' fill='%23fff'/%3E%3Crect width='1' height='2' x='2' fill='%23EF4135'/%3E%3C/svg%3E"); }

.nav-mobile a[hreflang]::before {
  content: ""; display: inline-block; flex: none;
  width: 22px; height: 15px; margin-right: 10px;
  border-radius: 2px; box-shadow: 0 0 0 1px rgba(31,42,68,0.15);
  background-repeat: no-repeat; background-position: center; background-size: cover;
}
.nav-mobile a[hreflang="en"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0 L60,30 M60,0 L0,30' stroke='%23C8102E' stroke-width='2.5'/%3E%3Cpath d='M30,0 V30 M0,15 H60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0 V30 M0,15 H60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E"); }
.nav-mobile a[hreflang="fr"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='1' height='2' fill='%230055A4'/%3E%3Crect width='1' height='2' x='1' fill='%23fff'/%3E%3Crect width='1' height='2' x='2' fill='%23EF4135'/%3E%3C/svg%3E"); }

.nav-burger {
  display: none;
  width: 48px; height: 48px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: none; border: none; cursor: pointer;
}
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--navy); transition: transform 0.3s, opacity 0.3s; }
.nav-burger[aria-expanded="true"] .bar1 { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .bar2 { opacity: 0; }
.nav-burger[aria-expanded="true"] .bar3 { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile {
  background: var(--cream); border-top: 1px solid var(--border-subtle);
  padding: 12px var(--container-pad) 28px; display: flex; flex-direction: column;
}
.nav-mobile[hidden] { display: none; }
.nav-mobile a {
  padding: 14px 4px; font-size: 17px; font-weight: 500; color: var(--navy);
  border-bottom: 1px solid var(--border-mid); min-height: 44px; display: flex; align-items: center;
}
.nav-mobile .nav-cta { margin-top: 20px; text-align: center; font-size: 16px; color: var(--cream); }
.nav-mobile .nav-cta:hover { color: var(--cream); }

@media (max-width: 940px) {
  .nav-desktop { display: none; }
  .nav-burger { display: flex; }
}
@media (min-width: 941px) {
  .nav-mobile { display: none !important; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 88svh;
  display: flex; align-items: center;
  background: var(--navy-deep);
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(22,32,58,0.78) 0%, rgba(22,32,58,0.48) 55%, rgba(22,32,58,0.15) 100%);
}
.hero-snow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.az-snow { position: absolute; left: -60px; right: -60px; top: -100%; height: 200%; }
.az-snow--1 { opacity: 0.55; background-image: radial-gradient(1.6px 1.6px at 30px 40px, #fff, transparent), radial-gradient(1.4px 1.4px at 120px 150px, #fff, transparent), radial-gradient(1.8px 1.8px at 200px 90px, #fff, transparent), radial-gradient(1.2px 1.2px at 90px 240px, #fff, transparent); background-size: 170px 170px; animation: azSnowFall 22s linear infinite; }
.az-snow--2 { opacity: 0.75; background-image: radial-gradient(2.6px 2.6px at 60px 80px, #fff, transparent), radial-gradient(2.2px 2.2px at 210px 30px, #fff, transparent), radial-gradient(3px 3px at 140px 200px, rgba(255,255,255,0.9), transparent); background-size: 230px 230px; animation: azSnowFall 13s linear infinite; }
.az-snow--3 { opacity: 0.5; filter: blur(1.4px); background-image: radial-gradient(4.5px 4.5px at 100px 60px, #fff, transparent), radial-gradient(5px 5px at 260px 220px, #fff, transparent); background-size: 330px 330px; animation: azSnowFall 8s linear infinite; }
@keyframes azSnowFall { from { transform: translate3d(0, -50%, 0); } to { transform: translate3d(-40px, 0, 0); } }

.hero-skyline { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 144px; pointer-events: none; opacity: 0.92; }
.hero-mark { position: absolute; right: 40px; bottom: 28px; z-index: 1; width: 36px; height: auto; opacity: 0.6; pointer-events: none; }

.hero-inner { position: relative; z-index: 2; pointer-events: none; max-width: var(--container-max); margin: 0 auto; padding: clamp(80px,12vh,120px) var(--container-pad) clamp(100px,14vh,140px); width: 100%; }
.hero-content { max-width: 660px; display: flex; flex-direction: column; gap: 26px; }
.hero-eyebrow { display: flex; align-items: center; gap: 14px; }
.hero-eyebrow .rule { display: block; width: 36px; height: 1px; background: var(--gold); }
.hero-eyebrow p { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.14em; color: var(--beige); }
.hero-title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(36px,5.4vw,62px); line-height: 1.1; color: var(--cream); text-wrap: balance; }
.hero-title em { font-style: italic; }
.hero-lede { margin: 0; font-size: clamp(16px,2vw,18px); line-height: 1.65; color: var(--cream-85); max-width: 540px; }
.hero-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; pointer-events: auto; }
.hero-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; max-width: 440px; }
.btn { flex: 1 1 190px; text-align: center; display: inline-block; padding: 16px 24px; border-radius: var(--radius); font-size: 15px; font-weight: 600; letter-spacing: 0.02em; transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s; }
.btn-solid-cream { background: var(--cream); color: var(--navy); border: 1px solid var(--cream); }
.btn-solid-cream:hover { background: var(--beige); color: var(--navy-deep); transform: translateY(-2px); }
.btn-outline-cream { background: transparent; color: var(--cream); border: 1px solid rgba(243,236,221,0.45); }
.btn-outline-cream:hover { border-color: var(--gold); color: var(--cream); transform: translateY(-2px); }

/* ---------- Trust bar ---------- */
.trust-bar { background: var(--navy); border-top: 1px solid var(--gold-35); }
.trust-list { padding: 26px var(--container-pad); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 18px 24px; }
.trust-item { display: flex; align-items: center; gap: 12px; justify-content: center; }
.trust-item .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); flex: none; }
.trust-item span:last-child { font-size: 14px; font-weight: 500; letter-spacing: 0.03em; color: var(--cream); text-align: center; }
.trust-strap { border-top: 1px solid var(--gold-25); }
.trust-strap-inner { padding: 20px var(--container-pad); display: flex; justify-content: center; }
.trust-strap p { margin: 0; max-width: 760px; text-align: center; font-size: 15px; line-height: 1.7; color: var(--beige); font-weight: 700; }

/* ---------- Section rhythm ---------- */
section { background: var(--cream); }

/* ---------- Problem ---------- */
.problem .container { padding-top: clamp(70px,12vw,130px); padding-bottom: clamp(70px,12vw,130px); display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: clamp(40px,7vw,90px); align-items: start; }
.problem-copy { display: flex; flex-direction: column; gap: 28px; }
.h2-serif { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(30px,3.8vw,44px); line-height: 1.18; color: var(--navy); text-wrap: balance; }
.h2-serif em { font-style: italic; }
.rule-gold { display: block; width: 52px; height: 1px; background: var(--gold); }
.problem-copy p { margin: 0; font-size: 17px; line-height: 1.75; color: var(--grey-blue); max-width: 480px; }
.problem-figure { position: relative; }
.problem-figure .frame { width: 100%; height: clamp(320px,40vw,460px); overflow: hidden; border-radius: var(--radius); transition: transform 0.6s var(--ease-reveal); }
.problem-figure .frame:hover { transform: scale(1.015); }
.problem-figure img { width: 100%; height: 100%; object-fit: cover; }
.problem-figure .accent { position: absolute; left: -1px; bottom: -18px; right: 60px; height: 1px; background: var(--gold); pointer-events: none; }

/* ---------- How it works ---------- */
.how-it-works { background: var(--beige); }
.how-it-works .container { padding-top: clamp(70px,11vw,120px); padding-bottom: clamp(70px,11vw,120px); display: flex; flex-direction: column; gap: clamp(44px,6vw,70px); }
.how-head { display: flex; flex-direction: column; gap: 18px; max-width: 560px; }
.eyebrow { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.14em; color: var(--grey-blue); }
.steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 32px 40px; }
.step { display: flex; flex-direction: column; gap: 16px; border-top: 2px solid var(--gold-7); padding-top: 24px; cursor: default; transition: transform 0.45s var(--ease-reveal), border-color 0.45s, background 0.45s; }
.step:hover { transform: translateY(-4px); border-top-color: var(--gold); background: rgba(253,250,243,0.35); }
.step .num { font-family: var(--font-serif); font-size: 20px; color: var(--gold-step); }
.step h3 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: 0.02em; color: var(--navy); }
.step p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--grey-blue); }

/* ---------- Services ---------- */
.services .container { padding-top: clamp(70px,12vw,130px); padding-bottom: clamp(70px,12vw,130px); display: flex; flex-direction: column; gap: clamp(40px,6vw,64px); }
.services-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; }
.services-head-copy { display: flex; flex-direction: column; gap: 18px; max-width: 520px; }
.services-links { display: flex; flex-wrap: wrap; gap: 16px; }
.tag-btn { flex: none; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; color: var(--navy); background: var(--beige); border: 1px solid var(--gold-55); border-radius: var(--radius); padding: 11px 18px; transition: background 0.25s, border-color 0.25s; }
.tag-btn:hover { background: var(--beige-dark); border-color: var(--gold); color: var(--navy); }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 28px; }
.service-card { background: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.35s var(--ease-reveal), box-shadow 0.35s; }
.service-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(22,32,58,0.13); }
.service-icon-wrap { padding: 30px 24px 0; display: flex; align-items: center; gap: 14px; }
.service-icon { flex: none; width: 68px; height: 68px; border: 1px solid var(--gold-55); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: default; transition: transform 0.45s var(--ease-reveal), background 0.45s, border-color 0.45s, box-shadow 0.45s; }
.service-icon:hover { transform: scale(1.12) rotate(-6deg); background: var(--gold-14); border-color: var(--gold); box-shadow: 0 8px 22px var(--gold-28); }
.service-body { padding: 18px 24px 32px; display: flex; flex-direction: column; gap: 12px; }
.service-body h3 { margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: 20px; color: var(--navy); padding-bottom: 14px; border-bottom: 1px solid var(--border-mid); }
.service-body p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--grey-blue); }

/* ---------- Why AZORA ---------- */
.why-azora { background: var(--navy-mid); }
.why-azora .container { padding-top: clamp(70px,12vw,130px); padding-bottom: clamp(70px,12vw,130px); display: flex; flex-direction: column; gap: 22px; }
.why-azora h2 { margin: 0; display: flex; align-items: center; gap: 18px; font-size: clamp(22px,2.4vw,30px); font-weight: 600; letter-spacing: 0.3em; color: var(--gold); }
.why-azora h2 img { height: 1.5em; width: auto; }
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: clamp(40px,7vw,90px); align-items: start; }
.why-figure { position: relative; }
.why-figure .frame { width: 100%; height: clamp(340px,44vw,520px); overflow: hidden; border-radius: var(--radius); transition: transform 0.6s var(--ease-reveal); }
.why-figure .frame:hover { transform: scale(1.015); }
.why-figure img { width: 100%; height: 100%; object-fit: cover; }
.why-figure .accent { position: absolute; top: -18px; left: 60px; right: -1px; height: 1px; background: var(--gold); pointer-events: none; }
.why-list { display: flex; flex-direction: column; gap: 40px; }
.why-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 30px 36px; }
.why-item { display: flex; gap: 16px; align-items: flex-start; }
.why-item .icon { flex: none; width: 38px; height: 38px; border: 1px solid var(--gold-5); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.4s, border-color 0.4s, transform 0.4s; }
.why-item:hover .icon { background: var(--gold-16); border-color: var(--gold); transform: scale(1.08); }
.why-item h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--cream); }
.why-item p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--cream-72); }

/* ---------- Partners ---------- */
.partners { background: var(--beige); }
.partners .container { padding-top: clamp(50px,8vw,80px); padding-bottom: clamp(50px,8vw,80px); display: flex; flex-direction: column; gap: 32px; }
.partners-head { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; }
.partners-head .eyebrow { text-transform: uppercase; }
.partners-head h2 { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(28px,3.4vw,40px); line-height: 1.2; color: var(--navy); max-width: 620px; text-wrap: pretty; }
.partners-head h2 em { font-style: italic; }
.partners-head p { margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--grey-blue); max-width: 560px; text-wrap: pretty; }
.partners-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(28px,5vw,64px); }
.partner-logo { height: 82px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 10px 14px; transition: opacity 0.35s, transform 0.35s; }
.partner-logo:hover { transform: translateY(-3px); }
.partner-logo img { display: block; width: auto; }
.partner-logo--booking img { max-height: 30px; }
.partner-logo--airbnb img { max-height: 32px; }
.partner-logo--guesty img { max-height: 30px; }
.partner-logo--meetch .badge { display: flex; align-items: center; padding: 12px 22px; border-radius: 8px; background: var(--navy); }
.partner-logo--meetch img { max-height: 26px; }

/* ---------- CTA final ---------- */
.cta-final { position: relative; background: var(--navy-deep); overflow: hidden; scroll-margin-top: 80px; }
.cta-final .cta-inner { position: relative; max-width: 820px; margin: 0 auto; padding: clamp(100px,14vw,150px) var(--container-pad); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 30px; }
.cta-final .eyebrow { color: var(--gold); }
.cta-final h2 { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: clamp(32px,4.2vw,48px); line-height: 1.15; color: var(--cream); text-wrap: balance; }
.cta-final h2 em { font-style: italic; }
.cta-final > .cta-inner > p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--cream-75); max-width: 560px; }
.cta-actions { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 10px; }
.btn-cta-solid { display: inline-block; padding: 17px 34px; background: var(--cream); color: var(--navy); border-radius: var(--radius); font-size: 15px; font-weight: 600; border: 1px solid var(--cream); transition: background 0.25s, color 0.25s, transform 0.25s; }
.btn-cta-solid:hover { background: var(--beige); color: var(--navy-deep); transform: translateY(-2px); }
.cta-sub { margin: 0; font-size: 14.5px; color: var(--cream-65); }
.cta-sub a { color: var(--beige); border-bottom: 1px solid var(--gold); padding-bottom: 2px; transition: color 0.25s; }
.cta-sub a:hover { color: var(--gold); }
.cta-faq { margin: 0; font-size: 14px; color: var(--cream-55); }
.cta-faq a { color: var(--beige); border-bottom: 1px solid var(--gold-6); padding-bottom: 2px; transition: color 0.25s; }
.cta-faq a:hover { color: var(--gold); }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); border-top: 1px solid var(--gold-3); }
.site-footer .container { padding: 80px var(--container-pad) 40px; display: flex; flex-direction: column; gap: 64px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 48px; }
.footer-brand { display: flex; flex-direction: column; gap: 20px; }
.footer-brand-row { display: flex; align-items: center; gap: 12px; }
.footer-brand-row img { width: 36px; height: auto; }
.footer-brand-row span { font-family: var(--font-serif); font-size: 24px; font-weight: 500; letter-spacing: 0.14em; color: var(--cream); }
.footer-col { display: flex; flex-direction: column; gap: 14px; }
.footer-col p.label { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; color: var(--gold); }
.footer-col a { font-size: 14px; color: var(--cream-85); }
.footer-col a:hover { color: var(--gold); }
.footer-col p.addr { margin: 0; font-size: 14px; line-height: 1.6; color: var(--cream-60); }
.footer-phone-row { display: flex; align-items: center; gap: 10px; }
.footer-whatsapp { display: inline-flex; align-items: center; justify-content: center; color: var(--cream-85); transition: color 0.25s, transform 0.25s; }
.footer-whatsapp:hover { color: #25D366; transform: scale(1.1); }
.footer-whatsapp svg { width: 16px; height: 16px; }
@media (max-width: 767px) {
  /* The floating WhatsApp button already covers this on mobile — avoid duplicating it here. */
  .footer-whatsapp { display: none; }
}
.footer-bottom { border-top: 1px solid var(--cream-12); padding-top: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.footer-bottom .copy { margin: 0; font-size: 12.5px; color: var(--cream-50); }
.back-to-top { display: inline-flex; align-items: center; gap: 9px; flex: none; font-family: var(--font-sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-75); border: 1px solid var(--gold-45); border-radius: 2px; padding: 10px 18px; transition: background 0.25s, color 0.25s, border-color 0.25s; }
.back-to-top:hover { color: var(--navy); background: var(--gold); border-color: var(--gold); }
.back-to-top .arrow { font-size: 13px; line-height: 1; }
.footer-legal { display: flex; gap: 24px; }
.footer-legal a { font-size: 12.5px; color: var(--cream-50); }
.footer-legal a:hover { color: var(--gold); }

/* ---------- Mobile card carousels ----------
   Repeated card grids (steps, services...) become horizontal swipe
   rows on phones instead of a long vertical stack. Desktop/tablet
   keep the original CSS-grid layout untouched (min-width: 641px).
   Placed last so it wins the cascade over the grid rules above. */
@media (max-width: 640px) {
  .steps-grid,
  .services-grid,
  .why-items {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 calc(var(--container-pad) * -1);
    padding: 4px var(--container-pad) 14px;
    scroll-padding-left: var(--container-pad);
  }
  .steps-grid::-webkit-scrollbar,
  .services-grid::-webkit-scrollbar,
  .why-items::-webkit-scrollbar { display: none; height: 0; }
  .steps-grid > *,
  .services-grid > * {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
  .why-items > * {
    flex: 0 0 86%;
    scroll-snap-align: start;
  }
  .step {
    background: var(--white);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 22px 20px 26px;
  }
  .why-item {
    background: rgba(243,236,221,0.04);
    border: 1px solid rgba(243,236,221,0.14);
    border-radius: var(--radius);
    padding: 18px 18px 20px;
  }

  .trust-list {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    padding: 20px var(--container-pad);
  }
  .trust-list::-webkit-scrollbar { display: none; height: 0; }
  .trust-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
    background: rgba(243,236,221,0.06);
    border: 1px solid rgba(243,236,221,0.16);
    border-radius: 999px;
    padding: 9px 16px;
  }
}

/* ---------- Carousel scroll indicator (dots + count) ----------
   JS-injected after each mobile card carousel (see js/main.js). Hidden
   by default so it never appears on desktop/tablet, where the same
   elements are a normal CSS grid with no scrolling to indicate. */
.carousel-dots { display: none; }
@media (max-width: 640px) {
  .carousel-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 2px;
  }
  .carousel-dots-pills { display: flex; align-items: center; gap: 6px; }
  .carousel-dots .dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(31,42,68,0.18);
    transition: width 0.25s var(--ease-reveal), background 0.25s;
  }
  .carousel-dots .dot.active { width: 20px; background: var(--gold); }
  .carousel-dots .count { font-size: 12px; color: var(--grey-blue); }

  .steps-dark-grid + .carousel-dots .dot,
  .geo-grid + .carousel-dots .dot,
  .trust-list + .carousel-dots .dot,
  .why-items + .carousel-dots .dot,
  .why-light-grid + .carousel-dots .dot,
  .serenite-grid + .carousel-dots .dot,
  .stat-bar .container + .carousel-dots .dot { background: rgba(243,236,221,0.25); }
  .steps-dark-grid + .carousel-dots .dot.active,
  .geo-grid + .carousel-dots .dot.active,
  .trust-list + .carousel-dots .dot.active,
  .why-items + .carousel-dots .dot.active,
  .why-light-grid + .carousel-dots .dot.active,
  .serenite-grid + .carousel-dots .dot.active,
  .stat-bar .container + .carousel-dots .dot.active { background: var(--gold); }
  .steps-dark-grid + .carousel-dots .count,
  .geo-grid + .carousel-dots .count,
  .trust-list + .carousel-dots .count,
  .why-items + .carousel-dots .count,
  .why-light-grid + .carousel-dots .count,
  .serenite-grid + .carousel-dots .count,
  .stat-bar .container + .carousel-dots .count { color: rgba(243,236,221,0.6); }
  .stat-bar .container + .carousel-dots { margin-top: -8px; padding-bottom: 14px; }

  .trust-list + .carousel-dots { margin-top: -8px; padding-bottom: 14px; }
}

/* ---------- Mobile floating WhatsApp button ----------
   New UI element, mobile only: a small discreet corner button, not a
   full-width bar. The markup is simply absent from mentions-legales.html
   and confidentialite.html, so nothing extra is needed to hide it there.
   Hidden while a form field has focus so it never sits on top of a
   keyboard or a submit button (see js/main.js). Doesn't touch any
   existing layout, color, or copy. */
.mobile-whatsapp-fab { display: none; }
@media (max-width: 767px) {
  .mobile-whatsapp-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 16px;
    bottom: calc(var(--fab-offset, 16px) + env(safe-area-inset-bottom));
    z-index: 70;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #25D366;
    box-shadow: 0 6px 16px rgba(15,20,34,0.28);
    transition: transform 0.25s var(--ease-reveal), opacity 0.25s, bottom 0.3s var(--ease-reveal);
  }
  .mobile-whatsapp-fab.is-hidden { transform: scale(0.6); opacity: 0; pointer-events: none; }
  .mobile-whatsapp-fab svg { width: 27px; height: 27px; color: #fff; }

  /* Keep the button from sitting on top of the footer's last row
     (back-to-top / Mentions légales / Confidentialité) at full scroll. */
  body:has(.mobile-whatsapp-fab) .site-footer,
  body:has(.mobile-whatsapp-fab) .footer-simple {
    padding-bottom: calc(60px + env(safe-area-inset-bottom));
  }
}

/* ---------- Narrow-phone overflow fix (pre-existing, ≤ 380px) ----------
   These two-column "figure + text" grids use minmax(300px,1fr): fine down
   to ~340px, but on a 320-360px phone (iPhone SE and similar) that fixed
   300px floor doesn't fit inside the ~280px content width and forces the
   whole page to scroll horizontally. Not something added today — it was
   already in the grid, just never tested this narrow. Forcing a single
   column here is exactly what auto-fit already does one breakpoint up;
   this only makes it kick in a little earlier where the fixed floor
   would otherwise break it. */
@media (max-width: 380px) {
  .why-grid,
  .problem .container {
    grid-template-columns: 1fr !important;
  }
}

/* ---------- Carousel min-width fix ----------
   A flex/grid item defaults to min-width:auto, which means it won't
   shrink below its own content's min-content size. For a nowrap flex
   row (our horizontal carousels), min-content is the SUM of every
   card's width — so a carousel nested inside a flex-column or grid
   ancestor (.why-list, .why-light .container, .serenite-card,
   .seasons-grid, .steps-dark .container, .method-section .container)
   was forcing that whole ancestor chain wide open instead of letting
   overflow-x:auto clip/scroll it as intended. min-width:0 overrides
   the default and lets it shrink and scroll normally. */
@media (max-width: 640px) {
  .steps-grid,
  .services-grid,
  .why-items,
  .why-list,
  .trust-list {
    min-width: 0;
  }
}

/* ---------- Carousel "swipe me" nudge (mobile, first view only) ----------
   JS adds/removes this class once per carousel (see js/main.js). A
   transform shimmy rather than an actual scroll: these carousels use
   scroll-snap-type:mandatory, which snaps any small real scrollLeft
   change straight back to 0, so nothing would visibly move otherwise. */
@keyframes carousel-nudge {
  0% { transform: translateX(0); }
  35% { transform: translateX(-16px); }
  70% { transform: translateX(3px); }
  100% { transform: translateX(0); }
}
@media (max-width: 640px) {
  .nudge { animation: carousel-nudge 0.5s ease; }
}