:root{
 --ink0:#151d26;
 --ink:#ffffff;
 --ink2:#f4f6f8;
 --surface:#ffffff;
 --surface2:#eef1f5;
 --accent:#c2601f;
 --accent-2:#da6e36;
 --accent-d:#9a4718;
 --accent-rgb:194,96,31;
 --on-accent:#ffffff;
 --text:#18222c;
 --text-strong:#0f1720;
 --muted:#53616f;
 --muted2:#65727f;
 --border2:rgba(21,29,38,.13);
 --grid:rgba(21,29,38,.04);
 --shadow-rgb:21,29,38;
 --nav-bg:rgba(255,255,255,.93);
 --on-ink0:#eef2f6;
 --on-ink0-muted:#a3b0bd;
 --on-ink0-muted2:#7d8b99;
 --ink0-border:rgba(255,255,255,.10);
 --c-connect:#da6e36;
 --c-connect-rgb:218,110,54;
 --c-telecom:#0f4c81;
 --c-telecom-rgb:15,76,129;
 --c-location:#1f6f5c;
 --c-location-rgb:31,111,92;
 --c-dev:#1b45d6;
 --c-dev-rgb:27,69,214;
 --max:1180px;
 --r:14px;
 --sh:0 1px 2px rgba(var(--shadow-rgb),.05),0 8px 24px -12px rgba(var(--shadow-rgb),.16);
 --sh2:0 2px 4px rgba(var(--shadow-rgb),.06),0 18px 44px -18px rgba(var(--shadow-rgb),.24);
 --f:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
 --p:var(--accent);--p-rgb:var(--accent-rgb);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--f);font-size:17px;line-height:1.68;
 color:var(--text);background:var(--ink);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2;letter-spacing:-.018em;color:var(--text-strong);margin:0 0 .6em}
h1{font-size:clamp(2rem,1.15rem + 2.6vw,3.05rem);font-weight:800}
h2{font-size:clamp(1.45rem,1.05rem + 1.3vw,2.05rem);font-weight:750}
h3{font-size:1.11rem;font-weight:700}
p{margin:0 0 1.05em}
ul{padding-left:1.15em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.narrow{max-width:830px}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--on-accent);
 padding:.7rem 1.1rem;z-index:99;border-radius:0 0 8px 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
.ic{width:22px;height:22px;flex:none}
.ic-s{width:15px;height:15px;flex:none;vertical-align:-2px}
.ic-l{width:26px;height:26px;flex:none}

/* --- monogramme (masque teinte par la CSS, suit la palette) -------------- */
.mono{display:block;width:74px;height:36px;background:currentColor;
 -webkit-mask:url(/assets/monogramme-mk.png?v=4965090e14) center/contain no-repeat;
 mask:url(/assets/monogramme-mk.png?v=4965090e14) center/contain no-repeat}
.mono-f{width:92px;height:44px;margin-bottom:14px}

/* ------------------------------------------------------------- TOPBAR */
.topbar{background:var(--ink0);color:var(--on-ink0-muted);font-size:.79rem;
 border-bottom:1px solid var(--ink0-border)}
.tbin{display:flex;align-items:center;gap:18px;min-height:38px;flex-wrap:wrap}
.topbar a{color:var(--on-ink0-muted)}
.topbar a:hover{color:var(--on-ink0)}
.topbar .urg{color:var(--on-ink0);font-weight:600}
.sp{flex:1}

/* ---------------------------------------------------------------- NAV */
.nav{position:sticky;top:0;z-index:40;background:var(--nav-bg);
 backdrop-filter:saturate(1.5) blur(11px);border-bottom:1px solid var(--border2)}
.navin{display:flex;align-items:center;gap:26px;min-height:72px}
.brand{display:flex;align-items:center;gap:12px;color:var(--text-strong);flex:none}
.brand:hover{text-decoration:none}
.brand .mono{color:var(--accent);width:60px;height:29px}
.bt{display:flex;flex-direction:column;line-height:1.15}
.bt b{font-size:1.02rem;font-weight:800;letter-spacing:-.02em}
.bt i{font-style:normal;font-size:.72rem;color:var(--muted);letter-spacing:.02em}
.links{display:flex;gap:2px;flex:1;flex-wrap:wrap}
.links a{color:var(--text);font-size:.88rem;font-weight:600;padding:.45rem .62rem;
 border-radius:8px;transition:background .18s,color .18s}
