/* Surfeur Fibre · feuille de styles commune à toutes les pages
   Layout : en-tête et bandeaux marine (la mer où courent les fibres), contenu sur fond clair
   en colonnes larges, données techniques en police mono. Palette tirée du logo. */
:root{
  --bg:#f3f6f9;
  --surface:#ffffff;
  --ink:#0b1d3a;
  --muted:#4b5b70;
  --rule:#d6dfe9;
  --wash:#e7eef6;
  --ocean:#0b4fa8;
  --glow:#08899c;
  --sun:#f28c28;
  --sun-ink:#0b1d3a;
  --ok:#17784a;
  --tree:#4c8a58;
  --road:#cfd8e2;
  --sand:#eadfc4;
  /* bandeaux marine : mêmes valeurs dans les deux thèmes */
  --band:#0a1a33;
  --band-2:#13294d;
  --band-ink:#eaf1fa;
  --band-muted:#a8bcd3;
  --band-rule:#23395c;
  --band-glow:#41d7eb;
  --plaque:#f6f7f1;
  --f-display:"Archivo","Arial Black",system-ui,sans-serif;
  --f-body:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --s-1:.8125rem;
  --s0:1rem;
  --s1:1.1875rem;
  --s2:1.5rem;
  --s3:clamp(1.7rem,3.3vw,2.4rem);
  --s4:clamp(2.3rem,5.6vw,4.2rem);
  --r:10px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#07111f;--surface:#0d1b2f;--ink:#e2ebf5;--muted:#9caec4;--rule:#1d3150;--wash:#112640;
    --ocean:#7fb3ff;--glow:#41d7eb;--sun:#ff9d4d;--sun-ink:#0b1426;--ok:#62d29b;
    --tree:#5fa96d;--road:#2a3f5c;--sand:#4d4430;
    --band:#091729;--band-2:#132a4c;--band-rule:#213a60;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#07111f;--surface:#0d1b2f;--ink:#e2ebf5;--muted:#9caec4;--rule:#1d3150;--wash:#112640;
  --ocean:#7fb3ff;--glow:#41d7eb;--sun:#ff9d4d;--sun-ink:#0b1426;--ok:#62d29b;
  --tree:#5fa96d;--road:#2a3f5c;--sand:#4d4430;
  --band:#091729;--band-2:#132a4c;--band-rule:#213a60;
  color-scheme:dark;
}

/* ---------- base ---------- */
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--s0)/1.6 var(--f-body);text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
a{color:var(--ocean);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--glow);outline-offset:3px;border-radius:4px}
.band :focus-visible{outline-color:var(--band-glow)}
h1,h2,h3,h4{margin:0;text-wrap:balance}
p,ul,ol,dl,figure{margin:0}
table{font-size:inherit}
h1,h2{font-family:var(--f-display);font-weight:800;font-style:italic;font-stretch:116%;letter-spacing:-.012em}
h1{font-size:var(--s4);line-height:1.02}
h2{font-size:var(--s3);line-height:1.08}
h3{font:650 var(--s1)/1.3 var(--f-body)}
.wrap{max-width:1160px;margin-inline:auto;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
.eyebrow{font:500 .75rem/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--glow)}
.lead{font-size:var(--s1);line-height:1.55;color:var(--muted);max-width:62ch}
.muted{color:var(--muted)}
.small{font-size:var(--s-1)}
.mono{font-family:var(--f-mono)}
.prose{max-width:66ch;display:grid;gap:14px}
ul.list{padding-left:1.1em;display:grid;gap:8px}
ul.list li::marker{color:var(--glow)}

/* ---------- bandeaux marine ---------- */
.band{background:var(--band);color:var(--band-ink)}
.band .eyebrow{color:var(--band-glow)}
.band .lead{color:var(--band-muted)}
.band a:not(.btn){color:var(--band-ink)}

