/* ==========================================================================
   BE IA — page d'accueil (le propre à index.html ; le socle est dans commun.css)
   ========================================================================== */

/* ---------- 1. bandeau + démo « devis » ---------- */
.hero{overflow:hidden}
.hero-in{position:relative;z-index:1;padding-block:clamp(34px,5vw,64px) clamp(44px,5.5vw,72px)}
.hero .tape{z-index:1}
.hero-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:end}
.hero h1{font-size:clamp(2.7rem,5.7vw,5.2rem);line-height:.93}
.hero h1 .ln{display:block}
.hero h1 .signal{color:var(--signal)}
.hero-texte .lead{max-width:520px;margin-bottom:28px}
.cta-row{display:flex;flex-wrap:wrap;gap:16px 18px;align-items:center}
.hero-texte .fine{margin-top:22px}
.hero-demo{margin-top:clamp(30px,4.2vw,52px)}
.hero-demo>.cote{margin-bottom:14px}
.cote b[data-compte]{min-width:5.4ch;text-align:center;font-variant-numeric:tabular-nums}
.demo-legende{margin-top:clamp(18px,2.4vw,28px);text-align:center;font:800 clamp(1.45rem,3.2vw,2.35rem)/1.1 var(--f-titre);text-transform:uppercase;letter-spacing:.01em;color:var(--blanc);text-wrap:balance}
.demo-legende span{color:var(--signal)}
@media (max-width:900px){
  .hero-head{grid-template-columns:minmax(0,1fr);align-items:start}
  .hero-texte .lead{max-width:none}
}