.links a:hover{background:var(--surface2);text-decoration:none}
.links a.on{color:var(--accent);background:rgba(var(--accent-rgb),.09)}
.nav-cta{flex:none}
.polebar{background:var(--ink0);border-top:1px solid var(--ink0-border)}
.pbin{display:flex;gap:0;overflow-x:auto;scrollbar-width:none}
.pbin::-webkit-scrollbar{display:none}
.np{display:flex;align-items:center;gap:8px;padding:.62rem 1.05rem;color:var(--on-ink0-muted);
 font-size:.83rem;font-weight:600;white-space:nowrap;border-bottom:2px solid transparent;
 transition:color .18s,border-color .18s,background .18s}
.np svg{color:var(--p)}
.np:hover{color:var(--on-ink0);border-bottom-color:var(--p);
 background:rgba(var(--p-rgb),.13);text-decoration:none}

/* -------------------------------------------------------------- BOUTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
 padding:.72rem 1.25rem;border-radius:10px;font-weight:700;font-size:.93rem;
 border:1px solid transparent;transition:transform .16s,box-shadow .16s,background .16s}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-a{background:var(--accent);color:var(--on-accent);box-shadow:0 6px 18px -8px rgba(var(--accent-rgb),.75)}
.btn-a:hover{background:var(--accent-d)}
.btn-g{background:transparent;color:var(--text-strong);border-color:var(--border2)}
.btn-g:hover{border-color:var(--accent);color:var(--accent)}
.btn-p{background:var(--p);color:#fff;box-shadow:0 6px 18px -8px rgba(var(--p-rgb),.75)}
.btn-p:hover{filter:brightness(.92)}

/* ---------------------------------------------------------- FIL D'ARIANE */
.bc{background:var(--ink0);color:var(--on-ink0-muted2);font-size:.78rem;
 border-bottom:1px solid var(--ink0-border)}
.bc ol{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin:0;padding:.55rem 0}
.bc li+li::before{content:"›";margin-right:.45rem;opacity:.5}
.bc a{color:var(--on-ink0-muted2)}
.bc a:hover{color:var(--on-ink0)}

/* ---------------------------------------------------------------- HERO */
.hero{position:relative;background:var(--ink0);color:var(--on-ink0);overflow:hidden;
 padding:76px 0 84px}
.hero::before{content:"";position:absolute;inset:0;
 background:radial-gradient(680px 420px at 82% -8%,rgba(var(--accent-rgb),.30),transparent 62%),
 radial-gradient(520px 380px at 8% 108%,rgba(var(--c-telecom-rgb),.22),transparent 65%);
 pointer-events:none}
.hero::after{content:"";position:absolute;inset:-40%;pointer-events:none;opacity:.5;
 background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
 linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
 background-size:56px 56px}
.hero .wrap{position:relative;z-index:1}
.hero h1{color:#fff;max-width:16ch}
.hero .lede{font-size:1.14rem;color:var(--on-ink0-muted);max-width:60ch;margin-bottom:1.7rem}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.74rem;font-weight:750;
 letter-spacing:.13em;text-transform:uppercase;color:var(--accent-2);
 border:1px solid rgba(var(--accent-rgb),.42);background:rgba(var(--accent-rgb),.12);
 padding:.32rem .8rem;border-radius:100px;margin-bottom:1.3rem}
.hero .btns{display:flex;gap:12px;flex-wrap:wrap}
.hero .btn-g{color:#fff;border-color:rgba(255,255,255,.28)}
.hero .btn-g:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.07)}
.heronote{margin-top:1.5rem;font-size:.83rem;color:var(--on-ink0-muted2)}
.heronote b{color:var(--on-ink0-muted)}

/* -------------------------------------------------------- HERO / 4 POLES */
.hpoles{position:relative;z-index:1;display:grid;gap:12px;margin-top:46px;
 grid-template-columns:repeat(4,1fr)}
