/* ACETT Intérim & Recrutement — feuille de style v4 « Signalétique de chantier, couleurs métiers »
   Fond papier, bleu marine ACETT pour le texte et les actions, bleu vif pour les surlignages.
   Titres : Archivo élargi très gras · Texte : IBM Plex Sans · Références : IBM Plex Mono.
   Toutes les polices sont hébergées sur le site (aucun service extérieur). */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/inter-latin-wght.woff) format("woff")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600 800;font-display:swap;src:url(/assets/fonts/manrope-latin-wght.woff) format("woff")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
:root{
  color-scheme:light;
  --papier:#F6F6F2;--papier-2:#F2F2ED;--blanc:#FFFFFF;
  --navy:#0B0C5C;--navy-2:#2533B8;--navy-deep:#0A0B3F;
  --ink:#0B0C2A;--text:#373A4F;--muted:#6B6D84;
  --trait:#E6E5DE;--trait-fort:#D2D1C8;
  --surligne:#2F45E8;--pale:#ECEEFE;
  --on-dark:#D9DCF5;--on-dark-soft:#A9AED6;
  --erreur:#C2261B;--erreur-fond:#FDE9E6;--ok:#147A4B;--ok-fond:#E2F4EA;
  --titre:"Manrope","Inter",system-ui,sans-serif;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"Inter",system-ui,sans-serif;--plan:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --max:1200px;--gut:28px;--sec:96px;--hh:68px;
}
@media (max-width:640px){:root{--gut:16px;--sec:60px;--hh:60px}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hh) + 16px)}
body{margin:0;background:var(--papier);color:var(--text);font:400 16.5px/1.6 var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
@media (max-width:640px){body{font-size:16px}}
sup{font-size:.62em;line-height:0;position:relative;top:-.55em;vertical-align:baseline}
h1,h2,h3{color:var(--ink);margin:0;text-wrap:balance}
h1,h2{font-family:var(--titre);font-weight:850;letter-spacing:-.025em;line-height:1.02}
h1{font-size:clamp(2rem,4.4vw,3.4rem)}
h2{font-size:clamp(1.55rem,3.1vw,2.5rem)}
h3{font-size:1.1rem;line-height:1.3;font-weight:600}
p{margin:0 0 1em}
p,li{text-wrap:pretty}
a{color:inherit}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
[tabindex="-1"]:focus{outline:none}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--navy);color:#fff;padding:10px 14px;font-weight:600}
.skip:focus{top:12px}
.nw{white-space:nowrap}
.noscript{background:var(--blanc);border:2px solid var(--navy);padding:14px 16px;margin:16px 0}
.lien{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--surligne);text-decoration-thickness:2px;text-underline-offset:3px}
.lien:hover{text-decoration-thickness:3px}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 18px;border:2px solid transparent;border-radius:0;font:600 15px/1.2 var(--font);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .15s,color .15s,border-color .15s}
.btn-action{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-action::after{content:"→";font-weight:600}
.btn-action:hover{background:var(--navy-2);border-color:var(--navy-2)}
.appel .btn-action,.menu-actions .btn-action,.bloc.fonce .btn-action{background:#fff;border-color:#fff;color:var(--navy)}
.appel .btn-action:hover,.menu-actions .btn-action:hover,.bloc.fonce .btn-action:hover{background:var(--papier);border-color:var(--papier)}
.btn-ligne{background:transparent;border-color:var(--navy);color:var(--navy)}
.btn-ligne:hover{background:var(--navy);color:#fff}
.btn-ligne-c{background:transparent;border-color:#fff;color:#fff}
.btn-ligne-c:hover{background:#fff;color:var(--navy)}
.btn-plein{width:100%}
.btn-xl{min-height:56px;padding:14px 24px;font-size:16.5px}
.btn:disabled{opacity:.6;cursor:wait}

/* ---------- En-tête (une seule ligne) ---------- */
.top{position:sticky;top:0;z-index:60;background:var(--papier);border-bottom:2px solid var(--navy);transition:transform .25s ease}
.top.cache{transform:translateY(-100%)}
.top-ligne{display:flex;align-items:center;gap:22px;height:var(--hh)}
.logo{display:block;flex:none;line-height:0}
.logo svg{height:38px;width:auto;--lg:#36518A;--lt:var(--navy)}
@media (max-width:640px){.logo svg{height:32px}}
.nav{margin-left:auto}
.nav ul{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.nav a{display:block;padding:8px 10px;font-weight:500;font-size:15px;text-decoration:none;color:var(--ink);border-bottom:3px solid transparent}
.nav a:hover{border-bottom-color:var(--trait)}
.nav a.actif{border-bottom-color:var(--navy)}
.top-tel{font:400 14px var(--mono);text-decoration:none;color:var(--ink);white-space:nowrap;padding:6px 0}
.top-tel:hover{text-decoration:underline}
.actions{display:flex;gap:8px}
.actions .btn{min-height:42px;padding:8px 14px;font-size:14.5px}
.actions .btn-action::after{content:none}
.actions .btn.actif{background:var(--navy);color:#fff}
.menu-btn{display:none;margin-left:auto;align-items:center;gap:10px;height:44px;padding:0 14px;background:var(--navy);color:#fff;border:0;border-radius:0;font:600 14px var(--font);cursor:pointer}
.menu-ic{position:relative;width:18px;height:12px}
.menu-ic i{position:absolute;left:0;right:0;height:2px;background:currentColor;transition:transform .2s}
.menu-ic i:first-child{top:1px}.menu-ic i:last-child{bottom:1px}
[aria-expanded="true"] .menu-ic i:first-child{transform:translateY(4px) rotate(45deg)}
[aria-expanded="true"] .menu-ic i:last-child{transform:translateY(-5px) rotate(-45deg)}
@media (max-width:1240px){.top-tel{display:none}}
@media (max-width:1080px){.nav,.actions{display:none}.menu-btn{display:inline-flex}}

/* Menu mobile plein écran */
.menu-mob{position:fixed;inset:var(--hh) 0 0 0;z-index:55;background:var(--navy);color:#fff;overflow-y:auto;padding:24px var(--gut) 40px;display:flex;flex-direction:column;gap:28px;overscroll-behavior:contain}
html.menu-ouvert{overflow:hidden}
html.menu-ouvert .top{transform:none}
.menu-liste{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.2)}
.menu-liste a{display:flex;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.2);font:850 clamp(1.5rem,7vw,2.3rem)/1.1 var(--titre);letter-spacing:-.02em;text-decoration:none;color:#fff}
.menu-liste a:hover{color:var(--on-dark-soft)}
.menu-liste .n{font:400 13px var(--mono);color:var(--on-dark-soft);letter-spacing:0;min-width:24px}
.menu-nb{margin-left:auto;font:400 14px var(--mono);background:#fff;color:var(--navy);padding:2px 8px;letter-spacing:0}
.menu-actions{display:grid;gap:10px}
.menu-actions .btn{min-height:54px;font-size:16px}
.menu-coord{display:grid;gap:6px;font:400 14px/1.5 var(--mono);color:var(--on-dark);margin:0}
.menu-coord a{color:#fff;text-decoration:none}

/* ---------- Sections ---------- */
.s{padding:var(--sec) 0}
.s-alt{background:var(--papier-2)}
.serre{padding-top:40px}
.head{max-width:760px;margin-bottom:44px}
.head p:last-child{margin-bottom:0}
.head h2{margin-bottom:16px}
.head-ligne{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.head-ligne h2{margin:0}
.k{display:flex;align-items:center;gap:12px;margin:0 0 18px;font:400 12.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.k span{display:inline-block;padding:5px 7px;border:1.5px solid var(--navy);color:var(--navy);letter-spacing:.04em}
.k-c{color:var(--on-dark-soft)}
.k-c span{border-color:#fff;color:#fff}
.balisage{position:relative;height:14px;background:repeating-linear-gradient(-45deg,var(--navy) 0 12px,var(--papier) 12px 24px);border-top:2px solid var(--navy)}

/* ---------- 1. Bandeau ---------- */
.hero{position:relative;background:var(--papier);background-image:linear-gradient(var(--trait) 1px,transparent 1px),linear-gradient(90deg,var(--trait) 1px,transparent 1px);background-size:48px 48px;background-position:-1px -1px}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--papier) 30%,rgba(243,240,232,.75));pointer-events:none}
.hero-grille{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:56px;align-items:center;padding-top:72px;padding-bottom:72px}
.tag{display:inline-block;margin:0 0 22px;font:400 13px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--navy);border:1.5px solid var(--navy);padding:6px 10px;background:var(--papier)}
.hero h1{margin-bottom:22px}
.lead{font-size:1.12rem;max-width:620px;color:var(--text)}
.hero-choix{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:32px}
.choix{display:flex;flex-direction:column;gap:6px;padding:20px 20px 18px;text-decoration:none;border:2px solid var(--navy);transition:transform .15s}
.choix:hover{transform:translateY(-2px)}
.choix .k{margin:0 0 4px;color:inherit;opacity:.75}
.choix strong{font:850 1.45rem/1.1 var(--titre);letter-spacing:-.02em}
.choix .txt{font-size:14.5px;line-height:1.45;flex:1}
.choix .go{align-self:flex-start;margin-top:10px;padding:9px 14px;background:var(--navy);color:#fff;font-weight:600;font-size:14.5px}
.choix .go::after{content:" →"}
.choix-rec{background:var(--navy);color:#fff}
.choix-rec strong{color:#fff}
.choix-rec .go{background:#fff;color:var(--navy)}
.choix-cand{background:var(--blanc);color:var(--ink)}
.panneau{background:var(--blanc);border:3px solid var(--navy);box-shadow:8px 8px 0 var(--navy)}
.panneau-t{display:flex;justify-content:space-between;gap:12px;background:var(--navy);color:#fff;padding:10px 16px;font:400 12.5px var(--mono);text-transform:uppercase;letter-spacing:.1em}
.panneau dl{margin:0}
.panneau dl div{display:grid;grid-template-columns:104px 1fr;border-bottom:1.5px solid var(--trait)}
.panneau dt{padding:12px 0 12px 16px;font:400 11.5px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.panneau dd{margin:0;padding:10px 16px 10px 0;font-weight:500;color:var(--ink);font-size:15px;line-height:1.45}
.panneau-b{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;background:var(--navy);color:#fff;font:600 1.2rem var(--mono);text-decoration:none}
.panneau-b span{font-size:12px;text-transform:uppercase;letter-spacing:.1em}
.panneau-b:hover{background:var(--navy-2)}
@media (max-width:980px){
  .hero-grille{grid-template-columns:1fr;gap:40px;padding-top:44px;padding-bottom:48px}
  .panneau{box-shadow:6px 6px 0 var(--navy);margin-right:6px}
}
@media (max-width:560px){.hero-choix{grid-template-columns:1fr}.choix strong{font-size:1.3rem}.panneau dl div{grid-template-columns:96px 1fr}.panneau dt{padding-left:12px;font-size:10.5px;letter-spacing:.03em}.tag{font-size:11.5px}}

/* ---------- 2. Métiers : liste-index + plan ---------- */
.index-met{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:56px;align-items:start}
.plan{position:sticky;top:calc(var(--hh) + 24px);margin:0;background:var(--blanc);border:2px solid var(--navy);padding:16px 16px 0;background-image:linear-gradient(var(--trait) 1px,transparent 1px),linear-gradient(90deg,var(--trait) 1px,transparent 1px);background-size:24px 24px}
.plan-svg{display:block;width:100%;height:auto;overflow:hidden}
.plan figcaption{margin:12px -16px 0;padding:10px 16px;border-top:2px solid var(--navy);background:var(--blanc);font:400 13px/1.4 var(--mono);color:var(--ink);min-height:3.2em}
.plan-cap{transition:opacity .2s}
.plan-cap.change{opacity:0}
.camera{transition:transform .7s cubic-bezier(.65,0,.25,1);transform-origin:0 0}
.plan-svg path,.plan-svg rect,.plan-svg circle{fill:none;stroke:var(--navy);stroke-width:1.5;vector-effect:non-scaling-stroke}
.plan-svg text{font:400 11px var(--mono);fill:var(--muted)}
.plan-svg .coque path{stroke-width:2}
.plan-svg .coque .ss{stroke-dasharray:6 5}
.plan-svg .eq rect,.plan-svg .eq circle{fill:var(--blanc)}
.plan-svg .res{opacity:.32;transition:opacity .3s}
.plan-svg .res>path{stroke-width:2}
.plan-svg .cote path{stroke:var(--muted);stroke-width:1}
.plan-svg .cart rect{fill:var(--blanc)}
.plan-svg .cart text{fill:var(--ink)}
.plan-svg[data-actif=intro] .res,.plan-svg[data-actif=be] .res,.plan-svg[data-actif=sup] .res,.plan-svg[data-actif=tce] .res,.plan-svg[data-actif=autre] .res,.plan-svg:not([data-actif]) .res{opacity:.85}
.plan-svg[data-actif=cvc] .res-cvc,.plan-svg[data-actif=froid] .res-froid,.plan-svg[data-actif=elec] .res-elec,.plan-svg[data-actif=secu] .res-secu{opacity:1}
.plan-svg[data-actif=cvc] .res-cvc>path,.plan-svg[data-actif=froid] .res-froid>path,.plan-svg[data-actif=elec] .res-elec>path,.plan-svg[data-actif=secu] .res-secu>path{stroke:var(--surligne);stroke-width:3.5}
.plan-svg[data-actif=cvc] .res-cvc text,.plan-svg[data-actif=froid] .res-froid text,.plan-svg[data-actif=elec] .res-elec text,.plan-svg[data-actif=secu] .res-secu text{fill:var(--ink);font-weight:600}
.plan-svg[data-actif=meca] .res{opacity:.85}
.plan-svg[data-actif=meca] .eq rect,.plan-svg[data-actif=meca] .eq circle{stroke:var(--surligne);stroke-width:2.5}
.plan-svg[data-actif=be] .cote path,.plan-svg[data-actif=be] .cart rect{stroke:var(--surligne);stroke-width:2.5}
.plan-svg[data-actif=tce] .coque path{stroke:var(--surligne);stroke-width:3}
.res.trace>path{stroke-dasharray:1;animation:trace .8s cubic-bezier(.4,0,.2,1) both}
@keyframes trace{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.metiers{list-style:none;margin:0;padding:0;border-top:2px solid var(--navy)}
.metier{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:4px 18px;align-items:start;padding:22px 16px 22px 12px;border-bottom:1.5px solid var(--trait);transition:background-color .2s}
.metier::before{content:"";position:absolute;left:0;top:-1.5px;bottom:-1.5px;width:4px;background:transparent;transition:background-color .2s}
.metier.actif{background:var(--blanc)}
.metier.actif::before{background:var(--surligne)}
.metier .num{font:400 15px/1.6 var(--mono);color:var(--muted);padding-top:2px}
.metier h3{font:850 1.3rem/1.15 var(--titre);letter-spacing:-.02em;margin-bottom:8px}
.metier p{margin:0 0 8px;font-size:15.5px}
.metier .comp{margin:0;font:400 12.5px/1.55 var(--mono);color:var(--muted)}
.m-lien{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;background:var(--navy);color:#fff;font:600 13.5px/1.2 var(--font);text-decoration:none;white-space:nowrap;margin-top:2px}
.m-lien::after{content:"→"}
.m-lien:hover{background:var(--navy-2)}
.metier.autre h3{font-size:1.15rem}
@media (max-width:980px){
  .index-met{grid-template-columns:1fr;gap:0}
  .plan{top:var(--hh);z-index:5;padding:8px 8px 0;margin:0 calc(var(--gut)*-1);border-width:0 0 2px;display:flex;flex-direction:column;align-items:center}
  .plan-svg{width:auto;height:min(30vh,240px);max-width:100%}
  .plan figcaption{margin:6px -8px 0;padding:8px var(--gut);width:calc(100% + 16px);min-height:0;font-size:12px;border-top-width:1.5px}
  body.entete-cache .plan{top:0}
  .metier{grid-template-columns:34px minmax(0,1fr);padding:20px 8px 20px 10px}
  .metier .m-lien{grid-column:2;justify-self:start;margin-top:10px}
  .metier h3{font-size:1.15rem}
}

/* ---------- Registre des offres (tableau triable, cartes sur mobile) ---------- */
.registre{background:var(--blanc);border:2px solid var(--navy)}
.reg{width:100%;border-collapse:collapse;font-size:15px}
.reg th{text-align:left;font:400 11.5px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:12px 14px;border-bottom:2px solid var(--navy);background:var(--papier);white-space:nowrap}
.reg th button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.reg th button:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.reg th button::after{content:"↕";opacity:.4}
.reg th[aria-sort=ascending] button::after{content:"↑";opacity:1;color:var(--ink)}
.reg th[aria-sort=descending] button::after{content:"↓";opacity:1;color:var(--ink)}
.reg thead td{border-bottom:2px solid var(--navy);background:var(--papier);padding:0}
.reg td{padding:14px;border-bottom:1px solid var(--trait);vertical-align:middle}
.reg tbody tr{cursor:pointer;transition:background-color .12s}
.reg tbody tr:hover{background:var(--pale)}
.reg tbody tr:last-child td{border-bottom:0}
.c-ref{font:400 12.5px var(--mono);color:var(--muted);white-space:nowrap;width:1%}
.c-poste a{font-weight:600;color:var(--ink);text-decoration:none;font-size:15.5px;line-height:1.35}
.c-poste a:hover,.reg tr:hover .c-poste a{text-decoration:underline;text-decoration-color:var(--surligne);text-decoration-thickness:2px;text-underline-offset:3px}
.c-poste .fil{display:block;font:400 12px/1.4 var(--mono);color:var(--muted);margin-top:3px}
.c-lieu{white-space:nowrap}
.c-sal{font:400 13.5px/1.4 var(--mono);color:var(--ink);white-space:nowrap}
.c-sal.nc{color:var(--muted)}
.ct{display:inline-block;padding:3px 8px;border:1.5px solid var(--navy);font:400 12px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--navy);white-space:nowrap}
.ct.interim{background:var(--navy);color:#fff}
.c-go{width:1%;text-align:right}
.c-go span{display:inline-grid;place-items:center;width:34px;height:34px;background:var(--navy);color:#fff;font-weight:600}
.registre-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.compte{margin:0;font:400 13.5px var(--mono);color:var(--ink)}
.tri-mob{display:none;align-items:center;gap:8px;font:400 12.5px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.tri-mob select{font:500 14.5px var(--font);color:var(--ink);background:var(--blanc);border:1.5px solid var(--navy);border-radius:0;padding:8px 10px;min-height:40px}
.vide{padding:28px 20px}
.vide p{font-weight:500;color:var(--ink)}
.vide-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
@media (max-width:1020px){.reg .c-ref{display:none}}
@media (max-width:760px){
  .registre{background:none;border:0}
  .reg,.reg tbody,.reg tr,.reg td{display:block}
  .reg thead{display:none}
  .reg tbody tr{position:relative;display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:center;background:var(--blanc);border:2px solid var(--navy);padding:14px 56px 14px 14px;margin-bottom:10px}
  .reg td{padding:0;border:0}
  .reg .c-ref{display:block;grid-column:1/-1;font-size:11.5px}
  .c-poste{grid-column:1/-1}
  .c-lieu{grid-column:1/-1;font-size:14.5px;white-space:normal}
  .c-ct{grid-column:1}
  .c-sal{grid-column:2;font-size:13px;white-space:normal}
  .c-go{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:auto}
  .tri-mob{display:inline-flex}
  .registre-une .reg tbody tr:nth-child(n+5){display:none}
}

/* Filtres et recherche */
.jobs-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-bottom:22px}
.filtres{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 12px;background:var(--blanc);border:1.5px solid var(--navy);border-radius:0;color:var(--ink);font:500 14.5px var(--font);cursor:pointer}
.chip .n{font:400 12px var(--mono);color:var(--muted)}
.chip:hover{background:var(--papier-2)}
.chip[aria-pressed=true]{background:var(--navy);color:#fff}
.chip[aria-pressed=true] .n{color:var(--on-dark)}
.recherche{position:relative;flex:0 1 320px}
.recherche svg{position:absolute;left:12px;top:50%;width:18px;height:18px;transform:translateY(-50%);fill:none;stroke:var(--navy);stroke-width:2}
.recherche input{width:100%;min-height:44px;padding:8px 12px 8px 40px;background:var(--blanc);border:1.5px solid var(--navy);border-radius:0;font:400 16px var(--font);color:var(--ink)}
@media (max-width:760px){
  .filtres{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(var(--gut)*-1);padding:2px var(--gut) 6px;scrollbar-width:none}
  .filtres::-webkit-scrollbar{display:none}
  .chip{flex:none}
  .recherche{flex:1 1 100%}
}
.avis{background:var(--pale);border-left:4px solid var(--navy);padding:12px 16px;color:var(--ink)}
.note{font-size:14px;color:var(--muted);margin:18px 0 0;max-width:820px}
.cand{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:48px}
.bloc{padding:28px;border:2px solid var(--navy);background:var(--blanc)}
.bloc h2{font-size:1.45rem;margin-bottom:10px}
.bloc small{display:block;margin-top:14px;color:var(--muted);font-size:13px}
.bloc.fonce{background:var(--navy);color:var(--on-dark)}
.bloc.fonce h2{color:#fff}
@media (max-width:760px){.cand{grid-template-columns:1fr}.bloc{padding:22px}}

/* ---------- 4. Entreprises ---------- */
.services{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.service{display:flex;flex-direction:column;padding:30px;background:var(--blanc);border:2px solid var(--navy)}
.lot{align-self:flex-start;margin:0 0 14px;font:400 12px var(--mono);text-transform:uppercase;letter-spacing:.1em;background:var(--navy);color:#fff;padding:4px 8px}
.service h3{font:850 1.6rem/1.1 var(--titre);letter-spacing:-.02em;margin-bottom:10px}
.service ul,.offre-texte ul,.legal ul{list-style:none;padding:0;margin:0 0 22px}
.service li,.offre-texte li{position:relative;padding-left:22px;margin:0 0 9px}
.service li::before,.offre-texte li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;background:var(--navy)}
.service .btn{margin-top:auto;align-self:flex-start}
.phasage{margin-top:56px}
.phasage h3{font:850 1.3rem/1.2 var(--titre);letter-spacing:-.02em;margin-bottom:20px}
.etapes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:3px solid var(--navy)}
.etapes li{padding:18px 20px 4px 0;position:relative}
.etapes li::before{content:"";position:absolute;top:-9px;left:0;width:14px;height:14px;background:var(--papier);border:3px solid var(--navy)}
.ph{display:block;font:400 12px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:4px 0 6px}
.etapes strong{display:block;color:var(--ink);font-size:1.05rem;margin-bottom:6px}
.etapes p{font-size:15px;margin:0}
@media (max-width:860px){
  .services{grid-template-columns:1fr}.service{padding:22px}
  .etapes{grid-template-columns:1fr;border-top:0;border-left:3px solid var(--navy);margin-left:6px}
  .etapes li{padding:0 0 22px 24px}
  .etapes li::before{top:4px;left:-9px}
}

/* ---------- 5. Profil ---------- */
.profil{display:grid;grid-template-columns:1fr 1.1fr;background:var(--blanc);border:2px solid var(--navy)}
.profil-t{padding:30px;border-right:2px solid var(--navy)}
.profil .fil{font:400 12px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 10px}
.profil h3{font:850 1.35rem/1.15 var(--titre);letter-spacing:-.02em;margin-bottom:12px}
.profil-d{margin:0}
.profil-d div{padding:16px 24px;border-bottom:1.5px solid var(--trait)}
.profil-d div:last-child{border-bottom:0}
.profil-d dt{font:400 11.5px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:4px}
.profil-d dd{margin:0;font-size:15px;color:var(--ink)}
@media (max-width:860px){.profil{grid-template-columns:1fr}.profil-t{border-right:0;border-bottom:2px solid var(--navy);padding:22px}.profil-d div{padding:14px 22px}}

/* ---------- 6. Agence et questions ---------- */
.agence{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:start}
.atouts{list-style:none;margin:0;padding:0;border-top:2px solid var(--navy)}
.atouts li{padding:18px 0;border-bottom:1.5px solid var(--trait)}
.atouts h3{margin-bottom:4px}
.atouts p{margin:0;font-size:15.5px}
.faq-t{font:850 1.3rem/1.2 var(--titre);letter-spacing:-.02em;margin:6px 0 18px}
.faq{border-top:2px solid var(--navy)}
.faq details{border-bottom:1.5px solid var(--trait)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:16px 0;font-weight:600;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 20px/1 var(--mono);color:var(--navy);flex:none}
.faq details[open] summary::after{content:"−"}
.faq .rep{padding:0 0 14px}
.faq .rep p{margin:0;font-size:15.5px}
.faq-plus{margin-top:18px;font-size:15px}
@media (max-width:900px){.agence{grid-template-columns:1fr;gap:48px}}

/* ---------- 7. Appel ---------- */
.appel{position:relative;background:var(--navy);color:var(--on-dark);padding:76px 0}
.appel::before{content:"";position:absolute;left:0;right:0;top:0;height:14px;background:repeating-linear-gradient(-45deg,var(--papier) 0 12px,var(--navy) 12px 24px)}
.appel-grille{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.appel .k{margin-bottom:22px}
.appel h2{color:#fff;font-size:clamp(1.8rem,4vw,3rem);margin-bottom:12px}
.appel p{margin:0;max-width:560px}
.appel-btns{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:560px){.appel-btns{width:100%}.appel-btns .btn{flex:1 1 100%}}

/* ---------- En-têtes de page ---------- */
.page-head{background:var(--papier);border-bottom:2px solid var(--navy);padding:40px 0 34px}
.page-head h1{margin-bottom:12px}
.page-head p{max-width:760px;margin:0}
.fil-ariane{font:400 12.5px/1.5 var(--mono);color:var(--muted);margin:0 0 16px!important}
.fil-ariane a{color:var(--ink)}

/* ---------- Fiche d'offre (cartouche) ---------- */
.offre-head h1{font-size:clamp(1.7rem,3.6vw,2.9rem);max-width:920px}
.offre-fil{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font:400 12.5px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 14px!important}
.offre-fil .ref{border:1.5px solid var(--navy);color:var(--navy);padding:3px 7px}
.offre-corps{padding-top:44px}
.offre-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:56px;align-items:start}
.offre-side{grid-column:2;grid-row:1;position:sticky;top:calc(var(--hh) + 20px)}
.offre-texte{grid-column:1;grid-row:1;max-width:740px}
.offre-texte h2{font-size:1.35rem;margin:34px 0 12px}
.offre-texte>h2:first-child{margin-top:0}
.cartouche{background:var(--blanc);border:3px solid var(--navy)}
.cartouche-t{display:flex;justify-content:space-between;gap:10px;background:var(--navy);color:#fff;padding:9px 14px;font:400 12px var(--mono);text-transform:uppercase;letter-spacing:.1em}
.cartouche dl{margin:0;display:grid;grid-template-columns:1fr 1fr}
.cartouche dl div{padding:11px 14px;border-bottom:1.5px solid var(--trait);border-right:1.5px solid var(--trait)}
.cartouche dl div:nth-child(2n){border-right:0}
.cartouche dl div.large{grid-column:1/-1;border-right:0}
.cartouche dt{font:400 10.5px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:2px}
.cartouche dd{margin:0;font-weight:600;font-size:14.5px;color:var(--ink);line-height:1.35}
.cartouche-b{padding:14px}
.offre-aide{margin:12px 0 0;font-size:14px;text-align:center}
.offre-aide a{font-family:var(--mono);color:var(--ink)}
.retour-liste{display:inline-block;margin-top:14px;font:400 13.5px var(--mono);color:var(--ink)}
.offre-apropos{margin-top:48px;padding-top:22px;border-top:2px solid var(--navy)}
.offre-apropos h2{font-size:1.15rem!important;margin-top:0!important}
.similaires{margin-top:72px}
.similaires h2{font-size:1.5rem;margin-bottom:18px}
.postuler-mobile{display:none}
@media (max-width:980px){
  .offre-grid{grid-template-columns:1fr;gap:36px}
  .offre-side,.offre-texte{grid-column:1;position:static}
  .offre-side{grid-row:1}.offre-texte{grid-row:2}
  .postuler-mobile{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));background:var(--papier);border-top:2px solid var(--navy);transition:transform .2s}
  .postuler-mobile .btn{width:100%}
  .postuler-mobile.cache{transform:translateY(110%)}
  body.vue-offre{padding-bottom:76px}
}

/* ---------- Formulaires ---------- */
.form-zone{background:var(--blanc);border:2px solid var(--navy);padding:30px}
.form-zone>h2{font-size:1.5rem;margin:0 0 8px}
.form-zone>p{margin:0 0 6px}
.rapide{font:400 12.5px var(--mono);color:var(--muted)}
.offre-texte .form-zone{margin-top:44px}
@media (max-width:640px){.form-zone{padding:20px 16px}}
form{margin-top:18px}
.bascule{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--navy);margin-bottom:22px}
.bascule input{position:absolute;opacity:0;pointer-events:none}
.bascule label{display:flex;align-items:center;justify-content:center;min-height:48px;padding:8px;font-weight:600;color:var(--ink);cursor:pointer}
.bascule input:checked+label{background:var(--navy);color:#fff}
.bascule input:focus-visible+label{outline:3px solid var(--surligne);outline-offset:-5px}
fieldset{border:0;margin:0;padding:0;min-width:0}
fieldset[disabled]{display:none}
.champs{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.champ{display:flex;flex-direction:column;gap:6px;min-width:0}
.champ.large{grid-column:1/-1}
.champ label{font-weight:600;font-size:14.5px;color:var(--ink)}
.champ .opt{font-weight:400;color:var(--muted);font-size:13px}
.champ input,.champ select,.champ textarea{width:100%;min-height:48px;padding:10px 12px;background:#fff;border:1.5px solid rgba(11,12,92,.55);border-radius:0;font:400 16px var(--font);color:var(--ink)}
.champ textarea{min-height:120px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:3px solid var(--navy);outline-offset:0;border-color:var(--navy)}
.champ [aria-invalid=true]{border-color:var(--erreur);background:var(--erreur-fond)}
.err{font-size:13.5px;color:var(--erreur);font-weight:500}
.err:empty{display:none}
@media (max-width:640px){.champs{grid-template-columns:1fr}}
/* Dépôt de CV par glisser-déposer */
.depot{position:relative;border:2px dashed var(--navy);background:var(--papier);transition:background-color .12s,border-color .12s}
.depot input[type=file]{position:absolute;inset:0;width:100%;height:100%;min-height:0;opacity:0;cursor:pointer;z-index:1;padding:0;border:0}
.depot-zone{display:flex;flex-direction:column;align-items:center;gap:4px;padding:24px 16px;text-align:center;pointer-events:none}
.depot-ic{width:40px;height:40px;border:2px solid var(--navy);display:grid;place-items:center;font:600 20px/1 var(--mono);color:var(--navy);margin-bottom:6px}
.depot-t{color:var(--ink);font-size:15.5px}
.depot-t u{text-decoration-color:var(--surligne);text-decoration-thickness:2px;text-underline-offset:3px}
.depot .toucher{display:none}
@media (pointer:coarse){.depot .glisser{display:none}.depot .toucher{display:inline}.depot-t u{font-weight:600}}
.depot-s{font:400 12.5px var(--mono);color:var(--muted)}
.depot:focus-within{outline:3px solid var(--navy);outline-offset:2px}
.depot.survol{border-style:solid;border-color:var(--surligne);background:var(--pale)}
.depot.a-fichier{border-style:solid;background:#fff}
.depot-fic{position:relative;z-index:2;display:flex;align-items:center;gap:12px;padding:14px 16px}
.depot-fic .depot-ic{margin:0;flex:none;width:36px;height:36px;font-size:12px}
.depot-nom{flex:1;min-width:0;overflow-wrap:anywhere;color:var(--ink);font-weight:600;font-size:15px;line-height:1.35}
.depot-nom small{display:block;font:400 12px var(--mono);color:var(--muted)}
.depot-retirer{flex:none;background:none;border:1.5px solid var(--navy);color:var(--ink);font:500 13.5px var(--font);padding:7px 10px;cursor:pointer;border-radius:0}
.depot-retirer:hover{background:var(--navy);color:#fff}
.depot.a-fichier .depot-zone{display:none}
.depot.a-fichier input[type=file]{z-index:0;pointer-events:none}
.champ [aria-invalid=true]+.depot-zone,.depot:has([aria-invalid=true]){border-color:var(--erreur);background:var(--erreur-fond)}
.piege{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.form-bas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:22px}
.form-bas small{font-size:13px;color:var(--muted);flex:1 1 240px}
.form-bas .btn{min-width:220px}
@media (max-width:640px){.form-bas .btn{width:100%}}
.retour{margin-top:18px;padding:14px 16px;border-left:4px solid var(--navy);background:var(--papier)}
.retour p{margin:0 0 6px}.retour p:last-child{margin:0}
.retour.ok{border-color:var(--ok);background:var(--ok-fond)}
.retour.ko{border-color:var(--erreur);background:var(--erreur-fond)}
.copie{margin-left:8px;background:none;border:1.5px solid var(--navy);font:500 12.5px var(--font);padding:3px 8px;cursor:pointer;color:var(--ink)}

/* ---------- Contact ---------- */
.ct-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:40px;align-items:start}
.ct-carte{background:var(--navy);color:var(--on-dark);padding:28px;position:sticky;top:calc(var(--hh) + 20px)}
.ct-carte h2{color:#fff;font-size:1.3rem;margin-bottom:20px}
.ct-liste{list-style:none;margin:0;padding:0}
.ct-liste li{display:flex;gap:14px;padding:13px 0;border-top:1px solid rgba(255,255,255,.18)}
.ct-liste .ic{flex:none;width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.7;margin-top:2px}
.ct-liste .lib{display:block;font:400 11.5px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--on-dark-soft)}
.ct-liste a{color:#fff;font-weight:600;text-decoration:none}
.ct-liste a:hover{text-decoration:underline}
.ct-liste .txt{display:block;color:var(--on-dark)}
.lignes{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:14px}
.lignes span{display:inline-flex;align-items:center;gap:3px}
.ligne{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;font:700 11px/1 var(--font);font-style:normal;color:#fff;margin-right:2px}
.ligne.rer{border-radius:3px}
.l3{background:#837902}.l9{background:#B6BD00;color:#0B0C5C}.l12{background:#007852}.l7{background:#FA9ABA;color:#0B0C5C}.la{background:#E3051C}.le{background:#C04191}
@media (max-width:900px){.ct-grid{grid-template-columns:1fr}.ct-carte{position:static;padding:22px}}

/* ---------- Mentions, 404 ---------- */
.legal>*{max-width:820px}
.legal h2{font-size:1.4rem;margin:36px 0 14px}
.legal h2:first-child{margin-top:0}
.legal dl{display:grid;grid-template-columns:190px 1fr;margin:0;border-top:2px solid var(--navy)}
.legal dt,.legal dd{padding:11px 0;border-bottom:1.5px solid var(--trait);margin:0}
.legal dt{font:400 12px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.legal dd{color:var(--ink)}
@media (max-width:640px){.legal dl{grid-template-columns:1fr}.legal dt{border-bottom:0;padding-bottom:0}}
.page-404 p{max-width:720px}

/* ---------- Pied de page ---------- */
footer{background:var(--navy-deep);color:var(--on-dark);padding:56px 0 calc(28px + env(safe-area-inset-bottom));font-size:15px}
.cols{display:grid;grid-template-columns:1.3fr 1fr 1.1fr 1fr;gap:36px}
@media (max-width:1080px) and (min-width:761px){.cols{grid-template-columns:1fr 1fr}}
.flogo{height:36px;width:auto;margin-bottom:14px}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin:0 0 8px}
footer a{color:#fff;text-decoration:none}
footer a:hover{text-decoration:underline}
.ft{font:400 12px var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--on-dark-soft);margin:6px 0 14px}
.bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.18);font:400 12.5px var(--mono);color:var(--on-dark-soft)}
.bas nav{display:flex;flex-wrap:wrap;gap:8px 20px}
@media (max-width:760px){.cols{grid-template-columns:1fr;gap:26px}}

/* Barre d'actions mobile */
.barre-mob{display:none}
@media (max-width:760px){
  .barre-mob{display:grid;grid-template-columns:1fr 1.6fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:8px var(--gut) calc(8px + env(safe-area-inset-bottom));background:var(--papier);border-top:2px solid var(--navy)}
  .barre-mob .btn{min-height:46px;font-size:15px}
  body:not(.vue-offre){padding-bottom:64px}
  body.vue-offre .barre-mob,html.menu-ouvert .barre-mob{display:none}
}

/* ---------- Apparition (accueil uniquement) ---------- */
.js body[data-vue=accueil] .revele{opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s ease;transition-delay:calc(var(--i,0)*50ms)}
.js body[data-vue=accueil] .revele.vu{opacity:1;transform:none}

/* ---------- Intro (accueil, une fois par visite, 3 s maximum) ---------- */
html.intro-en-cours{overflow:hidden}
html.intro-en-cours body::before{content:"";position:fixed;inset:0;z-index:150;background:var(--navy)}
.intro{position:fixed;inset:0;z-index:160;background:var(--navy);color:#fff;display:grid;place-items:center;overflow:hidden;transition:transform .45s cubic-bezier(.7,0,.3,1)}
.intro::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16px;background:repeating-linear-gradient(-45deg,var(--on-dark-soft) 0 12px,var(--navy) 12px 24px)}
.intro.sort{transform:translateY(-100%)}
.intro-scene{position:absolute;inset:0;display:grid;place-items:center;opacity:.55}
.intro-svg{width:min(78vw,620px);height:auto}
.intro-svg path,.intro-svg rect,.intro-svg circle{fill:none;stroke:#9DB2EE;stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:trace 1.1s cubic-bezier(.4,0,.2,1) forwards}
.intro-svg .res path,.intro-svg .res rect,.intro-svg .res circle{stroke:#fff;animation-delay:var(--d,.4s)}
.intro-svg text{fill:#9DB2EE;font:400 11px var(--mono);opacity:0;animation:apparait .3s .9s forwards}
.intro-titre{position:relative;text-align:center;padding:0 24px;animation:apparait .4s .15s both}
.intro-titre svg{height:clamp(46px,9vw,76px);width:auto}
.intro-titre p{margin:16px 0 0;font:400 13px var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--on-dark)}
.intro-passer{position:absolute;right:20px;bottom:36px;background:none;border:1.5px solid rgba(255,255,255,.6);color:#fff;font:400 12.5px var(--mono);text-transform:uppercase;letter-spacing:.08em;padding:9px 14px;cursor:pointer}
@keyframes apparait{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js body[data-vue=accueil] .revele{opacity:1;transform:none}
}
@media print{.top,.menu-mob,.barre-mob,.postuler-mobile,footer,.form-zone{display:none!important}body{background:#fff}}

/* Mention légale du pied de page (garantie financière) */
.legal-pied{margin:32px 0 0;padding:0;border:0;font:400 14px/1.6 var(--font);color:var(--on-dark);max-width:none}

/* Bandeau « garantie financière » au-dessus du pied de page (toutes les pages) */
.garantie{background:var(--papier-2);border-top:2px solid var(--navy)}
.garantie-l{display:flex;align-items:center;gap:18px;padding-block:22px}
.garantie-ic{flex:none;width:40px;height:40px;fill:none;stroke:var(--navy);stroke-width:1.7;stroke-linejoin:round}
.garantie p{margin:0;flex:1;color:var(--text);font-size:15px;line-height:1.5}
.garantie strong{display:block;color:var(--ink);font-size:16px}
.garantie .lien{flex:none}
@media (max-width:640px){.garantie-l{flex-wrap:wrap;gap:12px}.garantie p{flex-basis:calc(100% - 58px)}}

/* =====================================================================
   v2 couleurs (version allégée) — règle 60-30-10 :
   60 % fond papier, 30 % bleu marine, actions en bleu marine ACETT (#0B0C5C) : le vert sapin puis le bleu du logo ont été écartés par Ary le 18/10/2026.
   Les couleurs de métier ne servent que de repères (petits marqueurs, réseaux du plan),
   toujours accompagnées du nom du métier ; seuls les 4 réseaux du plan ont une couleur.
   ===================================================================== */
:root{--c-cvc:#4C6FBF;--c-froid:#1A93A6;--c-elec:#C98A0C;--c-secu:#C8463A;--accent:#0B0C5C;--surligne:#0B0C5C}
[data-f=cvc]{--fc:var(--c-cvc)}[data-f=froid]{--fc:var(--c-froid)}[data-f=elec]{--fc:var(--c-elec)}[data-f=secu]{--fc:var(--c-secu)}
/* Actions : vert sapin (10 %) */
.btn-action{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-action:hover{background:var(--navy-2);border-color:var(--navy-2)}
.choix-cand .go{background:var(--accent);color:#fff}
.c-go span{background:var(--accent);color:#fff}
.reg tr:hover .c-go span{background:var(--navy-2)}
.nav a.actif{border-bottom-color:var(--accent)}
/* Coupe technique : chaque réseau dans sa couleur */
.plan-svg .res-cvc{--c:var(--c-cvc)}.plan-svg .res-froid{--c:var(--c-froid)}.plan-svg .res-elec{--c:var(--c-elec)}.plan-svg .res-secu{--c:var(--c-secu)}
.plan-svg .res>path{stroke:var(--c)}
.plan-svg .res text{fill:var(--c);font-weight:600}
.plan-svg .eq rect,.plan-svg .eq circle{stroke:var(--c)}
.plan-svg .res{opacity:.4}
.plan-svg[data-actif=cvc] .res-cvc>path,.plan-svg[data-actif=froid] .res-froid>path,.plan-svg[data-actif=elec] .res-elec>path,.plan-svg[data-actif=secu] .res-secu>path{stroke:var(--c);stroke-width:3.5}
.plan-svg[data-actif=intro] .res,.plan-svg[data-actif=autre] .res{opacity:1}
/* Petits repères de couleur, rien de plus */
.metier.actif::before{background:var(--fc,var(--navy))}
.c-poste .fil{display:flex;align-items:center;gap:6px}
.c-poste .fil::before{content:"";width:7px;height:7px;background:var(--fc,var(--navy));flex:none}
.chip[data-f]:not([data-f=tous])::before{content:"";width:8px;height:8px;background:var(--fc,var(--navy))}
.chip[aria-pressed=true]::before{background:#fff!important}
.offre-fil .pastille{width:9px;height:9px;background:var(--fc,var(--navy))}
/* Intro : réseaux en couleur, bande inchangée */
.intro-svg .res-cvc path,.intro-svg .res-cvc rect,.intro-svg .res-cvc circle{stroke:#86A9F2}
.intro-svg .res-froid path,.intro-svg .res-froid rect,.intro-svg .res-froid circle{stroke:#62D2DE}
.intro-svg .res-elec path,.intro-svg .res-elec rect,.intro-svg .res-elec circle{stroke:#F2C14E}
.intro-svg .res-secu path,.intro-svg .res-secu rect,.intro-svg .res-secu circle{stroke:#F2806F}
.intro-scene{opacity:.8}

/* =====================================================================
   Finition des animations (principes d'Emil Kowalski, animations.dev)
   - courbes « ease-out » franches pour ce qui apparaît, durées courtes (< 300 ms)
   - on n'anime que transform et opacity ; ce qui disparaît va plus vite que ce qui apparaît
   - retour tactile au clic (léger enfoncement), effets de survol réservés à la souris
   - aucune animation au chargement des pages offres et formulaires ; « réduire les animations » respecté
   ===================================================================== */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1)}
/* Boutons : couleur en 160 ms, enfoncement au clic */
.btn,.chip,.m-lien,.depot-retirer,.copie,.menu-btn{transition:background-color .16s var(--ease-out),color .16s var(--ease-out),border-color .16s var(--ease-out),transform .12s var(--ease-out)}
.btn:active,.chip:active,.m-lien:active,.menu-btn:active,.depot-retirer:active{transform:scale(.97)}
.btn-action::after,.m-lien::after,.choix .go::after{display:inline-block;transition:transform .2s var(--ease-out)}
.c-go span{transition:background-color .16s var(--ease-out),transform .2s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .btn-action:hover::after,.m-lien:hover::after,.choix:hover .go::after{transform:translateX(3px)}
  .reg tbody tr:hover .c-go span{transform:translateX(3px)}
  .choix{transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}
  .choix:hover{transform:translateY(-3px);box-shadow:0 10px 24px -14px rgba(11,12,92,.45)}
}
@media (hover:none){.choix:hover{transform:none}}
.nav a{transition:color .16s var(--ease-out),border-color .2s var(--ease-out)}
/* Menu mobile : glisse en 240 ms, liens en léger décalé ; se ferme sans délai */
.menu-mob:not([hidden]){animation:menu-in .24s var(--ease-out)}
.menu-mob:not([hidden]) .menu-liste li{animation:lien-in .32s var(--ease-out) both}
.menu-liste li:nth-child(2){animation-delay:30ms!important}.menu-liste li:nth-child(3){animation-delay:60ms!important}.menu-liste li:nth-child(4){animation-delay:90ms!important}.menu-liste li:nth-child(5){animation-delay:120ms!important}.menu-liste li:nth-child(6){animation-delay:150ms!important}
@keyframes menu-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes lien-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.menu-ic i{transition:transform .22s var(--ease-out)}
/* En-tête et barre « Postuler » : glissements doux */
.top{transition:transform .3s var(--ease-out)}
.postuler-mobile{transition:transform .25s var(--ease-out)}
/* Liste des métiers : le trait de couleur se dessine de haut en bas */
.metier::before{transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease-out),background-color .2s var(--ease-out)}
.metier.actif::before{transform:scaleY(1)}
.metier{transition:background-color .3s var(--ease-out)}
.camera{transition:transform .8s var(--ease-in-out)}
.plan-cap{transition:opacity .18s var(--ease-out)}
/* Questions fréquentes : le + pivote, la réponse apparaît */
.faq summary::after{content:"+";transition:transform .2s var(--ease-out)}
.faq details[open] summary::after{content:"+";transform:rotate(45deg)}
.faq details[open] .rep{animation:rep-in .25s var(--ease-out)}
@keyframes rep-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* Apparition au défilement (accueil uniquement) : plus courte et plus nette */
.js body[data-vue=accueil] .revele{transform:translateY(12px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);transition-delay:calc(var(--i,0)*45ms)}
.js body[data-vue=accueil] .revele.vu{transform:none}
/* Formulaires : dépôt de CV et message de confirmation */
.depot{transition:background-color .15s var(--ease-out),border-color .15s var(--ease-out)}
.depot-fic:not([hidden]){animation:rep-in .2s var(--ease-out)}
.retour:not([hidden]){animation:rep-in .22s var(--ease-out)}
.err:not(:empty){animation:rep-in .18s var(--ease-out)}
/* Intro : le rideau se lève avec une courbe plus franche */
.intro{transition:transform .45s var(--ease-in-out)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .btn:active,.chip:active,.m-lien:active{transform:none}
  .js body[data-vue=accueil] .revele{opacity:1;transform:none}
}

/* =====================================================================
   Bandeau : immeuble technique en 3D isométrique (accueil)
   ===================================================================== */
:root{--b-mur:#FFFDF9;--b-mur2:#E7E1D3;--b-dessus:#F7F3EA;--b-vitre:rgba(11,12,92,.09);--b-trait:var(--navy)}
.hero-grille{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px}
.hero-grille .panneau{grid-column:1/-1;margin-top:8px}
.panneau dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.panneau dl div:last-child{border-right:0}
@media (min-width:1081px){.panneau dl div{border-bottom:0}}
@media (max-width:1080px) and (min-width:621px){.panneau dl div:nth-child(2n){border-right:0}}
@media (max-width:1080px){.panneau dl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.panneau dl{grid-template-columns:1fr}.panneau dl div:last-child{grid-column:auto}}
.panneau dl div{border-right:1.5px solid var(--trait)}
.b3d-fig{margin:0;min-width:0;display:flex;flex-direction:column;align-items:center}
.b3d{width:112%;max-width:640px;margin:-40px -6% 0}
.b3d-svg{display:block;width:100%;height:auto;overflow:visible}
.b3d-terrain{fill:rgba(11,12,92,.03);stroke:none}
.b3d-trame{fill:none;stroke:rgba(11,12,92,.14);stroke-width:.6}
.b3d-ss{fill:none;stroke:var(--b-trait);stroke-width:.8;stroke-dasharray:3 3;opacity:.45}
.b3d-av,.b3d-dr,.b3d-de{stroke:var(--b-trait);stroke-width:1.1;stroke-linejoin:round}
.b3d-av{fill:var(--b-mur)}.b3d-dr{fill:var(--b-mur2)}.b3d-de{fill:var(--b-dessus)}
.b3d-vitre{fill:var(--b-vitre);stroke:var(--b-trait);stroke-width:.6}
.b3d-vitre-dr{fill:rgba(11,12,92,.16)}
.b3d-meneau{fill:none;stroke:var(--b-trait);stroke-width:.5;opacity:.6}
.b3d-et{font:400 7.5px var(--mono);fill:var(--muted);letter-spacing:.05em}
.b3d-eq.b3d-av{fill:#fff}.b3d-eq.b3d-de{fill:#fff}
.b3d-res path{fill:none;stroke:var(--nc,var(--navy));stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.b3d-res .b3d-flux{stroke:#fff;stroke-width:1.3;stroke-dasharray:.05 .95;opacity:0}
.b3d-cvc{--nc:var(--n-cvc,var(--surligne));--dl:1.05s}.b3d-froid{--nc:var(--n-froid,var(--surligne));--dl:1.2s}.b3d-elec{--nc:var(--n-elec,var(--surligne));--dl:1.35s}.b3d-secu{--nc:var(--n-secu,var(--surligne));--dl:1.5s}
.b3d-leg{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;list-style:none;margin:4px 0 0;padding:0;font:400 12px var(--mono);color:var(--muted);opacity:0}
.b3d-leg li{display:inline-flex;align-items:center;gap:6px}
.b3d-leg li::before{content:"";width:14px;height:3px;background:var(--nc)}
/* Animation : construction étage par étage, puis réseaux, puis flux */
.b3d-niv{opacity:0}
.b3d-res path:not(.b3d-flux){stroke-dasharray:1;stroke-dashoffset:1}
.b3d.go .b3d-niv{animation:b3d-chute .6s var(--ease-out,cubic-bezier(.23,1,.32,1)) forwards;animation-delay:calc(.08s + var(--i)*.14s)}
.b3d.go .b3d-res path:not(.b3d-flux){animation:b3d-trace .8s var(--ease-out,cubic-bezier(.23,1,.32,1)) forwards;animation-delay:var(--dl)}
.b3d.go .b3d-flux{opacity:.95;transition:opacity .4s 2.3s;animation:b3d-flux 2.6s linear 2.3s infinite}
.b3d-fig:has(.b3d.go) .b3d-leg{opacity:1;transition:opacity .4s 1.6s}
.b3d.pause .b3d-flux{animation-play-state:paused}
@keyframes b3d-chute{from{opacity:0;transform:translateY(-70px)}to{opacity:1;transform:none}}
@keyframes b3d-trace{to{stroke-dashoffset:0}}
@keyframes b3d-flux{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media (max-width:980px){.hero-grille{grid-template-columns:1fr}.b3d{width:100%;max-width:420px;margin:-30px auto 0}.hero-grille .panneau{margin-top:0}}
@media (max-width:560px){.panneau dl div{border-right:0}}
@media (prefers-reduced-motion:reduce){.b3d-niv{opacity:1}.b3d-res path:not(.b3d-flux){stroke-dashoffset:0}.b3d-leg{opacity:1}}
:root{--n-cvc:var(--c-cvc);--n-froid:var(--c-froid);--n-elec:var(--c-elec);--n-secu:var(--c-secu)}

/* =====================================================================
   Défilement animé (2D) — accueil uniquement
   ===================================================================== */
.titre-anime .mot{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em}
.titre-anime .mot>span{display:inline-block;transform:translateY(110%);transition:transform .8s var(--ease-out,cubic-bezier(.23,1,.32,1));transition-delay:calc(var(--m)*55ms)}
.titre-anime.vu .mot>span{transform:none}
.glisse>tbody>tr,.glisse>li{opacity:0;transform:translateX(-18px);transition:opacity .55s var(--ease-out,cubic-bezier(.23,1,.32,1)),transform .55s var(--ease-out,cubic-bezier(.23,1,.32,1))}
.glisse.vu>tbody>tr,.glisse.vu>li{opacity:1;transform:none}
.glisse>tbody>tr:nth-child(2),.glisse>li:nth-child(2){transition-delay:60ms}.glisse>tbody>tr:nth-child(3),.glisse>li:nth-child(3){transition-delay:120ms}.glisse>tbody>tr:nth-child(4),.glisse>li:nth-child(4){transition-delay:180ms}
.glisse>tbody>tr:nth-child(5),.glisse>li:nth-child(5){transition-delay:240ms}.glisse>tbody>tr:nth-child(6),.glisse>li:nth-child(6){transition-delay:300ms}.glisse>li:nth-child(7){transition-delay:360ms}.glisse>li:nth-child(8){transition-delay:420ms}.glisse>li:nth-child(9){transition-delay:480ms}
.cpt{font-weight:inherit;font-variant-numeric:tabular-nums}
/* Frise des phases : la ligne se remplit avec la molette, chaque phase s'allume à son passage */
.frise{position:relative;border-top-color:var(--trait)}
.frise::before{content:"";position:absolute;left:0;right:0;top:-3px;height:3px;background:var(--navy);transform:scaleX(var(--p,0));transform-origin:left}
.frise li::before{transition:background-color .3s var(--ease-out,ease),transform .3s var(--ease-out,ease)}
.frise li.atteint::before{background:var(--accent,var(--navy));transform:scale(1.25)}
.frise li strong{transition:color .3s}
.frise li:not(.atteint) strong{color:var(--muted)}
@media (max-width:860px){
  .frise{border-left-color:var(--trait)}
  .frise::before{left:-3px;right:auto;top:0;bottom:0;width:3px;height:auto;transform:scaleY(var(--p,0));transform-origin:top}
}
@media (prefers-reduced-motion:reduce){.titre-anime .mot>span,.glisse>tbody>tr,.glisse>li{transform:none!important;opacity:1!important}.frise::before{transform:none}}

/* Immeuble en vraie 3D (Three.js) */
.b3d-webgl{position:relative}
.b3d-gl{display:block;max-width:100%;touch-action:pan-y;cursor:grab}
.b3d-gl:active{cursor:grabbing}
.b3d-webgl~.b3d-leg{opacity:1;transition:opacity .4s 1.6s}

/* v2 3D+ : légende interactive */
.b3d-leg li{cursor:pointer;padding:5px 9px;border:1.5px solid transparent;transition:border-color .2s,background-color .2s}
.b3d-leg li.actif{border-color:var(--nc);background:var(--blanc);color:var(--ink)}
.b3d-aide{margin:6px 0 0;font:400 11.5px var(--mono);color:var(--muted);text-align:center;opacity:0}
.b3d-webgl~.b3d-aide{opacity:1;transition:opacity .4s 3.4s}
@media (hover:none){.b3d-aide{font-size:0}.b3d-aide::after{content:"Touchez un réseau pour l’isoler · glissez pour tourner";font-size:11.5px}}

/* =====================================================================
   v3 « chantier » : effets spéciaux de l'accueil (désactivés si « réduire les animations »)
   ===================================================================== */
/* Bandeau des métiers qui défile */
.defile{overflow:hidden;background:var(--papier);border-bottom:2px solid var(--navy);padding:22px 0 18px;user-select:none;-webkit-user-select:none}
.defile-rang{white-space:nowrap;line-height:1}
.defile-rang+.defile-rang{margin-top:6px}
.defile-piste{display:inline-flex;align-items:center;gap:.42em;padding-right:.42em;will-change:transform;font:900 clamp(2.3rem,7vw,6.2rem)/1.02 var(--titre);letter-spacing:-.03em;text-transform:uppercase;color:var(--navy)}
.defile-inv .defile-piste{color:transparent;-webkit-text-stroke:1.5px var(--navy)}
.defile-piste i{flex:none;width:.24em;height:.24em;background:var(--c-cvc)}
.defile-piste i:nth-of-type(4n+2){background:var(--c-froid)}.defile-piste i:nth-of-type(4n+3){background:var(--c-elec)}.defile-piste i:nth-of-type(4n){background:var(--c-secu)}
.defile-inv .defile-piste i{background:transparent;border:1.5px solid var(--navy);transform:rotate(45deg)}
@media (max-width:640px){.defile{padding:16px 0 12px}.defile-inv .defile-piste{-webkit-text-stroke-width:1.2px}}
/* Titre principal animé au lever du rideau */
.titre-h1 .mot>span{transition-duration:.9s;transition-delay:calc(var(--m)*70ms)}
/* Barre de progression de lecture */
.progres{position:fixed;left:0;top:0;width:100%;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;z-index:70;pointer-events:none}
/* Projecteur : la trame du bandeau s'allume en vert sous la souris */
.hero{--mx:50%;--my:50%}
.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(11,12,92,.45) 1px,transparent 1px),linear-gradient(90deg,rgba(11,12,92,.45) 1px,transparent 1px);background-size:48px 48px;background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(240px circle at var(--mx) var(--my),#000 0,rgba(0,0,0,.35) 45%,transparent 100%);mask-image:radial-gradient(240px circle at var(--mx) var(--my),#000 0,rgba(0,0,0,.35) 45%,transparent 100%);opacity:0;transition:opacity .45s var(--ease-out)}
.hero.spot::after{opacity:1}
.hero-grille,.hero .balisage{z-index:1}
/* Légende 3D : un clic relance aussi le scan */
.b3d{touch-action:pan-y}
@media (prefers-reduced-motion:reduce){.hero::after{display:none}.defile-piste{transform:none!important}}

/* Transitions animées entre les pages (View Transitions, navigateurs récents ; les autres changent de page normalement) */
@view-transition{navigation:auto}
.top{view-transition-name:entete}
::view-transition-old(root){animation:vt-sort .2s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-entre .42s cubic-bezier(.23,1,.32,1) both}
@keyframes vt-sort{to{opacity:0;transform:translateY(-12px)}}
@keyframes vt-entre{from{opacity:0;transform:translateY(18px)}}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* Qualité (audit du 18/10/2026) */
/* Place réservée à l'immeuble 3D : la page ne bouge plus quand il apparaît */
.b3d{aspect-ratio:100/102}
.b3d-svg{height:100%}
/* Zones tactiles d'au moins 24 px sur écran tactile (règle d'accessibilité WCAG 2.2) */
@media (pointer:coarse){
  .c-poste a{display:inline-block;padding-block:3px}
  .retour-liste{padding-block:4px}
  footer li a,.bas nav a{display:inline-block;padding-block:4px}
}

/* Pages métiers (offres génériques) */
.m-titre{color:inherit;text-decoration:none;background-image:linear-gradient(var(--navy),var(--navy));background-size:0 2px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .2s}
.m-titre:hover,.m-titre:focus-visible{background-size:100% 2px}
.met-rec{margin-top:10px}
.met-faq{margin-top:48px}
.met-faq .faq-t{font-size:1.15rem;margin-top:0}
.met-autres{margin-top:64px;padding-top:22px;border-top:2px solid var(--navy)}
.met-autres h2{font-size:1.15rem;margin:0 0 14px}
.met-autres ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 26px}
.met-autres li{padding:4px 0}
.m-fiche{display:inline-block;margin-top:10px;font-size:14.5px;padding:4px 0}
.m-fiche::after{content:" →"}

/* Dessins techniques des pages métiers */
.met-head-grille{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,440px);gap:48px;align-items:center}
.met-fig{margin:0}
.met-dessin{display:block;width:100%;height:auto;background:var(--blanc);border:2px solid var(--navy);box-shadow:6px 6px 0 var(--navy)}
.met-dessin .g{fill:none;stroke:var(--trait);stroke-width:.5}
.met-dessin .f{fill:none;stroke:var(--navy);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.met-dessin .eq{fill:var(--blanc)}
.met-dessin .a{fill:none;stroke:var(--fc,var(--navy));stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.met-dessin .af{fill:var(--fc,var(--navy));stroke:none}
.met-dessin .epais{stroke-width:3.4}
.met-dessin .pt{stroke-dasharray:5 4}
.met-dessin .f.pt{stroke-width:1;stroke:var(--muted)}
.met-dessin text{font:500 9.5px/1 var(--mono);fill:var(--navy);letter-spacing:.05em;text-transform:uppercase}
.met-dessin text.fort{font-weight:600;font-size:11px}
.met-dessin text.p{fill:var(--muted);font-size:8.5px}
.met-dessin text.nu{text-transform:none}
.met-dessin text.acc{fill:var(--fc,var(--navy));font-weight:600}
.met-dessin .cart rect,.met-dessin .cart path{fill:var(--blanc);stroke:var(--navy);stroke-width:1.2}
.met-dessin .cart text{font-size:8.5px}
@media (prefers-reduced-motion:no-preference){
  .met-dessin .t{stroke-dasharray:1;stroke-dashoffset:1;animation:met-trace 1.3s cubic-bezier(.6,0,.2,1) var(--d,0s) forwards}
  .met-dessin text,.met-dessin .apparait{opacity:0;animation:met-apparait .5s ease var(--d,1s) forwards}
  .met-dessin .cart text{opacity:1;animation:none}
  .met-dessin .barre{transform:scaleX(0);transform-box:fill-box;transform-origin:left;animation:met-barre .7s cubic-bezier(.3,0,.2,1) var(--d,0s) forwards}
}
@keyframes met-trace{to{stroke-dashoffset:0}}
@keyframes met-apparait{to{opacity:1}}
@keyframes met-barre{to{transform:scaleX(1)}}
@media (max-width:980px){.met-head-grille{grid-template-columns:1fr;gap:28px}.met-fig{max-width:520px}}
@media (max-width:560px){.met-dessin{box-shadow:4px 4px 0 var(--navy)}.met-fig{margin-right:4px}}

/* Accroche sous le titre de l'accueil */
.accroche{font:600 clamp(1.15rem,1.9vw,1.45rem)/1.3 var(--titre);color:var(--navy);letter-spacing:-.01em;margin:-4px 0 14px;padding-left:14px;border-left:4px solid var(--navy)}

/* Contact sur téléphone : le formulaire d'abord (le téléphone reste dans la barre du bas) */
@media (max-width:900px){.ct-grid .form-zone{order:-1}}

/* Bouton « Retour » dans la barre du haut (pages intérieures) */
.retour-lien{display:inline-flex;align-items:center;gap:6px;flex:none;height:40px;padding:0 12px 0 8px;margin-right:14px;border:2px solid var(--navy);color:var(--navy);text-decoration:none;font:600 14px var(--corps,inherit);background:var(--blanc)}
.retour-lien[hidden]{display:none}
.retour-lien svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.retour-lien:hover,.retour-lien:focus-visible{background:var(--navy);color:#fff}
@media (max-width:560px){.retour-lien{width:40px;padding:0;justify-content:center;margin-right:10px}.retour-lien span{display:none}}
/* Barre d'appel du panneau d'agence */
.panneau-b span{display:inline-flex;align-items:center;gap:8px}
.panneau-ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.nav a{white-space:nowrap}
@media (max-width:1360px){.retour-lien{width:40px;padding:0;justify-content:center;margin-right:12px}.retour-lien span{display:none}}
@media (max-width:1240px){.a-retour .top-tel{display:none}}

/* =====================================================================
   CHARTE « SIGNAL » (19/10/2026) — même identité que le CRM ACETT.
   Couleurs et polices : variables :root ci-dessus. Composants : ci-dessous.
   Rayons 8/12/20 px, ombres douces, bleu signal #2F45E8 pour liens/focus/actif,
   un seul bandeau dégradé par page (appel de l'accueil, en-tête des autres pages).
   ===================================================================== */
:focus-visible{outline:2px solid var(--surligne);outline-offset:3px;border-radius:6px}
h1,h2{font-weight:800;letter-spacing:-.03em;line-height:1.06}
h3{font-family:var(--titre);font-weight:700;letter-spacing:-.015em}
.lien{text-decoration-color:var(--surligne)}
.plan-svg text,.met-dessin text{font-family:var(--plan)}

/* Barre de navigation en verre dépoli */
.top{background:color-mix(in srgb,var(--papier) 84%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--trait)}
.nav a{position:relative;font-weight:600;font-size:14.5px;padding:8px 12px;border-radius:10px;border-bottom:0;transition:background .15s}
.nav a:hover{background:var(--pale)}
.nav a.actif::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;background:var(--surligne)}
.top-tel{font-family:var(--font);font-weight:600}
.menu-btn{border-radius:12px;background:linear-gradient(180deg,#1A1D84,var(--navy))}
.menu-mob{background:linear-gradient(160deg,var(--navy-deep),var(--navy-2))}
.retour-lien{border-radius:12px;border:1px solid var(--trait-fort);background:#fff;color:var(--ink);box-shadow:0 1px 1px rgba(10,11,63,.04)}
.retour-lien:hover,.retour-lien:focus-visible{background:var(--papier-2);color:var(--ink)}

/* Boutons */
.btn{border-radius:12px;border:1px solid var(--trait-fort);font-weight:600;font-size:14.5px;box-shadow:0 1px 1px rgba(10,11,63,.04);transition:background .15s,border-color .15s,box-shadow .15s,transform .08s}
.btn:active{transform:translateY(1px)}
.btn-action{background:linear-gradient(180deg,#1A1D84,var(--navy));border-color:var(--navy);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 18px -10px rgba(11,12,92,.8)}
.btn-action:hover{background:linear-gradient(180deg,#2328A0,#11137A);border-color:var(--navy)}
.btn-ligne{background:#fff;border-color:var(--trait-fort);color:var(--ink)}
.btn-ligne:hover{background:var(--papier-2);border-color:var(--trait-fort)}
.btn-ligne-c{border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.26);color:#fff}
.btn-ligne-c:hover{background:rgba(255,255,255,.16)}
.btn-xl{border-radius:14px}
.appel .btn-action,.menu-actions .btn-action,.bloc.fonce .btn-action{background:#fff;border-color:#fff;color:var(--ink);box-shadow:none}

/* Surtitres, étiquettes */
.k{font:700 .7rem/1.2 var(--font);letter-spacing:.16em;color:var(--muted)}
.k span{border-radius:6px;border:0;background:var(--pale);color:var(--navy-2)}
.tag{border:0;border-radius:999px;background:var(--pale);color:var(--navy-2);font:700 .72rem/1.3 var(--font);letter-spacing:.1em;padding:7px 14px}
.accroche{font-weight:700;border-left-color:var(--surligne)}
.balisage{display:none}
.appel::before{display:none}

/* Accueil : choix, panneau, plan, métiers */
.choix{border-radius:20px;border:1px solid var(--trait);background:#fff;box-shadow:0 1px 2px rgba(10,11,63,.05),0 0 0 1px rgba(10,11,63,.02);transition:box-shadow .2s,transform .2s cubic-bezier(.2,.8,.2,1)}
.choix:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(10,11,63,.05),0 14px 32px -20px rgba(10,11,63,.30)}
.choix-rec{background:radial-gradient(90% 140% at 100% 0,rgba(110,128,255,.55) 0,transparent 55%),linear-gradient(120deg,var(--navy-deep),var(--navy-2));border-color:transparent;color:#fff}
.choix strong{font-weight:800;letter-spacing:-.03em}
.choix .go{border-radius:10px}
.choix-rec .go{background:#fff;color:var(--ink)}
.panneau{border-radius:20px;border:1px solid var(--trait);overflow:hidden;box-shadow:0 1px 2px rgba(10,11,63,.05),0 14px 32px -20px rgba(10,11,63,.30);margin-right:0}
.panneau-t{background:var(--papier-2);color:var(--muted);font:700 .7rem var(--font);letter-spacing:.16em;border-bottom:1px solid var(--trait)}
.panneau dl div{border-color:var(--trait)}
.panneau dt{font:700 .68rem/1.5 var(--font);letter-spacing:.12em}
.panneau-b{background:linear-gradient(120deg,var(--navy-deep),var(--navy-2));font:800 1.15rem var(--titre);letter-spacing:-.01em}
.panneau-b span{font:600 .8rem var(--font);letter-spacing:.04em;text-transform:none}
.panneau-b:hover{background:linear-gradient(120deg,#11137A,#2F45E8)}
@media (max-width:980px){.panneau{box-shadow:0 1px 2px rgba(10,11,63,.05),0 14px 32px -20px rgba(10,11,63,.30)}}
.plan{border-radius:20px;border:1px solid var(--trait);overflow:hidden;background-color:#fff;box-shadow:0 1px 2px rgba(10,11,63,.05)}
.plan figcaption{border-top:1px solid var(--trait);font-family:var(--font);font-weight:500}
@media (max-width:980px){.plan{border-radius:0;border-width:0 0 1px}}
.metier{border-bottom:1px solid var(--trait);border-radius:14px}
.metier.actif{background:#fff;box-shadow:0 1px 2px rgba(10,11,63,.05)}
.metier::before{border-radius:4px;top:14px;bottom:14px}
.metier .num{font-family:var(--titre);font-weight:800;color:var(--trait-fort)}
.metier .comp{font-family:var(--font);font-size:12.5px}
.metier h3{font-weight:800;letter-spacing:-.03em}
.m-lien{border-radius:10px;background:var(--pale);color:var(--navy-2);font-weight:700}
.m-lien:hover{background:var(--navy-2);color:#fff}
.defile{background:var(--papier-2);border-block:1px solid var(--trait)}

/* Registre des offres, filtres, recherche */
.registre{border-radius:20px;border:1px solid var(--trait);overflow:hidden;box-shadow:0 1px 2px rgba(10,11,63,.05),0 0 0 1px rgba(10,11,63,.02)}
.reg th{font:700 .68rem/1.3 var(--font);letter-spacing:.12em;border-bottom:1px solid var(--trait);background:var(--papier-2)}
.reg thead td{border-bottom:1px solid var(--trait);background:var(--papier-2)}
.reg td{border-color:var(--trait)}
.reg th button:focus-visible{outline:2px solid var(--surligne)}
.c-poste a{font-family:var(--titre);font-weight:700;letter-spacing:-.01em}
.c-poste .fil{font-family:var(--font);font-weight:600;font-size:12px}
.ct{border:0;border-radius:8px;background:var(--pale);color:var(--navy-2);font:700 .7rem/1.6 var(--font);letter-spacing:.04em;padding:2px 9px}
.ct.interim{background:var(--navy);color:#fff}
.c-sal{font-family:var(--font);font-weight:600;font-variant-numeric:tabular-nums}
.c-go span{border-radius:10px}
.chip{border-radius:10px;border:1px solid var(--trait);background:#fff;font-weight:600;box-shadow:0 1px 1px rgba(10,11,63,.04)}
.chip .n{font-family:var(--font);font-weight:600}
.chip:hover{background:var(--pale)}
.chip[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.recherche input{border-radius:12px;border:1px solid var(--trait-fort);background:#fff}
.recherche input:focus{outline:none;border-color:var(--surligne);box-shadow:0 0 0 4px rgba(47,69,232,.16)}
.recherche svg{stroke:var(--muted)}
.tri-mob select{border-radius:10px}
.avis{border-radius:12px;border-left:0;background:var(--pale)}
.bloc{border-radius:20px;border:1px solid var(--trait);box-shadow:0 1px 2px rgba(10,11,63,.05)}
.bloc.fonce{background:radial-gradient(90% 140% at 100% 0,rgba(110,128,255,.45) 0,transparent 55%),linear-gradient(120deg,var(--navy-deep),var(--navy-2));border-color:transparent}

/* Entreprises, agence, FAQ */
.s-alt{background:#fff}
.service{border-radius:20px;border:1px solid var(--trait);box-shadow:0 1px 2px rgba(10,11,63,.05),0 14px 32px -20px rgba(10,11,63,.25)}
.lot{border-radius:8px;background:var(--pale);color:var(--navy-2);font:700 .7rem var(--font);letter-spacing:.1em}
.service h3{font-weight:800;letter-spacing:-.03em}
.service li::before,.offre-texte li::before{border-radius:50%;width:7px;height:7px;background:var(--surligne)}
.etapes{border-top:2px solid var(--trait)}
.etapes li::before{border-radius:50%;border:3px solid var(--surligne);background:#fff}
.atouts{border-top:1px solid var(--trait)}
.atouts li{border-color:var(--trait)}
.faq{border-top:1px solid var(--trait)}
.faq details{border-color:var(--trait)}
.faq summary::after{font-family:var(--font);color:var(--surligne)}

/* Bandeau dégradé (un seul par page) */
.appel{background:radial-gradient(90% 140% at 100% 0,rgba(110,128,255,.55) 0,transparent 55%),radial-gradient(60% 100% at 0 100%,rgba(47,69,232,.35),transparent 70%),linear-gradient(120deg,var(--navy-deep),var(--navy-2));overflow:hidden;isolation:isolate}
.appel::after{content:"";position:absolute;width:420px;height:420px;right:-120px;top:-160px;border-radius:50%;z-index:-1;pointer-events:none;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.22),rgba(255,255,255,.03) 70%)}
.appel .k{color:rgba(255,255,255,.75)}
.appel .s-stats{flex:1 1 100%;margin-top:8px}
.page-head{position:relative;overflow:hidden;isolation:isolate;border-bottom:0;color:rgba(255,255,255,.86);background:radial-gradient(90% 140% at 100% 0,rgba(110,128,255,.55) 0,transparent 55%),radial-gradient(60% 100% at 0 100%,rgba(47,69,232,.35),transparent 70%),linear-gradient(120deg,var(--navy-deep),var(--navy-2));padding:44px 0 40px}
.page-head::after{content:"";position:absolute;width:380px;height:380px;right:-120px;top:-170px;border-radius:50%;z-index:-1;pointer-events:none;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.2),rgba(255,255,255,.03) 70%)}
.page-head h1{color:#fff;letter-spacing:-.035em}
.page-head p{color:rgba(255,255,255,.86)}
.page-head .fil-ariane{color:rgba(255,255,255,.65)}
.page-head .fil-ariane a{color:#fff}
.page-head .lien{color:#fff;text-decoration-color:rgba(255,255,255,.6)}
.offre-fil{color:rgba(255,255,255,.75);font:700 .7rem var(--font);letter-spacing:.14em}
.offre-fil .pastille{border-radius:3px}
.met-dessin{border-radius:20px;border:1px solid rgba(255,255,255,.3);box-shadow:0 24px 60px -20px rgba(0,0,0,.45)}
@media (max-width:560px){.met-dessin{box-shadow:0 18px 40px -20px rgba(0,0,0,.5)}.met-fig{margin-right:0}}

/* Fiches : cartouche, formulaires */
.cartouche{border-radius:20px;border:1px solid var(--trait);overflow:hidden;box-shadow:0 1px 2px rgba(10,11,63,.05),0 14px 32px -20px rgba(10,11,63,.30)}
.cartouche-t{background:var(--papier-2);color:var(--muted);font:700 .68rem var(--font);letter-spacing:.14em;border-bottom:1px solid var(--trait)}
.cartouche dl div{border-color:var(--trait)}
.cartouche dt{font:700 .66rem var(--font);letter-spacing:.12em}
.cartouche dd{font-family:var(--font)}
.offre-apropos,.met-autres{border-top:1px solid var(--trait)}
.form-zone{border-radius:20px;border:1px solid var(--trait)!important;box-shadow:0 1px 2px rgba(10,11,63,.05),0 14px 32px -20px rgba(10,11,63,.25)}
.champ input,.champ select,.champ textarea{border-radius:12px!important;border:1px solid var(--trait-fort)!important;background:#fff;transition:border-color .15s,box-shadow .15s}
.champ input:hover,.champ select:hover,.champ textarea:hover{border-color:#B9B8AE!important}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:none;border-color:var(--surligne)!important;box-shadow:0 0 0 4px rgba(47,69,232,.16)}
.champ label{font-weight:600;font-size:.85rem}
.bascule{border-radius:12px;padding:4px;gap:2px;background:var(--papier-2);border:0!important;box-shadow:inset 0 0 0 1px var(--trait)}
.bascule label{border-radius:9px;border:0!important}
.depot-zone{border-radius:14px;border-color:var(--trait-fort)!important}
.depot.survol .depot-zone{border-color:var(--surligne)!important;background:var(--pale)}
.depot-ic{border-radius:10px}
.retour{border-radius:12px}
.rapide{font-family:var(--font)!important}
.ct-carte{border-radius:20px;background:radial-gradient(90% 140% at 100% 0,rgba(110,128,255,.45) 0,transparent 55%),linear-gradient(140deg,var(--navy-deep),var(--navy-2))}
.ct-carte .lib{font-family:var(--font);font-weight:700;letter-spacing:.12em}
.legal dt{font-family:var(--font);font-weight:700}
.postuler-mobile{border-top:1px solid var(--trait);background:color-mix(in srgb,var(--papier) 90%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.barre-mob{border-top:1px solid var(--trait)!important;background:color-mix(in srgb,var(--papier) 90%,transparent)!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}

/* Garantie et pied de page */
.garantie{background:var(--pale);border-top:1px solid var(--trait)}
.garantie-ic{stroke:var(--navy-2)}
footer{background:linear-gradient(180deg,var(--navy-deep),var(--navy))}
footer .ft{font-family:var(--font);font-weight:700;letter-spacing:.14em}
.bas{font-family:var(--font)}
/* Intro en charte Signal : dégradé + halo, sans bande de chantier */
html.intro-en-cours body::before{background:var(--navy-deep)}
.intro{background:radial-gradient(90% 140% at 100% 0,rgba(110,128,255,.55) 0,transparent 55%),radial-gradient(60% 100% at 0 100%,rgba(47,69,232,.35),transparent 70%),linear-gradient(120deg,var(--navy-deep),var(--navy-2))}
.intro::after{display:none}
.intro-svg text{font-family:var(--plan)}
.intro-passer{border-radius:12px;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.08);font:600 13px var(--font);text-transform:none;letter-spacing:0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.intro-passer:hover{background:rgba(255,255,255,.16)}

/* Écran des métiers (accueil) : remplace la coupe qui zoomait. Les dessins des pages métiers s'affichent en fondu. */
.plan .plan-svg{display:none}
.plan{padding:14px;background-image:none;background:#fff}
.ecran{position:relative;aspect-ratio:480/320;border-radius:14px;overflow:hidden;background:var(--papier)}
.ecran-d{position:absolute;inset:0;opacity:0;transform:translateY(10px) scale(.985);transition:opacity .45s cubic-bezier(.2,.8,.2,1),transform .45s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.ecran-d.actif{opacity:1;transform:none}
.ecran .met-dessin{border:0;border-radius:14px;box-shadow:none;height:100%}
.ecran-d:not(.actif) .met-dessin .t,.ecran-d:not(.actif) .met-dessin text,.ecran-d:not(.actif) .met-dessin .apparait,.ecran-d:not(.actif) .met-dessin .barre{animation:none}
.ecran-carte{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:28px 30px;color:#fff;background:radial-gradient(90% 140% at 100% 0,rgba(110,128,255,.55) 0,transparent 55%),radial-gradient(60% 100% at 0 100%,rgba(47,69,232,.35),transparent 70%),linear-gradient(120deg,var(--navy-deep),var(--navy-2))}
.ecran-k{margin:0 0 8px;font:700 .68rem var(--font);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.ecran-t{margin:0 0 16px;font:800 clamp(1.15rem,1.7vw,1.45rem)/1.15 var(--titre);letter-spacing:-.03em;color:#fff;max-width:22ch}
.ecran-carte ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ecran-carte li{padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);font:600 12.5px var(--font);color:#fff}
.plan figcaption{margin:12px 0 0;padding:0 2px;border-top:0;min-height:2.8em;color:var(--ink);font:600 14px/1.4 var(--font)}
@media (prefers-reduced-motion:reduce){.ecran-d{transition:none}}
@media (max-width:980px){.index-met .plan{display:none}}
.intro-svg .niv{display:none}

/* =====================================================================
   REFONTE « PRESTIGE » (29/10/2026) — clair, typographique, esprit
   dossier technique haut de gamme. Charte Signal conservée.
   ===================================================================== */
:root{
  --c-cvc:#2F45E8;--c-froid:#0E9BB0;--c-elec:#6E80FF;--c-secu:#C8463A;
  --surligne:#2F45E8;--accent:#0B0C5C;
  --max:1240px;--gut:32px;--sec:118px;
}
@media (max-width:980px){:root{--sec:84px}}
@media (max-width:640px){:root{--gut:18px;--sec:64px}}
::selection{background:var(--pale);color:var(--ink)}
body{font-size:16px}
h2{font-size:clamp(1.7rem,3.3vw,2.7rem);letter-spacing:-.035em;line-height:1.04}
.met-dessin text.acc{fill:color-mix(in srgb,var(--fc,var(--navy)) 72%,var(--navy))}

/* Surtitres : filet + mono signal */
.x-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 18px;font:500 12px/1 var(--plan);text-transform:uppercase;letter-spacing:.18em;color:var(--navy-2)}
.x-eyebrow::before{content:"";width:26px;height:1.5px;background:var(--surligne)}
.x-eyebrow-c{color:rgba(255,255,255,.8)}
.x-eyebrow-c::before{background:var(--glow,#6E80FF)}
.x-head{max-width:820px;margin-bottom:52px}
.x-head h2{margin:0}
.x-head-ligne{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap}
.x-head-ligne>p{margin:0 0 6px;max-width:400px;font-size:15px;line-height:1.55;color:var(--muted)}
.x-head-ligne .btn{margin-bottom:4px}

/* Flèche des liens d'action */
.x-go::after{content:"→";font-weight:600;transition:transform .2s var(--s-ease,ease)}
.x-go:hover::after{transform:translateX(3px)}

/* ---------- Héros ---------- */
.x-hero{position:relative;background:var(--papier);overflow:hidden}
.x-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--trait) 1px,transparent 1px),linear-gradient(90deg,var(--trait) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(130% 120% at 78% 30%,#000 10%,transparent 68%);mask-image:radial-gradient(130% 120% at 78% 30%,#000 10%,transparent 68%);opacity:.8;pointer-events:none}
.x-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:72px;align-items:center;padding-top:88px;padding-bottom:72px}
.x-hero .x-eyebrow{margin-bottom:26px}
.x-hero h1{font-size:clamp(2.25rem,4.5vw,3.85rem);line-height:1;letter-spacing:-.04em;margin:0 0 20px;max-width:15ch}
.x-accroche{display:flex;align-items:baseline;gap:12px;margin:0 0 18px;font:700 clamp(1.1rem,1.8vw,1.35rem)/1.3 var(--titre);letter-spacing:-.015em;color:var(--navy)}
.x-accroche::before{content:"";align-self:center;flex:none;width:34px;height:2px;background:var(--surligne)}
.x-lead{font-size:1.1rem;line-height:1.62;max-width:54ch;color:var(--text);margin:0 0 34px}
.x-cta{display:flex;flex-wrap:wrap;gap:14px}
.x-cta .btn{position:relative;flex-direction:column;align-items:flex-start;gap:3px;min-height:0;padding:13px 54px 14px 22px;font-size:16px;border-radius:14px}
.x-cta .btn::after{position:absolute;right:20px;top:calc(50% - .55em);transition:right .2s var(--s-ease,ease)}
.x-cta .btn:hover::after{transform:none;right:16px}
.x-cta-t{white-space:nowrap}
.x-cta-k{font:500 10.5px/1 var(--plan);text-transform:uppercase;letter-spacing:.16em;opacity:.72}

/* La planche : l'immeuble 3D présenté comme un plan */
.x-planche{position:relative;margin:0;background:var(--blanc);border:1px solid var(--trait-fort);border-radius:14px;box-shadow:var(--s-sh-2,0 14px 32px -20px rgba(10,11,63,.3));padding:10px 10px 0}
.x-coin{position:absolute;width:14px;height:14px;border:0 solid var(--navy);opacity:.55}
.x-coin-1{top:-7px;left:-7px;border-top-width:1.5px;border-left-width:1.5px}
.x-coin-2{top:-7px;right:-7px;border-top-width:1.5px;border-right-width:1.5px}
.x-coin-3{bottom:-7px;left:-7px;border-bottom-width:1.5px;border-left-width:1.5px}
.x-coin-4{bottom:-7px;right:-7px;border-bottom-width:1.5px;border-right-width:1.5px}
.x-planche .b3d{width:104%;max-width:none;margin:-34px -2% -16px}
.x-cart{border-top:1px solid var(--trait);padding:12px 14px 13px;display:flex;flex-direction:column;gap:9px}
.x-cart-t{display:flex;justify-content:space-between;gap:14px;font:500 10.5px/1.4 var(--plan);text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.x-cart-t span:first-child{color:var(--navy);font-weight:600}
.x-planche .b3d-leg{justify-content:flex-start;gap:4px 10px;margin:0;opacity:1;font-family:var(--plan);font-size:11px}
.x-planche .b3d-leg li{padding:4px 8px;border-radius:8px;border:1px solid transparent}
.x-planche .b3d-leg li.actif{border-color:var(--trait-fort);background:var(--papier)}
.b3d-fig:has(.b3d.go) .b3d-leg,.b3d-webgl~.b3d-leg{opacity:1}

/* Bandeau de repères sous le héros */
.x-specs{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;border-top:1px solid var(--trait-fort);padding:26px 0 34px;gap:0 28px}
.x-specs>*{min-width:0;border-left:1px solid var(--trait);padding-left:24px}
.x-specs>:first-child{border-left:0;padding-left:0}
.x-spec-k{display:block;margin-bottom:8px;font:500 10.5px/1 var(--plan);text-transform:uppercase;letter-spacing:.15em;color:var(--muted)}
.x-specs b{display:block;font:700 1.12rem/1.25 var(--titre);letter-spacing:-.015em;color:var(--ink)}
.x-specs small{display:block;margin-top:3px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.x-spec-tel{text-decoration:none;border-left:1px solid var(--trait);transition:opacity .15s}
.x-spec-tel b{color:var(--navy-2);font-variant-numeric:tabular-nums}
.x-spec-tel:hover b{color:var(--surligne)}

/* ---------- Métiers : la grille des planches ---------- */
.x-met-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--trait);border:1px solid var(--trait);border-radius:16px;overflow:hidden}
.x-tile{background:var(--blanc);min-width:0}
.x-tile>a{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;background:var(--blanc);transition:background .2s}
.x-tile>a:hover,.x-tile>a:focus-visible{background:#FBFBF7}
.x-tile-fig{margin:0;padding:16px 16px 0}
.x-tile .met-dessin{border:0;border-radius:10px;box-shadow:none;background:var(--papier)}
.x-tile-txt{display:flex;flex-direction:column;flex:1;padding:18px 20px 18px}
.x-tile-txt h3{font:700 1.08rem/1.25 var(--titre);letter-spacing:-.015em;margin:0 0 7px}
.x-tile-txt>p{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted)}
.x-tile-pied{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:14px 0 0!important;padding-top:12px;border-top:1px solid var(--trait);font:500 11.5px/1 var(--plan);text-transform:uppercase;letter-spacing:.1em;color:var(--navy-2)}
.x-tile-fl{font:600 15px/1 var(--font);transition:transform .2s}
.x-tile>a:hover .x-tile-fl{transform:translateX(3px)}
.x-tile-autre>a{justify-content:flex-end;background:var(--papier-2)}
.x-tile-autre .x-tile-txt{flex:none}
.x-tile-autre h3{max-width:17ch}
/* Les traits des dessins ne se dessinent que lorsqu'on arrive dessus */
@media (prefers-reduced-motion:no-preference){
  html.js .x-tile .met-dessin .t{animation-play-state:paused}
  html.js .x-tile .met-dessin text,html.js .x-tile .met-dessin .apparait,html.js .x-tile .met-dessin .barre{animation-play-state:paused}
  html.js .x-tile.vu .met-dessin .t,html.js .x-tile.vu .met-dessin text,html.js .x-tile.vu .met-dessin .apparait,html.js .x-tile.vu .met-dessin .barre{animation-play-state:running}
}
@media (max-width:1180px){.x-met-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.x-met-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){
  .x-met{overflow:hidden}
  .x-met-grid{display:grid;grid-auto-flow:column;grid-auto-columns:min(82vw,340px);grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;background:none;border:0;border-radius:0;padding:2px 2px 18px;margin-inline:-2px;scrollbar-width:thin}
  .x-tile{border:1px solid var(--trait-fort);border-radius:14px;overflow:hidden;scroll-snap-align:start;box-shadow:var(--s-sh-1,0 1px 2px rgba(10,11,63,.05))}
}

/* ---------- Postes ---------- */
.x-postes{background:var(--papier-2)}

/* ---------- Entreprises ---------- */
.x-offres{display:grid;grid-template-columns:1fr 1fr;gap:0}
.x-offre{display:flex;flex-direction:column;min-width:0;padding:6px 48px 0 0}
.x-offre+.x-offre{border-left:1px solid var(--trait-fort);padding:6px 0 0 48px}
.x-offre-k{margin:0 0 12px;font:500 11px/1 var(--plan);text-transform:uppercase;letter-spacing:.16em;color:var(--navy-2)}
.x-offre h3{font:750 1.55rem/1.1 var(--titre);letter-spacing:-.03em;margin:0 0 10px}
.x-offre-lead{font-size:15.5px;color:var(--text);margin:0 0 18px}
.x-checks{list-style:none;margin:0 0 26px;padding:0}
.x-checks li{position:relative;padding:10px 0 10px 26px;font-size:14.5px;line-height:1.55;color:var(--text);border-top:1px solid var(--trait)}
.x-checks li::before{content:"";position:absolute;left:2px;top:17px;width:11px;height:6px;border-left:2px solid var(--surligne);border-bottom:2px solid var(--surligne);transform:rotate(-45deg)}
.x-offre .btn{align-self:flex-start;margin-top:auto}
.x-process{margin-top:92px}
.x-process h3{font:700 1.05rem var(--titre);letter-spacing:-.01em;margin:0 0 22px}
.x-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;counter-reset:etape}
.x-steps li{min-width:0;border-top:2px solid var(--navy);padding-top:16px}
.x-step-n{display:block;font:500 12px/1 var(--plan);letter-spacing:.1em;color:var(--navy-2);margin-bottom:10px}
.x-steps strong{display:block;font:700 1.05rem/1.3 var(--titre);letter-spacing:-.01em;color:var(--ink);margin-bottom:6px}
.x-steps p{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}
@media (max-width:900px){
  .x-offres{grid-template-columns:1fr}
  .x-offre{padding:6px 0 36px}
  .x-offre+.x-offre{border-left:0;border-top:1px solid var(--trait-fort);padding:36px 0 0}
  .x-process{margin-top:64px}
  .x-steps{grid-template-columns:1fr 1fr;gap:22px}
}
@media (max-width:480px){.x-steps{grid-template-columns:1fr;gap:18px}}

/* ---------- L'agence ---------- */
.x-ag-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:88px;align-items:start}
.x-atouts{list-style:none;margin:0;padding:0}
.x-atouts li{border-top:1px solid var(--trait);padding:18px 0}
.x-atouts li:last-child{border-bottom:1px solid var(--trait)}
.x-atouts h3{font:700 1.02rem/1.3 var(--titre);letter-spacing:-.01em;margin:0}
.x-atouts p{margin:6px 0 0;font-size:14.5px;line-height:1.6;color:var(--muted);max-width:52ch}
@media (max-width:980px){.x-ag-grid{grid-template-columns:1fr;gap:52px}}

/* ---------- Bandeau d'appel : repères en filets, plus de cartes en verre ---------- */
.appel .s-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 28px;margin-top:40px;padding-top:28px;border-top:1px solid rgba(255,255,255,.22)}
.appel .s-stat{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0 0 0 22px!important;border-left:1px solid rgba(255,255,255,.22)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;min-width:0}
.appel .s-stat:first-child{border-left:0!important;padding-left:0!important}
.appel .s-stat b{display:block;font:800 2.1rem/1.05 var(--titre);letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.appel .s-stat small{display:block;margin-top:5px;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.72)}
@media (max-width:760px){.appel .s-stats{grid-template-columns:1fr 1fr;gap:22px 24px}.appel .s-stat:nth-child(3){border-left:0!important;padding-left:0!important}}


/* ---------- Responsive du héros ---------- */
@media (max-width:1080px){.x-hero-grid{gap:48px}}
@media (max-width:980px){
  .x-hero-grid{grid-template-columns:1fr;gap:44px;padding-top:52px;padding-bottom:52px}
  .x-hero h1{max-width:none}
  .x-planche{max-width:560px}
  .x-specs{grid-template-columns:1fr 1fr;gap:20px 24px;padding:22px 0 30px}
  .x-specs>*{border-left:0;padding-left:0}
  .x-spec-tel{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--trait-fort);border-radius:14px;padding:14px 18px;background:var(--blanc)}
  .x-spec-tel .x-spec-k{margin:0}
}
@media (max-width:560px){
  .x-cta{flex-direction:column;align-items:stretch}
  .x-cta .btn{align-items:flex-start}
  .x-planche .b3d{margin-top:-22px}
}

/* Dernières retouches prestige */
.x-eyebrow sup{font-size:.72em;top:-.3em}
.page-head{padding:56px 0 48px}
.page-head h1{font-size:clamp(2rem,4.2vw,3.2rem)}
@media (max-width:640px){.page-head{padding:38px 0 34px}}
.fil-ariane{font-family:var(--plan);letter-spacing:.04em;text-transform:uppercase;font-size:11px}

/* =====================================================================
   V9 (29/10/2026) — pictogrammes, section Métiers sombre, densité,
   micro-animations. Demandes d'Ary : épuré mais sans vide, plus de
   bleu Signal, plus dynamique.
   ===================================================================== */
:root{--sec:92px}
@media (max-width:980px){:root{--sec:72px}}
@media (max-width:640px){:root{--sec:56px}}
.x-head{margin-bottom:40px}
.x-hero-grid{padding-top:64px;padding-bottom:52px;gap:60px}
.x-lead{margin-bottom:28px}
.x-specs{padding:22px 0 28px}
.x-specs::before{content:"";position:absolute;top:0;left:0;right:0;height:7px;background:repeating-linear-gradient(90deg,var(--trait-fort) 0 1px,transparent 1px 14px)}
.x-process{margin-top:60px}
.x-ag-grid{gap:64px}
.appel{padding:64px 0}
.appel .s-stats{margin-top:32px;padding-top:24px}

/* ---------- Pictogrammes ---------- */
.x-picto{display:block;width:60px;height:60px;color:var(--navy)}
.x-picto path,.x-picto circle{stroke:currentColor;stroke-width:3;fill:none}
.x-picto .pa{stroke:var(--surligne)}
@media (prefers-reduced-motion:no-preference){
  .x-picto .t{stroke-dasharray:1;stroke-dashoffset:1;animation:met-trace 1s cubic-bezier(.6,0,.2,1) var(--d,0s) forwards}
  html.js .x-met .x-tile .x-picto .t{animation-play-state:paused}
  html.js .x-met .x-tile.vu .x-picto .t{animation-play-state:running}
}

/* ---------- Section Métiers sombre ---------- */
.x-met{background:radial-gradient(90% 140% at 100% 0,rgba(110,128,255,.5) 0,transparent 55%),radial-gradient(60% 100% at 0 100%,rgba(47,69,232,.3),transparent 70%),linear-gradient(120deg,var(--navy-deep),#151A8C);color:rgba(255,255,255,.8)}
.x-met .x-eyebrow{color:rgba(255,255,255,.82)}
.x-met .x-eyebrow::before{background:var(--glow,#6E80FF)}
.x-met h2{color:#fff}
.x-met .x-head-ligne>p{color:rgba(255,255,255,.72)}
.x-met-grid{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.16);border-radius:18px}
.x-tile{background:transparent}
.x-tile>a{background:rgba(10,11,63,.35);transition:background .25s,transform .25s var(--s-ease,ease)}
.x-tile>a:hover,.x-tile>a:focus-visible{background:rgba(23,27,110,.55);transform:translateY(-3px)}
.x-tile-fig{display:block;padding:20px 20px 0}
.x-tile .x-picto{color:#D6DCFF}
.x-tile .x-picto .pa{stroke:var(--glow,#6E80FF)}
.x-tile>a:hover .x-picto .pa{filter:drop-shadow(0 0 7px rgba(110,128,255,.9))}
.x-tile-txt{padding:14px 20px 16px}
.x-tile-txt h3{color:#fff}
.x-tile-txt>p{color:rgba(255,255,255,.66)}
.x-tile-pied{border-top-color:rgba(255,255,255,.14);color:#AAB4F2}
.x-tile-autre>a{background:rgba(255,255,255,.05)}
.x-tile-autre .x-picto{color:rgba(214,220,255,.75)}
.x-tile-autre h3{max-width:none}
@media (max-width:620px){
  .x-tile{border-color:rgba(255,255,255,.22);box-shadow:none}
  .x-met-grid{background:none;border:0}
  .x-tile>a{background:rgba(10,11,63,.45)}
}

/* ---------- En-tête des pages métiers : panneau picto ---------- */
.met-head-grille{grid-template-columns:minmax(0,1fr) minmax(220px,300px);gap:44px}
.x-picto-grand{display:grid;place-items:center;width:100%;aspect-ratio:1;border-radius:24px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 24px 60px -28px rgba(0,0,0,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.x-picto-grand .x-picto{width:54%;height:54%;color:#fff}
.x-picto-grand .x-picto path,.x-picto-grand .x-picto circle{stroke-width:2.6}
.x-picto-grand .x-picto .pa{stroke:var(--glow,#6E80FF);filter:drop-shadow(0 0 8px rgba(110,128,255,.8))}
@media (max-width:980px){.met-head-grille{grid-template-columns:1fr}.met-fig{max-width:190px;margin:0}}


/* ---------- Micro-animations ---------- */
.reg tbody tr{transition:background .15s}
.reg tbody tr:hover{background:var(--pale)}
.reg tbody tr .c-go span{display:inline-grid;place-items:center;transition:transform .2s var(--s-ease,ease)}
.reg tbody tr:hover .c-go span{transform:translateX(4px)}
.btn-action{transition:background .15s,transform .15s,box-shadow .15s}
.btn-action:hover{transform:translateY(-1px)}
.x-atouts li,.x-checks li{transition:padding-left .25s var(--s-ease,ease)}
.x-atouts li:hover{padding-left:8px}
.chip{transition:background .15s,border-color .15s,transform .12s}
.chip:active{transform:scale(.96)}
.x-spec-tel b{transition:color .15s}
@media (prefers-reduced-motion:reduce){.x-tile>a,.x-atouts li{transition:none}}

/* 29/10 soir : la 3D du site en ligne garde ses couleurs d'origine ; légende de la planche assortie */
.x-planche{--n-cvc:#4C6FBF;--n-froid:#1A93A6;--n-elec:#C98A0C;--n-secu:#C8463A}