/* ---------- en-tête ---------- */
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:calc(8px + env(safe-area-inset-top,0px));z-index:100;background:var(--sun);color:var(--sun-ink);padding:8px 12px;border-radius:6px}
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--band);color:var(--band-ink);border-bottom:1px solid var(--band-rule)}
.bar{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;min-height:66px;position:relative}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--band-ink);text-decoration:none;flex:none}
.band a.brand{color:var(--band-ink);text-decoration:none}
.brand-mark{width:36px;height:36px;flex:none}
.brand-name{font-family:var(--f-display);font-weight:800;font-style:italic;font-stretch:125%;font-size:1.05rem;letter-spacing:.01em;text-transform:uppercase;line-height:1;white-space:nowrap}
.brand-name span{color:var(--band-glow)}
.site-nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.site-nav a{color:var(--band-muted);text-decoration:none;font-weight:500;font-size:.9375rem;padding:9px 10px;border-radius:6px;white-space:nowrap}
.band .site-nav a{color:var(--band-muted)}
.band .site-nav a:hover{color:var(--band-ink);background:var(--band-2)}
.band .site-nav a[aria-current="page"]{color:var(--band-ink);box-shadow:inset 0 -2px 0 var(--band-glow);border-radius:0}
.band .site-nav a.nav-cta{background:var(--sun);color:var(--sun-ink);font-weight:650;margin-left:10px;border-radius:7px;padding:10px 15px;box-shadow:none}
.band .site-nav a.nav-cta:hover{filter:brightness(1.07);background:var(--sun)}
.nav-toggle{display:none;align-items:center;gap:10px;margin-left:auto;font:600 .9375rem/1 var(--f-body);color:var(--band-ink);background:var(--band-2);border:1px solid var(--band-rule);border-radius:8px;padding:10px 14px;cursor:pointer}
.nav-toggle-bars{width:16px;height:10px;border-top:2px solid currentColor;border-bottom:2px solid currentColor;position:relative}
.nav-toggle-bars::after{content:"";position:absolute;left:0;right:0;top:2px;border-top:2px solid currentColor}
@media (max-width:1060px){
  .nav-toggle{display:inline-flex}
  .site-nav{flex-basis:100%;flex-direction:column;align-items:stretch;gap:2px;margin:0;padding-bottom:14px}
  .js .site-nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--band);border-bottom:1px solid var(--band-rule);padding:8px max(16px, env(safe-area-inset-right, 0px)) 18px max(16px, env(safe-area-inset-left, 0px))}
  .js .site-nav[data-open]{display:flex}
  .site-nav a{padding:12px 10px;font-size:1rem}
  .band .site-nav a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--band-glow)}
  .band .site-nav a.nav-cta{margin:10px 0 0;text-align:center}
}

/* ---------- boutons ---------- */
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:650 .975rem/1.1 var(--f-body);padding:13px 18px;border-radius:8px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;background:none;color:inherit}
a.btn:hover{text-decoration:none}
.btn-sun,.band a.btn-sun{background:var(--sun);color:var(--sun-ink)}
.btn-sun:hover{filter:brightness(1.07)}
.btn-line,.band a.btn-line{border-color:var(--band-muted);color:var(--band-ink)}
.btn-line:hover{border-color:var(--band-ink)}
.btn-ink{background:var(--ink);color:var(--bg)}
.btn-ink:hover{filter:brightness(1.15)}
.btn-quiet{border-color:var(--rule);color:var(--ink)}
.btn-quiet:hover{border-color:var(--ink)}
.btn-small{padding:9px 13px;font-size:.875rem}

/* ---------- héros ---------- */
.hero{position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:16px 32px;padding-block:clamp(44px,7vw,92px) clamp(36px,6vw,72px)}
.hero-copy{display:grid;gap:22px;justify-items:start}
.hero h1{font-size:clamp(2.5rem,6.2vw,4.6rem);max-width:12ch}
.hero-art{position:relative;aspect-ratio:5/4;width:100%;max-width:100%}
.hero-art canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-specs{font:500 .8125rem/1.5 var(--f-mono);color:var(--band-muted);display:flex;flex-wrap:wrap;gap:4px 20px}
.hero-specs span{white-space:nowrap}
@media (max-width:820px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .hero-art{aspect-ratio:16/9;order:-1;margin-bottom:-8px}
}

