/* ==========================================================================
   VULPIX — DESIGN SYSTEM
   Voir DESIGN-SYSTEM.md pour les regles d'usage.
   Ordre : 0.Polices  1.Tokens  2.Reset  3.Layout  4.Typo  5.Composants
           6.Sections  7.Utilitaires  8.Motion  9.Responsive  10.Print
   ========================================================================== */

/* ==========================================================================
   0. POLICES — auto-hebergees
   Servies depuis notre domaine et non depuis fonts.gstatic.com : aucune IP de
   visiteur n'est transmise a Google, donc aucun consentement requis. Gain de
   vitesse au passage (plus de resolution DNS ni de connexion tierce).
   Sora — SIL Open Font License 1.1, voir fonts/LICENSE-Sora.txt
   `font-display: swap` : le texte s'affiche immediatement dans la police de
   secours, puis bascule. Jamais de texte invisible.
   ========================================================================== */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/sora-latin-300-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/sora-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/sora-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/sora-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Jeu latin etendu : telecharge uniquement si un caractere le necessite.
   Le francais tient dans le jeu latin ci-dessus (é è à ç ù ö et meme œ).    */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/sora-latin-ext-300-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/sora-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/sora-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/sora-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* --- Couleurs de marque ------------------------------------------------ */
  --ink: #1A3C34;              /* vert profond — texte principal, boutons     */
  --ink-soft: #2A5147;
  --accent: #C65D3B;           /* terracotta — DECORATIF uniquement           */
  --accent-ink: #A8492C;       /* terracotta lisible en texte   5.75:1 blanc  */
  --accent-btn: #BC5333;       /* terracotta en fond de bouton  4.75:1 blanc  */
  --accent-btn-hover: #A8492C;
  --accent-on-dark: #EDAE9A;   /* terracotta sur fond vert      6.39:1        */

  /* --- Texte ------------------------------------------------------------- */
  --muted: #52606D;            /* texte secondaire              6.46:1 blanc  */
  --faint: #5C6470;            /* petites etiquettes            5.98:1 blanc  */
  --on-dark: #FFFFFF;
  --on-dark-soft: rgba(255, 255, 255, .82);
  --on-dark-faint: rgba(255, 255, 255, .62);

  /* --- Surfaces ---------------------------------------------------------- */
  --white: #FFFFFF;
  --cream: #FAF9F6;            /* fond de page                                */
  --sand: #EFE7D8;
  --sand-deep: #E5D9C8;
  --line: rgba(26, 60, 52, .12);
  --line-strong: rgba(26, 60, 52, .22);

  /* --- Couleurs semantiques (versions lisibles) -------------------------- */
  --sky: #0EA5E9;              /* decoratif : bordures, puces                 */
  --sky-ink: #0369A1;          /* en texte                      5.93:1        */
  --sky-btn: #0277B0;          /* en fond de bouton             4.92:1        */
  --success: #276B2B;          /* en texte                      6.51:1        */
  --warn-ink: #A85408;         /* en texte                      5.33:1        */
  --danger: #DC2626;
  --violet: #7C3AED;
  --wa: #25D366;               /* vert WhatsApp (marque)                      */
  --wa-ink: #08301E;           /* texte sur vert WhatsApp        7.29:1        */

  /* --- Typographie -------------------------------------------------------
     Une seule famille : Sora, geometrique et contemporaine.
     Les deux tokens restent distincts pour pouvoir reintroduire un duo
     plus tard sans toucher aux composants.                                */
  --font-display: 'Sora', 'Avenir Next', system-ui, -apple-system, sans-serif;
  --font-body: 'Sora', 'Avenir Next', system-ui, -apple-system, sans-serif;

  /* Echelle de graisses. Sora est large et ouverte : au-dela de 600 elle
     devient lourde et casse le registre premium. On plafonne a 600.
     Light (300) est reserve aux grandes tailles — sous 1,5rem il perd en
     lisibilite, surtout en gris sur creme et en plein soleil sur mobile.  */
  --fw-light: 300;      /* h1, h2, prix, grands chiffres                   */
  --fw-body: 400;       /* corps de texte                                  */
  --fw-med: 500;        /* listes, liens de nav, accentuation legere        */
  --fw-semi: 600;       /* h3, h4, etiquettes, boutons, strong             */

  --fs-xs: .78rem;
  --fs-sm: .875rem;
  --fs-base: 1.0625rem;                                   /* 17px            */
  --fs-md: clamp(1.05rem, .25vw + 1rem, 1.15rem);
  --fs-lg: clamp(1.15rem, .6vw + 1rem, 1.35rem);
  --fs-h4: clamp(1.02rem, .3vw + .95rem, 1.15rem);
  --fs-h3: clamp(1.2rem, 1.1vw + .95rem, 1.55rem);
  /* Sora est plus large qu'Inter a taille egale : bornes hautes reduites
     pour eviter que les titres ne debordent ou ne se hachent en trop de
     lignes sur les grands ecrans.                                          */
  --fs-h2: clamp(1.85rem, 2.9vw + .9rem, 2.95rem);
  --fs-h1: clamp(2.15rem, 4.1vw + .9rem, 3.95rem);
  --fs-stat: clamp(1.6rem, 2vw + 1rem, 2.1rem);
  --fs-price: clamp(2.2rem, 2vw + 1.4rem, 2.7rem);

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.7;
  --ls-display: -.035em;   /* Sora Light en grand : tracking serre           */
  --ls-tight: -.015em;
  --ls-wide: .14em;

  /* --- Espacement (base 4px) --------------------------------------------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-7: 28px;  --sp-8: 32px;
  --sp-10: 40px; --sp-12: 48px; --sp-14: 56px; --sp-16: 64px;
  --sp-20: 80px; --sp-24: 96px;

  /* Rythme vertical fluide : 128px sur desktop, 64px sur mobile             */
  --section-y: clamp(56px, 8vw, 120px);
  --section-head-gap: clamp(36px, 5vw, 64px);
  --gutter: clamp(16px, 3vw, 22px);
  --container: 1140px;
  --container-narrow: 880px;
  --measure: 62ch;              /* longueur de ligne confortable             */

  /* --- Rayons ------------------------------------------------------------ */
  --r-sm: 8px;   --r-md: 11px;  --r-lg: 14px;
  --r-xl: 18px;  --r-2xl: 22px; --r-pill: 999px;

  /* --- Ombres (teintees vert, pas noires) -------------------------------- */
  --sh-sm: 0 1px 2px rgba(26, 60, 52, .06);
  --sh-md: 0 6px 16px -8px rgba(26, 60, 52, .18);
  --sh-lg: 0 18px 40px -18px rgba(26, 60, 52, .25);
  --sh-xl: 0 32px 64px -32px rgba(26, 60, 52, .28);
  --sh-accent: 0 14px 30px -12px rgba(188, 83, 51, .45);

  /* --- Mouvement --------------------------------------------------------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: .16s;
  --dur: .28s;
  --dur-slow: .55s;

  /* --- Couches ----------------------------------------------------------- */
  --z-base: 1;
  --z-sticky: 60;
  --z-dropdown: 80;
  --z-float: 70;
  --z-overlay: 90;
  --z-skip: 100;

  /* Hauteur du header : sert au decalage des ancres                         */
  --header-h: 60px;
}

