/* as2027.net : charte de la section reseau de milkywan.fr (ciel de nuit, Bricolage
   Grotesque / Figtree / IBM Plex Mono, tokens oklch) et weathermap live.
   Les tokens reprennent themes/nextgen/assets/css/tokens.css de milkywan-site. */

@font-face{font-family:'Figtree';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/Figtree-400-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/Figtree-400-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Figtree';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/Figtree-400-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Figtree';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/Figtree-400-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Figtree';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/Figtree-600-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Figtree';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/Figtree-600-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500 800;font-display:swap;src:url('/fonts/BricolageGrotesque-500-800-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500 800;font-display:swap;src:url('/fonts/BricolageGrotesque-500-800-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/IBMPlexMono-400-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/IBMPlexMono-400-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/IBMPlexMono-500-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/IBMPlexMono-500-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root {
  --color-paper:    oklch(17% 0.090 275);
  --color-paper-2:  oklch(22% 0.085 272);
  --color-paper-3:  oklch(28% 0.075 270);
  --color-paper-glass: oklch(20% 0.085 273 / 0.78);
  --color-ink:      oklch(96% 0.020 85);
  --color-ink-2:    oklch(87% 0.045 265);
  --color-muted:    oklch(74% 0.045 262);
  --color-rule:     oklch(36% 0.070 270);
  --color-rule-2:   oklch(28% 0.070 270);
  --color-turquoise: oklch(80% 0.100 200);
  --color-lime:      oklch(89% 0.120 120);
  --color-violet:    oklch(66% 0.170 320);
  --color-peach:     oklch(91% 0.060 60);
  --color-accent:     var(--color-turquoise);
  --color-accent-ink: var(--color-paper);
  --color-focus:      oklch(88% 0.140 200);
  --color-wm-shadow:  oklch(58% 0.110 265);
  --color-svc-transit:  oklch(68% 0.190 25);
  --color-svc-peering:  oklch(80% 0.170 150);
  --color-svc-collecte: oklch(78% 0.150 60);
  --color-ok:        oklch(82% 0.140 150);
  --color-ok-soft:   oklch(30% 0.060 150);
  --color-warn:      oklch(86% 0.120 80);
  --color-warn-soft: oklch(32% 0.060 80);
  --color-crit:      oklch(72% 0.170 25);
  --color-crit-soft: oklch(30% 0.070 25);

  --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Figtree", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --text-xs:   0.8rem;
  --text-sm:   0.9rem;
  --text-base: 1.0625rem;
  --text-md:   1.25rem;
  --text-lg:   1.5625rem;
  --text-xl:   1.9531rem;
  --text-2xl:  2.4414rem;
  --text-hero: clamp(2.75rem, 5vw + 1rem, 5.5rem);

  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  --measure: 62ch;
  --page-max: 72rem;
  --page-wide: 100rem;
  --page-pad: clamp(1rem, 4vw, 2.5rem);
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --rule: 1px solid var(--color-rule);
  --rule-2: 1px solid var(--color-rule-2);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-short: 120ms;

  /* weathermap : charge par sens (codes historiques : gris, bleu, vert, jaune, rouge) */
  --load-idle: oklch(52% 0.035 265);
  --load-low:  oklch(72% 0.130 245);
  --load-ok:   oklch(80% 0.170 150);
  --load-warn: oklch(86% 0.150 90);
  --load-crit: oklch(66% 0.210 25);
  --red:   var(--load-crit);
  --down:  oklch(58% 0.010 265);   /* lien down : gris plein, hors degrade de charge */
  --stage: var(--color-paper);
  --in:  var(--color-turquoise);
  --out: var(--color-peach);
  /* type de stub, couleurs de l'ancienne carte (transit rouge, peering vert, collecte orange) */
  --kind-transit:  oklch(57% 0.190 25);
  --kind-peering:  oklch(58% 0.130 165);
  --kind-collecte: oklch(62% 0.150 55);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: dark; scroll-padding-top: 72px; }
body {
  margin: 0; overflow-x: clip;
  background: var(--color-paper); color: var(--color-ink);
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.1; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-md); }
p { margin: 0; }
code, .mono { font-family: var(--font-mono); font-size: 0.92em; font-variant-numeric: tabular-nums; }
code { color: var(--color-turquoise); }
.muted { color: var(--color-muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.page { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--page-pad); }
.page--wide { max-width: var(--page-wide); }
/* weathermap : toute la largeur de la fenetre, petite marge */
.page--full { max-width: none; padding-inline: 12px; }
.prose > * + * { margin-top: var(--space-md); }
.prose { max-width: var(--measure); color: var(--color-ink-2); }
.prose strong { color: var(--color-ink); }

/* Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: 46px; padding: 0 var(--space-lg);
  border: 2px solid currentColor; border-radius: 999px; background: transparent; color: var(--color-ink);
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.btn:hover { background: var(--color-paper-3); text-decoration: none; }
.btn--fill { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.btn--fill:hover { background: var(--color-lime); border-color: var(--color-lime); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }

/* En-tete : bande nuit, filet dessous */
/* fond opaque : un flou d'arriere-plan recompose a chaque image du defilement tout ce qui passe dessous (les grands SVG de la carte) */
.site-head { background: oklch(20% 0.085 273 / 0.97); position: sticky; top: 0; z-index: 200; border-bottom: var(--rule); }
.site-head__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--space-md); min-height: 64px; }
@media (min-width: 64rem) { .site-head__row { flex-wrap: nowrap; } }
.site-head__brand { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 44px; color: inherit; text-decoration: none; }
.wordmark { height: 24px; width: auto; display: block; }
.wordmark .wm-a { fill: var(--color-wm-shadow); }
.wordmark .wm-b { fill: url(#wm-grad); }
.site-head__as { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; color: var(--color-turquoise); border: 1px solid var(--color-rule); border-radius: 999px; padding: 1px 8px; }
/* mobile et tablette : les liens en rangee defilante sous la marque */
.site-nav { display: flex; order: 3; width: 100%; overflow-x: auto; gap: var(--space-2xs); padding-bottom: var(--space-xs); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a { color: var(--color-ink); text-decoration: none; font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); padding: var(--space-xs) var(--space-sm); white-space: nowrap; }
.site-nav a:hover { color: var(--color-turquoise); }
.lang { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; color: var(--color-ink); text-decoration: none; border: 1px solid var(--color-rule); border-radius: 999px; padding: 4px 10px; }
.lang:hover { border-color: var(--color-turquoise); color: var(--color-turquoise); }
@media (min-width: 64rem) { .site-nav { order: 0; width: auto; overflow: visible; padding-bottom: 0; align-items: center; gap: var(--space-2xs); } }

/* Sections */
.section { padding-block: var(--space-2xl); }
.section + .section { border-top: var(--rule-2); }
.section__title { text-align: center; font-size: var(--text-2xl); margin-bottom: var(--space-xl); color: var(--color-peach); }
.section__lede { text-align: center; max-width: 60ch; margin: calc(-1 * var(--space-lg)) auto var(--space-xl); color: var(--color-ink-2); }
.section__note { margin-top: var(--space-md); color: var(--color-ink-2); font-size: var(--text-sm); }
.section__note b { color: var(--color-peach); font-family: var(--font-display); }

/* Hero */
.hero { text-align: center; padding-block: var(--space-2xl) var(--space-xl); }
.hero__emblem { width: min(36vw, 11rem); margin: 0 auto var(--space-lg); filter: drop-shadow(0 12px 40px oklch(70% 0.120 200 / 0.35)); }
.hero h1 { font-size: var(--text-hero); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.hero h1 span { color: var(--color-turquoise); }
.hero .lede { max-width: 60ch; margin: var(--space-lg) auto 0; font-size: var(--text-md); line-height: 1.5; color: var(--color-ink-2); }
.hero .btn-row { justify-content: center; margin-top: var(--space-xl); }
.stats { list-style: none; margin: var(--space-xl) auto 0; padding: var(--space-md) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md) var(--space-lg); border-top: var(--rule); max-width: 64rem; }
.stats li { display: grid; gap: 2px; text-align: center; align-content: start; }
.stats b { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; letter-spacing: -0.02em; color: var(--color-turquoise); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats span { font-size: var(--text-xs); color: var(--color-ink-2); }
@media (min-width: 40rem) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .stats { grid-template-columns: repeat(6, minmax(0, 1fr)); } .stats b { font-size: var(--text-xl); } }

/* Diptyque peering / contact */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
@media (min-width: 60rem) { .split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); } }
.split h3 { color: var(--color-peach); margin-bottom: var(--space-sm); }
.split h3 + * { margin-top: 0; }
.split .block + .block { margin-top: var(--space-xl); }
.spec { margin: 0; display: grid; }
.spec > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs) var(--space-md); padding-block: var(--space-sm); border-bottom: var(--rule); }
.spec dt { font-size: var(--text-sm); color: var(--color-muted); }
.spec dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-sm); color: var(--color-turquoise); overflow-wrap: anywhere; }
@media (min-width: 40rem) { .spec > div { grid-template-columns: 10rem minmax(0, 1fr); } }

