/* BéarnIX — maquettes, thème NOC.
   Un seul axe sur <html> : data-mode = auto | light | dark (auto = préférence système).
   Chaque jeu de couleurs définit TOUTES les variables. */

/* ↯ ossature ↯ (extrait littéralement pour le looking glass, variables + entête + pied) */
:root {
  --police: "Atkinson Hyperlegible Mono", ui-monospace, monospace;
  --rayon: 2px;

  /* clair : « listing imprimé », papier légèrement teinté */
  --fond: #edf3f2;
  --surface: #f8fbfa;
  --encre: #0a1f3d;
  --texte: #1f3352;
  --discret: #4f6380;
  --trait: #c5d4d6;
  --accent: #079e98;
  --accent-texte: #06706c;
  --accent-fort: #06706c;
  --ok: #13803f;
  --attention: #b26a00;
  --panne: #c62828;
  --logo-ink: #0a1f3d;
  --logo-accent: #079e98;
  --logo-fill: #f8fbfa;
  --sur-accent: #ffffff;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --fond: #081324; --surface: #0d1c33; --encre: #e3ebf5; --texte: #c3cfdf;
    --discret: #8a9bb3; --trait: #1f3354; --accent: #19d3cc; --accent-texte: #3fe0d9; --accent-fort: #19d3cc;
    --ok: #4ade80; --attention: #fbbf24; --panne: #f87171; --logo-ink: #dbe6f2; --logo-accent: #19d3cc; --logo-fill: #13233d;
    --sur-accent: #081324;
    color-scheme: dark;
  }
}
:root[data-mode="dark"] {
  --fond: #081324; --surface: #0d1c33; --encre: #e3ebf5; --texte: #c3cfdf;
  --discret: #8a9bb3; --trait: #1f3354; --accent: #19d3cc; --accent-texte: #3fe0d9; --accent-fort: #19d3cc;
  --ok: #4ade80; --attention: #fbbf24; --panne: #f87171; --logo-ink: #dbe6f2; --logo-accent: #19d3cc; --logo-fill: #13233d;
  --sur-accent: #081324;
  color-scheme: dark;
}

/* ↯ /ossature ↯ (fin de l'extrait pour le looking glass) */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 1rem/1.6 var(--police);
  font-variant-numeric: tabular-nums slashed-zero;
}
a { color: var(--accent-texte); text-underline-offset: .18em; }
a:hover { color: var(--encre); }
:focus-visible { outline: 3px solid var(--accent-fort); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3 { color: var(--encre); line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(1.75rem, 1.1rem + 2.4vw, 2.6rem); font-weight: 600; letter-spacing: -.02em; max-width: 20ch; }
h2 { font-size: 1.375rem; font-weight: 600; }
h3 { font-size: 1rem; font-weight: 600; }
/* invite root : « # » en accent pour le titre de page, discret pour les sections */
h1::before { content: "# "; color: var(--accent); }
h2::before { content: "# "; color: var(--discret); }
.addr { white-space: nowrap; }

/* --- en-tête : ↯ ossature ↯ début (extrait pour le looking glass) --- */
.evitement { position: absolute; left: -999px; }
.evitement:focus { left: 1rem; top: 1rem; background: var(--surface); padding: .5rem 1rem; z-index: 10; }

/* --- en-tête --- */
.entete {
  display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
  max-width: 76rem; margin: 0 auto; padding: 1rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--trait);
  font: 1rem/1.6 var(--police);
  font-variant-numeric: tabular-nums slashed-zero;
}
.marque { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.picto { width: 3.4rem; height: auto; display: block; }
.mot { font: 600 1.45rem/1 var(--police); color: var(--encre); letter-spacing: -.01em; }
.mot .ix { color: var(--accent); }
.nav { display: flex; gap: .25rem 1rem; flex-wrap: wrap; flex: 1; font-size: .875rem; }
.nav a { color: var(--texte); text-decoration: none; padding: .25rem 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--encre); border-bottom-color: var(--trait); }
.nav a[aria-current="page"] { color: var(--encre); border-bottom-color: var(--accent); }
.choix-mode {
  display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0;
  color: var(--discret); background: none; cursor: pointer;
  border: 1px solid var(--trait); border-radius: var(--rayon);
}
.choix-mode[hidden] { display: none; }
.choix-mode:hover { color: var(--encre); border-color: var(--discret); }
.choix-mode svg { width: 1.15rem; height: 1.15rem; }
.choix-mode svg:not(.actif) { display: none; }