/* ==========================================================================
   2. RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* L'attribut `hidden` doit toujours gagner. La regle `[hidden]{display:none}`
   de la feuille du navigateur a une specificite plus faible qu'un selecteur
   de classe : sans ce correctif, un `.form { display: grid }` reaffiche un
   element pourtant marque `hidden`. C'est ce qui laissait le message
   « Message envoye, merci ! » visible en permanence.                       */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
/* Light sur les grandes tailles : c'est la que Sora respire et fait premium.
   Tracking resserre pour compenser la largeur naturelle de la fonte.       */
h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
}
h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-display);
  line-height: 1.18;
}
/* Sous ~1,6rem le Light devient fragile : on remonte en Semi-bold.         */
h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
}
h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
}

p { margin: 0; text-wrap: pretty; }
p + p { margin-top: var(--sp-4); }

ul, ol { margin: 0; padding: 0; }

a {
  color: var(--accent-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--ink); }

img, svg, video, figure { display: block; max-width: 100%; }
img { height: auto; }
figure { margin: 0; }

/* Les controles de formulaire n'heritent PAS de la police du parent : sans ce
   reset, ils tombent sur la police par defaut du systeme (Arial, Segoe UI…)
   et rompent l'uniformite de Sora. Piege classique.                        */
button, input, textarea, select, optgroup {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}
input::placeholder, textarea::placeholder { font: inherit; }

strong, b { font-weight: var(--fw-semi); color: var(--ink); }

hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-8) 0; }

::selection { background: rgba(198, 93, 59, .22); color: var(--ink); }

/* Focus visible unifie — critere WCAG 2.4.7 */
:focus-visible {
  outline: 3px solid var(--accent-btn);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* Decalage des ancres sous le header sticky */
[id] { scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }
.container--form { max-width: 640px; }

.section { padding-block: var(--section-y); }
.section--white { background: var(--white); }
.section--cream { background: var(--cream); }
.section--ruled {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-head {
  text-align: center;
  max-width: 44rem;
  margin: 0 auto var(--section-head-gap);
}
.section-head > * + * { margin-top: var(--sp-3); }
.section-head p:not(.eyebrow) {
  color: var(--muted);
  font-size: var(--fs-md);
}

.stack { display: grid; gap: var(--sp-6); }
.stack--tight { gap: var(--sp-3); }
.stack--loose { gap: var(--sp-8); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}
.cluster--center { justify-content: center; }

/* Grille auto-responsive : pas de media query necessaire */
.auto-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.auto-grid--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

/* ==========================================================================
   4. TYPOGRAPHIE
   ========================================================================== */
.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0;
}
.eyebrow--on-dark { color: var(--accent-on-dark); }
.eyebrow--neutral { color: var(--faint); }

.lead {
  font-size: var(--fs-lg);
  color: var(--muted);
  line-height: 1.55;
  max-width: 38ch;
}

.prose { color: var(--muted); max-width: var(--measure); }
.prose strong { color: var(--ink); }

.quote {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-lg);
  color: var(--ink);
  line-height: 1.42;
  letter-spacing: var(--ls-tight);
  margin: 0;
}