/* Tableaux */
.tbl-wrap { overflow-x: auto; border: var(--rule); border-radius: var(--radius-md); background: var(--color-paper-glass); }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.tbl th { text-align: left; font-family: var(--font-mono); font-weight: 500; font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); background: var(--color-paper-2); padding: var(--space-sm) var(--space-md); border-bottom: var(--rule); white-space: nowrap; }
.tbl td { padding: var(--space-sm) var(--space-md); border-bottom: var(--rule-2); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: var(--color-paper-2); }
.tbl .num, .tbl .ip { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .ip { color: var(--color-ink-2); }
.tbl .num { color: var(--color-peach); text-align: right; }
.tbl th.num { text-align: right; }
/* petit ecran : chaque ligne devient une fiche, libelle de colonne devant chaque valeur */
@media (max-width: 48rem) {
  .tbl-wrap { overflow: visible; }
  .tbl thead { display: none; }
  .tbl, .tbl tr, .tbl td { display: block; width: 100%; }
  /* cartes en grille : une colonne sur telephone, deux sur tablette */
  .tbl tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); width: 100%; }
  .tbl tr { padding: var(--space-sm) var(--space-md); box-shadow: inset -1px -1px 0 var(--color-rule-2); box-sizing: border-box; }
  .tbl td { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding: 3px 0; border: 0; text-align: right; }
  .tbl td:first-child { padding-bottom: var(--space-xs); text-align: left; }
  .tbl td:first-child::before { content: none; }
  .tbl td::before { content: attr(data-label); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); text-align: left; flex: none; }
  .tbl .ip { white-space: normal; word-break: break-all; }
  .tbl tbody tr:hover td { background: none; }
}
.tbl .ok { color: var(--color-ok); text-align: center; }
.tbl th.ok { text-align: center; }
.tbl small { display: block; color: var(--color-muted); font-size: var(--text-xs); }
.op { display: inline-flex; align-items: center; gap: var(--space-xs); font-family: var(--font-display); font-weight: 700; }
.op a { color: var(--color-ink); text-decoration: none; }
.op a:hover { color: var(--color-turquoise); }
.op img, .op .op-mono { width: 46px; height: 22px; object-fit: contain; border-radius: 5px; background: oklch(98% 0.01 85); padding: 2px 4px; flex: none; box-sizing: border-box; }
.op .op-mono { display: inline-grid; place-items: center; background: var(--color-paper-3); color: var(--color-ink-2); font: 700 9px/1 var(--font-mono); padding: 0; }

