/* Castflow — /talent/ · la page simple (13 nov. 2026)
   Maquettes Figma CFT-1811, page « version finale » : 608:62 (ouverture), 618:70,
   615:113, 615:316 et 621:62 (les trois étapes), 616:62 (témoignages), 612:62 (FAQ).
   Le PO : « un truc beaucoup plus simple, comme Jobr ». Plus de scène ni de téléphone :
   une page qui défile normalement. v3.css reste chargé pour la barre, le tiroir, les
   boutons, la boîte d'inscription et le pied de page. */

.s-page{position:relative; z-index:1; color:var(--encre); font-family:Geist, system-ui, sans-serif}
.s-sec{box-sizing:border-box; width:100%; max-width:1440px; margin:0 auto; padding:110px 150px}
.s-sec em{font-style:normal; color:var(--teal)}

/* ── ce qui arrive en fondu quand on y arrive ── */
.s-vient{opacity:0; transform:translateY(22px); transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--d, 0) * 90ms)}
.s-vient.vu{opacity:1; transform:none}

/* ── 01 · l'ouverture ── */
.s-hero{display:grid; grid-template-columns:minmax(0, 1.18fr) minmax(0, .82fr); align-items:center; gap:40px;
  min-height:min(900px, 100vh); padding-top:130px; padding-bottom:70px}
