/* =============================================================================
   CAP HORIZON SANTÉ
   Palette et typographie alignées sur hibyrd.fr (couleurs relevées sur le site).
   Bleu = Cap Horizon Conseil · Orange = SIM'URG · Framboise = la typographie.
   Grammaire : grands aplats de couleur pleine, titres géants en graisse légère,
   formes organiques en arrière-plan, beaucoup de respiration.
   ========================================================================== */

/* Gothic A1 : la grotesque géométrique d'hibyrd.fr. Graisse 300 pour les grands
   titres, 700 réservé à l'emphase — c'est le contraste qui fait le style.
   Auto-hébergée : sous-ensemble latin uniquement (Gothic A1 est une police
   coréenne de 99 sous-ensembles ; les 98 autres ne servent à rien ici).
   Aucun appel à Google : ni requête bloquante, ni adresse IP transmise. */
@font-face {
  font-family: 'Gothic A1';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/gothic-a1-latin-300.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: 'Gothic A1';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/gothic-a1-latin-400.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: 'Gothic A1';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/gothic-a1-latin-500.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: 'Gothic A1';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/gothic-a1-latin-600.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: 'Gothic A1';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/gothic-a1-latin-700.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;
}

/* -----------------------------------------------------------------------------
   1. JETONS
   -------------------------------------------------------------------------- */
:root {
  /* — Bleu · Cap Horizon Conseil —
     --blue est la couleur de marque ; --blue-deep sert aux aplats portant du
     texte blanc (le bleu de marque ne passe pas le contraste AA sur blanc). */
  --blue:        #02B1A8;
  --blue-deep:   #067E78;
  --blue-soft:   #E4F6F5;

  /* — Orange · SIM'URG —
     Orange clair : sur ses aplats, le texte est marine et les titres framboise. */
  --orange:      #FCA777;
  --orange-deep: #E3854D;
  --orange-soft: #FEF1E8;

  /* — Framboise · la couleur des titres — */
  --framboise:   #AA3C5C;
  --framboise-deep: #8E3049;

  /* — Marine · texte courant et aplats profonds — */
  --marine:      #2B2D4E;
  --marine-deep: #1F2039;

  /* — Compléments — */
  --corail:      #F0706C;
  --rose:        #FDEFEF;
  --white:       #FFFFFF;
  --paper:       #FBFAFB;

  --ink:            var(--marine);
  --muted:          #6B6C85;
  --muted-on-dark:  rgba(255,255,255,.76);
  --muted-on-light: #7A5560;          /* texte secondaire sur aplat orange */
  --rule:           rgba(43,45,78,.14);
  --rule-on-dark:   rgba(255,255,255,.22);
  --rule-on-light:  rgba(43,45,78,.20);

  /* — Accent actif : surchargé par [data-brand] — */
  --accent:      var(--blue);
  --accent-deep: var(--blue-deep);
  --accent-soft: var(--blue-soft);

  /* — Typographie — */
  --font:     'Gothic A1', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fw-light: 300;  --fw-reg: 400;  --fw-med: 500;  --fw-semi: 600;  --fw-bold: 700;
  --tracking: .14em;

  /* — Rythme — */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
  --s6:1.5rem; --s8:2rem;  --s12:3rem;  --s16:4rem;
  --maxw: 1180px;
  --header-h: 84px;
  --r-md:12px; --r-lg:22px; --r-pill:999px;
  --ease: 220ms cubic-bezier(.4,0,.2,1);
}

[data-brand="conseil"] { --accent: var(--blue);   --accent-deep: var(--blue-deep);   --accent-soft: var(--blue-soft); }
[data-brand="urg"]     { --accent: var(--orange); --accent-deep: var(--orange-deep); --accent-soft: var(--orange-soft); }