.fine-print {
  font-size: var(--fs-xs);
  color: var(--faint);
  font-style: italic;
}

.t-accent { color: var(--accent-ink); }
.t-success { color: var(--success); }
.t-warn { color: var(--warn-ink); }
.t-sky { color: var(--sky-ink); }
.t-muted { color: var(--muted); }
.t-faint { color: var(--faint); }
.t-center { text-align: center; }
.t-display { font-family: var(--font-display); font-weight: var(--fw-semi); }

/* ==========================================================================
   5. COMPOSANTS
   ========================================================================== */

/* --- 5.1 Boutons ---------------------------------------------------------
   Toutes les variantes atteignent 44px de hauteur tactile (WCAG 2.5.8).   */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: 46px;
  padding: .8em 1.45em;
  border: 2px solid transparent;
  border-radius: var(--r-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: 1rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease),
              background-color var(--dur-fast) var(--ease);
}
.btn:hover {
  color: var(--btn-fg);
  transform: translateY(-2px);
  box-shadow: var(--sh-lg);
}
.btn:active { transform: translateY(0); box-shadow: var(--sh-sm); }
.btn svg { flex: none; }

.btn--accent { --btn-bg: var(--accent-btn); }
.btn--accent:hover { background: var(--accent-btn-hover); box-shadow: var(--sh-accent); }
.btn--sky { --btn-bg: var(--sky-btn); }
.btn--dark { --btn-bg: var(--ink); }

.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--ink);
}
.btn--outline:hover { background: var(--ink); --btn-fg: var(--white); }

.btn--wa {
  --btn-bg: var(--wa);
  --btn-fg: var(--wa-ink);      /* texte fonce : 7.29:1 sur le vert WhatsApp */
  border-radius: var(--r-pill);
  font-weight: var(--fw-semi);
}

.btn--sm { min-height: 40px; padding: .5em 1em; font-size: var(--fs-sm); }
.btn--block { display: flex; width: 100%; }

/* --- 5.2 Cartes --------------------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--sp-7);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card--cream { background: var(--cream); }
.card--dark {
  background: var(--ink);
  border-color: transparent;
  color: var(--on-dark-soft);
}
.card--dark h2, .card--dark h3, .card--dark h4, .card--dark strong { color: var(--white); }
.card--outlined { border: 2px solid var(--ink); }
.card--rail { border-left: 4px solid var(--accent); border-radius: var(--r-lg); }
.card--lift:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.card--flush { padding: 0; overflow: hidden; }

.icon-badge {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  background: rgba(198, 93, 59, .1);
  color: var(--accent-ink);
}
.icon-badge--round { border-radius: 50%; width: 52px; height: 52px; background: var(--sand); color: var(--ink); }
.icon-badge--sm { width: 30px; height: 30px; border-radius: 9px; }

/* --- 5.3 Etiquettes / pastilles ---------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 5px 13px;
  border-radius: var(--r-sm);
  background: var(--faint);
  color: var(--white);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: .05em;
  line-height: 1.4;
}
.badge--accent { background: var(--accent-btn); }
.badge--dark { background: var(--ink); border-radius: var(--r-pill); font-weight: var(--fw-semi); letter-spacing: 0; }
.badge--sky { background: var(--sky-btn); }
.badge--pill { border-radius: var(--r-pill); }
.badge--soft {
  background: rgba(198, 93, 59, .1);
  color: var(--accent-ink);
  border-radius: var(--r-pill);
  padding: 6px 14px;
}
.badge--ribbon {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-md);
}

/* --- 5.4 Listes a puces cochees --------------------------------------- */
.check-list { list-style: none; display: grid; gap: var(--sp-3); }
.check-list li {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--ink);
  font-weight: var(--fw-med);
  line-height: 1.5;
}
.check-list svg { flex: none; margin-top: 3px; }
.check-list--muted li { color: var(--faint); font-weight: var(--fw-body); }

/* --- 5.5 Statistiques -------------------------------------------------- */
.stat { text-align: center; }
.stat__value {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: var(--fs-stat);
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: var(--ls-tight);
}
.stat__value--accent { color: var(--accent-ink); }
.stat__value--success { color: var(--success); }
.stat__value--warn { color: var(--warn-ink); }
.stat__label {
  display: block;
  color: var(--faint);
  font-size: var(--fs-xs);
  line-height: 1.4;
  margin-top: 2px;
}

.stat-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-6) clamp(24px, 5vw, 56px);
}
.stat-grid { display: grid; gap: var(--sp-3); }
.stat-grid--3 { grid-template-columns: repeat(3, 1fr); }
.stat-grid--2 { grid-template-columns: repeat(2, 1fr); }

/* --- 5.6 En-tete du site ---------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: rgba(250, 249, 246, .88);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur) var(--ease);
}
.site-header[data-scrolled="true"] { box-shadow: var(--sh-md); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  height: var(--header-h);
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
  color: var(--ink);
  min-width: 0;
}
.brand img { height: 40px; width: auto; flex: none; }
.brand__name {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: 1.15rem;
  letter-spacing: var(--ls-tight);
  white-space: nowrap;
}

.header-actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; }

/* --- 5.7 Navigation ---------------------------------------------------- */
.nav { display: flex; align-items: center; gap: var(--sp-1); }