/* Points de presence */
.pops { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--space-xl); }
.pops li { display: flex; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-sm); border-bottom: var(--rule-2); }
.pops a { font-family: var(--font-display); font-weight: 700; color: var(--color-ink); text-decoration: none; }
.pops a:hover { color: var(--color-turquoise); }
.pops span { color: var(--color-muted); font-size: var(--text-sm); text-align: right; }
@media (min-width: 48rem) { .pops { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .pops { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Communautes BGP */
.comm-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
@media (min-width: 64rem) { .comm-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.comm { border: var(--rule); border-radius: var(--radius-md); background: var(--color-paper-glass); padding: var(--space-lg); min-width: 0; }
.comm h3 { color: var(--color-peach); margin-bottom: var(--space-2xs); }
.comm > p { color: var(--color-muted); font-size: var(--text-sm); margin-bottom: var(--space-md); }
.comm h4 { font-family: var(--font-mono); font-weight: 500; font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); margin: var(--space-lg) 0 var(--space-xs); }
.comm h4:first-of-type { margin-top: 0; }
.cl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; font-size: var(--text-sm); }
.cl dt, .cl dd { padding: 5px 0; border-bottom: var(--rule-2); }
.cl dt { color: var(--color-ink-2); padding-right: var(--space-md); }
.cl dt small { color: var(--color-muted); }
.cl dd { margin: 0; text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.cl dd code + code::before { content: "+ "; color: var(--color-muted); }
.cl--wrap dd { white-space: normal; }
.c-na { color: var(--color-svc-collecte) !important; }
.c-bh { color: var(--color-svc-transit) !important; }
.c-gs { color: var(--color-svc-peering) !important; }
.pol { margin-top: var(--space-sm); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-lime); }
.pol span { display: block; color: var(--color-ink-2); }
.xopts { margin-top: var(--space-sm); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--space-sm); font-size: var(--text-sm); }
.xopts code { color: var(--color-violet); }
.cust { max-height: 26rem; overflow-y: auto; scrollbar-width: thin; padding-right: var(--space-xs); }

/* Pied de page */
.site-foot { background: var(--color-paper-2); color: var(--color-ink-2); margin-top: var(--space-2xl); padding-block: var(--space-xl) var(--space-2xl); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.7; border-top: var(--rule); }
.site-foot .wordmark { height: 20px; margin-bottom: var(--space-md); }
.site-foot a { color: var(--color-ink); }
.site-foot a:hover { color: var(--color-turquoise); }
.site-foot__grid { display: grid; gap: var(--space-lg); }
@media (min-width: 48rem) { .site-foot__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.site-foot ul { list-style: none; margin: 0; padding: 0; }

/* =====================================================================
   Weathermap live. Tout est prefixe par #wmap : la carte vit dans une
   section de la page, plus en plein ecran.
   ===================================================================== */
#wmap { --wm-h: clamp(560px, calc(100vh - 150px), 1200px); font-size: 13px; line-height: 1.4; position: relative; }
#wmap .wm-top { display: flex; flex-wrap: wrap; align-items: stretch; border: var(--rule); border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--color-paper-2); }
#wmap .kpis { flex: 1 1 100%; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#wmap .kpi { min-width: 0; padding: 10px 16px 8px; border-right: var(--rule-2); border-bottom: var(--rule-2); display: flex; flex-direction: column; justify-content: center; }
#wmap .kpi .k { font: 500 10.5px/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
#wmap .kpi .v { font: 800 19px/1.25 var(--font-display); font-variant-numeric: tabular-nums; display: flex; gap: 12px; align-items: baseline; color: var(--color-ink); }
#wmap .kpi .v .in::before { content: "↓"; color: var(--in); font-size: 13px; margin-right: 2px; }
#wmap .kpi .v .out::before { content: "↑"; color: var(--out); font-size: 13px; margin-right: 2px; }
#wmap .kpi .bar { height: 3px; border-radius: 2px; background: var(--color-paper-3); margin-top: 5px; overflow: hidden; }
#wmap .kpi .bar i { display: block; height: 100%; }
#wmap .kpi .s { font-size: 11px; color: var(--color-muted); margin-top: 3px; }
#wmap .wm-status { display: flex; align-items: center; padding: 10px 16px; flex: 1 0 100%; }
@media (min-width: 48rem) { #wmap .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 72rem) { #wmap .kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); } #wmap .kpis { flex-basis: 0; } #wmap .kpi { border-bottom: 0; } #wmap .wm-status { flex: none; border-left: var(--rule-2); } }
#wmap .status { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; font: 600 12px var(--font-body); white-space: nowrap;
  background: var(--color-ok-soft); color: var(--color-ok); border: 1px solid var(--color-ok); }
#wmap .status i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
#wmap .status.clock { background: transparent; border-color: transparent; color: var(--color-ink); font: 700 20px var(--font-mono); font-variant-numeric: tabular-nums; cursor: default; }
#wmap .status.clock i { display: none; }
#wmap .status.warn { background: var(--color-warn-soft); color: var(--color-warn); border-color: var(--color-warn); }
#wmap .status.crit { background: var(--color-crit-soft); color: var(--color-crit); border-color: var(--color-crit); }

#wmap .wm-body { display: grid; grid-template-columns: minmax(0, 1fr); border: var(--rule); border-top: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); background: var(--color-paper); position: relative; overflow: hidden; }
#wmap #stage { min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; height: var(--wm-h); }
#wmap .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: 34px; }
#wmap .toolbar-end { display: flex; align-items: center; gap: 6px; margin-left: auto; }
/* une seule rangee : la legende passe a la ligne sur elle-meme, pas les boutons */
@media (min-width: 64rem) { #wmap .toolbar { flex-wrap: nowrap; } #wmap .legend { flex: 1 1 auto; } #wmap .toolbar-end { flex-shrink: 0; } }
#wmap .seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--color-paper-2); border: var(--rule-2); flex-shrink: 0; }
#wmap .seg button { border: 0; background: none; border-radius: 999px; padding: 5px 14px; font: 700 12.5px var(--font-display); color: var(--color-ink-2); cursor: pointer; }
#wmap .seg button.active { background: var(--color-turquoise); color: var(--color-paper); }
#wmap .legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 11px; min-width: 0; font-size: 11px; color: var(--color-muted); }
#wmap .legend .lg-grad { display: inline-flex; flex-direction: column; gap: 1px; width: 150px; }
#wmap .legend .lg-grad i { display: block; height: 7px; border-radius: 4px; }
#wmap .legend .lg-grad em { display: flex; justify-content: space-between; font: 500 9.5px var(--font-mono); font-style: normal; }
#wmap .legend .lg-grad b { font-weight: 500; }
#wmap .legend .bx { display: inline-block; width: 14px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
#wmap .legend .bx.col { box-shadow: inset 0 0 0 1px var(--color-rule); }
#wmap .legend .lg-sep { margin-left: 8px; }
#wmap .legend b { color: var(--color-ink-2); font-weight: 600; }
#wmap .legend .sw { display: inline-block; width: 18px; height: 4px; border-radius: 2px; vertical-align: middle; margin-right: 4px; }
#wmap .legend .sw.dash { background: var(--down); }
#wmap .icon-btn { width: 32px; height: 32px; border-radius: 9px; border: var(--rule); background: var(--color-paper-2); color: var(--color-ink); cursor: pointer; font-size: 14px; }
#wmap .icon-btn:hover { border-color: var(--color-turquoise); }
#wmap a.icon-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; font-size: 16px; }
#wmap .icon-btn[aria-pressed="true"] { background: var(--color-paper-3); border-color: var(--color-turquoise); }
#wmap .updated { font: 11px var(--font-mono); color: var(--color-muted); white-space: nowrap; }
#wmap .updated::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--color-ok); margin-right: 6px; vertical-align: middle; }
#wmap .updated.stale::before { background: var(--red); }
#wmap .map { position: relative; flex: 1; min-height: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--stage); border: var(--rule-2); }
#wmap .wmsvg { width: 100%; height: 100%; display: block; max-width: none; cursor: grab; }
/* deux cartes cote a cote (Villes plus etroite, la France est haute), empilees sur mobile */
#wmap .maps { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: 10px; }
#wmap .maps .map { height: 100%; }
#wmap .map-title { position: absolute; left: 12px; top: 10px; z-index: 2; font: 700 10.5px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); pointer-events: none; }
@media (max-width: 64rem) {
  #wmap #stage { height: auto; }
  #wmap .maps { grid-template-columns: minmax(0, 1fr); }
  #wmap #map-wrap-cities { height: auto; aspect-ratio: 1 / 1; max-height: 70vh; }
  #wmap #map-wrap-devices { height: 480px; }
}
#wmap .zoomhint { position: absolute; right: 12px; bottom: 10px; font: 11px var(--font-mono); color: var(--color-muted); pointer-events: none; opacity: 0; transition: opacity 200ms; }
#wmap .zoomhint.on { opacity: 1; }
#wmap .linkinfo { position: absolute; left: 14px; top: 14px; z-index: 5; pointer-events: none; width: 290px; background: var(--color-paper-2); border: var(--rule); border-radius: var(--radius-md);
  padding: 10px 12px; box-shadow: 0 10px 30px -10px oklch(5% 0.05 275 / 0.7); font-size: 12px; pointer-events: none; }
#wmap .linkinfo h4 { margin: 0 0 4px; font: 700 13px var(--font-display); }
#wmap .linkinfo .r { display: flex; justify-content: space-between; gap: 10px; color: var(--color-muted); }
#wmap .linkinfo .r b { color: var(--color-ink); font: 500 11.5px var(--font-mono); }
#wmap .linkinfo .hv-legend { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 8px; white-space: nowrap; font: 10.5px var(--font-mono); color: var(--color-muted); }
#wmap .linkinfo .hv-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
#wmap .linkinfo .hv-legend .in::before { background: var(--in); }
#wmap .linkinfo .hv-legend .out::before { background: var(--out); }
#wmap .linkinfo .hv-sub { font: 500 11px var(--font-mono); color: var(--color-muted); margin: -2px 0 8px; }
#wmap .linkinfo .hv-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
#wmap .linkinfo .hv-chips span { font: 600 11px var(--font-mono); padding: 2px 7px; border-radius: 6px; background: var(--color-paper-3); border: var(--rule); color: var(--color-ink); }
#wmap .linkinfo .hv-meta { font-size: 12px; color: var(--color-muted); }
#wmap .linkinfo .hv-title { margin: 10px 0 4px; padding-top: 8px; border-top: var(--rule); font: 500 10.5px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
#wmap .linkinfo .hv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
#wmap .linkinfo .hv-stats b { display: block; font: 700 14px var(--font-mono); color: var(--color-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
#wmap .linkinfo .hv-stats b.in::before { content: "↓"; color: var(--in); margin-right: 2px; }
#wmap .linkinfo .hv-stats b.out::before { content: "↑"; color: var(--out); margin-right: 2px; }
#wmap .linkinfo .hv-stats span { font-size: 11px; color: var(--color-muted); }
#wmap .linkinfo .hv-stats small { font: 500 10px var(--font-mono); color: var(--color-muted); margin-left: 3px; }
#wmap .linkinfo svg.hv { display: block; width: 100%; height: auto; aspect-ratio: 266 / 92; margin-top: 4px; }

/* carte SVG */
#wmap .region { fill: var(--color-paper-2); stroke: var(--color-rule); stroke-width: 0.8; stroke-linejoin: round; }
#wmap .link-case { fill: none; stroke: var(--stage); stroke-linecap: butt; pointer-events: none; }
#wmap .half { fill: none; stroke-linecap: butt; pointer-events: none; }
/* zone de survol : un trait peint a opacite nulle ; "stroke: transparent"
   masquait les liens en dessous sur Safari iOS */
#wmap .link-hit { fill: none; stroke: #000; stroke-opacity: 0; pointer-events: stroke; cursor: pointer; }
/* bande de liens paralleles : invisible, elle ne porte que debits globaux, capacite et survol */
#wmap .link.band .half, #wmap .link.band .link-case { display: none; }
#wmap .link.down .half { stroke: var(--down); }
#wmap .link.standby .half { stroke: var(--load-idle); stroke-dasharray: 4 5; }
#wmap .link.hl .half { filter: drop-shadow(0 0 4px oklch(96% 0.02 85 / 0.55)); }
#wmap .pill, #wmap .capl, #wmap .citylbl { pointer-events: none; }
#wmap .pill rect { fill: var(--color-paper); stroke: var(--color-rule); stroke-width: 1; }
#wmap .pill text { font: 500 10px var(--font-mono); fill: var(--color-ink); font-variant-numeric: tabular-nums; }
#wmap .pill.small text { font-size: 9px; }
/* vue Routeurs : plus grand, la carte y a toute la largeur */
#wmap .wmsvg.dv .pill text, #wmap .wmsvg.dv .pill.small text { font-size: 12px; }
#wmap .wmsvg.dv .capl { font-size: 12px; }
#wmap .capl { font: italic 400 10px var(--font-body); fill: var(--color-muted); paint-order: stroke; stroke: var(--stage); stroke-width: 3px; stroke-linejoin: round; }
#wmap .card rect.bg { fill: var(--color-paper-2); stroke: var(--color-rule); stroke-width: 1; }
#wmap .card.hot rect.bg { stroke: var(--red); stroke-width: 1.5; }
#wmap .card text.t { font: 800 15px var(--font-display); fill: var(--color-peach); }
#wmap .card text.s { font: 400 10.5px var(--font-mono); fill: var(--color-muted); }
#wmap .card.drag rect.bg, #wmap .frame.drag rect.bg { stroke: var(--color-turquoise); }
#wmap .frame rect.bg { fill: var(--color-paper-2); stroke: var(--color-rule); stroke-width: 1; }
#wmap .frame text.t { font: 800 12px var(--font-display); fill: var(--color-peach); letter-spacing: 0.02em; }
#wmap .dev rect { rx: 7px; ry: 7px; }
#wmap .dev.core rect { fill: var(--color-lime); } #wmap .dev.core text { fill: var(--color-paper); }
#wmap .dev.edge rect { fill: var(--color-violet); } #wmap .dev.edge text { fill: var(--color-ink); }
#wmap .dev.col rect { fill: var(--color-paper-3); stroke: var(--color-rule); stroke-width: 1; } #wmap .dev.col text { fill: var(--color-ink); }
#wmap .dev text { font: 700 15px var(--font-display); pointer-events: none; }
#wmap .dev text.model { font: 500 11px var(--font-mono); opacity: .75; }
#wmap .dev.bar text { font-size: 11px; }
#wmap .dev.sel rect { stroke: var(--color-turquoise); stroke-width: 2.5; }
#wmap .dev, #wmap .card, #wmap .frame { cursor: pointer; }
#wmap .grab { cursor: grab; }

/* panneau lateral */
#wmap .kpanel { position: absolute; left: 0; top: 0; width: min(380px, 100%); max-height: 100%; overflow-y: auto; z-index: 6; padding: 14px 16px 20px; display: flex; flex-direction: column; gap: 18px;
  background: var(--color-paper-2); border: var(--rule); border-top: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); box-shadow: 0 12px 32px oklch(0% 0 0 / .35); scrollbar-width: thin; }