.hp{display:block;padding:16px 16px 18px;border-radius:12px;color:var(--on-ink0);
 background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);
 border-top:3px solid var(--p);transition:transform .2s,background .2s}
.hp:hover{text-decoration:none;background:rgba(var(--p-rgb),.17);transform:translateY(-3px)}
.hp svg{color:var(--p);margin-bottom:8px}
.hp b{display:block;font-size:.98rem;font-weight:750}
.hp span{display:block;font-size:.8rem;color:var(--on-ink0-muted2);line-height:1.45;margin-top:3px}

/* ------------------------------------------------------------ SECTIONS */
.sec{padding:66px 0}
.sec-alt{background:var(--ink2);border-block:1px solid var(--border2)}
.sec-dark{background:var(--ink0);color:var(--on-ink0)}
.sec-dark h2,.sec-dark h3{color:#fff}
.sec-dark p{color:var(--on-ink0-muted)}
.kicker{font-size:.74rem;font-weight:750;letter-spacing:.13em;text-transform:uppercase;
 color:var(--accent);margin:0 0 .55rem}
.sec-dark .kicker{color:var(--accent-2)}
.h2{margin-bottom:.35em}
.lead{font-size:1.06rem;color:var(--muted);max-width:68ch;margin-bottom:2rem}
.sec-dark .lead{color:var(--on-ink0-muted)}
.center{text-align:center}
.center .lead{margin-inline:auto}

/* --------------------------------------------------------------- CARTES */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--surface);border:1px solid var(--border2);border-radius:var(--r);
 padding:24px;box-shadow:var(--sh);transition:transform .2s,box-shadow .2s,border-color .2s}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh2);border-color:rgba(var(--p-rgb),.4)}
.card h3{margin-bottom:.4em}
.card p{color:var(--muted);font-size:.94rem;margin-bottom:0}
.card .ic,.card .ic-l{color:var(--p);margin-bottom:12px}

/* --- carte "pole" (page metiers + accueil) --- */
.pcard{display:flex;flex-direction:column;background:var(--surface);border-radius:var(--r);
 border:1px solid var(--border2);border-top:4px solid var(--p);padding:26px;
 box-shadow:var(--sh);transition:transform .2s,box-shadow .2s}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--sh2)}
.ptop{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.ptop svg{color:var(--p)}
.pcard h3{font-size:1.25rem;margin:0}
.pmet{font-size:.79rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
 color:var(--p);margin:0 0 .8em}
.pcard p{color:var(--muted);font-size:.95rem}
.pl{list-style:none;padding:0;margin:0 0 1.2em;font-size:.9rem}
.pl li{position:relative;padding-left:1.35em;margin-bottom:.3em;color:var(--text)}
.pl li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
 border-radius:50%;background:var(--p)}
