/* =========================================================================
   POLICES AUTO-HEBERGEES
   Inter et Source Serif 4, sous licence SIL Open Font License 1.1.
   Servies depuis ce site, jamais depuis un serveur tiers : la politique de
   confidentialite affirme l'absence totale de traceur, aucune page ne doit
   donc appeler un domaine externe.
   ========================================================================= */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-400-latin.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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-600-latin.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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-700-latin.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: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/inter-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/inter-800-latin.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: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/inter-900-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/inter-900-latin.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: 'Source Serif 4';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/sourceserif4-500italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'Source Serif 4';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/sourceserif4-500italic-latin.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: 'Source Serif 4';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/sourceserif4-600italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'Source Serif 4';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/sourceserif4-600italic-latin.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: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/sourceserif4-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/sourceserif4-400-latin.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: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/sourceserif4-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/sourceserif4-600-latin.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: 'Source Serif 4';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/sourceserif4-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'Source Serif 4';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/sourceserif4-700-latin.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: 'Source Serif 4';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/sourceserif4-900-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'Source Serif 4';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('fonts/sourceserif4-900-latin.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;
}

/* =========================================================================
   DESIGN KIT — Page de vente « funnel » YoocanFly
   Système de référence (issu de la page Malorie Salvador), généralisé.

   CE QUI EST FIGÉ : le LANGAGE VISUEL funnel.io (contraste fort, gros titres,
   color blocking sombre/clair, CTA d'accent proéminent, preuve sociale,
   sticky mobile). C'est ça, « ressembler à une page de vente ».

   CE QUI EST LIBRE : la composition, l'ordre et le choix des sections.
   Pioche/assemble librement les composants ci-dessous selon l'offre.

   PAR CLIENT : seul le bloc `:root` change (couleurs + polices), d'après
   `content/brief-design.md`. On ne réécrit pas les composants : on les
   réutilise (et on peut en composer de nouveaux avec les mêmes primitives :
   .section--*, .kicker, h2.title + .hl, .btn--gold, grilles de cartes).
   ========================================================================= */

:root {
  /* ---- COULEURS — Denis Tallon Coaching --------------------------------
     Source : bloc :root du site de la marque. Le bleu #1231d4 et l'orange
     #e4661f sont des couleurs de marque réelles, pas une proposition.

     Choix de mapping : c'est le presque-noir #16181f (lui aussi couleur de
     la marque) qui porte le color blocking, pas le bleu. Le bleu est trop
     saturé pour servir de fond de grande section sous de longs paragraphes ;
     il reste accent structurel (filets, kickers, scène, pivot, étapes).
     --------------------------------------------------------------------- */
  /* Couleur de marque dominante (sections sombres, texte sur clair) */
  --color-primary:        #16181f;   /* presque-noir de marque */
  --color-primary-dark:   #0e1016;   /* dérivé : primaire assombrie (footer, overlays, topbar, trust) */
  --color-primary-soft:   #23262f;   /* dérivé : primaire éclaircie (cartes sur fond sombre) */
  --color-border-dark:    #343845;   /* dérivé : filets sur fond sombre */

  /* Couleur d'accent de la marque (CTA, surlignages, chiffres clés) */
  --color-secondary:      #e4661f;   /* orange de marque : tous les CTA */
  --color-accent:         #f5832f;   /* dérivé : orange éclairci (survol, texte sur fond sombre) */
  --color-secondary-deep: #b34a12;   /* orange de marque assombri : lisible en TEXTE sur clair (7,2:1) */

  /* Bleu de marque : accent structurel uniquement, jamais un fond de section */
  --color-brand:          #1231d4;
  --color-brand-dark:     #0d2296;
  --color-brand-soft:     #eaeeff;

  /* Fonds clairs & surfaces */
  --color-bg:             #faf8f4;   /* dérivé : crème de marque très éclaircie (fond clair principal) */
  --color-bg-alt:         #f4efe6;   /* crème de marque (fond clair alterné) */
  --color-surface:        #ffffff;   /* cartes sur fond clair */

  /* Textes */
  --color-text:           #16181f;   /* texte sur fond clair (= primary) */
  --color-text-soft:      #4b5060;   /* texte secondaire de marque (7,5:1 sur --color-bg) */
  --color-text-muted:     #6a6f7e;   /* dérivé : disclaimers, légendes */
  --color-text-light:     #e8e6e1;   /* texte sur fond sombre (couleur de marque) */
  --color-text-light-soft: rgba(255,255,255,.80);

  /* ---- TYPOGRAPHIE — polices de la marque ------------------------------
     Source Serif 4 est une serif, mais employée ici à l'exact opposé de
     l'anti-pattern « vitrine » : graisse 800 à 900, très grande, alignée à
     gauche, interlignage serré. C'est ce qui donne l'impact funnel tout en
     gardant l'identité de la marque.
     --------------------------------------------------------------------- */
  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --fs-hero: clamp(2.3rem, 4.6vw, 3.9rem);
  --fs-3xl: clamp(2.2rem, 4.6vw, 3.6rem);
  --fs-2xl: clamp(1.7rem, 3vw, 2.4rem);
  --fs-lg: 1.18rem;

  /* ---- INVARIANTS (ne pas modifier d'un client à l'autre) ------------- */
  --max: 1180px;
  --max-text: 760px;
  --pad: clamp(3.5rem, 8vw, 7rem);

  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 26px;
  --r-full: 999px;

  --sh-sm: 0 2px 10px rgba(22,24,31,.08);
  --sh-md: 0 12px 34px rgba(22,24,31,.13);
  --sh-lg: 0 28px 70px rgba(14,16,22,.30);
  --t: .28s ease;
}