/* --- en-tête : ↯ /ossature ↯ fin --- */
main { max-width: 76rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }
section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
section + section { border-top: 1px solid var(--trait); }

/* --- hero : le schéma du LAN est l'élément marquant --- */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2rem 3rem; align-items: center; }
.chapo { font-size: 1.0625rem; max-width: 34em; }
.actions { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; margin-top: 2rem; }
.bouton {
  display: inline-block; background: var(--accent-fort); color: var(--fond); font-weight: 600;
  text-decoration: none; padding: .75rem 1.25rem; border-radius: var(--rayon);
}
.bouton:hover { background: var(--encre); color: var(--fond); }
.lien-fort { font-weight: 600; }
.hero-schema { margin: 0; }
.hero-schema figcaption { font-size: .8125rem; color: var(--discret); margin-top: .5rem; }

.topo { width: 100%; height: auto; display: block; overflow: visible; }
/* interco PIHD1–PIHD3 et ports membres : même trait */
.topo-core, .topo-link { stroke: var(--accent); stroke-width: 3.2; }
.topo-node { fill: var(--surface); stroke: var(--accent); stroke-width: 2.5; }
.topo-switch { fill: var(--surface); stroke: var(--accent); stroke-width: 1.5; }
.topo-pop { fill: var(--accent); font: 600 13px var(--police); }
.topo-label { fill: var(--texte); font: 13px var(--police); }

