/* ===========================================================================
   GABARIT PAGE OBJECTIF — feuille commune aux pages de objectifs/ (S65)
   Étalon : objectifs/automatiser-devis-relances-rapports.html · doctrine hub-web §5 octies
   Externalisée pour la même raison que _footer.js : une source unique, et plus
   aucune réinjection de règles page par page (qui cassait les media queries).
   =========================================================================== */
/* EN BREF — bandeau (style exact parcours) [V valeurs] — aligné sur le conteneur hero (1560px) */
.brief > .wrap{max-width:1560px}
.brief{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.brief__row{display:grid;grid-template-columns:repeat(5,1fr);gap:28px;padding:34px 0;align-items:start}
.brief__k{font-family:'Space Mono',monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);display:block;margin-bottom:7px}
.brief__v{font-size:13.5px;line-height:1.55;color:var(--ink)}
.skills{background:#0b0b0b;color:var(--paper);padding:118px 0 130px}
.skills .eyebrow{color:#8f9089}
.skills .eyebrow{display:block;text-align:center;color:#8f9089;margin-bottom:16px}
.skills__h2{text-align:center;font-size:clamp(30px,3.6vw,50px);font-weight:600;letter-spacing:-.025em;line-height:1.06}
.skills__lead{max-width:none;text-align:center;margin:70px auto 90px;font-size:17px;line-height:1.55;color:#f0f0ec}
.skills__grid{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;max-width:900px;margin:0 auto}
.scard{border-top:1px solid rgba(244,243,238,.22);padding:40px 0 60px}
.scard__n{font-family:'Space Mono',monospace;font-size:12px;color:#8f9089;display:block;margin-bottom:16px}
.scard h3{font-size:clamp(17px,1.8vw,22px);font-weight:500;line-height:1.2;letter-spacing:-.015em;margin-bottom:22px}
.scard p{font-size:15.5px;line-height:1.55;color:#a9aaa2;max-width:44ch}
/* ── MÉTHODE — aplat Klein [C combo kit · V texte] ── */
.meth{background:#DEEBF3;color:#002FA7;padding:140px 0}
.meth .eyebrow{color:rgba(0,47,167,.66)}
.meth .eyebrow::before,.meth .eyebrow::after{color:rgba(0,47,167,.66)}
.meth__h2{font-size:clamp(30px,3.6vw,50px);font-weight:600;letter-spacing:-.028em;line-height:1.04;max-width:18ch}
.meth__h2 i{font-family:'Instrument Serif',serif;font-weight:400}
.meth__h2 .mono{font-family:'Inter',sans-serif;font-weight:400;font-size:.74em;letter-spacing:-.02em;display:inline-block;margin-top:.18em;opacity:.72}
.meth__lead{font-size:16px;line-height:1.75;max-width:82ch;margin-top:30px;color:rgba(0,47,167,.85)}
.meth__steps{display:grid;grid-template-columns:repeat(5,1fr);gap:26px;margin-top:74px}
/* jalons roadmap (gabarit v3) */
.mstep{position:relative}
.mstep::before{content:"";display:block;height:150px;margin-bottom:18px;border-left:1px solid rgba(0,47,167,.18);border-right:1px solid rgba(0,47,167,.18)}
.mstep::after{content:"";position:absolute;left:0;right:0;top:calc((1 - var(--y,.1))*150px - 5px);height:5px;background:rgba(0,47,167,.32)}
.mstep:nth-child(1){--y:.10}
.mstep:nth-child(2){--y:.30}
.mstep:nth-child(3){--y:.52}
.mstep:nth-child(4){--y:.74}
.mstep:nth-child(5){--y:.96}
.mstep:nth-child(5)::after{background:#002FA7}
.mstep__n{font-family:'Space Mono',monospace;font-size:12px;display:block;margin-bottom:10px}
.mstep__t{font-size:15.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.meth__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:75px;margin-top:84px}
.meth__punch{margin-top:80px;font-family:'Instrument Serif',serif;font-size:clamp(22px,2.6vw,36px);line-height:1.3}
@media(max-width:640px){
  .brief__row{grid-template-columns:1fr}
  .skills__grid{grid-template-columns:1fr}
  .meth__steps{grid-template-columns:1fr}
}
.meth__steps .mstep:nth-child(1){transition-delay:0s}
.meth__steps .mstep:nth-child(2){transition-delay:.14s}
.meth__steps .mstep:nth-child(3){transition-delay:.28s}
.meth__steps .mstep:nth-child(4){transition-delay:.42s}
.meth__steps .mstep:nth-child(5){transition-delay:.56s}
/* logos défilants (bande .conf de l'accueil, sans titre) [C] */
.logos{padding:78px 0 78px}
.conf__band{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.conf__track{display:flex;align-items:center;gap:84px;width:max-content;animation:confTick 480s linear infinite}
.conf__track img{height:36px;width:auto;filter:grayscale(1);opacity:.88}
@keyframes confTick{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .conf__track{animation:none}
}
p,.fitem__d,.acc__pin li,.rev__q,.brief__v,.take__list p,.mcol li{text-wrap:pretty}
/* ===== BLOCS AJOUTÉS (nouveau gabarit : promesse|observation, éval, associées, FAQ, punch) ===== */
.po{padding:110px 0;border-top:1px solid var(--line)}
.assoc{padding:100px 0}
.faq__pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.faq__pill{border:1px solid #dcdbd5;background:transparent;border-radius:10px;padding:13px 20px;font-family:'Space Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#b6b6ae;cursor:pointer;transition:background .25s ease,color .25s ease,border-color .25s ease;white-space:nowrap}
.faq__pill:hover{color:var(--ink);border-color:#c9c8c0}
.faq__pill.is-active{background:#f0efe9;color:var(--ink);border-color:transparent}
.faq__panel{display:none}
.faq__panel.is-active{display:block}
.skills .scard.rv{transition:none}
.team__ph--vide{background:#0d0d0c}
.team__card--vide{cursor:default}
.team__card--vide .team__lk{opacity:.55}
.gpop{position:fixed;right:28px;bottom:28px;z-index:60;width:min(336px,calc(100vw - 40px));
  /* verre blanc : flou franc + teinte papier à 84 %, assez pour lire du texte sombre
     tout en laissant deviner l'image derrière. Saturation poussée pour éviter le gris. */
  -webkit-backdrop-filter:blur(48px) saturate(180%);
  backdrop-filter:blur(48px) saturate(180%);
  background:rgba(250,249,246,.76);
  border:1px solid rgba(13,13,12,.08);border-radius:20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 26px 64px rgba(13,13,12,.16),0 3px 10px rgba(13,13,12,.05);
  padding:42px 30px 34px;transform-origin:88% 100%;
  animation:gpopIn .52s cubic-bezier(.19,1,.22,1) both}
.gpop[hidden]{display:none}
.gpop.is-out{animation:gpopOut .34s cubic-bezier(.5,0,.75,0) both;pointer-events:none}
@keyframes gpopIn{0%{opacity:0;transform:translateY(16px) scale(.982)}100%{opacity:1;transform:none}}
@keyframes gpopOut{0%{opacity:1;transform:none}100%{opacity:0;transform:translateY(10px) scale(.978)}}
/* le contenu s'ecrit apres le cadre, bloc par bloc, net depuis un flou */
.gpop__k,.gpop__t,.gpop__p,.gpop__l a,.gpop__all{animation:gpopUp .46s cubic-bezier(.19,1,.22,1) both}
.gpop__k{animation-delay:.14s}
.gpop__t{animation-delay:.21s}
.gpop__p{animation-delay:.30s}
.gpop__l a:nth-child(1){animation-delay:.40s}
.gpop__l a:nth-child(2){animation-delay:.47s}
.gpop__all{animation-delay:.56s}
@keyframes gpopUp{0%{opacity:0;transform:translateY(8px);filter:blur(4px)}100%{opacity:1;transform:none;filter:blur(0)}}
.gpop__scan{position:absolute;left:0;right:0;height:1px;background:var(--ink);opacity:0;box-shadow:0 0 12px 1px rgba(13,13,12,.16);animation:gpopScan .62s cubic-bezier(.19,1,.22,1) both;pointer-events:none}
@keyframes gpopScan{0%{top:0;opacity:0}8%{opacity:.34}92%{opacity:.34}100%{top:100%;opacity:0}}
.gpop__x{position:fixed;z-index:61;width:30px;height:30px;border-radius:50%;
  background:var(--paper);border:1px solid var(--line);box-shadow:0 2px 6px rgba(13,13,12,.12);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;color:var(--mut);padding:0;
  transition:color .3s,border-color .3s,transform .3s cubic-bezier(.22,1.4,.36,1);animation:gpopXin .42s .66s both}
.gpop__x[hidden]{display:none}
.gpop__x:hover{color:var(--ink);border-color:var(--ink);transform:scale(1.08)}
@keyframes gpopXin{0%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:scale(1)}}
.gpop__k{font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);display:block}
.gpop__t{font-weight:600;font-size:21px;line-height:1.24;letter-spacing:-.02em;margin-top:16px}
.gpop__p{margin-top:18px;font-size:13.8px;line-height:1.66;color:var(--mut)}
.gpop__p b{color:var(--ink);font-weight:500}
.gpop__l{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.gpop__l a,.gpop__l span{font-size:13px;line-height:1.5;padding:8px 0;text-decoration:none;color:var(--mut);
  border-bottom:1px solid rgba(13,13,12,.06);transition:color .25s,padding-left .25s}
.gpop__l a:hover{color:var(--ink);padding-left:5px}
.gpop__l a{display:flex;gap:14px;align-items:baseline;border-bottom:0;padding:9px 0}
.gpop__l a+a{border-top:1px solid rgba(13,13,12,.07)}
.gpop__l a i{font-style:normal;font-family:'Space Mono',monospace;font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:#b3b1a8;min-width:44px;flex:0 0 44px}
.gpop__l a b{font-weight:400}
.gpop__all{display:block;width:100%;box-sizing:border-box;text-align:center;text-decoration:none;background:var(--ink);color:var(--paper);font-family:'Space Mono',monospace;font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;padding:13px 20px;margin-top:24px;transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .2s;border-radius:100px}
.gpop__all:hover{opacity:.88;transform:translateY(-1px)}
.gpop__pill{position:fixed;right:28px;bottom:28px;z-index:60;width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 6px 20px rgba(13,13,12,.14),0 2px 6px rgba(13,13,12,.06);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(0);pointer-events:none}
.gpop__pill svg{width:17px;height:17px;fill:var(--ink);transition:transform .4s cubic-bezier(.22,1.4,.36,1)}
.gpop__pill:hover{background:#faf9f6}
.gpop__pill:hover svg{transform:rotate(90deg) scale(1.15)}
.gpop__pill.on{animation:gpopChip .5s cubic-bezier(.22,1.4,.36,1) forwards;pointer-events:auto}
@keyframes gpopChip{0%{opacity:0;transform:scale(0) rotate(-90deg)}60%{opacity:1;transform:scale(1.15) rotate(8deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@media(max-width:620px){
  .gpop{right:12px;left:12px;bottom:12px;width:auto;padding:26px 22px}
}
@media(prefers-reduced-motion:reduce){
  .gpop,.gpop.is-out,.gpop__pill.on,.gpop__x,
  .gpop__k,.gpop__t,.gpop__p,.gpop__l a,.gpop__all{animation:none;opacity:1;transform:none;filter:none}
  .gpop__scan{display:none}
}
/* ── OBJECTIF — sections propres au gabarit « page objectif » (page témoin S65) ──
   Reprend les tokens et les composants exacts du gabarit formation (.hero, .eyebrow,
   .btn, .lnk, .assoc, .take, .kpi, .faq, .final, .giant). Seules .osec* sont neuves :
   il n'existait pas encore de liste éditoriale simple hors accordéon/livrables. */
.osec{padding:100px 0;border-top:1px solid var(--line)}
/* ── LAYOUT — rythme éditorial (S66) ──────────────────────────────────────
   Symptômes → .skills/.scard (fond noir, repris tel quel de management-equipe-
   autonomie.html). Parcours → .proc (repris de page-management-rh.html, accent
   klein au lieu de var(--accent) qui n'existe pas ici ; pas de reveal-au-scroll
   sur .proc__step pour rester cohérent avec le dégraissage des animations S55 —
   le kit gère ça par défaut via une IntersectionObserver qu'on ne réplique pas
   ici, donc les pas restent visibles d'emblée). KPI → modificateur .dark calqué
   sur la palette déjà utilisée par .fmt55/.skills (mêmes gris/blancs). ── */
.proc{padding:100px 0;border-top:1px solid var(--line)}
/* ── ILS TÉMOIGNENT — section .vid portée de l'accueil (Yoni S65) ──
   Correctif : au 1er portage, les règles internes aux @media avaient été
   recopiées HORS de leur media query — la version mobile (1 colonne) écrasait
   donc le desktop en permanence. Media queries reconstituées ici. */
:root{--serif:'Instrument Serif',Georgia,serif;--mono:'Space Mono','SF Mono',Menlo,monospace;}
/* ---------- VIDÉOS CLIENTS — réels qui défilent (S36) ---------- */
  .vid{padding-top:96px;padding-bottom:56px}
.vid__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:90px;align-items:end;margin-bottom:60px}
.vid__head .lead{max-width:44ch;justify-self:end}
.vid__rail{overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.vid__belt{display:flex;align-items:stretch;gap:22px;width:max-content;will-change:transform;cursor:grab}
.vid__belt.dragging{cursor:grabbing}
.vid__nav{display:flex;justify-content:flex-end;gap:12px;margin-top:30px;padding-right:calc(var(--pad) - 34px)}
.vid__btn{width:40px;height:40px;border-radius:50%;border:1px solid #c9c8c0;cursor:pointer;background:transparent;color:var(--ink);
    display:flex;align-items:center;justify-content:center;transition:border-color .2s}
.vid__btn:hover{border-color:var(--ink)}
.vid__btn svg{width:16px;height:16px}
.vid__card{position:relative;width:300px;height:520px;overflow:hidden;background:#111;flex-shrink:0;
    cursor:none}
.vid__card video{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .5s ease}
.vid__card:hover video,.vid__card.sound video{filter:none}
.vid__card::after{content:'';position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to top,rgba(0,0,0,.55) 0%,transparent 34%)}
.vid__who{position:absolute;left:16px;bottom:14px;z-index:2;color:#fff;pointer-events:none;max-width:calc(100% - 92px)}
.vid__who b{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em}
.vid__who span{font-size:11.5px;color:rgba(255,255,255,.75)}
.vid__mute{position:absolute;left:0;top:0;z-index:3;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;
    text-transform:uppercase;color:#fff;white-space:nowrap;
    background:rgba(0,0,0,.45);border-radius:999px;padding:6px 10px;pointer-events:none;will-change:transform}
.vid__quote{width:420px;height:520px;flex-shrink:0;background:#fff;border:1px solid var(--line);padding:40px 36px 16px;
    display:flex;flex-direction:column;justify-content:space-between}
.vid__q{font-family:var(--serif);font-size:clamp(18px,1.6vw,22px);line-height:1.45;color:var(--ink);text-wrap:pretty}
.vid__sig b{display:block;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.vid__sig span{font-family:var(--mono);font-size:10px;color:var(--mut)}
@media(max-width:900px){
  .vid__head{grid-template-columns:1fr;gap:20px}
  .vid__head .lead{justify-self:start}
  .vid__card{width:240px;height:420px}
  .vid__quote{width:320px;height:420px;padding:28px 24px}
}
/* les 3 règles globales de l'accueil dont la section .vid dépend, scopées pour ne
   rien changer autour : sans elles la section ne ressemblait pas à l'originale (S65) */
.vid .lead{font-size:15px;line-height:1.68;color:var(--mut);text-wrap:pretty}
.vid .h2{font-family:'Inter',sans-serif;font-weight:600;font-size:clamp(28px,3.2vw,44px);line-height:1.12;letter-spacing:-.021em}
.vid .eyebrow{font-family:'Space Mono','SF Mono',Menlo,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-bottom:30px}
.vid .h2 i{font-style:normal;color:var(--mut)}
/* ── TROIS TRAJECTOIRES — décalque réf. « Projects » (Yoni S65) ──
   Six traits relevés sur la référence : cartes GRANDES · écart faible (elles se frôlent) ·
   tailles INÉGALES · le rail déborde du cadre · escalier marqué · titre de section discret.
   Écart assumé : angles droits (la réf. arrondit) — DA ILEV, S63. */
.assoc{background:#0b0b0b;color:#fff;padding:88px 0 104px;overflow:hidden}
.trj__head{display:flex;justify-content:space-between;align-items:baseline;gap:40px;margin-bottom:46px}
.trj__h2{font-size:19px;font-weight:500;letter-spacing:-.01em;color:#fff}
.trj__more{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.06em;color:#727272}
.trj__rail{display:flex;align-items:flex-start;gap:18px}
.trj__card{text-decoration:none;color:#fff;display:block;flex:0 0 auto;
  transition:opacity .45s ease,filter .45s ease,transform .5s cubic-bezier(.22,1,.36,1);will-change:filter,opacity}
/* au repos : petit, moyen, grand de gauche à droite (arbitrage Yoni S65) */
.trj__card:nth-child(1){width:282px;margin-top:104px}
.trj__card:nth-child(2){width:378px;margin-top:52px}
.trj__card:nth-child(3){width:494px;margin-top:0}
.trj__media{overflow:hidden;aspect-ratio:3/4;background:#161616}
.trj__media img{width:100%;height:100%;object-fit:cover}
.trj__cap{padding-top:16px}
.trj__cap h3{font-size:17px;font-weight:600;letter-spacing:-.012em;line-height:1.25;color:#fff}
.trj__mini{display:block;font-size:13px;line-height:1.5;color:#6f6f68;margin-top:6px;transition:color .4s}
.trj__rail:hover .trj__card{opacity:.34;filter:blur(2.5px) brightness(.62)}
.trj__rail:hover .trj__card:hover{opacity:1;filter:none;transform:translateY(-8px)}
.trj__card:hover .trj__mini{color:#9a9a94}
@media(max-width:900px){
  .assoc{padding:56px 0 64px}
  .trj__card{margin-top:0;width:76vw}
  .trj__rail:hover .trj__card,
  .trj__rail:hover .trj__card:hover{opacity:1;filter:none;transform:none}
}
.faq__pill{border:1px solid #dcdbd5;background:transparent;border-radius:10px;padding:13px 20px;font-family:'Space Mono',monospace;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#b6b6ae;cursor:pointer;transition:background .25s ease,color .25s ease,border-color .25s ease;white-space:nowrap}
.faq__pill:hover{color:var(--ink);border-color:#c9c8c0}
.faq__pill.is-active{background:#f0efe9;color:var(--ink);border-color:transparent}
.faq__panel{display:none}
.faq__panel.is-active{display:block}
/* LECTURE ASSOCIÉE — bandeau fin, calqué sur « En bref » (Yoni S65) */
.lect{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lect__row{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:44px;padding:24px 0;align-items:baseline}
.lect__k{font-family:'Space Mono',monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint)}
.lect__v{font-size:13.5px;line-height:1.65;color:var(--mut)}
.lect__v i{font-family:'Instrument Serif',Georgia,serif;font-style:italic;color:var(--ink)}
.lect__lk{margin-left:6px;white-space:nowrap}
@media(max-width:760px){
  .lect__row{grid-template-columns:1fr;gap:12px}
}
/* ── CE QUI DOIT CHANGER — décalque kit Sanity S46 (Yoni S65) ──
   Écarts assumés : angles droits (la réf. arrondit, la DA ILEV non — S63) et
   Space Mono à la place d'IBM Plex Mono. */
.s46{background:#0b0b0b;color:#fff;padding:72px 0 96px}
.s46__grid{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:1.3fr 1fr;gap:64px;align-items:stretch}
.s46__eyebrow{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#87877e;margin-bottom:18px;display:block}
.s46__h2{font-size:clamp(28px,3.2vw,42px);font-weight:500;letter-spacing:-.018em;line-height:1.1;margin-bottom:38px}
.s46__row--full{grid-template-columns:1fr}
.s46__row--full h3{font-size:18px;font-weight:500;line-height:1.4;letter-spacing:-.008em}
.s46__row{border-top:1px solid #292927;padding:22px 0;display:grid;grid-template-columns:230px 1fr;gap:24px}
.s46__row:last-child{border-bottom:1px solid #292927}
.s46__row h3{font-size:21px;font-weight:500;letter-spacing:-.01em}
.s46__row p{font-size:14.5px;line-height:1.55;color:#c9c9c2}
.s46__side{position:relative;height:100%;min-height:100%}
/* la trame déborde la colonne : elle commence plus haut et finit plus bas (Yoni S65) */
.s46__dots{position:absolute;left:0;right:0;top:-64px;bottom:-84px;z-index:0;background-image:radial-gradient(#5b5b56 1px,transparent 1.4px);background-size:14px 14px}
.s46__card{position:relative;z-index:1;background:#0b0b0b;padding:54px 0 58px 84px;display:flex;flex-direction:column;justify-content:center;will-change:transform}
.s46__note{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(23px,2.3vw,32px);line-height:1.28;color:#fff;max-width:24ch;margin:0}
/* soulignement fin et décalé — pas le trait épais par défaut de <u> */
.s46__note u{text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:rgba(255,255,255,.5)}
@media(max-width:900px){
  .s46{padding:56px 0}
  .s46__grid{grid-template-columns:1fr;gap:36px}
  .s46__row{grid-template-columns:1fr;gap:8px}
  .s46__side{min-height:0}
  .s46__card{padding-left:0}
}
/* ── RÉSULTATS ATTENDUS — deux rails en boucle (Yoni S65) ──
   Boucle sans couture : chaque rail contient ses 5 cartes EN DOUBLE et se décale de
   la moitié de sa largeur, comme la bande de logos. Le drag décale la même valeur. */
.res{padding:104px 0 112px;border-top:1px solid var(--line)}
.res__h2{font-size:clamp(30px,3.6vw,50px);font-weight:600;letter-spacing:-.025em;line-height:1.08;margin-top:4px}
.res__lead{font-size:15px;line-height:1.7;color:var(--mut);margin-top:16px;max-width:52ch}
.res__rails{margin-top:52px;display:flex;flex-direction:column;gap:16px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.res__rail{overflow:hidden;cursor:grab}
.res__rail.dragging{cursor:grabbing}
.res__belt{display:flex;gap:16px;width:max-content;will-change:transform}
.res__card{display:inline-flex;align-items:baseline;gap:14px;white-space:nowrap;
  border:1px solid var(--line);background:var(--paper);padding:19px 26px;
  font-size:15px;letter-spacing:-.006em;color:var(--ink);transition:border-color .3s,background .3s}
.res__card i{font-style:normal;font-family:'Space Mono',monospace;font-size:11px;color:var(--faint)}
.res__rail:hover .res__card{border-color:#d9d8d1}
@media(max-width:760px){
  .res__card{font-size:14px;padding:16px 20px}
}
/* ── Le panneau s'adapte au fond qu'il survole (S65) ─────────────────────
   Il est en position fixe et traverse des sections claires ET noires. Aucun
   réglage de teinte ne peut être lisible sur les deux : sur fond noir, un verre
   blanc translucide vire au gris et le texte sombre disparaît.
   Il bascule donc en verre sombre + texte clair au-dessus des sections noires. */
.gpop{transition:background .45s ease,border-color .45s ease,box-shadow .45s ease,color .45s ease}
.gpop.on-dark{background:rgba(14,14,13,.58);border-color:rgba(255,255,255,.20);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 26px 64px rgba(0,0,0,.45),0 3px 10px rgba(0,0,0,.22)}
.gpop.on-dark .gpop__k{color:rgba(255,255,255,.58)}
.gpop.on-dark .gpop__t{color:#fff}
.gpop.on-dark .gpop__p{color:rgba(255,255,255,.86)}
.gpop.on-dark .gpop__all{background:#fff;color:#0d0d0c}
.gpop__k,.gpop__t,.gpop__p,.gpop__all{transition:color .45s ease,background .45s ease}

/* page chapeau : 7 portes en rail débordant, escalier répété (S65) */
.trj__bleed{padding-left:calc(max(0px,(100% - var(--wrap))/2) + var(--pad));overflow-x:auto;scrollbar-width:none}
.trj__bleed::-webkit-scrollbar{display:none}
.trj__rail--long{width:max-content}
.trj__rail--long .trj__card{width:300px}
.trj__rail--long .trj__card:nth-child(3n+1){margin-top:104px}
.trj__rail--long .trj__card:nth-child(3n+2){margin-top:52px}
.trj__rail--long .trj__card:nth-child(3n+3){margin-top:0}

/* ── TROIS NIVEAUX — trois colonnes nues (S65) ──
   Plus de cadre : un filet fin en tête de colonne suffit à séparer. Le numéro
   descend en 10px gris clair — il indique l'ordre, il ne le proclame pas. */
.lvl{padding:96px 0 108px;background:#fff}
.lvl__h2{font-size:clamp(30px,3.6vw,50px);font-weight:600;letter-spacing:-.025em;line-height:1.08;margin-top:4px}
.lvl__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px;margin-top:64px}
.lvl__item{border-top:1px solid var(--line);padding-top:22px}
.lvl__n{display:block;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.1em;
  color:var(--faint);margin-bottom:18px}
.lvl__item h3{font-size:18px;font-weight:600;letter-spacing:-.014em;line-height:1.3}
.lvl__item p{font-size:14px;line-height:1.7;color:var(--mut);margin-top:10px}
@media(max-width:900px){.lvl{padding:60px 0 68px}.lvl__row{grid-template-columns:1fr;gap:34px;margin-top:38px}}

/* ── LE CONCRET — flux de tags statique (S66, remplace les rails mobiles) ── */
.tags{padding:104px 0 112px;border-top:1px solid var(--line)}
.tags__h2{font-size:clamp(30px,3.6vw,50px);font-weight:600;letter-spacing:-.025em;line-height:1.08;margin-top:4px}
.tags__lead{font-size:15px;line-height:1.7;color:var(--mut);margin-top:16px;max-width:52ch}
.tags__flow{display:flex;flex-wrap:wrap;gap:10px;margin-top:44px}
.tag{background:#efeeea;color:var(--ink);padding:12px 22px;font-size:clamp(19px,2.5vw,34px);font-weight:400;letter-spacing:-.022em;line-height:1.16;transition:background .3s}
.tag:hover{background:#e4e3de}
@media(max-width:760px){.tags__flow{gap:8px}.tag{padding:10px 16px}}