/* =========================================================================
   RESET & BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-secondary-deep); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--color-primary); }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.08; margin: 0 0 .6rem; font-weight: 800; }
p { margin: 0 0 1rem; }
strong { font-weight: 700; }
:focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 3px; border-radius: 3px; }

/* =========================================================================
   LAYOUT
   ========================================================================= */
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2rem); }
.section { padding: var(--pad) 0; }
.section--cream { background: var(--color-bg); }
.section--alt { background: var(--color-bg-alt); }
.section--navy { background: var(--color-primary); color: var(--color-text-light); }
.section--navy h1, .section--navy h2, .section--navy h3 { color: #fff; }
.narrow { max-width: var(--max-text); margin-left: auto; margin-right: auto; }
.center { text-align: center; }

/* =========================================================================
   ÉLÉMENTS TYPO
   ========================================================================= */
.kicker {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-body); font-weight: 800;
  font-size: .76rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--color-secondary-deep); margin-bottom: 1rem;
}
.section--navy .kicker { color: var(--color-accent); }
.kicker::before { content: ""; width: 26px; height: 2px; background: currentColor; display: inline-block; }
.kicker.center { justify-content: center; }

/* Mot-clé surligné dans les titres */
.hl { color: var(--color-secondary-deep); }
.section--navy .hl, .hero .hl { color: var(--color-accent); }
.mark { background: linear-gradient(180deg, transparent 58%, rgba(228,102,31,.38) 58%); padding: 0 .05em; }

.lead { font-size: var(--fs-lg); color: var(--color-text-soft); }
.section--navy .lead { color: var(--color-text-light-soft); }
.muted { color: var(--color-text-muted); }
.section--navy .muted { color: rgba(255,255,255,.6); }

h2.title { font-size: var(--fs-3xl); max-width: 22ch; letter-spacing: -.01em; }
.center h2.title { margin-left: auto; margin-right: auto; }

/* =========================================================================
   BOUTONS
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-body); font-weight: 800; font-size: 1.02rem;
  padding: 1.05rem 2.1rem; border-radius: var(--r-full);
  border: 2px solid transparent; cursor: pointer; letter-spacing: .005em;
  transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t);
  text-align: center; line-height: 1.15;
}
/* CTA principal : couleur d'accent de la marque */
.btn--gold { background: var(--color-secondary); color: var(--color-primary); box-shadow: 0 10px 26px rgba(228,102,31,.36); }
.btn--gold:hover { background: var(--color-accent); color: var(--color-primary); transform: translateY(-3px); box-shadow: 0 16px 34px rgba(228,102,31,.46); }
.btn--navy { background: var(--color-primary); color: #fff; }
.btn--navy:hover { background: var(--color-primary-dark); color: #fff; transform: translateY(-3px); }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn--ghost-light:hover { background: #fff; color: var(--color-primary); }
.btn--lg { padding: 1.2rem 2.6rem; font-size: 1.1rem; }
.btn--block { width: 100%; }
.btn .arr { font-size: 1.1em; line-height: 1; transition: transform var(--t); }
.btn:hover .arr { transform: translateX(4px); }

/* Réassurance sous le CTA */
.reassure { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; font-size: .92rem; font-weight: 600; }
.reassure span { display: inline-flex; align-items: center; gap: .45rem; }
.reassure .tick { width: 1.05em; height: 1.05em; color: var(--color-accent); flex: 0 0 auto; }

.stars { display: inline-flex; gap: 2px; color: var(--color-secondary); }
.stars svg { width: 18px; height: 18px; }

/* =========================================================================
   BANDEAU D'ANNONCE
   ========================================================================= */
.topbar { background: var(--color-primary-dark); color: rgba(255,255,255,.86); font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-align: center; padding: .55rem 1rem; }
.topbar b { color: var(--color-accent); font-weight: 800; }
.topbar .sep { color: var(--color-secondary); margin: 0 .55rem; }
@media (max-width: 620px){ .topbar .opt { display:none; } }

/* =========================================================================
   HEADER (sticky, fond sombre pour rester lisible sur le logo)
   ========================================================================= */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--color-primary); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem clamp(1rem, 4vw, 2.2rem); box-shadow: 0 1px 0 var(--color-border-dark); transition: padding var(--t), box-shadow var(--t); }