#wmap .kpanel[hidden], #wmap .kpanel [hidden] { display: none; }
#wmap .kpi { cursor: pointer; transition: background .15s; }
#wmap .kpi:hover, #wmap .kpi:focus-visible { background: var(--color-paper-2); outline: none; }
#wmap .kpi.on { background: var(--color-paper-2); box-shadow: inset 0 -2px 0 var(--color-peach); }
#wmap .status { cursor: pointer; }
#wmap .sect h3 { margin: 0 0 8px; font: 700 14px var(--font-display); color: var(--color-peach); }
#wmap .alerts .ok { display: flex; align-items: center; gap: 10px; color: var(--color-ok); font-weight: 600; }
#wmap .alerts .al { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; border-top: var(--rule-2); font-size: 12px; }
#wmap .alerts .al:first-child { border-top: 0; }
#wmap .alerts .al i { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex: none; }
#wmap .alerts .al.crit i { background: var(--color-crit); } #wmap .alerts .al.warn i { background: var(--color-warn); } #wmap .alerts .al.info i { background: var(--color-muted); }
#wmap .alerts .al small { color: var(--color-muted); display: block; }
#wmap .load .big { font: 800 30px/1 var(--font-display); font-variant-numeric: tabular-nums; color: var(--color-ink); }
#wmap .load .big small { font: 400 12px var(--font-body); color: var(--color-muted); margin-left: 6px; }
#wmap .load .bar { height: 4px; border-radius: 2px; background: var(--color-paper-3); margin: 8px 0 10px; overflow: hidden; }
#wmap .load .bar i { display: block; height: 100%; }
#wmap .load .r { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--color-muted); padding: 2px 0; }
#wmap .load .r b { color: var(--color-ink); font: 500 11.5px var(--font-mono); text-align: right; }
#wmap .spark-row { margin-bottom: 8px; }
#wmap .tt-mini { cursor: pointer; border-radius: var(--radius-sm); }
#wmap .tt-mini:hover { background: var(--color-paper-2); }
#wmap #tt-svg { display: block; width: 100%; height: 60px; max-width: none; }
#wmap .rows .h { font: 500 10.5px var(--font-mono); color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.08em; margin: 10px 0 3px; }
#wmap .rows .h:first-child { margin-top: 0; }
#wmap .row { display: grid; grid-template-columns: 8px 44px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 3px 0; font-size: 12px; cursor: pointer; }
#wmap .row:hover, #wmap .row.sel { background: var(--color-paper-2); margin: 0 -6px; padding: 3px 6px; border-radius: 6px; }
#wmap .row .d { width: 8px; height: 8px; border-radius: 50%; background: var(--load-idle); }
#wmap .row .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#wmap .row .n small { color: var(--color-muted); margin-left: 4px; font-size: 10.5px; }
#wmap .row .v { font: 400 11px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--color-muted); white-space: nowrap; }
#wmap .row .v b { color: var(--color-ink); font-weight: 500; }
#wmap .row.nodata .v { opacity: 0.5; }
/* logos officiels : proportions respectees, sur une pastille claire (sombre pour ceux qui n'existent qu'en blanc) */
#wmap .oplogo { width: 44px; height: 18px; display: flex; align-items: center; justify-content: center; flex: none; background: oklch(98% 0.01 85); border-radius: 3px; padding: 1px 3px; box-sizing: border-box; }
#wmap .oplogo.dark { background: oklch(22% 0.04 270); }
#wmap .oplogo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
#wmap .oplogo.mono { font: 700 9px/18px var(--font-mono); text-align: center; color: var(--color-ink-2); background: var(--color-paper-3); padding: 0; }
/* vue Routeurs : stubs facon carte LibreNMS */
/* stubs : pilule a la couleur du type, nom en blanc, capacite dans une pastille assombrie */
#wmap .sbox rect.bg { stroke: oklch(100% 0 0 / 0.14); stroke-width: 1; }
#wmap .sbox.transit rect.bg { fill: var(--kind-transit); }
#wmap .sbox.peering rect.bg { fill: var(--kind-peering); }
#wmap .sbox.collecte rect.bg { fill: var(--kind-collecte); }
#wmap .sbox text { font: 650 12.5px var(--font-body); fill: oklch(99% 0 0); pointer-events: none; letter-spacing: 0.01em; }
#wmap .sbox rect.bwchip { fill: oklch(0% 0 0 / 0.24); }
#wmap .sbox text.bwt { font: 600 10.5px var(--font-mono); fill: oklch(99% 0 0 / 0.92); }
#wmap .sbox { cursor: pointer; }

