/* SCAP Technologies – feuille de style unique, conforme à la charte graphique SCAP 2021.
   Couleurs : bleu Pantone 301C #004D7E, gris Cool Gray 4C #BDBFC3, noir tramé 95 % #2E2D2C.
   Typographie : Futura (titres), Open Sans (contenu). Logo : version blanche sur fond foncé. */
@font-face{font-family:"Futura SCAP";src:url(fonts/futura-light.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Futura SCAP";src:url(fonts/futura-book.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Futura SCAP";src:url(fonts/futura-medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Futura SCAP";src:url(fonts/futura-bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Open Sans SCAP";src:url(fonts/opensans-light.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Open Sans SCAP";src:url(fonts/opensans-regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Open Sans SCAP";src:url(fonts/opensans-semibold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Open Sans SCAP";src:url(fonts/opensans-bold.woff2) format("woff2");font-weight:700;font-display:swap}
:root{
  --bleu:#004D7E; --bleu-2:#0A6AA8; --marine:#00304F; --marine-2:#003C64; --ciel:#7FB0D4; --brume:#EEF2F6; --trait:#D8DCE1;
  --gris-logo:#BDBFC3; --texte:#2E2D2C; --gris:#65696E; --blanc:#fff; --alerte:#B3261E;
  --titre:"Futura SCAP",Futura,"Century Gothic","Trebuchet MS",sans-serif;
  --corps:"Open Sans SCAP","Open Sans","Segoe UI",system-ui,sans-serif;
  --r:6px; --r-lg:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font:400 16px/1.65 var(--corps);color:var(--texte);background:#fff}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--titre);color:var(--marine);line-height:1.15;font-weight:700}
/* titres principaux en capitales, comme dans la mise en situation de la charte */
.hero h1,.head h2,.ph-head h1,.prose h2,h2.sous{text-transform:uppercase;letter-spacing:.02em}
:focus-visible{outline:3px solid var(--ciel);outline-offset:2px;border-radius:3px}
.wrap{width:min(1200px,100% - 40px);margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 14px;z-index:200}.skip:focus{left:8px}
[hidden]{display:none!important}

/* ---------- barre utilitaire + en-tête ---------- */
.util{background:var(--marine);color:#BFD3E4;font-size:14px}
.util .wrap{display:flex;justify-content:flex-end;gap:26px;padding:8px 0;flex-wrap:wrap}
.util a:hover{color:#fff}
.util .pro{color:var(--ciel);font-weight:600}
.top{background:#fff;border-bottom:1px solid var(--trait)}
.top .wrap{display:flex;align-items:center;gap:28px;padding:10px 0}
.logo img{height:56px;width:auto}
.hsearch{position:relative;margin-left:auto;width:min(440px,100%)}
.hsearch input{width:100%;padding:11px 46px 11px 16px;font:inherit;font-size:16px;border:1.5px solid var(--trait);border-radius:var(--r);background:var(--brume);color:var(--texte)}
.hsearch input:focus{border-color:var(--bleu);background:#fff;outline:none;box-shadow:0 0 0 3px rgba(92,184,224,.35)}
.hsearch button{position:absolute;right:4px;top:4px;bottom:4px;width:38px;border:0;border-radius:4px;background:var(--bleu);color:#fff;cursor:pointer}
.hsearch button:hover{background:var(--bleu-2)}
.burger{display:none;margin-left:auto;background:none;border:1.5px solid var(--trait);border-radius:var(--r);padding:8px 14px;font:600 15px var(--titre);color:var(--marine);cursor:pointer}

/* ---------- navigation (bandeau marine + méga-menu) ---------- */
.nav{background:var(--marine-2);position:relative;z-index:60}
.nav ul{list-style:none;display:flex;flex-wrap:wrap}
.nav > .wrap > ul > li > a,.nav > .wrap > ul > li > button{display:block;padding:15px 22px;color:#fff;font:600 16px var(--titre);background:none;border:0;cursor:pointer;letter-spacing:.2px}
.nav > .wrap > ul > li:hover > a,.nav > .wrap > ul > li:hover > button,.nav li.open > button{background:var(--bleu)}
.nav .car{display:inline-block;margin-left:7px;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg)}
.nav .cta{margin-left:auto}
.nav .cta a{background:#fff;color:var(--marine);margin:8px 0;padding:8px 20px;border-radius:50px;font-weight:700}
.nav .cta a:hover{background:var(--ciel)}
.mega{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-top:3px solid var(--ciel);box-shadow:0 24px 40px rgba(10,37,64,.18)}
.has-mega:hover .mega,.has-mega:focus-within .mega,.has-mega.open .mega{display:block}
.mega .wrap{display:grid;grid-template-columns:repeat(6,1fr);gap:28px;padding:30px 0 34px}
.mega h3{font-size:17px;margin-bottom:10px;padding-bottom:8px;border-bottom:2px solid var(--brume)}
.mega h3 a:hover{color:var(--bleu-2)}
.mega li{display:block}
.mega ul{display:block}
.mega ul a{display:flex;justify-content:space-between;gap:8px;padding:5px 0;font-size:15px;color:var(--texte)}
.mega ul a:hover{color:var(--bleu-2)}
.mega ul a span{color:var(--gris);font-size:13px}
.mega .all{display:inline-block;margin-top:10px;font:600 15px var(--titre);color:var(--bleu-2)}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:50px;font:600 16px var(--titre);border:2px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s;line-height:1.2}
.btn-vert{background:var(--bleu);color:#fff}.btn-vert:hover{background:var(--bleu-2)}
.btn-blanc{background:#fff;color:var(--marine)}.btn-blanc:hover{background:var(--ciel)}
.btn-bleu{background:var(--bleu);color:#fff}.btn-bleu:hover{background:var(--bleu-2)}
.btn-ligne{background:transparent;color:var(--bleu);border-color:var(--bleu)}.btn-ligne:hover{background:var(--bleu);color:#fff}
.btn-clair{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}.btn-clair:hover{background:#fff;color:var(--marine)}
.lien{font:600 16px var(--titre);color:var(--bleu-2)}.lien:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- hero ---------- */
.hero{background:linear-gradient(115deg,var(--marine) 0%,#003A62 55%,#0A6AA8 100%);color:#fff;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding:68px 0 72px}
.hero h1{color:#fff;font-size:clamp(34px,4.6vw,56px);font-weight:600;letter-spacing:-.5px;max-width:15em}
.hero .sub{color:#CFE1EF;font-size:19px;margin:18px 0 28px;max-width:34em}
.finder{position:relative;max-width:620px}
.finder label{display:block;font:600 15px var(--titre);color:#CFE1EF;margin-bottom:8px}
.finder .box{display:flex;background:#fff;border-radius:var(--r-lg);padding:6px;box-shadow:0 18px 40px rgba(0,0,0,.28)}
.finder input{flex:1;min-width:0;border:0;padding:14px 16px;font:inherit;font-size:18px;color:var(--texte);background:transparent}
.finder input:focus{outline:none}
.finder .box:focus-within{box-shadow:0 0 0 4px rgba(92,184,224,.6),0 18px 40px rgba(0,0,0,.28)}
.finder button{border:0;background:var(--bleu);color:#fff;font:700 16px var(--titre);padding:0 26px;border-radius:10px;cursor:pointer}
.finder button:hover{background:var(--bleu-2)}
.suggest{position:absolute;left:0;right:0;top:100%;margin-top:8px;background:#fff;color:var(--texte);border-radius:var(--r-lg);box-shadow:0 24px 50px rgba(10,37,64,.3);overflow:hidden;z-index:80;text-align:left}
.hsearch .suggest{margin-top:6px;border:1px solid var(--trait)}
.suggest a{display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:center;padding:9px 14px;border-bottom:1px solid var(--brume)}
.suggest a:hover,.suggest a.on{background:var(--brume)}
.suggest img{width:48px;height:48px;object-fit:contain;background:#fff}
.suggest .ph{width:48px;height:48px;background:var(--brume);border-radius:6px}
.suggest b{display:block;font:600 15px var(--titre);color:var(--marine)}
.suggest small{display:block;font-size:14px;color:var(--gris);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suggest .more{display:block;padding:10px 14px;font:600 15px var(--titre);color:var(--bleu-2);background:var(--brume)}
.suggest .none{padding:14px;color:var(--gris)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.chips a{border:1.5px solid rgba(255,255,255,.35);color:#fff;border-radius:50px;padding:7px 16px;font:500 15px var(--titre)}
.chips a:hover{background:#fff;color:var(--marine)}
.chips a b{font-weight:600;opacity:.75;margin-left:6px}
.hero-vis{position:relative;height:420px}
.hero-vis figure{position:absolute;background:#fff;border-radius:var(--r-lg);box-shadow:0 22px 44px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;padding:14px}
.hero-vis img{max-height:100%;object-fit:contain}
.hero-vis .a{width:46%;height:62%;left:2%;top:0}
.hero-vis .b{width:44%;height:50%;right:2%;top:12%}
.hero-vis .c{width:50%;height:44%;left:26%;bottom:0}

/* ---------- sections ---------- */
.sec{padding:72px 0}
.sec.brume{background:var(--brume)}
.sec.marine{background:var(--marine);color:#CFE1EF}
.sec.marine h2,.sec.marine h3{color:#fff}
.head{margin-bottom:34px;max-width:46em}
.head h2{font-size:clamp(28px,3.4vw,40px);letter-spacing:-.3px}
.head p{margin-top:12px;color:var(--gris);font-size:18px}
.sec.marine .head p{color:#9FBBD3}

/* tuiles « besoins » : photo en bichromie, comme scopus.fr */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:230px;border-radius:var(--r);overflow:hidden;color:#fff;padding:24px;isolation:isolate;transition:transform .2s}
.tile::before{content:"";position:absolute;inset:0;background:var(--t,var(--bleu));z-index:-2}
.tile img{position:absolute;right:20px;top:20px;height:48%;width:auto;max-width:42%;object-fit:contain;background:#fff;border-radius:10px;padding:10px;box-shadow:0 10px 24px rgba(0,0,0,.28);z-index:-1}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,37,64,.5) 0%,rgba(10,37,64,0) 55%);z-index:-1}
.tile .ar{position:absolute;left:24px;top:22px;width:30px;height:30px}
.tile h3{color:#fff;font-size:24px;max-width:10em}
.tile p{font-size:16px;margin-top:6px;color:#E6F0F8;max-width:20em}
.tile:hover{transform:translateY(-3px)}
.t1{--t:#004D7E}.t2{--t:#0A639B}.t3{--t:#003C64}.t4{--t:#1B6EA6}.t5{--t:#0A5688}.t6{--t:#5A5E63}
.tiles .t6{grid-column:span 2}

/* catalogue : familles en listes */
.fam{display:grid;grid-template-columns:repeat(5,1fr);gap:30px}
.fam h3{font-size:20px;padding-bottom:10px;border-bottom:3px solid var(--ciel);margin-bottom:12px}
.fam ul{list-style:none}
.fam li a{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--trait);font-size:16px}
.fam li a:hover{color:var(--bleu-2)}
.fam li a span{color:var(--gris);font-size:14px}

/* grille de produits */
.grid{display:grid;gap:20px}
.g4{grid-template-columns:repeat(4,1fr)}.g3{grid-template-columns:repeat(3,1fr)}
.prod{display:flex;flex-direction:column;background:#fff;border:1px solid var(--trait);border-radius:var(--r);overflow:hidden;transition:border-color .15s,box-shadow .15s}
.prod:hover{border-color:var(--ciel);box-shadow:0 10px 26px rgba(10,37,64,.12)}
.prod .ph{height:190px;display:flex;align-items:center;justify-content:center;padding:16px;background:#fff;border-bottom:1px solid var(--brume)}
.prod .ph img{max-height:100%;object-fit:contain}
.prod .ph img.vide{opacity:.16;max-width:55%}
.prod .tx{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.prod .ref{font:600 14px var(--titre);color:var(--bleu-2)}
.prod h3{font:600 17px/1.3 var(--titre);color:var(--marine);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.prod .pr{margin-top:auto;padding-top:8px;display:flex;align-items:baseline;gap:6px}
.prix{font:700 16px var(--titre),var(--corps);background:var(--brume);color:var(--gris);padding:3px 12px;border-radius:50px}
.prix.reel{background:none;color:var(--marine);font-size:22px;padding:0}
.ht{font-size:13px;color:var(--gris)}

/* ---------- en-tête de page, fil d'Ariane ---------- */
.ph-head{background:linear-gradient(115deg,var(--marine),#003A62);color:#fff;padding:36px 0 40px}
.ph-head h1{color:#fff;font-size:clamp(28px,3.6vw,42px);letter-spacing:-.3px}
.ph-head p{color:#CFE1EF;margin-top:10px;max-width:46em;font-size:18px}
.crumbs{font-size:14px;color:#9FBBD3;margin-bottom:12px}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs i{font-style:normal;margin:0 8px;opacity:.6}

/* barre d'outils catalogue */
.tools{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:8px}
.tools input{flex:1;min-width:220px;max-width:380px;padding:11px 16px;font:inherit;border:1.5px solid var(--trait);border-radius:var(--r);background:var(--brume)}
.tools input:focus{border-color:var(--bleu);background:#fff;outline:none}
.tools .n{color:var(--gris);font-size:15px}
.note{background:var(--brume);border-left:4px solid var(--ciel);padding:12px 16px;border-radius:0 var(--r) var(--r) 0;font-size:16px;margin-bottom:6px}
.note.ok{border-left-color:var(--bleu);background:#E3EEF6}
.note a{color:var(--bleu-2);font-weight:600;text-decoration:underline;text-underline-offset:3px}
h2.sous{font-size:24px;margin:38px 0 16px;padding-bottom:8px;border-bottom:2px solid var(--brume)}

/* ---------- fiche produit ---------- */
.fiche{display:grid;grid-template-columns:minmax(280px,460px) 1fr;gap:48px;align-items:start}
.fiche .photo{background:#fff;border:1px solid var(--trait);border-radius:var(--r);padding:30px;display:flex;align-items:center;justify-content:center;min-height:380px;position:sticky;top:20px}
.fiche .photo img{max-height:340px;object-fit:contain}.fiche .photo img.vide{opacity:.16;max-width:55%}
.marque{display:inline-block;font:600 14px var(--titre);color:var(--bleu);border:1.5px solid var(--bleu);border-radius:50px;padding:3px 14px;margin-bottom:12px}
.fiche h1{font-size:clamp(26px,3vw,36px);letter-spacing:-.3px}
.fiche .reference{color:var(--gris);margin:8px 0 18px}
.fiche .reference b{color:var(--marine)}
.fiche .achat{background:var(--brume);border-radius:var(--r);padding:18px 20px;margin:18px 0}
.fiche .achat .prix{font-size:26px}.fiche .achat .prix.reel{font-size:34px}
.fiche .achat p{margin-top:8px;font-size:15px;color:var(--gris)}
.fiche .achat p a{color:var(--bleu-2);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.fiche .intro{font-size:18px;margin-bottom:6px}
.faits{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:20px 0}
.faits div{border:1px solid var(--trait);border-radius:var(--r);padding:10px 14px}
.faits small{display:block;color:var(--gris);font-size:13px}
.faits b{font:600 16px/1.3 var(--titre);color:var(--marine)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.fdv{display:inline-block;background:#FDECEA;color:var(--alerte);font-weight:600;padding:6px 14px;border-radius:var(--r);margin-top:14px}
.bloc{margin-top:46px}
.bloc h2{font-size:26px;margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid var(--brume)}
.coches{list-style:none;columns:2;column-gap:40px}
.coches li{position:relative;padding:6px 0 6px 28px;break-inside:avoid}
.coches li::before{content:"";position:absolute;left:3px;top:13px;width:12px;height:7px;border-left:3px solid var(--bleu);border-bottom:3px solid var(--bleu);transform:rotate(-45deg)}
table.spec{width:100%;border-collapse:collapse;font-size:16px}
table.spec th,table.spec td{padding:11px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--trait)}
table.spec th{width:32%;color:var(--marine);font-weight:600;background:var(--brume)}
table.spec tr:last-child th,table.spec tr:last-child td{border-bottom:0}
table.spec{border:1px solid var(--trait);border-radius:var(--r);overflow:hidden}
.petit{color:var(--gris);font-size:15px;margin-top:12px}
.petit a{color:var(--bleu-2);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.techno{background:var(--brume);border-radius:var(--r);padding:18px 22px;margin-bottom:14px}
.techno h3{font-size:19px;margin-bottom:6px}

/* ---------- pages de contenu ---------- */
.prose{max-width:46em}.prose p{margin-bottom:16px}.prose .chapo{font:500 22px/1.45 var(--titre);color:var(--marine)}
.prose h2{font-size:26px;margin:34px 0 12px}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.cols3 > div{border-top:3px solid var(--ciel);padding-top:14px}
.cols3 h3{font-size:21px;margin-bottom:8px}
.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:e}
.etapes > div{counter-increment:e;position:relative;padding-left:58px}
.etapes > div::before{content:counter(e);position:absolute;left:0;top:0;width:42px;height:42px;border-radius:50%;background:var(--bleu);color:#fff;font:600 21px/42px var(--titre);text-align:center}
.etapes h3{font-size:21px;margin-bottom:6px}
.sec.marine .etapes > div::before{background:var(--ciel);color:var(--marine)}
.sec.marine .etapes p{color:#CFE1EF}
.liens{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.liens a{display:block;border:1px solid var(--trait);border-radius:var(--r);padding:20px 22px}
.liens a:hover{border-color:var(--ciel);box-shadow:0 8px 22px rgba(10,37,64,.1)}
.liens h3{font-size:20px;margin-bottom:4px}
.liens p{color:var(--gris);font-size:16px}
.connexion{max-width:460px;border:1px solid var(--trait);border-radius:var(--r-lg);padding:30px}
.connexion label{display:block;font:600 16px var(--titre);color:var(--marine);margin:16px 0 6px}
.connexion input{width:100%;padding:12px 14px;font:inherit;border:1.5px solid var(--trait);border-radius:var(--r);background:var(--brume)}
.connexion input:focus{border-color:var(--bleu);background:#fff;outline:none}
.connexion .btn{margin-top:22px;width:100%;justify-content:center}
#loginmsg{color:var(--alerte);margin-top:12px;min-height:1.5em;font-weight:600}

/* ---------- pied de page ---------- */
footer{background:var(--marine);color:#AFC6DA;font-size:16px;padding-top:56px}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px}
footer h4{color:#fff;font-size:17px;margin-bottom:12px}
footer li{list-style:none;margin-bottom:7px}
footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
footer .lg{display:inline-block;margin-bottom:16px}
footer .lg img{height:60px;width:auto}
footer .bas{border-top:1px solid #1B4668;margin-top:44px;padding:18px 0;font-size:14px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* ---------- adaptatif ---------- */
@media(max-width:1100px){.fam{grid-template-columns:repeat(3,1fr)}.mega .wrap{grid-template-columns:repeat(3,1fr)}}
@media(max-width:960px){
  .hero .wrap{grid-template-columns:1fr;padding:44px 0 52px}.hero-vis{display:none}
  .g4{grid-template-columns:repeat(2,1fr)}.tiles,.cols3,.etapes{grid-template-columns:1fr 1fr}
  .fiche{grid-template-columns:1fr}.fiche .photo{position:static;min-height:280px}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .burger{display:block}.nav{display:none}.nav.open{display:block}
  .nav ul{flex-direction:column}.nav > .wrap > ul > li > a,.nav > .wrap > ul > li > button{width:100%;text-align:left}
  .nav .cta{margin:0}.nav .cta a{display:inline-block;margin:10px 0 14px}
  .mega{position:static;box-shadow:none;border-top:0}.has-mega:hover .mega{display:none}.has-mega.open .mega{display:block}
  .mega .wrap{grid-template-columns:1fr;padding:6px 0 14px;gap:16px}.mega{background:var(--marine)}.mega h3,.mega ul a{color:#fff}.mega h3{border-color:#1B4668}.mega ul a span{color:#9FBBD3}
  .top .wrap{flex-wrap:wrap}.hsearch{order:3;width:100%}
  .tiles,.cols3,.etapes,.liens{grid-template-columns:1fr}.fam{grid-template-columns:1fr}.tiles .t6{grid-column:auto}
  .coches{columns:1}.sec{padding:52px 0}
  table.spec th{width:40%}
  footer .cols{grid-template-columns:1fr}
}
@media(max-width:480px){.g4,.g3{grid-template-columns:1fr 1fr;gap:12px}.prod .ph{height:140px}.prod h3{font-size:15px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.hero .wrap > *,.tiles > *,.fiche > *,.grid > *,.cols3 > *{min-width:0}
body{overflow-x:hidden}

/* filigrane : pictogramme SCAP discret, recommandé par la charte */
.hero::before{content:"";position:absolute;right:-6%;bottom:-18%;width:46%;aspect-ratio:1.9;background:url(img/pictogramme-blanc.svg) center/contain no-repeat;opacity:.06;pointer-events:none}
.hero .wrap{position:relative;z-index:1}
.logo{padding:5px 0}

/* ---------- page MACS (identification et accès par smartphone) ---------- */
.macs-hero .wrap{grid-template-columns:1.1fr .9fr}
.surtitre{font:600 15px var(--titre);text-transform:uppercase;letter-spacing:.14em;color:var(--ciel);margin-bottom:14px}
.macs-vis svg{width:100%;height:auto;max-height:380px;filter:drop-shadow(0 22px 34px rgba(0,0,0,.35))}
.duo{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.duo article{background:#fff;border:1px solid var(--trait);border-top:4px solid var(--bleu);border-radius:var(--r);padding:30px 30px 26px}
.sec.brume .duo article{border-color:#fff;border-top-color:var(--bleu)}
.duo h3{font-size:28px;margin-bottom:6px}
.duo .acc{font:500 18px/1.4 var(--titre);color:var(--bleu-2);margin-bottom:12px}
.duo p{margin-bottom:14px}
.duo .coches{columns:1}
.flux{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:14px;margin:6px 0 18px}
.flux .nd{background:var(--brume);border-radius:var(--r-lg);padding:22px 22px 20px;border-bottom:4px solid var(--bleu)}
.flux .nd b{display:block;font:700 21px var(--titre);color:var(--marine);margin-bottom:6px}
.flux .nd span{color:var(--gris);font-size:16px}
.flux .lk{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--bleu);min-width:92px}
.flux .lk svg{width:34px;height:34px}
.flux .lk small{font:600 13px var(--titre);color:var(--gris);text-align:center}
.retour{max-width:46em;color:var(--gris);margin-bottom:42px;padding-left:16px;border-left:3px solid var(--ciel)}
.compat{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.compat > div{background:var(--marine-2);border-radius:var(--r);padding:24px 22px;border-top:3px solid var(--ciel)}
.compat h3{font-size:21px;margin-bottom:8px}
.compat p{color:#CFE1EF;font-size:16px}
.compat .mini{margin-top:12px;padding-top:12px;border-top:1px solid #1B4668;font-size:14px;color:#9FBBD3}
.chiffres{list-style:none;display:flex;flex-wrap:wrap;gap:16px 56px;margin:38px 0 8px}
.chiffres b{display:block;font:700 34px/1.1 var(--titre);color:#fff}
.chiffres span{color:#9FBBD3;font-size:15px}
.petit.clair{color:#9FBBD3}.petit.clair a{color:#fff}
.hier{display:grid;gap:12px;max-width:820px}
.hier > div{border:1px solid var(--trait);border-radius:var(--r);padding:16px 22px;background:#fff}
.hier b{display:block;font:700 19px var(--titre);color:var(--marine)}
.hier span{color:var(--gris);font-size:16px}
.hier .n1{background:var(--marine);border-color:var(--marine)}.hier .n1 b{color:#fff}.hier .n1 span{color:#9FBBD3}
.hier .n2{background:var(--bleu);border-color:var(--bleu);margin-left:28px}.hier .n2 b{color:#fff}.hier .n2 span{color:#CFE1EF}
.hier .n3{display:grid;grid-template-columns:1fr 1fr;gap:12px;border:0;padding:0;margin-left:56px;background:none}
.hier .n3 > div{border:1px solid var(--trait);border-radius:var(--r);padding:16px 22px;background:var(--brume)}
.hier .n4{margin-left:84px;border-left:4px solid var(--bleu)}
.teaser{display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center;background:linear-gradient(115deg,var(--marine),#003A62 60%,var(--bleu-2));color:#fff;border-radius:var(--r-lg);padding:44px 48px}
.teaser h2{color:#fff;font-size:clamp(26px,3vw,36px);text-transform:uppercase;letter-spacing:.02em}
.teaser p{color:#CFE1EF;margin:12px 0 22px;max-width:36em;font-size:18px}
.teaser svg{width:100%;height:auto;max-height:230px}
@media(max-width:900px){
  .macs-hero .wrap{grid-template-columns:1fr}.macs-vis{max-width:340px}
  .duo,.compat,.hier .n3,.teaser{grid-template-columns:1fr}
  .flux{grid-template-columns:1fr}.flux .lk{flex-direction:row;min-width:0;padding:2px 0}.flux .lk svg{transform:rotate(90deg);width:28px;height:28px}
  .hier .n2,.hier .n3,.hier .n4{margin-left:0}.teaser{padding:30px 24px}
}

/* ---------- page MACS : images, vidéo, compléments ---------- */
.macs-vis img{width:100%;height:auto;border-radius:var(--r-lg);box-shadow:0 22px 44px rgba(0,0,0,.35)}
.duo article .vignette{width:calc(100% + 60px);margin:-30px -30px 22px;max-width:none;height:220px;object-fit:cover;border-radius:var(--r) var(--r) 0 0}
.chiffres-large{justify-content:space-between;gap:16px 24px;margin:0;flex-wrap:nowrap}
.chiffres-large b{font-size:clamp(34px,4.4vw,52px)}
.chiffres-large li{min-width:150px}
.schema{margin-top:44px;background:#fff;border:1px solid var(--trait);border-radius:var(--r-lg);padding:20px}
.schema img{width:100%;height:auto}
.schema figcaption{margin-top:10px;color:var(--gris);font-size:15px}
.schema figcaption a{color:var(--bleu-2);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.video{position:relative;max-width:860px;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:var(--marine);box-shadow:0 18px 40px rgba(10,37,64,.2)}
.video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75}
.video button{position:absolute;inset:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:none;border:0;color:#fff;cursor:pointer;font:600 18px var(--titre)}
.video button svg{width:84px;height:84px;padding:22px 18px 22px 26px;border-radius:50%;background:var(--bleu);transition:background .15s,transform .15s}
.video button:hover svg{background:var(--bleu-2);transform:scale(1.06)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cols3.six{row-gap:34px}
.photos{display:grid;grid-template-columns:.9fr 1.1fr;gap:18px;margin-top:30px}
.photos img{width:100%;height:240px;object-fit:cover;border-radius:var(--r)}
@media(max-width:900px){.chiffres-large{flex-wrap:wrap}.photos{grid-template-columns:1fr}.duo article .vignette{width:calc(100% + 60px)}.chiffres-large{gap:20px 30px}}

/* ---------- page MACS : marques et produits compatibles ---------- */
.grp{margin-top:46px}.grp:first-of-type{margin-top:0}
.grp h3{font-size:26px;padding-bottom:10px;border-bottom:3px solid var(--ciel)}
.grp .gi{color:var(--gris);margin:12px 0 22px;max-width:46em}
.pms{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:20px}
.pm{display:flex;flex-direction:column;background:#fff;border:1px solid var(--trait);border-radius:var(--r);overflow:hidden;transition:border-color .15s,box-shadow .15s}
.pm:hover{border-color:var(--ciel);box-shadow:0 10px 26px rgba(10,37,64,.1)}
.pm .pi{height:210px;background:#fff;display:flex;align-items:center;justify-content:center;padding:16px;border-bottom:1px solid var(--brume)}
.pm .pi img{max-height:100%;max-width:100%;object-fit:contain}
.pm .pi.sans{background:var(--marine-2)}.pm .pi.sans svg{width:88px;height:88px}
.pm .pt{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px}
.pm .mq{font:600 13px var(--titre);text-transform:uppercase;letter-spacing:.12em;color:var(--bleu-2)}
.pm h4{font:700 21px/1.2 var(--titre);color:var(--marine);margin:6px 0 10px}
.pm p{font-size:16px;color:var(--texte);margin-bottom:12px}
.pm ul{list-style:none;margin:0 0 16px;flex:1}
.pm li{position:relative;padding:4px 0 4px 20px;font-size:15px;color:var(--gris)}
.pm li::before{content:"";position:absolute;left:2px;top:11px;width:8px;height:5px;border-left:2px solid var(--bleu);border-bottom:2px solid var(--bleu);transform:rotate(-45deg)}
.pm .lien{margin-top:auto}
@media(max-width:480px){.pms{grid-template-columns:1fr}}

/* ---------- convertisseurs ---------- */
.conv{background:var(--brume);border-radius:var(--r-lg);padding:28px 28px 24px;margin-bottom:44px}
.conv .champs{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end}
.conv .ch{display:flex;flex-direction:column;gap:6px}
.conv .ch:first-child{flex:1;min-width:260px}
.conv label{font:600 15px var(--titre);color:var(--marine)}
.conv input,.conv select{padding:12px 16px;font:inherit;font-size:17px;border:1.5px solid var(--trait);border-radius:var(--r);background:#fff;color:var(--texte)}
.conv input:focus,.conv select:focus{border-color:var(--bleu);outline:none;box-shadow:0 0 0 3px rgba(92,184,224,.35)}
.conv .err{color:var(--alerte);font-weight:600;margin-top:12px;min-height:0}
.conv .err:empty{display:none}
.conv .res{margin-top:22px;overflow-x:auto}
.conv-t{background:#fff;min-width:640px}
.conv-t thead th{width:auto;background:var(--marine-2);color:#fff;font:600 14px var(--titre);letter-spacing:.04em}
.conv-t tbody th{width:20%}
.conv-t .val{font:600 16px ui-monospace,Consolas,monospace;word-break:break-all;margin-right:8px}
.conv-t .cp{border:1px solid var(--trait);background:#fff;color:var(--bleu-2);border-radius:50px;padding:2px 10px;font:600 12px var(--titre);cursor:pointer}
.conv-t .cp:hover{background:var(--bleu);color:#fff;border-color:var(--bleu)}
.conv-t .det{font-size:15px;color:var(--gris)}
.conv-t .det code{font:13px ui-monospace,Consolas,monospace;color:var(--texte);word-break:break-all}
.conv-t .det em{display:block;color:var(--bleu-2);font-style:normal;margin-bottom:4px}
@media(max-width:700px){.conv{padding:20px 16px}.conv .champs{flex-direction:column;align-items:stretch}.conv .btn{justify-content:center}}

/* galerie de miniatures sur les fiches produits MACS */
.pm .pg .pi{border-bottom:0}
.pm .ths{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px 14px;border-bottom:1px solid var(--brume)}
.pm .th{width:52px;height:52px;padding:3px;border:2px solid var(--trait);border-radius:var(--r);background:#fff;cursor:pointer}
.pm .th:hover{border-color:var(--ciel)}.pm .th.on{border-color:var(--bleu)}
.pm .th img{width:100%;height:100%;object-fit:contain}

/* actions des fiches produits MACS */
.pm .act{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:auto}
.pm .btn.pdf{padding:9px 18px;font-size:15px}
.pm .btn.pdf svg{flex:none}

/* versions des lecteurs et tableaux comparatifs */
.pm .vs{margin:0 0 16px;border:1px solid var(--trait);border-radius:var(--r);background:var(--brume)}
.pm .vs summary{cursor:pointer;padding:9px 14px;font:600 15px var(--titre);color:var(--marine)}
.pm .vs ul{margin:0;padding:0 14px 10px;list-style:none}
.pm .vs li{padding:3px 0;font-size:14px;color:var(--gris)}.pm .vs li::before{display:none}.pm .vs li b{color:var(--marine);font-weight:600;margin-right:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- comparatifs MACS ---------- */
.cmpl{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cmpl a{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--trait);border-radius:var(--r-lg);padding:26px 28px}
.cmpl a:hover{border-color:var(--bleu);box-shadow:0 12px 30px rgba(10,37,64,.10)}
.cmpl .vg{display:flex;gap:10px;margin-bottom:8px}
.cmpl .vg img{width:76px;height:76px;object-fit:contain;background:#fff;border:1px solid var(--brume);border-radius:var(--r);padding:6px}
.cmpl h3{font-size:24px}
.cmpl p{color:var(--gris);font-size:16px}
.cmpl .go{margin-top:auto;padding-top:6px;font:600 16px var(--titre);color:var(--bleu-2);text-decoration:underline;text-underline-offset:4px}
.cmp-sec{padding-top:44px}
.cmp-intro{max-width:46em;color:var(--gris);font-size:17px;margin-bottom:22px}
.cmp-filtres{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:22px}
.cmp-filtres .fl{font:600 15px var(--titre);color:var(--marine);margin-right:4px}
.cmp-filtres .fl.sp{margin-left:18px}
.cf{border:1.5px solid var(--trait);background:#fff;color:var(--marine);border-radius:50px;padding:7px 16px;font:600 15px var(--titre);cursor:pointer}
.cf span{color:var(--gris);font-weight:500;margin-left:4px}
.cf:hover{border-color:var(--bleu)}
.cf.on{background:var(--marine);border-color:var(--marine);color:#fff}.cf.on span{color:var(--ciel)}
.tw2{overflow-x:auto;border-top:3px solid var(--marine)}
table.cmpx{border-collapse:separate;border-spacing:0;width:100%;min-width:980px;font-size:15px;line-height:1.45}
table.cmpx th,table.cmpx td{padding:13px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--trait)}
table.cmpx thead th,table.cmpx thead td{vertical-align:bottom;border-bottom:2px solid var(--marine);padding-top:18px;padding-bottom:16px;background:#fff}
table.cmpx thead img{width:100%;max-width:116px;height:84px;object-fit:contain;margin-bottom:10px}
table.cmpx thead strong{display:block;font:700 17px/1.2 var(--titre);color:var(--marine)}
table.cmpx thead .br{display:block;color:var(--gris);font-weight:400;margin-top:3px}
table.cmpx thead .ty{display:block;color:var(--bleu-2);font-weight:600;margin-top:6px}
.cmpx a.pdf,.gm a.pdf{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font:600 14px var(--titre);color:var(--bleu-2);text-decoration:underline;text-underline-offset:3px}
.cmpx a.pdf:hover,.gm a.pdf:hover{color:var(--marine)}
table.cmpx tbody th[scope=row]{width:132px;min-width:118px;background:#fff;color:var(--marine);font:600 15px var(--titre);position:sticky;left:0;z-index:1}
table.cmpx tr.gr th{background:var(--brume);color:var(--marine);font:700 16px var(--titre);padding:10px 14px;border-bottom:0;position:static}
table.cmpx tr.gr th span{font:400 14px var(--corps);color:var(--gris);margin-left:8px}
table.cmpx td.nc,table.cmpx td.nc span{color:#9AA1A8}
table.cmpx tbody tr:not(.gr):hover td,table.cmpx tbody tr:not(.gr):hover th[scope=row]{background:#F5F8FB}
table.cmpx.lect{min-width:860px}
table.cmpx.lect th.b,table.cmpx.lect td.b{text-align:center;width:90px}
table.cmpx.lect tbody th[scope=row]{width:auto;min-width:240px}
.vi{display:flex;align-items:center;gap:14px;font-family:var(--corps);font-weight:400}
.vi img{width:56px;height:56px;object-fit:contain;flex:none;background:#fff;border:1px solid var(--brume);border-radius:var(--r);padding:4px}
.vi strong{display:block;font:700 16px/1.25 var(--titre);color:var(--marine)}
.vi .ref{display:block;font-size:14px;color:var(--gris);margin-top:2px}
.vi .ref a{text-decoration:underline;text-underline-offset:3px}.vi .ref a:hover{color:var(--bleu-2)}
.ok{color:var(--bleu);vertical-align:middle}
.tag{display:inline-block;margin:0 6px 4px 0;padding:3px 11px;border-radius:50px;font:600 13px var(--titre)}
.tag.bt{background:var(--bleu);color:#fff}
.tag.nfc{background:#fff;color:var(--bleu);border:1.5px solid var(--bleu)}
.tag.kit{background:var(--brume);color:var(--marine)}
.cmp-vide{padding:34px 0;color:var(--gris);font-size:17px}
.gms{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:6px}
.gm h3{font-size:22px;padding-bottom:10px;border-bottom:3px solid var(--ciel);margin-bottom:6px}
.gm dl > div{display:grid;grid-template-columns:128px 1fr;gap:14px;padding:9px 0;border-bottom:1px solid var(--trait)}
.gm dt{font:600 15px var(--titre);color:var(--marine)}
.gm dd{font-size:15px;color:var(--texte)}
.cmp-retour{margin-top:34px}
@media(max-width:900px){.cmpl,.gms{grid-template-columns:1fr}.cmp-filtres .fl.sp{margin-left:0}.gm dl > div{grid-template-columns:1fr;gap:2px}}
table.cmpx thead th,table.cmpx thead td{vertical-align:top}
table.cmpx.lect tbody td,table.cmpx.lect tbody th[scope=row]{vertical-align:middle}
table.cmpx thead img{display:block}

/* le suffixe HT n'a de sens que devant un vrai prix */
.prix:not(.reel)+.ht{display:none}

/* ---------- securite : debut ---------- */
:root{--rouge:#D64545;--rouge-f:#FBE9E9;--ambre:#C98A12;--vert:#1F9D5B;--vert-f:#E4F6EC}
.hero.sec-h::before{display:none}
.hero.sec-h .wrap{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center;padding:52px 0 58px;gap:44px}
.hero.sec-h h1{font-size:clamp(36px,4.8vw,60px);line-height:1.04;letter-spacing:-.02em;text-transform:none;max-width:11em}
.hero.sec-h .sub{max-width:31em}
.hero.sec-h .acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero.sec-h .acts .lien{color:#fff;text-decoration:underline;text-underline-offset:4px}

/* banc d'essai : le chemin du badge */
.banc{background:#fff;color:var(--texte);border-radius:var(--r-lg);padding:20px 22px 22px;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.banc fieldset{border:0;margin:0 0 14px;padding:0}
.banc legend{font:600 15px var(--titre);color:var(--marine);margin-bottom:8px;padding:0}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{flex:1 1 auto;border:1.5px solid var(--trait);background:#fff;color:var(--marine);border-radius:var(--r);padding:8px 12px;font:600 14px/1.15 var(--titre);cursor:pointer;text-align:center}
.seg button:hover{border-color:var(--bleu)}
.seg button[aria-pressed=true]{background:var(--marine);border-color:var(--marine);color:#fff}
.seg small{display:block;font:400 12px var(--corps);opacity:.75;margin-top:2px}
.chemin{position:relative;display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:center;gap:8px;margin:18px 0 8px;padding:20px 10px 14px;background:var(--brume);border-radius:var(--r)}
.noeud{display:flex;flex-direction:column;align-items:center;gap:6px;font:600 13px var(--titre);color:var(--marine);text-align:center;min-width:64px}
.noeud svg{width:54px;height:54px}
.noeud .sam{display:none;font:600 11px var(--titre);background:var(--marine);color:#fff;border-radius:50px;padding:2px 9px}
[data-liaison="3"] .noeud.ctrl .sam{display:inline-block}
.lien-v{position:relative;height:46px;display:flex;align-items:center}
.lien-v::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;background:var(--trait);border-radius:2px}
.paquet{position:absolute;left:0;top:50%;transform:translateY(-50%);max-width:100%;font:600 11px/1 ui-monospace,Consolas,monospace;padding:5px 8px;border-radius:5px;background:#fff;border:1.5px solid var(--bleu);color:var(--marine);white-space:nowrap;animation:va 3.4s ease-in-out infinite}
.lien-v.b .paquet{animation-delay:.0s}.lien-v.c .paquet{animation-delay:1.1s}
@keyframes va{0%{left:0;opacity:0}10%{opacity:1}80%{opacity:1}100%{left:calc(100% - 70px);opacity:0}}
.paquet.clair{border-color:var(--rouge);color:var(--rouge);background:var(--rouge-f)}
.paquet.chiffre{border-color:var(--vert);color:var(--vert);background:var(--vert-f)}
.sonde{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font:600 11px var(--titre);padding:3px 9px;border-radius:50px;white-space:nowrap}
.sonde.mal{background:var(--rouge);color:#fff}.sonde.bien{background:var(--vert);color:#fff}
.verdict{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;margin-top:12px;padding:14px 16px;border-radius:var(--r);border:1.5px solid var(--trait)}
.jauge{display:flex;gap:4px;align-items:flex-end;height:44px}
.jauge i{width:12px;border-radius:3px;background:var(--trait)}
.jauge i:nth-child(1){height:12px}.jauge i:nth-child(2){height:20px}.jauge i:nth-child(3){height:28px}.jauge i:nth-child(4){height:36px}.jauge i:nth-child(5){height:44px}
.verdict[data-n="0"] .jauge i:nth-child(-n+1),.verdict[data-n="1"] .jauge i:nth-child(-n+2){background:var(--rouge)}
.verdict[data-n="2"] .jauge i:nth-child(-n+3){background:var(--ambre)}
.verdict[data-n="3"] .jauge i:nth-child(-n+4){background:#2E7FB8}
.verdict[data-n="4"] .jauge i:nth-child(-n+5){background:var(--vert)}
.verdict h3{font-size:19px;margin:0 0 3px}
.verdict p{font-size:15px;color:var(--gris);margin:0}
.verdict .cfg{display:inline-block;margin-top:6px;font:600 13px var(--titre);padding:2px 10px;border-radius:50px;background:var(--brume);color:var(--marine)}
.banc .cta-b{margin-top:14px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.banc .cta-b span{font-size:14px;color:var(--gris)}

/* pages de fond */
.stat3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.stat3 > div{border-top:3px solid var(--rouge);padding-top:14px}
.stat3 h3{font-size:22px;margin-bottom:6px}
.marches{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:end;margin-top:8px}
.marches li{display:flex;flex-direction:column;justify-content:flex-end}
.marches .bar{border-radius:var(--r) var(--r) 0 0;padding:14px 14px 12px;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;min-height:var(--h)}
.marches .bar b{font:700 18px/1.15 var(--titre)}
.marches .bar span{font-size:14px;opacity:.92;margin-top:3px}
.marches .m1 .bar{background:var(--rouge);--h:120px}.marches .m2 .bar{background:var(--ambre);--h:160px}
.marches .m3 .bar{background:#2E7FB8;--h:200px}.marches .m4 .bar{background:var(--vert);--h:240px}
.marches p{font-size:15px;color:var(--texte);margin:12px 0 0}
.marches .tag{display:inline-block;margin-top:8px;font:600 13px var(--titre);padding:2px 10px;border-radius:50px}
.m1 .tag{background:var(--rouge-f);color:var(--rouge)}.m2 .tag{background:#FBF1DC;color:#8F6209}.m3 .tag{background:#E3F0FA;color:#1E5F8C}.m4 .tag{background:var(--vert-f);color:#146B3E}
.mapping{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.mapping > div{border:1px solid var(--trait);border-radius:var(--r-lg);padding:22px}
.mapping h3{font-size:21px;margin-bottom:10px}
.mapping .carte{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:12px 0}
.mapping .carte i{display:block;height:34px;border-radius:5px;background:#D8DCE1}
.mapping .std .carte i{background:#E7B6B6}
.mapping .pers .carte i:nth-child(odd){background:#2E7FB8}.mapping .pers .carte i:nth-child(even){background:#7FB0D4}
.mapping .std{border-top:4px solid var(--rouge)}.mapping .pers{border-top:4px solid var(--vert)}
.cles{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 32px}
.cles > div{padding-left:18px;border-left:3px solid var(--ciel)}
.cles h3{font-size:20px;margin-bottom:4px}
.sources{columns:2;column-gap:40px;font-size:15px;color:var(--gris)}
.sources li{break-inside:avoid;margin-bottom:8px}
.sources a{color:var(--bleu-2);text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){
  .hero.sec-h .wrap{grid-template-columns:1fr}.stat3,.mapping,.cles{grid-template-columns:1fr}.marches{grid-template-columns:1fr 1fr}.sources{columns:1}
  .chemin{grid-template-columns:auto 1fr auto;row-gap:6px}.chemin .lien-v.c{grid-column:1/-1;order:5}.noeud.ctrl{order:4}
}
@media(prefers-reduced-motion:reduce){.paquet{animation:none;left:calc(50% - 35px);opacity:1}}

/* parcours accompagne */
.parcours{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:34px;align-items:start}
.pas{list-style:none;display:grid;gap:10px;counter-reset:p}
.pas li button{width:100%;text-align:left;background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.2);border-radius:var(--r);padding:14px 16px 14px 56px;color:#fff;cursor:pointer;position:relative;font:inherit}
.pas li button::before{counter-increment:p;content:counter(p);position:absolute;left:14px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font:600 16px/30px var(--titre);text-align:center}
.pas li button b{display:block;font:600 18px var(--titre)}
.pas li button span{display:block;font-size:15px;color:#CFE1EF;margin-top:3px}
.pas li button[aria-current=step]{background:#fff;border-color:#fff;color:var(--marine)}
.pas li button[aria-current=step] span{color:var(--gris)}
.pas li button[aria-current=step]::before{background:var(--marine);color:#fff}
.pas li.fait button::before{background:var(--ciel);color:var(--marine);content:"\2713"}
.scene-p{background:#fff;color:var(--texte);border-radius:var(--r-lg);padding:22px;box-shadow:0 24px 50px rgba(0,0,0,.3)}
.piste{position:relative;height:44px;margin:4px 20px 26px}
.piste::before{content:"";position:absolute;left:0;right:0;top:50%;height:4px;background:var(--trait);border-radius:2px;transform:translateY(-50%)}
.piste b{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--trait);transform:translate(-50%,-50%)}
.piste b:nth-of-type(1){left:0}.piste b:nth-of-type(2){left:33.333%}.piste b:nth-of-type(3){left:66.666%}.piste b:nth-of-type(4){left:100%}
.piste .rep{position:absolute;top:50%;left:0;width:42px;height:42px;border-radius:50%;background:var(--marine) url(img/pictogramme-blanc.svg) center/70% no-repeat;transform:translate(-50%,-50%);transition:left .9s cubic-bezier(.3,.7,.2,1);box-shadow:0 6px 14px rgba(0,48,79,.35)}
.piste small{position:absolute;top:46px;transform:translateX(-50%);font:600 12px var(--titre);color:var(--gris);white-space:nowrap}
.pills{display:flex;justify-content:space-between;gap:10px;margin:0 0 4px}
.pills span{font:600 13px var(--titre);background:var(--brume);color:var(--marine);border-radius:50px;padding:3px 12px}
.parcours .rejouer{margin-top:12px;background:none;border:0;color:var(--bleu-2);font:600 14px var(--titre);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:0}
.accomp{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;margin-top:26px;padding:18px 22px;background:var(--brume);border-radius:var(--r);border-left:4px solid var(--bleu)}
.accomp p{margin:0;font:500 18px/1.4 var(--titre);color:var(--marine);max-width:36em}
@media(max-width:900px){.parcours{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.piste .rep{transition:none}}
/* ---------- securite : fin ---------- */

footer .marques{color:#9FBBD3;font-size:13px;margin-top:10px}

/* ---------- fido et omnikey : debut ---------- */
.chemin3{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;margin:22px 0 8px;padding:26px 12px 14px;background:var(--brume);border-radius:var(--r)}
.noeud.site{position:relative}
.noeud.site .att{display:none;position:absolute;top:-30px;right:-10px;width:36px;height:36px}
.noeud.site .att svg{width:100%;height:100%}
[data-site="1"] .noeud.site .att{display:block}
.noeud.site .dom{font:600 11px ui-monospace,Consolas,monospace;color:var(--marine);max-width:150px;word-break:break-all}
[data-site="1"] .noeud.site .dom{color:var(--rouge)}
.duo2{display:grid;grid-template-columns:.8fr 1.2fr;gap:44px;align-items:center}
.photo-cle img{display:block;width:100%;height:auto;border-radius:var(--r-lg);box-shadow:0 18px 40px rgba(10,37,64,.18)}
.photo-cle figcaption{font-size:14px;color:var(--gris);margin-top:10px}
.encart{margin-top:30px;border:1.5px solid var(--trait);border-left:5px solid var(--ambre);border-radius:var(--r);padding:18px 22px;background:#fff}
.encart h3{font-size:20px;margin-bottom:6px}
.encart p{margin:0;color:var(--texte);font-size:16px;max-width:60em}
.mapnis h3{font-size:22px;margin-bottom:8px}
.mapnis li b{color:var(--marine)}
/* un badge, deux usages */
.dbl .uscene{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;background:var(--brume);border-radius:var(--r);padding:20px 14px}
.dbl .branches{display:grid;gap:16px}
.dbl .branche{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px;opacity:.38;transition:opacity .4s}
.dbl .branche .lien-v{height:40px}
.dbl .branche .paquet{animation:none;opacity:0;left:0;font-size:10.5px}
.dbl[data-step="0"] .branche.haut,.dbl[data-step="1"] .branche.bas,.dbl[data-step="2"] .branche{opacity:1}
.dbl[data-step="0"] .branche.haut .paquet,.dbl[data-step="1"] .branche.bas .paquet{animation:va 2.6s ease-in-out infinite;opacity:1}
.dbl[data-step="2"] .branche .paquet{opacity:1;left:calc(50% - 50px);border-color:var(--rouge);color:var(--rouge);background:var(--rouge-f);text-decoration:line-through}
.dbl .noeud.cible em{font:600 12px var(--titre);font-style:normal;padding:2px 10px;border-radius:50px;background:var(--trait);color:var(--gris)}
.dbl[data-step="0"] .porte em,.dbl[data-step="1"] .pc em{background:var(--vert-f);color:var(--vert)}
.dbl[data-step="2"] .cible em{background:var(--rouge-f);color:var(--rouge)}
.dbl .noeud.badge .rev{display:none;font:600 12px var(--titre);font-style:normal;background:var(--rouge);color:#fff;border-radius:50px;padding:2px 10px}
.dbl[data-step="2"] .noeud.badge .rev{display:inline-block}
.dbl[data-step="2"] .noeud.badge svg{filter:grayscale(1);opacity:.45}
.dbl .legende{margin:14px 2px 0;font-size:15px;color:var(--gris);min-height:46px}
@media(max-width:900px){.duo2{grid-template-columns:1fr}.chemin3{grid-template-columns:auto 1fr auto}}
/* famille OMNIKEY */
.om-intro{max-width:46em;color:var(--gris);margin:6px 0 10px}
.om-grp{margin-top:30px}
.om-grp > h3{font-size:24px;padding-bottom:8px;border-bottom:3px solid var(--ciel)}
.om-grp .gi{color:var(--gris);margin:10px 0 16px}
.om-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.om{display:flex;flex-direction:column;background:#fff;border:1px solid var(--trait);border-radius:var(--r);overflow:hidden}
.om .ph{height:170px;display:flex;align-items:center;justify-content:center;background:#fff;padding:12px;border-bottom:1px solid var(--brume)}
.om .ph img{max-height:100%;max-width:100%;object-fit:contain}
.om .ph img.vide{opacity:.14;height:56px}
.om .tx{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.om .tx h3{font:700 20px/1.2 var(--titre);color:var(--marine);margin:0 0 8px;border:0;padding:0}
.om .tx p{font-size:15px;color:var(--texte);margin-bottom:10px}
.om .tx .om-plus{color:var(--gris);font-size:14px}
.om-stock{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.om .tx .om-stock{font-size:14px;margin-bottom:0}
.om-stock b{font:600 13px var(--titre);color:var(--vert);margin-right:4px}
.om-stock.dem b{color:var(--gris)}
.om-stock a{border:1.5px solid var(--bleu);color:var(--bleu);border-radius:50px;padding:2px 10px;font:600 13px var(--titre)}
.om-stock a:hover{background:var(--bleu);color:#fff}
/* ---------- fido et omnikey : fin ---------- */

/* comparatif et lien OMNIKEY */
.om-cmp{grid-template-columns:minmax(0,560px);margin:20px 0 8px}
table.cmpx.om{min-width:1180px}
table.cmpx.om td.b{text-align:center}
table.cmpx.om tbody th[scope=row]{min-width:150px}