.site-header.scrolled { box-shadow: var(--sh-md); padding-top: .5rem; padding-bottom: .5rem; }
.brand img { height: 50px; width: auto; transition: height var(--t); }
.scrolled .brand img { height: 42px; }
.nav { display: flex; align-items: center; gap: 1.7rem; }
.nav a.nav-link { font-size: .92rem; font-weight: 600; color: rgba(255,255,255,.86); }
.nav a.nav-link:hover { color: var(--color-accent); }
.header-cta { margin-left: .3rem; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; width: 44px; height: 44px; color: #fff; }
.nav-toggle svg { width: 28px; height: 28px; }

/* =========================================================================
   HERO
   ========================================================================= */
.hero { position: relative; isolation: isolate; color: var(--color-text-light); padding: clamp(3.5rem,7vw,6rem) 0 clamp(3rem,6vw,5rem); overflow: hidden; }
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.hero__overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(102deg, rgba(14,16,22,.96) 0%, rgba(13,17,44,.90) 42%, rgba(22,24,31,.62) 78%, rgba(22,24,31,.40) 100%); }
.hero__inner { max-width: 730px; }
.hero__rating { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.3rem; font-weight: 600; font-size: .95rem; }
.hero__rating .stars svg { color: var(--color-accent); fill: var(--color-accent); }
.hero h1 { font-size: var(--fs-hero); font-weight: 900; letter-spacing: -.015em; margin-bottom: 1.3rem; color: #fff; }
.hero__sub { font-size: clamp(1.08rem, 1.7vw, 1.32rem); color: rgba(255,255,255,.9); max-width: 48ch; margin-bottom: 2rem; }
.hero__cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.hero .reassure { color: rgba(255,255,255,.9); }

/* =========================================================================
   BARRE DE PREUVES (stats)
   ========================================================================= */
.trust { background: var(--color-primary-dark); color: #fff; padding: 0; }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-item { text-align: center; padding: 1.8rem 1.2rem; position: relative; }
.trust-item + .trust-item::before { content: ""; position: absolute; left: 0; top: 22%; height: 56%; width: 1px; background: var(--color-border-dark); }
.trust-item .num { font-family: var(--font-display); font-weight: 900; font-size: 2.3rem; color: var(--color-accent); line-height: 1; display: block; }
.trust-item .lbl { font-size: .86rem; color: rgba(255,255,255,.74); margin-top: .45rem; display: block; line-height: 1.4; }
.trust-item .lbl b { color: #fff; font-weight: 700; }
@media (max-width: 720px){ .trust-grid { grid-template-columns: repeat(2,1fr); } .trust-item:nth-child(odd)::before { display: none; } }

/* =========================================================================
   PROBLÈME — variante A : grille de cartes-symptômes
   ========================================================================= */
.pain-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.2rem; margin: 2.4rem 0 0; }
.pain-card { background: var(--color-surface); border-radius: var(--r-md); padding: 1.6rem; box-shadow: var(--sh-sm); border-left: 4px solid var(--color-secondary); display: flex; gap: 1rem; align-items: flex-start; }
.pain-card .ic { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: rgba(228,102,31,.14); color: var(--color-secondary-deep); }
.pain-card .ic svg { width: 26px; height: 26px; }
.pain-card h3 { font-family: var(--font-body); font-weight: 800; font-size: 1.12rem; margin: .1rem 0 .3rem; color: var(--color-primary); }
.pain-card p { margin: 0; color: var(--color-text-soft); font-size: .98rem; }

/* PROBLÈME — variante B : récit dramatisé (miroir avatar) */
.mirror { max-width: 720px; margin: 2.6rem auto 0; }
.mirror p { font-size: 1.16rem; color: var(--color-text); }
.mirror .scene { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.35rem; line-height: 1.5; color: var(--color-primary); border-left: 4px solid var(--color-secondary); padding-left: 1.3rem; margin: 1.6rem 0; }

/* Phrase pivot (fin de section problème) */
.pivot { text-align: center; font-family: var(--font-display); font-weight: 600; font-style: italic; font-size: clamp(1.4rem, 2.7vw, 2rem); color: var(--color-primary); max-width: 30ch; margin: 2.6rem auto 0; line-height: 1.35; }
.pivot b { font-style: normal; font-weight: 800; color: var(--color-secondary-deep); }

/* =========================================================================
   DIMENSIONS / PILIERS DE LA MÉTHODE (cartes sur fond sombre)
   ========================================================================= */
.dim-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.1rem; margin-top: 3rem; }
.dim-card { background: var(--color-primary-soft); border-radius: var(--r-md); padding: 1.7rem 1.4rem; border: 1px solid var(--color-border-dark); }
.dim-card .n { font-family: var(--font-display); font-weight: 900; font-size: 1.1rem; color: var(--color-accent); }
.dim-card h3 { font-size: 1.3rem; color: #fff; margin: .35rem 0 .45rem; }
.dim-card p { margin: 0; color: rgba(255,255,255,.74); font-size: .95rem; }

/* =========================================================================
   MÉTHODE / OUTILS (cartes sur fond clair)
   ========================================================================= */
.tools-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.2rem; margin-top: 2.6rem; }
.tool-card { background: var(--color-surface); border-radius: var(--r-md); padding: 1.8rem; box-shadow: var(--sh-sm); border: 1px solid rgba(22,24,31,.08); transition: transform var(--t), box-shadow var(--t); }
.tool-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.tool-card .tnum { font-family: var(--font-display); font-weight: 900; font-size: 1.05rem; color: var(--color-secondary-deep); letter-spacing: .04em; }
.tool-card h3 { font-size: 1.45rem; color: var(--color-primary); margin: .2rem 0 .5rem; }
.tool-card p { margin: 0; color: var(--color-text-soft); font-size: .98rem; }

/* =========================================================================
   SECTION SPLIT (image + texte, ex : mécanisme / preuve)
   ========================================================================= */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.split__media img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--sh-lg); aspect-ratio: 5/4; object-fit: cover; }