#wmap .citylbl { font: 800 14px var(--font-display); fill: var(--color-peach); letter-spacing: 0.06em; opacity: 0.7; }

/* detail : tiroir dans la carte */
#wmap .detail { position: absolute; right: 0; top: 0; bottom: 0; width: min(360px, 100%); background: var(--color-paper-2); border-left: var(--rule);
  box-shadow: -20px 0 40px -20px oklch(5% 0.05 275 / 0.8); padding: 18px 18px 24px; overflow-y: auto; z-index: 20; }
#wmap .detail-close { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 22px; cursor: pointer; color: var(--color-muted); }
#wmap .detail h3 { margin: 0 24px 2px 0; font: 800 16px var(--font-display); color: var(--color-peach); overflow-wrap: anywhere; }
#wmap .detail .sub { color: var(--color-muted); font-size: 12px; margin-bottom: 12px; }
#wmap .detail .kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; font-size: 12.5px; margin: 0 0 12px; }
#wmap .detail .kv dt { color: var(--color-muted); }
#wmap .detail .kv dd { margin: 0; font-family: var(--font-mono); font-size: 11.5px; font-variant-numeric: tabular-nums; }
#wmap .in { color: var(--in); } #wmap .out { color: var(--out); }
#wmap .detail .kv .in, #wmap .detail .kv .out { font-weight: 500; }
#wmap .detail .st { display: inline-block; padding: 1px 8px; border-radius: 999px; font: 600 10.5px var(--font-mono); background: var(--color-paper-3); }
#wmap .detail .st.up { background: var(--color-ok-soft); color: var(--color-ok); }
#wmap .detail .st.partial { background: var(--color-warn-soft); color: var(--color-warn); }
#wmap .detail .st.down { background: var(--color-crit-soft); color: var(--color-crit); }
#wmap #info-svg { display: block; width: 100%; height: 60px; margin-top: 8px; max-width: none; }
#wmap .detail h4 { margin: 14px 0 4px; font: 500 10.5px var(--font-mono); color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.08em; }