.page-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--band-rule)}
.page-hero canvas{position:absolute;top:0;right:0;width:min(50%,660px);height:100%;display:block;-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);mask-image:linear-gradient(90deg,transparent,#000 40%)}
.page-hero .wrap{position:relative;z-index:1;padding-block:clamp(40px,6vw,76px)}
.page-hero-copy{display:grid;gap:16px;max-width:min(620px,54%)}
.page-hero h1{font-size:clamp(2.1rem,5vw,3.5rem)}
@media (max-width:760px){
  .page-hero canvas{width:100%;opacity:.3}
  .page-hero-copy{max-width:none}
}

/* ---------- sections ---------- */
.section{padding-block:clamp(52px,7vw,96px)}
.section + .section{border-top:1px solid var(--rule)}
.section.tint{background:var(--wash);border-top:0}
.section.tint + .section{border-top:0}
.section-head{display:grid;gap:12px;margin-bottom:clamp(28px,4vw,44px);max-width:760px;justify-items:start}
.section-head p:not(.eyebrow){color:var(--muted);font-size:var(--s1);line-height:1.55}
.section-head .btn-row{margin-top:8px}
.cols-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4.5vw,64px)}
.cols-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,40px)}
.cols-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.cols-2>*,.cols-3>*,.cols-4>*{min-width:0}
@media (max-width:1000px){.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.cols-3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:840px){.cols-2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.cols-4{grid-template-columns:minmax(0,1fr)}}

.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:clamp(18px,2.4vw,26px);display:grid;gap:12px;align-content:start}
.tag{font:500 .72rem/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tags{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.tags li{font:500 .75rem/1 var(--f-mono);padding:6px 8px;border-radius:5px;background:var(--wash);color:var(--ink)}
.hyp{font:500 .68rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ocean);border:1px solid currentColor;border-radius:4px;padding:3px 5px;white-space:nowrap;vertical-align:2px}

/* ---------- fiche d'identité ---------- */
.ident-copy{display:grid;gap:28px;align-content:start}
.ident-copy .section-head{margin-bottom:0}
.plaque{background:var(--plaque);border-radius:var(--r);padding:clamp(10px,2vw,22px);border:1px solid var(--rule)}
.plaque img{width:100%;margin-inline:auto}
.fiche{display:grid;grid-template-columns:minmax(0,10.5rem) minmax(0,1fr);border-top:1px solid var(--rule);align-self:start}
.fiche dt,.fiche dd{margin:0;padding:15px 0;border-bottom:1px solid var(--rule)}
.fiche dt{font:500 .72rem/1.5 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:18px;padding-right:12px}
@media (max-width:560px){.fiche{grid-template-columns:minmax(0,1fr)}.fiche dt{border-bottom:0;padding-bottom:0}}

/* ---------- chaîne NRO → PTO ---------- */
.chain{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;position:relative}
.chain::before,.chain::after{content:"";position:absolute;left:22px;right:calc((100% - 96px) / 4 - 22px);top:21px;height:3px;border-radius:2px}
.chain::before{background:linear-gradient(90deg,var(--ocean),var(--glow))}
.chain::after{background:linear-gradient(90deg,transparent,var(--band-glow),transparent) no-repeat;background-size:160px 100%;animation:pulse 3.6s linear infinite;opacity:.95}
@keyframes pulse{from{background-position:-160px 0}to{background-position:calc(100% + 160px) 0}}
.chain li{position:relative;display:grid;gap:8px;align-content:start;min-width:0}
.chain-code{width:45px;height:45px;border-radius:50%;display:grid;place-items:center;background:var(--band);color:var(--band-glow);font:600 .75rem/1 var(--f-mono);letter-spacing:.04em;position:relative;z-index:1;box-shadow:0 0 0 5px var(--bg);margin-bottom:8px}
.chain-cable{position:absolute;top:13px;left:calc(22px - (100% + 32px) / 2);transform:translateX(-50%);font:500 .66rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--bg);padding:3px 7px;white-space:nowrap;z-index:2}
.chain-where{font:500 .8125rem/1.4 var(--f-mono);color:var(--glow)}
.chain p:last-child{color:var(--muted)}
@media (max-width:900px){
  .chain{grid-template-columns:minmax(0,1fr);gap:28px}
  .chain::before{left:21px;right:auto;width:3px;height:auto;top:22px;bottom:40px;background:linear-gradient(180deg,var(--ocean),var(--glow))}
  .chain::after{display:none}
  .chain li{padding-left:64px}
  .chain-code{position:absolute;left:0;top:0;margin:0}
  .chain-cable{position:static;transform:none;justify-self:start;padding:0;background:none}
  .chain-cable::before{content:"via câble de "}
}

