/*
Theme Name: Websilon
Description: Conseil et expertise en SEO, GEO, stratégie IA et stratégie digitale. Une page en frise horizontale.
Version: 2.0
Author: Baptiste Oddos
*/

@font-face{font-family:"Anybody";src:url(assets/fonts/anybody.woff2?v=2) format("woff2");font-weight:100 900;font-stretch:50% 150%;font-display:swap}
@font-face{font-family:"Hanken";src:url(assets/fonts/hanken.woff2?v=2) format("woff2");font-weight:100 900;font-display:swap}

:root{--u:min(1vw,1.78vh);--encre:#05080f;--nuit:#0a1422;--acier:#16324a;--petrole:#0e5a7c;--cyan:#35c6f0;--glace:#cfe9f4;--platine:#e8edf1;--blanc:#f6f9fb}
@supports (height:1svh){:root{--u:min(1vw,1.78svh)}}
*{box-sizing:border-box;margin:0;padding:0}
.mob{display:none}
.h{scrollbar-width:none}.h::-webkit-scrollbar{display:none}
html{background:var(--encre);-webkit-text-size-adjust:100%}
body{font-family:"Hanken",Arial,sans-serif;color:var(--blanc);background:var(--encre);font-size:17px;line-height:1.5;overflow-x:hidden}
a{color:inherit}
img{display:block;width:100%;height:100%;object-fit:cover}
h1,h2,h3{font:inherit}

/* Sans JavaScript ou sans animation : une page verticale complète */
.s{padding:12vh 6vw;position:relative}
.p{margin-bottom:28px;max-width:720px}
.clone,.deco,.fond,.intro,.regle,.tete,[data-clone]{display:none}
.h [data-clone]{display:block}
.clip{max-height:70vh}.h .clip{max-height:none}
.titre{font-family:"Anybody",Arial,sans-serif;font-weight:280;font-stretch:118%;line-height:1;letter-spacing:-.015em;font-size:clamp(40px,8vw,120px)}
.titre b{font-weight:760}
.txt{max-width:30em}
.clip{overflow:hidden;border-radius:4px}
.suite{display:inline-block;margin-top:20px;font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}
.s--clair{background:var(--platine);color:var(--encre)}
.panneau{background:var(--nuit);color:var(--blanc);border-radius:4px;padding:24px;margin-bottom:10px;position:relative;overflow:hidden}
.panneau h3{font-weight:600;font-size:18px}
.panneau__geant{display:none}
.geant,.tambour{display:none}

/* Frise horizontale */
.h body{overscroll-behavior:none}
/* Scène FIXÉE à l'écran (04/11/2026) : en sticky, Chrome sous Linux la décalait d'un cran au premier défilement et
   après un retour arrière. La longueur de défilement vient de body.style.height (frise.js, mesurer). */
.h .scene{position:fixed;top:0;left:0;width:100%;height:100vh;height:100svh;overflow:hidden;background:var(--encre)}
.h .fond{display:block;position:absolute;z-index:5;inset:0;width:100%;height:100%;pointer-events:none}
.h .piste{position:relative;display:flex;height:100%;width:max-content;will-change:transform}
.h .s{flex:none;height:100%;width:var(--sw);padding:0;background:linear-gradient(170deg,var(--a),var(--b));color:var(--ink)}
.h .p{position:absolute;left:var(--l);top:var(--t);width:var(--w);height:var(--h);margin:0;max-width:none}
.h .titre{font-size:calc(var(--fs,6)*var(--u));white-space:nowrap;width:max-content;height:auto}
.h .clone{display:block;position:absolute;left:0;top:0;width:max-content;color:#fff;font-family:"Anybody",Arial,sans-serif;font-weight:280;font-stretch:118%;line-height:1;letter-spacing:-.015em;font-size:calc(var(--fs,6)*var(--u));white-space:nowrap;pointer-events:none;will-change:transform}
.clone b{font-weight:760}
.h .clip img{will-change:transform;transform:scale(1.18)}
.h .deco{display:block}
.h .txt{height:auto;font-size:clamp(15px,calc(1.2*var(--u)),26px);line-height:1.45}

/* En-tête et règle : lisibles sur tous les fonds */
.h .tete{display:flex;position:fixed;z-index:30;left:0;right:0;top:0;padding:clamp(14px,1.7vw,24px) clamp(18px,3vw,44px);justify-content:space-between;align-items:center;color:var(--chrome,#fff);transition:color .35s;pointer-events:none}
.h .tete a{pointer-events:auto;text-decoration:none}
.marque{display:flex;align-items:center;gap:.5em;font-size:clamp(19px,calc(1.6*var(--u)),30px);letter-spacing:-.02em;line-height:1}
.marque svg{width:1.8em;height:auto;fill:currentColor}
.marque b{font-weight:800}.marque i{font-style:normal;font-weight:250}
.tete__droite{display:flex;gap:2.2em;font-size:clamp(13px,calc(.95*var(--u)),19px);align-items:center}

.h .regle{display:block;position:fixed;z-index:30;left:clamp(18px,3vw,44px);right:clamp(18px,3vw,44px);bottom:clamp(6px,1.2vh,14px);color:var(--chrome,#fff);transition:color .35s}
.traits{display:flex;justify-content:space-between;align-items:flex-end;height:20px;pointer-events:none}
.traits i{display:block;width:1px;height:5px;background:currentColor;opacity:.55;transform-origin:50% 100%;will-change:transform}
.curseur{position:absolute;top:0;left:0;height:2px;width:44px;background:currentColor;will-change:transform}
.etapes{position:relative;height:28px;margin-top:3px;list-style:none;font-size:clamp(11px,calc(.82*var(--u)),16px)}
.etapes li{position:absolute;top:0;white-space:nowrap}
.etapes a{text-decoration:none;opacity:.55;transition:opacity .25s;padding:6px 0;display:block}
.etapes a.on,.etapes a:hover{opacity:1;font-weight:650}

/* Ouverture : la règle se dessine, descend à sa place de menu, et le noir s'ouvre en bandes */
.h .intro{display:block;position:fixed;z-index:40;inset:0;overflow:hidden;pointer-events:none;animation:intro-fin .01s 1.95s forwards}
.intro i{position:absolute;left:0;width:calc(100% + 14vw);height:16.8%;background:linear-gradient(var(--encre),var(--encre)) no-repeat 0 0/calc(100% - 13vw) 100%;animation:intro-bande .78s cubic-bezier(.76,0,.2,1) forwards}
.intro i::after{content:"";position:absolute;right:0;top:0;bottom:0;width:14vw;border-radius:0 9vh 9vh 0;background:var(--cap)}
.intro i:nth-child(1){top:0;--cap:#35c6f0;animation-delay:.92s}
.intro i:nth-child(2){top:16.66%;--cap:#0e5a7c;animation-delay:1.14s}
.intro i:nth-child(3){top:33.32%;--cap:#8fdcf6;animation-delay:1.03s}
.intro i:nth-child(4){top:49.98%;--cap:#16324a;animation-delay:.97s}
.intro i:nth-child(5){top:66.64%;--cap:#35c6f0;animation-delay:1.19s}
.intro i:nth-child(6){top:83.3%;--cap:#e8edf1;animation-delay:1.08s}
.intro__regle{--pas:calc(100% / 149);--fin-b:calc(clamp(6px,1.2vh,14px) + 31px);position:absolute;left:18%;right:18%;bottom:50%;height:20px;color:#fff;
  background:linear-gradient(90deg,currentColor 1px,transparent 1px) 0 100%/var(--pas) 16px repeat-x;
  clip-path:inset(0 100% 0 0);
  animation:intro-dessin .82s cubic-bezier(.6,0,.2,1) .06s forwards,intro-place .72s cubic-bezier(.76,0,.2,1) .92s forwards,intro-fondu .22s linear 1.68s forwards}
.intro__regle span{position:absolute;top:0;left:0;height:2px;width:44px;background:var(--cyan);animation:intro-curseur .82s cubic-bezier(.6,0,.2,1) .06s forwards,intro-curseur-fin .72s cubic-bezier(.76,0,.2,1) .92s forwards}
@keyframes intro-bande{to{transform:translateX(-101%)}}
@keyframes intro-dessin{to{clip-path:inset(-6px 0 0 0)}}
@keyframes intro-curseur{to{left:calc(100% - 44px)}}
@keyframes intro-curseur-fin{to{left:0;background:#fff}}
@keyframes intro-place{to{left:clamp(18px,3vw,44px);right:clamp(18px,3vw,44px);bottom:var(--fin-b);background-size:var(--pas) 5px}}
@keyframes intro-fondu{to{opacity:0}}
@keyframes intro-fin{to{visibility:hidden}}
@media (max-width:820px){.intro__regle{--pas:calc(100% / 53);left:16%;right:16%}}
@media (max-height:500px) and (min-width:560px){.intro__regle{--fin-b:22px}}

/* Panneaux qui s'ouvrent */
.h .panneaux{display:flex;gap:.6vw;align-items:stretch}
.h .panneau{width:12vw;flex:none;margin:0;padding:clamp(16px,1.5vw,24px);will-change:width}
.h .panneau__geant{display:block;position:absolute;left:clamp(16px,1.5vw,24px);top:17%;width:35vw;font:300 calc(3.9*var(--u))/1.04 "Anybody",Arial,sans-serif;font-stretch:118%;letter-spacing:-.01em;color:var(--cyan);will-change:opacity,transform}
.h .panneau p{position:absolute;left:clamp(16px,1.5vw,24px);bottom:clamp(16px,1.5vw,24px);width:min(34vw,620px);font-size:clamp(15px,calc(1.16*var(--u)),24px);line-height:1.42;will-change:opacity}

/* Filets du plan */
.h .filet{position:absolute;background:currentColor;opacity:.2;transform-origin:0 0}
.h .filet--h{left:0;height:1px;width:100%}
.h .filet--v{top:0;width:1px;height:100%}
.bleu{overflow:visible}
.bleu path{fill:none;stroke:var(--cyan);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke}
.bleu .plein{fill:url(#degrade);stroke:none;stroke-dasharray:none;opacity:0}
.h .geant{display:block;font:800 calc(18*var(--u))/.85 "Anybody",Arial,sans-serif;font-stretch:100%;letter-spacing:-.02em;white-space:nowrap}
.geant i{font-style:normal;font-weight:150}
.h .p.geant{width:max-content;height:auto}
.etapes-methode{list-style:none;font:280 clamp(22px,calc(2.5*var(--u)),52px)/1.22 "Anybody",Arial,sans-serif;font-stretch:112%;margin-bottom:.7em}

/* Listes */
.offres{list-style:none;font:300 clamp(24px,calc(2.7*var(--u)),56px)/1.06 "Anybody",Arial,sans-serif;font-stretch:112%}
.offres li{margin-bottom:.55em}
.offres small{display:block;font:400 clamp(15px,calc(1.08*var(--u)),23px)/1.38 "Hanken",Arial,sans-serif;margin-top:.35em;opacity:.84}
.bloc h3{font:300 clamp(30px,calc(3.4*var(--u)),70px)/1.02 "Anybody",Arial,sans-serif;font-stretch:112%;margin-bottom:.35em}
.noms{font-size:clamp(15px,calc(1.16*var(--u)),24px);line-height:1.5}
.noms strong{display:block;font-weight:650;margin-bottom:.35em}

/* Tambours : les images tournent et descendent avec le défilement */
.h .tambour{display:block;perspective:1500px;perspective-origin:50% 50%;will-change:transform}
.tambour__axe{position:absolute;inset:0;transform-style:preserve-3d}
.tambour figure{position:absolute;left:0;top:50%;width:100%;height:var(--ch,42svh);margin-top:calc(var(--ch,42svh) / -2);backface-visibility:hidden;will-change:transform,opacity;overflow:hidden;border-radius:3px}
.tambour figcaption{position:absolute;left:12px;bottom:10px;font-size:13px;font-weight:600;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.65)}

/* Bandes */
.bandes{display:none}
.h .bandes{display:block;position:absolute;inset:0}
.bande{position:absolute;left:0;width:100%;height:16.68%;display:flex;align-items:center;will-change:transform,clip-path;border-radius:9vh;overflow:hidden}
.bande span{position:absolute;left:0;display:flex;align-items:center;gap:1em;font:300 clamp(22px,4.4vh,50px)/1 "Anybody",Arial,sans-serif;font-stretch:112%;white-space:nowrap;will-change:transform}
.bande em{font:400 clamp(13px,1.8vh,18px)/1.2 "Hanken",Arial,sans-serif;font-style:normal;opacity:.85}
.pile{list-style:none}
.h .pile{display:none}

/* Fin de page */
.form{display:grid;grid-template-columns:1fr 1fr;gap:1.6vh 1.6vw;max-width:640px}
.h .p.form{height:auto;max-width:none}
.form label{display:block;font-size:13px;font-weight:600}
.form .large{grid-column:1/-1}
.form input,.form textarea{display:block;width:100%;margin-top:3px;background:none;border:0;border-bottom:1px solid currentColor;color:inherit;font:400 16px/1.35 "Hanken",Arial,sans-serif;padding:8px 0;border-radius:0;outline:none}
.form textarea{height:clamp(58px,10svh,110px);resize:none}
.form input:focus,.form textarea:focus{border-bottom-color:var(--cyan);box-shadow:0 1px 0 var(--cyan)}
.piege{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.envoi{display:flex;align-items:center;gap:1.4em;grid-column:1/-1;flex-wrap:wrap}
.btn{appearance:none;border:0;cursor:pointer;background:var(--cyan);color:var(--encre);font:650 15px/1 "Hanken",Arial,sans-serif;padding:14px 26px;border-radius:40px}
.btn:hover{background:var(--blanc)}
.btn:focus-visible,a:focus-visible,.lien:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.lien-mail{font-size:15px}
.etat{font-size:14px;font-weight:600;min-height:1.2em;grid-column:1/-1}
.legal{font-size:12px;opacity:.75;line-height:1.4}
.lien{background:none;border:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}
dialog{margin:auto;max-width:min(680px,92vw);max-height:84vh;background:var(--blanc);color:var(--encre);border:0;border-radius:4px;padding:clamp(22px,3vw,40px);font-size:15px;line-height:1.5}
dialog::backdrop{background:rgba(5,8,15,.72)}
dialog h2{font:300 26px/1.1 "Anybody",Arial,sans-serif;font-stretch:112%;margin-bottom:.7em}
dialog h3{font-weight:700;margin:1em 0 .2em}
dialog form{margin-top:1.2em}
.btn--sombre{background:var(--encre);color:var(--blanc)}

/* Téléphone à l'horizontale et fenêtres très basses */
@media (max-height:500px) and (min-width:560px){
  .h .txt{font-size:13px;line-height:1.32}
  .h .panneau{padding:10px 12px}
  .h .panneau h3{font-size:13px}
  .h .panneau p{font-size:12.5px;line-height:1.3;bottom:10px;left:12px}
  .h .panneau__geant{top:22%;left:12px}
  .offres li{margin-bottom:.32em}
  .h .offres{top:9svh;font-size:19px}
  .h .offres small{font-size:12px;margin-top:.1em}
  .etapes-methode{font-size:16px;margin-bottom:.4em}
  .bloc h3{font-size:22px}
  .noms{font-size:13px}
  .bande em{display:none}
  .bande span{font-size:17px}
  .h #form{left:62vw;top:9svh;width:36vw;gap:4px 12px}
  .form label{font-size:11px}
  .form input,.form textarea{padding:2px 0;font-size:13px;margin-top:0}
  .form textarea{height:30px}
  .btn{padding:7px 16px;font-size:13px}
  .lien-mail{font-size:12px}
  .etat{font-size:12px;min-height:0}
  .h .regle{bottom:0}
  .traits{height:12px}
  .etapes{margin-top:0;height:22px}
  .etapes a{padding:3px 0}
  .h .tete{padding:8px 16px}
  .h #contact .geant{font-size:calc(11*var(--u))}
  #websilon .suite,#retour .suite{display:none}
}

@media (max-width:820px){
  .mob{display:inline}
  .h .s{width:var(--msw)}
  .h .p{left:var(--ml);top:var(--mt);width:var(--mw);height:var(--mh)}
  .h .titre,.h .clone{font-size:var(--mfs,12vw)}
  .h .txt{font-size:clamp(15.5px,2.3vw,20px);line-height:1.4}
  .tete__droite span{display:none}
  .h .panneaux{gap:6px}
  .h .panneau__geant{font-size:7.8vw;top:15%;width:66vw}
  .h .panneau p{width:66vw}
  .h .geant{font-size:34vw}
  .saisie .h-cache,.saisie .geant,.saisie .regle{opacity:0;pointer-events:none}
  .h.saisie #form{top:7svh;transform:none!important;opacity:1!important}
  .etapes li:not(.vue){display:none}
  .etapes li{left:0!important}
  .h .offres{font-size:clamp(22px,6.4vw,30px)}
  .h .offres small{font-size:15px}
  .bloc h3{font-size:9vw}
  .h .bandes{top:7svh;bottom:9svh}
  .bande span{font-size:clamp(19px,5.4vw,26px)}
  .bande em{display:none}
  .form{grid-template-columns:1fr}
  .form textarea{height:76px}
  .form .envoi{gap:.8em}
}

@media (min-width:600px) and (max-width:820px){
  .h .titre,.h .clone{font-size:calc(var(--mfs,12vw)*.72)}
}

/* Petits téléphones et téléphones à l'horizontale : derniers ajustements */
@media (max-width:820px) and (max-height:700px){
  .h #form{top:28svh}
  .form textarea{height:58px}
}
@media (max-height:500px) and (min-width:560px){
  .h .offres{font-size:18px;top:7svh}
  .h .offres small{font-size:12px}
  .offres li{margin-bottom:.2em}
}
@media (max-width:820px) and (max-height:500px){
  .h #form{top:7svh}
  .form textarea{height:28px}
}

/* Essai des accents : actif seulement avec ?accent=a, b ou c */
.cle{font-style:normal}
[data-accent=a]{--acc:#ff5b22;--acc-clair:#c93d08;--sur-acc:#05080f}
[data-accent=b]{--acc:#ff2d78;--acc-clair:#cf1257;--sur-acc:#05080f}
[data-accent=c]{--acc:#ffb300;--acc-clair:#9a6200;--sur-acc:#05080f}
[data-accent] .s--clair{--acc:var(--acc-clair)}
[data-accent] .titre b,[data-accent] .clone b{background:linear-gradient(90deg,var(--acc) 50%,currentColor 50%) 100% 0/200% 100% no-repeat;background-position:calc(100% - var(--f,1)*100%) 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:.04em}
[data-accent] .cle{color:var(--acc);font-weight:650}
[data-accent] .btn{background:var(--acc);color:var(--sur-acc)}
[data-accent] .btn:hover{background:var(--blanc)}
[data-accent] .curseur{background:var(--acc);height:3px}
[data-accent] .etapes a.on{color:var(--acc)}
[data-accent] .tete__droite a{color:var(--acc);font-weight:650}
[data-accent] .suite{border-bottom-color:var(--acc);border-bottom-width:2px}
[data-accent] .bande:nth-child(3){background:var(--acc)!important;color:var(--sur-acc)!important}
[data-accent] .intro i:nth-child(1),[data-accent] .intro i:nth-child(5){--cap:var(--acc)}
[data-accent] .intro__regle span{background:var(--acc)}
[data-accent] .form input:focus,[data-accent] .form textarea:focus{border-bottom-color:var(--acc);box-shadow:0 1px 0 var(--acc)}

/* Portrait de Baptiste : la photo entière, sans recadrage ni zoom */
.h .p.portrait{width:calc(50*var(--u));height:calc(37.5*var(--u))}
.h .portrait img{transform:none;will-change:auto}
@media (max-width:820px){
  .h .p.portrait{width:88vw;height:66vw}
  .h .vignette{display:none}
}

/* Sélecteur de langue */
.langues{display:flex;gap:.7em}
.h .tete .langues a{opacity:.55;padding:6px 2px}
.h .tete .langues a[aria-current],.h .tete .langues a:hover{opacity:1;font-weight:700}
@media (max-width:820px){.tete__droite{gap:1.1em}}

@media (max-width:820px) and (max-height:500px){
  .h .p.portrait{width:calc(50*var(--u));height:calc(37.5*var(--u))}
}

/* La méthode : le nuage de points */
.nuee{display:none}
.h .nuee{display:block;pointer-events:none}
.h .etapes-methode li{opacity:.38;transition:opacity .35s,color .35s}
.h .etapes-methode li.on{opacity:1;color:var(--acc,var(--cyan))}

/* Liste de compétences de la section GEO : huit lignes sur deux colonnes */
.h .offres{display:grid;grid-template-rows:repeat(4,auto);grid-auto-flow:column;grid-auto-columns:1fr;column-gap:3vw;align-content:start}
@media (max-width:820px){.h .offres{column-gap:6vw}}

/* Clients : mosaïques de photos */
.mosaique{display:none}
.h .mosaique{display:block}
.mosaique canvas{position:absolute;pointer-events:none}
.cible{display:none}
.h .cible{display:block}
.cible canvas{position:absolute;pointer-events:none}
.mosaique .leg{position:absolute;left:0;top:100%;margin-top:10px;white-space:nowrap}

/* Téléphone à l'horizontale : la liste GEO sous l'en-tête */
@media (max-height:500px) and (min-width:560px){.h .offres{top:15svh}}

/* Formulaire : grands champs, étiquettes qui montent, traits qui se dessinent, bouton en onde */
.form{--e:1;position:relative}
.h .p.form{gap:clamp(6px,1.6svh,18px) 2.4vw}
.champ{position:relative;display:block;transition:transform .55s cubic-bezier(.7,0,.2,1),opacity .4s}
.form .champ input,.form .champ textarea{margin:0;border:0;box-shadow:none!important;padding:clamp(18px,3svh,28px) 0 6px;font:300 clamp(17px,calc(1.5*var(--u)),30px)/1.2 "Anybody",Arial,sans-serif;font-stretch:108%}
.form .champ textarea{height:clamp(70px,13svh,130px);display:block}
.champ__nom{position:absolute;left:0;top:clamp(18px,3svh,28px);font:300 clamp(17px,calc(1.5*var(--u)),30px)/1.2 "Anybody",Arial,sans-serif;font-stretch:108%;opacity:.72;pointer-events:none;transform-origin:0 0;transition:transform .35s cubic-bezier(.3,0,.1,1),opacity .35s,color .35s}
.champ :focus~.champ__nom,.champ :not(:placeholder-shown)~.champ__nom{transform:translateY(calc(-1*clamp(16px,2.7svh,26px))) scale(.55);opacity:1;font-family:"Hanken",Arial,sans-serif;font-weight:600;letter-spacing:.01em}
.champ :focus~.champ__nom{color:var(--acc,var(--cyan))}
.champ i{position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.5;transform:scaleX(var(--e,1));transform-origin:0 50%}
.champ i::after{content:"";position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--acc,var(--cyan));transform:scaleX(0);transform-origin:0 50%;transition:transform .5s cubic-bezier(.3,0,.1,1)}
.champ :focus~i::after{transform:scaleX(1)}
.champ :not(:placeholder-shown):valid~i::after{transform:scaleX(1);opacity:.55}
.envoi{gap:1.2em;flex-wrap:nowrap;margin-top:clamp(2px,.8svh,8px)}
.btn.envoyer{position:relative;flex:1;min-width:0;height:clamp(50px,7.4svh,72px);padding:0;overflow:hidden;background:rgba(246,249,251,.1);color:#fff;border-radius:40px;transition:transform .3s,background .3s}
.btn.envoyer:hover{background:rgba(246,249,251,.16);transform:translateY(-2px)}
.envoyer__fond{position:absolute;inset:0;background:var(--acc,var(--cyan));transform:scaleX(var(--p,0));transform-origin:0 50%;transition:transform .7s cubic-bezier(.3,0,.1,1)}
.envoyer canvas{position:absolute;inset:0;width:100%;height:100%}
.envoyer__txt{position:relative;font:640 clamp(16px,calc(1.3*var(--u)),26px)/1 "Anybody",Arial,sans-serif;font-stretch:112%;transition:color .4s}
.envoyer.pret .envoyer__txt{color:var(--encre)}
.envoyer.pret canvas{opacity:.55}
.lien-mail{flex:none}
.h .etat{position:absolute;left:0;right:0;top:100%;margin-top:6px;min-height:0}
/* Message parti : les champs s'envolent l'un après l'autre */
.parti .champ{transform:translateY(-34px);opacity:0}
.parti .champ:nth-of-type(2){transition-delay:.06s}.parti .champ:nth-of-type(3){transition-delay:.12s}.parti .champ:nth-of-type(4){transition-delay:.18s}
.h .parti .etat{top:18%;margin:0;font:300 clamp(24px,calc(2.6*var(--u)),52px)/1.12 "Anybody",Arial,sans-serif;font-stretch:108%;color:var(--blanc)}
@media (max-width:820px){
  .form{grid-template-columns:1fr 1fr}
  .form .champ.large{grid-column:1/-1}
  .form .champ input,.form .champ textarea,.champ__nom{font-size:17px}
  .form .champ textarea{height:72px}
  .lien-mail{font-size:13px}
}
@media (max-width:820px) and (max-height:700px){.h #form{top:27svh}.form .champ textarea{height:50px}.form .champ input,.form .champ textarea{padding-top:16px}.champ__nom{top:16px}.btn.envoyer{height:44px}}
@media (max-height:500px){
  .h #form{top:8svh;left:60vw;width:38vw;gap:2px 10px}
  .form .champ input,.form .champ textarea{padding:13px 0 2px;font-size:13px}
  .champ__nom{top:13px;font-size:13px}
  .champ :focus~.champ__nom,.champ :not(:placeholder-shown)~.champ__nom{transform:translateY(-13px) scale(.75)}
  .form .champ textarea{height:32px}
  .btn.envoyer{height:32px}.envoyer__txt{font-size:13px}.lien-mail{font-size:11px}
}
@media (max-width:820px){.saisie .h-sans{display:none}}

/* Légende du portrait */
.leg-portrait{display:none}
.h .p.leg-portrait{display:block;top:calc(13svh + 37.5*var(--u) + 8px);height:auto;width:max-content;white-space:nowrap}
/* Étape en cours sous le titre de La méthode */
.etape-vive{display:none}
.h .p.etape-vive{display:block;top:calc(11svh + 6.4*var(--u));width:max-content;height:auto;will-change:transform}
.etape-vive__mot{display:block;font:300 clamp(24px,calc(3*var(--u)),60px)/1.1 "Anybody",Arial,sans-serif;font-stretch:112%;color:var(--acc,var(--cyan));white-space:nowrap;min-height:1.1em}
.etape-vive__barres{display:flex;gap:6px;margin-top:8px}
.etape-vive__barres i{display:block;width:clamp(26px,calc(3*var(--u)),60px);height:3px;background:currentColor;opacity:.22;transition:opacity .4s,background .4s}
.etape-vive__barres i.on{opacity:1;background:var(--acc,var(--cyan))}
.h #methode .titre{will-change:transform}
@media (max-width:820px){
  .h .p.leg-portrait{top:calc(13svh + 66vw + 6px)}
  .h .p.etape-vive{top:calc(12svh + 14vw)}
}
@media (min-width:600px) and (max-width:820px){
  .h .p.portrait{width:64vw;height:48vw}
  .h .p.leg-portrait{top:calc(13svh + 48vw + 6px)}
}
@media (max-width:820px) and (min-height:501px){
  .h #websilon [data-titre=o],.h #retour [data-titre=o]{top:calc(13svh + 66vw + 34px)}
}
@media (min-width:600px) and (max-width:820px) and (min-height:501px){
  .h #websilon [data-titre=o],.h #retour [data-titre=o]{top:calc(13svh + 48vw + 34px)}
}
@media (max-width:820px) and (max-height:500px){
  .h .p.leg-portrait{top:calc(13svh + 37.5*var(--u) + 4px);left:6vw}
}
@media (max-height:500px){.etape-vive__barres{margin-top:4px}.h .p.etape-vive{top:calc(11svh + 6.2*var(--u))}.etape-vive__mot{font-size:20px}}

@media (max-width:820px) and (max-height:500px){
  .h .p.portrait{width:calc(50*var(--u));height:calc(37.5*var(--u))}
}

/* Téléphone et e-mail dans le texte de contact */
.lien-direct{font-weight:650;white-space:nowrap}

/* Contact : sur petits écrans, le texte prend la place de la photo décorative */
@media (max-width:820px){
  .h #contact .clip{display:none}
  .h #contact .txt{left:6vw;width:88vw}
}
@media (max-height:500px){
  .h #contact .clip{display:none}
  .h #contact .txt{left:8vw;top:30svh;width:46vw}
}
@media (max-width:820px) and (max-height:500px){
  .h #contact .txt{left:4vw;width:54vw;font-size:12.5px}
}

/* Bouton d'envoi : largeur resserrée */
.btn.envoyer{flex:none;width:clamp(130px,calc(13*var(--u)),260px)}

/* Sans JavaScript : Braise aussi */
:root{--acc:#ff5b22}

/* Mes expertises : le fil de lumière */
.fils{display:none}
.h .fils{display:block;position:absolute;left:0;top:0;pointer-events:none;z-index:3;will-change:transform}
.h .panneau{transition:background .3s}
.h .panneau:hover{background:#0d1c2f}
.h .panneau p,.h .panneau h3,.h .panneau__geant{z-index:4}

/* Règle : traits vivants, section active en couleur, zone cliquable */
.traits{pointer-events:auto!important;cursor:pointer;height:26px}
.traits i{transition:background .35s,opacity .35s}
.traits i.act{background:var(--acc,#fff);opacity:1}
.curseur{transition:box-shadow .2s}
.etapes li{transform-origin:0 100%;will-change:transform}

/* Menu du haut : sans couleur d'accent */
[data-accent] .tete__droite a{color:inherit;font-weight:inherit}
.h .tete .langues a[aria-current]{font-weight:700}
.regle{cursor:pointer}

/* Titre d'accueil : posé en bas de la photo */
@media (min-width:821px),(max-height:500px){
  .h #websilon [data-titre=o],.h #retour [data-titre=o]{top:calc(13svh + 29.2*var(--u))}
}

/* Couches : fonds, puis formes géométriques, puis contenu */
.fonds{display:none}
.h .fonds{display:flex;position:absolute;left:0;top:0;height:100%;width:max-content;z-index:0;will-change:transform}
.fonds div{flex:none;height:100%}
.h .fond{z-index:1}
.h .piste{z-index:2}
.h .s{background:none}

/* Légende dans le portrait, en bas à gauche */
.leg-photo{display:none}
.h .leg-photo{display:block;position:absolute;left:clamp(10px,1vw,20px);bottom:clamp(8px,.9vw,16px);margin:0;color:#fff;font-weight:700;font-size:clamp(11px,calc(.85*var(--u)),17px);line-height:1.2;letter-spacing:.01em;opacity:.92;text-shadow:0 1px 6px rgba(5,8,15,.65)}
/* Sur téléphone, le titre remonte juste sous la photo */
@media (max-width:820px) and (min-height:501px){
  .h #websilon [data-titre=o],.h #retour [data-titre=o]{top:calc(13svh + 66vw + 14px)}
}
@media (min-width:600px) and (max-width:820px) and (min-height:501px){
  .h #websilon [data-titre=o],.h #retour [data-titre=o]{top:calc(13svh + 48vw + 14px)}
}
/* Soyez LA réponse : posé en bas de sa photo */
.h #geo [data-titre=i]{top:calc(80svh - 7.6*var(--u))}
@media (max-width:820px){.h #geo [data-titre=i]{top:calc(80svh - 11.5vw)}}

/* Contact : le paysage, entier et sans zoom */
.h .p.photo-contact{height:auto;aspect-ratio:16/9}
.h .photo-contact img{transform:none;will-change:auto}
@media (max-width:820px){.h #contact .photo-contact{display:block}}
@media (max-height:500px){.h #contact .photo-contact{display:none}}

/* En-tête : fond bleu uni, texte toujours blanc */
.h .tete{background:#0a2238;color:#fff}
/* Ce qui passait dessous démarre sous l'en-tête */
.h #websilon .vignette,.h #retour .vignette{top:calc(var(--haut,70px) + 1.5svh)}
.h #websilon .txt,.h #retour .txt{top:calc(var(--haut,70px) + 25svh)}
.h #contact .geant{top:calc(var(--haut,70px) + 1svh)}
.h .bandes{top:var(--haut,70px)}
@media (max-width:820px){
  .h #websilon .txt,.h #retour .txt{top:var(--mt)}
  .h #contact .geant{top:calc(var(--haut,56px) + 3svh)}
  .h .bandes{top:var(--haut,56px)}
}
@media (max-height:500px){
  .h #form{top:calc(var(--haut,40px) + 2svh)}
  .h .offres{top:calc(var(--haut,40px) + 3svh)}
  .h #websilon .txt,.h #retour .txt{top:calc(var(--haut,40px) + 24svh)}
}

/* Fenêtres très basses : tout sous l'en-tête et au-dessus de la règle */
@media (max-height:500px){
  .h .titre{margin-top:3px}
  .h .bloc{top:30svh}
}


/* Portrait : effet Ken Burns, zoom lent vers les yeux */
.h .portrait img{transform-origin:57% 13%;will-change:transform;animation:ken-burns 16s ease-in-out infinite alternate}
@keyframes ken-burns{from{transform:scale(1)}to{transform:scale(1.42)}}

/* Accueil sans petite photo : le texte remonte à la hauteur du portrait */
.h #websilon .txt,.h #retour .txt{top:13svh}
@media (max-width:820px) and (min-height:501px){
  .h #websilon .txt,.h #retour .txt{top:calc(13svh + 78vw + 32px)}
}
@media (min-width:600px) and (max-width:820px) and (min-height:501px){
  .h #websilon .txt,.h #retour .txt{top:calc(13svh + 56vw + 32px)}
}

/* Picto du portfolio dans l'en-tête */
.ouvrir-portfolio,.fermer-portfolio{appearance:none;background:none;border:0;color:inherit;cursor:pointer;padding:6px;line-height:0;pointer-events:auto}
.ouvrir-portfolio svg{width:20px;height:20px;fill:currentColor;transition:transform .45s cubic-bezier(.3,0,.1,1)}
.ouvrir-portfolio rect{transition:fill .3s}
.ouvrir-portfolio:hover svg{transform:rotate(90deg) scale(1.12)}
.ouvrir-portfolio:hover rect:nth-child(2),.ouvrir-portfolio:hover rect:nth-child(3){fill:var(--acc,#fff)}
.fermer-portfolio svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .4s}
.fermer-portfolio:hover svg{transform:rotate(90deg);stroke:var(--acc,#fff)}
@media (max-width:420px){.tete__droite{gap:.75em;font-size:12px}.marque{font-size:17px}.ouvrir-portfolio{padding:4px}.ouvrir-portfolio svg{width:18px;height:18px}}

/* Portfolio : page par-dessus */
dialog.portfolio{position:fixed;inset:0;margin:0;width:100vw;max-width:none;height:100vh;height:100dvh;max-height:none;padding:0;background:none;color:var(--blanc);border-radius:0;overflow:hidden}
dialog.portfolio::backdrop{background:none}
.portfolio>i{position:absolute;left:0;width:100%;height:16.8%;background:var(--encre);transform:scaleX(0);transform-origin:0 50%;animation:pf-bande .55s cubic-bezier(.76,0,.2,1) forwards}
.portfolio>i:nth-child(1){top:0;animation-delay:0s}.portfolio>i:nth-child(2){top:16.66%;animation-delay:.12s}.portfolio>i:nth-child(3){top:33.32%;animation-delay:.05s}.portfolio>i:nth-child(4){top:49.98%;animation-delay:.16s}.portfolio>i:nth-child(5){top:66.64%;animation-delay:.08s}.portfolio>i:nth-child(6){top:83.3%;animation-delay:.2s}
@keyframes pf-bande{to{transform:scaleX(1)}}
.portfolio__corps{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 clamp(18px,3vw,44px) clamp(32px,6vh,70px);opacity:0;animation:pf-corps .4s .45s forwards}
@keyframes pf-corps{to{opacity:1}}
.portfolio__haut{position:sticky;top:0;z-index:3;display:flex;justify-content:flex-end;padding:clamp(12px,1.7vw,22px) 0;margin-bottom:clamp(6px,2vh,24px);pointer-events:none}
.portfolio__haut button{pointer-events:auto;background:#0a2238}
.portfolio__titre{font:280 clamp(30px,calc(5*var(--u)),104px)/1.04 "Anybody",Arial,sans-serif;font-stretch:112%;letter-spacing:-.01em;margin-bottom:clamp(22px,5vh,60px);max-width:17em}
.portfolio__titre b{font-weight:760;color:var(--acc,var(--cyan))}
.portfolio__grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(230px,23vw,420px),1fr));gap:clamp(8px,.8vw,14px)}
.carte{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:4px;text-decoration:none;color:var(--blanc);background:radial-gradient(circle at var(--px) var(--py),var(--c1),var(--c2) 72%);opacity:0;transform:translateY(34px);animation:pf-carte .6s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(.55s + var(--n)*.045s)}
@keyframes pf-carte{to{opacity:1;transform:none}}
.carte img{position:absolute;inset:0;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.carte:hover img{transform:scale(1.06)}
.carte__lettre{position:absolute;right:-.04em;top:-.2em;font:800 clamp(130px,16vw,280px)/1 "Anybody",Arial,sans-serif;font-stretch:130%;color:rgba(246,249,251,.1);transition:transform .7s cubic-bezier(.2,.7,.2,1),color .4s}
.carte__balayage{position:absolute;inset:0;background:var(--acc,var(--cyan));transform:translateY(101%);transition:transform .5s cubic-bezier(.76,0,.2,1)}
.carte__nom,.carte__adresse{position:absolute;left:clamp(14px,1.3vw,22px);right:clamp(14px,1.3vw,22px);transition:color .3s,transform .5s cubic-bezier(.3,0,.1,1)}
.carte__nom{bottom:calc(clamp(12px,1.2vw,20px) + 1.5em);font:600 clamp(20px,calc(1.9*var(--u)),38px)/1.05 "Anybody",Arial,sans-serif;font-stretch:104%;transition:font-stretch .5s,color .3s}
.carte__adresse{bottom:clamp(12px,1.2vw,20px);font-size:13px;opacity:.8}
.carte:hover .carte__balayage,.carte:focus-visible .carte__balayage{transform:none}
.carte:hover .carte__nom,.carte:focus-visible .carte__nom{font-stretch:124%;color:var(--encre)}
.carte:hover .carte__adresse,.carte:focus-visible .carte__adresse{color:var(--encre);opacity:1}
.carte:hover .carte__lettre{transform:translateX(-6%) scale(1.06)}
/* Fermeture : le contenu s'efface, puis les bandes repartent */
.portfolio.ferme .portfolio__corps{animation:pf-corps-out .2s forwards}
.portfolio.ferme>i{transform:scaleX(1);transform-origin:100% 50%;animation:pf-bande-out .42s .16s cubic-bezier(.76,0,.2,1) forwards}
@keyframes pf-corps-out{from{opacity:1}to{opacity:0}}
@keyframes pf-bande-out{to{transform:scaleX(0)}}

/* Fiche d'un client, par-dessus le portfolio */
.fiche{position:absolute;inset:0;z-index:5;color:var(--blanc);overflow-y:auto;overscroll-behavior:contain;background:var(--encre)}
.fiche[hidden]{display:none}
.fiche__fond{position:absolute;inset:0;overflow:hidden;min-height:100%}
.fiche__lettre{position:absolute;right:-.03em;top:-.14em;font:800 clamp(280px,44vw,780px)/1 "Anybody",Arial,sans-serif;font-stretch:130%;color:rgba(246,249,251,.07)}
.fiche__haut{position:absolute;right:clamp(18px,3vw,44px);top:clamp(12px,1.7vw,22px);z-index:3}
.fiche__haut button{background:#0a2238}
.fiche__contenu{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:auto auto 1fr;column-gap:4vw;padding:clamp(70px,13vh,130px) clamp(18px,4vw,70px) clamp(110px,16vh,150px);min-height:100%;align-content:start}
.fiche__nom{grid-column:1;font:640 clamp(36px,calc(5.4*var(--u)),110px)/1.02 "Anybody",Arial,sans-serif;font-stretch:112%;overflow-wrap:anywhere}
.fiche__texte{grid-column:1;font-size:clamp(16px,calc(1.2*var(--u)),24px);line-height:1.45;margin-top:1em;max-width:30em}
.fiche__texte:empty{display:none}
.fiche__lien{grid-column:1;align-self:start;justify-self:start;margin-top:clamp(18px,3.5vh,40px);display:inline-flex;flex-direction:column;gap:3px;text-decoration:none;font:600 clamp(18px,calc(1.5*var(--u)),30px)/1.1 "Anybody",Arial,sans-serif;font-stretch:108%;color:var(--acc,var(--cyan));border-bottom:2px solid currentColor;padding-bottom:5px}
.fiche__lien em{font:400 13px/1.2 "Hanken",Arial,sans-serif;color:var(--blanc);opacity:.8}
.fiche__visuel{grid-column:2;grid-row:1/4;aspect-ratio:4/3;width:100%;align-self:start;border-radius:4px;background:center/cover no-repeat rgba(5,8,15,.34)}
.fiche__visuel.vide{background-image:repeating-linear-gradient(135deg,rgba(246,249,251,.05) 0 1px,transparent 1px 14px)!important}
.fiche__nav{position:absolute;z-index:3;left:clamp(18px,4vw,70px);right:clamp(18px,4vw,70px);bottom:clamp(14px,3vh,30px);display:flex;justify-content:space-between;gap:16px}
.fiche__nav button{appearance:none;background:none;border:0;color:inherit;cursor:pointer;text-align:left;padding:4px 0;font:inherit;transition:transform .35s}
.fiche__nav button:last-child{text-align:right}
.fiche__nav button:hover{transform:translateX(5px)}.fiche__nav button:first-child:hover{transform:translateX(-5px)}
.fiche__nav small{display:block;font-size:12px;opacity:.72}
.fiche__nav span{font:600 clamp(15px,calc(1.3*var(--u)),26px)/1.1 "Anybody",Arial,sans-serif;font-stretch:104%}
.fiche__volet{position:absolute;inset:0;z-index:6;background:var(--acc,var(--cyan));clip-path:inset(0 0 0 100%);pointer-events:none}
.fiche .fiche__texte,.fiche .fiche__lien,.fiche .fiche__visuel,.fiche .fiche__nav{opacity:0;transform:translateY(22px);transition:opacity .45s,transform .55s cubic-bezier(.2,.7,.2,1)}
.fiche.entre .fiche__texte,.fiche.entre .fiche__lien,.fiche.entre .fiche__visuel,.fiche.entre .fiche__nav{opacity:1;transform:none}
.fiche.entre .fiche__lien{transition-delay:.08s}.fiche.entre .fiche__visuel{transition-delay:.04s}.fiche.entre .fiche__nav{transition-delay:.14s}
@media (max-width:820px){
  .fiche__contenu{grid-template-columns:1fr;grid-template-rows:none;padding-top:66px;padding-bottom:96px}
  .fiche__visuel{grid-column:1;grid-row:auto;margin-top:22px}
  .fiche__nav{position:fixed}
}

/* Picto « ... » */
.ouvrir-portfolio svg{width:26px;height:9px}
.ouvrir-portfolio:hover svg{transform:scale(1.15)}
.ouvrir-portfolio:hover circle:nth-child(2){fill:var(--acc,#fff)}
.ouvrir-portfolio circle{transition:fill .3s}
@media (max-width:420px){.ouvrir-portfolio svg{width:22px;height:8px}}

/* Portfolio : titre fixe à gauche, cartes décalées à droite */
.portfolio__corps{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:4vw;align-items:start;padding-bottom:clamp(90px,20vh,220px)}
.portfolio__haut{grid-column:1/-1;margin:0}
.portfolio__titre{position:sticky;top:clamp(70px,16vh,170px);margin:0;font-size:clamp(30px,calc(4.1*var(--u)),84px)}
.portfolio__grille{grid-template-columns:1fr 1fr;gap:clamp(30px,5vh,60px) clamp(18px,2.4vw,44px)}
.carte{aspect-ratio:auto;overflow:visible;background:none;border-radius:0;transform:translateY(34px)}
.carte:nth-child(even){top:clamp(50px,12vh,130px)}
.carte__photo{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:4px;position:relative;background:var(--nuit)}
.carte__photo::after{content:"";position:absolute;inset:0;background:var(--acc,var(--cyan));mix-blend-mode:multiply;transform:translateY(101%);transition:transform .5s cubic-bezier(.76,0,.2,1)}
.carte:hover .carte__photo::after,.carte:focus-visible .carte__photo::after{transform:none}
.carte img{position:static}
.carte__num,.carte .carte__nom{position:static;display:block}
.carte__num{font-size:12px;opacity:.72;margin-top:10px}
.carte .carte__nom{font-size:clamp(16px,calc(1.45*var(--u)),30px);line-height:1.1;margin-top:2px}
.carte:hover .carte__nom,.carte:focus-visible .carte__nom{color:var(--acc,var(--cyan));font-stretch:116%}
@media (max-width:820px){
  .portfolio__corps{grid-template-columns:1fr}
  .portfolio__titre{position:static;margin-bottom:26px;font-size:clamp(28px,8vw,48px)}
  .carte:nth-child(even){top:44px}
}

/* Fiche client : une vraie page */
.fiche{padding:clamp(70px,13vh,130px) clamp(18px,4vw,70px) clamp(24px,5vh,50px);background:var(--encre)}
.fiche__haut{position:fixed}
.fiche__nom{font:640 clamp(42px,calc(9.4*var(--u)),190px)/.98 "Anybody",Arial,sans-serif;font-stretch:112%;letter-spacing:-.015em;color:var(--blanc)}
.fiche__lien{display:inline-flex;margin-top:clamp(16px,3vh,32px)}
.fiche__visuel{aspect-ratio:16/9;margin-top:clamp(24px,5vh,56px);background-color:var(--nuit)}
.fiche__nav{position:static;margin-top:clamp(24px,5vh,50px)}
@media (max-width:820px){.fiche__visuel{aspect-ratio:4/3;margin-top:24px}.fiche__nav{position:static}.fiche__nom{font-size:clamp(38px,12vw,84px)}}
.fiche .fiche__lien,.fiche .fiche__visuel,.fiche .fiche__nav{opacity:0;transform:translateY(26px)}
.fiche.entre .fiche__lien,.fiche.entre .fiche__visuel,.fiche.entre .fiche__nav{opacity:1;transform:none;transition-delay:.5s}

/* Le rideau de bandes */
.rideau{display:none;position:absolute;inset:0;z-index:8;overflow:hidden;pointer-events:none}
.rideau i{position:absolute;left:-12%;width:124%;height:17%;border-radius:9vh;transform:translate3d(-101%,0,0);will-change:transform}
.rideau i:nth-child(1){top:-.2%;background:#0e5a7c}.rideau i:nth-child(2){top:16.5%;background:#0a2238}.rideau i:nth-child(3){top:33.2%;background:#16324a}.rideau i:nth-child(4){top:49.9%;background:#0e5a7c}.rideau i:nth-child(5){top:66.6%;background:var(--acc,#35c6f0)}.rideau i:nth-child(6){top:83.3%;background:#0a2238}
.rideau span{position:absolute;left:50%;top:41.5%;transform:translate(-50%,-50%);opacity:0;white-space:nowrap;color:#fff;font:300 clamp(22px,calc(2.6*var(--u)),52px)/1 "Anybody",Arial,sans-serif;font-stretch:112%}

/* Portfolio : les vrais sites */
.carte__photo{aspect-ratio:16/10}
.carte img{object-position:50% 0}
.carte__photo::after{mix-blend-mode:normal;opacity:.82}
.fiche__visuel{position:relative;overflow:hidden}
.fiche__visuel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:820px){
  .portfolio__grille{grid-template-columns:1fr;gap:22px}
  .carte:nth-child(even){top:0}
  .carte .carte__nom{font-size:20px}
  .fiche__visuel{aspect-ratio:16/9}
}

/* MOBILE D'ABORD */
.indice{display:none}
.tactile,.tactile body{height:100%;overflow:hidden;overscroll-behavior:none}
.tactile .scene{touch-action:none;-webkit-user-select:none;user-select:none}
.tactile .form input,.tactile .form textarea{touch-action:manipulation;-webkit-user-select:text;user-select:text}
.tactile dialog,.tactile .portfolio__corps,.tactile .fiche{touch-action:pan-y}
.tactile .traits{pointer-events:none!important}
@media (max-width:820px){
  .h .tete{padding:9px 16px}
  .h .tete a,.ouvrir-portfolio{min-height:38px;display:inline-flex;align-items:center}
  .langues{gap:.25em}
  .h .tete .langues a{padding:8px 5px}
  .h .txt,.h .bloc p{font-size:clamp(16px,4.3vw,20px);line-height:1.42}
  .h .titre,.h .clone{letter-spacing:-.02em}
  .bloc h3{font-size:clamp(30px,8.6vw,44px)}
  .h .panneaux{gap:6px}
  .h .panneau{width:88vw}
  .h .panneau h3{font-size:18px}
  .h .panneau__geant{font-size:clamp(28px,8.4vw,44px);width:76vw;top:14%}
  .h .panneau p{width:76vw;font-size:clamp(15.5px,4.1vw,19px);line-height:1.38;left:16px;bottom:16px}
  .h .offres{grid-auto-columns:88vw;column-gap:6vw;font-size:clamp(24px,6.8vw,34px)}
  .h .offres li{margin-bottom:1em}
  .h .offres small{font-size:clamp(15.5px,4.1vw,19px);line-height:1.36}
  .h #methode .txt,.h #methode .filet{display:none}
  .h #nuee{left:0;width:100vw}
  .etape-vive__mot{font-size:clamp(28px,8vw,44px)}
  .h .bande span{font-size:clamp(20px,5.8vw,28px)}
  .h #contact .txt{width:88vw}
  .form .champ input,.form .champ textarea,.champ__nom{font-size:18px}
  .tactile .indice{display:flex;position:fixed;z-index:29;right:18px;bottom:clamp(50px,8svh,68px);gap:9px;align-items:center;font-size:14px;font-weight:600;color:#fff;opacity:0;animation:indice 1.6s ease-in-out 2.3s infinite both}
  .tactile .indice svg{width:34px;height:12px;fill:none;stroke:var(--acc,#fff);stroke-width:2}
  .tactile .indice.vu{display:none}
}
@keyframes indice{0%{opacity:0;transform:translateX(-8px)}35%,70%{opacity:1;transform:none}100%{opacity:0;transform:translateX(10px)}}

/* Téléphone : leviers avec titre et sous-titres, photo de contact sous le formulaire */
@media (max-width:820px) and (min-height:501px){
  .h .bandes{top:calc(11svh + 12vw);bottom:9svh}
  .bande em{display:block;font-size:clamp(12.5px,3.4vw,15px);line-height:1.2}
  .bande span{flex-direction:column;align-items:flex-start;gap:.2em;font-size:clamp(19px,5.2vw,26px)}
  .h #contact .photo-contact{left:106vw;top:auto;bottom:11svh;width:88vw}
}


/* Symbole du logo en couleur d'accent, le mot reste blanc */
.marque svg{fill:var(--acc,#ff5b22)}

/* Portfolio : bloc titre et sous-titre */
.portfolio__tete{position:sticky;top:clamp(70px,16vh,170px)}
.portfolio__titre{position:static}
.portfolio__sous{margin-top:clamp(14px,2.4vh,26px);max-width:27em;font-size:clamp(16px,calc(1.25*var(--u)),26px);line-height:1.42}
@media (max-width:820px){.portfolio__tete{position:static;margin-bottom:26px}.portfolio__titre{margin-bottom:0}}


/* Logo : symbole blanc, « web » en couleur d'accent */
.marque svg{fill:currentColor}
.marque b{color:var(--acc,#ff5b22)}

/* Erreurs du formulaire */
.champ__err{position:absolute;left:0;top:calc(100% + 4px);z-index:3;padding:4px 10px 5px;background:var(--acc,#ff5b22);color:var(--encre);font:600 12.5px/1.15 "Hanken",Arial,sans-serif;white-space:nowrap;border-radius:0 12px 12px 12px;clip-path:inset(0 100% 0 0 round 0 12px 12px 12px);animation:err-entre .42s cubic-bezier(.2,.8,.2,1) forwards;pointer-events:none}
.champ__err.part{animation:err-sort .24s ease-in forwards}
.champ.large:has(textarea) .champ__err{left:auto;right:0;border-radius:12px 0 12px 12px;clip-path:inset(0 0 0 100% round 12px 0 12px 12px);animation-name:err-entre-d}
.champ.large:has(textarea) .champ__err.part{animation-name:err-sort}
@keyframes err-entre{to{clip-path:inset(0 0 0 0 round 0 12px 12px 12px)}}
@keyframes err-entre-d{to{clip-path:inset(0 0 0 0 round 12px 0 12px 12px)}}
@keyframes err-sort{from{clip-path:inset(0 0 0 0);opacity:1;transform:none}to{clip-path:inset(0 0 0 0);opacity:0;transform:translateY(-5px)}}
.champ.en-erreur{animation:err-tremble .46s cubic-bezier(.36,.07,.19,.97) var(--dec,0ms) both}
@keyframes err-tremble{15%{transform:translateX(-7px)}35%{transform:translateX(6px)}55%{transform:translateX(-4px)}75%{transform:translateX(2px)}100%{transform:none}}
.champ.en-erreur i{background:var(--acc,#ff5b22);opacity:1;height:2px}
.champ.en-erreur i::after{transform:scaleX(1);background:var(--acc,#ff5b22);opacity:1}
.champ.en-erreur .champ__nom{color:var(--acc,#ff5b22);opacity:1}
.btn.envoyer.refus{animation:err-tremble .46s cubic-bezier(.36,.07,.19,.97) both}
.etat.erreur{color:var(--acc,#ff5b22)}
.h .parti .etat.erreur{color:var(--acc,#ff5b22)}
@media (max-height:500px){.champ__err{font-size:11px;padding:2px 8px 3px;top:calc(100% + 2px)}}

/* Leviers : morceaux des bandes */
.eclat{display:none;position:absolute;height:16.68%;will-change:transform;pointer-events:none;z-index:0}
.h .bande{z-index:1}


.h .bandes.casse .bande{background:transparent!important}

/* Leviers : les morceaux débordent par-dessus le contact */
.h #leviers{z-index:3}
.h .bandes{transition:opacity .8s}
.h .bandes.repos{opacity:0}

/* Contact : bouton à droite du formulaire, étiquette d'erreur du message à gauche pour ne pas le toucher */
.envoi{justify-content:flex-end}
.champ.large:has(textarea) .champ__err{left:0;right:auto;border-radius:0 12px 12px 12px;clip-path:inset(0 100% 0 0 round 0 12px 12px 12px);animation-name:err-entre}

/* Liste GEO : neuf lignes */
.h .offres{grid-template-rows:repeat(5,auto)}

/* Liste GEO à dix lignes : quatre par écran sur téléphone */
@media (max-width:820px){.h .offres{grid-template-rows:repeat(4,auto)}}
@media (max-width:820px) and (max-height:500px){
  .h .offres{grid-template-rows:repeat(3,auto);grid-auto-columns:46vw;column-gap:3vw;font-size:15px}
  .h .offres li{margin-bottom:.35em}
  .h .offres small{font-size:11.5px;line-height:1.25}
}
@media (min-width:821px) and (max-height:500px){.h .offres{font-size:15px;top:calc(var(--haut,40px) + 1svh)}.offres li{margin-bottom:.1em}.h .offres small{font-size:10.5px;line-height:1.2;margin-top:0}}

/* Écrans bas : la liste GEO tient au-dessus de la règle */
@media (min-width:821px) and (max-height:780px) and (min-height:501px){
  .h .offres{top:11svh;font-size:clamp(20px,calc(2.4*var(--u)),34px)}
  .h .offres li{margin-bottom:.3em}
  .h .offres small{font-size:13px;margin-top:.15em}
}

/* Flèche de fin */
.fin{display:none}
.h .p.fin{display:flex;flex-direction:column;align-items:flex-start;gap:12px;width:clamp(120px,15vw,260px);height:auto;background:none;border:0;padding:8px 0;color:inherit;cursor:pointer;text-align:left}
.fin svg{width:100%;height:auto;overflow:visible;fill:none;stroke:var(--acc,#ff5b22);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fin__trait{stroke-dasharray:1;stroke-dashoffset:.72;transition:stroke-dashoffset .55s cubic-bezier(.3,0,.1,1)}
.fin__pointe{transition:transform .4s cubic-bezier(.3,0,.1,1)}
.fin span{font:300 clamp(16px,calc(1.35*var(--u)),28px)/1.1 "Anybody",Arial,sans-serif;font-stretch:112%;transition:color .3s}
.fin:hover .fin__trait,.fin:focus-visible .fin__trait{stroke-dashoffset:0}
.fin:hover .fin__pointe{transform:translateX(5px)}
.fin:hover span{color:var(--acc,#ff5b22)}
.fin .fin__trait{animation:fin-appel 2.4s ease-in-out infinite}
.fin:hover .fin__trait{animation:none}
@keyframes fin-appel{50%{stroke-dashoffset:.35}}
.rideau--page{position:fixed;z-index:35}
@media (max-width:820px){
  .h .p.fin{width:40vw;gap:8px}
  .fin span{font-size:15px;text-shadow:0 1px 8px rgba(5,8,15,.8)}
}
@media (max-height:500px){
  .h .p.fin{top:66svh;width:24vw}
}
@media (max-width:820px) and (max-height:500px){.h .p.fin{left:66vw;top:60svh}}
@media (min-width:821px) and (max-height:500px){.h .p.fin{width:16vw}}
.fin span{text-shadow:0 1px 10px rgba(5,8,15,.55)}

.portfolio__sous{font-size:clamp(15px,calc(1.08*var(--u)),22px);line-height:1.45}
.portfolio__sous a{color:var(--acc,#ff5b22);text-underline-offset:3px}
.portfolio__sous a:hover{color:var(--blanc)}

.mot-acc{color:var(--acc,#ff5b22);font-weight:650}

.portfolio__sous a{color:#fff;text-decoration:none}
.portfolio__sous a:hover{color:#fff;text-decoration:none}

/* Portfolio : simple liste de captures */
.carte,.carte:hover{cursor:default}
.carte__photo::after{display:none}
.carte:hover .carte__nom{color:inherit;font-stretch:104%}
.carte:hover img{transform:none}

/* Mentions à la ligne */
#ouvrir-mentions{display:block;margin-top:.25em;text-align:left}

/* Flèche de fin : volet avant le loader */
.intro-volet{position:fixed;inset:0;z-index:39;overflow:hidden;pointer-events:none}
.intro-volet i{position:absolute;left:-14vw;width:calc(100% + 14vw);height:16.8%;background:var(--encre);border-radius:9vh 0 0 9vh;transform:translate3d(101%,0,0);animation:volet-entre .5s cubic-bezier(.76,0,.2,1) forwards}
.intro-volet i:nth-child(1){top:0;animation-delay:.1s}.intro-volet i:nth-child(2){top:16.66%;animation-delay:0s}.intro-volet i:nth-child(3){top:33.32%;animation-delay:.14s}.intro-volet i:nth-child(4){top:49.98%;animation-delay:.05s}.intro-volet i:nth-child(5){top:66.64%;animation-delay:.12s}.intro-volet i:nth-child(6){top:83.3%;animation-delay:.03s}
@keyframes volet-entre{to{transform:none}}

/* Vol au-dessus de la frise */
.en-vol .scene{overflow:visible;will-change:transform;transform-origin:50% 50%}
.en-vol .fond{opacity:0}
.en-vol body,.en-vol{background:var(--encre)}
.h .fond{transition:opacity .3s}

/* Vol : aucune barre de défilement parasite */
html.en-vol,html.en-vol body{overflow-x:clip}

/* Pour qui : bouton vers le portfolio */
.voir-clients{display:none}
.h .p.voir-clients{display:block;width:max-content;height:auto;top:calc(12svh + 5.6*var(--u));padding:clamp(11px,1.5svh,15px) clamp(20px,2vw,30px);font-size:clamp(14px,calc(1.05*var(--u)),20px)}
.h[lang^=en] .p.voir-clients{top:calc(12svh + 9.8*var(--u))}
.h #clients .p.voir-clients:hover{background:var(--encre);color:var(--blanc)}
@media (max-width:820px){
  .h .p.voir-clients{top:calc(12svh + 13vw);font-size:15px;padding:11px 20px}
  .h[lang^=en] .p.voir-clients{top:calc(12svh + 25vw)}
  .h #clients .bloc:first-of-type{top:calc(12svh + 13vw + 62px)}
  .h[lang^=en] #clients .bloc:first-of-type{top:calc(12svh + 25vw + 62px)}
}
@media (max-height:500px){
  .h .p.voir-clients,.h[lang^=en] .p.voir-clients{top:auto;bottom:14svh;padding:7px 14px;font-size:12.5px}
}

/* Portfolio : lien de la seule carte Rosmaryn */
.carte__site{display:inline-block;margin-top:3px;font-size:13px;color:var(--blanc);opacity:.8;text-decoration:none;padding:3px 0;transition:opacity .25s,color .25s}
.carte__site:hover,.carte__site:focus-visible{opacity:1;color:var(--acc,#ff5b22)}

/* Portfolio : le mur de noms */
.portfolio__corps{display:block;padding-bottom:clamp(120px,18vh,170px)}
.portfolio__tete{position:static;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:4vw;align-items:end;margin-bottom:clamp(20px,4vh,44px)}
.portfolio__titre{font-size:clamp(28px,calc(3.6*var(--u)),72px)}
.portfolio__sous{margin:0;max-width:none}
.mur-source{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);list-style:none}
.mur{overflow-x:clip;margin:0 calc(-.3*clamp(18px,3vw,44px))}
.mur .ligne{display:flex;justify-content:space-between;white-space:nowrap;line-height:1;will-change:transform}
.mur .nom{appearance:none;background:none;border:0;padding:0;color:var(--blanc);font-family:Anybody,Arial,sans-serif;font-size:inherit;line-height:inherit;letter-spacing:-.01em;white-space:nowrap;cursor:pointer;transition:font-stretch .45s cubic-bezier(.2,.8,.2,1),color .25s,opacity .3s}
.mur .fort{font-weight:780}.mur .fin{font-weight:220}
.mur.mesure .nom{transition:none}
.mur .nom.vif{color:var(--acc,#ff5b22);opacity:1}
.mur.survol .nom:not(.vif){opacity:.4}
.mur .nom:focus-visible{outline:2px solid var(--acc,#ff5b22);outline-offset:2px}
.mur-legende{position:absolute;z-index:4;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px clamp(12px,1.5vw,24px);padding:clamp(14px,2.4vh,24px) clamp(18px,3vw,44px);background:linear-gradient(transparent,var(--encre) 30%);opacity:0;animation:pf-corps .4s 1.2s forwards;min-height:clamp(70px,11vh,100px)}
.mur-legende strong{font:640 clamp(19px,calc(1.8*var(--u)),36px)/1.1 Anybody,Arial,sans-serif;font-stretch:108%;color:var(--acc,#ff5b22)}
.mur-legende strong:empty{display:none}
.mur-legende span{font-size:clamp(15px,calc(1.15*var(--u)),23px);line-height:1.35}
.mur-legende a{font-weight:650;color:var(--blanc);text-decoration:none;font-size:clamp(14px,calc(1*var(--u)),20px)}
.mur-legende a:hover{color:var(--acc,#ff5b22)}
.portfolio.ferme .mur-legende{animation:pf-corps-out .2s forwards}
@media (max-width:820px){
  .portfolio__tete{display:block}
  .portfolio__titre{margin-bottom:12px;font-size:clamp(26px,7.6vw,44px)}
  .portfolio__corps{padding-bottom:150px}
  .mur-legende{display:block;background:linear-gradient(transparent,var(--encre) 18%);padding-top:24px}
  .mur-legende strong,.mur-legende span,.mur-legende a{display:block}
}

/* ── Vers holos (03/11/2026) : bouton sous « Les expertises », lien du menu, passage en iris ── */
.btn-holos{position:relative;display:flex;align-items:center;gap:14px;width:fit-content;margin:clamp(18px,3svh,30px) auto 0;padding:9px 22px 9px 10px;border-radius:999px;
  background:rgba(10,34,56,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;text-decoration:none;overflow:hidden;
  box-shadow:0 10px 40px -12px rgba(255,91,34,.45);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,background .35s;pointer-events:auto}
.btn-holos::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.14) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.btn-holos:hover,.btn-holos:focus-visible{transform:translateY(-3px);background:rgba(14,48,78,.9);box-shadow:0 16px 50px -10px rgba(255,91,34,.65);outline:none}
.btn-holos:hover::after,.btn-holos:focus-visible::after{transform:translateX(120%)}
.btn-holos__anneau{position:relative;flex:none;width:42px;height:42px}
.btn-holos__anneau svg{position:absolute;inset:0;width:100%;height:100%}
.btn-holos__anneau circle{fill:none;stroke:var(--acc,#ff5b22);stroke-width:1.5;transition:stroke-width .35s}
.btn-holos__anneau i{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(var(--cyan,#35c6f0) 0 3deg,transparent 3deg 11.25deg);
  -webkit-mask:radial-gradient(circle,transparent 17.5px,#000 18px 20px,transparent 20.5px);mask:radial-gradient(circle,transparent 17.5px,#000 18px 20px,transparent 20.5px);animation:holos-tourne 18s linear infinite}
.btn-holos:hover .btn-holos__anneau i{animation-duration:3.5s}
.btn-holos:hover .btn-holos__anneau circle{stroke-width:2.2}
.btn-holos__mots{display:flex;flex-direction:column;line-height:1}
.btn-holos__mots b{font-family:"Anybody",Arial,sans-serif;font-weight:300;font-stretch:125%;font-size:21px;letter-spacing:.08em}
.btn-holos__mots small{font-size:12.5px;opacity:.72;margin-top:5px;letter-spacing:.02em}
.btn-holos__fleche{font-size:18px;color:var(--acc,#ff5b22);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.btn-holos:hover .btn-holos__fleche{transform:translateX(5px)}
@keyframes holos-tourne{to{transform:rotate(360deg)}}
@media (max-width:820px){.btn-holos{display:inline-flex;vertical-align:middle;margin:0 0 0 18px;padding:5px 14px 5px 5px;gap:8px}.btn-holos__anneau{width:30px;height:30px}
  .btn-holos__anneau i{-webkit-mask:radial-gradient(circle,transparent 12px,#000 12.5px 14px,transparent 14.5px);mask:radial-gradient(circle,transparent 12px,#000 12.5px 14px,transparent 14.5px)}
  .btn-holos__mots b{font-size:16px}.btn-holos__mots small{display:none}.btn-holos__fleche{font-size:15px}}
.vers-holos{transition:letter-spacing .35s}
.vers-holos:hover{letter-spacing:.06em}

@media (prefers-reduced-motion:reduce){.btn-holos__anneau i{animation:none}}

/* ══ Les étapes de la méthode : chaque mot ouvre sa fenêtre (04/11/2026, mobile d'abord) ══ */
.etape-lien{position:relative;appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;display:inline-flex;align-items:baseline;gap:.22em;text-align:left;-webkit-tap-highlight-color:transparent}
.etape-lien::after{content:"";position:absolute;inset:-8px -12px}
.etape-lien i{font-style:normal;font-size:.48em;font-weight:700;color:var(--acc,var(--cyan));transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.etape-lien:hover,.etape-lien:focus-visible{color:var(--acc,var(--cyan));outline:none}
.etape-lien:hover i,.etape-lien:focus-visible i{transform:rotate(90deg) scale(1.25)}
.h .etapes-methode li:hover{opacity:1}
dialog.etape{color:var(--blanc)}
.etape>i{background:var(--encre)}
.etape__corps{display:flex;flex-direction:column;padding:0 20px calc(130px + env(safe-area-inset-bottom,0px))}
.etape__num{position:absolute;right:-.06em;top:.02em;font:800 58vw/1 "Anybody",Arial,sans-serif;font-stretch:130%;color:rgba(246,249,251,.06);pointer-events:none;transform:translateX(18%);opacity:0;transition:transform 1s cubic-bezier(.2,.7,.2,1),opacity .8s}
.etape.entre .etape__num{transform:none;opacity:1}
.etape__haut{position:sticky;top:0;z-index:3;display:flex;justify-content:flex-end;padding:calc(10px + env(safe-area-inset-top,0px)) 0 0}
.etape__haut button{pointer-events:auto;background:#0a2238;width:44px;height:44px;border-radius:50%;display:grid;place-items:center}
.etape__contenu{position:relative;z-index:2;max-width:34em;padding-top:8vh}
.etape__sur{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc,var(--cyan));margin-bottom:.6em}
.etape__titre{font:640 clamp(46px,14vw,150px)/.98 "Anybody",Arial,sans-serif;font-stretch:96%;letter-spacing:-.01em;margin-bottom:.32em;transition:font-stretch 1s cubic-bezier(.2,.7,.2,1)}
.etape.entre .etape__titre{font-stretch:122%}
.etape__intro{font-size:18px;line-height:1.42;margin-bottom:1.4em}
.etape__bloc{border-top:1px solid rgba(246,249,251,.16);padding-top:.9em;margin-bottom:1.2em}
.etape__bloc h3{font:600 12px/1.2 "Hanken",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;opacity:.7;margin:0 0 .7em}
.etape__points{list-style:none;padding:0;margin:0}
.etape__points li{position:relative;padding:.42em 0 .42em 1.4em;font-size:16px;line-height:1.35}
.etape__points li::before{content:"";position:absolute;left:0;top:.95em;width:.7em;height:2px;background:var(--acc,var(--cyan))}
.etape__recu{font:500 19px/1.35 "Anybody",Arial,sans-serif;font-stretch:104%}
.etape__cta{display:inline-flex;align-items:center;min-height:48px;margin-top:.4em;padding:0 24px;border-radius:40px;background:var(--acc,var(--cyan));color:var(--sur-acc,var(--encre));font:650 15px/1 "Hanken",Arial,sans-serif;text-decoration:none}
/* L'entrée : chaque morceau monte à son tour */
.etape .etape__sur,.etape .etape__titre,.etape .etape__intro,.etape .etape__bloc,.etape .etape__cta{opacity:0;transform:translateY(26px);transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1),font-stretch 1s cubic-bezier(.2,.7,.2,1)}
.etape.entre .etape__sur{opacity:1;transform:none;transition-delay:.05s}.etape.entre .etape__titre{opacity:1;transform:none;transition-delay:.1s}
.etape.entre .etape__intro{opacity:1;transform:none;transition-delay:.2s}.etape.entre .etape__bloc{opacity:1;transform:none;transition-delay:.28s}
.etape.entre .etape__bloc--r{transition-delay:.36s}.etape.entre .etape__cta{opacity:1;transform:none;transition-delay:.44s}
.etape__points li{opacity:0;transform:translateX(-14px);transition:opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1)}
.etape.entre .etape__points li{opacity:1;transform:none}
.etape.entre .etape__points li:nth-child(1){transition-delay:.32s}.etape.entre .etape__points li:nth-child(2){transition-delay:.38s}.etape.entre .etape__points li:nth-child(3){transition-delay:.44s}.etape.entre .etape__points li:nth-child(4){transition-delay:.5s}
/* La barre du pouce, en bas : précédent, les quatre points, suivant */
.etape__nav{position:fixed;z-index:4;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,rgba(5,8,15,.92) 40%)}
.etape__pas{appearance:none;width:52px;height:52px;border-radius:50%;border:1px solid rgba(246,249,251,.24);background:rgba(10,34,56,.9);color:var(--blanc);display:grid;place-items:center;cursor:pointer}
.etape__pas svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2}
.etape__pas:active{transform:scale(.94)}
.etape__points-nav{display:flex;gap:4px}
.etape__points-nav button{appearance:none;border:0;background:none;width:30px;height:44px;cursor:pointer;position:relative}
.etape__points-nav button::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:rgba(246,249,251,.35);transition:transform .35s,background .35s}
.etape__points-nav button[aria-current="true"]::after{background:var(--acc,var(--cyan));transform:scale(1.5)}
/* Le passage d'une étape à l'autre : un volet de couleur balaie l'écran */
.etape__volet{position:fixed;inset:0;z-index:5;background:var(--acc,var(--cyan));clip-path:inset(0 0 0 100%);pointer-events:none}
.etape__volet.va{animation:etape-volet .62s cubic-bezier(.76,0,.2,1)}
.etape__volet.vient{animation:etape-volet-r .62s cubic-bezier(.76,0,.2,1)}
@keyframes etape-volet{0%{clip-path:inset(0 0 0 100%)}50%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
@keyframes etape-volet-r{0%{clip-path:inset(0 100% 0 0)}50%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 100%)}}
.etape.ferme .etape__nav{opacity:0;transition:opacity .2s}
/* L'ordinateur : deux colonnes, le chiffre géant à gauche */
@media (min-width:821px){
  .etape__corps{padding:0 clamp(28px,5vw,90px) 120px}
  .etape__num{font-size:46vw;left:-.04em;right:auto;top:-.12em}
  .etape__contenu{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:5vw;max-width:none;padding-top:14vh;align-items:start}
  .etape__sur,.etape__titre{grid-column:1}
  .etape__intro{grid-column:2;grid-row:1;align-self:start;font-size:clamp(18px,1.5vw,24px);margin-top:1.6em}
  .etape__titre{font-size:clamp(46px,6vw,104px);grid-row:2}
  .etape__sur{grid-row:1;align-self:end}
  .etape__bloc{grid-column:2}
  .etape__cta{grid-column:2;justify-self:start}
  .etape__titre{margin-bottom:0}
  .etape__nav{left:auto;right:clamp(28px,5vw,90px);bottom:24px;width:auto;background:none;padding:0;gap:14px}
}
@media (prefers-reduced-motion:reduce){.etape *{transition:none!important;animation:none!important}}

/* ══ La 404 : perdu dans l'univers (04/11/2026, mobile d'abord, assets/perdu.js) ══ */
.perdu-corps{margin:0;background:#03060d;overflow:hidden;height:100svh}
.perdu{position:fixed;inset:0;color:#f6f9fb;font-family:"Hanken",Arial,sans-serif;--acc:#ff5b22}
.perdu__ciel{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.perdu__ciel:active{cursor:grabbing}
.perdu__balise{position:absolute;left:var(--bx,72%);top:var(--by,22%);width:64px;height:40px;margin:-20px 0 0 -32px;color:#fff;transition:transform .3s}
.perdu__balise svg{width:100%;height:100%;fill:currentColor;filter:drop-shadow(0 0 6px rgba(255,91,34,.9)) drop-shadow(0 0 22px rgba(53,198,240,.55));animation:perdu-pouls 2.6s ease-in-out infinite}
.perdu__balise::before{content:"";position:absolute;left:50%;top:50%;width:140px;height:140px;margin:-70px;border-radius:50%;border:1px solid rgba(255,91,34,.5);animation:perdu-onde 2.6s ease-out infinite}
@keyframes perdu-pouls{50%{opacity:.7;transform:scale(.92)}}
@keyframes perdu-onde{0%{transform:scale(.2);opacity:.9}100%{transform:scale(1.4);opacity:0}}
.perdu__texte{position:absolute;left:20px;right:20px;bottom:calc(24px + env(safe-area-inset-bottom,0px));pointer-events:none}
.perdu__texte>*{pointer-events:auto;opacity:0;transform:translateY(24px);animation:perdu-monte .9s cubic-bezier(.2,.7,.2,1) forwards}
.perdu__sur{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);margin:0 0 .6em;animation-delay:1.1s!important}
.perdu__titre{font:280 clamp(40px,11vw,120px)/1 "Anybody",Arial,sans-serif;font-stretch:118%;margin:0 0 .35em;animation-delay:1.25s!important}
.perdu__titre b{font-weight:760;color:var(--acc)}
.perdu__phrase{font-size:17px;line-height:1.45;max-width:26em;margin:0 0 1.3em;color:#cfd8e2;animation-delay:1.4s!important}
.perdu__bouton{display:inline-flex;align-items:center;gap:.6em;min-height:52px;padding:0 26px;border-radius:40px;background:var(--acc);color:#05080f;font:650 16px/1 "Hanken",Arial,sans-serif;text-decoration:none;animation-delay:1.55s!important;transition:transform .3s}
.perdu__bouton span{transition:transform .35s}
.perdu__bouton:hover span,.perdu__bouton:focus-visible span{transform:translateX(5px)}
.perdu__bouton:active{transform:scale(.97)}
.perdu__aide{font-size:12.5px;color:#7f93a8;margin:1.1em 0 0;animation-delay:1.8s!important}
@keyframes perdu-monte{to{opacity:1;transform:none}}
.perdu__flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.perdu.saute .perdu__texte{transition:opacity .4s,transform .6s;opacity:0;transform:translateY(30px)}
.perdu.saute .perdu__balise svg{animation:none}
@media (min-width:821px){
  .perdu__texte{left:clamp(28px,6vw,110px);right:auto;bottom:auto;top:50%;transform:translateY(-50%);max-width:40em}
  .perdu__phrase{font-size:20px}
  .perdu__balise{width:96px;height:60px;margin:-30px 0 0 -48px}
}
@media (prefers-reduced-motion:reduce){.perdu *{animation:none!important;opacity:1!important;transform:none!important}}