/* --- membres --- */
.page-titre { padding-bottom: 0; }
.liste { padding-top: 1.5rem; }
section.liste { border-top: 0; }
.filtre { display: flex; flex-direction: column; gap: .35rem; color: var(--discret); font-size: .875rem; max-width: 22rem; margin-bottom: 1.25rem; }
.filtre input {
  font: 1rem var(--police); color: var(--encre); background: var(--surface);
  border: 1px solid var(--trait); border-radius: var(--rayon); padding: .55rem .75rem;
}
.table-defile { overflow-x: auto; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--surface); }
.membres { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.membres th, .membres td { text-align: left; padding: .65rem .9rem; border-bottom: 1px solid var(--trait); white-space: nowrap; }
.membres thead th { color: var(--discret); font-weight: 600; font-size: .8125rem; background: var(--fond); position: sticky; top: 0; }
.membres tbody th { color: var(--encre); font-weight: 600; }
.membres tbody tr:last-child > * { border-bottom: 0; }
.membres tbody tr:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.membres tr.rs th { color: var(--discret); font-weight: 400; }
.etat { display: inline-flex; align-items: center; gap: .4rem; }
.etat::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.vide { color: var(--discret); padding: 1rem 0; }

/* --- pied --- */
/* --- pied : ↯ ossature ↯ début --- */
.pied { max-width: 76rem; margin: 3rem auto 0; padding: 2rem clamp(1rem, 4vw, 2.5rem); border-top: 1px solid var(--trait); color: var(--discret); font: .875rem/1.6 var(--police); font-variant-numeric: tabular-nums slashed-zero; }
.pied p { margin: .25rem 0; }
/* --- pied : ↯ /ossature ↯ fin --- */

/* --- petits écrans --- */
@media (max-width: 52rem) {
  .hero { grid-template-columns: 1fr; }
  .entete { gap: .75rem 1.5rem; }
  .nav { order: 3; flex-basis: 100%; }
  .choix-mode { margin-left: auto; }
}

/* --- ajouts du site généré --- */

/* Session RS : la pastille porte la couleur, le libellé reste en couleur de texte. */
.etat[data-etat="partielle"]::before { background: var(--attention); box-shadow: 0 0 6px var(--attention); }
.etat[data-etat="coupee"]::before, .etat[data-etat="absente"]::before { background: var(--panne); box-shadow: 0 0 6px var(--panne); }
.etat[data-etat="sans_rs"]::before, .etat[data-etat="inconnu"]::before { background: var(--discret); box-shadow: none; }
.etat[data-etat="sans_rs"]::before { visibility: hidden; }

/* Pages de contenu Markdown. */
.prose { max-width: 72ch; }
.prose h2 { margin-top: 2.2rem; }
.prose h3 { margin-top: 1.6rem; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li + li { margin-top: .35rem; }
.prose code { font-family: var(--police); color: var(--encre); background: var(--surface);
  border: 1px solid var(--trait); border-radius: var(--rayon); padding: 0 .3em; }
.prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 1rem 0; font-size: .9375rem; }
.prose th, .prose td { text-align: left; padding: .45rem .9rem .45rem 0; border-bottom: 1px solid var(--trait); }
.prose th { color: var(--discret); font-weight: 600; }

.schema-reseau { margin: 1.5rem 0 0; max-width: 46rem; }
.note { color: var(--discret); font-size: .875rem; }

/* Trafic (page Réseau) : courbes SVG générées au build. */
.trafic-actuel { display: flex; flex-wrap: wrap; gap: .5rem 3rem; margin: 1rem 0 1.5rem; }
.trafic-actuel dt { color: var(--discret); font-size: .875rem; }
.trafic-actuel dd { margin: 0; color: var(--encre); font-size: 1.35rem; font-weight: 600; }
.trafic-courbe { margin: 1.5rem 0; max-width: 52rem; }
.trafic-courbe figcaption { color: var(--discret); font-size: .875rem; margin-bottom: .4rem; }
.courbe { width: 100%; height: auto; display: block; }
.courbe-grille { stroke: var(--trait); stroke-width: 1; }
.courbe-y, .courbe-x { fill: var(--discret); font: 12px var(--police); }
.courbe-aire { fill: color-mix(in srgb, var(--accent) 18%, transparent); stroke: none; }
.courbe-ligne { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }

/* Sélecteur de plage : radios CSS, fonctionne sans JavaScript. */
.trafic-plages { position: relative; margin-top: 1rem; }
.trafic-plage-radio { position: absolute; width: 1px; height: 1px; opacity: 0; }
.trafic-onglets { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: 1rem; }
.trafic-onglets label { cursor: pointer; padding: .3rem .8rem; border: 1px solid var(--trait);
  border-radius: 999px; color: var(--discret); font-size: .875rem; }
.trafic-plage-radio:focus-visible ~ .trafic-onglets label { outline: 1px solid var(--accent); outline-offset: 2px; }
.trafic-panneau { display: none; }
#plage-24h:checked ~ .trafic-panneaux .panneau-24h,
#plage-7j:checked ~ .trafic-panneaux .panneau-7j,
#plage-30j:checked ~ .trafic-panneaux .panneau-30j,
#plage-1an:checked ~ .trafic-panneaux .panneau-1an { display: block; }
#plage-24h:checked ~ .trafic-onglets label[for="plage-24h"],
#plage-7j:checked ~ .trafic-onglets label[for="plage-7j"],
#plage-30j:checked ~ .trafic-onglets label[for="plage-30j"],
#plage-1an:checked ~ .trafic-onglets label[for="plage-1an"] { background: var(--accent); color: var(--sur-accent); border-color: var(--accent); }

/* Grille 2×2 du slide du diaporama. */
.trafic-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; margin-top: 1rem; }
.trafic-grille .trafic-courbe { margin: 0; max-width: none; }
@media (max-width: 48rem) { .trafic-grille { grid-template-columns: 1fr; } }

/* Schéma du LAN : variante verticale lisible sur téléphone. */
.topo-compacte { display: none; }
@media (max-width: 36rem) {
  .topo-large { display: none; }
  .topo-compacte { display: block; max-width: 24rem; }
}
@media (max-width: 36rem) {
  .courbe-y, .courbe-x { font-size: 20px; }
}