/* Automation Labs — « le flux » : un canevas d'automatisation qui s'exécute
   beige et orange de Claude (à la demande), encre chaude, vert d'exécution réservé aux nœuds réussis */
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
:root{
  /* clair : les beiges de Claude */
  --fond:#F4F3EE;
  --clair-2:#FAF9F5;
  --papier:#EFEDE5;
  --encre:#1F1E1D;
  --gris:#6B6A64;
  --fil:rgba(31,30,29,.12);
  /* sombre : les gris chauds de Claude (citation, canevas, pied) */
  --nuit:#1F1E1D;
  --nuit-2:#262624;
  --nuit-3:#30302E;
  --clair:#F4F3EE;
  --gris-c:#A3A199;
  --fil-c:rgba(244,243,238,.12);
  --voile:244,243,238;
  /* l'orange de Claude */
  --signal:#D97757;
  --signal-fonce:#C15F3C;
  --signal-2:#E8957A;
  --ok:#2FBF8C;
  --titre:"Bricolage Grotesque",system-ui,sans-serif;
  --texte:"Geist",system-ui,-apple-system,sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --gout:clamp(16px,4.4vw,56px);
  --entete:64px;
  --ease:cubic-bezier(.2,.7,.1,1);
  --ease-2:cubic-bezier(.65,0,.35,1);
  color-scheme:light;
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--entete) + 12px)}
html,body{overflow-x:clip}
body{margin:0;background:var(--fond);color:var(--encre);font:400 16px/1.6 var(--texte);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p{margin:0}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
figure{margin:0}
svg{width:1em;height:1em;flex:none}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
::selection{background:var(--signal);color:#fff}

.cadre{width:100%;max-width:1320px;margin:0 auto;padding:0 var(--gout)}
/* « nuit » garde son nom mais devient le beige de Claude : on remappe les jetons */
.nuit{position:relative;isolation:isolate;background:var(--fond);color:var(--encre);
  --clair:#1F1E1D;--gris-c:#6B6A64;--fil-c:rgba(31,30,29,.12);--voile:31,30,29;--nuit-2:#FAF9F5;--nuit-3:#FFFFFF}
.sombre,.canevas{--nuit:#1F1E1D;--nuit-2:#262624;--nuit-3:#30302E;--clair:#F4F3EE;--gris-c:#A3A199;--fil-c:rgba(244,243,238,.12);--voile:244,243,238}
.sombre{position:relative;isolation:isolate;background:var(--nuit);color:var(--clair)}
.canevas{color:var(--clair)}
.clair{background:var(--clair-2);color:var(--encre)}
.papier{background:var(--papier);color:var(--encre)}
.grille-fond{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(var(--voile),.13) 1px,transparent 1.2px);background-size:24px 24px;
  -webkit-mask:radial-gradient(ellipse 80% 70% at 60% 40%,#000 30%,transparent 80%);mask:radial-gradient(ellipse 80% 70% at 60% 40%,#000 30%,transparent 80%)}

.bandeau-maquette{position:relative;z-index:60;background:#1F1E1D;color:#A3A199;font:400 11px/1.45 var(--texte);text-align:center;padding:7px var(--gout)}

/* ---------- boutons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:50px;padding:0 22px;border-radius:999px;font:500 15px/1 var(--texte);white-space:nowrap;overflow:hidden;isolation:isolate;transition:transform .4s var(--ease),background-color .3s,color .3s,border-color .3s}
.btn svg{width:18px;height:18px;transition:transform .45s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:scale(.97)}
.btn-signal{background:var(--signal);color:#fff;font-weight:600}
.btn-signal:hover{background:var(--signal-fonce)}
.btn-signal::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.35),transparent 60%);opacity:0;transition:opacity .3s}
.btn-signal:hover::after{opacity:1}
.btn-ligne{border:1px solid rgba(var(--voile),.28);color:var(--clair)}
.btn-ligne:hover{border-color:var(--clair);background:rgba(var(--voile),.06)}
.btn-petit{min-height:40px;padding:0 16px;font-size:14px}
.btn-grand{min-height:60px;padding:0 30px;font-size:16px}
.lien{display:inline-flex;align-items:center;gap:.4em;font:500 15px/1 var(--texte);padding:6px 0;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .5s var(--ease),color .3s}
.lien:hover{background-size:0 1px;background-position:100% 100%;color:var(--signal)}
.lien svg{width:16px;height:16px}

/* ---------- en-tête ---------- */
.entete{position:fixed;left:0;right:0;top:0;z-index:50;height:var(--entete);transition:background-color .4s,box-shadow .4s,transform .5s var(--ease)}
.entete-in{height:100%;max-width:1320px;margin:0 auto;padding:0 var(--gout);display:flex;align-items:center;gap:20px}
.marque{font:italic 500 21px/1 "Source Serif 4",Georgia,serif;letter-spacing:-.01em;white-space:nowrap;margin-right:auto}
.marque span{color:inherit}
.marque em{color:var(--signal)}
.entete-baseline{display:none;font:400 12px/1 var(--mono);color:var(--gris);letter-spacing:.02em}
.nav{display:none}
.entete.plein{background:rgba(244,243,238,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--fil)}
.entete.cache{transform:translateY(-100%)}

/* ---------- étiquettes ---------- */
.etiquette{display:inline-flex;align-items:center;gap:10px;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--signal-fonce);margin-bottom:20px}
.etiquette::before{content:"";width:18px;height:1px;background:currentColor}
.titre{font:600 clamp(38px,7.4vw,84px)/1 var(--titre);font-variation-settings:"wdth" 88;letter-spacing:-.022em;text-wrap:balance}
.titre em{font-style:normal;color:var(--signal)}
.clair .titre em,.papier .titre em{color:var(--signal)}
.tete{margin-bottom:clamp(40px,6vw,72px)}
.tete-ligne{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 48px}
.tete-texte{max-width:34em;margin-top:22px;color:var(--gris-c);font-size:17px}
.tete-cote{max-width:30em;display:grid;gap:16px;color:var(--gris);font-size:16px;justify-items:start}

.hero-etiquette{color:var(--encre)}
.hero-etiquette::before{background:var(--signal)}
.hero-etiquette span{color:var(--signal-fonce)}

/* révélations (posées seulement quand le JS tourne) */
.js [data-rv]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.js [data-rv].vu{opacity:1;transform:none}

/* ---------- HERO ---------- */
.hero{padding:calc(var(--entete) + 40px) 0 clamp(64px,8vw,110px);overflow:hidden}
.hero-in{display:grid;gap:48px;align-items:center}
.hero-titre{font:700 clamp(42px,10.4vw,100px)/.94 var(--titre);font-variation-settings:"wdth" 84;letter-spacing:-.03em}
.hero-titre .mot{display:block}
.marqueur{position:relative;color:var(--signal);white-space:nowrap}
.marqueur::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.09em;background:var(--signal);border-radius:9px;transform-origin:left;transform:scaleX(var(--trait,1));transition:transform 1s var(--ease) 1.4s}
.hero-chiffres{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:12px 28px;margin-top:32px;padding-top:22px;border-top:1px solid var(--fil-c)}
.hero-chiffres li{display:grid;gap:4px}
.hero-chiffres b{font:600 clamp(24px,3.6vw,34px)/1 var(--titre);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.hero-chiffres span:not([data-compte]){font-size:12.5px;line-height:1.3;color:var(--gris-c);max-width:11em}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

[data-intro]{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.hero-titre [data-intro]{transform:translateY(40%);filter:blur(6px);transition:opacity .9s var(--ease),transform 1s var(--ease),filter .9s var(--ease)}
.pret [data-intro]{opacity:1;transform:none;filter:none}
.pret [data-intro="1"]{transition-delay:.1s}.pret [data-intro="2"]{transition-delay:.2s}.pret [data-intro="3"]{transition-delay:.3s}.pret [data-intro="4"]{transition-delay:.4s}.pret [data-intro="5"]{transition-delay:.5s}.pret [data-intro="6"]{transition-delay:.75s}.pret [data-intro="7"]{transition-delay:.9s}
body:not(.pret) .marqueur{--trait:0}

/* canevas */
.canevas{position:relative;background:linear-gradient(180deg,var(--nuit-2),var(--nuit));border:1px solid var(--fil-c);border-radius:18px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(31,30,29,.55),0 0 0 1px rgba(255,255,255,.02) inset;opacity:0;transform:translateY(30px) scale(.98);transition:opacity 1s var(--ease) .5s,transform 1.2s var(--ease) .5s}
.pret .canevas{opacity:1;transform:none}
.canevas-barre{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--fil-c);font:400 12px/1 var(--mono);color:var(--gris-c)}
.feux{display:flex;gap:6px}
.feux i{width:9px;height:9px;border-radius:50%;background:var(--nuit-3)}
.canevas-nom{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.canevas-etat{display:inline-flex;align-items:center;gap:7px;padding:5px 9px;border-radius:99px;background:rgba(217,119,87,.16);color:var(--signal-2);transition:background .4s,color .4s}
.canevas-etat i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:clignote 1s infinite}
.canevas-etat b{font-weight:500}
.canevas-etat.fini{background:rgba(47,191,140,.12);color:var(--ok)}
.canevas-etat.fini i{animation:none}
@keyframes clignote{50%{opacity:.25}}
.canevas-zone{position:relative;display:grid;gap:26px;padding:28px 20px 28px;
  background-image:radial-gradient(rgba(var(--voile),.09) 1px,transparent 1.2px);background-size:18px 18px}
.fils{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.fils path{fill:none;stroke:rgba(var(--voile),.18);stroke-width:1.5}
.fils path.actif{stroke:url(#degrade-fil)}
.fils circle{fill:var(--signal);filter:drop-shadow(0 0 6px var(--signal))}
.noeud{position:relative;z-index:1;display:flex;align-items:center;gap:12px;width:min(100%,260px);padding:11px 14px 11px 11px;background:var(--nuit-3);border:1px solid rgba(var(--voile),.1);border-radius:12px;transition:border-color .4s,box-shadow .4s,transform .4s var(--ease)}
.noeud:nth-child(odd){justify-self:end}
.noeud-ic{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;background:rgba(var(--voile),.06);color:var(--clair);transition:background .4s,color .4s}
.noeud-ic svg{width:20px;height:20px}
.declencheur .noeud-ic{color:#3BD16F}
.noeud-txt{display:grid;gap:3px;min-width:0}
.noeud-txt b{font:600 14px/1.1 var(--texte)}
.noeud-txt small{font:400 11.5px/1.2 var(--mono);color:var(--gris-c);white-space:nowrap}
.noeud-ok{position:absolute;right:-8px;top:-8px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--ok);color:var(--nuit);transform:scale(0);transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.noeud-ok svg{width:13px;height:13px}
.eclair{position:absolute;left:-10px;top:50%;margin-top:-10px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--signal);color:#fff}
.eclair svg{width:11px;height:11px}
.noeud.court{border-color:rgba(217,119,87,.8);box-shadow:0 0 0 4px rgba(217,119,87,.16),0 10px 30px -10px rgba(217,119,87,.55);transform:translateY(-2px)}
.noeud.court .noeud-ic{background:var(--signal);color:#fff}
.noeud.fait .noeud-ok{transform:scale(1)}
.noeud.fait{border-color:rgba(47,191,140,.45)}
.journal{border-top:1px solid var(--fil-c);padding:12px 16px;height:118px;overflow:hidden;font:400 11.5px/1.7 var(--mono);color:var(--gris-c);display:flex;flex-direction:column;justify-content:flex-end}
.journal li{display:flex;gap:10px;animation:ligne .4s var(--ease)}
.journal li b{font-weight:400;color:var(--ok)}
.journal li em{font-style:normal;color:var(--clair)}
@keyframes ligne{from{opacity:0;transform:translateY(8px)}}

/* ---------- PREUVE ---------- */
.preuve{padding:clamp(80px,11vw,140px) 0}
.preuve-tete{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 48px;margin-bottom:clamp(36px,5vw,56px)}
.preuve-cote{display:grid;gap:14px;justify-items:start;color:var(--gris-c);max-width:22em}
.piste-cadre{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 var(--gout) 8px;scroll-padding:0 var(--gout)}
.piste-cadre::-webkit-scrollbar{display:none}
.piste{display:flex;gap:14px;width:max-content}
.demo{width:min(62vw,250px);scroll-snap-align:start}
.demo a{display:block}
.demo-ecran{position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#262624;border:1px solid var(--fil-c);box-shadow:0 24px 40px -28px rgba(31,30,29,.5)}
.demo-ecran img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s}
.demo-ecran::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(31,30,29,.9) 0%,rgba(31,30,29,.1) 45%,transparent 70%)}
.demo-n{position:absolute;left:12px;top:12px;z-index:1;color:#fff;font:500 11px/1 var(--mono);padding:6px 8px;border-radius:6px;background:rgba(31,30,29,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.demo-lecture{position:absolute;left:50%;top:44%;z-index:1;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.3);transition:transform .5s var(--ease),background .3s}
.demo-lecture svg{width:22px;height:22px;margin-left:2px}
.demo-legende{position:absolute;left:14px;right:14px;bottom:14px;z-index:1;display:grid;gap:4px;color:#fff}
.demo-legende b{font:600 17px/1.15 var(--titre);letter-spacing:-.01em}
.demo-legende small{font:400 11px/1 var(--mono);color:rgba(255,255,255,.7)}
.demo a:hover .demo-ecran img{transform:scale(1.06)}
.demo a:hover .demo-lecture{transform:scale(1.12);background:var(--signal);border-color:var(--signal)}
.piste-jauge{height:2px;background:var(--fil-c);border-radius:2px;margin-top:28px;position:relative;overflow:hidden}
.piste-jauge span{position:absolute;inset:0;background:var(--signal);transform-origin:left;transform:scaleX(.1)}

/* ---------- CITATION ---------- */
.citation{padding:clamp(90px,14vw,180px) 0;border-top:1px solid var(--fil-c);border-bottom:1px solid var(--fil-c)}
.citation-texte{max-width:1320px;margin:0 auto;padding:0 var(--gout);font:600 clamp(38px,8.2vw,118px)/1 var(--titre);font-variation-settings:"wdth" 86;letter-spacing:-.03em;text-wrap:balance}
.citation-texte span{opacity:var(--o,1);transition:opacity .25s linear}
.js .citation-texte span{--o:.16}
.citation-texte .barre{position:relative}
.citation-texte .barre::after{content:"";position:absolute;left:-2%;right:-2%;top:54%;height:.07em;background:var(--signal);transform:scaleX(var(--b,1));transform-origin:left;transition:transform .6s var(--ease)}
.js .citation-texte .barre{--b:0}
.citation-texte .signal{color:var(--signal)}

/* ---------- À PROPOS ---------- */
.apropos{padding:clamp(80px,11vw,150px) 0;overflow-x:clip}
.apropos-grille{display:grid;gap:56px}
.pile-zone{position:relative}
.pile{position:relative;width:min(100%,380px);aspect-ratio:3/4;margin:0 auto 40px}
.photo{position:absolute;inset:0;border-radius:16px;overflow:hidden;background:var(--papier);box-shadow:0 30px 60px -30px rgba(31,30,29,.45);transition:transform .9s var(--ease),box-shadow .9s var(--ease);will-change:transform}
.photo img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.pile-btn{position:absolute;left:50%;bottom:-24px;transform:translateX(-50%);z-index:5;display:inline-flex;align-items:center;gap:12px;padding:10px 16px 10px 14px;border-radius:99px;background:var(--encre);color:#F4F3EE;font:500 13px/1 var(--texte);white-space:nowrap;transition:background .3s}
.pile-btn:hover{background:var(--signal-fonce)}
.pile-segs{display:flex;gap:4px}
.pile-segs i{width:14px;height:3px;border-radius:3px;background:rgba(244,243,238,.25);transition:background .4s,width .4s var(--ease)}
.pile-segs i.on{background:var(--signal);width:22px}
.pile-n{font:500 12px/1 var(--mono);color:rgba(244,243,238,.6)}
.pile-n b{font-weight:500;color:#F4F3EE}
/* défilement bloqué : toute la section (bureau) ou la pile seule (mobile) */
.mode-section .apropos-collant{position:sticky;top:var(--collant-top,80px)}
.mode-pile .pile{position:sticky;top:var(--pile-top,90px);margin-bottom:0}
.mode-pile .pile-zone{margin-bottom:40px}
.prose{display:grid;gap:18px;margin-top:28px;color:#3B4354;font-size:17px;line-height:1.7;max-width:36em}
.prose strong{color:var(--encre);font-weight:600;background:linear-gradient(transparent 62%,rgba(217,119,87,.28) 62%)}
.mission{margin-top:28px;font:600 clamp(22px,2.6vw,28px)/1.2 var(--titre);letter-spacing:-.02em;max-width:22em}
.stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:36px;border-top:1px solid var(--fil)}
.stats div{display:flex;flex-direction:column-reverse;gap:6px;padding:20px 12px 0 0}
.stats div+div{padding-left:16px;border-left:1px solid var(--fil)}
.stats dt{font:400 12px/1.3 var(--mono);color:var(--gris)}
.stats dd{font:600 clamp(30px,4.4vw,48px)/1 var(--titre);letter-spacing:-.03em}

/* ---------- MÉTHODE ---------- */
.methode{padding:clamp(80px,11vw,150px) 0;overflow:hidden}
/* le flux : un seul fil relie les 4 étapes jusqu'au créneau, une donnée le parcourt au défilement */
.flux{position:relative}
.flux-fil{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.flux-fil .base{fill:none;stroke:rgba(31,30,29,.2);stroke-width:2;stroke-linecap:round;stroke-dasharray:1 7}
.flux-fil .plein{fill:none;stroke:url(#degrade-flux);stroke-width:2.5;stroke-linecap:round}
.flux-fil .sillage{fill:var(--signal)}
.flux-fil .tete{fill:var(--signal);filter:drop-shadow(0 0 6px rgba(217,119,87,.9))}
.flux-fil .halo{fill:none;stroke:var(--signal);stroke-width:1.5;opacity:.5;transform-box:fill-box;transform-origin:center;animation:halo 1.4s var(--ease) infinite}
@keyframes halo{from{transform:scale(.6);opacity:.7}to{transform:scale(2.2);opacity:0}}
.flux-fil .arrivee{fill:#fff;stroke:var(--signal);stroke-width:2}
.etapes{position:relative;z-index:1;display:grid;gap:22px;padding-left:56px}
.etape{position:relative;transition:margin .6s var(--ease)}
.etape:nth-of-type(even){margin-left:18px}
.etape-noeud::after{content:"";position:absolute;inset:-5px;border-radius:15px;border:1.5px solid transparent;border-top-color:var(--signal);border-right-color:var(--signal);opacity:0;transition:opacity .3s}
.etape.cours .etape-noeud{border-color:var(--signal);color:var(--signal-fonce);background:#fff;box-shadow:0 0 0 6px rgba(217,119,87,.12)}
.etape.cours .etape-noeud::after{opacity:1;animation:tourne .9s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
.etat{position:absolute;top:-11px;right:14px;display:inline-flex;align-items:center;gap:7px;padding:5px 10px 5px 8px;border-radius:99px;background:#EFEDE5;border:1px solid rgba(31,30,29,.08);color:var(--gris);font:500 11px/1 var(--mono);letter-spacing:.02em;text-transform:none;white-space:nowrap;transition:background .4s,color .4s}
.etat i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.5;flex:none}
.etape.cours .etat{background:#FBE7DF;border-color:rgba(217,119,87,.35);color:var(--signal-fonce)}
.etape.cours .etat i{width:9px;height:9px;background:none;border:1.5px solid currentColor;border-right-color:transparent;opacity:1;animation:tourne .8s linear infinite}
.etape.fait .etat{background:#DDF3EA;border-color:rgba(47,191,140,.35);color:#1C8A62}
.etape.fait .etat i{opacity:1}
.etape.cours .etape-carte{border-color:rgba(217,119,87,.45);transform:translateX(4px)}
.creneau-ic{position:relative}
.creneau-ok{position:absolute;right:-7px;top:-7px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--ok);color:#fff;box-shadow:0 0 0 3px var(--signal);transform:scale(0);transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.creneau-ok svg{width:13px;height:13px}
.creneau.recu .creneau-ok{transform:scale(1)}
.creneau.recu{animation:recu .9s var(--ease)}
@keyframes recu{0%{box-shadow:0 0 0 0 rgba(217,119,87,.55)}100%{box-shadow:0 0 0 22px rgba(217,119,87,0)}}
.etape-noeud{position:absolute;left:-56px;top:18px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--nuit-3);border:1px solid rgba(var(--voile),.14);font:500 12px/1 var(--mono);color:var(--gris-c);transition:background .5s,border-color .5s,color .5s,box-shadow .5s}
.etape-noeud svg{display:none;width:18px;height:18px}
.etape.fait .etape-noeud{background:var(--ok);border-color:var(--ok);color:#fff;box-shadow:0 0 0 6px rgba(47,191,140,.14)}
.etape.fait .etape-noeud b{display:none}
.etape.fait .etape-noeud svg{display:block}
.etape-carte{position:relative;padding:24px 22px 26px;background:var(--clair-2);border:1px solid var(--fil-c);border-radius:16px;transition:border-color .5s,transform .6s var(--ease)}
.etape.fait .etape-carte{border-color:rgba(47,191,140,.4)}
.etape-tag{display:flex;align-items:center;gap:10px;font:500 12px/1 var(--mono);color:var(--signal-fonce);text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px}
.etape-tag span{white-space:nowrap;color:var(--gris-c);padding:5px 8px;border-radius:6px;background:rgba(var(--voile),.06)}
.etape h3{font:600 clamp(22px,2.8vw,32px)/1.08 var(--titre);letter-spacing:-.025em;text-wrap:balance;margin-bottom:12px}
.etape-carte>p:last-child{color:var(--gris-c);font-size:15.5px;max-width:34em}
.creneau{margin-top:clamp(48px,7vw,80px);display:grid;gap:20px;align-items:center;padding:26px 24px;border-radius:20px;background:var(--signal);color:#fff;position:relative;overflow:hidden}
.creneau::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.22) 1px,transparent 1.2px);background-size:18px 18px;-webkit-mask:linear-gradient(90deg,transparent,#000);mask:linear-gradient(90deg,transparent,#000);pointer-events:none}
.creneau-ic{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.18)}
.creneau-ic svg{width:28px;height:28px}
.creneau .etiquette{color:#fff;margin-bottom:10px}
.creneau-titre{font:600 clamp(24px,3vw,34px)/1.05 var(--titre);letter-spacing:-.025em}
.creneau-texte>p:last-child{opacity:.85;margin-top:6px}
.creneau .btn{background:#1F1E1D;color:#fff;justify-self:start;position:relative}

/* ---------- SERVICES ---------- */
.services{padding:clamp(80px,11vw,150px) 0}
.services-liste{display:grid;border-top:1px solid var(--fil)}
.service{display:grid;gap:18px;padding:32px 0;border-bottom:1px solid var(--fil)}
.service-n{font:500 13px/1 var(--mono);color:var(--signal-fonce)}
.service h3{font:600 clamp(28px,4vw,48px)/1.02 var(--titre);font-variation-settings:"wdth" 90;letter-spacing:-.022em;margin-bottom:12px}
.service-corps p{color:var(--gris);font-size:17px;max-width:28em}
.service-video{position:relative;display:block;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--encre)}
.service-video img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.service-video:hover img{transform:scale(1.05)}
.service-lecture{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;padding:9px 14px 9px 10px;border-radius:99px;background:rgba(31,30,29,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font:500 13px/1 var(--texte);transition:background .3s}
.service-lecture svg{width:16px;height:16px}
.service-video:hover .service-lecture{background:var(--signal)}

/* ---------- CONFIANCE ---------- */
.confiance{padding:clamp(80px,11vw,150px) 0}
.posts{columns:1;column-gap:16px}
.post{break-inside:avoid;margin-bottom:16px;background:#fff;border:1px solid var(--fil);border-radius:16px;overflow:hidden;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.post:hover{transform:translateY(-4px);box-shadow:0 24px 50px -28px rgba(19,27,46,.4)}
.post a{display:block}
.post-tete{display:flex;align-items:center;gap:10px;padding:16px 18px 0}
.post-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:50% 20%}
.post-tete b{display:block;font:600 14px/1.2 var(--texte)}
.post-tete small{font:400 11.5px/1 var(--mono);color:var(--gris)}
.post-li{margin-left:auto;width:22px;height:22px;border-radius:5px;background:#0A66C2;color:#fff;display:grid;place-items:center;font:700 12px/1 var(--texte)}
.post-texte{padding:14px 18px 16px;font-size:15px;line-height:1.55;color:#2C3445;display:grid;gap:8px}
.post-texte p:first-child{font-weight:600;color:var(--encre)}
.post img.post-img{width:100%}
.post-lire{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;font:500 13px/1 var(--texte);border-top:1px solid var(--fil);color:var(--gris);transition:color .3s}
.post a:hover .post-lire{color:var(--signal)}
.post-lire svg{width:16px;height:16px}

/* ---------- FAQ ---------- */
.faq{padding:clamp(80px,11vw,150px) 0}
.faq-grille{display:grid;gap:8px}
.questions{border-top:1px solid var(--fil)}
.q{border-bottom:1px solid var(--fil)}
.q summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;cursor:pointer;font:600 clamp(19px,2.2vw,24px)/1.2 var(--titre);letter-spacing:-.015em;transition:color .3s}
.q summary::-webkit-details-marker{display:none}
.q summary:hover{color:var(--signal)}
.q summary i{position:relative;flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--fil);transition:background .3s,border-color .3s,transform .5s var(--ease)}
.q summary i::before,.q summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;margin:-.75px 0 0 -6px;background:currentColor;transition:transform .5s var(--ease)}
.q summary i::after{transform:rotate(90deg)}
.q[open] summary i{background:var(--signal);border-color:var(--signal);color:#fff;transform:rotate(180deg)}
.q[open] summary i::after{transform:rotate(0)}
.r{overflow:hidden}
.r p{padding:0 0 24px;color:#3B4354;font-size:16.5px;line-height:1.7;max-width:40em}
.r strong{color:var(--encre)}

/* ---------- CONTACT ---------- */
.contact{padding:clamp(90px,13vw,170px) 0 clamp(64px,8vw,96px);overflow:hidden}
.contact-titre{font:700 clamp(44px,10vw,136px)/.94 var(--titre);font-variation-settings:"wdth" 84;letter-spacing:-.032em;text-wrap:balance}
.contact-titre em{font-style:normal;color:var(--signal)}
.contact-texte{margin-top:26px;color:var(--gris-c);font-size:18px;max-width:30em}
.contact-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.coordonnees{display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(56px,8vw,96px);border-top:1px solid var(--fil-c)}
.coordonnees div{padding:20px 12px 20px 0;border-bottom:1px solid var(--fil-c);display:grid;gap:6px;min-width:0}
.coordonnees dt{font:400 11.5px/1.3 var(--mono);color:var(--gris-c);text-transform:uppercase;letter-spacing:.05em}
.coordonnees dd{font:500 16px/1.3 var(--texte);overflow-wrap:anywhere}
.coordonnees a:hover{color:var(--signal)}

.pied{background:var(--nuit);color:var(--gris-c);padding:28px 0 calc(28px + env(safe-area-inset-bottom));font-size:14px}
.pied-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px}
.pied .marque{color:var(--clair);margin-right:0}
.pied nav{display:flex;gap:22px}
.pied nav a:hover{color:var(--signal)}

/* =================== tablette =================== */
@media (min-width:720px){
  :root{--entete:72px}
  .entete-baseline{display:block}
  .canevas-zone{gap:30px;padding:34px 30px}
  .posts{columns:2}
  .coordonnees{grid-template-columns:repeat(4,1fr)}
  .coordonnees div+div{padding-left:16px;border-left:1px solid var(--fil-c)}
  .service{grid-template-columns:60px 1fr 1fr;align-items:center;gap:32px}
  .creneau{grid-template-columns:auto 1fr auto;padding:30px 32px;gap:28px}
  .creneau .btn{justify-self:end}
  .etapes{padding-left:76px}
  .etape-noeud{left:-76px;width:48px;height:48px;top:20px}
  .etape:nth-of-type(even){margin-left:40px}
}

/* =================== bureau =================== */
@media (min-width:1080px){
  .nav{display:flex;gap:26px;font:500 14px/1 var(--texte);color:var(--gris);margin-right:8px}
  .nav a{transition:color .3s}
  .nav a:hover,.nav a.actif{color:var(--encre)}
  .entete-baseline{order:-0}
  .hero{padding-top:calc(var(--entete) + 72px);min-height:min(100svh,920px);display:flex;align-items:center}
  .hero-in{grid-template-columns:1.05fr .95fr;gap:64px}
  .hero-titre{font-size:clamp(56px,6vw,90px)}
  .canevas-zone{grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:30px 26px;padding:40px 30px}
  .noeud{width:100%}
  .noeud:nth-child(odd){justify-self:stretch}
  .noeud[data-n="0"]{grid-column:1;grid-row:1}
  .noeud[data-n="1"]{grid-column:2;grid-row:2}
  .noeud[data-n="2"]{grid-column:1;grid-row:3}
  .noeud[data-n="3"]{grid-column:2;grid-row:4}
  .noeud[data-n="4"]{grid-column:1;grid-row:5}

  /* la piste défile à l'horizontale pendant qu'on descend */
  .preuve{padding:0;height:var(--h-preuve,300vh)}
  .preuve-collant{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding-top:var(--entete);overflow:hidden}
  .piste-cadre{overflow:visible;padding:0;scroll-snap-type:none}
  .piste{padding:0 max(var(--gout),calc((100vw - 1320px)/2 + var(--gout)));will-change:transform}
  .demo{width:clamp(220px,17vw,270px)}
  .preuve.statique{height:auto;padding:140px 0}
  .preuve.statique .preuve-collant{position:static;height:auto}
  .preuve.statique .piste-cadre{overflow-x:auto}

  .apropos-grille{grid-template-columns:.85fr 1.15fr;gap:96px;align-items:center}
  .pile{margin:0}
  .mode-pile .pile-zone{margin-bottom:0}

  .etapes{grid-template-columns:1fr;max-width:980px;margin-left:auto}
  .etape:nth-of-type(even){margin-left:72px}
  .creneau{max-width:980px;margin-left:auto}
  .methode .tete{max-width:640px}
  .etape-carte{display:grid;grid-template-columns:1fr 1.2fr;gap:4px 40px;align-items:start;padding:32px 34px}
  .etape-tag{grid-column:1/-1}
  .etat{position:static;margin-left:auto}
  .etape h3{margin:0}

  .posts{columns:3}
  .faq-grille{grid-template-columns:.8fr 1.2fr;gap:80px;align-items:start}
  .faq-tete{position:sticky;top:calc(var(--entete) + 40px)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .js [data-rv],[data-intro],.hero-titre [data-intro],.canevas{opacity:1;transform:none;filter:none}
  .js .citation-texte span{--o:1}.js .citation-texte .barre{--b:1}
  .marqueur{--trait:1!important}
}