/* ---------- règles / chiffres ---------- */
.rules article{display:grid;gap:10px;align-content:start;padding-top:18px;border-top:2px solid var(--ink)}
.rules p:last-child{color:var(--muted)}
.figures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;align-self:start}
.figures>div{background:var(--surface);padding:22px 22px 20px;display:grid;gap:4px;align-content:start}
.figures dt{font:500 .72rem/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.figures dd{margin:0}
.figures .fig{font-family:var(--f-display);font-weight:800;font-style:italic;font-stretch:112%;font-size:clamp(2rem,4vw,2.8rem);line-height:1.05;font-variant-numeric:tabular-nums}
.figures .unit{font:500 .8125rem/1.3 var(--f-mono);color:var(--muted)}
.figures.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.figures.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.figures,.figures.four{grid-template-columns:minmax(0,1fr)}}

/* ---------- appel à l'action ---------- */
.cta .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:center;padding-block:clamp(44px,6vw,72px)}
.cta .wrap>div:first-child{display:grid;gap:12px}
@media (max-width:760px){.cta .wrap{grid-template-columns:minmax(0,1fr)}}

/* ---------- services ---------- */
.subnav{display:flex;flex-wrap:wrap;gap:8px}
.subnav a{font:500 .875rem/1 var(--f-body);text-decoration:none;color:var(--ink);border:1px solid var(--rule);border-radius:999px;padding:9px 14px;background:var(--surface)}
.subnav a:hover{border-color:var(--glow)}
.service-side{display:grid;gap:22px;align-content:start}
.spec-title{font:500 .72rem/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.spec{display:grid;grid-template-columns:minmax(0,1fr) auto;font:400 .875rem/1.45 var(--f-mono);border-top:1px solid var(--rule)}
.spec dt,.spec dd{margin:0;padding:10px 0;border-bottom:1px solid var(--rule)}
.spec dt{color:var(--muted);padding-right:16px}
.spec dd{text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.who{font-size:.9375rem;color:var(--muted)}
.who b{color:var(--ink);font-weight:600}

/* ---------- tableaux ---------- */
.table-scroll{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface);max-width:100%}
table.data{width:100%;border-collapse:collapse;font-size:.9375rem}
table.data th,table.data td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top}
table.data thead th{font:500 .7rem/1.35 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--wash);vertical-align:bottom}
table.data tbody th{font-weight:600}
table.data .num{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
table.data tr.group th{font:500 .72rem/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--glow);background:var(--surface);padding-top:18px}
table.data tfoot td,table.data tfoot th{font-weight:700;border-top:2px solid var(--ink);border-bottom:0}
table.data td small,table.data th small{display:block;font-weight:400;color:var(--muted);font-size:.8125rem}
.w-560{min-width:560px}.w-680{min-width:680px}.w-860{min-width:860px}
.verdict{margin-top:14px;font-size:.9375rem;color:var(--muted)}
.verdict b{color:var(--ok)}