.pfoot{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.plink{font-size:.85rem;color:var(--muted2)}

/* ------------------------------------------------------------- CHIFFRES */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat{text-align:center}
.stat .v{font-size:2.5rem;font-weight:800;color:var(--accent);line-height:1;
 letter-spacing:-.03em;display:block}
.sec-dark .stat .v{color:var(--accent-2)}
.stat .l{font-size:.87rem;color:var(--muted);margin-top:.5rem;display:block}
.sec-dark .stat .l{color:var(--on-ink0-muted)}
.viz{height:44px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:10px}
@property --deg{syntax:'<angle>';inherits:false;initial-value:0deg}
.jauge{width:40px;height:40px;border-radius:50%;
 background:conic-gradient(var(--accent) var(--deg),rgba(var(--accent-rgb),.16) 0);
 -webkit-mask:radial-gradient(circle,transparent 12px,#000 13px);
 mask:radial-gradient(circle,transparent 12px,#000 13px)}
.points{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;width:104px}
.points i{width:7px;height:7px;border-radius:50%;background:rgba(var(--accent-rgb),.75);display:block}
.barres{display:flex;gap:6px;align-items:flex-end;height:40px}
.barres i{width:11px;border-radius:3px 3px 0 0;background:var(--bc,var(--accent));display:block}
.jour{width:104px;height:11px;border-radius:99px;background:rgba(var(--accent-rgb),.16);
 overflow:hidden;align-self:center}
.jour i{display:block;height:100%;background:var(--accent);border-radius:99px}

/* ------------------------------------------------------- COMBINAISONS */
.combo{background:var(--surface);border:1px solid var(--border2);border-radius:var(--r);
 padding:26px;box-shadow:var(--sh)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.chip{font-size:.72rem;font-weight:700;padding:.2rem .6rem;border-radius:99px;
 color:#fff;letter-spacing:.01em}
.combo p{color:var(--muted);font-size:.95rem}
.combo .ex{font-size:.87rem;color:var(--text);border-left:3px solid var(--border2);
 padding-left:14px;margin:14px 0 0}
.combo .ex b{color:var(--text-strong)}

/* ---------------------------------------------------------- REFERENCES */
.ref{background:var(--surface);border:1px solid var(--border2);border-radius:var(--r);
 padding:24px;box-shadow:var(--sh);display:flex;flex-direction:column}
.ref h3{font-size:1.02rem}
.ref dl{margin:0;font-size:.92rem}
.ref dt{font-size:.71rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase;
 color:var(--muted2);margin-top:.9em}
.ref dd{margin:.15em 0 0;color:var(--muted)}
.ref dd.res{color:var(--text-strong);font-weight:600}

/* ---------------------------------------------------------------- FAQ */
.faq details{border:1px solid var(--border2);border-radius:11px;background:var(--surface);
 margin-bottom:10px;overflow:hidden}
.faq summary{cursor:pointer;padding:16px 46px 16px 18px;font-weight:650;position:relative;
 list-style:none;font-size:.99rem;color:var(--text-strong)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:19px;top:50%;width:9px;height:9px;
 margin-top:-6px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
 transform:rotate(45deg);transition:transform .22s}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq .ans{padding:0 18px 4px}
.faq .ans p{color:var(--muted);font-size:.95rem}

/* ---------------------------------------------------------------- CTA */
.cta{background:var(--ink0);color:var(--on-ink0);border-block:1px solid var(--ink0-border)}
.ctain{display:flex;align-items:center;gap:32px;justify-content:space-between;
 padding:46px 22px;flex-wrap:wrap}
.cta h2{color:#fff;margin-bottom:.3em}
.cta p{color:var(--on-ink0-muted);max-width:56ch;margin:0;font-size:.97rem}
.ctab{display:flex;gap:12px;flex-wrap:wrap}
.cta .btn-g{color:#fff;border-color:rgba(255,255,255,.28)}
.cta .btn-g:hover{border-color:#fff;background:rgba(255,255,255,.07);color:#fff}

/* --------------------------------------------------------- ARTICLE / PROSE */
.prose{max-width:760px}
.prose h2{margin-top:2.1em;font-size:1.5rem}
.prose h2:first-child{margin-top:0}
.prose ul{margin:0 0 1.15em}
.prose li{margin-bottom:.45em}
.chapo{font-size:1.14rem;color:var(--muted);border-left:3px solid var(--accent);
 padding-left:18px;margin-bottom:2rem}
.concl{background:var(--ink2);border:1px solid var(--border2);border-left:4px solid var(--accent);
 border-radius:0 var(--r) var(--r) 0;padding:20px 24px;margin-top:2.4rem}
.concl p{margin:0;font-size:.97rem}
.meta{font-size:.82rem;color:var(--muted2);margin-bottom:1.4rem}

/* ------------------------------------------------------------- TABLEAUX */
.tw{overflow-x:auto;border:1px solid var(--border2);border-radius:var(--r);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.93rem;min-width:460px}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--border2)}
th{font-size:.73rem;font-weight:750;letter-spacing:.09em;text-transform:uppercase;
 color:var(--muted2);background:var(--ink2)}
tr:last-child td{border-bottom:none}
td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
caption{caption-side:bottom;font-size:.82rem;color:var(--muted2);padding:12px 16px;text-align:left}

/* ---------------------------------------------------------------- LISTES */
.checks{list-style:none;padding:0;margin:0}
.checks li{position:relative;padding-left:2rem;margin-bottom:.75em}
.checks li svg{position:absolute;left:0;top:.22em;color:var(--accent)}
.cols2{columns:2;column-gap:34px}
.cols2 li{break-inside:avoid}

/* ------------------------------------------------------- CARTE DE FRANCE */
.carte{margin:0;padding:0}
.carte svg{display:block;width:100%;max-width:660px;margin:0 auto;height:auto}
.dep{fill:var(--surface2);stroke:var(--ink);stroke-width:1.1;stroke-linejoin:round;
 transition:fill .18s}
.dep.c1{fill:rgba(var(--accent-rgb),.28)}
.dep.c2{fill:rgba(var(--accent-rgb),.55)}
.dep.c3{fill:var(--accent)}
.dep:hover,.dep:focus{fill:var(--text-strong);outline:none}
.pastille{stroke:var(--ink);stroke-width:2;transition:fill .18s}
.pastille.c1{fill:rgba(var(--accent-rgb),.55)}
.pastille.c2{fill:rgba(var(--accent-rgb),.75)}
.pastille.c3{fill:var(--accent)}
.pastille:hover,.pastille:focus{fill:var(--text-strong);outline:none}
.site{fill:var(--ink);stroke:#fff;stroke-width:2.5}
.legende{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;
 padding:0;margin:20px 0 0;font-size:.83rem;color:var(--muted)}
.legende li{display:flex;align-items:center;gap:7px}
.legende .sw{width:15px;height:15px;border-radius:4px;background:var(--surface2);
 border:1px solid var(--border2);display:block}
.legende .sw.c1{background:rgba(var(--accent-rgb),.28)}
.legende .sw.c2{background:rgba(var(--accent-rgb),.55)}
.legende .sw.c3{background:var(--accent)}
.legende .sw-site span{width:11px;height:11px;border-radius:50%;background:var(--ink0);
 display:block;box-shadow:0 0 0 2px var(--ink),0 0 0 3px var(--border2)}
.carte figcaption{text-align:center;font-size:.87rem;color:var(--muted);margin-top:16px;
 max-width:60ch;margin-inline:auto}
/* Le meme contenu en texte : lu par les moteurs et les lecteurs d'ecran,
   masque visuellement puisque la carte le montre deja. */
.carte-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
 clip-path:inset(50%);white-space:nowrap}

/* ---------------------------------------------------------------- VILLES */
.villes{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}
.vl{display:flex;align-items:center;gap:9px;padding:13px 15px;border-radius:11px;
 background:var(--surface);border:1px solid var(--border2);color:var(--text-strong);
 font-weight:650;font-size:.93rem;transition:transform .18s,border-color .18s,color .18s}
.vl svg{color:var(--accent)}
.vl:hover{text-decoration:none;transform:translateX(3px);border-color:var(--accent);color:var(--accent)}
.vl i{font-style:normal;font-size:.76rem;color:var(--muted2);font-weight:500;margin-left:auto}

/* -------------------------------------------------------------- POSTES */
.poste{background:var(--surface);border:1px solid var(--border2);border-radius:var(--r);
 padding:26px;box-shadow:var(--sh);margin-bottom:16px}
.poste h3{margin-bottom:.25em}
.ptags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.ptag{font-size:.76rem;font-weight:650;padding:.22rem .65rem;border-radius:99px;
 background:var(--surface2);color:var(--muted);border:1px solid var(--border2)}
.poste dt{font-size:.71rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase;
 color:var(--muted2);margin-top:.9em}
.poste dd{margin:.2em 0 0;color:var(--muted);font-size:.94rem}

/* ------------------------------------------------------------- CONTACT */
.cbox{background:var(--surface);border:1px solid var(--border2);border-radius:var(--r);
 padding:26px;box-shadow:var(--sh)}
.cbox h3{margin-bottom:.5em}
.cbox p{font-size:.94rem;color:var(--muted)}
.cbig{display:inline-flex;align-items:center;gap:10px;font-size:1.28rem;font-weight:800;
 color:var(--accent);letter-spacing:-.02em}
.cbig:hover{text-decoration:none;color:var(--accent-d)}

/* ---------------------------------------------------------------- FOOTER */
.foot{background:var(--ink0);color:var(--on-ink0-muted);padding:56px 0 26px;
 border-top:1px solid var(--ink0-border);font-size:.89rem}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:32px}
.foot h2{font-size:.75rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase;
 color:var(--on-ink0);margin:0 0 .9em}
.foot h2.mt{margin-top:1.7em}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:.42em}
.foot a{color:var(--on-ink0-muted)}
.foot a:hover{color:var(--on-ink0)}
.fbrand .mono{color:var(--accent-2)}
.fbl{color:var(--on-ink0);margin-bottom:1em}
.fadr{font-size:.85rem;line-height:1.7;margin-bottom:.9em}
.fadr2{color:var(--on-ink0-muted2)}
.fdot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-left:6px;
 vertical-align:1px}
.fsoc{display:flex;gap:14px;font-size:.83rem}
.fbot{border-top:1px solid var(--ink0-border);margin-top:40px;padding-top:20px;
 display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
 font-size:.79rem;color:var(--on-ink0-muted2)}
.fbot p{margin:0}
.flinks{display:flex;gap:18px}

/* ---------------------------------------------------------------- 404 */
.e404{text-align:center;padding:96px 0}
.e404 .code{font-size:5rem;font-weight:800;color:var(--accent);line-height:1;letter-spacing:-.04em}

/* ------------------------------------------------------------ RESPONSIVE */
@media (max-width:1000px){
 .g4,.stats,.hpoles,.villes{grid-template-columns:repeat(2,1fr)}
 .g3{grid-template-columns:repeat(2,1fr)}
 .fgrid{grid-template-columns:repeat(3,1fr)}
 .fbrand{grid-column:1/-1}
 .links{display:none}
}
@media (max-width:720px){
 body{font-size:16px}
 .sec{padding:48px 0}
 .hero{padding:54px 0 60px}
 .g2,.g3,.g4,.stats,.hpoles,.villes{grid-template-columns:1fr}
 .fgrid{grid-template-columns:repeat(2,1fr)}
 .cols2{columns:1}
 .hide-s{display:none}
 .ctain{padding:36px 22px}
 .nav-cta{margin-left:auto}
 .navin{min-height:62px}
}
@media (max-width:460px){
 .fgrid{grid-template-columns:1fr}
 .topbar .urg{font-size:.76rem}
}
@media print{
 .nav,.topbar,.polebar,.cta,.foot,.bc{display:none}
 body{font-size:12pt;color:#000;background:#fff}
}

/* ============================================================ ANIMATIONS
   Regle a ne pas casser : l'etat de repos est TOUJOURS l'etat visible.
   Tout ce qui part d'une opacite nulle vit sous prefers-reduced-motion et
   sous @supports : un navigateur ancien affiche la page normalement.
   Le <h1> du hero est l'element LCP : il bouge, il ne fond pas. */
@media (prefers-reduced-motion:no-preference){
 @keyframes pose{from{transform:translateY(14px)}to{transform:none}}
 @keyframes fadeup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
 @keyframes drift{to{transform:translate3d(56px,56px,0)}}
 .hero h1{animation:pose .55s cubic-bezier(.22,.68,.35,1) both}
 .hero .eyebrow{animation:fadeup .5s .05s both}
 .hero .lede{animation:fadeup .55s .12s both}
 .hero .btns{animation:fadeup .55s .2s both}
 .hero .heronote{animation:fadeup .55s .28s both}
 .hero::after{animation:drift 26s linear infinite}
 .hpoles .hp{animation:fadeup .5s calc(.3s + var(--i,0)*.07s) both}
 @supports (animation-timeline:view()){
  .sec .card,.sec .pcard,.sec .combo,.sec .ref,.sec .poste,.sec .vl,.sec .stat{
   animation:fadeup .6s both;animation-timeline:view();
   animation-range:entry 0% cover 22%}
 }
}