.nav__group { position: relative; }

.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 9px 11px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink);
  font-weight: var(--fw-med);
  font-size: .92rem;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}
.nav__trigger svg { transition: transform var(--dur) var(--ease); }
.nav__group:hover .nav__trigger,
.nav__trigger[aria-expanded="true"] { background: var(--sand); }
.nav__trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 210px;
  padding: var(--sp-2);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  list-style: none;
  z-index: var(--z-dropdown);
  /* Visibilite geree par opacity plutot que display : permet la transition
     tout en restant inaccessible au clavier quand fermee.                  */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              visibility var(--dur-fast);
}
.nav__group:hover .nav__menu,
.nav__group:focus-within .nav__menu,
.nav__trigger[aria-expanded="true"] + .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__menu a {
  display: block;
  padding: 10px 13px;
  border-radius: var(--r-sm);
  color: var(--ink);
  font-weight: var(--fw-med);
  font-size: .9rem;
  text-decoration: none;
  white-space: nowrap;
}
.nav__menu a:hover, .nav__menu a:focus-visible {
  background: var(--cream);
  color: var(--accent-ink);
}

.burger {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.burger:hover { background: var(--sand); }

/* --- 5.8 Navigation mobile -------------------------------------------- */
.mobile-nav {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--cream);
  padding-block: var(--sp-3) var(--sp-5);
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
}
.mobile-nav[data-open="true"] { display: block; }
.mobile-nav__label {
  margin: 0;
  padding: var(--sp-4) var(--gutter) var(--sp-1);
  color: var(--faint);
  font-size: .7rem;
  font-weight: var(--fw-semi);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.mobile-nav__list { list-style: none; }
.mobile-nav__list a {
  display: block;
  padding: 13px var(--gutter);
  color: var(--ink);
  font-weight: var(--fw-med);
  text-decoration: none;
}
.mobile-nav__list a:hover { background: var(--sand); }
.mobile-nav__cta {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--gutter) 0;
  flex-wrap: wrap;
}

/* --- 5.9 Actions flottantes ------------------------------------------- */
/* Desktop : pastille WhatsApp. Mobile : remplacee par la barre du bas.   */
.wa-float {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: var(--z-float);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 18px;
  border-radius: var(--r-pill);
  background: var(--wa);
  color: var(--wa-ink);
  font-weight: var(--fw-semi);
  font-size: .92rem;
  text-decoration: none;
  box-shadow: 0 12px 30px -10px rgba(37, 211, 102, .65);
  transition: transform var(--dur) var(--ease);
}
.wa-float:hover { transform: translateY(-3px) scale(1.02); color: var(--wa-ink); }

/* Barre CTA mobile — levier de conversion principal sur petit ecran      */
.cta-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-float);
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3) calc(var(--sp-2) + env(safe-area-inset-bottom));
  background: rgba(250, 249, 246, .96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px -16px rgba(26, 60, 52, .3);
}
.cta-bar .btn { flex: 1; min-height: 48px; font-size: .95rem; padding-inline: .8em; }

/* --- 5.10 Panneaux avant / apres -------------------------------------- */
.ba-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  max-width: 980px;
  margin-inline: auto;
  position: relative;
  align-items: start;
}

.ba-panel {
  border-radius: var(--r-2xl);
  overflow: hidden;
  padding: var(--sp-5);
}
.ba-panel--before { border: 2px solid #D8DCDA; background: #F4F5F4; }
.ba-panel--after {
  border: 2px solid rgba(198, 93, 59, .45);
  background: linear-gradient(150deg, #FFF7ED, #FFFDF7);
}
.ba-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.ba-panel__caption {
  text-align: center;
  color: var(--faint);
  font-size: var(--fs-sm);
  margin-top: var(--sp-3);
}
.ba-panel__caption--ai { font-style: italic; }

.ba-arrow {
  display: grid;
  place-items: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--accent-btn);
  border: 4px solid var(--white);
  color: var(--white);
  box-shadow: var(--sh-accent);
}
.ba-arrow--mobile { display: none; }

.media {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--sand-deep);
}
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--4-3 { aspect-ratio: 4 / 3; }
.media--16-9 { aspect-ratio: 16 / 9; }
.media--4-5 { aspect-ratio: 4 / 5; }
.media--1-1 { aspect-ratio: 1 / 1; }

.media-tag {
  position: absolute;
  z-index: 2;
  top: var(--sp-2);
  left: var(--sp-2);
  font-size: .66rem;
  padding: 3px 10px;
}

/* --- 5.11 Faux post social ------------------------------------------- */
.post {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--white);
}
.post__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); }
.post__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sand-deep);
  color: var(--ink);
  font-weight: var(--fw-semi);
  font-size: .8rem;
}
.post__author { font-weight: var(--fw-semi); font-size: .88rem; margin: 0; }
.post__meta { color: var(--faint); font-size: .76rem; margin: 0; }
.post__body { padding: var(--sp-4); font-size: .9rem; line-height: 1.55; }
.post__tags { color: var(--sky-ink); font-size: .76rem; font-weight: var(--fw-med); margin-top: var(--sp-2); }
.post__stats {
  display: flex;
  gap: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
}
/* Icones SVG a la place des emoji : les emoji sont rendus par une police
   systeme dediee, jamais par Sora.                                         */
