/* YM Mobility at Work, site vitrine. 2026-11-02.
   Codes de la présentation de Yannis : fond gris clair, titres condensés en gras,
   trois chevrons rouges devant chaque titre, listes en rouge, panneaux noirs arrondis pour les chiffres.
   Oswald porte les titres et les chiffres, Hanken Grotesk porte le texte. */

@font-face{font-family:"Oswald";font-weight:200 700;font-display:swap;src:url(/polices/oswald-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:100 900;font-style:normal;font-display:swap;src:url(/polices/hanken-grotesk-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-weight:100 900;font-style:italic;font-display:swap;src:url(/polices/hanken-grotesk-latin-wght-italic.woff2) format("woff2")}

:root{
  --fond:#ECEBE7;
  --surface:#F7F6F2;
  --encre:#21231C;
  --encre-douce:#4D4F47;
  --trait:#D3D1CA;
  --rouge:#BD241E;
  --rouge-fonce:#9A1C17;
  --rouge-clair:#E8574F;   /* le rouge lisible sur noir */
  --panneau:#161712;
  --panneau-texte:#F2F1EC;
  --panneau-doux:#B4B3AC;

  --titre:"Oswald","Arial Narrow",Impact,sans-serif;
  --texte:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;

  --cadre:1180px;
  --gouttiere:clamp(16px,4vw,40px);
  --r:20px;
  --r-petit:12px;
  --section:clamp(64px,9vw,128px);

  --chevrons:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 66 24'%3E%3Cpath fill='%23BD241E' d='M0 0h9l12 12-12 12H0l12-12zM22 0h9l12 12-12 12h-9l12-12zM44 0h9l12 12-12 12h-9l12-12z'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--fond);color:var(--encre);font-family:var(--texte);font-size:clamp(1rem,.96rem + .2vw,1.125rem);line-height:1.6;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3{font-family:var(--titre);font-weight:700;line-height:1.08;margin:0 0 .5em;letter-spacing:-.005em;text-wrap:balance}
h1{font-size:clamp(2.6rem,1.6rem + 5vw,5.6rem);text-transform:uppercase}
h2{font-size:clamp(2rem,1.5rem + 2.2vw,3.2rem)}
h3{font-size:clamp(1.35rem,1.2rem + .6vw,1.7rem);font-weight:600}
:focus-visible{outline:3px solid var(--rouge);outline-offset:3px;border-radius:4px}

.cadre{width:100%;max-width:var(--cadre);margin-inline:auto;padding-inline:var(--gouttiere)}
.evitement{position:absolute;left:-999px;top:8px;background:var(--encre);color:#fff;padding:8px 14px;border-radius:8px;z-index:20}
.evitement:focus{left:8px}
.a-fournir{display:inline-block;font-family:var(--texte);font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--rouge-fonce);background:repeating-linear-gradient(-45deg,transparent 0 6px,rgba(189,36,30,.07) 6px 12px);border:1px dashed var(--rouge);border-radius:6px;padding:2px 8px}

/* ---------- En-tête ---------- */
.entete{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--fond) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.entete__ligne{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;flex-wrap:wrap}
.marque{display:flex;align-items:center;gap:12px;text-decoration:none}
.marque__nom{font-family:var(--titre);font-weight:600;font-size:1.2rem;text-transform:uppercase;letter-spacing:.02em}
.marque__nom span{color:var(--rouge)}
.nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,32px)}
.nav a:not(.bouton){font-weight:600;font-size:.98rem;text-decoration:none;padding:6px 0;background:linear-gradient(var(--rouge),var(--rouge)) left bottom/0 2px no-repeat;transition:background-size .2s}
.nav a:not(.bouton):hover,.nav a[aria-current="page"]{background-size:100% 2px}

/* ---------- Boutons ---------- */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;border:2px solid var(--rouge);background:var(--rouge);color:#fff;font-family:var(--titre);font-weight:600;font-size:1.05rem;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .15s,transform .15s,border-color .15s}
.bouton:hover{background:var(--rouge-fonce);border-color:var(--rouge-fonce)}
.bouton:active{transform:translateY(1px)}
.bouton--petit{min-height:40px;padding:0 18px;font-size:.92rem}
.bouton--creux{background:transparent;color:var(--encre);border-color:var(--encre)}
.bouton--creux:hover{background:var(--encre);color:#fff;border-color:var(--encre)}
.panneau .bouton--creux{color:var(--panneau-texte);border-color:var(--panneau-texte)}
.panneau .bouton--creux:hover{background:var(--panneau-texte);color:var(--panneau)}
.fleche::after{content:"";width:18px;height:12px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M12 0l6 6-6 6-1.4-1.4L14.2 7H0V5h14.2l-3.6-3.6z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M12 0l6 6-6 6-1.4-1.4L14.2 7H0V5h14.2l-3.6-3.6z'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---------- Sections ---------- */
.section{padding-block:var(--section)}
.section--surface{background:var(--surface)}
.section--serree{padding-top:0}
.titre-section{display:flex;align-items:center;gap:clamp(14px,2vw,22px)}
.titre-section::before{content:"";flex:none;width:clamp(56px,6vw,84px);aspect-ratio:66/24;background:var(--chevrons) center/contain no-repeat}
.chapeau{font-size:clamp(1.08rem,1rem + .4vw,1.3rem);color:var(--encre-douce);max-width:60ch}
.surtitre{display:block;font-family:var(--titre);font-weight:500;font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rouge);margin-bottom:14px}
.entete-section{margin-bottom:clamp(32px,5vw,56px);max-width:800px}

/* ---------- Ouverture ---------- */
.ouverture{position:relative;overflow:hidden;padding-block:clamp(56px,10vw,140px) clamp(64px,10vw,140px)}
.ouverture::after{content:"";position:absolute;right:-6vw;top:50%;width:min(56vw,640px);aspect-ratio:462/444;transform:translateY(-50%);background:url(/logo-yannis.svg) center/contain no-repeat;opacity:.07;pointer-events:none}
.ouverture .cadre{position:relative;z-index:1}
.ouverture h1{max-width:12ch;margin-bottom:.35em}
.ouverture h1 em{font-style:normal;color:var(--rouge)}
.ouverture .chapeau{font-size:clamp(1.15rem,1rem + .6vw,1.45rem);max-width:46ch;color:var(--encre)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.ouverture__cadre{display:flex;flex-wrap:wrap;gap:10px 28px;margin:40px 0 0;padding:0;list-style:none;font-weight:600}
.ouverture__cadre li{display:flex;align-items:center;gap:10px}
.ouverture__cadre li::before{content:"";width:8px;height:8px;background:var(--rouge);transform:rotate(45deg)}

/* ---------- Panneau noir, les chiffres ---------- */
.panneau{background:var(--panneau);color:var(--panneau-texte);border-radius:var(--r);padding:clamp(28px,5vw,64px)}
.panneau h2,.panneau h3{color:#fff}
.panneau .chapeau,.panneau p{color:var(--panneau-doux)}
.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:clamp(28px,4vw,48px);margin:0}
.chiffre{display:flex;flex-direction:column;gap:10px;margin:0}
.chiffre__valeur{font-family:var(--titre);font-weight:700;font-style:italic;font-size:clamp(3.2rem,2.4rem + 3.6vw,5.4rem);line-height:.95;color:var(--rouge-clair);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.chiffre__libelle{color:var(--panneau-texte);font-size:1.05rem;line-height:1.45;margin:0}
.source{font-size:.8rem;color:var(--panneau-doux);line-height:1.4}
.source a{color:inherit;text-underline-offset:3px}
.section .source{color:var(--encre-douce)}
.panneau .source{color:var(--panneau-doux)}
.chiffres--clair .chiffre__valeur{color:var(--rouge)}
.chiffres--clair .chiffre__libelle{color:var(--encre)}

/* ---------- Deux colonnes ---------- */
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(32px,6vw,80px);align-items:start}
.valeurs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 24px;margin:24px 0 0;padding:0;list-style:none}
.valeurs li{font-family:var(--titre);font-weight:600;font-size:1.35rem;color:var(--rouge);display:flex;align-items:center;gap:10px}
.valeurs li::before{content:"";width:8px;height:8px;background:currentColor;transform:rotate(45deg)}
.devise{font-family:var(--titre);font-weight:700;font-style:italic;font-size:clamp(2rem,1.4rem + 2.4vw,3.4rem);text-transform:uppercase;line-height:1;color:var(--encre);margin:0 0 .4em}
.devise span{color:var(--rouge)}

/* ---------- Calculateur ---------- */
.calcul{display:grid;gap:28px}
.calcul__reglage label{display:block;font-weight:600;color:var(--panneau-texte);margin-bottom:12px}
.calcul__effectif{display:flex;align-items:baseline;gap:12px;margin-bottom:8px}
.calcul__effectif output{font-family:var(--titre);font-weight:700;font-style:italic;font-size:clamp(2.6rem,2rem + 2vw,3.4rem);color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.calcul__effectif span{color:var(--panneau-doux)}
input[type="range"]{width:100%;height:44px;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;margin:0}
input[type="range"]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(to right,var(--rouge-clair) var(--p,20%),#3A3B34 var(--p,20%))}
input[type="range"]::-moz-range-track{height:6px;border-radius:6px;background:#3A3B34}
input[type="range"]::-moz-range-progress{height:6px;border-radius:6px;background:var(--rouge-clair)}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-11px;border-radius:50%;background:#fff;border:4px solid var(--rouge-clair)}
input[type="range"]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:4px solid var(--rouge-clair)}
.calcul__resultats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.resultat{border-radius:var(--r-petit);padding:24px;background:#1F201A}
.resultat__libelle{font-weight:600;color:var(--panneau-doux);margin:0 0 8px}
.resultat__valeur{font-family:var(--titre);font-weight:700;font-style:italic;font-size:clamp(2.2rem,1.8rem + 1.6vw,3rem);line-height:1;color:#fff;margin:0 0 8px;font-variant-numeric:tabular-nums}
.resultat--rouge .resultat__valeur{color:var(--rouge-clair)}

/* ---------- Équipe ---------- */
.equipe{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px}
.coach{background:var(--surface);border:1px solid var(--trait);border-radius:var(--r);padding:clamp(24px,3vw,36px)}
.coach__monogramme{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;background:var(--encre);margin-bottom:22px}
.coach__monogramme img{width:52px}
.coach__monogramme--vide{background:transparent;border:2px dashed var(--trait)}
.coach__role{font-family:var(--titre);font-weight:500;letter-spacing:.1em;text-transform:uppercase;font-size:.9rem;color:var(--rouge);margin:-.2em 0 1em}
.coach--vide{background:transparent;border-style:dashed}

/* ---------- Références et témoignages ---------- */
.logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px;margin:0;padding:0;list-style:none}
.logos li{display:flex;flex-direction:column;justify-content:center;min-height:112px;padding:18px 22px;background:var(--surface);border:1px solid var(--trait);border-radius:var(--r-petit)}
.logos b{font-family:var(--titre);font-weight:600;font-size:1.4rem;text-transform:uppercase;letter-spacing:.03em;line-height:1.1}
.logos span{font-size:.88rem;color:var(--encre-douce);margin-top:4px}
.partenaire{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px}
.partenaire b{font-family:var(--titre);font-weight:700;font-style:italic;font-size:clamp(2rem,1.6rem + 2vw,3rem);text-transform:uppercase;color:#fff;line-height:1}
.temoignages{columns:2 360px;column-gap:20px}
.temoignage{break-inside:avoid;margin:0 0 20px;background:var(--surface);border:1px solid var(--trait);border-radius:var(--r);padding:clamp(24px,3vw,34px);position:relative}
.temoignage::before{content:"\201C";position:absolute;top:6px;right:22px;font-family:var(--titre);font-weight:700;font-size:5rem;line-height:1;color:var(--rouge);opacity:.9}
.temoignage blockquote{margin:0 0 20px;padding-top:28px;font-size:1.04rem;line-height:1.62}
.temoignage blockquote p:last-child{margin:0}
.temoignage figcaption{border-top:1px solid var(--trait);padding-top:14px;font-size:.92rem;color:var(--encre-douce)}
.temoignage figcaption b{display:block;color:var(--encre);font-size:1rem}
.temoignage--court blockquote{font-family:var(--titre);font-weight:500;font-size:clamp(1.4rem,1.2rem + .8vw,1.8rem);line-height:1.25}
.citation{margin:0;padding-left:clamp(18px,3vw,28px);border-left:4px solid var(--rouge)}
.citation p{font-family:var(--titre);font-weight:500;font-size:clamp(1.3rem,1.1rem + .9vw,1.9rem);line-height:1.25;color:var(--encre);margin-bottom:.5em}
.citation footer{font-size:.88rem;color:var(--encre-douce)}

/* ---------- Appel au contact ---------- */
.appel{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.appel h2{margin:0;max-width:18ch;text-transform:uppercase}
.appel h2 span{color:var(--rouge-clair)}

/* ---------- Formulaire ---------- */
.formulaire{display:grid;gap:18px}
.champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:18px}
.champ{display:grid;gap:6px}
.champ label{font-weight:600;font-size:.95rem}
.champ label small{font-weight:400;color:var(--encre-douce)}
.champ input,.champ select,.champ textarea{width:100%;font:inherit;font-size:1rem;color:var(--encre);background:var(--surface);border:1.5px solid var(--trait);border-radius:var(--r-petit);padding:13px 14px;min-height:52px;transition:border-color .15s,box-shadow .15s}
.champ textarea{min-height:150px;resize:vertical}
.champ select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2321231C' d='M6 8L0 1.4 1.4 0 6 5.2 10.6 0 12 1.4z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:12px;padding-right:40px}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--encre);box-shadow:0 0 0 3px rgba(189,36,30,.18)}
.champ input:user-invalid,.champ textarea:user-invalid{border-color:var(--rouge)}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formulaire__bas{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.formulaire__etat{margin:0;font-weight:600}
.formulaire__etat[data-etat="ok"]{color:#2E6B2A}
.formulaire__etat[data-etat="erreur"]{color:var(--rouge)}
.formulaire button[disabled]{opacity:.6;cursor:progress}
.rgpd{font-size:.82rem;color:var(--encre-douce);margin:0}
.envoye{background:var(--surface);border:1px solid var(--trait);border-left:4px solid var(--rouge);border-radius:var(--r-petit);padding:28px}
.envoye h2{font-size:1.8rem;margin-bottom:.3em}
.envoye p{margin:0}

.coordonnees{display:grid;gap:24px}
.coordonnees h3{font-size:1.1rem;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--encre-douce);margin-bottom:.4em}
.coordonnees p{margin:0;font-weight:600}

/* ---------- Sources ---------- */
.sources{margin:0;padding:0 0 0 1.4em;font-size:.88rem;color:var(--encre-douce);display:grid;gap:8px}
.sources a{color:var(--encre);text-underline-offset:3px;word-break:break-word}

/* ---------- Pages de texte ---------- */
.texte{max-width:72ch}
.texte h2{font-size:1.6rem;margin-top:1.6em}
.texte dl{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:8px 24px;margin:0}
.texte dt{font-weight:700}
.texte dd{margin:0}
@media (max-width:520px){.texte dl{grid-template-columns:1fr;gap:2px}.texte dd{margin-bottom:10px}}

/* ---------- Pied ---------- */
.pied{background:var(--encre);color:var(--panneau-texte);padding-block:56px 32px;margin-top:0}
.pied__grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:32px;align-items:start}
.pied__devise{font-family:var(--titre);font-weight:600;font-size:1.3rem;text-transform:uppercase;margin:16px 0 0;line-height:1.2;max-width:16ch}
.pied nav{display:grid;gap:10px}
.pied nav a{text-decoration:none;color:var(--panneau-doux)}
.pied nav a:hover{color:#fff}
.pied .a-fournir{color:#F2B7B3;background:none;border-color:var(--rouge-clair)}
.pied__legal{margin:40px auto 0;padding-top:20px;border-top:1px solid #3A3B34;font-size:.85rem;color:var(--panneau-doux)}

/* =========================================================
   Le mouvement. Tout ce qui bouge est ici, et s'éteint sous prefers-reduced-motion.
   ========================================================= */

/* Navigation entre pages : l'en-tête reste, le contenu glisse. */
@view-transition{navigation:auto}
.entete{view-transition-name:entete}
.pied{view-transition-name:pied}
main{view-transition-name:contenu}
::view-transition-old(contenu){animation:.28s cubic-bezier(.4,0,1,1) both sortie}
::view-transition-new(contenu){animation:.5s cubic-bezier(.16,1,.3,1) both entree}
@keyframes sortie{to{opacity:0;transform:translateY(-24px)}}
@keyframes entree{from{opacity:0;transform:translateY(48px)}}

.entete--decolle{border-bottom-color:var(--trait)}

/* Barre de lecture sous l'en-tête */
.progression{position:fixed;top:0;left:0;right:0;height:3px;z-index:11;background:var(--rouge);transform-origin:0 50%;transform:scaleX(var(--lu,0));pointer-events:none}

/* Ouverture : le titre monte mot par mot derrière un masque */
.ouverture__grille{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(24px,4vw,64px);align-items:center}
@media (max-width:860px){.ouverture__grille{grid-template-columns:1fr}.balancier{display:none}}
.ouverture--page{padding-block:clamp(48px,8vw,112px) clamp(40px,6vw,80px)}
.ouverture--page h1{max-width:16ch}
.titre-cinetique .mot{display:inline-block;overflow:clip;overflow-clip-margin:.12em;vertical-align:top;padding-bottom:.04em}
.titre-cinetique .mot>*{display:inline-block}
.js .titre-cinetique .mot>*{transform:translateY(110%);transition:transform .9s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i) * 80ms + 80ms)}
.js.pret .titre-cinetique .mot>*{transform:none}
.js [data-entree]{opacity:0;transform:translateY(18px);transition:opacity .8s,transform .8s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i) * 90ms + 450ms)}
.js.pret [data-entree]{opacity:1;transform:none}
/* Apparition des blocs */
.js [data-revele]{opacity:0;transform:translateY(36px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.js [data-revele].vu{opacity:1;transform:none}
.js .titre-section::before{transform:translateX(-24px);opacity:0;transition:transform .7s .15s cubic-bezier(.16,1,.3,1),opacity .7s .15s}
.js .vu .titre-section::before,.js .titre-section.vu::before{transform:none;opacity:1}
.js .liste-rouge li,.js .valeurs li,.js .logos li,.js .materiel li,.js .coches li,.js .etape{opacity:0;transform:translateX(-14px);transition:opacity .6s,transform .6s cubic-bezier(.16,1,.3,1)}
.js .vu .liste-rouge li,.js .vu .valeurs li,.js .logos.vu li,.js .vu .materiel li,.js .liste-rouge.vu li,.js .valeurs.vu li,.js .vu .coches li,.js .etape.vu{opacity:1;transform:none}
.js .vu li:nth-child(2){transition-delay:.07s}.js .vu li:nth-child(3){transition-delay:.14s}.js .vu li:nth-child(4){transition-delay:.21s}.js .vu li:nth-child(5){transition-delay:.28s}.js .vu li:nth-child(6){transition-delay:.35s}.js .vu li:nth-child(n+7){transition-delay:.42s}

/* Équipe */
.coach__nom{font-size:clamp(1.8rem,1.5rem + 1vw,2.3rem);margin-bottom:.2em}

@media (prefers-reduced-motion:reduce){
  .js [data-revele],.js [data-entree],.js .titre-cinetique .mot>*,.js .titre-section::before,.js .liste-rouge li,.js .valeurs li,.js .logos li,.js .materiel li,.js .coches li,.js .etape{opacity:1!important;transform:none!important}
  @view-transition{navigation:none}
}

/* Simulateur */
.calcul__reglages{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 40px;align-items:end}
@media (max-width:640px){.calcul__reglages{grid-template-columns:1fr}}
.calcul__frequence{border:0;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.calcul__frequence legend{font-weight:600;color:var(--panneau-texte);margin-bottom:12px;padding:0}
.calcul__frequence label{position:relative;cursor:pointer}
.calcul__frequence input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.calcul__frequence label>span{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;border:2px solid #3A3B34;font-family:var(--titre);font-weight:700;font-size:1.5rem;color:var(--panneau-doux);transition:background .2s,border-color .2s,color .2s,transform .2s cubic-bezier(.16,1,.3,1)}
.calcul__frequence input:checked+span{background:var(--rouge);border-color:var(--rouge);color:#fff;transform:scale(1.08)}
.calcul__frequence input:focus-visible+span{outline:3px solid #fff;outline-offset:3px}
.chiffres{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:clamp(28px,3.4vw,40px)}
.chiffre__valeur{font-size:clamp(2.6rem,2rem + 1.8vw,3.3rem);white-space:nowrap}
.chiffre dd{margin:0}

/* =========================================================
   La landing : ouverture, scène, étapes, offre, app, pause, avis, FAQ, contact.
   ========================================================= */

/* En-tête : action à droite, menu sur mobile */
.entete__ligne{flex-wrap:nowrap}
.nav{margin-left:auto}
.entete__action{margin-left:clamp(12px,2vw,24px)}
.menu-bouton{display:none;width:44px;height:44px;border:0;background:transparent;padding:0;cursor:pointer;position:relative;flex:none}
.menu-bouton span,.menu-bouton span::before,.menu-bouton span::after{position:absolute;left:11px;width:22px;height:2.5px;border-radius:2px;background:var(--encre);transition:transform .25s,opacity .2s}
.menu-bouton span{top:21px}
.menu-bouton span::before,.menu-bouton span::after{content:"";left:0}
.menu-bouton span::before{top:-7px}
.menu-bouton span::after{top:7px}
.entete--ouvert .menu-bouton span{background:transparent}
.entete--ouvert .menu-bouton span::before{transform:translateY(7px) rotate(45deg)}
.entete--ouvert .menu-bouton span::after{transform:translateY(-7px) rotate(-45deg)}
@media (max-width:860px){
  .entete__ligne{min-height:64px;gap:8px}
  .marque__nom span{display:none}
  .marque__nom{white-space:nowrap;font-size:1.05rem}
  .entete__action{white-space:nowrap}
  .menu-bouton{display:block}
  .entete__action{margin-left:auto;min-height:40px;padding:0 14px;font-size:.85rem}
  .nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:8px var(--gouttiere) 20px;background:var(--fond);border-bottom:1px solid var(--trait);box-shadow:0 24px 40px -24px rgba(0,0,0,.3);transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .2s,transform .25s cubic-bezier(.16,1,.3,1),visibility .2s}
  .entete--ouvert .nav{opacity:1;transform:none;visibility:visible}
  .nav a:not(.bouton){font-family:var(--titre);font-size:1.6rem;font-weight:600;text-transform:uppercase;padding:12px 0;border-bottom:1px solid var(--trait);background:none}
}

/* Ouverture */
.hero{position:relative;overflow:hidden;padding-block:clamp(32px,6vw,88px) clamp(32px,4vw,56px)}
.hero__grille{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,72px);align-items:center}
.hero h1{font-size:clamp(2.5rem,1.5rem + 3.4vw,4.3rem);max-width:15ch;margin-bottom:.35em}
.hero h1 em{font-style:normal;color:var(--rouge)}
.hero__chapeau{font-size:clamp(1.08rem,1rem + .45vw,1.35rem);max-width:44ch;margin-bottom:0}
.hero .actions{margin-top:28px}
@media (max-width:860px){
  .hero__grille{grid-template-columns:1fr}
  .hero h1{max-width:none}
}
@media (max-width:480px){.hero .actions .bouton{width:100%}}

/* Comment ça marche */
.etapes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(16px,2.4vw,28px);counter-reset:e}
.etape{position:relative;background:var(--fond);border-radius:var(--r);padding:clamp(24px,3vw,36px);padding-top:clamp(70px,8vw,96px)}
.etape__num{position:absolute;top:clamp(16px,2vw,24px);left:clamp(24px,3vw,36px);font-family:var(--titre);font-weight:700;font-style:italic;font-size:clamp(3rem,2.4rem + 2vw,4.2rem);line-height:1;color:var(--rouge)}
.etape h3{margin-bottom:.4em}
.etape p{margin:0;color:var(--encre-douce)}
.js .etape:nth-child(2){transition-delay:.1s}.js .etape:nth-child(3){transition-delay:.2s}

/* L'offre */
.offre{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px;align-items:start}
@media (max-width:900px){.offre{grid-template-columns:1fr}}
.offre__carte{background:var(--surface);border:2px solid var(--encre);border-radius:var(--r);padding:clamp(24px,3.4vw,44px)}
.offre__prix{font-size:1.15rem;margin:0;color:var(--encre-douce)}
.offre__prix b{font-family:var(--titre);font-style:italic;font-weight:700;font-size:clamp(3.6rem,3rem + 3vw,5.4rem);line-height:.9;color:var(--rouge);margin-right:8px}
.offre__sous{margin:10px 0 0;color:var(--encre-douce)}
.offre__groupe{margin:28px 0 10px;font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--encre-douce)}
.coches{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.coches li{position:relative;padding-left:32px;font-weight:600}
.coches li::before{content:"";position:absolute;left:0;top:.1em;width:22px;height:22px;border-radius:50%;background:var(--rouge) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' d='M2.5 6.2l2.3 2.3 4.7-5'/%3E%3C/svg%3E") center/12px no-repeat}
.coches--plus li{font-weight:400;color:var(--encre-douce)}
.coches--plus li::before{background:var(--fond);border:1.5px solid var(--trait);background-image:none}
.calcul{display:flex;flex-direction:column;gap:24px}
.calcul__titre{font-size:clamp(1.6rem,1.3rem + 1vw,2.2rem);margin:0}
.bouton--plein{width:100%}
.sous-titre{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.2rem);margin:clamp(56px,7vw,88px) 0 24px}
.pratiques{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:860px){
  .pratiques{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gouttiere) * -1);padding:4px var(--gouttiere) 12px;scrollbar-width:none}
  .pratiques::-webkit-scrollbar{display:none}
  .pratique{scroll-snap-align:center}
}
.pratique{background:var(--panneau);color:var(--panneau-texte);border-radius:var(--r);padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column}
.pratique h4{font-family:var(--titre);font-size:1.6rem;text-transform:uppercase;margin:0 0 .4em;color:#fff}
.pratique p{margin:0;color:var(--panneau-doux);font-size:.98rem}

/* Sections sombres */
.section--noire{background:var(--panneau);color:var(--panneau-texte)}
.section--noire h2{color:#fff}
.section--noire .chapeau{color:var(--panneau-doux)}
.section--noire .liste-rouge li{color:var(--rouge-clair)}
.section--noire .liste-rouge li span{color:var(--panneau-doux)}

/* L'app */
.app{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,64px);align-items:center}
.app h2{font-size:clamp(2.2rem,1.6rem + 2.6vw,3.8rem);text-transform:uppercase}
.app .liste-rouge{margin-top:24px}
@media (max-width:900px){.app{grid-template-columns:1fr}}
.telephones{position:relative;height:clamp(470px,44vw,560px);display:flex;justify-content:center;align-items:center}
.telephone{position:absolute;width:clamp(210px,19vw,250px);aspect-ratio:9/19;border-radius:36px;background:#0C0D0A;padding:9px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6),inset 0 0 0 1.5px #3A3B34;transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .7s}
.tel-ecran{height:100%;border-radius:28px;background:#fff;color:#21231C;overflow:hidden;display:flex;flex-direction:column;font-size:11px;line-height:1.35;position:relative}
.telephone--icone{transform:translateX(-62%) rotate(-8deg) scale(.86);z-index:1}
.telephone--planning{transform:translateX(62%) rotate(7deg) scale(.9);z-index:2}
.telephone--reserver{z-index:3}
@media (prefers-reduced-motion:no-preference){.js .telephones:not(.vu) .telephone{transform:translateY(60px) scale(.9);opacity:0}}
.js .telephones.vu .telephone--icone{transition-delay:.1s}.js .telephones.vu .telephone--planning{transition-delay:.2s}
@media (hover:hover){.telephones:hover .telephone--icone{transform:translateX(-78%) rotate(-11deg) scale(.86)}.telephones:hover .telephone--planning{transform:translateX(78%) rotate(10deg) scale(.9)}}
@media (max-width:600px){
  .telephones{height:500px}
  .telephone--icone{transform:translateX(-40%) rotate(-8deg) scale(.78)}
  .telephone--planning{transform:translateX(40%) rotate(7deg) scale(.8)}
}
.telephones__essai{position:absolute;bottom:-34px;left:50%;transform:translateX(-50%);margin:0;font-family:var(--titre);font-weight:500;letter-spacing:.1em;text-transform:uppercase;font-size:.85rem;color:var(--rouge-clair);display:flex;align-items:center;gap:8px;transition:opacity .3s;z-index:4;white-space:nowrap}
.telephones__essai::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--rouge-clair);animation:pouls 1.6s infinite}
@keyframes pouls{0%{box-shadow:0 0 0 0 rgba(232,87,79,.6)}100%{box-shadow:0 0 0 14px rgba(232,87,79,0)}}
.telephones--essaye .telephones__essai{opacity:0}
.tel-ecran--accueil{background:linear-gradient(160deg,#B9BCC4,#7F8590 55%,#5E6470);padding:56px 14px 14px;color:#fff}
.tel-dossier{font-size:20px;font-weight:700;margin:0 0 14px 6px;letter-spacing:-.01em}
.tel-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:16px;border-radius:24px;background:rgba(255,255,255,.22);backdrop-filter:blur(6px)}
.tel-app{aspect-ratio:1;border-radius:14px;background:rgba(255,255,255,.35);position:relative}
.tel-app--ym{background:#fff;display:grid;place-items:center;box-shadow:0 0 0 3px rgba(255,255,255,.6);animation:appel 2.4s ease-in-out infinite}
.tel-app--ym img{width:64%}
.tel-app--ym i{position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);font-style:normal;font-size:9px;white-space:nowrap}
@keyframes appel{0%,100%{transform:none}50%{transform:scale(1.08)}}
.tel-entete{display:flex;align-items:center;gap:8px;padding:30px 14px 10px;font-size:14px}
.tel-mois{margin:2px 14px 6px;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6A6C64}
.tel-jours{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:0 12px 10px;border-bottom:1px solid #ECEBE7}
.tel-jours button{font:inherit;font-weight:700;font-size:13px;border:0;border-radius:10px;background:#F2F1EC;color:#21231C;padding:6px 0;cursor:pointer;display:grid;line-height:1.2}
.tel-jours button i{font-style:normal;font-weight:500;font-size:8px;text-transform:uppercase}
.tel-jours button[aria-selected="true"]{background:var(--rouge);color:#fff}
.tel-creneaux,.tel-planning{flex:1;overflow:hidden;padding:10px 10px 0;display:grid;align-content:start;gap:8px}
.tel-cours{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:9px 8px;border-radius:12px;border:1px solid #E4E3DE;border-left:3px solid #C9C7BF;transition:background .3s,border-color .3s}
.tel-cours__h{font-weight:800;color:var(--rouge);font-size:11px}
.tel-cours__info{display:grid;gap:1px;min-width:0}
.tel-cours__info b{font-size:11.5px}
.tel-cours__info i{font-style:normal;color:#6A6C64;font-size:9.5px}
.tel-cours button{font:inherit;font-weight:700;font-size:10px;border:0;border-radius:999px;background:var(--rouge);color:#fff;padding:7px 10px;cursor:pointer;min-height:30px;transition:transform .15s}
.tel-cours button:active{transform:scale(.94)}
.tel-cours--pris{border-left-color:#2E6B2A;background:#F4F8F2}
.tel-cours--pris button{background:#2E6B2A}
.tel-cours__badge{grid-column:1/-1;justify-self:end;margin-top:-4px;font-size:8.5px;font-weight:700;color:#9A6B12}
.tel-planning .tel-cours{grid-template-columns:auto 1fr;border-left-color:#B08A3E;background:#fff}
.tel-cours--nouveau{animation:arrive .7s cubic-bezier(.16,1,.3,1)}
@keyframes arrive{from{transform:translateX(30px) scale(.95);opacity:0;background:#FBE3E1}}
.tel-date{margin:4px 2px 0;font-size:10px;font-weight:700}
.tel-vide{display:grid;justify-items:center;gap:10px;padding:40px 10px;color:#6A6C64;text-align:center;font-weight:600}
.tel-vide svg{width:46px;fill:#6A6C64}
.tel-onglets{display:flex;justify-content:space-around;padding:8px 0 12px;border-top:1px solid #ECEBE7;font-size:8.5px;color:#6A6C64}
.tel-onglets .on{color:var(--rouge);font-weight:700}
.tel-bascule{display:flex;margin:0 12px 8px;padding:3px;border-radius:10px;background:#F2F1EC;font-size:10px;font-weight:700}
.tel-bascule span{flex:1;text-align:center;padding:5px;border-radius:8px;color:#6A6C64}
.tel-bascule .on{background:#fff;color:#21231C;box-shadow:0 1px 3px rgba(0,0,0,.1)}


/* La séance de 30 secondes */
.seance{border:0;padding:0;border-radius:28px;background:var(--panneau);color:var(--panneau-texte);width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px)}
.seance::backdrop{background:rgba(22,23,18,.7);backdrop-filter:blur(4px)}
.seance[open]{animation:monte .45s cubic-bezier(.16,1,.3,1)}
@keyframes monte{from{transform:translateY(40px) scale(.96);opacity:0}}
.seance__corps{position:relative;padding:28px 24px 32px;text-align:center;display:grid;gap:4px}
.seance__en-cours{display:grid;justify-items:center;gap:4px}
.seance__fermer{position:absolute;right:12px;top:10px;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--panneau-doux);font-size:1.8rem;cursor:pointer}
.seance__fermer:hover{color:#fff}
.seance__etape{margin:0;font-size:.85rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rouge-clair)}
.seance__nom{font-size:2rem;text-transform:uppercase;margin:0;color:#fff}
.seance__minuteur{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--rouge-clair) var(--p,0%),#3A3B34 var(--p,0%));position:relative;transition:--p 1s linear}
.seance__minuteur::before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--panneau)}
.seance__minuteur span{position:relative;font-family:var(--titre);font-weight:700;font-size:2rem;color:#fff;font-variant-numeric:tabular-nums}
.seance__fin{display:grid;justify-items:center;gap:8px;padding:24px 0 4px}
.seance__fin[hidden]{display:none}
.seance__bravo{font-family:var(--titre);font-weight:700;font-size:2.2rem;line-height:1.05;text-transform:uppercase;color:#fff;margin:0}
.seance__fin p{color:var(--panneau-doux);margin:0 0 12px}
@property --p{syntax:"<percentage>";inherits:true;initial-value:0%}

/* Avis en carrousel */
.entete-section--ligne{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 24px;max-width:none}
.entete-section--ligne h2{margin:0}
.lien-fleche{font-weight:700;color:var(--rouge);text-underline-offset:4px}
.carrousel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(280px,380px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px max(var(--gouttiere),calc((100vw - var(--cadre)) / 2 + var(--gouttiere))) 16px;scroll-padding-inline:max(var(--gouttiere),calc((100vw - var(--cadre)) / 2 + var(--gouttiere)));scrollbar-width:thin;scrollbar-color:var(--rouge) transparent}
.avis{margin:0;scroll-snap-align:start;background:var(--fond);border-radius:var(--r);padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.avis blockquote{margin:0;font-family:var(--titre);font-weight:500;font-size:clamp(1.15rem,1.05rem + .4vw,1.35rem);line-height:1.3}
.avis figcaption{font-size:.9rem;color:var(--encre-douce)}
.avis figcaption b{display:block;color:var(--encre)}

/* FAQ */
.faq{display:grid;gap:0;border-top:1px solid var(--trait)}
.faq details{border-bottom:1px solid var(--trait)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font-weight:700;font-size:1.08rem;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--titre);font-size:1.6rem;color:var(--rouge);transition:transform .25s;flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 20px;color:var(--encre-douce);max-width:60ch}

/* Contact */
.contact__titre{font-size:clamp(2.4rem,1.6rem + 3.4vw,4.4rem);text-transform:uppercase;line-height:1}
.contact__titre em{font-style:normal;color:var(--rouge-clair)}
.section--noire .coordonnees{margin-top:32px}
.section--noire .coordonnees h3{color:var(--panneau-doux)}
.section--noire .coordonnees p,.section--noire .coordonnees a{color:#fff}
.section--noire .a-fournir{color:#F2B7B3;background:none;border-color:var(--rouge-clair)}
.section--noire .formulaire{background:var(--fond);color:var(--encre);border-radius:var(--r);padding:clamp(20px,3vw,36px)}

/* Barre d'action du mobile */
.barre-action{display:none}
@media (max-width:860px){
  .barre-action{display:flex;align-items:center;justify-content:center;position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:9;min-height:56px;border-radius:999px;background:var(--rouge);color:#fff;font-family:var(--titre);font-weight:600;font-size:1.05rem;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;box-shadow:0 14px 30px -10px rgba(189,36,30,.6);transform:translateY(140%);transition:transform .35s cubic-bezier(.16,1,.3,1)}
  .barre-action--visible{transform:none}
}

@media (prefers-reduced-motion:reduce){
  .js .telephones .telephone{opacity:1!important}
  .tel-app--ym,.telephones__essai::before{animation:none}
}

/* Listes rouges : un titre et sa ligne */
.liste-rouge{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.liste-rouge li{position:relative;padding-left:24px;font-weight:700;color:var(--rouge)}
.liste-rouge li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;background:currentColor;border-radius:50%}
.liste-rouge li span{display:block;font-weight:400;color:var(--encre-douce)}
@media (max-width:400px){.marque__nom{display:none}}

/* Le logo YM */
.ym{display:block;width:100%;height:auto;overflow:visible}
.marque__ym{display:block;width:40px;height:40px}
.hero__logo{width:100%;max-width:520px;justify-self:end;position:relative}
.hero__logo::after{content:"";position:absolute;left:12%;right:12%;bottom:4%;height:5%;border-radius:50%;background:radial-gradient(closest-side,rgba(33,35,28,.16),transparent);z-index:-1}
@media (prefers-reduced-motion:no-preference){
  .js .hero__logo .ym__arrivee-m{transform:translate(-120px,-90px);opacity:0;transition:transform 1.1s cubic-bezier(.34,1.56,.64,1) .25s,opacity .5s .25s}
  .js .hero__logo .ym__arrivee-y{transform:translate(90px,200px);opacity:0;transition:transform 1.1s cubic-bezier(.34,1.56,.64,1) .55s,opacity .5s .55s}
  .js.pret .hero__logo .ym__arrivee-m,.js.pret .hero__logo .ym__arrivee-y{transform:none;opacity:1}
}

/* Bandeau des clients */
.bandeau{background:var(--encre);color:#fff;padding-block:clamp(28px,4vw,44px)}
.bandeau__ligne{display:grid;gap:16px}
.bandeau__titre{font-family:var(--texte);font-size:.82rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--panneau-doux);margin:0}
.bandeau__noms{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px clamp(18px,2.4vw,36px);flex:1}
.bandeau__noms li{font-family:var(--titre);font-weight:600;font-size:clamp(1.1rem,.9rem + .7vw,1.45rem);text-transform:uppercase;letter-spacing:.03em;line-height:1}
.bandeau__partenaire{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-top:20px;padding-top:20px;border-top:1px solid #3A3B34}
.bandeau__partenaire span{font-size:.82rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rouge-clair)}
.bandeau__partenaire b{font-family:var(--titre);font-weight:700;font-style:italic;font-size:clamp(1.5rem,1.2rem + 1.2vw,2.2rem);text-transform:uppercase;line-height:1}

/* Le logo dans les pratiques et la pause */
.seance__logo{width:180px;height:180px;margin:18px 0}
@media (max-width:860px){.hero__logo{max-width:230px;justify-self:center;margin-top:8px}}
@media (max-width:480px){.bouton--plein{font-size:.92rem;padding:0 16px;gap:8px}}

/* Le quiz des chiffres : quatre cartes, deux par ligne */
.quiz{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:760px){.quiz{grid-template-columns:1fr}}
.quiz__question{display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--trait);border-radius:var(--r);padding:clamp(20px,3vw,32px)}
.quiz__num{margin:0;font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rouge)}
.quiz__intitule{font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);margin:0}
.quiz__choix-liste{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:auto;padding-top:6px}
.quiz__choix{font-family:var(--titre);font-weight:700;font-style:italic;font-size:clamp(1.2rem,1rem + .7vw,1.5rem);min-height:60px;padding:0 6px;border-radius:var(--r-petit);border:2px solid var(--encre);background:transparent;color:var(--encre);cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .15s,opacity .3s}
.quiz__choix:hover{background:var(--encre);color:#fff;transform:translateY(-2px)}
.quiz__question--repondue .quiz__choix{cursor:default;transform:none}
.quiz__question--repondue .quiz__choix:not(.juste):not(.faux){opacity:.35;background:transparent;color:var(--encre)}
.quiz__choix.juste{background:#2E6B2A;border-color:#2E6B2A;color:#fff}
.quiz__choix.faux{background:var(--rouge);border-color:var(--rouge);color:#fff;text-decoration:line-through}
.quiz--actif .quiz__reponse{display:none}
.quiz__question--repondue .quiz__reponse{display:block;animation:entree .6s cubic-bezier(.16,1,.3,1)}
.quiz__reponse{padding-top:14px;border-top:1px solid var(--trait)}
.quiz__verdict{margin:0;font-weight:700;color:var(--encre-douce)}
.quiz__valeur{margin:0;font-family:var(--titre);font-weight:700;font-style:italic;font-size:clamp(2.8rem,2.2rem + 2.4vw,4rem);line-height:1;color:var(--rouge);font-variant-numeric:tabular-nums}
.quiz__libelle{margin:6px 0 0}
.quiz__fin{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;background:var(--encre);color:#fff;border-radius:var(--r);padding:clamp(20px,3vw,32px);animation:entree .6s cubic-bezier(.16,1,.3,1)}
.quiz__fin[hidden]{display:none}
.quiz__score{margin:0;font-family:var(--titre);font-weight:600;font-size:1.5rem;text-transform:uppercase}
.quiz__score b{font-size:3.4rem;font-style:italic;color:var(--rouge-clair);line-height:1;margin-right:6px}
.quiz__fin p:not(.quiz__score){margin:0;color:var(--panneau-doux)}
.quiz:not(.quiz--actif) .quiz__fin{display:none}

/* Ce que fait chacun */
.partage{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px;margin-top:20px}
.partage>div{background:var(--fond);border-radius:var(--r);padding:clamp(22px,3vw,32px)}
.partage h3{font-size:1.4rem;margin-bottom:16px}
.coches .a-fournir{margin-left:6px;font-size:.75rem;vertical-align:middle}
.calcul__note{margin:0;font-size:.95rem}
.calcul .resultat{margin:0}
.etapes{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.offre__carte .coches{margin:20px 0}
.quiz__source{margin:-4px 0 0}

/* Les mannequins des trois pratiques */
.pratique__scene{height:clamp(170px,17vw,210px);margin-bottom:16px;border-radius:14px;background:var(--fond);display:block;overflow:hidden}
.pratique__scene .mannequin{width:100%;height:100%;display:block;overflow:visible;padding:10px 0 6px}
.m-loin{stroke:#ABACA4}
.m-short-loin{stroke:#5B5D55}
.m-pres{stroke:var(--encre)}
.m-short{stroke:#34362F}
.m-torse{stroke:var(--rouge)}
.m-tete{fill:var(--encre)}
.m-kb{fill:var(--encre)}
.m-ombre{fill:rgba(33,35,28,.14)}

/* Le projet et le budget */
.calcul__conseil{display:inline-block;margin-left:8px;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--rouge-clair)}
.calcul__frequence label.recommande>span{border-color:var(--rouge-clair);border-style:dashed}
.calcul__frequence input:checked+span{border-style:solid}
.calcul__options{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.calcul__options legend{font-weight:600;color:var(--panneau-texte);margin-bottom:10px;padding:0}
.calcul__options label{position:relative;cursor:pointer}
.calcul__options input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.calcul__options span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:2px solid #3A3B34;color:var(--panneau-doux);font-weight:600;transition:background .2s,border-color .2s,color .2s}
.calcul__options input:checked+span{background:var(--panneau-texte);border-color:var(--panneau-texte);color:var(--panneau)}
.calcul__options input:focus-visible+span{outline:3px solid #fff;outline-offset:3px}
.projet{margin:0;padding:12px 16px;border-radius:var(--r-petit);background:#FBE3E1;color:var(--rouge-fonce);font-weight:600}
.case{display:flex;align-items:center;gap:12px;cursor:pointer;font-weight:600;min-height:44px}
.case input{width:22px;height:22px;accent-color:var(--rouge);flex:none}
.contact__titre{color:#fff}

/* Le blog */
.articles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:16px}
.carte-article{display:flex;flex-direction:column;gap:10px;height:100%;padding:clamp(22px,3vw,32px);border-radius:var(--r);background:var(--surface);border:1px solid var(--trait);text-decoration:none;transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .2s}
.carte-article:hover{transform:translateY(-4px);border-color:var(--encre)}
.carte-article__theme{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rouge)}
.carte-article h2{font-size:clamp(1.4rem,1.2rem + .8vw,1.8rem);margin:0}
.carte-article p{margin:0;color:var(--encre-douce)}
.carte-article__meta{margin-top:auto;padding-top:8px;font-size:.88rem;color:var(--encre-douce)}
.article__entete{padding-block:clamp(40px,7vw,96px) clamp(24px,4vw,40px);max-width:880px}
.article__entete h1{font-size:clamp(2.2rem,1.5rem + 3vw,3.8rem);text-transform:none}
.fil{margin-bottom:20px;font-weight:700}
.fil a{color:var(--rouge);text-underline-offset:4px}
.fil a::before{content:"← "}
.article__chapeau{font-size:clamp(1.1rem,1rem + .4vw,1.3rem);color:var(--encre-douce);max-width:60ch}
.article__meta{margin:0;font-size:.9rem;color:var(--encre-douce)}
.article__corps{max-width:760px;padding-bottom:clamp(40px,6vw,72px);font-size:1.08rem;line-height:1.72}
.article__corps h2{font-size:clamp(1.5rem,1.3rem + .8vw,2rem);margin:1.8em 0 .5em}
.article__corps ul,.article__corps ol{padding-left:1.3em}
.article__corps li{margin-bottom:.5em}
.article__corps li::marker{color:var(--rouge);font-weight:700}
.article__corps strong{color:var(--rouge-fonce)}
.article__corps blockquote{margin:1.6em 0;padding-left:clamp(18px,3vw,28px);border-left:4px solid var(--rouge)}
.article__corps blockquote p{font-family:var(--titre);font-weight:500;font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem);line-height:1.3;margin:0 0 .4em}
.article__corps blockquote footer{font-size:.9rem;color:var(--encre-douce)}
.article__corps a{color:var(--encre);text-underline-offset:3px}
.article__sources{font-size:.92rem;color:var(--encre-douce)}
.article__fin{padding-bottom:var(--section)}

/* L'inscription, dans le pied de page */
.inscription{display:grid;gap:10px}
.inscription__titre{font-family:var(--titre);font-weight:600;font-size:1.15rem;text-transform:uppercase;color:#fff}
.inscription__ligne{display:flex;gap:8px}
.inscription input[type=email]{flex:1;min-width:0;min-height:44px;padding:0 14px;border-radius:999px;border:1.5px solid #3A3B34;background:#2A2C25;color:#fff;font:inherit;font-size:.95rem}
.inscription input[type=email]::placeholder{color:#8A8B84}
.inscription input[type=email]:focus{outline:none;border-color:var(--rouge-clair)}
.inscription .bouton--petit{min-height:44px}
.inscription__etat{margin:0;font-size:.9rem;font-weight:600;color:var(--panneau-doux)}
.inscription__etat:empty{display:none}
.inscription__etat[data-etat="ok"]{color:#8FD18A}
.inscription__etat[data-etat="erreur"]{color:#F2B7B3}
.inscription__rgpd{margin:0;font-size:.8rem;color:#8A8B84}

/* Paris, bien visible */
.lieu{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 10px;border-radius:999px;background:var(--encre);color:#fff;font-family:var(--titre);font-weight:500;font-size:.95rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:18px}
.lieu svg{width:18px;height:18px;fill:var(--rouge-clair)}
.offre__lieu{margin:0 0 10px;font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--rouge)}

/* Photos à venir */
.photo{margin:0 0 clamp(24px,4vw,40px);position:relative;border-radius:var(--r);overflow:hidden}
.photo img{width:100%;height:auto;display:block}
.photo--large img{aspect-ratio:1200/520;object-fit:cover}
.photo figcaption,.coach__photo figcaption{position:absolute;left:14px;bottom:14px;background:rgba(247,246,242,.92)}
.coach__photo{position:relative;margin:0 0 22px;border-radius:var(--r-petit);overflow:hidden}
.coach__photo>img:first-child{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.coach__visage{position:absolute;right:14px;top:14px;width:84px;height:84px;border-radius:50%;border:4px solid var(--surface);object-fit:cover}
.coach__photo figcaption{right:14px;bottom:14px;left:14px;text-align:center}

/* Les trois pratiques : plusieurs personnages par scène */
.pratique__scene{height:clamp(150px,14vw,190px)}
.pratique__scene .mannequin{padding:8px 6px 4px}
.pratique__mouvements{margin:-4px 0 12px;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rouge-clair)}
.m-tapis{fill:#B9D3C8}
.m-sangle{stroke:#E0A82E}
.m-ancre{fill:#6E6F67}

/* Le budget tient dans la hauteur de la carte du prix */
.offre{align-items:stretch}
.offre__carte{display:flex;flex-direction:column}
.offre__carte>.offre__sous:last-child{margin-top:auto}
.calcul{gap:14px;padding:clamp(22px,2.6vw,32px)}
.calcul__titre{font-size:clamp(1.4rem,1.2rem + .6vw,1.8rem)}
.calcul__reglage label,.calcul__frequence legend,.calcul__options legend{font-size:.95rem;margin-bottom:6px}
.calcul__effectif{margin-bottom:0}
.calcul__effectif output{font-size:clamp(2rem,1.7rem + 1vw,2.6rem)}
.calcul input[type="range"]{height:32px}
.calcul__frequence label>span{width:42px;height:42px;font-size:1.15rem}
.calcul__options span{min-height:38px;padding:0 14px;font-size:.92rem}
.calcul .resultat{padding:14px 18px;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.calcul .resultat__libelle{margin:0}
.calcul .resultat__valeur{font-size:clamp(1.9rem,1.6rem + 1vw,2.4rem);margin:0}
.calcul .resultat .source{flex-basis:100%;margin:0}

/* Le blog : abonnement */
.abonnement{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px 32px;margin-bottom:28px;padding:clamp(20px,3vw,28px);border-radius:var(--r);background:var(--encre)}
.abonnement .inscription{flex:1 1 360px;max-width:520px}
.flux{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:#fff;font-weight:700;text-decoration:none}
.flux svg{width:20px;height:20px;fill:#F28C28}
.flux:hover{text-decoration:underline}
.carte-article__couverture{position:relative;display:grid;place-items:center;aspect-ratio:16/9;margin:calc(clamp(22px,3vw,32px) * -1) calc(clamp(22px,3vw,32px) * -1) 8px;border-radius:var(--r) var(--r) 0 0;background:var(--encre);overflow:hidden}
.carte-article__couverture::after{content:"";position:absolute;right:16px;top:16px;width:56px;aspect-ratio:66/24;background:var(--chevrons) center/contain no-repeat}
.carte-article__couverture b{font-family:var(--titre);font-weight:700;font-style:italic;font-size:clamp(3rem,2.4rem + 2.4vw,4.4rem);color:var(--rouge-clair);line-height:1}
.carte-article{overflow:hidden}

/* Un seul bouton fort dans l'ouverture */

/* La bande vidéo, pleine largeur, teintée */
.cinema{position:relative;background:var(--encre);color:#fff;overflow:hidden;min-height:clamp(420px,52vw,640px);display:grid;align-items:end}
.cinema__media{position:absolute;inset:0}
.cinema__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05) brightness(.55)}
.cinema__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(22,23,18,.92) 0%,rgba(22,23,18,.55) 55%,rgba(189,36,30,.35) 100%)}
.cinema__lecture{position:absolute;z-index:2;left:50%;top:44%;transform:translate(-50%,-50%);width:clamp(72px,8vw,96px);aspect-ratio:1;border-radius:50%;border:0;background:var(--rouge);display:grid;place-items:center;cursor:pointer;box-shadow:0 0 0 0 rgba(189,36,30,.6);animation:pouls-video 2.2s infinite}
.cinema__lecture svg{width:42%;fill:#fff;margin-left:6%}
@keyframes pouls-video{0%{box-shadow:0 0 0 0 rgba(189,36,30,.55)}100%{box-shadow:0 0 0 28px rgba(189,36,30,0)}}
.cinema__texte{position:relative;z-index:1;padding-block:clamp(40px,6vw,72px)}
.cinema__titre{font-family:var(--titre);font-weight:700;text-transform:uppercase;font-size:clamp(2.6rem,1.8rem + 4vw,5.6rem);line-height:.95;margin:0 0 16px}
.cinema__titre em{font-style:normal;color:var(--rouge-clair)}
.cinema .a-fournir{color:#F2B7B3;background:rgba(0,0,0,.4);border-color:var(--rouge-clair)}
@media (prefers-reduced-motion:reduce){.cinema__lecture{animation:none}}

/* Le mini-jeu */
.jeu{margin-top:16px;padding:clamp(18px,3vw,32px);border-radius:var(--r);background:var(--encre);color:#fff}
.jeu__entete{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin-bottom:14px}
.jeu__entete h3{color:#fff;margin:0;font-size:clamp(1.5rem,1.2rem + 1vw,2.2rem);text-transform:uppercase}
.jeu__scores{margin:0;display:flex;gap:20px;color:var(--panneau-doux);font-weight:600}
.jeu__scores b{font-family:var(--titre);font-style:italic;font-size:1.6rem;color:var(--rouge-clair);margin-left:6px}
.jeu__terrain{position:relative;border-radius:var(--r-petit);overflow:hidden;background:#ECEBE7}
.jeu canvas{display:block;width:100%;touch-action:manipulation;cursor:pointer}
.jeu canvas:focus-visible{outline:3px solid var(--rouge-clair);outline-offset:-3px}
.jeu__ecran{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:8px;padding:16px;text-align:center;background:rgba(236,235,231,.88);color:var(--encre)}
.jeu__ecran[hidden]{display:none}
.jeu__titre{margin:0;font-family:var(--titre);font-weight:700;font-size:clamp(1.3rem,1.1rem + 1vw,2rem);text-transform:uppercase;line-height:1.1;max-width:26ch}
.jeu__texte{margin:0 0 6px;color:var(--encre-douce)}
.jeu__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}

/* Les deux portes d'entrée */
.portes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:16px}
.porte{border-radius:var(--r);padding:clamp(26px,4vw,48px);display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.porte h2{font-size:clamp(1.8rem,1.4rem + 1.4vw,2.6rem);text-transform:uppercase;margin:0}
.porte p{margin:0 0 10px}
.porte--rh{background:var(--rouge);color:#fff}
.porte--rh .surtitre{color:#FBE3E1}
.porte--rh h2{color:#fff}
.porte--rh .bouton{background:#fff;color:var(--rouge);border-color:#fff}
.porte--rh .bouton:hover{background:var(--encre);color:#fff;border-color:var(--encre)}
.porte--salarie{background:var(--surface);border:1px solid var(--trait)}
.porte__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.porte__etat{font-weight:600;color:#2E6B2A}
.porte__etat:empty{display:none}

/* Portraits des avis */
.avis figcaption{display:flex;align-items:center;gap:12px}
.avis__portrait{width:44px;height:44px;border-radius:50%;flex:none}
.cinema__lecture{left:auto;right:clamp(24px,14vw,220px);top:50%;transform:translateY(-50%)}
@media (max-width:760px){.cinema__lecture{right:20px;top:24px;transform:none}}
.carte-article__couverture b{font-size:clamp(2.6rem,2rem + 2vw,3.6rem);white-space:nowrap}

/* Score de satisfaction */
.satisfaction{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.satisfaction__chiffre{margin:0;font-family:var(--titre);font-weight:500;font-size:1.2rem;text-transform:uppercase;display:flex;align-items:baseline;gap:10px}
.satisfaction__chiffre b{font-weight:700;font-style:italic;font-size:clamp(2.8rem,2.2rem + 2vw,3.8rem);line-height:1;color:var(--rouge)}
@media (max-width:640px){.satisfaction{align-items:flex-start}}
.app .liste-rouge li{font-family:var(--titre);font-weight:600;font-size:clamp(1.2rem,1.05rem + .5vw,1.5rem);text-transform:uppercase;letter-spacing:.02em}
.jeu__devis[hidden]{display:none}
@media (max-width:600px){
  .jeu__ecran{gap:6px}
  .jeu__titre{font-size:1.2rem}
  .jeu__texte{font-size:.92rem}
}

/* Les clients défilent, lentement, en continu */
.defilement{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.defilement__piste{list-style:none;margin:0;padding:0;display:flex;width:max-content;animation:defile 36s linear infinite}
.defilement:hover .defilement__piste{animation-play-state:paused}
.defilement__piste li{display:flex;align-items:center;gap:clamp(28px,4vw,56px);padding-right:clamp(28px,4vw,56px);font-family:var(--titre);font-weight:600;font-size:clamp(1.4rem,1.1rem + 1.2vw,2.1rem);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;color:#fff}
.defilement__piste li::after{content:"";width:9px;height:9px;background:var(--rouge-clair);transform:rotate(45deg)}
@keyframes defile{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.defilement__piste{animation:none;flex-wrap:wrap;width:auto}.defilement__piste li[aria-hidden]{display:none}}
.bandeau{overflow:hidden}
.defilement{margin-inline:calc(50% - 50vw)}

/* Le jeu : démonstration en grisé, force, commandes tactiles */
.jeu--demo canvas{filter:grayscale(1);opacity:.55}
.jeu__ecran{background:rgba(236,235,231,.42)}
.jeu--demo .jeu__ecran{background:transparent}
.jeu__titre,.jeu__texte{text-shadow:0 1px 0 rgba(255,255,255,.7)}
.jeu__commandes{display:none;gap:10px;margin-top:12px}
.jeu__commandes button{flex:1;min-height:64px;border-radius:var(--r-petit);border:0;background:#3A3B34;display:grid;place-items:center;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}
.jeu__commandes button:active{background:var(--rouge)}
.jeu__commandes svg{width:30px;fill:#fff}
@media (hover:none) and (pointer:coarse){.jeu__commandes{display:flex}}
@media (max-width:600px){.jeu__scores{gap:12px;font-size:.9rem}}

/* Les trois jauges du jeu */

/* Comment ça marche : quatre étapes reliées, en une ligne */
.parcours{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px);position:relative}
.parcours::before{content:"";position:absolute;left:12%;right:12%;top:34px;height:3px;background:repeating-linear-gradient(90deg,var(--rouge) 0 10px,transparent 10px 18px)}
.parcours li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;counter-increment:p}
.parcours__icone{position:relative;width:70px;height:70px;border-radius:50%;background:var(--encre);display:grid;place-items:center;margin-bottom:10px;box-shadow:0 0 0 6px var(--surface)}
.parcours__icone svg{width:30px;fill:#fff}
.parcours__icone::after{content:counter(p);position:absolute;right:-4px;top:-4px;width:26px;height:26px;border-radius:50%;background:var(--rouge);color:#fff;font-family:var(--titre);font-weight:700;font-size:.95rem;display:grid;place-items:center}
.parcours h3{margin:0;font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem)}
.parcours p{margin:0;color:var(--encre-douce);max-width:22ch}
@media (max-width:760px){
  .parcours{grid-template-columns:1fr;gap:20px}
  .parcours::before{left:34px;right:auto;top:20px;bottom:20px;width:3px;height:auto;background:repeating-linear-gradient(180deg,var(--rouge) 0 10px,transparent 10px 18px)}
  .parcours li{flex-direction:row;align-items:center;text-align:left;gap:16px;flex-wrap:wrap}
  .parcours__icone{margin:0;flex:none}
  .parcours li>div{flex:1}
}
.compris{margin-top:clamp(32px,5vw,48px);display:grid;gap:10px;padding:clamp(18px,2.6vw,26px);border-radius:var(--r);background:var(--fond)}
.compris p{margin:0}
.compris b{display:inline-block;min-width:7.5em;font-family:var(--titre);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--rouge)}

/* Les bénéfices pour l'entreprise */
.benefices{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:16px}
.benefice{background:var(--fond);border-radius:var(--r);padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;gap:6px}
.benefice__chiffre{margin:0;font-family:var(--titre);font-weight:700;font-style:italic;font-size:clamp(2.6rem,2rem + 2vw,3.6rem);line-height:1;color:var(--rouge);white-space:nowrap}
.benefice h3{margin:4px 0 0;font-size:1.4rem;text-transform:uppercase}
.benefice p{margin:0;color:var(--encre-douce)}
.benefice .source{margin-top:auto;padding-top:8px}

/* 95 % de clients satisfaits, en grand */
.satisfaction__chiffre{gap:14px;align-items:center}
.satisfaction__chiffre b{font-size:clamp(4.2rem,3rem + 5vw,7rem)}
.satisfaction__chiffre span{font-size:clamp(1.1rem,1rem + .5vw,1.5rem);line-height:1.1;text-align:left}
.parcours{counter-reset:p}

/* La section du jeu, à part */
.section--jeu{background:var(--panneau);color:#fff}
.section--jeu .titre-section{color:#fff}
.section--jeu .jeu{margin-top:0;background:#1F201A}
.jeu__consigne{margin:0;color:var(--panneau-doux);font-weight:600}
.benefice .benefice__chiffre{color:var(--rouge)}
@media (max-width:600px){.compris b{display:block;min-width:0;margin-bottom:2px}}

/* Compris / À prévoir : deux cartes bien distinctes */
.compris{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px;padding:0;background:none}
.compris__bloc{border-radius:var(--r);padding:clamp(22px,3vw,32px)}
.compris__bloc h3{margin:0 0 16px;font-size:1.5rem;text-transform:uppercase}
.compris__bloc--inclus{background:var(--encre);color:#fff}
.compris__bloc--inclus h3{color:#fff}
.compris__bloc--inclus .coches li{color:#fff}
.compris__bloc--prevoir{background:var(--surface);border:2px dashed var(--trait)}
.compris__bloc--prevoir h3{color:var(--encre)}
.compris__bloc .a-fournir{display:block;width:max-content;max-width:100%;margin:6px 0 0}
.parcours li{gap:4px}
.parcours h3{line-height:1.15;margin-bottom:2px}
.parcours p{line-height:1.35;font-size:.98rem}
@media (max-width:760px){.parcours li>div{display:grid;gap:2px}}
.compris__bloc--prevoir .coches li::before{border-color:var(--encre-douce)}
@media (max-width:760px){.parcours li{gap:16px}}
.ouverture--blog{padding-block:clamp(36px,6vw,72px) clamp(20px,3vw,32px)}
.ouverture--blog h1{font-size:clamp(2.2rem,1.7rem + 2vw,3.2rem)}
.ouverture--blog::after{width:min(34vw,360px)}
.carte-article h2{font-size:clamp(1.35rem,1.2rem + .5vw,1.6rem);line-height:1.15;text-wrap:pretty}
.article__entete h1{text-wrap:pretty}

/* Le contact tient sur un écran */
#contact{padding-block:clamp(36px,5vh,56px)}
#contact .duo{align-items:center;gap:clamp(24px,4vw,56px)}
#contact .contact__titre{font-size:clamp(2rem,1.4rem + 2.4vw,3.4rem);margin-bottom:.3em}
#contact .coordonnees{margin-top:16px;gap:14px}
#contact .coordonnees h3{margin-bottom:.15em}
#contact .formulaire{gap:10px;padding:clamp(18px,2.4vw,26px)}
#contact .champs{gap:10px}
#contact .champ{gap:3px}
#contact .champ label{font-size:.88rem}
#contact .champ input,#contact .champ select,#contact .champ textarea{min-height:42px;padding:9px 12px;font-size:.95rem}
#contact .champ textarea{min-height:84px;height:84px}
#contact .case{min-height:36px;font-size:.92rem}
#contact .formulaire__bas .bouton{min-height:46px}
#contact .rgpd{font-size:.78rem}
#contact .projet{padding:8px 12px;font-size:.9rem}
#contact .case--grille{align-self:end;min-height:42px}
#contact .formulaire__bas{gap:8px 16px;flex-wrap:nowrap}
#contact .formulaire__bas .rgpd{flex:1;margin:0}
#contact .formulaire__etat:empty{display:none}
@media (max-width:600px){#contact .formulaire__bas{flex-wrap:wrap}}
@media (min-width:761px){
  #contact .duo{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}
  #contact .champs{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  #contact .champs{grid-template-columns:1fr 1fr}
  #contact .champ--large,#contact .case--grille{grid-column:1/-1}
  #contact .duo{display:flex;flex-direction:column;gap:16px}
  #contact .duo>div:first-child{display:contents}
  #contact .surtitre{order:1;margin:0}
  #contact .contact__titre{order:2;font-size:2rem;margin:0}
  #contact .formulaire{order:3}
  #contact .coordonnees{order:4;margin-top:4px}
  #contact .case--grille{min-height:32px}
}
@media (max-width:760px){#contact .surtitre{align-self:flex-start}}

.quiz__aide{margin:-6px 0 0;font-size:.88rem;color:var(--encre-douce)}

/* Le jeu : un cadrage qui montre toujours assez de terrain */
.jeu canvas{height:auto;aspect-ratio:3.6}
@media (max-width:760px){.jeu canvas{aspect-ratio:1.9}}
.jeu__titre{max-width:32ch}
@media (max-width:760px){.jeu__titre{font-size:1.05rem}.jeu__texte{font-size:.8rem;margin:0}.jeu__ecran{gap:4px}.jeu__ecran .bouton{min-height:40px;padding:0 18px}}

/* Revue générale */
#pourquoi .entete-section{max-width:1000px}
.quiz__choix{font-size:clamp(1.05rem,.95rem + .45vw,1.3rem);padding:0 4px;line-height:1.1}
@media (prefers-reduced-motion:reduce){.defilement{-webkit-mask:none;mask:none}}

/* Revue mobile */
@media (max-width:760px){
  .hero__logo{max-width:150px;margin-top:4px}
  .hero{padding-bottom:28px}
  .titre-section{display:block}
  .titre-section::before{display:block;width:48px;margin-bottom:10px}
  h2.titre-section{font-size:clamp(1.7rem,1.3rem + 2vw,2.2rem)}
  .benefices{grid-template-columns:1fr 1fr;gap:10px}
  .benefice{padding:16px}
  .benefice__chiffre{font-size:2.1rem}
  .benefice h3{font-size:1.05rem}
  .benefice p{font-size:.9rem;line-height:1.4}
  .benefice .source{font-size:.7rem}
  .equipe{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gouttiere) * -1);padding:4px var(--gouttiere) 12px;scrollbar-width:none}
  .equipe::-webkit-scrollbar{display:none}
  .coach{scroll-snap-align:center}
  .coach__photo>img:first-child{aspect-ratio:1/1}
  #contact .duo{align-items:stretch}
}
@media (max-width:760px){.benefice .benefice__chiffre{font-size:2.2rem;line-height:1}}
.benefices__lien{margin:20px 0 0}
.pied__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px}
.pied__legal p{margin:0}
.pied__legal a{color:var(--panneau-texte)}
.texte dl{grid-template-columns:minmax(150px,220px) 1fr}