/* Everywhere — « nous mettons votre commerce en ligne ». Charbon, crème, orange ; Anybody (titres, axes variables),
   Atkinson Hyperlegible (texte), Space Mono (repères). Même esprit que Rampe, identité propre. */
@font-face{font-family:'Anybody';font-style:normal;font-weight:100 900;font-stretch:50% 150%;font-display:swap;src:url(../fonts/anybody.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Anybody';font-style:normal;font-weight:100 900;font-stretch:50% 150%;font-display:swap;src:url(../fonts/anybody-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Atkinson Hyperlegible';font-weight:400;font-display:swap;src:url(../fonts/atkinson-normal-400.woff2) format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible';font-weight:700;font-display:swap;src:url(../fonts/atkinson-normal-700.woff2) format('woff2')}
@font-face{font-family:'Space Mono';font-weight:400;font-display:swap;src:url(../fonts/spacemono-400.woff2) format('woff2')}
@font-face{font-family:'Space Mono';font-weight:700;font-display:swap;src:url(../fonts/spacemono-700.woff2) format('woff2')}

:root{
  --noir:#0d0d0b;--noir2:#171714;--noir3:#23231f;--trait-n:#34332d;
  --creme:#f3efe6;--creme2:#e9e3d6;--trait:#d6cfbf;
  --orange:#f0532a;--orange-t:#b8360f;
  --encre:#0d0d0b;--encre2:#4f4a40;--gris-n:#a39e92;
  --ok:#1b7f4b;
  --disp:'Anybody',system-ui,sans-serif;--body:'Atkinson Hyperlegible',system-ui,sans-serif;--mono:'Space Mono',ui-monospace,monospace;
  --gut:clamp(18px,4vw,56px);--ease:cubic-bezier(.2,.75,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);font-size:18px;line-height:1.6;color:var(--encre);background:var(--creme);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-9999px;top:10px;z-index:200;background:var(--orange);color:var(--noir);padding:10px 14px;font-weight:700}.skip:focus{left:14px}
.wrap{width:min(1240px,100% - 2*var(--gut));margin-inline:auto}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.grain{position:fixed;inset:0;pointer-events:none;z-index:150;opacity:.05;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.oeil{color:var(--orange-t)}.sombre .oeil{color:var(--orange)}
.h2{font-family:var(--disp);font-weight:880;font-stretch:112%;letter-spacing:-.035em;line-height:.95;font-size:clamp(40px,6vw,92px);text-wrap:balance}
.h2 em{font-style:normal;color:var(--orange-t)}.sombre .h2 em{color:var(--orange)}
.lead{font-size:clamp(18px,1.6vw,21px);color:var(--encre2);max-width:56ch}
.sombre{background:var(--noir);color:var(--creme)}.sombre .lead{color:#c9c3b6}
section{position:relative}

/* En-tête */
.entete{position:fixed;inset:0 0 auto 0;z-index:100;transition:background-color .35s,backdrop-filter .35s,border-color .35s;border-bottom:1px solid transparent}
.entete.plein{background:rgba(13,13,11,.82);backdrop-filter:blur(14px);border-bottom-color:rgba(255,255,255,.06)}
.entete .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:76px}
.marque{display:flex;align-items:center;gap:3px;font-family:var(--disp);font-weight:900;font-stretch:118%;font-size:25px;letter-spacing:-.04em;color:var(--creme);text-decoration:none}
.marque i{width:9px;height:9px;border-radius:50%;background:var(--orange);display:inline-block;margin-left:2px;transform:translateY(5px)}
.entete nav ul{display:flex;align-items:center;gap:28px;list-style:none}
.entete nav a{white-space:nowrap;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#d8d2c5;text-decoration:none;padding:6px 0;background:linear-gradient(var(--orange),var(--orange)) left bottom/0 2px no-repeat;transition:background-size .35s var(--ease),color .2s}
.entete nav a:hover{color:#fff;background-size:100% 2px}
.entete nav a.appel{background:var(--orange);color:var(--noir);padding:11px 16px;border-radius:999px;font-weight:700;transition:transform .25s var(--ease),box-shadow .25s}
.entete nav a.appel:hover{transform:translateY(-2px);box-shadow:0 12px 26px -12px var(--orange)}
@media(max-width:1040px){.entete nav li:not(:last-child){display:none}} /* 5 entrées + logo vidéo = ~1000 px (mesuré le 06/10) */

/* Boutons */
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;font-family:var(--body);font-weight:700;font-size:17px;padding:17px 26px;border-radius:999px;text-decoration:none;cursor:pointer;border:0;overflow:hidden;isolation:isolate;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%);transform:translateX(-130%);transition:transform .8s var(--ease)}
.btn:hover::after,.btn:focus-visible::after{transform:translateX(130%)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn .fl{font-family:var(--mono);transition:transform .3s var(--ease)}.btn:hover .fl{transform:translateX(4px)}
.btn-o{background:var(--orange);color:var(--noir)}.btn-o:hover{box-shadow:0 16px 34px -14px var(--orange)}
.btn-c{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.btn-n{background:var(--noir);color:var(--creme)}

/* 1. Haut de page : les lettres habitées (bloc en fin de fichier) */
.haut{min-height:100vh;min-height:100svh;display:grid;align-items:end;overflow:hidden;padding:140px 0 56px}
.haut::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(13,13,11,.96) 0%,rgba(13,13,11,.9) 42%,rgba(13,13,11,.45) 72%,rgba(13,13,11,.2)),linear-gradient(180deg,rgba(13,13,11,.8),transparent 28%,transparent 62%,var(--noir))}
.haut .wrap{position:relative;z-index:2}
.haut .oeil{display:flex;align-items:center;gap:10px}.haut .oeil::before{content:"";width:28px;height:2px;background:var(--orange)}
.titre-geant{font-family:var(--disp);font-weight:900;letter-spacing:-.045em;line-height:.86;font-size:clamp(58px,11.5vw,188px);margin-top:18px}
.titre-geant .l{display:block;font-stretch:var(--fs,118%)}
.titre-geant .o{color:var(--orange)}
.js .titre-geant .l{animation:rp-etire 1.6s var(--ease) both}
.js .titre-geant .l:nth-child(2){animation-delay:.12s}
@keyframes rp-etire{from{font-stretch:50%;opacity:0;transform:translateY(24px)}to{font-stretch:118%;opacity:1;transform:none}}
.haut-bas{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;margin-top:36px}
.haut .lead{color:#d6d0c3;max-width:50ch}
.haut .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.reperes{display:flex;gap:28px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris-n)}
.reperes b{display:block;font-family:var(--disp);font-size:34px;letter-spacing:-.03em;color:var(--creme);font-weight:860;text-transform:none;margin-bottom:4px}
.defile{position:absolute;left:50%;bottom:22px;z-index:2;transform:translateX(-50%);font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gris-n)}
@media(max-width:900px){.haut-bas{grid-template-columns:1fr}.defile{display:none}}

/* 2. Métiers : votre site, pour votre métier */
.metiers-s{padding:clamp(90px,14vh,150px) 0}
.tete{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;margin-bottom:44px}
.puces{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px;position:relative;isolation:isolate}
.puces [role=tab]{font:inherit;font-weight:700;font-size:16px;padding:11px 20px;border-radius:999px;border:1.5px solid var(--trait);background:transparent;color:var(--encre);cursor:pointer;min-height:44px;transition:border-color .2s,color .3s}
.puces [role=tab]:hover{border-color:var(--encre)}
.puces .curseur{position:absolute;left:0;top:0;z-index:-1;border-radius:999px;background:var(--noir);transition:transform .5s var(--ease),width .5s var(--ease),height .5s var(--ease)}
.puces.pret [role=tab][aria-selected=true]{color:var(--creme);border-color:transparent}
.puces:not(.pret) [role=tab][aria-selected=true]{background:var(--noir);color:var(--creme)}
.scene-m{display:grid;grid-template-columns:1.55fr .45fr;gap:0;align-items:end;position:relative}
.ordi{position:relative;background:#1b1b18;border-radius:18px 18px 8px 8px;padding:14px 14px 0;box-shadow:0 60px 120px -60px rgba(13,13,11,.6)}
.ordi::after{content:"";position:absolute;left:-6%;right:-6%;bottom:-18px;height:18px;border-radius:0 0 20px 20px;background:linear-gradient(#cfc8ba,#a9a293)}
.ecran{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:6px 6px 0 0;background:#000}
.ecran img{width:100%;height:auto;will-change:transform}
.tel{position:relative;justify-self:end;width:min(230px,100%);margin:0 0 -30px -80px;background:#111;border-radius:40px;padding:10px;box-shadow:0 50px 90px -40px rgba(13,13,11,.75),0 0 0 1px rgba(255,255,255,.08)}
.tel .ecran{aspect-ratio:9/19.5;border-radius:31px}
.panneau[hidden]{display:none}
.js .panneau:not([hidden]){animation:rp-entre .6s var(--ease)}
@keyframes rp-entre{from{opacity:0;transform:translateY(14px)}}
.legende{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:64px;padding-top:22px;border-top:1px solid var(--trait)}
.legende b{display:block;font-family:var(--disp);font-weight:820;font-size:20px;letter-spacing:-.015em;margin-bottom:4px}
.legende p{color:var(--encre2);font-size:16px}
.legende a{color:var(--orange-t);font-weight:700}
@media(max-width:900px){.tete{grid-template-columns:1fr}.scene-m{grid-template-columns:1fr}.tel{width:150px;margin:-120px 0 0 auto;border-radius:28px;padding:7px}.tel .ecran{border-radius:22px}.legende{grid-template-columns:1fr}
  .puces{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--gut));padding:2px var(--gut) 6px}.puces::-webkit-scrollbar{display:none}.puces [role=tab]{flex:none}}

/* 3. En ligne en 2 heures : le site se monte au défilement */
.deuxh{height:420vh}
.deuxh .colle{position:sticky;top:0;height:100vh;height:100svh;display:grid;align-items:center;overflow:hidden}
.deuxh .grille{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center}
.horloge{font-family:var(--disp);font-weight:900;font-stretch:var(--hs,100%);letter-spacing:-.05em;line-height:.85;font-size:clamp(72px,10vw,160px);color:var(--creme);font-variant-numeric:tabular-nums;margin-top:10px}
.horloge small{font-size:.32em;letter-spacing:-.02em;color:var(--orange);margin-left:.08em}
.etapes{list-style:none;margin-top:24px;display:grid;gap:0;counter-reset:e}
.etapes li{counter-increment:e;display:grid;grid-template-columns:34px 1fr;gap:12px;padding:9px 0;color:#77736a;border-top:1px solid var(--trait-n);transition:color .4s}
.etapes li::before{content:counter(e,decimal-leading-zero);font-family:var(--mono);font-size:12px;padding-top:4px}
.etapes li b{font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:-.01em;display:block}
.etapes li span{font-size:15px;display:block;max-height:0;overflow:hidden;opacity:0;transition:max-height .5s var(--ease),opacity .4s}.etapes li.la span{max-height:60px;opacity:1}
.etapes li.fait{color:#c9c3b6}.etapes li.la{color:var(--creme)}.etapes li.la::before{color:var(--orange)}
.montage{justify-self:center;position:relative;width:min(320px,80vw);aspect-ratio:9/19;border-radius:46px;background:#111;padding:12px;box-shadow:0 60px 120px -50px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08)}
.montage .page{position:relative;height:100%;border-radius:36px;overflow:hidden;background:#f6f1e8}
.bloc{position:absolute;left:0;right:0;opacity:0;transform:translateY(40px) scale(.96);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.bloc.vu{opacity:1;transform:none}
.b-adresse{top:0;height:34px;background:#e7e1d4;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;color:#5c574d}
.b-photo{top:34px;height:46%;background:#333 center/cover}
.b-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,13,11,.1),rgba(13,13,11,.75))}
.b-titre{top:26%;padding:0 20px;z-index:2;color:#fff;font-family:var(--disp);font-weight:880;font-stretch:112%;font-size:30px;line-height:.95;letter-spacing:-.035em}
.b-titre small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;opacity:.85;margin-bottom:8px;font-stretch:100%;font-weight:400}
.b-horaires{top:calc(34px + 46% - 36px);margin:0 16px;z-index:3;background:#fff;border-radius:14px;padding:14px;box-shadow:0 16px 30px -18px rgba(0,0,0,.5);font-size:12px;color:#51483f}
.b-horaires b{color:#166534;display:block;margin-bottom:6px;font-size:13px}
.b-horaires div{display:flex;justify-content:space-between;border-top:1px dashed #ddd3c4;padding:4px 0}
.b-appel{bottom:92px;margin:0 16px;background:var(--orange);color:var(--noir);border-radius:12px;padding:13px;text-align:center;font-weight:700;font-size:14px}
.b-plan{bottom:18px;margin:0 16px;height:62px;border-radius:12px;background:#dfe7d8 repeating-linear-gradient(35deg,transparent 0 16px,rgba(255,255,255,.55) 16px 18px);display:flex;align-items:center;gap:10px;padding:0 14px;font-size:12px;color:#3c4a33}
.b-plan i{width:14px;height:14px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--orange)}
.b-enligne{top:50%;left:50%;right:auto;transform:translate(-50%,-50%) scale(.6);background:var(--noir);color:var(--creme);border-radius:999px;padding:12px 20px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;gap:10px;z-index:5;white-space:nowrap}
.b-enligne i{width:9px;height:9px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 5px rgba(74,222,128,.25)}
.b-enligne.vu{transform:translate(-50%,-50%) scale(1)}
.deuxh .note{margin-top:18px;font-size:14px;color:var(--gris-n);max-width:48ch}
@media(max-width:900px){.deuxh{height:auto}.deuxh .colle{position:relative;height:auto;padding:90px 0}.deuxh .grille{grid-template-columns:1fr}.bloc{opacity:1;transform:none}.b-enligne{transform:translate(-50%,-50%)}}

/* 4. Formules */
.formules{padding:clamp(90px,14vh,150px) 0}
.cartes{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px}
.carte{position:relative;display:flex;flex-direction:column;gap:14px;padding:28px 24px;border-radius:22px;background:var(--noir2);border:1px solid var(--trait-n);transition:transform .35s var(--ease),border-color .3s,box-shadow .35s var(--ease)}
.carte:hover{transform:translateY(-6px);border-color:#4a483f;box-shadow:0 30px 60px -36px rgba(0,0,0,.9)}
.carte.mise{background:var(--creme);color:var(--encre);border-color:var(--creme)}
.carte.mise .d,.carte.mise li{color:var(--encre2)}
.carte .etiq{position:absolute;top:-12px;left:24px;background:var(--orange);color:var(--noir);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:999px;font-weight:700}
.carte h3{font-family:var(--disp);font-weight:880;font-stretch:112%;font-size:28px;letter-spacing:-.03em}
.carte .prix{font-family:var(--disp);font-weight:900;font-size:40px;letter-spacing:-.04em;line-height:1}
.carte .prix small{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.06em;font-weight:400;margin-top:8px;color:var(--gris-n)}
.carte.mise .prix small{color:var(--encre2)}
.carte .d{color:#c9c3b6;font-size:16px}
.carte ul{list-style:none;display:grid;gap:8px;margin-top:4px;font-size:15px;color:#c9c3b6}
.carte li{padding-left:22px;position:relative}.carte li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;background:var(--orange)}
.carte .btn{margin-top:auto;justify-content:center}
.modules{margin-top:34px;display:flex;flex-wrap:wrap;gap:10px 26px;font-size:15px;color:#c9c3b6}
.modules b{color:var(--creme)}
.ht{margin-top:18px;font-size:14px;color:var(--gris-n)}
@media(max-width:1100px){.cartes{grid-template-columns:1fr 1fr}}@media(max-width:640px){.cartes{grid-template-columns:1fr}}

/* 5. Rampe */
.rampe-b{padding:60px 0;border-top:1px solid var(--trait-n)}
.rampe-b .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:30px;align-items:center}
.rampe-b .logo-r{width:128px;height:128px;border-radius:20px;object-fit:cover;box-shadow:0 0 0 1px rgba(61,139,255,.25),0 24px 50px -24px rgba(61,139,255,.45)}
.rampe-b p{color:#c9c3b6;max-width:62ch}.rampe-b p b{color:var(--creme)}
@media(max-width:800px){.rampe-b .wrap{grid-template-columns:1fr}}

/* 6. Questions */
.questions{padding:clamp(80px,12vh,130px) 0}
.questions .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px}
details{border-top:1px solid var(--trait)}details:last-child{border-bottom:1px solid var(--trait)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;padding:20px 0;font-family:var(--disp);font-weight:800;font-size:20px;letter-spacing:-.015em}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--mono);color:var(--orange-t);transition:transform .3s var(--ease)}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 0 22px;color:var(--encre2);max-width:62ch}
@media(max-width:860px){.questions .wrap{grid-template-columns:1fr}}

/* 7. Être rappelé */
.contact{padding:clamp(80px,12vh,130px) 0}
.contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.form{background:var(--noir2);border:1px solid var(--trait-n);border-radius:24px;padding:34px}
.form label{display:block;font-weight:700;margin:18px 0 8px;color:var(--creme)}
.form label:first-of-type{margin-top:0}
.form input,.form select,.form textarea{width:100%;font:inherit;font-size:17px;padding:14px 16px;border-radius:12px;border:1.5px solid #8a857a;background:var(--noir);color:var(--creme)}
.form ::placeholder{color:#a39e92;opacity:1}
main[tabindex="-1"]:focus{outline:none}
.form input:focus,.form select:focus,.form textarea:focus{outline:3px solid var(--orange);outline-offset:1px;border-color:var(--orange)}
.form textarea{min-height:96px;resize:vertical}
.form .btn{width:100%;justify-content:center;margin-top:24px}
.form small{display:block;margin-top:14px;color:var(--gris-n);font-size:14px}
.form small a{color:var(--creme)}
.piege{position:absolute;left:-9999px}
@media(max-width:860px){.contact .wrap{grid-template-columns:1fr}}

/* Pied */
.pied{padding:60px 0 40px;border-top:1px solid var(--trait-n);font-size:15px;color:var(--gris-n)}
.pied .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px}
@media(max-width:1000px){.pied .wrap{grid-template-columns:1fr 1fr}}
.pied h2{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--creme);font-weight:400;margin-bottom:12px}
.pied ul{list-style:none;display:grid;gap:8px}.pied a{color:#d6d0c3}
.pied .bas{grid-column:1/-1;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:26px;border-top:1px solid var(--trait-n);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
@media(max-width:800px){.pied .wrap{grid-template-columns:1fr}}

/* Pages simples (mentions, confidentialité, merci) */
.simple{padding:150px 0 90px;min-height:70vh}
.simple .wrap{max-width:760px}
.simple h1{font-family:var(--disp);font-weight:880;font-stretch:112%;letter-spacing:-.035em;font-size:clamp(40px,6vw,72px);line-height:.95;margin:14px 0 26px}
.simple h2{font-family:var(--disp);font-weight:800;font-size:24px;margin:34px 0 10px}
.simple p,.simple li{color:var(--encre2);margin-bottom:12px}.simple ul{padding-left:22px}
.simple a{color:var(--orange-t)}
.simple .todo{background:#fff3cd;border-left:4px solid #b8860b;padding:12px 16px;color:#5c4400}

/* Apparitions */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.in{opacity:1;transform:none}

@view-transition{navigation:auto}
.entete{view-transition-name:entete}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .titre-geant .l,.js .panneau:not([hidden]){animation:none!important}
  .js .rv{opacity:1;transform:none;transition:none}
  .btn,.btn::after,.carte,.bloc,.puces .curseur{transition:none!important}
  .btn:hover,.carte:hover{transform:none}
  .deuxh{height:auto}.deuxh .colle{position:relative;height:auto;padding:90px 0}.bloc{opacity:1;transform:none}.b-enligne{transform:translate(-50%,-50%)}
}

.tete .h2{font-size:clamp(40px,5.2vw,78px)}
.deuxh .colle{padding-top:76px}
.montage{width:min(300px,70vw)}
@media(max-width:900px){.etapes li span{max-height:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.etapes li span{max-height:none;opacity:1;transition:none}}
.b-titre{top:13%;font-size:26px}
.b-verif{top:46px;left:auto;right:12px;z-index:4;background:#0a5bd8;color:#fff;border-radius:999px;padding:6px 11px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:6px;transform:translateY(-8px) scale(.9)}
.b-verif.vu{transform:none}
.titre-geant{font-size:clamp(42px,11.2vw,188px)}
.entete nav a.appel{white-space:nowrap}
@media(max-width:560px){.entete nav a.appel{padding:9px 13px;font-size:11px}.reperes{gap:18px 26px}.reperes b{font-size:28px}}
.haut{contain:paint}
html{overflow-x:hidden}
.b-enligne{top:auto;bottom:158px;transform:translate(-50%,0) scale(.6)}.b-enligne.vu{transform:translate(-50%,0) scale(1)}@media(max-width:900px){.b-enligne{transform:translate(-50%,0)}}@media(prefers-reduced-motion:reduce){.b-enligne{transform:translate(-50%,0)}}

/* Liens vers la maison sœur (Rampe) : discrets, au bon endroit. */
.soeur{margin-top:18px;font-size:15px;color:var(--gris-n)}
.soeur a,.vers-rp a{color:var(--creme);text-decoration-color:#8db8ff;text-decoration-thickness:2px;text-underline-offset:4px}
.soeur a:hover{color:#8db8ff}
.vers-rp{margin-top:8px}.vers-rp a{color:var(--encre);text-decoration-color:#0a5bd8}
.questions details a{color:var(--orange-t)}
.maison{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;padding-top:22px;border-top:1px solid var(--trait-n)}
.maison .mono{font-size:11px;margin-right:6px;color:var(--gris-n)}
.maison a,.maison>span{display:inline-flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--creme);font-size:15px}
.maison b{font-family:var(--disp);font-weight:880;font-stretch:115%;letter-spacing:-.03em;font-size:18px}
.maison span span{color:var(--gris-n);font-size:14px}
.maison i{width:8px;height:8px;border-radius:50%;display:inline-block;align-self:center}
.maison .m-ew i{background:var(--orange)}.maison .m-rp i{background:#8db8ff}
.maison .m-rp em{font-style:normal;font-family:var(--mono);transition:transform .3s var(--ease)}
.maison .m-rp:hover b{color:#8db8ff}.maison .m-rp:hover em{transform:translateX(4px)}
.maison .m-dg i{background:#d9a441}.maison .m-dg em{font-style:normal;font-family:var(--mono);transition:transform .3s var(--ease)}
.maison .m-dg:hover b{color:#d9a441}.maison .m-dg:hover em{transform:translateX(4px)}
.puces{scroll-margin-top:110px}

/* Offre de lancement (retirée par le worker après le 1er octobre 2026 à 23:59) */
.offre-pill{position:fixed;left:16px;bottom:16px;z-index:95;display:flex;align-items:flex-start;gap:12px;max-width:min(560px,calc(100% - 32px));padding:14px 14px 14px 18px;border-radius:14px;background:#15141a;color:#f4f2ee;font-size:15px;line-height:1.45;box-shadow:0 18px 40px -18px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.12)}
.offre-pill b{color:#f0532a}
.offre-pill .offre-x{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:transparent;color:inherit;font-size:20px;line-height:1;cursor:pointer}
.offre-pill .offre-x:hover{background:rgba(255,255,255,.1)}
@media print{.offre-pill{display:none}}
.maison .m-pl i{background:#b69cff}.maison .m-pl em{font-style:normal;font-family:var(--mono);transition:transform .3s var(--ease)}.maison .m-pl:hover b{color:#b69cff}.maison .m-pl:hover em{transform:translateX(4px)}

/* Mot-marque : le E habité tient lieu de premier e, calé sur la ligne de base, hauteur des capitales. */
.marque{gap:0;align-items:baseline}.marque-e{display:inline-block;flex:none;height:.9em;width:.692em;margin-right:.05em;transform:translateY(.035em)}.marque-e svg{display:block;width:100%;height:100%}
.marque-mot{display:inline-flex;align-items:center;gap:3px}
@media(max-width:430px){.entete .marque{font-size:17px}}
/* Pages métier (/restaurant, /plombier…) : générées par outil/construire.mjs, textes dans outil/textes-metiers.json */
.vers-page{margin-top:30px}
.ariane{font-family:var(--mono);font-size:12px;letter-spacing:.08em;margin-bottom:28px}
.ariane ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.ariane li+li::before{content:"/";margin-right:8px;color:var(--gris-n)}
.ariane a{color:#d6d0c3;text-underline-offset:3px}.ariane a:hover{color:#fff}
.ariane [aria-current]{color:var(--creme)}
.m-haut{padding:120px 0 72px}
.m-haut .wrap{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(30px,5vw,72px);align-items:end}
.m-h1{font-family:var(--disp);font-weight:900;font-stretch:112%;letter-spacing:-.04em;line-height:.96;font-size:clamp(36px,4.6vw,70px);margin:16px 0 24px;text-wrap:balance;max-width:16ch}
.m-haut .lead{color:#d6d0c3}
.m-haut .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.m-haut .reperes{margin-top:34px}
.m-photo{border-radius:22px;overflow:hidden;aspect-ratio:4/5;box-shadow:0 50px 90px -40px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.08)}
.m-photo img{width:100%;height:100%;object-fit:cover}
.m-sec{padding:clamp(72px,11vh,120px) 0}
.m-sec .h2{font-size:clamp(34px,4.6vw,66px)}
.m-liste{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:44px}
.m-liste li{padding:26px 24px;border-radius:20px;border:1px solid var(--trait);background:#faf7f0}
.m-liste h3,.m-cherche h3{font-family:var(--disp);font-weight:820;font-size:21px;letter-spacing:-.015em;line-height:1.15;margin-bottom:8px}
.m-liste p{color:var(--encre2);font-size:16px}
.m-outil{margin-top:26px;padding-left:16px;border-left:3px solid var(--orange);color:var(--encre2);max-width:70ch}
.m-cherche ol{list-style:none;counter-reset:c;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px}
.m-cherche li{counter-increment:c;padding-top:18px;border-top:1px solid var(--trait-n)}
.m-cherche li::before{content:counter(c,decimal-leading-zero);display:block;font-family:var(--mono);font-size:12px;color:var(--orange);margin-bottom:10px}
.m-cherche p{color:#c9c3b6;font-size:16px}
.m-exemple .tete{margin-bottom:24px}
.etiq-ex{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:34px;font-size:15px;color:var(--encre2)}
.etiq-ex span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;background:var(--noir);color:var(--creme);padding:6px 11px;border-radius:999px}
.page-metier .questions .h2{font-size:clamp(34px,4.2vw,60px)}
.m-plus{margin-top:22px}.m-plus a{color:var(--orange-t);font-weight:700}
.m-autres{padding:56px 0;border-top:1px solid var(--trait)}
.m-autres ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.m-autres a{display:inline-flex;align-items:center;min-height:44px;padding:10px 20px;border-radius:999px;border:1.5px solid var(--trait);color:var(--encre);text-decoration:none;font-weight:700;transition:border-color .2s}
.m-autres a:hover{border-color:var(--encre)}
.m-autres a.m-accueil{background:var(--noir);color:var(--creme);border-color:var(--noir)}
@media(max-width:900px){.m-haut .wrap{grid-template-columns:1fr}.m-photo{aspect-ratio:16/10}.m-cherche ol{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.m-autres a{transition:none}}
/* le texte reste dans la moitié gauche, sur la silhouette : jamais sur le téléphone */
@media(min-width:761px){.haut-v .oeil,.hv-titre,.haut-v .haut-bas>div:first-child{max-width:min(560px,40vw)}.haut-v .lead{font-size:17px}}
@keyframes ft-defile{from{transform:translateY(0)}to{transform:translateY(calc(-100% + 46vh))}} /* sur fond clair, les téléphones restent un murmure */
@media(max-width:760px){.fond-tels{grid-template-columns:repeat(3,1fr)}.ft-col:nth-child(n+4){display:none}}
/* Écran bas (zoom fort, petit téléphone) ou mouvement réduit : pas de scène collante, rien n'est rogné. */
@media(max-height:680px),(prefers-reduced-motion:reduce){.maison-s{height:auto}.maison-colle{position:relative;height:auto;padding:90px 0;overflow:visible}}

/* « En ligne en 2 heures » sur téléphone (03/10) : la scène reste collée ; horloge à gauche, téléphone qui se monte à
   droite (réduit), seule l'étape en cours sous l'horloge. Mouvement réduit : tout reste affiché, sans scène collante. */
@media(max-width:900px) and (prefers-reduced-motion:no-preference){
  .js .deuxh{height:340vh}
  .js .deuxh .colle{position:sticky;top:0;height:100vh;height:100svh;padding:88px 0 20px;align-items:center}
  .js .deuxh .grille{grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:start}
  .js .horloge{font-size:clamp(60px,19vw,96px)}
  .js .deuxh .etapes li{display:none;border-top:0;padding:4px 0}
  .js .deuxh .etapes li.la{display:grid}
  .js .deuxh .etapes li.la span{max-height:none;opacity:1}
  .js .deuxh .note{font-size:12px;margin-top:10px}
  .js .montage{zoom:.44;margin-top:30px}
  .js .deuxh .bloc{opacity:0;transform:translateY(10px) scale(.96)}
  .js .deuxh .bloc.vu{opacity:1;transform:none}
  .js .deuxh .b-enligne{transform:translate(-50%,0) scale(.6)}.js .deuxh .b-enligne.vu{transform:translate(-50%,0) scale(1)}
}

/* Audit accessibilité du 03/10 (corrections) */
html{scroll-padding-top:120px;scroll-padding-bottom:120px} /* en-tête fixe, bulle et bandeau ne masquent jamais le focus */
/* Accueil 1100-1366 px : la colonne de lettres rétrécit la page ; le texte reste à gauche du téléphone, sur un voile. */
@media(min-width:1100px) and (max-width:1366px){.haut-v .oeil,.hv-titre,.haut-v .haut-bas>div:first-child{max-width:calc(45vw - 170px)}.hv-titre{font-size:clamp(36px,3.9vw,72px)}}
.etapes li::before{color:#a39e92}
.etapes li.la span{max-height:120px}
/* Horloge mobile : les étapes non atteintes restent lisibles par les lecteurs d'écran (masquées à l'œil seulement). */
@media(max-width:900px) and (prefers-reduced-motion:no-preference){
  .js .deuxh .etapes li:not(.la){display:grid;position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);padding:0;border:0;white-space:nowrap}
}
/* Écran bas (zoom fort) : pas de scène collante pour les 2 heures, rien n'est rogné. */
@media(max-height:720px){.js .deuxh{height:auto}.js .deuxh .colle{position:relative;height:auto;padding:90px 0;overflow:visible}.js .deuxh .etapes li:not(.la){position:static;width:auto;height:auto;clip:auto;white-space:normal}.js .deuxh .bloc{opacity:1;transform:none}.etapes li span{max-height:none;opacity:1}}
.anim-gelees #bulle *{animation:none!important}

/* La maison Everywhere : bloc famille commun aux quatre sites */
/* Écrit par outils-lancement/brancher-famille.mjs jusqu'à la FIN du fichier et réécrit à chaque passage : les réglages propres au site vont AVANT ce bloc. */
.famille{grid-column:1/-1;margin-top:8px;padding:28px 0 6px;border-top:1px solid color-mix(in srgb,currentColor 16%,transparent)}
.fam-tete{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-bottom:22px}
.fam-ref{display:inline-flex;align-items:flex-end;gap:14px;text-decoration:none;color:inherit}
.fam-portes{display:inline-flex;align-items:flex-end;gap:5px}
.fam-portes svg{display:block}
.fam-mot{font-family:'Anybody',system-ui,sans-serif;font-weight:880;font-stretch:118%;letter-spacing:-.045em;font-size:30px;line-height:.9}
.fam-mot i{font-style:normal;color:#f0532a}
.fam-tete p{max-width:46ch;font-size:15px;line-height:1.5;opacity:.8}
.fam-tete p b{display:block;font-family:'Space Mono',ui-monospace,monospace;font-weight:400;font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.9;margin-bottom:2px}
.fam-cartes{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:0;margin:0}
.fam-carte a,.fam-carte.fam-ici{position:relative;display:flex;align-items:flex-end;gap:14px;height:100%;padding:16px 16px 14px;border-radius:16px;text-decoration:none;color:inherit;border:1px solid color-mix(in srgb,currentColor 14%,transparent);background:color-mix(in srgb,currentColor 4%,transparent);transition:border-color .3s,background-color .3s,transform .3s cubic-bezier(.2,.75,.2,1)}
.fam-carte a:hover,.fam-carte a:focus-visible{border-color:var(--fam-c);background:color-mix(in srgb,var(--fam-c) 10%,transparent);transform:translateY(-3px)}
.fam-carte.fam-ici{border-color:var(--fam-c);background:color-mix(in srgb,var(--fam-c) 12%,transparent)}
.fam-carte svg{flex:none;display:block;transition:transform .35s cubic-bezier(.2,.75,.2,1)}
.fam-carte a:hover svg{transform:translateY(-3px)}
.fam-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.fam-txt b{font-family:'Anybody',system-ui,sans-serif;font-weight:860;font-stretch:112%;letter-spacing:-.035em;font-size:25px;line-height:1.05;margin-bottom:4px}
.fam-txt>span{font-size:14px;line-height:1.35;opacity:.85}
.fam-txt small{font-family:'Space Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.7;margin-top:4px}
.fam-ici small{opacity:1;color:var(--fam-c)}
.fam-carte em{position:absolute;right:14px;top:12px;font-style:normal;font-family:'Space Mono',ui-monospace,monospace;opacity:.6;transition:transform .3s,opacity .3s}
.fam-carte a:hover em{transform:translateX(3px);opacity:1}
@media(max-width:980px){.fam-cartes{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fam-cartes{grid-template-columns:1fr}.fam-mot{font-size:24px}.fam-portes svg{width:18px;height:auto}}
@media(prefers-reduced-motion:reduce){.fam-carte a,.fam-carte svg{transition:none}.fam-carte a:hover,.fam-carte a:hover svg{transform:none}}

/* Mot-marque des maisons : la lettre habitée tient lieu d'initiale */
.mm{display:inline-flex;flex-direction:column;align-items:flex-start;gap:5px;line-height:1}
.mm-nom{display:inline-flex;align-items:baseline;white-space:nowrap}
.mm-l{display:inline-block;flex:none;height:.865em;margin-right:.045em;transform:translateY(.035em)}
.mm-l svg{display:block;height:100%;width:auto;overflow:visible}
.mm-E{width:.658em}.mm-R{width:0.975em}.mm-D{width:0.989em}.mm-P{width:0.945em}
.mm-pt{font-style:normal;color:#f0532a}
.mm-lu{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mm-by{display:inline-flex;align-items:baseline;font-family:'Space Mono',ui-monospace,monospace;font-weight:400;font-stretch:100%;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.62;white-space:nowrap}
.mm-by .mm-l{height:.72em;margin:0 .02em 0 .5em;transform:translateY(.02em)}
.mm-by .mm-E{width:.547em}
.famille{color:#f4efe6}

/* Bandeau des maisons dans l’en-tête sombre (04/10). */
.entete{--mx-encre:#f3efe6}

/* Clients livrés (06/10) : de vrais sites en ligne, dans leurs écrans ; nos maisons en dessous, en plus petit. */
.livres-s{padding:clamp(90px,14vh,150px) 0}
.livres{list-style:none;margin:0;padding:0;display:grid;gap:clamp(64px,10vh,110px)}
.livre-client{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.livre-client:nth-child(even) .scene-m{order:2}
.livre-t h3,.livre-t h4{font-family:var(--disp);font-weight:860;font-stretch:115%;font-size:clamp(30px,3.4vw,44px);letter-spacing:-.025em;line-height:1}
.livre-t p{color:var(--encre2);font-size:17px;margin-top:12px;max-width:44ch}
.livre-t .livre-m{font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-t);margin-top:10px}
.livre-t .livre-q{font-size:15px;padding-left:12px;border-left:2px solid var(--orange)}
.livre-t a{color:var(--encre);font-weight:700;text-underline-offset:3px}
.livres-sous{font-family:var(--disp);font-weight:820;font-size:clamp(22px,2.4vw,28px);letter-spacing:-.015em;margin:clamp(80px,12vh,130px) 0 28px;padding-top:28px;border-top:1px solid var(--trait)}
.livres-maisons{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,40px)}
.livres-maisons .ordi{padding:9px 9px 0;border-radius:12px 12px 6px 6px}
.livres-maisons .ordi::after{bottom:-10px;height:10px}
.livres-maisons .livre-t{margin-top:30px}
.livres-maisons .livre-t h4{font-size:24px}
.livres-maisons .livre-t p{font-size:15px}
/* Darminator (07/10, Flavien : « dans le fil clients mais dissimulé à la suite des autres ») : petite carte, en fin de liste. */
.livre-discret{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:clamp(20px,3vw,36px);align-items:center;max-width:820px}
.livre-discret .ordi{padding:7px 7px 0;border-radius:10px 10px 5px 5px}.livre-discret .ordi::after{bottom:-8px;height:8px}
.livre-discret .livre-t h3{font-size:22px}.livre-discret .livre-t p{font-size:15px;margin-top:8px}
@media(max-width:700px){.livre-discret{grid-template-columns:1fr;max-width:340px}}
.livres-s .vt-mention{margin-top:clamp(48px,7vh,72px);color:var(--encre2)}
.livres-s .vt-mention a{color:var(--orange-t);font-weight:700}
.sf-haut .wrap{grid-template-columns:1fr}
@media(max-width:900px){.livre-client{grid-template-columns:1fr}.livre-client:nth-child(even) .scene-m{order:0}.livres-maisons{grid-template-columns:1fr}}

/* Démonstrations « effet waouh » (06/10) : quatre cartes, la vignette prend la largeur, le texte dessous. */
.demos-s{background:var(--noir);color:var(--creme)}
.demos-s .lead,.demos-s .oeil{color:#c9c3b6}
.demos{list-style:none;margin:clamp(28px,5vh,44px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.demo a{display:block;color:inherit;text-decoration:none;border-radius:18px;overflow:hidden;background:var(--noir2);border:1px solid var(--trait-n);transition:transform .35s var(--ease),border-color .25s}
.demo a:hover,.demo a:focus-visible{transform:translateY(-4px);border-color:var(--orange)}
.demo img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.demo-t{display:grid;gap:6px;padding:18px 20px 22px}
.demo-t b{font-family:var(--disp);font-weight:860;font-stretch:115%;font-size:26px;letter-spacing:-.02em}
.demo-t .demo-m{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--orange)}
.demo-t span{font-size:16px;color:#d8d2c5}
.demo-t .demo-o{margin-top:6px;font-weight:700;color:var(--creme);text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){.demos{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.demo a{transition:none}}

/* Les 2 heures : la plage horaire de chaque étape, en petit (07/10). */
.etapes .plage{display:block;margin-top:2px;font-family:var(--mono);font-style:normal;font-size:12px;letter-spacing:.06em;color:#a39e92}
.etapes li.la .plage{color:var(--orange)}

/* « by EVERYWHERE » en lettres vidéo sous le nom de nos maisons (07/10, Flavien). */
.livre-by{display:flex;align-items:center;gap:8px;margin:6px 0 4px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--encre2)}
.livre-by .nv{--nv-h:24px;filter:none}

/* Logo d'actualité (lancement/visuels/identite/actualite/CALENDRIER.md) : le point devient le symbole de l'événement ;
   une pastille discrète sous le logo dit pourquoi. Posés par construire.mjs pendant la période seulement. */
.entete .wrap{position:relative}
.nv-point.nv-symbole{width:13px;height:18px;border-radius:0;margin:0 0 1px 5px;background:var(--symbole) center/contain no-repeat}
.marque:has(.nv-symbole) .nv-v{filter:none}
.entete .actualite{position:absolute;left:0;top:calc(100% - 8px);margin:0;padding:5px 11px;border-radius:999px;background:rgba(13,13,11,.72);border:1px solid rgba(255,150,196,.28);font-family:var(--mono);font-size:11px;letter-spacing:.04em;line-height:1.3;color:#ffc2da;pointer-events:none}
.entete .actualite .court{display:none}
/* Jusqu'à 1 200 px : la pastille ne doit pas couvrir le titre de l'accueil ; seul « Octobre rose » se voit, au ras du
   logo, la phrase reste lue par les lecteurs d'écran. */
@media(max-width:1200px){.entete .actualite{font-size:10px;padding:2px 9px;top:calc(50% + 17px)}.entete .actualite .long{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.entete .actualite .court{display:inline}}