.post__stats span { display: inline-flex; align-items: center; gap: 6px; }
.post__stats svg { width: 16px; height: 16px; flex: none; }
.post--dim .post__author,
.post--dim .post__body,
.post--dim .post__stats { color: var(--faint); }
.post__placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  background: #E7E9E8;
  color: var(--faint);
  font-size: .8rem;
}

/* --- 5.12 Bandeau logos (marquee) ------------------------------------ */
.marquee { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(32px, 6vw, 64px);
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
/* Logos en couleur : c'est de la preuve sociale, le prospect local doit
   reconnaitre les entreprises. Pas de desaturation — il n'y a pas de survol
   sur mobile, et un seul logo sur cinq est cliquable.                      */
.marquee img {
  height: clamp(64px, 9vw, 104px);
  width: auto;
  object-fit: contain;
  flex: none;
  transition: transform var(--dur) var(--ease);
}
.marquee a:hover img, .marquee a:focus-visible img { transform: scale(1.05); }

/* --- 5.13 Forfaits --------------------------------------------------- */
.offer-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  align-items: stretch;
}

.offer {
  --offer-color: var(--ink);
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 2px solid var(--offer-color);
  border-radius: var(--r-2xl);
  padding: var(--sp-8) var(--sp-6) var(--sp-7);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.offer:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.offer--sky { --offer-color: var(--sky-btn); }
.offer--accent { --offer-color: var(--accent-btn); box-shadow: var(--sh-xl); }
.offer__kicker {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--offer-color);
  font-weight: var(--fw-semi);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0 0 var(--sp-2);
}
.offer__tagline { color: var(--muted); font-size: var(--fs-sm); margin: var(--sp-2) 0 var(--sp-5); }
.offer__price {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}
/* Conditions d'engagement affichees sous le prix, avant le bouton d'achat :
   une condition decouverte apres paiement genere des litiges.              */
.offer__terms {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 var(--sp-5);
  padding: 7px 11px;
  border-radius: var(--r-sm);
  background: var(--cream);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-med);
  line-height: 1.35;
}
.offer__terms::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--offer-color);
}
.offer__amount {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-price);
  line-height: 1;
  color: var(--offer-color);
  letter-spacing: var(--ls-display);
}
.offer__period { color: var(--muted); font-size: var(--fs-sm); }
.offer .check-list { flex: 1; margin-bottom: var(--sp-6); }
.offer .icon-badge--sm {
  background: color-mix(in srgb, var(--offer-color) 12%, transparent);
  color: var(--offer-color);
}
.offer__footnote { margin: calc(var(--sp-4) * -1) 0 var(--sp-4); }

/* --- 5.14 Encart CTA fonce ------------------------------------------ */
.cta-panel {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  border-radius: var(--r-2xl);
  padding: clamp(32px, 5vw, 56px) var(--sp-7);
  text-align: center;
  margin-top: var(--sp-14);
}
.cta-panel h3 { color: var(--white); font-size: clamp(1.55rem, 3vw, 2.3rem); }
.cta-panel p { color: var(--on-dark-soft); font-size: var(--fs-md); max-width: 46ch; margin-inline: auto; }
.cta-panel__inner { position: relative; z-index: 1; display: grid; gap: var(--sp-4); justify-items: center; }
.blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.blob--a { width: 260px; height: 260px; background: rgba(198, 93, 59, .16); top: -130px; right: -90px; }
.blob--b { width: 200px; height: 200px; background: rgba(255, 255, 255, .05); bottom: -100px; left: -70px; }