/* ---------- étapes ---------- */
.steps{list-style:none;padding:0;counter-reset:step;display:grid}
.steps>li{counter-increment:step;display:grid;grid-template-columns:56px minmax(0,1fr);gap:4px 16px;padding:20px 0;border-top:1px solid var(--rule)}
.steps>li:last-child{border-bottom:1px solid var(--rule)}
.steps>li::before{content:counter(step,decimal-leading-zero);grid-row:span 3;font:600 .9rem/1.6 var(--f-mono);color:var(--glow)}
.steps>li>*{grid-column:2}
.steps p{color:var(--muted)}
.steps.cols{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
@media (max-width:840px){.steps.cols{grid-template-columns:minmax(0,1fr)}}

/* ---------- réalisations ---------- */
.plan-fig{display:grid;gap:14px;align-content:start}
.plan-box{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:8px;overflow-x:auto}
.plan{display:block;width:100%;height:auto;min-width:300px}
.plan .road{fill:var(--road)}
.plan .sand{fill:var(--sand)}
.plan .tree{fill:var(--tree)}
.plan .hill{fill:var(--wash);stroke:var(--rule);stroke-width:1.5}
.plan .bld{fill:var(--ink)}
.plan .local{fill:var(--glow)}
.plan .house{fill:none;stroke:var(--muted);stroke-width:1.5}
.plan .future{fill:none;stroke:var(--ocean);stroke-width:1.6;stroke-dasharray:5 4}
.plan .duct{fill:none;stroke:var(--muted);stroke-width:6;stroke-linecap:square}
.plan .trench{fill:none;stroke:var(--sun);stroke-width:8;stroke-linejoin:round;stroke-linecap:round;opacity:.85}
.plan .fibre{fill:none;stroke:var(--glow);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round}
.plan .ch{fill:var(--surface);stroke:var(--ink);stroke-width:1.8}
.plan .ch-new{fill:var(--surface);stroke:var(--sun);stroke-width:2.4}
.plan .pole{stroke:var(--ink);stroke-width:2.4;stroke-linecap:round}
.plan .arm{fill:var(--ocean)}
.plan .arrow{stroke:var(--ink);stroke-width:2.4;fill:none}
.plan .arrow-head{fill:var(--ink)}
.plan .scale{stroke:var(--ink);stroke-width:2;fill:none}
.plan text{font:500 21px var(--f-mono);fill:var(--muted);paint-order:stroke;stroke:var(--surface);stroke-width:6px;stroke-linejoin:round}
.plan .t-strong{fill:var(--ink);font-weight:600}
.plan .t-fut{fill:var(--ocean)}
.legend{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.8125rem;color:var(--muted)}
.legend li{display:flex;align-items:center;gap:7px}
.sw{width:22px;height:10px;border-radius:2px;flex:none;display:inline-block}
.sw-trench{background:var(--sun)}
.sw-fibre{background:var(--glow);height:3px}
.sw-duct{background:var(--muted);height:5px}
.sw-tree{background:var(--tree);width:9px;height:9px;border-radius:50%}
.sw-fut{border:1.6px dashed var(--ocean);height:12px}
.sw-ch{border:2px solid var(--ink);width:11px;height:11px;border-radius:1px}
.sw-chn{border:2px solid var(--sun);width:11px;height:11px;border-radius:1px}
.route{list-style:none;padding:0;counter-reset:route;display:grid;position:relative}
.route::before{content:"";position:absolute;left:13px;top:14px;bottom:14px;width:2px;background:linear-gradient(180deg,var(--ocean),var(--glow))}
.route li{counter-increment:route;position:relative;padding:0 0 16px 44px;display:grid;gap:2px}
.route li::before{content:counter(route);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--band);color:var(--band-glow);font:600 .75rem/1 var(--f-mono)}
.route b{font-weight:650}
.route span.d{color:var(--muted);font-size:.9375rem}
.project-side{display:grid;gap:18px;align-content:start}
.ref-card .meta{font:500 .75rem/1.4 var(--f-mono);color:var(--glow);letter-spacing:.06em}