/* modale trafic par operateur */
#tt-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; background: oklch(10% 0.06 275 / 0.7); padding: 20px; font-size: 13px; }
#tt-modal .ttm-card { background: var(--color-paper-2); border: var(--rule); border-radius: var(--radius-lg); padding: 16px 18px 14px; width: min(860px, 94vw); }
#tt-modal .ttm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 10px; }
#tt-modal .ttm-title { font: 800 15px var(--font-display); color: var(--color-peach); }
#tt-modal .ttm-range { margin-left: auto; display: inline-flex; gap: 2px; background: var(--color-paper); border-radius: 999px; padding: 3px; }
#tt-modal .ttm-range button { font: 600 11.5px var(--font-mono); color: var(--color-muted); background: none; border: 0; border-radius: 999px; padding: 4px 10px; cursor: pointer; }
#tt-modal .ttm-range button.on { background: var(--color-turquoise); color: var(--color-paper); }
#tt-modal .ttm-x { border: 0; background: none; cursor: pointer; font-size: 22px; line-height: 1; color: var(--color-muted); }
#tt-modal #ttm-svg { display: block; width: 100%; height: 300px; max-width: none; }
#tt-modal #ttm-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 10px; }
#tt-modal .ttm-lg-h { font: 500 10px var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); margin-right: 2px; }
#tt-modal .ttm-lg { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--color-ink); background: none; border: 0; cursor: pointer; padding: 2px 3px; border-radius: 5px; }
#tt-modal .ttm-lg.off { opacity: 0.38; text-decoration: line-through; }
#tt-modal .ttm-lg i { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.tt-grid { stroke: var(--color-rule-2); stroke-width: 1; }
.tt-ax { font: 10px var(--font-mono); fill: var(--color-muted); }
.tt-dirlbl { font: 700 10px var(--font-display); paint-order: stroke; stroke: var(--color-paper-2); stroke-width: 3px; }
.tt-base { stroke: var(--color-rule); stroke-width: 0.75; }