.feature-list { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: 1rem; }
.feature-list li { display: flex; gap: .8rem; align-items: flex-start; }
.feature-list .tick { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--color-secondary); color: var(--color-primary); display: grid; place-items: center; margin-top: 2px; }
.feature-list .tick svg { width: 15px; height: 15px; }
.feature-list b { color: var(--color-primary); }
.section--navy .feature-list b { color: #fff; }
.section--navy .feature-list li { color: rgba(255,255,255,.82); }

/* =========================================================================
   ÉTAPES (déroulé / comment ça marche)
   ========================================================================= */
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; margin-top: 2.8rem; }
.step-card { background: var(--color-surface); border-radius: var(--r-md); padding: 1.9rem 1.6rem; box-shadow: var(--sh-sm); position: relative; }
.step-card .sn { width: 52px; height: 52px; border-radius: 50%; background: var(--color-primary); color: var(--color-accent); display: grid; place-items: center; font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; margin-bottom: 1rem; }
.step-card h3 { font-size: 1.3rem; color: var(--color-primary); margin-bottom: .4rem; }
.step-card p { margin: 0; color: var(--color-text-soft); font-size: .98rem; }

/* =========================================================================
   BÉNÉFICES
   ========================================================================= */
.ben-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; margin-top: 2.8rem; }
.ben-card { background: var(--color-bg); border-radius: var(--r-md); padding: 1.8rem 1.6rem; border: 1px solid rgba(22,24,31,.07); transition: transform var(--t), box-shadow var(--t); }
.ben-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.ben-card .b-ic { width: 50px; height: 50px; border-radius: 13px; background: var(--color-primary); color: var(--color-accent); display: grid; place-items: center; margin-bottom: 1rem; }
.ben-card .b-ic svg { width: 26px; height: 26px; }
.ben-card h3 { font-size: 1.3rem; color: var(--color-primary); margin-bottom: .35rem; }
.ben-card p { margin: 0; color: var(--color-text-soft); font-size: .97rem; }