/* ---------- équipe ---------- */
.org{display:grid;justify-items:center;gap:0}
.org-box{background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:10px 14px;display:grid;gap:2px;text-align:center;font-size:.9375rem;min-width:0}
.org-box b{font-weight:650}
.org-box small{font-size:.78rem;color:var(--muted)}
.org-box.lead-box{background:var(--band);color:var(--band-ink);border-color:var(--band)}
.org-box.lead-box small{color:var(--band-muted)}
.org-box.vacant{border-style:dashed;background:transparent}
.org-box.vacant b{color:var(--muted)}
.org-stem{width:2px;height:26px;background:var(--glow)}
.org-branches{list-style:none;padding:26px 0 0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;position:relative;width:100%}
.org-branches::before{content:"";position:absolute;top:0;height:2px;background:var(--glow);left:calc((100% - 48px) / 8);right:calc((100% - 48px) / 8)}
.org-branches>li{position:relative;display:grid;gap:10px;align-content:start;min-width:0}
.org-branches>li::before{content:"";position:absolute;top:-26px;left:50%;width:2px;height:26px;background:var(--glow)}
.org-head{font:500 .7rem/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center;padding:4px 0}
.org-branches ul{list-style:none;padding:0;display:grid;gap:8px}
@media (max-width:860px){
  .org-branches{grid-template-columns:minmax(0,1fr);padding:16px 0 0 22px;gap:22px}
  .org-branches::before{left:0;right:auto;top:0;bottom:22px;width:2px;height:auto}
  .org-branches>li::before{top:12px;left:-22px;width:22px;height:2px}
  .org-head{text-align:left}
  .org-box{text-align:left}
}
.member{position:relative}
.member-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.avatar{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--band);color:var(--band-ink);font:800 italic 1.05rem/1 var(--f-display);font-stretch:112%;box-shadow:0 0 0 6px var(--fibre),0 0 0 7px var(--rule);margin:7px}
.fibre-tag{font:500 .7rem/1.3 var(--f-mono);letter-spacing:.06em;color:var(--muted);text-align:right}
.role{font:500 .8125rem/1.4 var(--f-mono);color:var(--glow)}
.member p.desc{color:var(--muted);font-size:.9375rem}
.member .def{font-size:.8125rem;color:var(--muted);font-style:italic;border-top:1px dashed var(--rule);padding-top:10px}
.member.vacant{background:transparent;border-style:dashed}
.member.vacant .avatar{background:transparent;color:var(--muted);border:1.5px dashed var(--muted)}
.code-strip{list-style:none;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px}
.code-strip li{display:grid;gap:6px;justify-items:center;font:500 .68rem/1.2 var(--f-mono);color:var(--muted);text-align:center;min-width:0}
.code-strip i{display:block;width:100%;height:12px;border-radius:6px;background:var(--fibre);box-shadow:inset 0 0 0 1px var(--rule)}
@media (max-width:640px){.code-strip{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:14px}}

/* ---------- tarifs ---------- */
.notice{background:var(--wash);border-radius:var(--r);padding:clamp(18px,2.6vw,26px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 20px;align-items:start}
.notice .eyebrow{padding-top:4px}
.notice p:not(.eyebrow){max-width:70ch}
@media (max-width:640px){.notice{grid-template-columns:minmax(0,1fr)}}
.price-card .price{font-family:var(--f-display);font-weight:800;font-style:italic;font-stretch:112%;font-size:clamp(2rem,3.6vw,2.6rem);line-height:1;font-variant-numeric:tabular-nums;margin-top:4px}
.price-card .per{font:500 .8125rem/1.4 var(--f-mono);color:var(--muted)}
.price-card ul{padding-left:1.1em;display:grid;gap:6px;font-size:.9375rem}
.price-card ul li::marker{color:var(--glow)}
.price-card .foot{font-size:.8125rem;color:var(--muted);border-top:1px solid var(--rule);padding-top:12px;margin-top:4px}
.price-card.featured{border-color:var(--glow);box-shadow:0 0 0 1px var(--glow)}
.sim-days{width:5.2em;text-align:right;font-family:var(--f-mono);padding:7px 8px}
.sim-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:14px}
.sim-out{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;margin-top:16px}
.sim-out>div{background:var(--surface);padding:16px 18px;display:grid;gap:4px}
.sim-out dt{font:500 .7rem/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sim-out dd{margin:0;font:600 1.25rem/1.2 var(--f-mono);font-variant-numeric:tabular-nums}
.sim-out .total dd{color:var(--ocean)}
@media (max-width:760px){.sim-out{grid-template-columns:repeat(2,minmax(0,1fr))}}
.faq{display:grid;border-top:1px solid var(--rule);max-width:820px}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:18px 36px 18px 0;font-weight:650;font-size:var(--s1);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:14px;font:400 1.5rem/1 var(--f-mono);color:var(--glow)}
.faq details[open] summary::after{content:"−"}
.faq details>div{padding:0 0 20px;color:var(--muted);max-width:68ch;display:grid;gap:10px}