/* -----------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-weight: var(--fw-reg);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* Titres : légers, grands, en framboise. Le bold ne sert qu'à l'emphase. */
h1, h2, h3, h4 {
  font-weight: var(--fw-light);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--framboise);
  margin: 0 0 var(--s6);
}
h1 { font-size: clamp(2.4rem, 6.4vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 4.4vw, 3.2rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: var(--fw-semi); letter-spacing:-.01em; }
h4 { font-size: 1rem; font-weight: var(--fw-semi); letter-spacing: 0; color: var(--marine); }
strong, b { font-weight: var(--fw-bold); }

p { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }

.wrap { width:100%; max-width: var(--maxw); margin-inline:auto; padding-inline: var(--s6); }

.skip-link {
  position:absolute; left:-9999px; background: var(--framboise); color: var(--white);
  padding: var(--s3) var(--s4); z-index:999; border-radius: var(--r-md);
}
.skip-link:focus { left: var(--s4); top: var(--s4); }
:focus-visible { outline: 2px solid var(--corail); outline-offset: 3px; }

/* -----------------------------------------------------------------------------
   3. INVERSIONS DE FOND
   .on-dark  → aplats profonds (marine, bleu foncé) : texte blanc
   .on-light → aplats clairs   (orange, rose)       : texte marine, titres framboise
   -------------------------------------------------------------------------- */
.on-dark, .on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--white); }
.on-dark .lede, .on-dark p { color: var(--muted-on-dark); }
.on-dark .kicker { color: var(--orange); }

.on-light { color: var(--marine); }
.on-light h1, .on-light h2, .on-light h3 { color: var(--framboise); }
.on-light h4 { color: var(--marine); }
.on-light .lede, .on-light p { color: var(--muted-on-light); }
.on-light .kicker { color: var(--framboise); }

/* -----------------------------------------------------------------------------
   4. ÉLÉMENTS DE LANGAGE
   -------------------------------------------------------------------------- */
.kicker {
  display:inline-block; font-size:.75rem; font-weight: var(--fw-bold);
  letter-spacing: var(--tracking); text-transform: uppercase;
  color: var(--blue); margin-bottom: var(--s6);
}

.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: var(--fw-light); line-height:1.6; color: var(--muted);
}

.chip {
  display:inline-flex; align-items:center; gap: var(--s2);
  padding: 7px 16px; border: 1.5px solid currentColor; border-radius: var(--r-pill);
  font-size:.72rem; font-weight: var(--fw-semi); letter-spacing:.08em; text-transform: uppercase;
}

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap: var(--s2);
  padding: 15px 32px; border: 1.5px solid var(--accent); border-radius: var(--r-pill);
  background: transparent; color: var(--accent);
  font-family: inherit; font-size:.9rem; font-weight: var(--fw-semi); letter-spacing:.04em;
  text-decoration:none; cursor:pointer;
  transition: background var(--ease), color var(--ease), border-color var(--ease), transform var(--ease);
}
.btn:hover { background: var(--accent); color: var(--white); transform: translateY(-2px); }
.btn--solid { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--white); }
.btn--solid:hover { background: var(--marine); border-color: var(--marine); }
.btn--lg { padding: 18px 40px; font-size: 1rem; }

/* Boutons sur aplat profond */
.on-dark .btn { border-color: var(--white); color: var(--white); }
.on-dark .btn:hover { background: var(--white); color: var(--marine); }
.on-dark .btn--solid { background: var(--white); color: var(--marine); border-color: var(--white); }
.on-dark .btn--solid:hover { background: var(--orange); color: var(--marine); border-color: var(--orange); }

/* Boutons sur aplat clair */
.on-light .btn { border-color: var(--framboise); color: var(--framboise); }
.on-light .btn:hover { background: var(--framboise); color: var(--white); }
.on-light .btn--solid { background: var(--framboise); color: var(--white); border-color: var(--framboise); }
.on-light .btn--solid:hover { background: var(--framboise-deep); border-color: var(--framboise-deep); }

/* -----------------------------------------------------------------------------
   5. SECTIONS & APLATS
   -------------------------------------------------------------------------- */
.section { padding-block: clamp(4.5rem, 10vw, 9rem); position: relative; overflow: hidden; }