/* =========================================================================
   TÉMOIGNAGES (+ badge note globale)
   ========================================================================= */
.gbadge { display: inline-flex; align-items: center; gap: .8rem; background: var(--color-surface); border: 1px solid rgba(22,24,31,.1); border-radius: var(--r-full); padding: .7rem 1.4rem; box-shadow: var(--sh-sm); margin-bottom: 1rem; }
.gbadge .g { font-family: var(--font-body); font-weight: 800; font-size: 1.05rem; color: var(--color-primary); }
.gbadge .score { font-weight: 800; color: var(--color-primary); }
.gbadge .sub { font-size: .85rem; color: var(--color-text-muted); }
.testi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; margin-top: 2.6rem; }
.testi-card { background: var(--color-surface); border-radius: var(--r-md); padding: 1.7rem; box-shadow: var(--sh-sm); display: flex; flex-direction: column; gap: .8rem; border: 1px solid rgba(22,24,31,.06); }
.testi-card blockquote { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--color-text); }
.testi-person { display: flex; align-items: center; gap: .75rem; margin-top: auto; padding-top: .4rem; }
.avatar { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; color: #fff; font-weight: 800; font-family: var(--font-display); background: var(--color-primary); }
.testi-person .who { font-weight: 700; font-size: .92rem; color: var(--color-primary); }
.testi-person .ctx { font-size: .8rem; color: var(--color-text-muted); }

/* =========================================================================
   À PROPOS
   ========================================================================= */
.about-grid { display: grid; grid-template-columns: 42% 1fr; gap: clamp(2rem,5vw,4rem); align-items: center; }
.about-photo { position: relative; }
.about-photo img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--sh-lg); aspect-ratio: 4/5; object-fit: cover; }
.about-photo .frame { position: absolute; inset: 16px -16px -16px 16px; border: 3px solid var(--color-secondary); border-radius: var(--r-lg); z-index: -1; }
.about-badges { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.3rem 0; }
.badge { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 700; padding: .42rem .9rem; border-radius: var(--r-full); background: var(--color-surface); color: var(--color-primary); border: 1px solid rgba(22,24,31,.12); }
.badge svg { width: 15px; height: 15px; color: var(--color-secondary-deep); }
.sig-quote { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.35rem; color: var(--color-primary); border-left: 4px solid var(--color-secondary); padding-left: 1.2rem; margin-top: 1.5rem; }

/* =========================================================================
   FAQ
   ========================================================================= */
.faq { max-width: var(--max-text); margin: 2.6rem auto 0; }
details.faq-item { border: 1px solid rgba(22,24,31,.12); border-radius: var(--r-md); margin-bottom: .9rem; background: var(--color-surface); overflow: hidden; transition: box-shadow var(--t); }
details.faq-item[open] { box-shadow: var(--sh-sm); border-color: rgba(228,102,31,.5); }
details.faq-item summary { list-style: none; cursor: pointer; padding: 1.2rem 3rem 1.2rem 1.4rem; position: relative; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--color-primary); }
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary .plus { position: absolute; right: 1.3rem; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; transition: transform var(--t); color: var(--color-secondary-deep); }
details.faq-item summary .plus::before, details.faq-item summary .plus::after { content: ""; position: absolute; background: currentColor; border-radius: 2px; }
details.faq-item summary .plus::before { left: 0; right: 0; top: 10px; height: 2px; }
details.faq-item summary .plus::after { top: 0; bottom: 0; left: 10px; width: 2px; }
details.faq-item[open] summary .plus { transform: translateY(-50%) rotate(45deg); }
.faq-answer p { padding: 0 1.4rem 1.3rem; margin: 0; color: var(--color-text-soft); }
details.faq-item[open] .faq-answer { animation: fadeIn .35s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* =========================================================================
   CTA FINAL + FORMULAIRE
   ========================================================================= */
.final { position: relative; isolation: isolate; color: var(--color-text-light); padding: var(--pad) 0; overflow: hidden; }
.final__bg { position: absolute; inset: 0; z-index: -2; }
.final__bg img { width: 100%; height: 100%; object-fit: cover; }
.final__overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14,16,22,.90), rgba(14,16,22,.93)); }
.final h2.title { color: #fff; }
.final-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem,5vw,4rem); align-items: start; margin-top: 1rem; }
.final-copy p { color: rgba(255,255,255,.88); }
.final-copy .reassure { color: rgba(255,255,255,.92); margin-top: 1.4rem; }
/* Si CTA = lien externe (pas de formulaire), centrer le bloc copy */
.final--link .final-grid { grid-template-columns: 1fr; max-width: var(--max-text); margin-left: auto; margin-right: auto; text-align: center; }
.final--link .final-copy .reassure { justify-content: center; }