/* --- 5.15 Etapes / timeline ----------------------------------------- */
.timeline {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  position: relative;
  counter-reset: step;
}
.step { text-align: center; counter-increment: step; }
.step__icon {
  display: inline-grid;
  place-items: center;
  position: relative;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  color: var(--white);
  margin-bottom: var(--sp-4);
  transition: transform var(--dur) var(--ease);
}
.step:hover .step__icon { transform: scale(1.06) rotate(-4deg); }
/* Numero d'etape genere en CSS — plus de <p> vides dans le HTML          */
.step__icon::after {
  content: counter(step);
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: .78rem;
  box-shadow: var(--sh-sm);
}
.step__icon--1 { background: linear-gradient(140deg, var(--accent-btn), #E08A63); }
.step__icon--2 { background: linear-gradient(140deg, var(--sky-btn), #5FC4EE); }
.step__icon--3 { background: linear-gradient(140deg, var(--violet), #A876F2); }
.step__icon--4 { background: linear-gradient(140deg, var(--success), #5DA862); }
.step p { color: var(--muted); font-size: var(--fs-sm); margin-top: var(--sp-2); }

/* --- 5.16 Grille de services ---------------------------------------- */
/* Separateurs obtenus par `gap: 1px` sur un fond colore : les filets se
   dessinent tout seuls, sans bordure qui depasse sur la derniere colonne.
   Consequence pratique : on peut ajouter ou retirer une carte sans toucher
   au CSS, quel que soit le nombre de colonnes apres retour a la ligne.    */
/* Colonnes explicites (3 / 2 / 1) plutot qu'auto-fit : avec 6 cartes, chaque
   palier remplit ses lignes exactement. En auto-fit, 4 ou 5 colonnes
   laissaient une carte seule en fin de grille avec du vide a cote.         */
.service-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  overflow: hidden;
}
.service {
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
  background: var(--white);
  transition: background-color var(--dur) var(--ease);
}
.service:hover { background: var(--cream); }
.service .icon-badge--round { margin: 0 auto var(--sp-4); }
.service p { color: var(--muted); font-size: var(--fs-sm); margin-top: var(--sp-2); max-width: 34ch; margin-inline: auto; }
/* Conserve pour une eventuelle carte mise en avant sur toute la largeur.   */
.service--full { grid-column: 1 / -1; }

/* --- 5.17 FAQ ------------------------------------------------------- */
.faq { max-width: 820px; margin-inline: auto; display: grid; gap: var(--sp-3); }
.faq details {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.faq details[open] { border-color: var(--line-strong); box-shadow: var(--sh-md); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: 1.06rem;
  color: var(--ink);
  list-style: none;
  min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 2.5px solid var(--accent-btn);
  border-bottom: 2.5px solid var(--accent-btn);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.faq summary:hover { background: var(--cream); }
.faq__answer { padding: 0 var(--sp-6) var(--sp-6); color: var(--muted); }

/* --- 5.18 Formulaire ------------------------------------------------ */
.form { display: grid; gap: var(--sp-4); }
.field { display: grid; gap: var(--sp-1); }
.field label { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--ink); }
.field .hint { font-size: var(--fs-xs); color: var(--faint); }

.input {
  width: 100%;
  min-height: 48px;
  padding: 13px 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--cream);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;                /* >=16px : evite le zoom auto sur iOS    */
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.input::placeholder { color: var(--faint); }
.input:focus {
  outline: none;
  border-color: var(--accent-btn);
  box-shadow: 0 0 0 3px rgba(188, 83, 51, .18);
}
textarea.input { resize: vertical; min-height: 130px; }

.form-success {
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: var(--sp-10) var(--sp-6);
  text-align: center;
}

/* --- 5.19 Calculateur ---------------------------------------------- */
.calc { max-width: 620px; margin-inline: auto; }
.calc__progress {
  height: 6px;
  background: var(--sand-deep);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-bottom: var(--sp-5);
}
.calc__bar {
  display: block;
  height: 100%;
  width: 25%;
  background: var(--accent-btn);
  border-radius: inherit;
  transition: width var(--dur-slow) var(--ease-out);
}
.calc__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  color: var(--faint);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-2);
}
.calc__question {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semi);
  color: var(--ink);
  margin-bottom: var(--sp-4);
}
.calc__options { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-5); }

.q-option {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 54px;
  padding: 14px 16px;
  border: 2px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--white);
  text-align: left;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.q-option:hover { border-color: var(--accent); }
.q-option[aria-pressed="true"], .q-option.is-selected {
  background: rgba(198, 93, 59, .07);
  border-color: var(--accent-btn);
}
.q-option__box {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  border: 1.5px solid var(--line-strong);
  background: transparent;
  color: var(--white);
}
.q-option__box svg { width: 13px; height: 13px; }
.q-option[aria-pressed="true"] .q-option__box,
.q-option.is-selected .q-option__box { background: var(--accent-btn); border-color: var(--accent-btn); }
.q-option__label { flex: 1; font-size: .98rem; }
.q-option__hint { color: var(--faint); font-size: .8rem; flex: none; }

.result__headline {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 7vw, 3.2rem);
  font-weight: var(--fw-light);
  color: var(--accent-ink);
  line-height: 1;
  letter-spacing: var(--ls-display);
}
.result__note {
  font-size: var(--fs-sm);
  color: var(--muted);
  padding: var(--sp-4);
  background: var(--cream);
  border-radius: var(--r-md);
  border-left: 3px solid var(--accent);
}
.result__note--warn { border-left-color: var(--warn-ink); }
.result__note--ok { border-left-color: var(--success); }
.result__tile {
  background: var(--cream);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  text-align: center;
}

/* --- 5.20 Pied de page --------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: var(--on-dark-faint);
  padding: var(--sp-14) 0 var(--sp-8);
}
.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  align-items: center;
  justify-content: space-between;
}
.site-footer__brand { display: flex; align-items: center; gap: var(--sp-4); }
.site-footer__brand img { height: 60px; width: 60px; flex: none; }
.site-footer__brand b { font-family: var(--font-display); font-size: 1.2rem; color: var(--white); }
.site-footer__brand p { color: var(--on-dark-faint); font-size: var(--fs-sm); }
.site-footer nav { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.site-footer a { color: var(--on-dark-soft); font-size: .9rem; text-decoration: none; }
.site-footer a:hover { color: var(--accent-on-dark); text-decoration: underline; }
.site-footer hr { border-top-color: rgba(255, 255, 255, .14); }
.site-footer__legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin-bottom: var(--sp-5);
}
.site-footer__legal-nav a { text-decoration: underline; text-underline-offset: 3px; }
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: .82rem;
}

/* --- 5.21 Bandeau de consentement --------------------------------- */
/* Bandeau bas, non modal : il n'empeche pas de lire la page (un mur de
   consentement est mal vu et nuit au referencement). Les deux boutons ont
   le meme poids visuel — refuser doit etre aussi facile qu'accepter.      */
.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-overlay);
  background: var(--white);
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -12px 32px -18px rgba(26, 60, 52, .35);
  padding: var(--sp-5) 0 calc(var(--sp-5) + env(safe-area-inset-bottom));
  animation: rise var(--dur-slow) var(--ease-out) both;
}
.consent__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.consent__copy { flex: 1 1 22rem; min-width: 0; }
.consent__title {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  font-size: 1.02rem;
  color: var(--ink);
  margin: 0 0 4px;
}
.consent__text {
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
  margin: 0;
  max-width: 68ch;
}
.consent__actions { display: flex; gap: var(--sp-3); flex: none; }
.consent__actions .btn { min-width: 8.5rem; }

/* La barre CTA mobile remonte pour ne pas passer sous le bandeau */
body.has-consent-banner .cta-bar { display: none; }

@media (max-width: 700px) {
  .consent { padding-block: var(--sp-4); }
  .consent__actions { width: 100%; }
  .consent__actions .btn { flex: 1; min-width: 0; }
}

/* Bloc affiche a la place d'un contenu tiers refuse */
.consent-placeholder {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--sp-1);
  padding: var(--sp-10) var(--sp-6);
  background: var(--cream);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-xl);
}