.bg-paper  { background: var(--paper); }
.bg-rose   { background: var(--rose); }
.bg-marine { background: var(--marine); }
.bg-blue   { background: var(--blue-deep); }
.bg-orange { background: var(--orange); }

.section-head { max-width: 60ch; margin-bottom: var(--s16); position: relative; z-index:1; }
.section-head--center { margin-inline:auto; text-align:center; }

.shape { position:absolute; pointer-events:none; opacity:.5; z-index:0; }
.shape--tr { top:-12%;   right:-8%;  width: min(46vw, 560px); }
.shape--bl { bottom:-18%; left:-10%; width: min(40vw, 480px); }
.section > .wrap { position: relative; z-index: 1; }

/* -----------------------------------------------------------------------------
   6. EN-TÊTE
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top:0; z-index:100;
  background: rgba(255,255,255,.93); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.nav { display:flex; align-items:center; justify-content:space-between; gap: var(--s6); height: var(--header-h); }
.brand { display:inline-flex; align-items:center; gap: var(--s3); text-decoration:none; flex:none; }
/* Le voilier est en portrait : on cale sur la hauteur, la largeur suit. */
.brand svg, .brand img { width:auto; height:46px; }
.brand__name {
  font-weight: var(--fw-bold); font-size:1.02rem; letter-spacing:.02em;
  color: var(--marine); text-transform: uppercase; white-space: nowrap;
}
.brand__name em { font-style: normal; font-weight: var(--fw-light); color: var(--framboise); }

.nav__links { display:flex; align-items:center; gap: clamp(1rem,2.4vw,2.2rem); list-style:none; margin:0; padding:0; }
.nav__links a:not(.btn) {
  font-size:.88rem; font-weight: var(--fw-med); color: var(--muted);
  text-decoration:none; transition: color var(--ease);
}
.nav__links a:not(.btn):hover, .nav__links a[aria-current="page"] { color: var(--framboise); }
.nav__links .btn { padding: 11px 24px; font-size:.82rem; border-color: var(--framboise); color: var(--framboise); }
.nav__links .btn:hover { background: var(--framboise); color: var(--white); }

.nav__toggle { display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.nav__toggle span { width:24px; height:2px; background: var(--marine); border-radius:2px; }

@media (max-width: 960px) {
  .nav__toggle { display:flex; }
  .nav__links {
    position:absolute; inset: var(--header-h) 0 auto;
    flex-direction:column; align-items:stretch; gap:0;
    padding: var(--s4) var(--s6) var(--s8);
    background: var(--white); border-bottom: 1px solid var(--rule); display:none;
  }
  .nav__links.is-open { display:flex; }
  .nav__links li { padding-block: var(--s3); border-bottom: 1px solid var(--rule); }
  .nav__links li:last-child { border-bottom:0; padding-top: var(--s6); }
  .nav__links .btn { width:100%; }
}

/* -----------------------------------------------------------------------------
   7. HERO — aplat marine
   -------------------------------------------------------------------------- */
.hero {
  position:relative; background: var(--marine); color: var(--white);
  padding-block: clamp(4.5rem, 11vw, 8.5rem); overflow:hidden;
}
.hero h1 { max-width: 17ch; margin-block: var(--s8) var(--s8); color: var(--white); }
.hero h1 em { font-style: normal; font-weight: var(--fw-bold); color: var(--orange); }
.hero__lede { max-width: 58ch; color: var(--muted-on-dark); }
.hero__cta { display:flex; flex-wrap:wrap; gap: var(--s4); margin-top: var(--s12); }
.hero .wrap { position:relative; z-index:1; }

/* -----------------------------------------------------------------------------
   8. LE MODÈLE HYBRIDE
   -------------------------------------------------------------------------- */
.chain { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--s8); }
@media (max-width: 900px) { .chain { grid-template-columns:1fr; } }

.chain__step { padding-top: var(--s8); border-top: 2px solid var(--c, var(--blue)); }
.chain__step:nth-child(1) { --c: var(--blue); }
.chain__step:nth-child(2) { --c: var(--framboise); }
.chain__step:nth-child(3) { --c: var(--orange); }
.chain__num { display:block; font-size:2.6rem; font-weight: var(--fw-light); color: var(--c); line-height:1; margin-bottom: var(--s4); }
.chain__step h3 { margin-bottom: var(--s3); color: var(--marine); }
.chain__step p  { color: var(--muted); font-size:.95rem; }