/* Page /weathermap : la weathermap seule, plein ecran */
body.wm-full { margin: 0; background: var(--color-paper); }
body.wm-full #wmap { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.wm-full #wmap .wm-top { border-radius: 0; border-inline: 0; border-top: 0; }
body.wm-full #wmap .wm-body { flex: 1; min-height: 0; border-radius: 0; border-inline: 0; border-bottom: 0; }
@media (min-width: 48rem) {
  body.wm-full #wmap { height: 100vh; height: 100dvh; }
  body.wm-full #wmap #stage { height: 100%; }
}
/* boutons d'affichage : chiffres, cartes, plein ecran */
body.wm-full #wmap .tg-btn { height: 32px; padding: 0 11px; border-radius: 9px; border: var(--rule); background: var(--color-paper-2); color: var(--color-muted); font: 600 12px var(--font-body); cursor: pointer; }
body.wm-full #wmap .tg-btn[aria-pressed="true"] { color: var(--color-ink); background: var(--color-paper-3); border-color: var(--color-turquoise); }
body.wm-hide-kpis #wmap .wm-top { display: none; }
body.wm-hide-cities #wmap #map-wrap-cities, body.wm-hide-devices #wmap #map-wrap-devices { display: none; }
body.wm-hide-cities #wmap .maps, body.wm-hide-devices #wmap .maps { grid-template-columns: minmax(0, 1fr); }