/* (13 nov., 15 h 35, le PO : « une pastille pour alpha ») au-dessus du titre */
.s-pastille{display:inline-flex; align-items:center; gap:10px; margin:0 0 22px; padding:4px 16px 4px 4px; border-radius:999px;
  background:#ECEFF2; font-size:15px; line-height:22px; color:var(--encre)}
.s-pastille b{padding:4px 12px; border-radius:999px; background:var(--teal); color:#fff; font-weight:500}
html.mobile .s-pastille{margin-bottom:16px; font-size:14px}
.s-hero__titre{margin:0; font-size:72px; line-height:78px; font-weight:500; letter-spacing:-.03em}
.s-hero__titre span{display:block; white-space:nowrap}
.s-hero__sous{margin:26px 0 0; max-width:610px; font-size:18px; line-height:28px; color:var(--corps)}
.s-champ{display:flex; align-items:center; gap:8px; box-sizing:border-box; width:100%; max-width:440px; height:54px;
  margin-top:34px; padding:6px 6px 6px 26px; background:#fff; border:1px solid rgba(15,23,30,.08);
  border-radius:999px; box-shadow:0 8px 24px rgba(15,23,30,.06); transition:border-color .3s ease}
.s-champ:focus-within{border-color:var(--teal)}
.s-champ input{flex:1 1 auto; min-width:0; height:100%; border:0; background:none; outline:0; font:inherit;
  font-size:16px; color:var(--encre)}
.s-champ input::placeholder{color:#8F99A6}
.s-champ .bouton{position:static; left:auto; top:auto; margin:0; flex:0 0 auto; width:auto; height:42px; gap:14px;
  padding:3px 3px 3px 18px; font-size:13px; white-space:nowrap; text-decoration:none}
.s-champ .bouton i{width:30px; height:30px; flex:0 0 30px}
/* (13 nov., 15 h 15, le PO : « arrête avec l'ombre derrière le bouton ») : aucun halo, ni au repos ni au survol.
   (15 h 30 : « comme l'animation d'avant, où le rond prend tout le bouton ») : le rond blanc de la
   flèche grandit et recouvre le bouton, comme sur les autres boutons du site (.bouton__sur, v3.css). */
.s-champ .bouton, .s-champ .bouton:hover, html.mobile .s-champ .bouton{box-shadow:none}
.s-champ .bouton{position:relative; overflow:hidden}
.s-champ:not(.sans-champ) .bouton .bouton__sur{clip-path:circle(0px at calc(100% - 18px) 50%)}
.s-champ:not(.sans-champ) .bouton:hover .bouton__sur{clip-path:circle(150% at calc(100% - 18px) 50%)}
.s-champ:not(.sans-champ) .bouton:hover{transform:none}
/* blanc dans un champ blanc : un liseré bleu garde la forme du bouton une fois le rond étendu */
.s-champ:not(.sans-champ) .bouton .bouton__sur{border-radius:999px; box-shadow:inset 0 0 0 1.5px var(--teal)}
/* les états sans formulaire (déjà un compte, dans la file…) : plus de champ, le bouton seul */
.s-champ.sans-champ{width:auto; max-width:none; display:inline-flex; padding:6px; background:none; border-color:transparent; box-shadow:none}
.s-champ.sans-champ input{display:none}
.s-champ.sans-champ .bouton{height:48px; padding:4px 4px 4px 22px; font-size:15px}
.s-champ.sans-champ .bouton i{width:36px; height:36px; flex-basis:36px}
.s-note{margin:14px 0 0 26px; font-size:13px; line-height:19px; color:var(--muet)}
.s-champ.sans-champ + .s-note{display:none}
.s-hero__visuel{display:flex; flex-direction:column; align-items:center}

/* ── la pile de projets : droite, alignée, la carte de devant part et la suivante avance ── */
.s-pile{--w:410px; position:relative; width:var(--w); height:var(--w); margin-top:calc(var(--w) * .16)}
.s-pile img{position:absolute; left:0; top:0; width:100%; height:auto; display:block; user-select:none; -webkit-user-drag:none;
  transform-origin:50% 50%; will-change:transform, opacity;
  transition:transform .7s cubic-bezier(.22,1,.36,1), opacity .7s cubic-bezier(.22,1,.36,1)}
.s-pile img[data-pos="0"]{z-index:4; opacity:1; transform:none}
.s-pile img[data-pos="1"]{z-index:3; opacity:.65; transform:translateY(-10.7%) scale(.907)}
.s-pile img[data-pos="2"]{z-index:2; opacity:.35; transform:translateY(-21%) scale(.815)}
.s-pile img[data-pos="3"]{z-index:1; opacity:0; transform:translateY(-30%) scale(.73); transition:none}
.s-pile img.part-d{z-index:5; opacity:0; transform:translateX(62%) rotate(7deg); transition-duration:.6s}
.s-pile img.part-g{z-index:5; opacity:0; transform:translateX(-62%) rotate(-7deg); transition-duration:.6s}
.s-ronds{position:relative; z-index:6; display:flex; gap:20px; margin-top:calc(var(--w, 410px) * -.062)}
.s-rond{width:64px; height:64px; padding:0; border:0; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease}
.s-rond svg{width:26px; height:26px; display:block}
.s-rond--non{background:#FCDEDC}
.s-rond--oui{background:#D7F0E6}
.s-rond:hover{transform:translateY(-2px)}
.s-rond.vif{transform:scale(1.14)}
.s-rond--non.vif{box-shadow:0 10px 24px rgba(219,77,66,.25)}
.s-rond--oui.vif{box-shadow:0 10px 24px rgba(5,150,106,.25)}
.s-rond:focus-visible{outline:2px solid var(--encre); outline-offset:4px}

/* ── 02 · les trois étapes ── */
.s-etapes{display:grid; grid-template-columns:minmax(0, 540px) minmax(0, 540px); justify-content:space-between; align-items:center; gap:40px}
.s-etapes__liste{display:flex; flex-direction:column; gap:12px}
.s-etape{display:flex; align-items:flex-start; gap:22px; box-sizing:border-box; width:100%; padding:18px 28px; border:0; border-radius:26px;
  background:transparent; text-align:left; font:inherit; color:inherit; cursor:pointer;
  transition:background-color .5s ease, box-shadow .5s ease, padding .5s cubic-bezier(.22,1,.36,1)}
.s-etape img{flex:0 0 auto; height:52px; width:auto; opacity:.4; transition:opacity .5s ease}
.s-etape__textes{flex:1 1 auto; min-width:0; padding-top:9px}
.s-etape h3{margin:0; font-size:28px; line-height:34px; font-weight:500; letter-spacing:-.02em; color:#9EA7B0; transition:color .5s ease}
.s-etape__plus{display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s cubic-bezier(.22,1,.36,1)}
.s-etape__plus p{overflow:hidden; margin:0; max-width:400px; font-size:17px; line-height:25px; color:var(--corps);
  opacity:0; transition:opacity .4s ease}
.s-etape.on{padding:28px; background:#fff; box-shadow:0 14px 34px rgba(15,23,30,.07); cursor:default}
.s-etape.on img{opacity:1}
.s-etape.on h3{color:var(--encre)}
.s-etape.on .s-etape__plus{grid-template-rows:1fr}
.s-etape.on .s-etape__plus p{opacity:1; padding-top:10px; transition-delay:.15s}
.s-etape:not(.on):hover h3{color:var(--corps)}
/* la barre du temps : elle se remplit jusqu'au passage à l'étape suivante */
.s-etape{position:relative}
.s-etape{overflow:hidden}
.s-etape__temps{position:absolute; left:0; right:0; bottom:0; height:4px; opacity:0; transition:opacity .4s ease}
.s-etape.on .s-etape__temps{opacity:1}
.s-etape__temps i{display:block; height:100%; background:var(--teal); transform-origin:0 50%; transform:scaleX(0)}
.s-etape.compte .s-etape__temps i{animation:s-temps var(--duree, 5s) linear forwards}
@keyframes s-temps{to{transform:scaleX(1)}}
.s-etape:focus-visible{outline:2px solid var(--encre); outline-offset:2px}
/* le bouton pour s'inscrire, sous la liste : il arrive avec « Tu swipes. » et reste */
.s-etapes__appel{display:grid; grid-template-rows:0fr; opacity:0; pointer-events:none;
  transition:grid-template-rows .7s cubic-bezier(.22,1,.36,1), opacity .7s ease .1s}
.s-etapes__appel > div{overflow:hidden; margin:0 -14px; padding:0 14px}
.s-etapes.fini .s-etapes__appel{grid-template-rows:1fr; opacity:1; pointer-events:auto}
.s-etapes.fini .s-etapes__appel > div{padding:20px 14px 30px}
.s-etapes__appel .s-champ{max-width:none; margin-top:0}

.s-panneau{position:relative; height:600px; border-radius:40px; background:#ECEFF2; overflow:hidden}
/* UNE scène, trois temps (13 nov. 2026, 15 h, le PO : « les animations reliées entre elles ») */
.s-scene{position:absolute; inset:0; display:flex; align-items:center; justify-content:center}
/* 1 · le mur de projets, les cartes arrivent une par une */
.s-mur{display:grid; grid-template-columns:repeat(4, 118px); grid-auto-rows:128px}
.s-mur span{position:relative; display:block}
.s-mur img{position:absolute; left:50%; top:50%; width:calc(106px / var(--r, .81)); height:auto; display:block;
  transform:translate(-50%, -50%) translateY(16px) scale(.94); opacity:0;
  transition:opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1)}
.s-scene.on .s-mur img{opacity:1; transform:translate(-50%, -50%); transition-delay:calc(.2s + var(--i) * 70ms)}
/* 2 · le tri : la croix ou le crochet se pose sur chaque carte, une par une */
.s-mur i{position:absolute; z-index:6; right:-2px; bottom:4px; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  opacity:0; transform:scale(.5); transition:opacity .35s ease, transform .5s cubic-bezier(.22,1,.36,1)}
.s-mur i svg{width:46%; height:46%; display:block}
.s-mur .non i{background:#FCDEDC} .s-mur .oui i{background:#D7F0E6}
.s-scene.marque .s-mur i{opacity:1; transform:none; transition-delay:calc(var(--i) * 110ms)}
.s-scene.marque .s-mur .non img{opacity:.45; transition-delay:calc(var(--i) * 110ms)}
.s-scene.marque .s-mur .oui img{transition-delay:0s}
/* … puis les refusées s'effacent : il reste celles qui sont pour toi */
.s-scene.garde .s-mur .non img{opacity:0; transform:translate(-50%, -50%) scale(.86); transition-delay:calc(var(--i) * 30ms)}
.s-scene.garde .s-mur .non i{opacity:0; transform:scale(.5); transition-delay:calc(var(--i) * 30ms)}
/* 3 · celles-là se rassemblent en pile (simple.js pose leur trajet), puis la vraie pile prend le relais */
.s-scene.pile .s-mur .oui img{transition:transform .9s cubic-bezier(.22,1,.36,1), opacity .9s ease; transition-delay:0s}
.s-scene.pile .s-mur .oui i{opacity:0; transform:scale(.5); transition-delay:0s}
.s-scene.tourne .s-mur{visibility:hidden}
.s-scene__pile{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  opacity:0; pointer-events:none}
.s-scene.tourne .s-scene__pile{opacity:1; pointer-events:auto}
.s-scene__pile .s-ronds{opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1)}
.s-scene.tourne .s-scene__pile .s-ronds{opacity:1; transform:none}
.s-scene .s-pile{--w:330px}
.s-scene .s-ronds{--w:330px}
.s-scene .s-rond{width:60px; height:60px}

/* en grand écran, la section reste collée à l'écran pendant ses trois étapes : on défile pour passer de l'une à l'autre */
html:not(.mobile) .s-etapes-piste{height:calc(100vh + 2 * 70vh)}
html:not(.mobile) .s-etapes{position:sticky; top:0; height:100vh; padding-top:0; padding-bottom:0; align-content:center}
html:not(.mobile) .s-etapes .s-vient{opacity:1; transform:none}
html:not(.mobile) .s-etape__temps{display:none}
@media (max-height:700px){ html:not(.mobile) .s-panneau{height:520px} }

/* ── 03 · les témoignages ── */
.s-temoins{display:grid; grid-template-columns:minmax(0, 460px) minmax(0, 620px); justify-content:space-between; align-items:center; gap:40px}
.s-temoins__sur{margin:0 0 28px; font-size:17px; line-height:24px; color:var(--teal)}
.s-temoins blockquote{margin:0}
.s-vedette blockquote{font-size:38px; line-height:46px; font-weight:500; letter-spacing:-.025em}
.s-signe{display:flex; align-items:center; gap:12px; margin-top:28px}
.s-signe img{width:52px; height:52px; border-radius:50%; object-fit:cover; display:block}
.s-signe b{display:block; font-size:15px; line-height:20px; font-weight:500}
.s-signe em{display:block; font-style:normal; font-size:13px; line-height:18px; color:var(--muet)}
.s-temoins__cartes{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.s-temoin{display:flex; flex-direction:column; justify-content:space-between; gap:22px; margin:0; min-height:250px; box-sizing:border-box;
  padding:26px; border-radius:26px; background:#fff; box-shadow:0 12px 30px rgba(15,23,30,.06)}
.s-temoin blockquote{font-size:15px; line-height:22px; color:var(--corps)}
.s-temoin .s-signe{margin-top:0}
.s-temoin .s-signe img{width:40px; height:40px}

/* ── 04 · la FAQ ── */
.s-faq{display:grid; grid-template-columns:minmax(0, 300px) minmax(0, 730px); justify-content:space-between; align-items:start; gap:40px}
.s-faq__titre{margin:14px 0 0; font-size:52px; line-height:58px; font-weight:500; letter-spacing:-.03em}
.s-faq__liste{margin:0; padding:0; list-style:none; border-bottom:2px solid #DBE0E5}
.s-faq__liste li{border-top:2px solid #DBE0E5}
.s-q{display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%; padding:24px 0; border:0; background:none;
  text-align:left; font:inherit; font-size:22px; line-height:28px; font-weight:500; color:var(--corps); cursor:pointer; transition:color .3s ease}
.s-q:hover, li.ouvert .s-q{color:var(--encre)}
.s-q i{position:relative; flex:0 0 18px; width:18px; height:18px}
.s-q i::before, .s-q i::after{content:''; position:absolute; left:0; top:8px; width:18px; height:2px; background:#9EA7B0;
  transition:transform .45s cubic-bezier(.22,1,.36,1), background-color .3s ease}
.s-q i::after{transform:rotate(90deg)}
li.ouvert .s-q i::before, li.ouvert .s-q i::after{background:var(--encre)}
li.ouvert .s-q i::after{transform:rotate(0deg)}
.s-q:focus-visible{outline:2px solid var(--encre); outline-offset:4px}
.s-r{display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s cubic-bezier(.22,1,.36,1)}
.s-r p{overflow:hidden; margin:0; max-width:620px; font-size:17px; line-height:26px; color:var(--corps); opacity:0; transition:opacity .35s ease}
li.ouvert .s-r{grid-template-rows:1fr}
li.ouvert .s-r p{opacity:1; padding-bottom:24px; margin-top:-12px; transition-delay:.12s}

/* ── PIED DE SITE:début ── */
/* (13 nov. 2026, 15 h 45, le PO : « regarde le bon footer, mets-le dans la page ») : le pied de page du
   site, avec l'infolettre. Ses règles sont COPIÉES de assets/css/styles.css et refonte.css (tout ce qui
   porte cf-pied ou cf-form-sent), parce que ces feuilles entières ne sont pas chargées sur /talent/. */
.cf-form-sent{display: flex; align-items: flex-start; gap: 12px; width: 100%; max-width: 600px; animation: fadeUp 0.5s ease both;}
.cf-form-sent__icon{flex-shrink: 0; width: 34px; height: 34px; border-radius: 999px; background: #007692; color: #fff; display: flex; align-items: center; justify-content: center;}
.cf-form-sent__title{font-weight: 500; font-size: 16px; line-height: 1.3;}
.cf-form-sent__sub{font-size: 13px; line-height: 1.5; margin-top: 3px;}
.cf-form-sent--on-dark{color: #fff;}
.cf-form-sent--on-dark  .cf-form-sent__sub{color: rgba(255, 255, 255, 0.7);}
.cf-form-sent--on-light{color: #0f0f0f;}
.cf-form-sent--on-light .cf-form-sent__sub{color: rgba(0, 0, 0, 0.5);}
.cf-pied{background:transparent; padding:60px 16px 40px}
.cf-pied--creme{background:#f6f4f1}
.cf-pied__carte{max-width:1720px; margin:0 auto; background:#fff; border:1px solid #E7EBEC; border-radius:26px; padding:44px 24px 30px}
.cf-pied__haut{display:flex; flex-direction:column; gap:40px; align-items:flex-start; justify-content:space-between}
.cf-pied__marque{width:100%; max-width:520px}
.cf-pied__logo{display:block; margin-bottom:18px}
.cf-pied__logo img{display:block; height:30px; width:auto}
.cf-pied__legal{margin:0; max-width:460px; font-size:14px; line-height:23px; color:#3F4750}
.cf-pied__champ{display:flex; align-items:center; gap:12px; margin-top:34px; width:100%; max-width:560px; height:52px; border-radius:26px; background:#F5F6F7; border:1px solid #EDEFF1; padding:0 6px 0 22px}
.cf-pied__champ input{flex:1; min-width:0; border:0; background:none; font:inherit; font-size:15px; color:#0A0A0A; outline:none}
.cf-pied__champ input::placeholder{color:#6B747C}
.cf-pied__champ button{flex:0 0 auto; border:0; border-radius:999px; background:#0A0A0A; color:#fff; font:inherit; font-size:14px; font-weight:500; letter-spacing:-0.01em; height:40px; padding:0 20px; cursor:pointer; white-space:nowrap; transition:background-color .25s ease}
.cf-pied__champ button:hover{background:#007692}
.cf-pied__champ button:focus-visible{outline:2px solid #007692; outline-offset:3px}
.cf-pied__infolettre{margin-top:34px; width:100%; max-width:560px}
.cf-pied__infolettre .cf-pied__champ{margin-top:0}
.cf-pied__role{margin-top:10px; width:100%; height:44px; border-radius:22px; background:#F5F6F7; border:1px solid #EDEFF1; padding:0 18px; font:inherit; font-size:14px; color:#0A0A0A; cursor:pointer; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B747C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 18px center}
.cf-pied__role:invalid{color:#6B747C}
.cf-pied__role:focus-visible{outline:2px solid #007692; outline-offset:2px}
.cf-pied__consent{margin:10px 0 0; font-size:12.5px; line-height:18px; color:#6B747C}
.cf-pied__consent a{color:inherit; text-decoration:underline; text-underline-offset:2px}
.cf-pied__consent a:hover{color:#0A0A0A}
.cf-pied__cols{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:32px}
.cf-pied__titre{margin:0 0 5px; font-size:13px; font-weight:600; letter-spacing:.06em; color:#6B747C}
.cf-pied__cols ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px}
.cf-pied__lien{font-size:15px; color:#0A0A0A; text-decoration:none; transition:color .25s ease}
.cf-pied__lien:hover{color:#007692}
.cf-pied__soon{display:flex; flex-direction:column; align-items:flex-start; gap:5px}
.cf-pied__soon span:first-child{font-size:15px; color:#6B747C}
.cf-pied__badge{font-size:11px; font-weight:600; letter-spacing:.09em; color:#6B747C; background:#F0F1F2; border-radius:8px; padding:3px 8px}
.cf-pied__bas{display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:16px; margin-top:28px; padding-top:22px; border-top:1px solid #E7EBEC}
.cf-pied__soc{display:flex; gap:26px; margin-left:auto}
.cf-pied__soc a{font-size:14px; color:#0A0A0A; text-decoration:none; transition:color .25s ease}
.cf-pied__soc a:hover{color:#007692}
@media (min-width:640px){
  .cf-pied{padding:80px 40px 56px}
  .cf-pied__carte{padding:44px 64px 30px}
  .cf-pied__cols{grid-template-columns:repeat(3, minmax(0, 1fr)); gap:44px; justify-items:start}
}
@media (min-width:1024px){
  .cf-pied{padding:60px 100px 40px}
  .cf-pied__haut{flex-direction:row; gap:80px}
  .cf-pied__bas{flex-direction:row}
}
@media (min-width:1024px) and (max-width:1239px){
  .cf-pied__haut{flex-direction:column; gap:40px}
}
.cf-pied__badge{display:inline-block; vertical-align:middle; font-family:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size:11px; font-weight:500; line-height:1; letter-spacing:.06em; text-transform:uppercase; padding:5px 9px; border-radius:999px; white-space:nowrap}
.cf-pied__badge{background:rgba(17,17,16,.07); color:#6b747c}
.cf-pied__infotitre{margin:34px 0 12px; max-width:560px; font-size:15px; line-height:22px; color:#6B747C}
.cf-pied__infotitre strong{font-weight:500; color:#0A0A0A}
.cf-pied__infotitre + .cf-pied__infolettre{margin-top:0}
.cf-pied{padding:72px 16px 32px}
.cf-pied__carte{max-width:1300px; border:0}
@media (min-width:640px){
  .cf-pied{padding-inline:24px}
}
@media (min-width:768px){
  .cf-pied{padding-top:96px; padding-inline:40px}
}
@media (min-width:1024px){
  .cf-pied{padding-top:120px; padding-inline:64px}
}
@media (min-width:1280px){
  .cf-pied{padding-inline:96px}
}
.cf-pied{position:relative; z-index:1; font-family:Geist, system-ui, sans-serif}
.cf-pied ul{list-style:none; margin:0; padding:0}
.cf-pied__cols li{padding-bottom:3px}
.cf-pied__titre{margin-bottom:3px}
/* ── PIED DE SITE:fin ── */

/* ── sur une fenêtre moyenne ── */
@media (max-width:1320px){
  .s-sec{padding-left:72px; padding-right:72px}
  .s-hero__titre{font-size:60px; line-height:66px}
  .s-pile{--w:350px}
  .s-hero .s-ronds{--w:350px}
}

/* ── sur téléphone : une colonne ── */
html.mobile .s-sec{padding:64px 24px}
html.mobile .s-hero{display:block; min-height:0; padding-top:110px; padding-bottom:40px}
html.mobile .s-hero__titre{font-size:44px; line-height:48px}
html.mobile .s-hero__titre span{white-space:normal}
html.mobile .s-hero__sous{margin-top:18px; font-size:17px; line-height:26px}
html.mobile .s-champ{max-width:none; margin-top:26px; padding-left:20px}
html.mobile .s-champ .bouton{position:relative; left:auto; top:auto; display:inline-flex; margin:0; height:42px; padding:3px 3px 3px 16px; font-size:13px}
html.mobile .s-hero__visuel{margin-top:34px}
html.mobile .s-pile, html.mobile .s-scene .s-pile{--w:300px}
html.mobile .s-ronds, html.mobile .s-scene .s-ronds{--w:300px}
html.mobile .s-etapes, html.mobile .s-temoins, html.mobile .s-faq{display:block}
html.mobile .s-etape{padding:14px 18px; gap:16px}
html.mobile .s-etape.on{padding:20px 18px}
html.mobile .s-etape img{height:40px}
html.mobile .s-etape__textes{padding-top:4px}
html.mobile .s-etape h3{font-size:22px; line-height:28px}
html.mobile .s-etape__plus p{font-size:15px; line-height:23px}
html.mobile .s-panneau{height:440px; margin-top:28px; border-radius:28px}
html.mobile .s-mur{grid-template-columns:repeat(4, 80px); grid-auto-rows:88px}
html.mobile .s-mur img{width:calc(72px / var(--r, .81))}
html.mobile .s-mur i{width:24px; height:24px; right:-3px; bottom:2px}
html.mobile .s-vedette blockquote{font-size:28px; line-height:35px}
html.mobile .s-temoins__cartes{grid-template-columns:1fr; margin-top:36px; gap:14px}
html.mobile .s-temoin{min-height:0}
html.mobile .s-faq__titre{margin:0 0 20px; font-size:40px; line-height:46px}
html.mobile .s-q{padding:18px 0; font-size:18px; line-height:25px}
html.mobile .s-r p{font-size:15px; line-height:23px}
html.mobile li.ouvert .s-r p{padding-bottom:18px; margin-top:-8px}

/* ── sans mouvement ── */
@media (prefers-reduced-motion: reduce){
  .s-vient{opacity:1; transform:none; transition:none}
  .s-pile img, .s-mur img, .s-mur i, .s-etape, .s-etape__plus, .s-r, .s-scene__pile .s-ronds{transition:none !important}
}