/* -----------------------------------------------------------------------------
   9. LES DEUX VERSANTS
   -------------------------------------------------------------------------- */
.versants { display:grid; grid-template-columns: repeat(2,1fr); gap: var(--s6); }
@media (max-width: 940px) { .versants { grid-template-columns:1fr; } }

.versant {
  position:relative; display:flex; flex-direction:column;
  padding: clamp(2rem,4vw,3.25rem); border-radius: var(--r-lg);
  overflow:hidden; transition: transform var(--ease);
}
.versant:hover { transform: translateY(-5px); }
.versant > * { position:relative; z-index:1; }
.versant--blue   { background: var(--blue-deep); }
.versant--orange { background: var(--orange); }

.versant__head { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap: var(--s3); margin-bottom: var(--s8); }
.versant__brand { display:block; font-size:1.35rem; font-weight: var(--fw-bold); letter-spacing:.04em; text-transform: uppercase; }
.versant__brand em { font-style: normal; font-weight: var(--fw-light); }
.versant__role { display:block; margin-top: var(--s2); font-size:.72rem; font-weight: var(--fw-semi); letter-spacing: var(--tracking); text-transform: uppercase; opacity:.8; }
.versant__title { font-size: clamp(1.5rem,2.6vw,2rem); font-weight: var(--fw-light); line-height:1.15; margin-bottom: var(--s4); }
.versant__lede { margin-bottom: var(--s8); }

.versant__list { list-style:none; margin:0 0 var(--s12); padding: var(--s8) 0 0; display:grid; gap: var(--s6); }
.versant--blue   .versant__list { border-top: 1px solid var(--rule-on-dark); }
.versant--orange .versant__list { border-top: 1px solid var(--rule-on-light); }
.versant__list li { display:grid; grid-template-columns: 20px 1fr; gap: var(--s4); align-items:start; }
.versant__list svg { width:18px; height:18px; margin-top:5px; }
.versant--blue   .versant__list svg { color: var(--orange); }
.versant--orange .versant__list svg { color: var(--framboise); }
.versant__list strong { display:block; font-weight: var(--fw-semi); margin-bottom:2px; }
.versant--blue   .versant__list strong { color: var(--white); }
.versant--orange .versant__list strong { color: var(--marine); }
.versant__list span { font-size:.9rem; line-height:1.55; }
.versant--blue   .versant__list span { color: var(--muted-on-dark); }
.versant--orange .versant__list span { color: var(--muted-on-light); }
.versant__note {
  margin: calc(-1 * var(--s6)) 0 var(--s8);
  padding-top: var(--s4);
  font-size: .82rem; line-height: 1.5;
}
.versant--blue   .versant__note { color: var(--muted-on-dark);  border-top: 1px solid var(--rule-on-dark); }
.versant--orange .versant__note { color: var(--muted-on-light); border-top: 1px solid var(--rule-on-light); }
.versant--orange .versant__note strong { color: var(--framboise); }
.versant--blue   .versant__note strong { color: var(--white); }

.versant__foot { margin-top:auto; }

/* -----------------------------------------------------------------------------
   10. CARTES
   -------------------------------------------------------------------------- */
.grid-3 { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--s8); }
.grid-2 { display:grid; grid-template-columns: repeat(2,1fr); gap: clamp(2.5rem,6vw,5rem); align-items:center; }
@media (max-width: 900px) { .grid-3, .grid-2 { grid-template-columns:1fr; } }

.card { padding: var(--s8); background: var(--white); border-radius: var(--r-lg); border: 1px solid var(--rule); }
.card h3 { margin-bottom: var(--s3); color: var(--marine); }
.card p  { color: var(--muted); font-size:.95rem; }
.card__num { display:block; font-size:.75rem; font-weight: var(--fw-bold); letter-spacing: var(--tracking); text-transform: uppercase; color: var(--framboise); margin-bottom: var(--s4); }