.form-card { background: var(--color-surface); border-radius: var(--r-lg); padding: clamp(1.6rem,4vw,2.5rem); box-shadow: var(--sh-lg); color: var(--color-text); }
.form-card h3 { font-size: 1.55rem; color: var(--color-primary); margin-bottom: .3rem; }
.form-card .fsub { color: var(--color-text-muted); font-size: .92rem; margin-bottom: 1.3rem; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: .88rem; font-weight: 700; margin-bottom: .35rem; color: var(--color-primary); }
.field label .req { color: var(--color-secondary-deep); }
.field input, .field textarea, .field select { width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--color-text); padding: .85rem 1rem; border: 1.5px solid rgba(22,24,31,.22); border-radius: var(--r-sm); background: #fcfbf9; transition: border-color var(--t), box-shadow var(--t); }
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--color-secondary); box-shadow: 0 0 0 3px rgba(228,102,31,.2); }
.field.has-error input, .field.has-error textarea { border-color: #c0392b; background: rgba(192,57,43,.04); }
.field .error-msg { display: none; color: #c0392b; font-size: .82rem; margin-top: .3rem; font-weight: 700; }
.field.has-error .error-msg { display: block; }
.form-card .btn { margin-top: .3rem; }
.form-foot { font-size: .8rem; color: var(--color-text-muted); margin-top: .9rem; text-align: center; }
.form-foot a { text-decoration: underline; }
.spinner { width: 18px; height: 18px; border: 2px solid rgba(22,24,31,.4); border-top-color: var(--color-primary); border-radius: 50%; animation: spin .7s linear infinite; display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.is-loading .spinner { display: inline-block; }
#form-result { margin-top: 1rem; font-size: .92rem; font-weight: 700; text-align: center; }
#form-result.err { color: #c0392b; }
.form-success { display: none; text-align: center; padding: 1rem 0; }
.form-success.show { display: block; animation: fadeIn .4s ease; }
.success-check { width: 74px; height: 74px; margin: 0 auto 1.1rem; border-radius: 50%; background: rgba(228,102,31,.16); display: grid; place-items: center; color: var(--color-secondary-deep); }
.success-check svg { width: 38px; height: 38px; }
.success-check svg path { stroke-dasharray: 48; stroke-dashoffset: 48; animation: draw .6s ease .15s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.form-success h3 { color: var(--color-primary); }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer { background: var(--color-primary-dark); color: rgba(255,255,255,.78); padding: clamp(3rem,6vw,4.5rem) 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.1fr; gap: 2.2rem; }
.site-footer h4 { font-family: var(--font-body); font-weight: 800; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--color-accent); margin: 0 0 1rem; }
.footer-brand img { height: 58px; width: auto; margin-bottom: 1rem; }
.site-footer a { color: rgba(255,255,255,.78); }
.site-footer a:hover { color: var(--color-accent); }
.footer-nav { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 1.2rem; }
.footer-nav li { margin-bottom: .55rem; }
.footer-contact p { margin: 0 0 .6rem; }
.footer-bottom { border-top: 1px solid var(--color-border-dark); margin-top: 2.4rem; padding-top: 1.4rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .82rem; color: rgba(255,255,255,.55); }
.footer-legal a { text-decoration: underline; }
.disclaimer { font-size: .8rem; color: rgba(255,255,255,.5); margin-top: 1.2rem; max-width: 72ch; line-height: 1.6; font-style: italic; }

/* =========================================================================
   CTA STICKY MOBILE
   ========================================================================= */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: .7rem clamp(.8rem,4vw,1.2rem); background: rgba(14,16,22,.96); backdrop-filter: blur(8px); box-shadow: 0 -4px 18px rgba(0,0,0,.3); transform: translateY(120%); transition: transform var(--t); }
.sticky-cta.show { transform: translateY(0); }
.sticky-cta .btn { width: 100%; }

/* =========================================================================
   ANIMATIONS AU SCROLL
   ========================================================================= */
.js [data-animate] { opacity: 0; transition: opacity .6s ease, transform .6s ease; will-change: opacity, transform; }
.js [data-animate="up"] { transform: translateY(26px); }
.js [data-animate="left"] { transform: translateX(26px); }
.js [data-animate="right"] { transform: translateX(-26px); }
.js [data-animate].visible { opacity: 1; transform: none; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 960px){
  .dim-grid { grid-template-columns: repeat(2,1fr); }
  .ben-grid, .testi-grid, .steps { grid-template-columns: 1fr 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .about-photo { max-width: 380px; margin: 0 auto; }
  .split { grid-template-columns: 1fr; }
  .split--rev .split__media { order: -1; }
  .final-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .nav { display: none; }
  .nav-toggle { display: inline-grid; place-items: center; }
  .nav.open { display: flex; flex-direction: column; align-items: stretch; gap: .2rem; position: absolute; top: 100%; left: 0; right: 0; background: var(--color-primary); padding: 1rem 1.4rem 1.4rem; box-shadow: var(--sh-md); }
  .nav.open a.nav-link { color: #fff; padding: .6rem 0; border-bottom: 1px solid var(--color-border-dark); }
  .nav.open .header-cta { margin: .8rem 0 0; }
  .nav.open .header-cta .btn { width: 100%; }
  .pain-grid, .tools-grid, .ben-grid, .testi-grid, .steps, .dim-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .mirror .scene { font-size: 1.2rem; }
}

/* =========================================================================
   AJOUTS CLIENT — Denis Tallon
   Composants absents du kit, composés avec ses primitives.
   Aucune règle existante n'est modifiée.
   ========================================================================= */

/* Ligne de crédibilité du hero (remplace .hero__rating à étoiles :
   aucune note d'avis n'existe, on n'en invente pas) */
.hero__rating .shield { width: 1.25em; height: 1.25em; color: var(--color-accent); flex: 0 0 auto; }
.hero__rating strong { color: #fff; font-weight: 800; }

/* Bleu de marque en accent structurel */
.mirror .scene { border-left-color: var(--color-brand); }
.sig-quote { border-left-color: var(--color-brand); }
.step-card .sn { background: var(--color-brand); color: #fff; }

/* Liste d'auto-diagnostic (section « Une seule de ces phrases suffit ») */
.check-list { list-style: none; padding: 0; margin: 2.6rem auto 0; max-width: var(--max-text); display: grid; gap: .9rem; }
.check-list li { display: flex; gap: .9rem; align-items: flex-start; background: var(--color-primary-soft); border: 1px solid var(--color-border-dark); border-radius: var(--r-md); padding: 1.05rem 1.3rem; font-size: 1.06rem; color: var(--color-text-light); }
.check-list .dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--color-secondary); margin-top: .62em; }

/* Bloc de bascule en fin de section sombre */
.switch { max-width: var(--max-text); margin: 2.6rem auto 0; border-left: 4px solid var(--color-secondary); padding: .3rem 0 .3rem 1.4rem; }
.switch p { color: rgba(255,255,255,.82); font-size: 1.08rem; }
.switch p.punch { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.3rem, 2.4vw, 1.75rem); color: #fff; line-height: 1.25; margin: .6rem 0 0; }

/* Encart de bascule sectorielle (sous la feature-list, fond sombre) */
.aside-note { margin-top: 2rem; padding: 1.3rem 1.5rem; background: rgba(255,255,255,.05); border: 1px solid var(--color-border-dark); border-radius: var(--r-md); }
.aside-note p { margin: 0; color: rgba(255,255,255,.82); font-size: 1rem; }
.aside-note b { color: #fff; }

/* Fiche de l'offre (« Ce qui est prévu, noir sur blanc ») */
.spec { max-width: 880px; margin: 2.6rem auto 0; background: var(--color-surface); border-radius: var(--r-md); box-shadow: var(--sh-sm); border: 1px solid rgba(22,24,31,.08); overflow: hidden; }
.spec-row { display: grid; grid-template-columns: 210px 1fr; gap: 1.4rem; padding: 1.15rem 1.6rem; border-bottom: 1px solid rgba(22,24,31,.08); }
.spec-row:last-child { border-bottom: 0; }
.spec-row dt { font-family: var(--font-body); font-weight: 800; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-secondary-deep); margin: .18rem 0 0; }
.spec-row dd { margin: 0; color: var(--color-text); }
@media (max-width: 620px){ .spec-row { grid-template-columns: 1fr; gap: .35rem; } }

/* Grille de réassurance sur fond sombre (section confidentialité) */
.safe-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1.1rem; margin-top: 2.8rem; }
.safe-card { background: var(--color-primary-soft); border: 1px solid var(--color-border-dark); border-radius: var(--r-md); padding: 1.7rem 1.5rem; }
.safe-card .s-ic { width: 46px; height: 46px; border-radius: 12px; background: rgba(228,102,31,.16); color: var(--color-accent); display: grid; place-items: center; margin-bottom: 1rem; }
.safe-card .s-ic svg { width: 24px; height: 24px; }
.safe-card h3 { font-size: 1.22rem; color: #fff; margin-bottom: .4rem; }
.safe-card p { margin: 0; color: rgba(255,255,255,.76); font-size: .97rem; }
@media (max-width: 720px){ .safe-grid { grid-template-columns: 1fr; } }

/* Mention légale sous une grille (expériences individuelles) */
.note-legal { max-width: var(--max-text); margin: 2.2rem auto 0; font-size: .88rem; line-height: 1.6; color: var(--color-text-muted); font-style: italic; text-align: center; }
.section--navy .note-legal { color: rgba(255,255,255,.6); }

/* Bandeau de rappel d'offre dans le sticky mobile */
.sticky-cta .sub { display: block; text-align: center; font-size: .74rem; font-weight: 600; color: rgba(255,255,255,.66); margin-top: .4rem; }

/* Témoignages : 4 avis réels, donc 2x2 plutôt que la grille 3 colonnes du kit */
.testi-grid--2 { grid-template-columns: repeat(2,1fr); max-width: 980px; margin-left: auto; margin-right: auto; }
@media (max-width: 720px){ .testi-grid--2 { grid-template-columns: 1fr; } }

/* Citation signature et badges sur fond sombre */
.section--navy .sig-quote { color: #fff; border-left-color: var(--color-accent); }
.section--navy .about-badges .badge { background: rgba(255,255,255,.06); color: #fff; border-color: var(--color-border-dark); }
.section--navy .about-badges .badge svg { color: var(--color-accent); }
.section--navy .about-photo .frame { border-color: var(--color-secondary); }

/* =========================================================================
   PAGES LÉGALES (mentions-legales.html, politique-confidentialite.html)
   ========================================================================= */
.legal { max-width: 820px; margin: 0 auto; }
.legal h1 { font-size: var(--fs-3xl); margin-bottom: 1.6rem; }
.legal h2 { font-size: var(--fs-2xl); margin: 2.8rem 0 .8rem; }
.legal h3 { font-size: 1.2rem; font-family: var(--font-body); font-weight: 800; margin: 1.8rem 0 .4rem; }
.legal p, .legal li { color: var(--color-text-soft); }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: .5rem; }
.legal dl { margin: 1.2rem 0; }
.legal dl > div { display: grid; grid-template-columns: 230px 1fr; gap: 1.2rem; padding: .85rem 0; border-bottom: 1px solid rgba(22,24,31,.1); }
.legal dl > div:last-child { border-bottom: 0; }
.legal dt { font-weight: 800; color: var(--color-text); font-size: .95rem; }
.legal dd { margin: 0; color: var(--color-text-soft); }
@media (max-width: 620px){ .legal dl > div { grid-template-columns: 1fr; gap: .3rem; } }

/* Placeholder visible : une donnée juridique manquante ne doit jamais être devinée */
.todo { display: inline-block; background: #fff4e0; border: 1px dashed var(--color-secondary); color: #8a3d0e; border-radius: var(--r-sm); padding: .15rem .55rem; font-size: .9rem; font-weight: 700; }
.todo-block { background: #fff4e0; border: 1px dashed var(--color-secondary); border-left: 4px solid var(--color-secondary); border-radius: var(--r-sm); padding: 1.1rem 1.3rem; margin: 1.4rem 0; }
.todo-block p { margin: 0; color: #8a3d0e; font-size: .95rem; }
.todo-block strong { color: #6d2f08; }

/* En-tête simplifié des pages légales */
.legal-head { background: var(--color-primary); color: var(--color-text-light); padding: clamp(2.6rem,5vw,4rem) 0 clamp(2rem,4vw,3rem); }
.legal-head h1 { color: #fff; margin-bottom: .5rem; }
.legal-head .crumb { font-size: .88rem; color: rgba(255,255,255,.66); margin: 0; }
.legal-head .crumb a { color: var(--color-accent); }