/* ---------- recrutement ---------- */
.job{gap:14px}
.job-head{display:grid;gap:6px}
.job .contract{font:500 .78rem/1.4 var(--f-mono);color:var(--glow)}
.job details{border-top:1px solid var(--rule);padding-top:10px}
.job summary{cursor:pointer;font-weight:600;font-size:.9375rem;color:var(--ocean)}
.job details>div{display:grid;gap:12px;padding-top:12px;font-size:.9375rem}
.job h4{font:500 .7rem/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.job .spec{font-size:.8125rem}
.job .btn{justify-self:start}

/* ---------- formulaires ---------- */
.form{display:grid;gap:18px}
.field{display:grid;gap:6px;min-width:0}
.field label,.field legend{font-weight:600;font-size:.9375rem}
.field .hint{font-size:.8125rem;color:var(--muted)}
.req{color:var(--glow)}
input,select,textarea{font:inherit;font-size:1rem;color:var(--ink);background:var(--surface);border:1.5px solid var(--rule);border-radius:8px;padding:11px 12px;width:100%;min-width:0}
textarea{min-height:130px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--glow);outline-offset:1px;border-color:var(--glow)}
input[type="file"]{padding:9px}
input[type="checkbox"]{width:18px;height:18px;margin:2px 0 0;accent-color:var(--glow);flex:none}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.875rem;color:var(--muted)}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:560px){.field-row{grid-template-columns:minmax(0,1fr)}}
.field-error{font-size:.8125rem;color:var(--sun)}
.form-done{border:1.5px solid var(--ok);background:var(--wash);border-radius:var(--r);padding:18px 20px;display:grid;gap:8px}
.form-done h3{color:var(--ok)}
.form-panel{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:clamp(18px,3vw,32px)}
.aside{display:grid;gap:26px;align-content:start}
.coord{display:grid;gap:4px}
.coord .k{font:500 .7rem/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.coord .v{font-size:1.0625rem;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.copy{font:500 .75rem/1 var(--f-mono);color:var(--ocean);background:none;border:1px solid var(--rule);border-radius:5px;padding:6px 8px;cursor:pointer}
.copy:hover{border-color:var(--ocean)}
address{font-style:normal}

/* ---------- carte de zone ---------- */
.zone{display:block;width:100%;height:auto}
.zone .seine{fill:none;stroke:var(--ocean);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;opacity:.35}
.zone .ring{fill:var(--glow);fill-opacity:.07;stroke:var(--glow);stroke-width:1.6;stroke-dasharray:6 5}
.zone .town{fill:var(--surface);stroke:var(--ink);stroke-width:1.6}
.zone .town-out{fill:var(--surface);stroke:var(--muted);stroke-width:1.4}
.zone .hq{fill:var(--sun);stroke:var(--ink);stroke-width:1.6}
.zone text{font:500 11.5px var(--f-mono);fill:var(--muted);paint-order:stroke;stroke:var(--surface);stroke-width:3.5px;stroke-linejoin:round}
.zone .t-strong{fill:var(--ink);font-weight:600;font-size:13px}
.zone .t-ring{fill:var(--glow)}
.zone .t-river{fill:var(--ocean);font-style:italic}
.communes{columns:2;column-gap:24px;font-size:.9375rem;padding-left:1.1em}
.communes li::marker{color:var(--glow)}

/* ---------- pied de page ---------- */
.site-footer{padding-block:56px 30px;font-size:.9375rem;color:var(--band-muted)}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:32px}
.footer-grid>div,.footer-grid>nav{display:grid;gap:10px;align-content:start}
.footer-title{font:500 .7rem/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--band-glow)}
.site-footer ul{list-style:none;padding:0;display:grid;gap:6px}
.band.site-footer a:not(.btn){color:var(--band-ink);text-decoration:none}
.band.site-footer a:not(.btn):hover{text-decoration:underline}
.footer-slogan{font-family:var(--f-display);font-weight:800;font-style:italic;font-stretch:112%;color:var(--band-ink);font-size:1.15rem}
.footer-legal{margin-top:40px;padding-top:20px;border-top:1px solid var(--band-rule);font-size:.8125rem;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
@media (max-width:760px){.footer-grid{grid-template-columns:minmax(0,1fr)}}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .chain::after{animation:none;display:none}
}