/* Offre : intertitres de famille et méta tarifaire des cartes */
.offer-group {
  display:flex; align-items:baseline; gap: var(--s4); flex-wrap:wrap;
  margin: var(--s16) 0 var(--s8); padding-bottom: var(--s3);
  border-bottom:1px solid var(--rule);
  font-size: 1.05rem; font-weight: var(--fw-semi); color: var(--marine); letter-spacing:-.01em;
}
.offer-group:first-of-type { margin-top:0; }
.offer-group span {
  font-size:.72rem; font-weight: var(--fw-bold); letter-spacing: var(--tracking);
  text-transform: uppercase; color: var(--blue);
}
.card__meta { font-size:.8rem !important; color: var(--framboise) !important; margin-bottom: var(--s3) !important; }
.card__meta strong { color: var(--marine); font-weight: var(--fw-bold); }
.card h3 a { text-decoration:none; }
.card h3 a:hover { color: var(--framboise); }
.offer-note {
  margin-top: var(--s12); padding: var(--s6); border-left:3px solid var(--blue);
  background: var(--blue-soft); border-radius: var(--r-md);
  font-size:.92rem; line-height:1.6; color: var(--marine);
}

/* Open Badges */
.badges { margin: var(--s16) 0 0; text-align:center; }
.badges img { width:100%; max-width: 820px; height:auto; margin:0 auto; }
.badges figcaption { margin-top: var(--s4); font-size:.85rem; color: var(--muted-on-dark); }

/* Fiches formation : bloc « L'essentiel » — le tableau que lit l'auditeur Qualiopi. */
.specs { display:grid; grid-template-columns: repeat(2,1fr); gap:0; margin:0; border-top:1px solid var(--rule); }
@media (max-width: 820px) { .specs { grid-template-columns:1fr; } }
.spec { padding: var(--s6) var(--s6) var(--s6) 0; border-bottom:1px solid var(--rule); }
.specs > .spec:nth-child(odd) { padding-right: var(--s12); }
.spec dt {
  font-size:.72rem; font-weight: var(--fw-bold); letter-spacing: var(--tracking);
  text-transform: uppercase; color: var(--framboise); margin-bottom: var(--s2);
}
.spec dd { margin:0; font-size:.95rem; line-height:1.6; color: var(--muted); }
.spec dd strong { color: var(--marine); font-weight: var(--fw-semi); }

/* Date de mise à jour de la fiche — exigée à l'indicateur 1 du RNQ. */
.fiche-maj {
  margin: var(--s5) 0 0; font-size:.78rem; letter-spacing:.04em;
  color: var(--muted); text-align:right;
}
@media (max-width: 820px) { .fiche-maj { text-align:left; } }

/* Note de source sous un chiffre avancé. Discrète, mais lisible : sur ce marché,
   un chiffre non sourcé se retourne contre celui qui l'avance. */
.source-note {
  margin: calc(var(--s4) * -1) 0 0; max-width: 62ch;
  font-size:.78rem; line-height:1.6; color: var(--muted);
}
.source-note a { color: inherit; text-underline-offset:.18em; }
.source-note a:hover { color: var(--accent-deep); }

/* Listes à puces cochées des fiches */
.checks { list-style:none; margin:0; padding:0; display:grid; gap: var(--s4); max-width: 78ch; }
.checks li {
  position:relative; padding-left: var(--s8); font-size:.97rem; line-height:1.65; color: var(--muted);
}
.checks li::before {
  content:""; position:absolute; left:0; top:.55em;
  width:14px; height:8px; border-left:2px solid var(--blue); border-bottom:2px solid var(--blue);
  transform: rotate(-45deg);
}
.on-dark .checks li { color: var(--muted-on-dark); }
.checks li strong { color: var(--marine); font-weight: var(--fw-semi); }

.chips { display:flex; flex-wrap:wrap; gap: var(--s3); margin-top: var(--s8); }