/* --- 5.22 Lien d'evitement ---------------------------------------- */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: var(--z-skip);
  padding: 12px 22px;
  background: var(--ink);
  color: var(--white);
  border-radius: 0 0 var(--r-md) var(--r-md);
  font-weight: var(--fw-semi);
  text-decoration: none;
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); color: var(--white); }

/* ==========================================================================
   6. SECTIONS SPECIFIQUES
   ========================================================================== */
.hero { padding-block: clamp(40px, 6vw, 72px) clamp(48px, 7vw, 80px); }
.hero__grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(28px, 5vw, 52px);
  align-items: center;
}
.hero__copy { display: grid; gap: var(--sp-4); justify-items: start; }
.hero__portrait { position: relative; justify-self: center; width: min(380px, 82vw); }
.hero__portrait-frame {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--sh-xl);
}
.hero__portrait-frame img { width: 100%; height: 100%; object-fit: cover; }
.hero__deco { position: absolute; z-index: 0; pointer-events: none; }
.hero__deco--square { width: 96px; height: 96px; background: var(--sand-deep); border-radius: var(--r-lg); bottom: -18px; left: -18px; }
.hero__deco--circle { width: 70px; height: 70px; background: rgba(198, 93, 59, .22); border-radius: 50%; top: -18px; right: -18px; }

.chat-mock {
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--sh-lg);
}
.chat-mock__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--faint);
}
.chat-mock__dots { display: flex; gap: 5px; }
.chat-mock__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--sand-deep); }
.chat-mock__body { display: grid; gap: var(--sp-3); padding: var(--sp-4); }
.bubble { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-lg); font-size: var(--fs-sm); line-height: 1.55; }
.bubble--user { background: var(--sand); color: var(--ink); justify-self: end; max-width: 88%; border-bottom-right-radius: var(--sp-1); }
.bubble--ai { background: var(--cream); border: 1px solid var(--line); color: var(--muted); border-bottom-left-radius: var(--sp-1); }
.bubble--ai strong { color: var(--ink); }
.bubble__label {
  display: block;
  font-size: .68rem;
  font-weight: var(--fw-semi);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: var(--sp-1);
}

.review-card { display: grid; gap: var(--sp-4); }
.review-card__rating { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
/* Etoiles en SVG et non en caractere ★ : Sora ne contient pas ce glyphe.   */
.stars { display: inline-flex; gap: 2px; color: #E8A33D; }
.stars svg { width: 17px; height: 17px; fill: currentColor; flex: none; }
.stars svg.off { color: #C4C9C7; }
.review-card__score { font-family: var(--font-display); font-weight: var(--fw-light); font-size: 1.6rem; letter-spacing: var(--ls-display); }
.review-card__title { font-size: 1.05rem; font-weight: var(--fw-semi); }
.review-card__count { font-size: var(--fs-sm); font-weight: var(--fw-med); }
.photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }

.ads-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}
.ad-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ad-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.ad-card__stats { padding: var(--sp-5) var(--sp-4); margin-top: auto; }

/* --- 6.x Pages legales ------------------------------------------------- */
.legal h2 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-tight);
}
.legal h3 {
  font-size: var(--fs-h4);
  color: var(--accent-ink);
}
.legal p + p, .legal .prose + .prose { margin-top: var(--sp-3); }

