/* NUR Label V45 — témoins : premier écran « Le scan se branche », section sombre du certificat, page métier */

/* ═════════ 1. Premier écran ═════════ */
.hero2{min-height:max(660px,100svh);align-items:stretch}
.hero2 .wrap.hero-grid{display:grid;grid-template-columns:minmax(0,clamp(400px,33vw,540px)) minmax(0,1fr);grid-template-rows:1fr auto auto;column-gap:clamp(28px,3vw,52px);align-self:stretch;padding-top:100px;padding-bottom:22px;pointer-events:auto}
.hero2 .hero-text{grid-column:1;grid-row:1/3;align-self:center;max-width:none;padding-bottom:12px}
.hero2 h1{font-size:clamp(2.3rem,3.6vw,3.55rem);line-height:1.04;margin-bottom:16px;max-width:14ch}
.hero2 .lead{font-size:clamp(1rem,1.25vw,1.1rem);line-height:1.6;margin-bottom:26px;max-width:58ch}
.hero-sub{display:flex;align-items:center;gap:10px;margin:0 0 14px;font:600 1.04rem/1.3 var(--text);color:var(--sky)}
.hero-sub svg{width:21px;height:21px;flex:none}
.hero-chips{display:none}

/* Les deux cartes : posées sur la scène, utilisables dès la première image */
.hero-dock{grid-column:2;grid-row:2/4;position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-self:end;z-index:5;margin-bottom:58px}   /* 58 px : la bulle « Chat » ne mord pas sur la carte NUR */
.hcard{min-width:0}
.hc-in{position:relative;height:100%;box-sizing:border-box;padding:15px 14px 13px;border-radius:16px;background:linear-gradient(180deg,rgba(10,22,54,.80),rgba(4,11,30,.90));border:1px solid rgba(143,180,255,.16);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 26px 60px rgba(0,0,0,.48);transition:border-color .35s,box-shadow .35s}
.hc-ol{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.hc-ol rect{fill:none;stroke:#bcd2ff;stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.hcard.lit .hc-in{border-color:rgba(143,180,255,.34);box-shadow:0 26px 60px rgba(0,0,0,.48),0 0 34px rgba(42,85,214,.30)}
.hcard.lit .hc-ol rect{stroke-dashoffset:0;opacity:.5}
.hcard:focus-within .hc-in{border-color:rgba(143,180,255,.6)}
.hc-head{display:flex;align-items:center;gap:10px;margin-bottom:11px;transition:opacity .35s}
.hc-ic{flex:none;display:grid;place-items:center;width:30px;height:30px;color:var(--sky)}
.hc-ic svg{width:26px;height:26px}
.hc-ic.hc-nur{width:40px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--ink),var(--royal));color:#fff;font:700 .72rem var(--display);letter-spacing:.04em;box-shadow:inset 0 0 0 1px rgba(143,180,255,.35)}
.hc-t{flex:1;min-width:0;font:600 .96rem/1.25 var(--display);letter-spacing:-.01em;color:#fff;margin:0}
.hc-info{flex:none;display:grid;place-items:center;width:34px;height:34px;margin:-4px -6px -4px 0;border:0;border-radius:50%;background:none;color:var(--sky);cursor:pointer;transition:background-color .18s}
.hc-info svg{width:22px;height:22px}
.hc-info:hover,.hc-info[aria-expanded="true"]{background:rgba(143,180,255,.14)}
.hc-info-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hc-row{display:flex;gap:8px;flex-wrap:wrap}
.hc-row input{flex:1 1 150px}
.hc-row input,.hc-pfx{flex:1 1 168px;min-width:0;height:48px;box-sizing:border-box;border:1.5px solid rgba(143,180,255,.30);border-radius:10px;background:rgba(3,10,29,.66);color:#fff}
.hc-row input{padding:0 12px;font:500 1rem var(--mono);letter-spacing:.05em;text-transform:uppercase}
.hc-row input::placeholder{color:rgba(174,188,219,.52);text-transform:none}
.hc-row input:focus{border-color:var(--sky);outline:none;box-shadow:0 0 0 3px rgba(143,180,255,.25)}
.hc-pfx{display:flex;align-items:stretch;overflow:hidden}
.hc-pfx:focus-within{border-color:var(--sky);box-shadow:0 0 0 3px rgba(143,180,255,.25)}
.hc-pfx .pfx{display:flex;align-items:center;padding:0 2px 0 12px;background:none;color:var(--sky);font:600 1rem var(--mono);letter-spacing:.02em}
.hc-pfx input{flex:1;height:auto;border:0!important;background:none;box-shadow:none!important;padding:0 10px 0 2px;letter-spacing:.1em}
.hc-row .btn{flex:none;min-height:48px;padding:.6em .95em;font-size:.94rem}
.hc-hint{display:flex;justify-content:space-between;gap:10px;margin:8px 0 0;font-size:.8rem;line-height:1.4;color:var(--muted-night);transition:opacity .35s}
.hc-hint .qcount{flex:none;margin:0;font:500 .78rem var(--mono);color:var(--muted-night)}
.hc-hint .qcount.ok{color:#5fd393}
.hcard:not(.lit) .hc-head,.hcard:not(.lit) .hc-hint{opacity:.74}
.hero2 .qout{margin-top:9px;background:rgba(3,10,29,.7);border-color:rgba(143,180,255,.25);color:#e6edff;font-size:.88rem}
.hero2 .qout b{color:#fff}.hero2 .qout span{color:var(--muted-night)}
.hero2 .qout.ok{background:rgba(23,163,90,.14);border-color:rgba(95,211,147,.35)}
.hero2 .qout.ok b::before{color:#5fd393}
.hero2 .qout.none{background:rgba(208,138,30,.14);border-color:rgba(240,170,70,.35)}
.hero2 .qout .vin-fix{color:#ffcb80}
.hero2 .vform{background:none;border:0;border-radius:0;padding:0;margin:0}
.hero2 .hc-pfx{background:rgba(3,10,29,.66)}
.hero2 .vmsg{margin:6px 0 0;font-size:.82rem;color:var(--muted-night)}
.hero2 .vmsg:empty{display:none}
.hero2 .vform.shake,.hero2 .qvin.shake{animation:shk .45s}

/* Panneau « Comment ça marche ? » : par-dessus la scène, la page ne bouge pas */
.hc-panel{position:absolute;left:0;right:0;bottom:calc(100% + 12px);z-index:8;visibility:hidden;opacity:0;transform:translateY(10px) scale(.985);transform-origin:50% 100%;transition:opacity .2s ease,transform .24s ease,visibility 0s linear .24s}
.hcard.open .hc-panel{visibility:visible;opacity:1;transform:none;transition:opacity .2s ease,transform .24s ease,visibility 0s}
.hc-pbody{display:grid;grid-template-columns:minmax(150px,200px) minmax(0,1fr);gap:22px;align-items:start;padding:20px 22px;border-radius:16px;background:#050d22;border:1px solid rgba(143,180,255,.32);box-shadow:0 30px 70px rgba(0,0,0,.6);color:var(--muted-night);font-size:.9rem;line-height:1.5}
.hc-fig{margin:4px 0 0;color:#9fb6e6}
.hc-fig svg{display:block;width:100%;height:auto}
.hc-fig .pt circle{fill:var(--royal);stroke:#fff;stroke-width:1.5}
.hc-fig .pt text{fill:#fff;font:700 10px var(--display);text-anchor:middle}
.hc-fig .hl rect{fill:var(--royal)}
.hc-fig .hl text{fill:#fff;font:600 7.4px var(--mono);text-anchor:middle}
.hc-fig .spec{fill:#ffb4a6;font:700 7px var(--display);letter-spacing:.08em;text-anchor:middle}
.hc-ptx h3{font:600 .95rem/1.3 var(--display);color:#fff;margin:0 0 3px}
.hc-ptx h3:not(:first-child){margin-top:12px}
.hc-ptx p{margin:0}
.hc-ptx p strong{color:#fff}
.hc-ptx ol,.hc-ptx ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:3px}
.hc-ptx ol{counter-reset:hp}
.hc-ptx ol li{counter-increment:hp;display:flex;gap:8px;align-items:baseline}
.hc-ptx ol li::before{content:counter(hp);flex:none;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--royal);color:#fff;font:700 .68rem var(--display);transform:translateY(-1px)}
.hc-ptx ul li{display:flex;gap:8px;align-items:baseline}
.hc-ptx ul li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--sky);transform:translateY(-2px)}

/* Note non-gage, sous les cartes */
.hero-ng{grid-column:1;grid-row:3;align-self:end;max-width:52ch;display:flex;align-items:flex-start;gap:9px;margin:11px 0 0;font-size:.86rem;line-height:1.45;color:#c9d5ef;position:relative;z-index:5}
.hero-ng svg{flex:none;width:18px;height:18px;margin-top:1px;color:var(--sky)}
.hero-ng strong{color:#fff}
.hero-ng a{color:var(--sky);font-weight:600;white-space:nowrap}

/* Fils qui relient les étiquettes aux cartes */
.wires{position:absolute;left:0;top:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible;display:none;filter:drop-shadow(0 0 4px rgba(143,180,255,.85))}
.wires .w{fill:none;stroke:#a9c6ff;stroke-width:1.6;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.wires .port{fill:#06122f;stroke:#cfe0ff;stroke-width:1.8;opacity:0;transform-box:fill-box;transform-origin:center}
.hero2.done .wires .w{stroke-dashoffset:0}
.hero2.done .wires .port{opacity:1}
@media (min-width:1180px){.hero2.wired .wires{display:block}}

/* Étiquettes : état final (tout de suite si « réduire les animations », ou après un geste) */
.hero2 .tag{z-index:3}
.hero2.done .tag,.hero2.done .pin,.hero2.done .lead-line{opacity:1}
.hero2.done .tag{transform:none}
.hero2.done .lamp{opacity:.9}
.hero2 .mscan{display:none}

/* Bouton pause */
.hero-pause{position:absolute;right:clamp(14px,2.4vw,34px);top:92px;z-index:9;display:grid;place-items:center;width:38px;height:38px;padding:0;border-radius:50%;border:1px solid rgba(143,180,255,.42);background:rgba(3,10,29,.62);color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero-pause:hover{border-color:var(--sky)}
.hero-pause svg{width:16px;height:16px}
.hero-pause .i-play,.hero-pause[aria-pressed="true"] .i-pause{display:none}
.hero-pause[aria-pressed="true"] .i-play{display:block}
.hero-pause[hidden]{display:none}

/* Écrans moyens : les cartes passent sous le texte */
@media (max-width:1179px){
  .hero2 .wrap.hero-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;padding-top:104px}
  .hero2 .hero-text{grid-row:1;max-width:min(600px,58%);padding-bottom:28px}
  .hero-dock{grid-column:1;grid-row:2;max-width:860px}
  .hero-ng{grid-column:1;grid-row:3;max-width:860px}
  .hero-dock{margin-bottom:0}
  .hero2 .hero-media .tag,.hero2 .hero-media .lead-line{display:none!important}
  .hero2 .hero-media .pin{width:11px;height:11px;margin:-5.5px 0 0 -5.5px}
  .hero-chips{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:24px 0 0;padding:0;list-style:none}
  .hero-chips li{display:flex;gap:8px;align-items:flex-start;min-width:0;padding:9px 10px;border-radius:11px;background:rgba(9,20,50,.85);border:1px solid rgba(143,180,255,.18);font-size:.8rem;line-height:1.3;color:var(--muted-night);opacity:.55;transition:opacity .3s}
  .hero-chips li svg{flex:none;width:18px;height:18px;color:#1a9a52}
  .hero-chips b{display:block;color:#fff;font-weight:600;font-size:.86rem}
  .hero-chips li.chip-nur{grid-column:1/-1;background:linear-gradient(180deg,#fff,#eef3fc);border-color:#fff;color:var(--muted-paper)}
  .hero-chips li.chip-nur b{color:var(--ink);font:500 .9rem var(--mono)}
  .hero-chips li.chip-nur svg{color:var(--royal)}
  .hero2.done .hero-chips li{opacity:1}
}

/* Mobile : la voiture, le texte, les 5 pastilles, puis les cartes empilées */
@media (max-width:820px){
  .hero2{min-height:0}
  .hero2 .wrap.hero-grid{display:flex;flex-direction:column;padding-top:22px;padding-bottom:30px}
  .hero2 .hero-text{max-width:none;padding-bottom:0}
  .hero2 h1{font-size:clamp(1.9rem,8vw,2.5rem);max-width:none;margin-bottom:10px}
  .hero-sub{font-size:.95rem;margin-bottom:10px}
  .hero2 .lead{font-size:.98rem;margin-bottom:20px}
  .hero2 .hero-media .pin{display:block!important;width:10px;height:10px;margin:-5px 0 0 -5px}
  .hero-chips{grid-template-columns:1fr 1fr;margin-top:22px}
  .hero2 .mscan{display:block;position:absolute;left:0;right:0;top:0;height:32%;z-index:5;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(143,180,255,.42),transparent);opacity:0}
  .hero-dock{grid-template-columns:1fr;gap:12px;margin-top:22px;max-width:none}
  .hero-ng{margin-top:14px;max-width:none}
  .hc-head{margin-bottom:12px}
  .hc-in{height:auto}
  .hc-info{width:40px;height:40px;margin:-6px -8px -6px 0}
  /* Le panneau s'ouvre sous le champ, dans la carte */
  .hc-panel{position:static;visibility:visible;opacity:1;transform:none;display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
  .hcard.open .hc-panel{grid-template-rows:1fr;transition:grid-template-rows .25s ease}
  .hc-clip{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s linear .25s}
  .hcard.open .hc-clip{visibility:visible;transition:visibility 0s}
  .hc-pbody{grid-template-columns:1fr;gap:12px;margin-top:10px;padding:16px;box-shadow:none}
  .hc-fig{max-width:220px}
  .hero-pause{top:84px;right:10px;width:36px;height:36px}
}
@media (max-width:600px){.hero2 .hero-media{height:clamp(200px,52vw,300px)}}
@media (max-width:360px){.hero-chips{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .hc-panel,.hcard.open .hc-panel{transform:none!important;transition:opacity .15s linear,visibility 0s!important}
  .hc-clip{transition:none}
  .hc-in,.hc-head,.hc-hint,.hero-chips li{transition:none}
}

/* ═════════ 2. Section sombre : « Que couvre le certificat ? » ═════════ */
.cover-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:clamp(36px,6vw,96px);align-items:center;position:relative;z-index:1}
.cover-tx h2{margin-bottom:14px}
.cover-keys{list-style:none;margin:26px 0 0;padding:0}
.cover-keys li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;padding:15px 0;border-top:1px solid var(--line-night)}
.cover-keys li:last-child{border-bottom:1px solid var(--line-night)}
.ck-n,.cd-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--royal);color:#fff;font:700 .86rem/1 var(--display)}
.ck-n{box-shadow:0 0 0 4px rgba(42,85,214,.22)}
.cover-keys h3{font-size:1.04rem;font-weight:600;margin:3px 0 4px}
.cover-keys p{margin:0;color:var(--muted-night);font-size:.95rem}
.cover-keys strong{color:#fff}
.cover-doc{margin:0;perspective:1600px}
.cd-sheet{position:relative;border-radius:6px;transform:rotateY(-9deg) rotateX(4deg) rotateZ(1deg);transform-origin:60% 50%;box-shadow:-30px 46px 90px rgba(0,0,0,.62),0 0 0 1px rgba(143,180,255,.18)}
.cd-sheet img{display:block;width:100%;height:auto;border-radius:6px}
.cd-mark{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);box-shadow:0 0 0 4px rgba(255,255,255,.9),0 10px 22px rgba(3,10,29,.55)}

/* Le temps de l'inspecteur : deux minuteurs */
.cover-time{position:relative;z-index:1;margin-top:clamp(56px,7vw,96px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--line-night)}
.ct-title{font-size:clamp(1.55rem,2.6vw,2.25rem);font-weight:700;line-height:1.15;max-width:26ch;margin:0 0 clamp(28px,4vw,44px)}
.ct-grid{display:grid;grid-template-columns:200px 200px minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:start}
.timer{position:relative;text-align:center}
.timer>svg{display:block;width:170px;height:170px;margin:0 auto;overflow:visible}
.tr-bg{fill:rgba(42,85,214,.07);stroke:rgba(143,180,255,.14);stroke-width:6}
.tr-arc{fill:none;stroke-width:6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.t-soft .tr-arc{stroke:#7d8bb0}
.t-insp .tr-arc{stroke:var(--sky)}
.tk{stroke:rgba(143,180,255,.34);stroke-width:1.4}
.cp{fill:var(--valid);stroke:#eaf1ff;stroke-width:2}
.t-in{position:absolute;left:0;right:0;top:0;height:170px;display:grid;place-items:center;pointer-events:none}
.t-big{font:700 2rem/1 var(--display);letter-spacing:-.02em;color:#fff}
.t-soft .t-big{color:#c3cde6}
.t-who{margin:16px auto 0;max-width:24ch;color:var(--muted-night);font-size:.92rem;line-height:1.45}
.t-who strong{display:block;color:#fff;font:600 1.05rem/1.3 var(--display);margin-bottom:2px}
.t-steps{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:14px 0 0;padding:0;list-style:none}
.t-steps li{display:flex;align-items:center;gap:5px;padding:4px 9px 4px 6px;border-radius:999px;border:1px solid rgba(143,180,255,.25);font-size:.78rem;color:#dbe4fa;transition:opacity .25s,border-color .25s}
.t-steps svg{width:14px;height:14px;color:var(--valid)}
.ct-tx p{color:#d3ddf5;margin:0 0 14px}
.ct-tx .ct-punch{font:600 1.22rem/1.35 var(--display);color:#fff}
.ct-tx .small{color:var(--muted-night)}
/* état « armé » (posé par le script avant l'animation ; sans script, l'état final s'affiche) */
.arm .tr-arc{stroke-dashoffset:1}
.arm .cp{fill:#06122f}
.arm .cp.on{fill:var(--valid)}
.arm .t-steps li{opacity:.4}
.arm .t-steps li.on{opacity:1;border-color:rgba(95,211,147,.5)}
.arm .t-insp:not(.t-done) .t-big{font-size:1.15rem;color:var(--sky)}
@media (max-width:1060px){.ct-grid{grid-template-columns:1fr 1fr}.ct-tx{grid-column:1/-1}}
@media (max-width:900px){
  .cover-top{grid-template-columns:1fr}
  .cover-doc{max-width:420px;margin:0 auto;width:100%}
  .cd-sheet{transform:rotateZ(.8deg)}
}
@media (max-width:520px){.timer>svg{width:138px;height:138px}.t-in{height:138px}.t-big{font-size:1.6rem}.ct-grid{gap:20px 12px}}

/* ═════════ 3. Page métier ═════════ */
/* Grille de cartes (T3) */
.tcards{display:grid;gap:clamp(14px,1.6vw,20px);margin:0;padding:0;list-style:none}
.tcards.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.tcards.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tcard{display:flex;flex-direction:column;padding:clamp(20px,2vw,26px);border-radius:var(--r-l);border:1px solid var(--line-paper);background:#fff}
.paper .tcard{background:linear-gradient(155deg,var(--tint-a,#fff) 0%,var(--tint-b,#fbf9f4) 100%);border-color:var(--tint-line,var(--line-paper))}
.ink .tcard{background:rgba(143,180,255,.05);border-color:var(--line-night)}
.tcard .ic{margin-bottom:16px}
.tcard h3{font-size:1.1rem;line-height:1.3;margin:0 0 8px}
.tcard p{margin:0;color:var(--muted-paper);font-size:.96rem}
.ink .tcard p{color:var(--muted-night)}
.tc-link{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:16px;font-weight:600;font-size:.94rem;color:var(--royal);text-decoration:none}
.tc-link svg{width:16px;height:16px;transition:transform .18s}
.tc-link:hover svg{transform:translateX(3px)}
.tc-link:hover{text-decoration:underline}
@media (max-width:1060px){.tcards.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.tcards.c3{grid-template-columns:1fr}}
@media (max-width:560px){.tcards.c4{grid-template-columns:1fr}}

/* Texte + visuel (T2) */
.modes{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:center;position:relative;z-index:1}
.modes-img{position:relative;margin:0}
.modes-img img{display:block;width:100%;height:auto;border-radius:var(--r-l);box-shadow:0 34px 80px rgba(0,0,0,.5)}
.modes-img figcaption{position:absolute;left:16px;right:16px;bottom:16px;display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:rgba(3,10,29,.86);border:1px solid rgba(143,180,255,.28);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:.88rem;line-height:1.45;color:#dbe4fa}
.modes-img figcaption svg{flex:none;width:20px;height:20px;color:var(--sky);margin-top:1px}
.modes .sec-head{margin-bottom:24px}
.mode-list{list-style:none;margin:0;padding:0}
.mode-list li{display:grid;grid-template-columns:54px minmax(0,1fr);gap:16px;padding:16px 0;border-top:1px solid var(--line-night)}
.mode-list .pcode{width:50px;height:50px;border-radius:12px;background:var(--royal);font-size:1rem}
.mode-list h3{font-size:1.06rem;margin:2px 0 4px}
.mode-list p{margin:0;color:var(--muted-night);font-size:.95rem}
.mode-extra{display:flex;gap:12px;align-items:flex-start;margin:6px 0 0;padding:14px 16px;border-radius:12px;background:rgba(42,85,214,.14);border:1px solid rgba(143,180,255,.28);font-size:.94rem;color:#d7e1f8}
.mode-extra svg{flex:none;width:20px;height:20px;color:var(--sky);margin-top:2px}
.mode-extra strong{color:#fff}
@media (max-width:900px){.modes{grid-template-columns:1fr}.modes-img{max-width:560px}}

/* Comparatif (T7) */
.cmp{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line-paper);border-radius:var(--r-l);overflow:hidden;background:#fff;font-size:.98rem}
.cmp th,.cmp td{padding:18px 22px;text-align:left;vertical-align:top;border-top:1px solid var(--line-paper)}
.cmp thead th{border-top:0;font:600 .92rem/1.3 var(--display);color:var(--muted-paper);background:#f6f4ee}
.cmp thead th.yes{background:var(--ink);color:#fff}
.cmp thead .nl-ic{display:inline-grid;place-items:center;width:36px;height:22px;margin-right:10px;border-radius:6px;background:linear-gradient(135deg,var(--royal),#4f78f0);color:#fff;font:700 .66rem var(--display);letter-spacing:.04em;vertical-align:1px}
.cmp tbody th{width:22%;font:600 1rem/1.35 var(--display);color:var(--ink)}
.cmp td{width:39%;color:var(--muted-paper)}
.cmp td.yes{background:rgba(42,85,214,.06);color:var(--ink);font-weight:600}
.cmp td.yes svg{float:left;width:20px;height:20px;margin:1px 10px 0 0;color:var(--valid)}
.cmp td.yes span{display:block;overflow:hidden}
@media (max-width:760px){
  .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td,.cmp tbody th{display:block;width:auto}
  .cmp thead{display:none}
  .cmp{border:0;background:none;border-radius:0}
  .cmp tr{margin-bottom:12px;border:1px solid var(--line-paper);border-radius:14px;overflow:hidden;background:#fff}
  .cmp tbody th{border-top:0;padding:14px 16px 4px}
  .cmp td{border-top:0;padding:6px 16px 12px}
  .cmp td::before{content:attr(data-l);display:block;font:600 .74rem var(--text);color:var(--muted-paper);margin-bottom:2px}
  .cmp td.yes{padding-top:12px;border-top:1px solid var(--line-paper)}
  .cmp td.yes::before{color:var(--royal)}
}

/* Questions en deux colonnes */
.faq2{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.faq2-aside{position:sticky;top:104px}
.faq2-aside h2{margin-bottom:22px}
.faq2-help{padding:22px;border-radius:var(--r-l);background:linear-gradient(160deg,var(--ink),#0e2463);color:var(--on-night)}
.faq2-help h3{font-size:1.1rem;margin:0 0 6px}
.faq2-help p{color:var(--muted-night);font-size:.95rem;margin:0 0 16px}
.faq2-help .btns{flex-direction:column;align-items:stretch;gap:10px}
.faq2-help .btn-line{border-color:rgba(143,180,255,.55)!important;color:#fff!important;background:none!important}
.faq2-help .btn-line:hover{border-color:var(--sky)!important;background:rgba(143,180,255,.1)!important}
@media (max-width:900px){.faq2{grid-template-columns:1fr;gap:0}.faq2-aside{display:contents}.faq2-aside h2{order:1}.faq2 .faq{order:2}.faq2-help{order:3;margin-top:24px}}
.hc-ptx ul+p,.hc-ptx ol+p{margin-top:10px}

/* ───── V45.1 — corrections validées du premier écran (22/10) ───── */
/* P5 : traits verticaux en SVG, aucun croisement */
.wires .ld{fill:none;stroke:rgba(169,198,255,.78);stroke-width:1.3;stroke-dasharray:1;stroke-dashoffset:1}
.hero2.done .wires .ld{stroke-dashoffset:0}
.hero2 .pin.off,.hero2 .lead-line.off{display:none!important}
@media (min-width:1180px){.hero2.wired .lead-line{display:none!important}.hero2.wired .tag:not(.dossier){white-space:normal;max-width:212px}.hero2.wired.compact .tag:not(.dossier) span{display:none}}
/* P1 : badge VIN symétrique du badge NUR */
.hc-ic.hc-vin{background:linear-gradient(135deg,#0b1a44,#1d3f9e)}
/* P3 : déclaration de non-gage dans une carte encadrée */
.hero-ng{align-items:center;gap:13px;padding:12px 16px 12px 12px;border-radius:14px;background:linear-gradient(180deg,rgba(11,21,48,.74),rgba(4,10,26,.84));border:1px solid rgba(150,185,255,.24);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 16px 38px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.06);max-width:470px}
.hero-ng p{margin:0}
.hero-ng .ng-ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:rgba(42,85,214,.26);box-shadow:inset 0 0 0 1px rgba(143,180,255,.3)}
.hero-ng .ng-ic svg{margin:0;width:19px;height:19px}
/* P7 : panneau VIN — vraie photo et trois vignettes */
.hcard[data-card="vin"] .hc-pbody{grid-template-columns:minmax(180px,236px) minmax(0,1fr)}
.hc-photo{display:block;width:100%;height:auto;border-radius:10px;border:1px solid rgba(143,180,255,.25)}
.hc-vg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.hc-vg svg{display:block;width:100%;height:auto;background:rgba(143,180,255,.06);border:1px solid rgba(143,180,255,.18);border-radius:8px}
.hc-fig .vg-hl{fill:rgba(42,85,214,.6);stroke:#8fb4ff;stroke-width:1}
.hc-fig .vg-tx{stroke:#fff;stroke-width:1.2;opacity:.75}
.hc-fig .vg-e{fill:#fff;font:700 6.5px var(--display)}
/* P4 : menu — soulignement animé au survol et sous la page active */
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:11px;right:11px;bottom:5px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--sky),#5d86ff);transform:scaleX(0);transform-origin:0 50%;transition:transform .25s ease}
.nav a:hover::after,.nav a:focus-visible::after,.nav a[aria-current]::after{transform:scaleX(1)}
.nav a:hover,.nav a[aria-current]{background:none}
@media (max-width:1240px){.nav a::after{left:8px;right:8px}}
.menu-open .nav a::after{display:none}
/* Le voile sombre de gauche passe sous les étiquettes (sinon une étiquette à gauche paraît éteinte) */
.hero2::before{display:none}
.hero2 .stage::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(3,10,29,.9) 0%,rgba(3,10,29,.72) 20%,rgba(3,10,29,.38) 40%,transparent 56%)}
@media (max-width:820px){.hero2 .stage::before{display:none}}

/* ═════════ V45.2 (étape A) — menu « Métiers », cartes métiers, bloc positif, minuteurs autonomes, chiffres ═════════ */
/* Menu déroulant « Métiers » */
.nav-dd{position:relative;display:flex}
.nav-dd-btn{position:relative;display:inline-flex;align-items:center;gap:5px;padding:10px 11px;border:0;border-radius:8px;background:none;color:var(--muted-night);font:inherit;font-size:.95rem;white-space:nowrap;cursor:pointer}
.nav-dd-btn svg{width:14px;height:14px;transition:transform .2s}
.nav-dd-btn::after{content:"";position:absolute;left:11px;right:26px;bottom:5px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--sky),#5d86ff);transform:scaleX(0);transform-origin:0 50%;transition:transform .25s ease}
.nav-dd-btn:hover,.nav-dd-btn.is-current,.nav-dd.open .nav-dd-btn{color:#fff}
.nav-dd-btn:hover::after,.nav-dd-btn:focus-visible::after,.nav-dd-btn.is-current::after,.nav-dd.open .nav-dd-btn::after{transform:scaleX(1)}
.nav-dd.open .nav-dd-btn svg{transform:rotate(180deg)}
.nav-dd-pop{position:absolute;left:0;top:calc(100% + 8px);z-index:60;min-width:270px;padding:8px;border-radius:14px;background:#06122f;border:1px solid rgba(143,180,255,.26);box-shadow:0 26px 60px rgba(0,0,0,.55);visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility 0s linear .18s}
.nav-dd.open .nav-dd-pop{visibility:visible;opacity:1;transform:none;transition:opacity .18s,transform .18s,visibility 0s}
.nav-dd-pop ul{list-style:none;margin:0;padding:0}
.nav .nav-dd-pop a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:9px;color:#dbe4fa;font-size:.94rem}
.nav .nav-dd-pop a::after{display:none}
.nav .nav-dd-pop a:hover,.nav .nav-dd-pop a:focus-visible,.nav .nav-dd-pop a[aria-current]{background:rgba(143,180,255,.12);color:#fff}
.nav .nav-dd-pop a[aria-current]{box-shadow:inset 3px 0 0 var(--sky)}
.nav-dd-pop .dd-all{margin-top:6px;padding-top:6px;border-top:1px solid var(--line-night)}
.nav .nav-dd-pop .dd-all a{color:var(--sky);font-weight:600}
.nav-dd-pop .dd-all svg{width:16px;height:16px}
@media (max-width:1240px){.nav-dd-btn{padding:10px 8px;font-size:.92rem}.nav-dd-btn::after{left:8px;right:24px}}
@media (max-width:1120px){
  .menu-open .nav .nav-dd{display:block;border-bottom:1px solid var(--line-night)}
  .menu-open .nav .nav-dd-btn{width:100%;justify-content:space-between;font-size:1.15rem;padding:15px 6px;color:#fff;border-radius:0}
  .menu-open .nav .nav-dd-btn::after{display:none}
  .menu-open .nav .nav-dd-pop{position:static;display:none;min-width:0;padding:0 0 10px 12px;border:0;border-radius:0;background:none;box-shadow:none;visibility:visible;opacity:1;transform:none;transition:none}
  .menu-open .nav .nav-dd.open .nav-dd-pop{display:block}
  .menu-open .nav .nav-dd-pop a{font-size:1.02rem;padding:11px 8px;border-bottom:0;border-radius:8px}
}
@media (prefers-reduced-motion:reduce){.nav-dd-pop,.nav-dd-btn svg,.nav-dd-btn::after{transition:none}}

/* Sous-titre d’en-tête de page (page Marque blanche) */
.phead .phead-sub{margin:-6px 0 16px}

/* Douleur : bascule positive et intro des cartes */
.tc-pivot{display:flex;gap:12px;align-items:flex-start;max-width:72ch;margin:-6px 0 26px;padding:14px 18px;border-radius:12px;background:#e3ecff;border:1px solid #c9d8fb;color:var(--ink);font-weight:600;line-height:1.5}
.tc-pivot svg{flex:none;width:22px;height:22px;color:var(--valid);margin-top:1px}
.ink .tc-pivot{background:rgba(42,85,214,.16);border-color:rgba(143,180,255,.3);color:#fff}
.tc-sub{margin:0 0 16px;font:600 .9rem var(--text);color:var(--muted-paper);text-transform:none}
.ink .tc-sub{color:var(--muted-night)}

/* Cas réels : 10e case, appel à l’action */
.press .press-cta article{background:linear-gradient(160deg,var(--ink),#0e2463)!important;border-color:transparent!important;color:#fff}
.press .press-cta .ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(143,180,255,.16);color:var(--sky);margin-bottom:14px}
.press .press-cta .ic svg{width:24px;height:24px}
.press .press-cta h3{color:#fff}
.press .press-cta p{color:var(--muted-night)}
.press .press-cta .btns{margin:auto 0 12px}
.pc-link{display:inline-flex;align-items:center;gap:6px;color:var(--sky);font-weight:600;font-size:.94rem}
.pc-link svg{width:16px;height:16px}

/* Cartes métiers cliquables */
.tt-sub{margin:clamp(30px,4vw,44px) 0 18px}
.tt-sub h3{font-size:clamp(1.3rem,2vw,1.6rem);margin:0 0 4px}
.tt-sub p{margin:0;color:var(--muted-paper)}
.ttiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.ttile{display:flex;flex-direction:column;height:100%;border-radius:var(--r-l);overflow:hidden;background:#fff;border:1px solid #d6d1c4;color:var(--ink);text-decoration:none;box-shadow:0 10px 28px rgba(20,48,138,.06);transition:transform .2s,box-shadow .2s,border-color .2s}
.ttile:hover,.ttile:focus-visible{transform:translateY(-3px);border-color:var(--royal);box-shadow:0 18px 40px rgba(20,48,138,.16)}
.tt-img{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--night)}
.tt-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.ttile:hover .tt-img img{transform:scale(1.04)}
.tt-tx{position:relative;display:flex;flex-direction:column;gap:4px;flex:1;padding:18px 18px 20px}
.tt-tx .ic{position:absolute;top:-22px;left:16px;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--royal);color:#fff;box-shadow:0 0 0 4px #fff}
.tt-tx .ic svg{width:22px;height:22px}
.tt-tx b{margin-top:16px;font:600 1.06rem/1.3 var(--display)}
.tt-tx>span:not(.ic){color:var(--muted-paper);font-size:.93rem;line-height:1.45}
.tt-codes{margin-top:6px;font:600 .76rem var(--mono);letter-spacing:.06em;color:var(--royal)}
.tt-tx em{margin-top:auto;padding-top:10px;color:var(--royal);font-style:normal}
.tt-tx em svg{width:18px;height:18px;transition:transform .2s}
.ttile:hover em svg{transform:translateX(4px)}
@media (max-width:1060px){.ttiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.ttiles{grid-template-columns:1fr}.tt-img{aspect-ratio:16/9}}
@media (prefers-reduced-motion:reduce){.ttile,.tt-img img,.tt-tx em svg{transition:none}}

/* Point 7, option A : bloc positif pleine largeur */
.dpos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.4vw,18px);counter-reset:dp}
.dpos li{position:relative;display:flex;flex-direction:column;padding:22px 20px;border-radius:var(--r-l);background:linear-gradient(155deg,#fff 0%,#fbf9f4 100%);border:1px solid #d6d1c4;box-shadow:0 10px 28px rgba(20,48,138,.06)}
.dpos .ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#e3ecff;color:var(--royal);margin-bottom:14px}
.dpos .ic svg{width:22px;height:22px}
.dpos h3{font-size:1.02rem;line-height:1.35;margin:0 0 8px}
.dpos p{margin:0;color:var(--muted-paper);font-size:.94rem}
@media (max-width:1180px){.dpos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.dpos{grid-template-columns:1fr}}

/* Minuteurs, en section autonome (accueil, Comment on travaille, Rapport ou inspection) */
.timesec .cover-time{margin-top:0;padding-top:0;border-top:0}

/* « Les chiffres » : sobres et sourcés */
.figs{list-style:none;margin:0;padding:0;display:grid;gap:clamp(12px,1.6vw,20px)}
.figs.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.figs.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.figs li{display:flex;flex-direction:column;padding:24px 24px 20px;border-radius:var(--r-l);background:#fff;border:1px solid #d6d1c4;border-top:3px solid var(--royal)}
.fig-big{display:block;font:700 clamp(2.2rem,3.6vw,3rem)/1 var(--display);letter-spacing:-.02em;color:var(--ink);margin-bottom:12px}
.fig-q{margin:0 0 12px;font:600 1.12rem/1.4 var(--display);color:var(--ink)}
.figs p{margin:0 0 10px;color:var(--on-paper);font-size:.96rem}
.figs .fig-note{font-size:.88rem;color:var(--muted-paper);padding-left:10px;border-left:2px solid #c9d8fb}
.figs .fig-src{margin:auto 0 0;padding-top:12px;border-top:1px solid #e6e1d5;font-size:.8rem;color:var(--muted-paper)}
.fig-src a{color:var(--royal);word-break:break-word}
@media (max-width:900px){.figs.c2,.figs.c3{grid-template-columns:1fr}}

/* Pied de page : colonne « Métiers » (5 colonnes) */
.foot-cols{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1240px){.foot-cols{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.foot-cols{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.foot-cols{grid-template-columns:1fr}}
.press .press-cta a.btn-main{color:#fff!important;text-decoration:none}
.press .press-cta a.pc-link{color:var(--sky)!important}
/* V45.2 — sélecteur de langue : drapeau belge + code (FR · NL · DE) */
.lang3 .lang-pop{width:236px}
.lang3>button .lbl{display:inline!important;font:700 .86rem var(--display);letter-spacing:.06em}
.lang3>button .bflag .flag,.lang3>button .bflag svg{width:22px;height:15px;display:block}
.lang3 .lc-code{display:inline-grid;place-items:center;min-width:34px;height:24px;border-radius:6px;background:rgba(143,180,255,.12);box-shadow:inset 0 0 0 1px rgba(143,180,255,.22);font:700 .74rem var(--display);letter-spacing:.06em;color:#fff;flex:none}
.lang3 .lc-lng{flex:1;color:var(--on-night)!important;font-size:.95rem!important;font-weight:600!important}
.lang3 .lc-row.sel .lc-ok{opacity:1}
.lang3 .lc-row.sel .lc-code{background:var(--royal)}
@media (max-width:820px){.lang3>button{padding:0 9px;gap:6px}}

/* ═════════ V45.3 — corrections du premier écran (22/10, 20 h 54) ═════════ */
/* Vidéo : l’image finale n’apparaît qu’à la fin (plus de voiture qui « saute ») ; fondu si on l’interrompt */
.hero2 .stage .still{opacity:0;transition:opacity .5s ease}
.hero2 .stage.ended .still{opacity:1}
.hero2 .stage video{transition:opacity .5s ease}

/* Logo plus grand ; « NUMÉRO UNIQUE DE RÉFÉRENCE » exactement de l’extrémité du N à celle du R */
.brand{align-items:stretch}
.brand-sub{display:block;width:100%;height:auto;margin-top:5px;overflow:visible}
.brand-sub text{font-family:var(--text);font-weight:700;font-size:42px;fill:#cfdcfb}
@media (min-width:821px){
  .top .wrap{height:92px}
  .brand img{height:60px}
  html{scroll-padding-top:106px}
  .hero2 .wrap.hero-grid{padding-top:118px}
}
@media (max-width:820px){.brand-sub{display:none}}

/* Les deux cartes : plus hautes, plus lisibles */
.hc-in{padding:20px 20px 18px}
.hc-head{margin-bottom:6px}
.hc-t{font-size:1.06rem}
.hc-desc{margin:0 0 14px;font-size:.88rem;line-height:1.45;color:#c4d1ee;transition:opacity .35s}
.hcard:not(.lit) .hc-desc{opacity:.74}
.hc-row input,.hc-pfx{height:54px}
.hc-row .btn{min-height:54px;font-size:1rem;padding:.6em 1.15em}

/* Grand écran : bloc de texte et cartes à l’échelle de l’écran ; la carte non-gage sur la même ligne que les deux cartes */
@media (min-width:1180px){
  .hero2 .wrap.hero-grid{grid-template-rows:1fr auto}
  .hero2 .hero-text{grid-row:1}
  .hero-dock{grid-row:2;align-self:stretch;margin-bottom:58px}
  .hero-ng{grid-row:2;grid-column:1;align-self:stretch;margin:0 0 58px;max-width:none}
}
@media (min-width:1500px){
  .hero2 .wrap.hero-grid{grid-template-columns:minmax(0,clamp(540px,33vw,700px)) minmax(0,1fr)}
  .hero2 h1{font-size:clamp(3.6rem,3.9vw,5.1rem);max-width:13ch}
  .hero2 .lead{font-size:clamp(1.12rem,1.05vw,1.32rem);max-width:none}
  .hero-sub{font-size:clamp(1.05rem,.95vw,1.25rem)}
  .hero2 .hero-text .btn{font-size:1.06rem;padding:.85em 1.5em}
  .hero2 .open-note{font-size:.98rem}
  .hc-in{padding:26px 26px 22px}
  .hc-t{font-size:1.2rem}
  .hc-desc{font-size:.96rem;margin-bottom:16px}
  .hc-ic.hc-nur{width:46px;height:30px;font-size:.8rem}
  .hc-row input,.hc-pfx{height:58px;font-size:1.08rem}
  .hc-row .btn{min-height:58px;font-size:1.05rem}
  .hc-hint{font-size:.86rem}
  .hero-ng{padding:22px 26px;gap:18px}
  .hero-ng p{font-size:.98rem}
}

/* Déclaration de non-gage : une vraie carte, alignée sur les deux autres, avec son bouton */
.hero-ng{position:relative;align-items:center;padding:18px 20px;gap:16px;border-radius:16px;background:linear-gradient(180deg,rgba(10,22,54,.80),rgba(4,11,30,.90));border:1px solid rgba(143,180,255,.22);box-shadow:0 26px 60px rgba(0,0,0,.42);transition:border-color .3s,box-shadow .3s,transform .3s}
.hero-ng::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,var(--sky),var(--royal))}
.hero-ng:hover{border-color:rgba(143,180,255,.42);box-shadow:0 26px 60px rgba(0,0,0,.48),0 0 30px rgba(42,85,214,.25);transform:translateY(-2px)}
.hero2.done .hero-ng{border-color:rgba(143,180,255,.30)}
.hero-ng .ng-ic{width:44px;height:44px;border-radius:12px}
.hero-ng .ng-ic svg{width:22px;height:22px}
.hero-ng p{font-size:.92rem;line-height:1.5}
.hero-ng p a{display:flex;width:max-content;align-items:center;gap:6px;margin-top:10px;padding:7px 15px;border-radius:999px;border:1.5px solid rgba(143,180,255,.45);color:#fff!important;text-decoration:none!important;font-weight:600;white-space:nowrap;transition:background-color .2s,border-color .2s}
.hero-ng p a::after{content:"→";font-weight:700}
.hero-ng p a:hover{background:rgba(42,85,214,.35);border-color:var(--sky)}
/* V45.3 : la carte non-gage construite comme les deux autres (titre, phrase, bouton) */
.hero-ng.ng2{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:0;padding:20px 20px 18px 22px}
.ng2 .ng-head{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.ng2 .ng-ic{width:40px;height:40px;border-radius:11px;flex:none}
.ng2 .hc-t{flex:1}
.ng-badge{flex:none;padding:4px 10px;border-radius:999px;background:rgba(23,163,90,.16);box-shadow:inset 0 0 0 1px rgba(95,211,147,.4);color:#7fe0aa;font:700 .72rem var(--display);letter-spacing:.06em;text-transform:uppercase}
.ng2 .hc-desc{margin:0 0 14px}
.ng-cta{display:flex;width:max-content;align-items:center;gap:8px;min-height:46px;padding:0 20px;border-radius:999px;border:1.5px solid rgba(143,180,255,.45);color:#fff;text-decoration:none;font:600 .96rem var(--text);transition:background-color .2s,border-color .2s}
.ng-cta svg{width:18px;height:18px;transition:transform .2s}
.ng-cta:hover{background:rgba(42,85,214,.35);border-color:var(--sky)}
.ng-cta:hover svg{transform:translateX(3px)}
@media (min-width:1500px){.ng2 .ng-head{margin-bottom:8px}.ng-cta{min-height:54px;font-size:1.02rem}.hero-ng.ng2{padding:26px 26px 22px 28px}}
/* le sous-titre du logo a exactement la largeur du logo */
.brand{--lh:44px}
.brand img{height:var(--lh)}
.brand-sub{width:calc(var(--lh) * 2.3653)}
@media (min-width:821px){.brand{--lh:60px}}
.brand-sub text{font-size:52px;letter-spacing:0}
@media (min-width:821px){.top .wrap{height:98px}.brand{--lh:66px}.hero2 .wrap.hero-grid{padding-top:122px}html{scroll-padding-top:112px}}
/* V45.3 : le premier écran tient toujours dans la hauteur de l’écran (tailles liées à la largeur ET à la hauteur) */
@media (min-width:1180px){
  .top .wrap{height:clamp(78px,9vh,98px)}
  .brand{--lh:clamp(50px,6.1vh,66px)}
  html{scroll-padding-top:clamp(92px,10.5vh,112px)}
  .hero2 .wrap.hero-grid{padding-top:calc(clamp(78px,9vh,98px) + clamp(10px,2.2vh,26px));padding-bottom:0}
  .hero2 .open-note{margin-bottom:clamp(10px,1.8vh,22px);font-size:min(.98rem,1.75vh)}
  .hero2 h1{font-size:min(5.1rem,3.95vw,6.3vh);margin-bottom:min(16px,1.6vh);max-width:13ch}
  .hero-sub{font-size:min(1.25rem,.98vw,2.05vh);margin-bottom:min(14px,1.4vh)}
  .hero2 .lead{font-size:min(1.32rem,1.06vw,2.02vh);line-height:1.55;margin-bottom:min(26px,2.4vh);max-width:none}
  .hero2 .hero-text .btn{font-size:min(1.06rem,1.9vh);padding:min(.85em,1.3vh) 1.4em}
  .hero2 .hero-text{padding-bottom:min(12px,1.2vh)}
  .hero-dock,.hero-ng{margin-bottom:clamp(14px,4.6vh,58px)!important}
  .hc-in,.hero-ng.ng2{padding:min(26px,2.2vh) min(26px,1.6vw) min(22px,1.9vh)}
  .hc-head,.ng2 .ng-head{margin-bottom:min(8px,.8vh)}
  .hc-t{font-size:min(1.2rem,.92vw,1.95vh)}
  .hc-desc{font-size:min(.96rem,1.6vh);margin-bottom:min(16px,1.4vh)}
  .hc-row input,.hc-pfx{height:min(58px,5.4vh);min-height:42px;font-size:min(1.08rem,1.85vh)}
  .hc-row .btn{min-height:max(42px,min(58px,5.4vh));font-size:min(1.05rem,1.8vh)}
  .hc-hint{font-size:min(.86rem,1.45vh);margin-top:min(8px,.8vh)}
  .ng2 .ng-ic{width:min(40px,4vh);height:min(40px,4vh)}
  .ng-cta{min-height:max(38px,min(54px,5vh));font-size:min(1.02rem,1.75vh)}
}
@media (min-width:1180px) and (max-height:800px){.hero2 .hc-desc{display:none}}


/* V45.3b : la carte non-gage construite exactement comme les cartes VIN et NUR (titre · phrase · ligne d’action · aide) */
.hero-ng.ng2{display:block;padding:min(26px,2.2vh) min(26px,1.6vw) min(22px,1.9vh)}
.hero-ng.ng2::before{display:none}
.hero-ng.ng2 .ng-ic{width:40px;height:26px;border-radius:7px;background:linear-gradient(135deg,var(--ink),var(--royal));box-shadow:inset 0 0 0 1px rgba(143,180,255,.35)}
.hero-ng.ng2 .ng-ic svg{width:16px;height:16px;color:#fff;margin:0}
.ng2 .hc-row{flex-wrap:nowrap}
.ng-open{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:10px;height:min(58px,5.4vh);min-height:42px;padding:0 16px;box-sizing:border-box;border:1.5px solid rgba(143,180,255,.30);border-radius:10px;background:rgba(3,10,29,.66);color:#fff;text-decoration:none;font:600 min(1.02rem,1.8vh) var(--text);transition:border-color .2s,background-color .2s}
.ng-open svg{width:20px;height:20px;flex:none;color:var(--sky);transition:transform .2s}
.ng-open:hover,.ng-open:focus-visible{border-color:var(--sky);background:rgba(42,85,214,.22);outline:none}
.ng-open:hover svg{transform:translateX(4px)}
.ng-free{flex:none;display:grid;place-items:center;min-height:max(42px,min(58px,5.4vh));padding:0 1.15em;box-sizing:border-box;border-radius:999px;background:rgba(23,163,90,.18);box-shadow:inset 0 0 0 1.5px rgba(95,211,147,.55);color:#7fe0aa;font:700 min(.92rem,1.65vh) var(--display);letter-spacing:.08em;text-transform:uppercase}
@media (max-width:1179px){.ng-open{height:48px}.ng-free{min-height:48px}.hero-ng.ng2{padding:15px 14px 13px}}
@media (min-width:1180px) and (max-height:740px){.hero-dock,.hero-ng{margin-bottom:16px!important}}
@media (min-width:1180px) and (max-height:740px){.ng2 .hc-hint span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}
.hero-ng.ng2 p.hc-hint{font-size:min(.86rem,1.45vh);line-height:1.4;color:var(--muted-night);margin:min(8px,.8vh) 0 0}
.hero-ng.ng2 p.hc-desc{font-size:min(.96rem,1.6vh);line-height:1.45;color:#c4d1ee}
.hero-ng.ng2 .hc-t{font-size:min(1.2rem,.92vw,1.95vh)}

@media (min-width:1180px){
  .hero2 h1{font-size:min(5.1rem,3.95vw,5.7vh)}
  .hero2 .lead{font-size:min(1.32rem,1.06vw,1.9vh)}
  .hero2 .open-note{margin-bottom:clamp(8px,1.4vh,22px)}
  .hero-dock,.hero-ng{margin-bottom:clamp(14px,3.6vh,58px)!important}
}

/* V45.3c : les 8 métiers sur la même ligne que le logo ; les autres pages dans « Le service ▾ » */
.navx{display:none}
@media (min-width:1280px){
  .top .wrap{gap:clamp(10px,1.2vw,22px)}
  #nav{display:none}
  .navx{display:flex;align-items:center;justify-content:flex-end;flex:1 1 auto;min-width:0;gap:clamp(2px,.45vw,10px);margin-left:auto}
  .navx>a{position:relative;padding:10px clamp(4px,.5vw,10px);color:var(--muted-night);text-decoration:none;white-space:nowrap;font:500 clamp(.84rem,.78vw,.98rem) var(--text);transition:color .2s}
  .navx>a::after{content:"";position:absolute;left:clamp(4px,.5vw,10px);right:clamp(4px,.5vw,10px);bottom:5px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--sky),#5d86ff);transform:scaleX(0);transform-origin:0 50%;transition:transform .25s}
  .navx>a:hover,.navx>a[aria-current]{color:#fff}
  .navx>a:hover::after,.navx>a:focus-visible::after,.navx>a[aria-current]::after{transform:scaleX(1)}
  .navx-dd{margin-left:clamp(4px,.6vw,14px);padding-left:clamp(8px,.9vw,18px);border-left:1px solid rgba(143,180,255,.2)}
  .navx-dd .nav-dd-btn{font-size:clamp(.84rem,.78vw,.98rem);padding:10px 8px}
  .navx-dd .nav-dd-pop{left:auto;right:0}
  .navx-dd .dd-all{margin-top:6px;padding-top:6px;border-top:1px solid rgba(143,180,255,.18)}
  .tools .btn-main{white-space:nowrap}
}
@media (min-width:1280px) and (max-width:1439px){.tools .btn-main{padding-left:1em;padding-right:1em;font-size:.88rem}.lang3>button{padding:0 8px}}
@media (min-width:1280px){.navx{padding-left:24px}}
@media (min-width:1280px) and (max-width:1439px){.navx{gap:0}.navx>a{padding-left:7px;padding-right:7px;font-size:.84rem}.navx>a::after{left:7px;right:7px}.navx-dd{margin-left:4px;padding-left:8px}.navx-dd .nav-dd-btn{font-size:.84rem;padding:10px 6px}.lang3>button{padding:0 7px;gap:5px}}
/* V45.3c : alignement strict des 3 cartes, dans toutes les langues (même hauteur de titre et de phrase) */
.hero2 .hc-head,.hero-ng.ng2 .hc-head{min-height:30px;box-sizing:border-box}
.hero2 .hc-desc,.hero-ng.ng2 p.hc-desc{line-height:1.45;min-height:2.9em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (min-width:1180px) and (max-height:800px){.hero2 .hc-desc,.hero-ng.ng2 p.hc-desc{display:none}}
.hero-ng.ng2 p.hc-desc,.hero2 .hc-desc{margin:0 0 min(16px,1.4vh)}
.navx .nav-dd-pop{min-width:240px}
.navx .nav-dd-pop a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;color:#dbe4fa;font-size:.94rem;text-decoration:none}
.navx .nav-dd-pop a:hover,.navx .nav-dd-pop a:focus-visible,.navx .nav-dd-pop a[aria-current]{background:rgba(143,180,255,.12);color:#fff;outline:none}
.navx .nav-dd-pop a[aria-current]{box-shadow:inset 3px 0 0 var(--sky)}
.navx .dd-all a{color:var(--sky);font-weight:600}

/* V45.4 : panneau « agents d’IA » (étape 1 de notre procédé), à la place de la feuille grise générique */
.tbx-auto{background:linear-gradient(180deg,rgba(42,85,214,.10),rgba(143,180,255,.03));border:1px solid rgba(143,180,255,.22);border-style:solid}
.ai-panel{position:relative;margin:0 auto;width:min(100%,250px);padding:14px 14px 16px;border-radius:12px;background:linear-gradient(180deg,#0b1a44,#06102b);border:1px solid rgba(143,180,255,.32);box-shadow:0 20px 40px rgba(0,0,0,.45),0 0 30px rgba(42,85,214,.18);overflow:hidden;text-align:left}
.ai-top{display:flex;align-items:center;gap:8px;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid rgba(143,180,255,.18);font:600 .7rem/1.2 var(--text);color:#c4d1ee;letter-spacing:.02em}
.ai-chip{display:grid;place-items:center;width:28px;height:20px;border-radius:6px;background:linear-gradient(135deg,#2a55d6,#6a8cff);color:#fff;font:700 .66rem var(--display);letter-spacing:.06em}
.ai-pulse{margin-left:auto;width:8px;height:8px;border-radius:50%;background:#5fd393;box-shadow:0 0 0 0 rgba(95,211,147,.6);animation:aipulse 1.8s ease-out infinite}
@keyframes aipulse{0%{box-shadow:0 0 0 0 rgba(95,211,147,.6)}70%{box-shadow:0 0 0 8px rgba(95,211,147,0)}100%{box-shadow:0 0 0 0 rgba(95,211,147,0)}}
.ai-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ai-list li{display:flex;align-items:center;gap:8px;font:500 .78rem/1.3 var(--text);color:#dbe4fa}
.ai-list li svg{width:16px;height:16px;flex:none;color:#5fd393}
.ai-list li.ai-flag{margin-top:4px;padding:7px 9px;border-radius:8px;background:rgba(240,170,70,.12);box-shadow:inset 0 0 0 1px rgba(240,170,70,.35);color:#ffd9a3}
.ai-list li.ai-flag svg{color:#ffb44d}
.ai-panel .ra-scan{background:linear-gradient(180deg,transparent,rgba(143,180,255,.35),transparent)}
.tbx-auto .ra-tag{background:#0d1d4a;border-color:rgba(143,180,255,.35)}
.tbx-auto figcaption .tbx-big{color:#cfe0ff}
.tbx.arm .ai-list li{opacity:.25;transition:opacity .25s}
.tbx.arm.run .ai-list li{opacity:1}
.tbx.arm.run .ai-list li:nth-child(1){transition-delay:.1s}.tbx.arm.run .ai-list li:nth-child(2){transition-delay:.3s}.tbx.arm.run .ai-list li:nth-child(3){transition-delay:.5s}.tbx.arm.run .ai-list li:nth-child(4){transition-delay:.7s}.tbx.arm.run .ai-list li:nth-child(5){transition-delay:.9s}
.tbx-vs span{width:auto;min-width:44px;padding:0 10px;border-radius:999px;font-size:.78rem}
@media (max-width:900px){.tbx-auto .ai-panel{grid-row:1/3;width:100%;padding:10px}.tbx-auto .ai-list li{font-size:.7rem}.tbx-auto .ai-top{font-size:.6rem}}
@media (prefers-reduced-motion:reduce){.ai-pulse{animation:none}.tbx.arm .ai-list li{opacity:1}}
.tbx-auto{display:flex;flex-direction:column;justify-content:center}
.ra-tag span{white-space:nowrap}
@media (max-width:900px){
  .tbx .tbx-auto{display:block;padding:18px 16px}
  .tbx-auto .ai-panel{width:min(100%,300px);padding:14px}
  .tbx-auto .ai-list li{font-size:.8rem}.tbx-auto .ai-top{font-size:.7rem}
  .tbx-auto .ra-tag{margin:-14px auto 0}
  .tbx-auto figcaption{margin-top:14px;text-align:center}
}

/* V45.4 : étapes centrées (chaque colonne centrée, le pointillé va du centre du 1er rond au centre du dernier) */
@media (min-width:821px){
  .steps li{padding:0 clamp(10px,1.6vw,26px);text-align:center}
  .steps .n{margin-left:auto;margin-right:auto}
  .steps::before{left:calc(100% / var(--n,3) / 2);right:calc(100% / var(--n,3) / 2)}
  .steps p{max-width:30ch;margin-left:auto;margin-right:auto}
}