/* Deux photos côte à côte, même rapport 4/3 : les hauteurs s'alignent seules. */
.shots-2 { display:grid; grid-template-columns:1fr 1fr; gap: var(--s6); margin-bottom: var(--s16); }
@media (max-width: 900px) { .shots-2 { grid-template-columns:1fr; gap: var(--s8); } }

/* .shot est réglé pour les aplats sombres : on le rhabille sur fond clair. */
#references .shot img { border-color: var(--rule); box-shadow: 0 18px 44px rgba(43,45,78,.13); }
#references .shot figcaption { color: var(--muted); }
#references .shot figcaption em { font-style: italic; }

/* Références clients : logos tiers, laissés dans leurs couleurs d'origine. */
.refs {
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap: clamp(2.5rem, 6vw, 5.5rem);
}
.ref { max-width: 320px; text-align:center; }
/* Les deux logos n'ont pas le même rapport : on cale sur le poids optique,
   pas sur une hauteur commune, sinon le logo le plus large écrase l'autre. */
.ref img { width:auto; margin:0 auto; display:block; }
.ref--large img { height: clamp(42px, 5vw, 56px); }
.ref--tall  img { height: clamp(48px, 5.6vw, 64px); }
.ref__note { margin-top: var(--s4); font-size:.82rem; line-height:1.5; color: var(--muted); }
.ref__note strong { color: var(--framboise); font-weight: var(--fw-semi); }
.ref__note em { font-style: italic; }

/* Captures produit : cadre sombre, coins arrondis, légende discrète. */
.shot { margin:0; }
.shot img {
  width:100%; height:auto; border-radius: var(--r-lg);
  border: 1px solid var(--rule-on-dark);
  box-shadow: 0 24px 60px rgba(31,32,57,.28);
}
.shot figcaption {
  margin-top: var(--s3); font-size:.82rem; line-height:1.5;
  color: var(--muted-on-dark);
}
.shot--wide { margin-top: var(--s16); }

.shots { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--s6); margin-top: var(--s8); }
@media (max-width: 900px) { .shots { grid-template-columns:1fr; gap: var(--s8); } }

/* Chiffres-clés : grands nombres en graisse légère, à la manière des aplats. */
.stats {
  display:grid; grid-template-columns: repeat(3,1fr); gap: var(--s8);
  margin: var(--s16) 0 0; padding-top: var(--s8);
  border-top: 1px solid var(--rule-on-dark);
}
@media (max-width: 900px) { .stats { grid-template-columns:1fr; gap: var(--s6); } }
.stats__item dt {
  font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: var(--fw-light);
  line-height:1; color: var(--orange); margin-bottom: var(--s3);
}
.stats__item dd { margin:0; font-size:.88rem; line-height:1.5; color: var(--muted-on-dark); }

.proof { display:grid; gap: var(--s6); }
.proof__item { padding-left: var(--s6); border-left: 2px solid var(--orange); }
.proof__item strong { display:block; margin-bottom: var(--s1); }
.proof__item span { font-size:.92rem; }
.on-dark .proof__item strong { color: var(--white); }
.on-dark .proof__item span { color: var(--muted-on-dark); }

/* -----------------------------------------------------------------------------
   11. OFFRE DE LANCEMENT
   -------------------------------------------------------------------------- */
.offer__why { display:grid; grid-template-columns: repeat(3,1fr); gap: var(--s8); margin-top: var(--s12); padding-top: var(--s8); }
@media (max-width: 860px) { .offer__why { grid-template-columns:1fr; gap: var(--s6); } }
.offer__why h4 { margin-bottom: var(--s2); }
.offer__why p  { font-size:.92rem; }

/* -----------------------------------------------------------------------------
   12. PIED DE PAGE
   -------------------------------------------------------------------------- */