/* Mode clair (page /weathermap, bouton soleil/lune) */
html[data-theme="light"] {
  --color-paper:    oklch(97.5% 0.008 265);
  --color-paper-2:  oklch(94% 0.014 265);
  --color-paper-3:  oklch(89% 0.020 265);
  --color-paper-glass: oklch(96% 0.010 265 / 0.85);
  --color-ink:      oklch(24% 0.060 272);
  --color-ink-2:    oklch(34% 0.050 268);
  --color-muted:    oklch(50% 0.040 264);
  --color-rule:     oklch(80% 0.030 265);
  --color-rule-2:   oklch(87% 0.020 265);
  --color-turquoise: oklch(55% 0.110 205);
  --color-peach:     oklch(48% 0.120 45);
  --color-lime:      oklch(86% 0.140 125);
  --color-ok:        oklch(48% 0.130 150);
  --color-ok-soft:   oklch(93% 0.050 150);
  --color-warn:      oklch(55% 0.130 75);
  --color-warn-soft: oklch(94% 0.060 85);
  --color-crit:      oklch(52% 0.180 25);
  --color-crit-soft: oklch(94% 0.040 25);
  --load-idle: oklch(70% 0.025 265);
  --down: oklch(68% 0.010 265);
  --out: oklch(66% 0.140 55);
  color-scheme: light;
}
html[data-theme="light"] body { background: var(--color-paper); color: var(--color-ink); }
html[data-theme="light"] #wmap .dev.core text, html[data-theme="light"] #wmap .dev.edge text { fill: oklch(20% 0.06 272); }
html[data-theme="light"] #wmap .dev.edge text.model, html[data-theme="light"] #wmap .dev.core text.model { fill: oklch(28% 0.06 272); }
html[data-theme="light"] #wmap .linkinfo, html[data-theme="light"] #wmap .kpanel { box-shadow: 0 10px 30px -12px oklch(30% 0.05 270 / 0.35); }
html[data-theme="light"] #wmap .link.hl .half { filter: drop-shadow(0 0 4px oklch(40% 0.1 270 / 0.5)); }

/* Mode TV (?tv=1) : capture 1920x1080 par le serveur de la chaine weathermap.
   Marges de securite de 5 % (overscan), chiffres et heure lisibles a 3 m,
   aucune commande ni survol. */
body.wm-tv { overflow: hidden; }
body.wm-tv #wmap { height: 100vh; padding: 54px 96px; box-sizing: border-box; gap: 14px; }
body.wm-tv #wmap .wm-top { border: 0; border-radius: 0; background: transparent; flex-wrap: nowrap; }
body.wm-tv #wmap .kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); flex: 1; }
body.wm-tv #wmap .kpi { border: 0; padding: 4px 18px 4px 0; }
body.wm-tv #wmap .kpi .k { font-size: 18px; }
body.wm-tv #wmap .kpi .v { font-size: 38px; gap: 16px; }
body.wm-tv #wmap .kpi .v .in::before, body.wm-tv #wmap .kpi .v .out::before { font-size: 26px; }
body.wm-tv #wmap .kpi .s, body.wm-tv #wmap .kpi .bar { display: none; }
/* bloc horloge a geometrie fixe : la chaine peut y dessiner sa propre horloge
   (clock=0) ; IBM Plex Mono Medium, la graisse dont le site a le fichier */
body.wm-tv #wmap .wm-status { border: 0; padding: 0 0 0 18px; flex: none; width: 300px; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; }
body.wm-tv #wmap .status.clock, body.wm-tv #wmap .status { font: 500 56px/64px var(--font-mono); height: 64px; padding: 0; color: var(--color-ink); background: transparent; border-color: transparent; }
body.wm-tv #wmap .status.clock i { display: none; }
body.wm-tv.wm-noclock #wmap .status #status-text { visibility: hidden; }
body.wm-tv #wmap .tv-ts { font: 400 18px/24px var(--font-mono); color: var(--color-muted); font-variant-numeric: tabular-nums; }
body.wm-tv #wmap .wm-body { border: 0; border-radius: 0; background: transparent; }
body.wm-tv #wmap #stage { padding: 0; gap: 10px; }
body.wm-tv #wmap .toolbar { order: 2; }
body.wm-tv #wmap .toolbar-end, body.wm-tv #wmap .map-title, body.wm-tv #wmap .zoomhint, body.wm-tv #wmap .linkinfo, body.wm-tv #kpanel, body.wm-tv #detail { display: none !important; }
body.wm-tv #wmap .legend { font-size: 16px; gap: 6px 16px; flex-wrap: nowrap; white-space: nowrap; }
body.wm-tv #wmap .legend .lg-grad { width: 260px; }
body.wm-tv #wmap .legend .lg-grad i { height: 12px; }
body.wm-tv #wmap .legend .lg-grad em { font-size: 15px; }
body.wm-tv #wmap .legend .bx { width: 22px; height: 15px; }
body.wm-tv #wmap .maps .map { border: 0; border-radius: 0; background: transparent; }

/* Clins d'oeil (eggs.js) */
.egg-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 500; max-width: min(92vw, 560px);
  padding: 12px 16px; border-radius: 12px; background: var(--color-paper-2); border: 1px solid var(--color-rule); color: var(--color-ink);
  font: 500 13px/1.5 var(--font-mono); box-shadow: 0 16px 40px oklch(5% 0.05 275 / 0.55); opacity: 0; pointer-events: none;
  transition: opacity 200ms, transform 200ms; }
.egg-toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.egg-toast code { color: var(--color-turquoise); }
.egg-toast a { color: var(--color-turquoise); }
@keyframes egg-flow { to { stroke-dashoffset: -32; } }
body.egg-packets #wmap .half { stroke-dasharray: 10 6; animation: egg-flow 0.8s linear infinite; }
@keyframes egg-spin { to { transform: rotate(360deg); } }
.hero__emblem.egg-spin { animation: egg-spin 1.6s cubic-bezier(0.45, 0, 0.2, 1); }
.hero__emblem { cursor: default; }
@media (prefers-reduced-motion: reduce) { body.egg-packets #wmap .half { animation: none; } .egg-toast { transition: none; } }