/* Liste de definitions en deux colonnes sur large, empilee sur mobile */
.legal-dl {
  display: grid;
  grid-template-columns: minmax(11rem, 15rem) 1fr;
  gap: var(--sp-2) var(--sp-5);
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-sm);
}
.legal-dl dt { font-weight: var(--fw-semi); color: var(--ink); }
.legal-dl dd { margin: 0; color: var(--muted); }

/* Champ restant a completer : visible, mais pas alarmant */
.todo {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--r-sm);
  background: #FFF7E6;
  border: 1px dashed var(--warn-ink);
  color: var(--warn-ink);
  font-size: var(--fs-xs);
  font-style: italic;
}
p.todo { display: block; }

/* Les tableaux debordent sur mobile : on les rend defilables, avec un
   conteneur focusable pour que ce soit accessible au clavier.             */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  min-width: 34rem;
}
.legal-table th, .legal-table td {
  padding: var(--sp-3);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.legal-table thead th {
  background: var(--cream);
  font-weight: var(--fw-semi);
  color: var(--ink);
  white-space: nowrap;
}
.legal-table td { color: var(--muted); }
.legal-table code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: .82em;
  background: var(--cream);
  padding: 2px 5px;
  border-radius: 4px;
  color: var(--ink);
}
.legal-table tbody tr:last-child th,
.legal-table tbody tr:last-child td { border-bottom: 0; }

.notice {
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.notice--warn {
  background: #FFF7E6;
  border: 1px solid rgba(168, 84, 8, .3);
  color: var(--warn-ink);
}
.notice--warn strong { color: var(--warn-ink); }

@media (max-width: 600px) {
  .legal-dl { grid-template-columns: 1fr; gap: 2px; }
  .legal-dl dd { margin-bottom: var(--sp-3); }
}

/* ==========================================================================
   7. UTILITAIRES
   ========================================================================== */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.relative { position: relative; }
.center-block { display: flex; justify-content: center; }
.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mt-10 { margin-top: var(--sp-10); }
.mb-0 { margin-bottom: 0; }
.no-shrink { flex: none; }

/* ==========================================================================
   8. MOUVEMENT
   ========================================================================== */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Reveal au scroll, pilote par IntersectionObserver.
   Sans JS ou sans observer, .reveal reste visible : degradation gracieuse. */
.js .reveal { opacity: 0; }
.js .reveal.is-in { animation: rise var(--dur-slow) var(--ease-out) both; }
.js .reveal.is-in:nth-child(2) { animation-delay: .08s; }
.js .reveal.is-in:nth-child(3) { animation-delay: .16s; }
.js .reveal.is-in:nth-child(4) { animation-delay: .24s; }

/* ==========================================================================
   9. RESPONSIVE (approche mobile-last : on retire au fur et a mesure)
   ========================================================================== */
@media (max-width: 1180px) {
  .nav { display: none; }
  .burger { display: grid; }
  .header-actions .btn--wa { display: none; }
}

@media (max-width: 900px) {
  .header-actions .btn--dark { display: none; }
}

@media (max-width: 860px) {
  .service-board { grid-template-columns: repeat(2, 1fr); }
  .ba-grid { grid-template-columns: 1fr; }
  .ba-arrow { display: none; }
  .ba-arrow--mobile {
    display: grid;
    position: static;
    transform: rotate(90deg);
    justify-self: center;
    width: 44px;
    height: 44px;
    border-width: 3px;
  }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__portrait { grid-row: 1; }
}

@media (max-width: 760px) {
  /* La barre CTA fixe remplace la pastille WhatsApp flottante */
  .cta-bar { display: flex; }
  .wa-float { display: none; }
  body { padding-bottom: 76px; }
  :root { --header-h: 56px; }
  .stat-grid--3 { grid-template-columns: 1fr; text-align: left; gap: var(--sp-2); }
  .stat-grid--3 .stat { display: flex; align-items: baseline; gap: var(--sp-2); text-align: left; }
  .stat-grid--3 .stat__label { margin-top: 0; }
  .lead { max-width: none; }
}

@media (max-width: 560px) {
  .service-board { grid-template-columns: 1fr; }
  .brand__name { display: none; }
  .site-footer__legal { flex-direction: column; }
  .photo-strip { grid-template-columns: repeat(3, 1fr); }
  .faq summary { padding: var(--sp-4); font-size: 1rem; }
  .card { padding: var(--sp-5); }
  .ba-panel { padding: var(--sp-4); }
}

/* Ecrans tres larges : on evite que les mesures s'etirent */
@media (min-width: 1400px) {
  :root { --container: 1200px; }
}

/* ==========================================================================
   10. PREFERENCES UTILISATEUR
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; }
  .marquee__track { animation: none; }
  .btn:hover, .card--lift:hover, .offer:hover, .ad-card:hover,
  .marquee a:hover img { transform: none; }
}

@media (prefers-contrast: more) {
  :root {
    --muted: #3A4550;
    --faint: #3A4550;
    --line: rgba(26, 60, 52, .3);
    --line-strong: rgba(26, 60, 52, .5);
  }
}

@media print {
  .site-header, .cta-bar, .wa-float, .skip-link, .marquee, .mobile-nav { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .section { padding-block: 18pt; }
  a::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
  .card, .offer, .ad-card { break-inside: avoid; box-shadow: none; }
}