.site-footer { background: var(--marine); color: var(--white); padding-block: var(--s16) var(--s8); font-size:.9rem; }
.footer-grid { display:grid; grid-template-columns: 1.7fr repeat(3,1fr); gap: var(--s8); margin-bottom: var(--s12); }
@media (max-width: 940px) { .footer-grid { grid-template-columns:1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns:1fr; } }
.site-footer .brand__name { color: var(--white); }
.site-footer .brand__name em { color: var(--orange); }
.site-footer h4 { font-size:.72rem; letter-spacing: var(--tracking); text-transform:uppercase; color: var(--orange); margin-bottom: var(--s4); }
.site-footer ul { list-style:none; margin:0; padding:0; display:grid; gap: var(--s3); }
.site-footer a { color: var(--muted-on-dark); text-decoration:none; transition: color var(--ease); }
.site-footer a:hover { color: var(--white); }
.footer-desc { margin-top: var(--s6); font-size:.72rem; letter-spacing: var(--tracking); text-transform:uppercase; color: var(--muted-on-dark); }
.footer-desc em { font-style:normal; color: var(--orange); }
.footer-baseline { margin-top: var(--s2); font-size:.72rem; font-weight: var(--fw-med); letter-spacing: var(--tracking); text-transform:uppercase; color: var(--white); }
.footer-legal { display:flex; flex-wrap:wrap; gap: var(--s4); justify-content:space-between; padding-top: var(--s6); border-top: 1px solid var(--rule-on-dark); color: var(--muted-on-dark); font-size:.78rem; }

/* -----------------------------------------------------------------------------
   13. APPARITION AU DÉFILEMENT
   -------------------------------------------------------------------------- */
.reveal { opacity:0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s cubic-bezier(.22,1,.36,1); transition-delay: var(--d,0ms); }
.reveal.is-in { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; transition:none; }
  .btn:hover, .versant:hover { transform:none; }
}

/* -----------------------------------------------------------------------------
   14. LEURRE ANTI-SPAM
   -------------------------------------------------------------------------- */
/* Leurre anti-robot : hors écran, jamais annoncé aux lecteurs d'écran. */
.leurre { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form__alert {
  margin-top: var(--s8); padding: var(--s4) var(--s6);
  background: var(--rose); border-left: 3px solid var(--corail);
  border-radius: var(--r-md); color: var(--framboise-deep);
  font-size: .9rem; font-weight: var(--fw-med);
}

/* Pages de texte long */
.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(1.4rem,2.4vw,1.9rem); margin-top: var(--s12); }
.prose h2:first-child { margin-top:0; }
.prose p, .prose li { color: var(--muted); }
.prose ul { padding-left: var(--s6); }
.prose li { margin-bottom: var(--s2); }
.prose a { color: var(--framboise); }

/* -----------------------------------------------------------------------------
   FORMULAIRES
   -------------------------------------------------------------------------- */
.form { margin-top: var(--s8); }
.form__row { display:grid; grid-template-columns:1fr 1fr; gap: var(--s4); }
@media (max-width: 700px) { .form__row { grid-template-columns:1fr; } }

.field { margin-bottom: var(--s4); }
.field label { display:block; font-size:.82rem; font-weight: var(--fw-semi); color: var(--marine); margin-bottom: var(--s2); }
.field abbr { color: var(--corail); text-decoration:none; }

.field input, .field select, .field textarea {
  width:100%; padding: 13px 16px;
  font-family: inherit; font-size: .95rem; color: var(--ink);
  background: var(--white); border: 1.5px solid var(--rule); border-radius: var(--r-md);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.field textarea { resize: vertical; line-height:1.6; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color: var(--accent-deep);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.field input::placeholder, .field textarea::placeholder { color: #A6A7B8; }

.field--check { display:flex; align-items:flex-start; gap: var(--s3); margin-top: var(--s6); }
.field--check input { width:18px; height:18px; flex:0 0 auto; margin-top:3px; accent-color: var(--framboise); }
.field--check label { font-weight: var(--fw-reg); font-size:.85rem; line-height:1.55; color: var(--muted); margin:0; }
.field--check a { color: var(--framboise); }

.page-hero { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.page-hero h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); }

.todo { background: rgba(252,167,119,.35); border-bottom: 1px dotted var(--corail); padding: 0 5px; border-radius: 3px; }