/* ---------- replis statiques des démos (visibles sans JS, remplacés par demos.js) ---------- */
.bi-demo{min-width:0}
.dark .bi-demo{color:var(--sur-nuit)}
.light .bi-demo{color:var(--texte)}
.repli{display:grid;gap:12px;padding:clamp(16px,2.6vw,28px);border:1px solid var(--trait);background:var(--blanc);color:var(--texte);border-radius:6px;font-size:15.5px;line-height:1.5}
.dark .repli{border-color:var(--trait-nuit);background:rgba(20,48,95,.55);color:var(--sur-nuit)}
.repli-q,.repli-r{max-width:92%;padding:11px 15px;border-radius:10px;margin:0}
.repli-q{justify-self:end;background:var(--nuit);color:#fff;border-radius:10px 10px 2px 10px}
.dark .repli-q{background:var(--nuit-3)}
.repli-r{justify-self:start;background:var(--papier);color:var(--texte);border:1px solid var(--trait);border-radius:2px 10px 10px 10px}
.dark .repli-r{background:var(--blanc);border-color:var(--blanc)}
.repli-etiq{font:500 11px/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--texte-doux)}
.dark .repli-etiq{color:var(--sur-nuit-doux)}
.repli-liste{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.repli-liste li{font:500 12.5px/1 var(--f-mono);padding:7px 10px;background:var(--papier);color:var(--texte);border:1px solid var(--trait);border-radius:2px}
.dark .repli-liste li{background:rgba(253,254,255,.08);border-color:var(--trait-nuit);color:var(--sur-nuit)}
.repli-carte{padding:12px 15px;background:var(--papier);color:var(--texte);border-left:4px solid var(--encre);border-radius:2px;margin:0}
.dark .repli-carte{background:var(--blanc);border-left-color:var(--signal)}
.repli-carte b{display:block;font-weight:600}
.repli-barre{text-decoration:line-through;color:var(--texte-doux)}
.repli-mail{max-width:100%;padding:14px 17px;background:var(--blanc);color:var(--texte);border:1px solid var(--trait);border-radius:2px;display:grid;gap:8px}
.repli-btn{display:inline-block;font:600 13px/1 var(--f-texte);padding:11px 18px;background:var(--encre);color:#fff;border-radius:3px}
.dark .repli-btn{background:var(--signal);color:var(--nuit)}

/* ---------- 2. problème ---------- */
.prob-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,72px);align-items:end;margin-bottom:clamp(36px,5vw,60px)}
.prob-head .txt{font-size:1.12rem;max-width:560px}
.tags{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.tag{--notch:92px;position:relative;background:var(--blanc);border-radius:2px;color:var(--texte);
  -webkit-mask:radial-gradient(circle 11px at 0 var(--notch),#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 11px at 100% var(--notch),#0000 97%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 11px at 0 var(--notch),#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle 11px at 100% var(--notch),#0000 97%,#000) right/51% 100% no-repeat}
.tag-top{height:var(--notch);display:flex;align-items:center;justify-content:space-between;padding:0 26px;border-bottom:2px dashed var(--trait-2);position:relative}
.tag-top::before{content:"";position:absolute;top:13px;left:50%;width:15px;height:15px;margin-left:-7px;border-radius:50%;background:var(--pierre);box-shadow:inset 0 2px 3px rgba(12,29,61,.35)}
.tag-top svg{width:62px;height:62px;stroke:var(--texte);fill:none;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter}
.tag-top svg .y{fill:var(--encre-douce)}
.tag-top .cote{width:90px;--cote:#5d6d86}
.tag-body{padding:24px 26px 20px}
.tag h3{font-size:2.15rem;margin-bottom:10px;font-weight:800}
.tag p{color:var(--texte-doux);font-size:16px}
.tag-code{height:20px;margin:0 26px 22px;background:repeating-linear-gradient(90deg,var(--texte) 0 2px,transparent 2px 4px,var(--texte) 4px 5px,transparent 5px 9px,var(--texte) 9px 12px,transparent 12px 14px)}
@media (max-width:900px){.prob-head{grid-template-columns:1fr}.tags{grid-template-columns:1fr;max-width:520px}}

/* ---------- 6. solution ---------- */
.sol-top{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:center;margin-bottom:clamp(44px,6vw,80px)}
.sol-top .lead{margin-top:22px}
.note-claude{border-left:4px solid var(--encre);padding:4px 0 4px 16px;font-weight:500;color:var(--texte);font-size:16px;margin-top:26px}
.fict{font:500 12.5px/1.45 var(--f-mono);color:var(--texte-doux);margin-top:14px;letter-spacing:.01em}
.mods{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(20px,2.6vw,36px)}
.mods li{padding:22px 0 26px;border-top:1px solid var(--trait-2);position:relative}
.mods li::before{content:"";position:absolute;left:0;top:-2px;width:34px;height:3px;background:var(--encre)}
.mods svg{width:30px;height:30px;stroke:var(--encre);fill:none;stroke-width:1.7;stroke-linecap:square;stroke-linejoin:miter;margin-bottom:14px;display:block}
.mods strong{display:block;font:700 1.45rem/1.05 var(--f-titre);text-transform:uppercase;letter-spacing:.01em;margin-bottom:8px;color:var(--texte)}
.mods span{display:block;font-size:15.5px;line-height:1.5;color:var(--texte-doux)}
@media (max-width:1000px){.sol-top{grid-template-columns:1fr}.mods{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .mods{grid-template-columns:1fr}
  .mods li{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:14px;padding:18px 0 20px}
  .mods svg{grid-row:1/3;margin:2px 0 0}
  .mods strong{font-size:1.35rem;margin-bottom:5px}
}

/* fenêtre de logiciel dessinée (planning) */
.win{background:var(--blanc);color:var(--texte);border-radius:8px;border:1px solid var(--nuit-0);overflow:hidden;font:400 12px/1.35 var(--f-texte);box-shadow:0 34px 60px -26px rgba(12,29,61,.55);min-width:0}
.win *{min-width:0}
.win-bar{display:flex;align-items:center;gap:6px;padding:8px 11px;background:var(--pierre-2);border-bottom:1px solid var(--trait)}
.win-bar .sq{width:9px;height:9px;background:var(--trait-2);border-radius:1px}
.win-title{margin-left:8px;font:500 11px/1 var(--f-mono);color:#3f4f69;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win-body{display:grid;grid-template-columns:150px minmax(0,1fr)}
.win-side{background:var(--nuit);color:var(--sur-nuit);padding:10px 7px;display:flex;flex-direction:column;gap:2px}
.side-logo{font:800 17px/1 var(--f-titre);letter-spacing:.04em;color:#fff;padding:4px 9px 12px;text-transform:uppercase}
.side-logo b{background:var(--signal);color:var(--nuit);padding:1px 4px 0;margin-left:3px;font-weight:800}
.si{display:flex;gap:9px;align-items:center;padding:7px 9px;border-radius:3px;font-size:12px;white-space:nowrap}
.si svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:square;stroke-linejoin:miter;flex:none}
.si.on{background:var(--signal);color:var(--nuit);font-weight:600}
.win-main{padding:14px 15px 15px;display:flex;flex-direction:column;gap:12px;container-type:inline-size}
.w-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.w-head>div:first-child{min-width:0;flex:1}
.w-h1{font:700 19px/1 var(--f-titre);text-transform:uppercase;letter-spacing:.02em}
.w-sub{color:var(--texte-doux);font-size:11.5px;margin-top:4px}
.chip{flex:none;display:inline-block;font:500 10.5px/1 var(--f-mono);padding:5px 7px;border-radius:99px;background:var(--pierre-2);color:#33425c;white-space:nowrap}
.chip.k{background:var(--nuit);color:var(--sur-nuit)}
.pl-grid{border:1px solid var(--trait);border-radius:3px;overflow:hidden}
.pl-days,.pl-row{display:grid;grid-template-columns:118px repeat(5,minmax(0,1fr))}
.pl-days{background:var(--pierre);font:500 10px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.05em;color:#3f4f69}
.pl-days span{padding:7px 6px;border-left:1px solid var(--trait)}
.pl-days span:first-child{border-left:0}
.pl-row{border-top:1px solid var(--trait);min-height:40px;align-items:center;background-image:linear-gradient(90deg,transparent 0,transparent calc(118px - 1px),var(--trait) calc(118px - 1px),var(--trait) 118px)}
.pl-lab{padding:6px 8px;font-size:11px;font-weight:600;line-height:1.25}
.pl-bars{grid-column:2/-1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px 0;padding:5px 0;background-image:repeating-linear-gradient(90deg,transparent 0 calc(20% - 1px),var(--pierre-2) calc(20% - 1px) 20%)}
.pb{margin:0 3px;padding:6px 7px;border-radius:2px;background:var(--nuit);color:var(--sur-nuit);font-size:10.5px;line-height:1.2;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pb.m{background:var(--nuit-3)}
.pb.y{background:var(--signal);color:var(--nuit);font-weight:600}
.pb.o{background:transparent;border:1.5px dashed var(--trait-2);color:var(--texte-doux)}
.tasks{display:grid;gap:7px}
.tasks div{display:flex;gap:9px;align-items:center;font-size:11.5px}
.tasks i{flex:none;width:13px;height:13px;border:1.5px solid var(--texte);display:grid;place-items:center}
.tasks i.ok{background:var(--encre);border-color:var(--encre)}
.tasks i.ok::after{content:"";width:6px;height:3px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg) translate(0,-1px)}
.tasks .done{color:var(--texte-doux);text-decoration:line-through}
@media (max-width:560px){
  .win-body{grid-template-columns:42px minmax(0,1fr)}
  .si span{display:none}
  .side-logo{display:none}
  .si{justify-content:center;padding:9px 0}
  .win-main{padding:11px 10px 12px}
  .w-h1{font-size:17px}
}
@container (max-width:420px){
  .pl-days,.pl-row{grid-template-columns:repeat(5,minmax(0,1fr))}
  .pl-days span:first-child{display:none}
  .pl-row{display:block;background-image:none}
  .pl-lab{padding:7px 7px 0;font-size:10.5px}
  .pl-bars{grid-column:auto}
}

/* ---------- 7. il grandit avec vous ---------- */
.grow{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:center}
.grow .lead{margin-top:24px;max-width:540px}
.evo{display:grid;grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr);align-items:center;gap:0}
.panel{background:var(--blanc);color:var(--texte);border:1px solid var(--nuit-0);border-radius:6px;padding:14px 14px 16px;font-size:12px;line-height:1.3;min-width:0}
.panel.try{border:2px dashed var(--signal);background:var(--nuit-2);color:var(--sur-nuit)}
.panel h4{margin:0 0 11px;font:500 10.5px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.06em;color:#3f4f69}
.panel.try h4{color:var(--signal)}
.panel div.m{display:flex;gap:8px;align-items:center;padding:7px 0;border-top:1px solid var(--trait)}
.panel.try div.m{border-color:rgba(232,238,248,.16)}
.panel div.m i{flex:none;width:9px;height:9px;background:var(--nuit);border-radius:1px}
.panel.try div.m i{background:var(--sur-nuit-doux)}
.panel div.m.new{background:var(--signal);color:var(--nuit);font-weight:600;margin:4px -8px 0;padding:8px;border-radius:2px;border:0}
.panel div.m.new i{background:var(--nuit)}
.evo-mid{display:flex;flex-direction:column;align-items:center;gap:14px}
.evo-mid svg.arr{width:64px;height:20px;stroke:rgba(232,238,248,.65);fill:none;stroke-width:1.6;stroke-linecap:square}
.sw{display:flex;flex-direction:column;align-items:center;gap:6px;font:500 10.5px/1.1 var(--f-mono);text-transform:uppercase;letter-spacing:.05em;color:var(--sur-nuit);text-align:center}
.sw i{width:46px;height:24px;border:2px solid var(--signal);border-radius:99px;position:relative;background:rgba(143,176,245,.16)}
.sw i::after{content:"";position:absolute;right:3px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--signal)}
.undo{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font:500 11px/1.1 var(--f-mono);color:var(--sur-nuit);text-transform:uppercase;letter-spacing:.05em}
.undo svg{width:18px;height:18px;stroke:var(--signal);fill:none;stroke-width:1.8;stroke-linecap:square}
.evo-foot{grid-column:1/-1;margin-top:20px;display:flex;justify-content:center}
@media (max-width:980px){.grow{grid-template-columns:1fr}}
@media (max-width:620px){
  .evo{grid-template-columns:1fr}
  .evo-mid{flex-direction:row;justify-content:center;padding:16px 0}
  .evo-mid svg.arr{transform:rotate(90deg);width:40px}
}

/* ---------- 8. comment ça se passe ---------- */
.steps{list-style:none;margin:clamp(36px,5vw,60px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;position:relative}
.steps li{position:relative;padding:34px 22px 10px 0}
.steps li::before{content:"";position:absolute;left:0;right:0;top:20px;height:2px;background:var(--texte);transform:scaleX(var(--s,1));transform-origin:left center}
.steps li:last-child::before{right:auto;width:60%}
.steps li::after{content:"";position:absolute;left:0;top:9px;width:2px;height:24px;background:var(--texte)}
.step-n{display:inline-grid;place-items:center;width:58px;height:58px;background:var(--encre);color:#fff;border:2px solid var(--texte);font:800 2.3rem/1 var(--f-titre);margin-bottom:16px;position:relative;z-index:1;margin-top:-4px}
.steps h3{font-size:1.8rem;margin-bottom:8px;font-weight:800}
.steps p{font-size:16px;padding-right:6px;color:var(--texte-doux)}
@media (max-width:900px){
  .steps{grid-template-columns:1fr;max-width:560px}
  .steps li{padding:0 0 30px 84px;min-height:84px}
  .steps li::before{left:28px;right:auto;top:58px;bottom:0;width:2px;height:auto;transform:scaleY(var(--s,1));transform-origin:center top}
  .steps li:last-child::before{display:none}
  .steps li::after{display:none}
  .step-n{position:absolute;left:0;top:0;margin:0}
}

/* ---------- 9. garanties : voir le bloc V3 en fin de fichier ---------- */
.guar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-top:clamp(32px,5vw,56px)}
@media (max-width:1050px){.guar{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.guar{grid-template-columns:1fr}}

/* ---------- 10. preuve ---------- */
.proof{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,5vw,72px);align-items:center;padding-left:clamp(34px,4vw,66px)}
.proof h2{font-size:clamp(2.2rem,5.2vw,4.4rem);max-width:15em}
.proof .fine{margin-top:18px;font-size:14px}
.proof-ico{display:flex;gap:18px}
.proof-ico div{width:96px;height:112px;border:2px solid var(--texte);background:var(--blanc);display:grid;place-items:center;position:relative}
.proof-ico div::before{content:"";position:absolute;left:-2px;right:-2px;top:-2px;height:10px;background:var(--texte)}
.proof-ico svg{width:54px;height:54px;stroke:var(--texte);fill:none;stroke-width:1.8;stroke-linecap:square;margin-top:6px}
@media (max-width:760px){.proof{grid-template-columns:1fr}.proof-ico div{width:76px;height:90px}.proof-ico svg{width:42px;height:42px}}

/* ---------- 11. vidéo ---------- */
.vid-head{max-width:760px;margin-bottom:clamp(28px,4vw,48px)}
.player{position:relative;aspect-ratio:16/9;background:var(--nuit-0);border:1px solid var(--trait-nuit);overflow:hidden;max-width:1040px;margin-inline:auto;border-radius:4px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.player .plan{position:absolute;inset:0;opacity:.85}
.player-fond{position:absolute;inset:0;display:grid;place-items:center;padding-bottom:6%}
.player-fond .logo{font-size:clamp(54px,12vw,128px);padding-bottom:0;letter-spacing:.02em}
.player-fond .logo b{padding:0 .12em;margin-left:.09em}
.player-fond .cote{position:absolute;left:5%;right:5%;bottom:17%}
.player video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;background:transparent}

/* ---------- 12. FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(28px,5vw,80px);align-items:start}
.faq-grid>div:first-child{position:sticky;top:96px}
.faq details{border-top:2px solid var(--texte)}
.faq details:last-child{border-bottom:2px solid var(--texte)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;cursor:pointer;font:600 1.15rem/1.3 var(--f-texte);color:var(--texte)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:30px;height:30px;border:2px solid var(--texte);background:linear-gradient(var(--texte),var(--texte)) center/12px 2px no-repeat,linear-gradient(var(--texte),var(--texte)) center/2px 12px no-repeat;border-radius:2px;transition:transform .4s cubic-bezier(.2,.9,.3,1.2),background-color .25s,border-color .25s}
.faq details[open]:not([data-etat="ferme"]) summary::after{background:linear-gradient(#fff,#fff) center/12px 2px no-repeat,linear-gradient(#fff,#fff) center/2px 12px no-repeat;background-color:var(--encre);border-color:var(--encre);transform:rotate(135deg)}
.faq summary:hover::after{border-color:var(--encre)}
.faq details p{padding:0 54px 24px 0;font-size:16.5px;color:var(--texte-doux)}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr}.faq-grid>div:first-child{position:static}.faq details p{padding-right:0}}

/* ---------- 13. appel final ---------- */
.final{text-align:center;overflow:hidden}
.final .container{display:flex;flex-direction:column;align-items:center}
.final h2{font-size:clamp(2.5rem,7vw,5.6rem);max-width:12em;font-weight:800;margin-bottom:22px}
.final .lead{max-width:520px;margin-bottom:34px}
.final .mail{margin-top:26px;font:500 15px/1 var(--f-mono);letter-spacing:.02em}
.final .mail a{display:inline-block;padding:12px 6px;color:var(--sur-nuit);--lt:rgba(232,238,248,.42);--lth:var(--signal);text-decoration:none;background-image:linear-gradient(var(--lth),var(--lth)),linear-gradient(var(--lt),var(--lt));background-repeat:no-repeat;background-position:6px calc(100% - 8px),6px calc(100% - 8px);background-size:0 2px,calc(100% - 12px) 1px;transition:background-size .38s cubic-bezier(.2,.7,.2,1),color .2s}
.final .mail a:hover,.final .mail a:focus-visible{color:var(--signal);background-size:calc(100% - 12px) 2px,calc(100% - 12px) 1px}
.queue{display:flex;align-items:flex-end;justify-content:center;gap:clamp(6px,1.4vw,16px);margin-bottom:46px;max-width:100%}
.queue svg{width:clamp(28px,5.4vw,56px);height:auto;stroke:var(--trait-nuit);fill:none;stroke-width:2;stroke-linecap:square;flex:none;stroke:#6f86ad}
.queue svg.me{stroke:var(--signal);stroke-width:2.4}
.queue svg.me circle,.queue svg.me path{stroke-dasharray:5 4}
@media (prefers-reduced-motion:no-preference){.queue svg.me{animation:pulse 1.8s ease-in-out infinite}html.js .queue:not(.in) svg.me{animation:none}}
@keyframes pulse{50%{opacity:.4}}
@media (max-width:480px){.queue svg:nth-child(-n+2){display:none}}

@media (max-width:640px){.player-fond .cote{display:none}}

/* ==========================================================================
   V3 (16/10/2026) — « énormément d'animations », univers plan de chantier.
   Tout état caché est sous html.js ET prefers-reduced-motion:no-preference :
   sans JS ou en reduced-motion, la page est complète et statique.
   Mouvement : transform / opacity (+ stroke-dashoffset pour les tracés).
   ========================================================================== */

/* ---------- bandeau : calque de grille (parallaxe), particules, repères ---------- */
.hero-grid{position:absolute;left:0;right:0;top:-80px;bottom:-80px;z-index:0;pointer-events:none;will-change:transform;
  -webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.hero-part{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero-reperes{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hc{position:absolute;display:none;width:1px;background:rgba(143,176,245,.5);transform-origin:center top}
.hc::before,.hc::after{content:"";position:absolute;left:-6px;width:13px;height:1px;background:inherit}
.hc::before{top:0}.hc::after{bottom:0}
.hc-g{left:26px;top:120px;height:min(44%,430px)}
.hc-d{right:26px;top:210px;height:min(30%,300px)}
.rep{position:absolute;width:15px;height:15px;opacity:.55}
.rep::before,.rep::after{content:"";position:absolute;background:var(--signal)}
.rep::before{left:7px;top:0;width:1px;height:15px}
.rep::after{top:7px;left:0;height:1px;width:15px}
.rep-1{left:5%;top:150px}.rep-2{right:6%;top:46%}.rep-3{left:3.5%;bottom:34%}.rep-4{right:19%;top:76px}
@media (min-width:1360px){.hc{display:block}}
@media (max-width:700px){.rep-3,.rep-4{display:none}}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.14em .04em .12em;margin:-.14em -.04em -.12em}
.hero h1 .w i{display:inline-block;font-style:normal}
@media (prefers-reduced-motion:no-preference){
  html.js .hero h1 .w i{animation:wIn .9s cubic-bezier(.2,.75,.2,1) calc(var(--w0) + var(--i) * .075s) backwards}
  html.js .hi{animation:hiIn .95s cubic-bezier(.2,.7,.2,1) calc(var(--w0) + var(--hd,0s)) backwards}
  html.js .hc{animation:hcDraw 1.5s cubic-bezier(.2,.7,.2,1) calc(var(--w0) + .35s) backwards}
  html.js .rep{animation:repIn 1.2s ease calc(var(--w0) + .9s) backwards}
}
@keyframes wIn{from{transform:translateY(115%) rotate(6deg)}}
@keyframes hiIn{from{opacity:0;transform:translateY(24px)}}
@keyframes hcDraw{from{transform:scaleY(0)}}
@keyframes repIn{from{opacity:0;transform:rotate(-90deg) scale(.4)}}

/* ---------- 3. sélecteur « Voyez-le faire » ---------- */
.sel-head{max-width:780px;margin-bottom:clamp(26px,3.6vw,44px)}
.sel-head h2{margin-bottom:16px}
.sel-head .txt{max-width:560px}
.sel{border:1px solid var(--trait-nuit);background:rgba(12,29,61,.62);border-radius:8px;overflow:hidden;box-shadow:0 44px 90px -44px rgba(0,0,0,.7)}
.sel-tabs{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));border-bottom:1px solid var(--trait-nuit);background:rgba(8,22,49,.7)}
.sel-tab{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px;text-align:left;padding:18px 15px 22px;min-height:108px;background:transparent;border:0;border-right:1px solid var(--trait-nuit);border-radius:0;color:var(--sur-nuit-doux);cursor:pointer;font:600 14.5px/1.2 var(--f-texte);transition:background-color .25s,color .25s}
.sel-tab:last-child{border-right:0}
.sel-tab .nav-ic{width:34px;height:34px}
.sel-tab:hover{background:rgba(143,176,245,.07);color:#fff}
.sel-tab[aria-selected="true"]{background:rgba(143,176,245,.13);color:#fff}
.sel-tab[aria-selected="true"]::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--signal)}
.sel-tab:focus-visible{outline-offset:-4px}
.sel-tab .barre{display:none;position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(143,176,245,.16)}
.sel-tab .barre::after{content:"";position:absolute;inset:0;background:var(--signal);transform:scaleX(0);transform-origin:left center}
.sel-panneau{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,2.22fr);gap:clamp(22px,3.4vw,52px);align-items:center;padding:clamp(20px,3.2vw,44px)}
.sel-panneau[hidden]{display:none}
.sel-panneau+.sel-panneau{border-top:1px solid var(--trait-nuit)}
.sel-info h3{font-size:clamp(2rem,3.1vw,2.75rem);line-height:1.02;margin-bottom:16px;font-weight:800}
.sel-info p{color:var(--sur-nuit-doux);font-size:1.0625rem;line-height:1.55;margin-bottom:24px}
.sel-lien{display:inline-flex;align-items:center;gap:9px;font:500 14px/1.3 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--signal);padding:10px 0 12px}
.sel-lien span{display:inline-block;transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.sel-lien:hover span,.sel-lien:focus-visible span{transform:translateX(6px)}
.sel-lien:hover{color:#fff}
.sel-demo{min-width:0}
html:not(.js) .sel-tabs{display:none}
html:not(.js) .sel-panneau[hidden]{display:grid}
@media (max-width:1100px){
  .sel-tabs{display:flex;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .sel-tabs::-webkit-scrollbar{display:none}
  .sel-tab{flex:0 0 auto;min-width:156px;scroll-snap-align:center}
}
@media (max-width:980px){.sel-panneau{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.sel-tab{min-width:138px;min-height:96px;padding:14px 13px 18px}}
@media (prefers-reduced-motion:no-preference){
  .sel-panneau:not([hidden]){animation:selIn .6s cubic-bezier(.2,.7,.2,1)}
  html.js .sel:not(.manuel) .sel-tab[aria-selected="true"] .barre{display:block}
  html.js .sel:not(.manuel) .sel-tab[aria-selected="true"] .barre::after{animation:barre 8s linear forwards}
  html.js .sel.hors .barre::after,html.js .sel:hover .barre::after{animation-play-state:paused}
}
@keyframes selIn{from{opacity:0;transform:translateY(14px)}}
@keyframes barre{to{transform:scaleX(1)}}

/* ---------- 2. constats : les étiquettes sortent de l'imprimante ---------- */
.tags{position:relative;padding-top:22px;overflow:hidden}
.tags::before{content:"";position:absolute;left:0;right:0;top:0;height:16px;z-index:3;border-radius:4px;background:linear-gradient(#27468a,var(--nuit));box-shadow:0 6px 10px -5px rgba(12,29,61,.55)}
.tags::after{content:"";position:absolute;right:16px;top:6px;z-index:4;width:5px;height:5px;border-radius:50%;background:var(--signal)}
@media (max-width:900px){.tags{overflow:visible;padding-top:0}.tags::before,.tags::after{display:none}}
@media (prefers-reduced-motion:no-preference){
  .tag{transition:transform 1s cubic-bezier(.2,.9,.25,1.06) calc(var(--i) * .24s + .1s)}
  html.js .tags:not(.in) .tag{transform:translateY(calc(-100% - 26px))}
  .tag-code{transform-origin:left center;transition:transform .9s steps(24,end) calc(var(--i) * .24s + .95s)}
  html.js .tags:not(.in) .tag-code{transform:scaleX(0)}
  html.js .tag-top svg>*:not(.nd){stroke-dasharray:1 2;stroke-dashoffset:0;transition:stroke-dashoffset 1.1s ease calc(var(--i) * .24s + .8s),fill-opacity .6s ease calc(var(--i) * .24s + 1.6s)}
  html.js .tags:not(.in) .tag-top svg>*:not(.nd){stroke-dashoffset:1;fill-opacity:0}
  html.js .tag-top svg .nd{transition:opacity .6s ease calc(var(--i) * .24s + 1.3s)}
  html.js .tags:not(.in) .tag-top svg .nd{opacity:0}
  @media (max-width:900px){
    .tag{transition:transform .8s cubic-bezier(.2,.9,.25,1.1),opacity .6s ease}
    html.js .tags:not(.in) .tag{transform:translateY(-34px) rotate(-1.4deg);opacity:0}
  }
  .tags.in .tag:nth-child(odd):not(:hover){animation:papier 6s ease-in-out 3s infinite}
}
@keyframes papier{0%,88%,100%{transform:none}94%{transform:translateY(-3px) rotate(.25deg)}}
@media (prefers-reduced-motion:no-preference) and (max-width:900px){html.js .tags:not(.in) .tag{transition-delay:calc(var(--i) * .16s)}}

/* ---------- 6. solution : la fenêtre s'assemble, les 8 modules s'allument ---------- */
.mods li{isolation:isolate}
.mods li::after{content:"";position:absolute;left:-8px;right:-8px;top:0;bottom:0;z-index:-1;pointer-events:none;opacity:0;background:radial-gradient(ellipse 80% 90% at 22% 0,rgba(23,51,122,.17),transparent 72%)}
@media (prefers-reduced-motion:no-preference){
  .mods li{transition:opacity .7s ease calc(var(--i) * .16s)}
  html.js .mods:not(.in) li{opacity:.22}
  .mods li::before{transform-origin:left center;transition:transform .7s cubic-bezier(.2,.7,.2,1) calc(var(--i) * .16s + .1s)}
  html.js .mods:not(.in) li::before{transform:scaleX(0)}
  html.js .mods svg{stroke-dasharray:1 2;stroke-dashoffset:0;transition:stroke-dashoffset 1.1s ease calc(var(--i) * .16s + .15s)}
  html.js .mods:not(.in) svg{stroke-dashoffset:1}
  html.js .mods.in li::after{animation:modOn 1.8s ease calc(var(--i) * .16s + .1s) both}
  /* fenêtre du logiciel : les morceaux se posent un à un (classes .k posées par accueil.js) */
  .win .k{transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.25,1);transition-delay:calc(var(--k, 0) * .06s + .12s)}
  html.js .win:not(.in) .k{opacity:0;transform:translateY(10px)}
  .win .pb{transform-origin:left center}
  html.js .win:not(.in) .pb.k{opacity:0;transform:scaleX(0)}
  html.js .win:not(.in) .si.k{opacity:0;transform:translateX(-12px)}
}
@keyframes modOn{0%{opacity:0}28%{opacity:1}100%{opacity:0}}

/* ---------- 7. il grandit : le nouveau module glisse dans la barre latérale, en boucle douce ---------- */
.sw i::before{content:"";position:absolute;inset:-2px;border-radius:99px;background:var(--signal);opacity:.0}
@media (prefers-reduced-motion:no-preference){
  html.js .evo .panel.try .m.new{animation:evoNew 7s cubic-bezier(.2,.7,.2,1) infinite}
  html.js .evo .sw i::after{animation:evoKnob 7s cubic-bezier(.4,0,.2,1) infinite}
  html.js .evo .sw i::before{animation:evoOn 7s ease infinite}
  html.js .evo .evo-mid .arr{animation:evoArr 7s ease infinite}
  html.js .evo .undo svg{animation:evoUndo 7s ease infinite}
}
@keyframes evoNew{0%,5%{opacity:0;transform:translateX(-40px)}20%{opacity:1;transform:none}86%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateX(22px)}}
@keyframes evoKnob{0%,28%{transform:translateX(-22px)}40%,88%{transform:none}97%,100%{transform:translateX(-22px)}}
@keyframes evoOn{0%,30%{opacity:0}42%,88%{opacity:.28}97%,100%{opacity:0}}
@keyframes evoArr{0%,14%{opacity:.35;transform:none}24%{opacity:1;transform:translateX(6px)}34%,100%{opacity:.65;transform:none}}
@keyframes evoUndo{0%,88%{transform:none}94%{transform:rotate(-40deg)}100%{transform:none}}

/* ---------- 8. comment ça se passe : la ligne de cote se trace au défilement ---------- */
@media (prefers-reduced-motion:no-preference){
  html.js .steps li::before{transition:transform .18s linear}
  html.js .steps li::after{transition:opacity .4s ease}
  html.js .steps li:not(.on)::after{opacity:.2}
  html.js .step-n{transition:transform .65s cubic-bezier(.2,.9,.3,1.3),opacity .3s ease}
  html.js .steps li:not(.on) .step-n{transform:perspective(320px) rotateX(-95deg) scale(.8);opacity:0}
  html.js .steps li:not(.on) h3,html.js .steps li:not(.on) p{opacity:.25}
  html.js .steps h3,html.js .steps p{transition:opacity .5s ease .1s}
}

/* ---------- 9. garanties : bande sombre vivante (trame, halos qui respirent, cartes verre) ---------- */
#garanties{overflow:hidden}
#garanties .container{position:relative;z-index:1}
.vivant{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.trame{position:absolute;left:-120px;top:-120px;right:0;bottom:0;
  background-image:linear-gradient(rgba(143,176,245,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(143,176,245,.06) 1px,transparent 1px),linear-gradient(rgba(143,176,245,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(143,176,245,.12) 1px,transparent 1px);
  background-size:24px 24px,24px 24px,120px 120px,120px 120px;
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 45%,#000 30%,transparent 85%);mask-image:radial-gradient(ellipse 80% 80% at 50% 45%,#000 30%,transparent 85%)}
.halo{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(143,176,245,.30),rgba(143,176,245,.08) 45%,transparent 68%);opacity:.75}
.halo.h1{width:640px;height:640px;left:-180px;top:-200px}
.halo.h2{width:520px;height:520px;right:-120px;top:20%;background:radial-gradient(circle,rgba(86,128,224,.34),rgba(86,128,224,.08) 45%,transparent 68%)}
.halo.h3{width:560px;height:560px;left:38%;bottom:-300px}
.plate{background:linear-gradient(160deg,rgba(38,72,128,.66),rgba(16,38,78,.52));-webkit-backdrop-filter:blur(12px) saturate(130%);backdrop-filter:blur(12px) saturate(130%);border:1px solid rgba(143,176,245,.28);border-top:3px solid var(--signal);padding:26px 22px 28px;position:relative;border-radius:4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 28px 50px -30px rgba(0,0,0,.7)}
.plate h3{font-size:1.65rem;margin-bottom:10px;font-weight:800}
.plate p{font-size:15.5px;color:var(--sur-nuit-doux)}
.plate::after{content:"";position:absolute;right:10px;top:12px;width:8px;height:8px;border-radius:50%;background:var(--nuit);box-shadow:inset 0 1px 1px rgba(0,0,0,.6),0 1px 0 rgba(143,176,245,.18)}
.past{position:relative;display:grid;place-items:center;width:68px;height:68px;margin-bottom:24px;border-radius:50%;background:radial-gradient(circle at 34% 28%,rgba(143,176,245,.32),rgba(143,176,245,.07) 72%);border:1px solid rgba(143,176,245,.55)}
.past::before{content:"";position:absolute;inset:-7px;border-radius:50%;border:1.5px dashed rgba(143,176,245,.4)}
.past svg{display:block;width:40px;height:40px;margin:0;overflow:visible;stroke:var(--signal);fill:none;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter}
.past .rip{stroke-width:1.5;opacity:.0;transform-box:fill-box;transform-origin:center}
.past .vantail,.past .anse{transform-box:fill-box}
.past .vantail{transform-origin:left center}
.past .anse{transform-origin:right bottom}
@media (prefers-reduced-motion:no-preference){
  .halo{animation:respire 8s ease-in-out infinite}
  .halo.h2{animation-duration:10s;animation-delay:-3s}
  .halo.h3{animation-duration:9s;animation-delay:-5s}
  .trame{animation:tramePan 26s linear infinite}
  .past::before{animation:tourne 24s linear infinite}
  .plate:nth-child(even) .past::before{animation-direction:reverse}
  .plate{transition:opacity .7s ease calc(var(--i) * .14s),transform .7s cubic-bezier(.2,.8,.25,1) calc(var(--i) * .14s)}
  html.js .guar:not(.in) .plate{opacity:0;transform:translateY(26px) scale(.97)}
  .guar .d,.guar .d2{stroke-dasharray:1 2;stroke-dashoffset:0;transition:stroke-dashoffset 1s ease calc(var(--i) * .14s + .35s)}
  .guar .d2{transition-delay:calc(var(--i) * .14s + .95s)}
  html.js .guar:not(.in) .d,html.js .guar:not(.in) .d2{stroke-dashoffset:1}
  .guar.in .past-bouclier svg{animation:bouclier 4.5s ease-in-out 2.2s infinite}
  .guar.in .past-clic .rip{animation:rip 3.2s ease-out 2s infinite}
  .guar.in .past-clic .d{animation:tap 3.2s ease-in-out 2s infinite}
  .guar.in .past-cadenas .anse{animation:anse 5s ease-in-out 1.6s infinite}
  .guar.in .past-porte .vantail{animation:porte 5.4s ease-in-out 1.8s infinite}
}
@keyframes respire{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.18);opacity:1}}
@keyframes tramePan{to{transform:translate(120px,120px)}}
@keyframes tourne{to{transform:rotate(360deg)}}
@keyframes bouclier{0%,100%{transform:scale(1)}45%{transform:scale(1.1)}}
@keyframes rip{0%{opacity:.9;transform:scale(.35)}70%,100%{opacity:0;transform:scale(1.7)}}
@keyframes tap{0%,60%,100%{transform:none}70%{transform:translate(2px,3px)}}
@keyframes anse{0%,52%{transform:translateY(-6px) rotate(-14deg)}64%,100%{transform:none}}
@keyframes porte{0%,18%{transform:scaleX(.22)}42%,76%{transform:scaleX(1)}100%{transform:scaleX(.22)}}

/* ---------- 10. preuve : « deux » mis en valeur, compteur 0 → 2, bandeau qui respire ---------- */
.proof::before{content:"";position:absolute;z-index:-1;inset:-26px -22px -26px -4px;background:radial-gradient(ellipse 70% 90% at 18% 50%,rgba(23,51,122,.11),transparent 72%);pointer-events:none}
.proof::after{content:"";position:absolute;left:0;top:0;bottom:0;width:14px;background:var(--encre);transform-origin:center}
.deux{position:relative;display:inline-block;isolation:isolate;color:var(--encre)}
.deux::before{content:"";position:absolute;z-index:-1;left:-.08em;right:-.08em;top:.12em;bottom:-.02em;background:var(--encre-douce);transform-origin:left center}
.proof-ico{position:relative}
.proof-n{position:absolute;left:50%;top:-62px;margin-left:-.3em;font:800 3.4rem/1 var(--f-titre);color:var(--encre);letter-spacing:.01em;min-width:.6em;text-align:center}
@media (max-width:760px){.proof-ico{align-items:center}.proof-n{position:static;margin:0 0 0 8px;font-size:3.2rem;top:auto}}
@media (prefers-reduced-motion:no-preference){
  .proof::before{animation:respire 6s ease-in-out infinite}
  .proof::after{animation:barreVie 5s ease-in-out infinite}
  .deux::before{transition:transform .8s cubic-bezier(.2,.7,.2,1) .35s}
  html.js .proof:not(.in) .deux::before{transform:scaleX(0)}
  .proof-ico>div{transition:opacity .55s ease,transform .7s cubic-bezier(.2,.9,.3,1.2)}
  .proof-ico>div:nth-of-type(1){transition-delay:.45s}
  .proof-ico>div:nth-of-type(2){transition-delay:1.15s}
  html.js .proof:not(.in) .proof-ico>div{opacity:.15;transform:translateY(14px) scale(.9)}
  html.js .proof:not(.in) .proof-n{opacity:0}
  .proof-n{transition:opacity .4s ease .3s}
}
@keyframes barreVie{0%,100%{transform:scaleY(1);opacity:1}50%{transform:scaleY(.9);opacity:.8}}

/* ---------- 12. FAQ : hauteur animée par accueil.js ; réponse qui monte ---------- */

/* ---------- 13. appel final : la file se forme, halo qui respire ---------- */
.final::after{content:"";position:absolute;z-index:-1;left:50%;top:44%;width:980px;height:620px;max-width:140%;transform:translate(-50%,-50%);background:radial-gradient(ellipse,rgba(143,176,245,.17),transparent 66%);pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .final::after{animation:respireC 8s ease-in-out infinite}
  .queue svg{transition:opacity .55s ease calc(var(--i) * .13s),transform .7s cubic-bezier(.2,.9,.3,1.3) calc(var(--i) * .13s)}
  html.js .queue:not(.in) svg{opacity:0;transform:translateY(18px) scale(.88)}
}
@keyframes respireC{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.6}50%{transform:translate(-50%,-50%) scale(1.14);opacity:1}}

/* halo du bandeau « preuve » : ne déborde jamais de la page */
#preuve{overflow:hidden}