/* Même ambiance que l'application : monitoring électrique sobre, données en
   mono ambre, aucune couleur qui ne porte pas d'information.

   Deux teintes par couleur depuis le 20 septembre 2026 : `--amber` et `--ok`
   restent la marque — barres, pastilles, fonds — tandis que `--amber-ink` et
   `--ok-ink` portent le texte. Sur fond sombre les deux se confondent ; sur
   fond clair, l'ambre de marque tombe à 1,75:1 sur blanc, ce qui n'est pas
   lisible. Écrire la distinction ici évite d'avoir à choisir à chaque règle. */
:root {
  color-scheme: dark;
  --bg: #0f1216;
  --panel: #161b21;
  --panel2: #1b222a;
  --line: #242c35;
  --text: #e8eaed;
  --muted: #98a2ae;
  --faint: #7d8894;
  --amber: #ffb454;
  --amber-ink: #ffb454;
  --ok: #7fb069;
  --ok-ink: #7fb069;
  --on-amber: #0f1216;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --sans: Inter, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  --r: 10px;
  --r-sm: 8px;
}

/* Les polices sont servies par cette instance, jamais par un tiers : une page
   qui promet de ne rien envoyer nulle part ne peut pas faire appeler Google
   par le navigateur de chaque salarié pour dessiner ses chiffres. Sous-jeu
   latin, 78 ko en tout. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/polices/inter.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/polices/plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/polices/plex-mono-500.woff2") format("woff2");
}

/* Thème clair. D'abord réservé à l'instance d'un parc — un tableau de bord se
   projette en réunion et s'imprime —, il vaut pour tout le site depuis le 30
   septembre 2026. Le bouton pose `data-theme` sur la racine et le mémorise ;
   sans choix, la page suit la préférence de l'ordinateur. */
:root[data-theme="clair"],
:root[data-theme="clair"] body {
  color-scheme: light;
  --bg: #f3f4f6;
  --panel: #ffffff;
  --panel2: #f3f4f6;
  --line: #dce1e6;
  --text: #0f1216;
  --muted: #5a6470;
  --faint: #66717e;
  --amber-ink: #9a5300;
  --ok-ink: #467a36;
  --texte-carte: #3a424c;
  --bord-champ: #b9c1ca;
  --bord-etiquette: #e5cfae;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) body {
    color-scheme: light;
    --bg: #f3f4f6;
    --panel: #ffffff;
    --panel2: #f3f4f6;
    --line: #dce1e6;
    --text: #0f1216;
    --muted: #5a6470;
    --faint: #66717e;
    --amber-ink: #9a5300;
    --ok-ink: #467a36;
    --texte-carte: #3a424c;
    --bord-champ: #b9c1ca;
    --bord-etiquette: #e5cfae;
  }
}
/* À l'impression, toujours le clair : un fond sombre est une erreur d'encre. */
@media print {
  :root, :root body {
    color-scheme: light;
    --bg: #ffffff; --panel: #ffffff; --panel2: #f3f4f6; --line: #dce1e6;
    --text: #0f1216; --muted: #5a6470; --faint: #66717e;
    --amber-ink: #9a5300; --ok-ink: #467a36;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* Une seule largeur de page, 1180 px : l'en-tête et le pied sont au même
   endroit sur l'accueil et sur les pages de prose. Le contenu, lui, tient dans
   1 080 px, centrés dans cette largeur : 880 serraient les tableaux et les
   blocs de code sans rendre le texte plus lisible. Seul l'accueil, sur deux
   colonnes, remplit toute la largeur. */
.shell { max-width: 1180px; margin: 0 auto; padding: 40px 24px 64px; }
.shell:not(.large) > :not(header.top):not(footer) { max-width: 1080px; margin-inline: auto; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

header.top {
  display: flex;
  align-items: center;
  gap: 14px 22px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
}
header.top h1 { font-size: 20px; font-weight: 650; letter-spacing: .02em; order: 1; line-height: 1; }
/* Le titre est un lien sur la page des mentions : la mise en ligne doit tenir
   dans les deux cas, sinon la marque se décale d'une page à l'autre. */
header.top h1 span { color: var(--amber-ink); }
header.top h1 .mark { width: 28px; height: 28px; vertical-align: -7px; margin-right: 9px; }
header.top h1 a { color: inherit; text-decoration: none; }
/* L'accroche prend son rang à elle : elle ne dispute pas sa ligne à la
   navigation, qui doit rester au même endroit d'une page à l'autre. */
.sub { order: 4; flex-basis: 100%; color: var(--muted); font-size: 13px; }
/* La navigation prend la place laissée par le sous-titre, le sélecteur de
   langue reste collé à droite. */
nav.pages { order: 2; margin-left: auto; display: flex; gap: 4px; font-size: 14px; }
/* Chaque entrée est une zone cliquable entière, pas un mot souligné : la
   page courante porte un fond, ce qui se lit avant même la couleur. */
nav.pages a { color: var(--muted); text-decoration: none; padding: 6px 11px; border-radius: 7px; }
nav.pages a:hover { color: var(--text); background: var(--panel); }
nav.pages a[aria-current="page"] { color: var(--amber-ink); background: var(--panel); }

/* Le choix de langue est fait de liens, pas de boutons : chaque version a sa
   propre adresse, et c'est la seule façon qu'elle soit partageable et
   indexable. L'allure reste celle des boutons d'origine. */
.langs { order: 3; display: flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.langs a {
  font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .04em; background: none;
  color: var(--faint); text-decoration: none; padding: 5px 10px;
}
.langs a + a { border-left: 1px solid var(--line); }
.langs a:hover { color: var(--text); }
.langs a[aria-current="true"] { color: var(--amber-ink); background: var(--panel); }

/* Le sélecteur de thème, au même dessin que celui des langues et juste à côté.
   Il n'existe que sur l'instance d'un parc : le site public garde son fond
   sombre, un tableau de bord se projette et s'imprime. */
.theme { order: 3; display: none; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
body.parc .theme { display: flex; }
.theme button {
  font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .04em; background: none;
  color: var(--faint); border: 0; padding: 5px 10px; cursor: pointer;
}
.theme button + button { border-left: 1px solid var(--line); }
.theme button:hover { color: var(--text); }
.theme button[aria-pressed="true"] { color: var(--amber-ink); background: var(--panel); }
.theme button:focus-visible { outline: 2px solid var(--amber); outline-offset: -3px; }

.disclaimer { color: var(--muted); font-size: 13px; margin: 18px 0 22px; }
.empty {
  background: var(--panel); border: 1px solid var(--line); border-left: 2px solid var(--amber);
  border-radius: var(--r); padding: 14px 18px; margin-bottom: 12px;
  color: var(--text); font-size: 14px;
}

.cta { margin: 18px 0 22px; }
/* Sous un avertissement, le bouton se rapproche : l'avertissement porte déjà
   sa marge basse. Sous une carte, il garde la sienne — la carte n'en a pas. */
.disclaimer + .cta { margin-top: -8px; }
.cta a {
  display: inline-block; border: 1px solid var(--amber); border-radius: var(--r);
  padding: 9px 18px; color: var(--amber-ink); text-decoration: none; font-size: 14px;
}
.cta a:hover { background: var(--panel2); }

.hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.big {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 2px;
}
.big .label { font-size: 12px; color: var(--muted); }
.big strong { font-size: 27px; font-weight: 600; color: var(--amber-ink); letter-spacing: -.01em; }
.big .hint { font-size: 12px; color: var(--faint); }

.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px; margin-top: 12px;
}
.card h2 { font-size: 13px; font-weight: 600; color: var(--text); text-transform: uppercase; letter-spacing: .06em; }
/* Un sous-titre dans une carte se range sous son titre : plus petit, pas plus
   gros. Sans règle, le navigateur donne au h3 une taille supérieure à celle du
   h2, qui est volontairement discret ici. */
.card h3 {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); margin: 18px 0 8px;
}
.hint { font-size: 12.5px; color: var(--faint); margin-top: 3px; }

/* La marge gauche est la colonne de l'axe Y : les valeurs y vivent, jamais
   sur les barres — la première barre du graphique doit rester nue. */
#chart { margin-top: 14px; position: relative; padding-left: 46px; }
#chart svg { width: 100%; height: 160px; display: block; }
/* Chaque valeur s'aligne à droite de sa colonne, au ras de sa ligne. */
#chart .axe-y span {
  position: absolute; left: 0; width: 38px; text-align: right;
  transform: translateY(-50%);
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 10.5px; line-height: 1.3; color: var(--faint);
}
/* Les jours sous les barres. Chaque jalon est centré sous la sienne, sauf le
   premier, calé à gauche pour ne pas déborder de la carte. */
#chart .axe {
  position: relative; height: 16px; margin-top: 5px;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 10.5px; color: var(--faint);
}
#chart .axe span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
#chart .axe span.debut { transform: none; }
#chart .axe span.fin { transform: translateX(-100%); }
@media (max-width: 640px) {
  /* Les jalons sont posés pour la pleine largeur : sur un écran étroit ils se
     chevauchent, et une date sur deux garde l'échelle lisible. */
  #chart .axe span:nth-child(even) { display: none; }
}
.legend { list-style: none; display: flex; gap: 16px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.legend li { display: flex; align-items: center; gap: 6px; }
.sw { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.sw.cloud { background: var(--amber); }
.sw.local { background: var(--ok); }

table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
td { padding: 7px 0; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: none; }
td.n { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--amber-ink); }
td.k { color: var(--faint); font-size: 12px; text-align: right; }
.bar { height: 3px; background: var(--amber); border-radius: 2px; margin-top: 4px; }
.bar.local { background: var(--ok); }

/* Un total qui tient en un nombre : il se lit sans tableau autour. */
.chiffre { font-size: 22px; color: var(--ok-ink); display: block; margin-top: 8px; }

.method p { color: var(--muted); font-size: 13.5px; margin-top: 8px; }
.method p strong { color: var(--text); }
.method a { color: var(--amber-ink); }
.method h2 { margin-top: 20px; }
.method h2:first-child { margin-top: 0; }

/* Le pied est construit par le serveur depuis le registre des pages : la
   marque et son accroche, puis deux colonnes — comprendre, le projet — et une
   ligne de mentions. Neuf liens sur une seule ligne se pliaient en deux dès
   que l'écran rétrécissait, sans ordre lisible ; en colonnes, chaque lien a
   sa place et on le trouve où on l'attend. */
footer.pied {
  margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--muted);
}
.pied-grille { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 28px 40px; }
.pied-logo { font-size: 17px; font-weight: 650; letter-spacing: .02em; color: var(--text); text-decoration: none; }
.pied-logo span { color: var(--amber-ink); }
.pied-logo img { vertical-align: -5px; margin-right: 7px; }
.pied-marque p { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--faint); max-width: 34ch; }
.pied-col h2 {
  font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 10px;
}
.pied-col ul { list-style: none; }
.pied-col li { margin: 0 0 7px; }
.pied-col a { color: var(--muted); text-decoration: none; }
.pied-col a:hover { color: var(--text); }
.pied-col [aria-current="page"] { color: var(--amber-ink); }
.pied-bas {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 18px;
  margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--faint);
}
.pied-bas nav { display: flex; gap: 18px; }
.pied-bas a { color: var(--muted); text-decoration: none; }
.pied-bas a:hover { color: var(--text); }

/* Téléchargement : un bouton par paquet, lisible d'un coup d'œil. */
.dl { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.dl a {
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 10px 16px; background: var(--panel2);
  color: var(--text); text-decoration: none; font-size: 14px;
}
.dl a:hover { border-color: var(--amber-ink); }
.dl a span { font-size: 11.5px; color: var(--faint); }
.dl a.bouton { border-color: var(--amber-ink); }
.dl a.bouton span { color: var(--muted); }
/* Un magasin dont la fiche n'est pas encore publique : même place, sans lien. */
.dl .magasin-attente {
  display: flex; flex-direction: column; gap: 2px;
  border: 1px dashed var(--line); border-radius: var(--r);
  padding: 10px 16px; color: var(--muted); font-size: 14px;
}
.dl .magasin-attente span { font-size: 11.5px; color: var(--faint); }

/* Navigateurs pris en charge, page de l'extension. */
.card table.navigateurs { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.card table.navigateurs th, .card table.navigateurs td { text-align: left; padding: 9px 12px 9px 0; border-top: 1px solid var(--line); vertical-align: top; }
.card table.navigateurs thead th { border-top: 0; color: var(--muted); font-weight: 500; font-size: 12.5px; }
.card table.navigateurs tbody th { font-weight: 500; }

#tous { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13.5px; }
#tous td { padding: 9px 0; border-top: 1px solid var(--line); }
#tous tr:first-child td { border-top: 0; }
#tous td:last-child { text-align: right; }
#tous td:last-child a { color: var(--amber-ink); }
#tous .mono { color: var(--muted); }

/* Historique : le numéro de version porte la ligne, la date s'efface. */
.release h2 { display: flex; align-items: baseline; gap: 10px; font-family: var(--mono); }
.release .tag {
  font-family: var(--sans); font-style: normal; font-size: 11px;
  color: var(--amber-ink); border: 1px solid var(--amber); border-radius: 6px; padding: 1px 7px;
}
.release .quand { margin-left: auto; font-size: 12px; color: var(--faint); }
.release .notes { margin: 12px 0 0 18px; color: var(--muted); font-size: 13.5px; }
.release .notes li { margin-top: 6px; }
/* Une note « Méthode : » change le calcul : elle se lit avant de comparer. */
.release .notes li.methode { color: var(--amber-ink); }
.release + .release { margin-top: 12px; }

@media (max-width: 640px) {
  .hero { grid-template-columns: 1fr; }

  /* Deux rangs, pas trois. Le sélecteur de langue tient à côté de la marque —
     il est petit et il y a la place ; le laisser tomber sur une ligne à lui
     donnait un en-tête en escalier, et un bouton orphelin sous la navigation.
     La navigation prend alors toute la largeur du second rang. */
  header.top { gap: 10px 14px; padding-bottom: 12px; }
  .langs { order: 2; margin-left: auto; }
  nav.pages {
    order: 3;
    flex-basis: 100%;
    margin-left: 0;
    gap: 20px;
    font-size: 13.5px;
  }
  .sub { order: 4; margin-top: 2px; }
  .release .quand { margin-left: 0; flex-basis: 100%; }
  nav.pages { gap: 2px; margin-left: -11px; flex-wrap: wrap; }
  .pied-grille { grid-template-columns: 1fr 1fr; gap: 24px; }
  .pied-marque { grid-column: 1 / -1; }
}

/* ── Équivalences ──────────────────────────────────────────────────────── */
/* Une grille qui se remplit d'elle-même : le barème peut gagner une ligne sans
   toucher à la mise en page. La valeur d'abord, l'hypothèse en dernier et en
   plus petit — elle doit être lisible sans disputer la place au chiffre. */
.equivalences h3 {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); margin: 18px 0 10px;
}
.eq {
  list-style: none; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.eq li {
  background: var(--panel2); border: 1px solid var(--line); border-radius: var(--r-sm, 8px);
  padding: 11px 13px; display: flex; flex-direction: column; gap: 1px;
}
.eq strong { font-size: 19px; font-weight: 600; color: var(--amber-ink); }
.eq span { font-size: 13px; color: var(--text); }
.eq em { font-size: 11.5px; font-style: normal; color: var(--faint); }

/* L'équivalence sous le total tourne : la transition évite le saut sec d'un
   texte remplacé. Elle est neutralisée si le visiteur demande moins
   d'animations — le script cesse alors aussi de tourner. */
#cloud-equiv { transition: opacity .26s ease; }
#cloud-equiv.passe { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  #cloud-equiv { transition: none; }
}

/* Tableau des références (page des équivalences). Trois colonnes : ce à quoi on
   compare, la valeur retenue, d'où elle vient. La provenance est la colonne
   large — c'est elle qu'on vient lire. */
.bareme { table-layout: auto; }
.bareme thead th {
  text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint); border-bottom: 1px solid var(--line);
  padding: 0 12px 8px 0; vertical-align: bottom;
}
.bareme.refs thead th:nth-child(2) { white-space: nowrap; }
.bareme tbody th {
  text-align: left; font-weight: 600; color: var(--text);
  padding: 12px 12px 12px 0; vertical-align: top;
}
/* Sur la page des références, la colonne de provenance est longue et doit
   prendre la place : l'intitulé de ligne est donc borné. Ailleurs — fiches de
   service, barème des réseaux — les cellules sont courtes et le navigateur
   répartit mieux que nous. */
.bareme.refs tbody th { width: 22%; }
.bareme tbody th em {
  display: block; margin-top: 3px; font-style: normal; font-weight: 400;
  font-size: 11.5px; line-height: 1.45; color: var(--faint);
}
.bareme td { padding: 12px 12px 12px 0; vertical-align: top; color: var(--muted); }
.bareme td.mono { color: var(--amber-ink); white-space: nowrap; width: 12%; }
.bareme td:last-child { padding-right: 0; line-height: 1.55; }
.bareme tbody tr + tr th, .bareme tbody tr + tr td { border-top: 1px solid var(--line); }
/* L'étiquette d'une cellule ne sert qu'au tableau tombé en blocs, où l'en-tête
   de colonne n'est plus affiché. */
.etiq { display: none; }

@media (max-width: 640px) {
  /* Trois colonnes ne tiennent pas : la provenance passe sous la référence,
     et la valeur reste collée à son intitulé. */
  .bareme, .bareme tbody, .bareme tr { display: block; }
  .bareme thead { display: none; }
  .bareme tbody tr { padding: 14px 0; border-top: 1px solid var(--line); }
  .bareme tbody th, .bareme td { display: block; width: auto; padding: 0; border: 0; }
  .bareme td.mono { margin: 4px 0 6px; }
  .etiq { display: inline; color: var(--muted); }
}

/* Les carrefours par type d'usage. Chaque entrée est un lien entier, pas un
   titre suivi d'un « en savoir plus » : la cible du clic est la carte. */
.carrefours { list-style: none; display: grid; gap: 2px; }
.carrefours li { padding: 14px 0; border-top: 1px solid var(--line); }
.carrefours li:first-child { border-top: 0; }
.carrefours a {
  display: flex; align-items: baseline; gap: 10px; color: var(--text);
  text-decoration: none;
}
.carrefours a:hover strong { color: var(--amber-ink); }
.carrefours strong { font-size: 15px; font-weight: 600; }
.carrefours a .mono { font-size: 12px; color: var(--faint); }
.carrefours p { margin-top: 4px; font-size: 13px; line-height: 1.55; color: var(--muted); }

/* Domaines surveillés et noms de processus : des étiquettes, pas une liste à
   puces. Ce sont des identifiants, on les lit d'un coup d'œil. */
.domaines { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.domaines li {
  font-size: 12px; color: var(--muted); background: var(--panel2);
  border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px;
}

/* La chaîne de conversion : trois étapes numérotées, dans l'ordre. */
.chaine { margin: 12px 0 0 20px; display: grid; gap: 6px; font-size: 14px; color: var(--muted); }
.chaine li::marker { color: var(--amber-ink); }

/* Où aller après. Des liens en fin de page, à la même hauteur. */
.suite { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 28px; font-size: 13.5px; }
.suite a { color: var(--amber-ink); text-decoration: none; }
.suite a:hover { text-decoration: underline; }

/* Une fiche pose ses cartes elle-même : le bloc construit ne doit pas ajouter
   de boîte autour d'elles. */
[data-bloc] > .card:first-child { margin-top: 0; }

/* Les extraits à copier. Une page qui explique une installation finit toujours
   par montrer du code : il se lit en mono, et il défile plutôt que de replier
   ses lignes — une commande coupée au milieu se recopie fausse. */
.code {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.65; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 14px; margin-top: 12px; overflow-x: auto;
}

/* Les paquets : le nom d'abord, ce à quoi il sert ensuite. Le nom est un
   identifiant — il ne se coupe pas, et il garde sa colonne. */
.paquets td:first-child {
  width: 36%; color: var(--amber-ink); font-size: 12.5px;
  vertical-align: top; padding-right: 16px; white-space: nowrap;
}
.paquets td:last-child { color: var(--muted); font-size: 13px; }

@media (max-width: 640px) {
  /* Deux colonnes dont l'une ne se coupe pas ne tiennent pas : le nom passe
     au-dessus de son rôle. */
  .paquets, .paquets tbody, .paquets tr, .paquets td { display: block; }
  .paquets tr { padding: 12px 0; border-top: 1px solid var(--line); }
  .paquets tr:first-child { border-top: 0; }
  .paquets td { width: auto; padding: 0; border: 0; }
  .paquets td:last-child { margin-top: 4px; }
}


/* ── L'accueil sur deux colonnes ─────────────────────────────────────────────
   Seule cette page remplit la largeur : la colonne de droite a de quoi la
   remplir, les pages de prose non. */

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
  align-items: start;
  margin-top: 8px;
}
/* `minmax(0, 1fr)` et non `1fr` : le graphique et les tableaux ont une largeur
   propre, et une colonne de grille refuse par défaut de descendre sous celle de
   son contenu — la colonne de droite se faisait pousser hors de l'écran. */
.colonne { min-width: 0; }

/* L'édito suit la lecture des chiffres : il reste à l'écran pendant qu'on
   parcourt la colonne de gauche, sans quoi il ne serait lu qu'une fois. */
.edito { position: sticky; top: 20px; }
.edito-corps {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 2px solid var(--ok);
  border-radius: var(--r);
  padding: 18px 18px 20px;
  /* Plus haut que l'écran, il défile en lui-même plutôt que de couper sa fin. */
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.edito h2 {
  font-size: 13px; font-weight: 600; color: var(--text);
  text-transform: uppercase; letter-spacing: .06em;
}
.edito .lead { color: var(--muted); font-size: 13px; margin-top: 8px; }
.edito h3 {
  font-size: 12px; font-weight: 600; color: var(--ok-ink);
  text-transform: uppercase; letter-spacing: .05em;
  margin-top: 16px;
}
.edito p { color: var(--muted); font-size: 12.5px; line-height: 1.6; margin-top: 4px; }
.edito .lien { margin-top: 18px; }
.edito .lien a { color: var(--amber-ink); font-size: 12.5px; text-decoration: none; }
.edito .lien a:hover { text-decoration: underline; }

/* ── Le bandeau RGPD ─────────────────────────────────────────────────────────
   En vert et non en ambre : l'ambre porte les données dans toute l'interface,
   et ce bloc n'en contient aucune. */
.rgpd {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 2px solid var(--ok);
  border-radius: var(--r);
  margin-top: 22px;
}
/* Replié par défaut : les chiffres sont ce qu'on vient chercher, et un mur de
   texte au-dessus d'eux les repousse sous la ligne de flottaison. La réponse
   reste à un clic, sur la ligne qui la pose.

   `<details>` plutôt qu'un bouton scripté : l'état est natif, la ligne reste
   ouvrable au clavier et sans JavaScript, et rien à tenir en accord. */
.rgpd > summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: baseline; gap: 10px;
  padding: 15px 20px;
  font-size: 15px; font-weight: 650; color: var(--text);
}
/* Safari dessine encore son propre triangle sans cette ligne. */
.rgpd > summary::-webkit-details-marker { display: none; }
.rgpd > summary::before {
  content: "+";
  flex: none;
  color: var(--ok-ink); font-family: var(--mono); font-size: 17px; line-height: 1;
}
.rgpd[open] > summary::before { content: "−"; }
.rgpd > summary:hover { color: var(--ok-ink); }
.rgpd > summary:focus-visible { outline: 2px solid var(--ok); outline-offset: -3px; }
/* Le texte s'aligne sous le titre, pas sous le signe : la marque de pliage est
   un bouton, elle ne fait pas partie de la colonne de lecture. */
.rgpd-corps { padding: 0 20px 18px 42px; }
.rgpd-corps p { color: var(--muted); font-size: 13px; margin-top: 8px; max-width: 76ch; }
.rgpd-corps p:first-child { margin-top: 0; }
.rgpd .lien { margin-top: 12px; }
.rgpd .lien a { color: var(--ok-ink); font-size: 12.5px; text-decoration: none; }
.rgpd .lien a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .rgpd-corps { padding-left: 20px; }
}

/* ── Le filtre de période ────────────────────────────────────────────────── */
.periode {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 22px 0 14px;
}
.periode-titre {
  font-size: 12px; color: var(--faint);
  text-transform: uppercase; letter-spacing: .06em;
}
.periode-choix { display: flex; gap: 4px; }
.periode-choix button {
  font: inherit; font-size: 12.5px; cursor: pointer;
  background: none; color: var(--muted);
  border: 1px solid var(--line); border-radius: 6px; padding: 4px 12px;
}
.periode-choix button:hover { color: var(--text); border-color: var(--faint); }
/* L'état retenu est porté par `aria-pressed`, pas par une classe : l'attribut
   qui le dit aux outils d'accessibilité est aussi celui qui le dessine, les
   deux ne peuvent donc pas diverger. */
.periode-choix button[aria-pressed="true"] {
  color: var(--on-amber); background: var(--amber); border-color: var(--amber); font-weight: 600;
}
.periode-choix button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
#daily-period { color: var(--text); }

/* Le code de la zone, à côté de son nom : il est ce que l'installation a
   déclaré, et c'est lui qu'on retrouve dans le barème. */
.zone-code { color: var(--faint); font-family: var(--mono); font-size: 12px; margin-left: 6px; }

@media (max-width: 980px) {
  /* Sous cette largeur, la colonne de droite n'a plus la place d'être une
     colonne : l'édito repasse sous les chiffres, et cesse d'être collant. */
  .layout { grid-template-columns: 1fr; }
  .edito { position: static; }
  .edito-corps { max-height: none; }
}

/* ── Actives et total ────────────────────────────────────────────────────────
   La grande valeur est le total, qui ne décroît jamais : une machine
   désinstallée y reste comptée. La pastille marque celles qui remontent
   encore — le seul des deux chiffres qui dise quelque chose du présent.

   Verte et immobile. Une pastille qui clignote annonce du direct, exactement
   ce que la ligne de cadence juste au-dessus dit qu'il n'y a pas. */
.actives::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 6px;
  vertical-align: 1px;
  border-radius: 50%;
  background: var(--ok);
}

/* ── La cadence ──────────────────────────────────────────────────────────────
   Sous le filtre : c'est en choisissant une fenêtre qu'on se demande à quel
   point elle est à jour. */
.cadence {
  color: var(--faint); font-size: 12px;
  margin-bottom: 16px; max-width: 88ch;
}
.cadence #generated { color: var(--muted); }
.cadence #generated::before { content: " · "; color: var(--line); }

/* Un bloc d'exemple — une adresse, un fichier JSON, un enregistrement DNS — se
   lit dans la fonte de .mono, à la ligne, et défile plutôt que d'élargir la
   page sur un petit écran. */
pre {
  font-family: var(--mono);
  font-size: 0.85em;
  line-height: 1.5;
  white-space: pre;
  overflow-x: auto;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

/* Instance privée d'un parc. Ce que le site public montre autour des chiffres
   — sa navigation, son appel à installer, son édito, ses mentions — n'a rien à
   faire sur le tableau de bord d'un client : il n'est pas venu lire une page
   d'accueil. Le masquage est porté par le corps de page, écrit par le serveur,
   donc appliqué avant le premier rendu et sans dépendre du JavaScript. */
/* La phrase de tête de l'accueil. Elle dit en une ligne ce que des fiches
   automatiques ont décrit de travers ; elle se lit donc avant le reste, et
   sans avoir à la chercher. */
.resume {
  margin: 0 0 14px;
  font-size: 1.02rem;
  line-height: 1.5;
}

body.parc [data-public] { display: none !important; }
/* Le symétrique : ce qui n'a de sens que pour un parc, et que le site public
   ne montre jamais. L'export et la note en font partie — ils nomment une
   organisation et un effectif déclaré. */
[data-parc] { display: none; }
body.parc [data-parc] { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
body.parc .exports a {
  color: var(--amber-ink);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 7px 13px;
  font-size: 0.9rem;
  text-decoration: none;
}
/* La colonne de l'édito disparue, la grille n'en garde qu'une : sans cela, les
   tableaux resteraient serrés contre un vide de 320 px. */
body.parc .layout { grid-template-columns: minmax(0, 1fr); }

/* La carte des équivalences est un `<details>`, ouvert sur le site public et
   refermé sur l'instance d'un parc. Hors parc, elle doit se voir exactement
   comme les cartes voisines : ni marqueur, ni ligne cliquable, ni curseur qui
   promette un pliage qui n'a pas lieu d'être là. */
.equivalences > summary { list-style: none; }
.equivalences > summary::-webkit-details-marker { display: none; }
.equivalences > summary > h2 { display: inline; }
body:not(.parc) .equivalences > summary { pointer-events: none; }
body.parc .equivalences > summary {
  cursor: pointer;
  display: flex; align-items: baseline; gap: 10px;
}
body.parc .equivalences > summary::before {
  content: "+";
  flex: none;
  color: var(--amber-ink); font-family: var(--mono); font-size: 15px; line-height: 1;
}
body.parc .equivalences[open] > summary::before { content: "−"; }
body.parc .equivalences > summary:hover > h2 { color: var(--amber-ink); }
body.parc .equivalences > summary:focus-visible { outline: 2px solid var(--amber); outline-offset: -3px; }

/* Le bandeau des réserves : une carte, quatre colonnes, séparées par un trait
   plutôt que par du vide — elles se lisent ensemble, pas l'une après l'autre.
   Une colonne sans donnée disparaît et les autres se resserrent. */
.bandeau { padding: 0; overflow: hidden; }
.bandeau-tete {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 14px 20px 0;
}
.bandeau-titre {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
}
.bandeau-sous { font-size: 12.5px; color: var(--faint); }
.bandeau-cols { display: flex; }
.bcol { flex: 1 1 0; min-width: 0; padding: 14px 20px 18px; }
.bcol + .bcol { border-left: 1px solid var(--line); }
.bcol[hidden] { display: none; }
.blabel {
  font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
}
.bval { display: flex; align-items: baseline; gap: 7px; margin-top: 6px; }
.bval strong { font-size: 22px; font-weight: 500; color: var(--amber-ink); }
.bunit { font-size: 14px; color: var(--faint); }
/* La jauge redit en longueur ce que le chiffre dit déjà : elle sert à
   comparer d'un coup d'œil, pas à mesurer. D'où sa maigreur. */
.jauge { height: 4px; background: var(--line); border-radius: 2px; margin-top: 10px; }
.jauge i { display: block; height: 100%; background: var(--amber); border-radius: 2px; }
.jauge-vide { visibility: hidden; }
.bnote { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-top: 10px; }

/* En dessous de la largeur des deux colonnes, le bandeau passe en deux rangs
   de deux : quatre colonnes de 160 px donneraient des phrases en escalier. */
@media (max-width: 1099px) {
  .bandeau-cols { flex-wrap: wrap; }
  .bcol { flex: 1 1 calc(50% - 1px); }
  .bcol:nth-child(3) { border-left: 0; }
  .bcol:nth-child(3), .bcol:nth-child(4) { border-top: 1px solid var(--line); }
}
/* Sur un écran étroit, les quatre se suivent : deux colonnes de 150 px ne se
   lisent pas mieux qu'une seule. */
@media (max-width: 720px) {
  .bcol { flex: 1 1 100%; }
  .bcol + .bcol { border-left: 0; border-top: 1px solid var(--line); }
}

/* Les réserves du site public restent au-dessus des chiffres ; sur un parc,
   elles vivent dans le bandeau, et les afficher deux fois serait du bruit. */
/* Les réserves et le texte d'accueil du site public disparaissent : les
   premières vivent dans le bandeau, le second est remplacé par la mention
   permanente sous le titre du parc. */
body.parc .shell > .disclaimer { display: none; }
/* Y compris celle de dispersion, que la règle du parc affichait plus haut :
   sa place est dans le bandeau, avec les deux autres réserves. */
body.parc .shell > p.disclaimer[data-parc] { display: none; }
/* Le volet « ce que cette instance reçoit » quitte la tête de page : son texte
   est repris en pied, dans la carte de méthode. */
body.parc .shell > .rgpd { display: none; }
.method-col > h2 + p { margin-top: 8px; }
.method-col > p + p { margin-top: 8px; }
.method-col[data-parc] { display: none; }
/* La grille ne vaut que pour une carte découpée en colonnes, celle de
   l'accueil. Appliquée à une carte de prose, elle faisait de chaque titre,
   paragraphe et bloc de code une cellule, sur deux colonnes étroites. */
@media (min-width: 900px) {
  .method:has(> .method-col) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  body.parc .method { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.parc .method-col[data-parc] { display: block; }
}
.parc-tete { display: none; }
body.parc .parc-tete { display: block; margin-top: 22px; }
.parc-tete h2 { font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
.parc-mention {
  font-size: 13px; color: var(--muted); line-height: 1.55;
  margin-top: 8px; max-width: 78ch;
}

/* Le libellé de la rangée d'exports, au même dessin que celui des périodes. */
.emporter {
  font-size: 11px; color: var(--faint);
  text-transform: uppercase; letter-spacing: .06em; align-self: center;
}

/* L'ordre du tableau de bord d'un parc.
   Le site public raconte d'abord ce qu'il collecte, puis compare les chiffres à
   des choses connues : il s'adresse à quelqu'un qui découvre. Une instance
   installée s'adresse à quelqu'un qui a déjà validé le dispositif et vient
   suivre une consommation. Les chiffres et leur répartition passent donc
   devant, les équivalences et la méthode derrière, et le rappel de ce qui
   remonte descend en pied de page — il reste consultable, il ne barre plus
   l'entrée.
   Fait par `order` plutôt qu'en dupliquant la page : un second gabarit
   d'accueil divergerait du premier à la première correction. */
body.parc main.colonne { display: flex; flex-direction: column; }
body.parc .periode { order: 1; }
body.parc .cadence { order: 2; }
body.parc .hero { order: 3; }
body.parc .bandeau { order: 4; }
body.parc .exports { order: 5; }
body.parc .bloc-journalier { order: 6; }
body.parc .bloc-services { order: 7; }
body.parc .bloc-equipes { order: 8; }
body.parc .bloc-types { order: 9; }
body.parc .bloc-zones { order: 10; }
body.parc .bloc-locaux { order: 11; }
body.parc .equivalences { order: 12; }
body.parc .method { order: 13; }

/* Deux colonnes sur le tableau de bord : les répartitions se comparent mieux
   côte à côte qu'empilées sur deux écrans de haut. Ce qui commande la lecture
   — période, chiffres, bandeau, courbe — tient toute la largeur. */
@media (min-width: 1100px) {
  body.parc main.colonne {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
  }
  body.parc main.colonne > .card { margin-top: 0; }
  body.parc .periode,
  body.parc .cadence,
  body.parc .hero,
  body.parc .bandeau,
  body.parc .exports,
  body.parc .bloc-journalier,
  body.parc .method { grid-column: 1 / -1; }
  body.parc .bloc-services { grid-column: 1; }
  body.parc .bloc-equipes { grid-column: 2; }
  body.parc .bloc-types { grid-column: 1; }
  body.parc .bloc-zones { grid-column: 2; }
  body.parc .bloc-locaux { grid-column: 1; }
  body.parc .equivalences { grid-column: 2; }
  /* Un parc sans segment déclaré n'a pas de carte à mettre à côté : les
     services prennent alors toute la largeur plutôt que de laisser un trou. */
  body.parc main.colonne:has(.bloc-equipes[hidden]) .bloc-services { grid-column: 1 / -1; }
  body.parc .periode { margin: 20px 0 0; }
  body.parc .cadence { margin: 0; }
}


/* Une carte réservée au parc. La règle générale `[data-parc]` est taillée pour
   la rangée des exports, en flex ; une section a besoin d'un bloc. `hidden`
   reprend la main : un parc sans aucun segment déclaré n'a pas de carte vide à
   montrer. */
body.parc section.card[data-parc] { display: block; }
body.parc section.card[data-parc][hidden] { display: none; }
/* Même chose pour la phrase de dispersion : un paragraphe, pas une rangée. Le
   total public la calculerait tout aussi bien, mais elle répond à la question
   d'un responsable de parc — où porter l'effort — que personne ne se pose
   devant une somme mondiale. */
body.parc p.disclaimer[data-parc] { display: block; }
body.parc p.disclaimer[data-parc][hidden] { display: none; }

body.parc .shell { display: flex; flex-direction: column; }
body.parc .shell > header.top { order: 1; }
body.parc .shell > .disclaimer { order: 2; }
body.parc .shell > .empty { order: 3; }
body.parc .shell > .layout { order: 4; }
body.parc .shell > .rgpd { order: 5; margin-top: 12px; }
body.parc .shell > footer { order: 6; }

/* Entrée d'une instance privée. Le site public n'a aucun formulaire ; ces
   règles ne servent qu'à cette page-là, et restent dans la même feuille pour
   qu'un thème modifié ne laisse pas la connexion derrière lui. */
.connexion { max-width: 440px; margin: 48px auto; padding: 28px 30px 26px; }
.connexion h2 { font-size: 20px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.connexion .hint { margin-top: 10px; }
/* La page de connexion n'a ni chiffres ni navigation : son pied porte ce qui
   dit à qui on parle et ce que vaut ce qu'on va lire. */
.pied-connexion {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--line); margin-top: 28px; padding-top: 12px;
  color: var(--faint); font-size: 12px;
}
/* Le bouton d'entrée se distingue du champ : c'est la seule action de la page. */
.connexion button { border-color: var(--amber); color: var(--amber-ink); }
.connexion button:disabled { border-color: var(--line); color: var(--faint); cursor: default; }
.erreur .mono { margin-right: 4px; }
.connexion form { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.connexion label { font-size: 12px; color: var(--muted); }
.connexion input {
  background: var(--bg); color: var(--text); font-family: var(--mono); font-size: 14px;
  border: 1px solid var(--line); border-radius: 7px; padding: 9px 11px;
}
.connexion input:focus { outline: none; border-color: var(--amber-ink); }
.connexion button {
  background: var(--panel2); color: var(--text); font: inherit; font-size: 14px;
  border: 1px solid var(--line); border-radius: 7px; padding: 9px 11px; cursor: pointer;
}
.connexion button:hover { border-color: var(--amber-ink); color: var(--amber-ink); }
.erreur { color: var(--amber-ink); font-size: 13px; margin-top: 12px; }

/* Le corps `parc` range les blocs de la page par `order`, l'en-tête valant 1 et
   le pied 6. Une carte sans ordre explicite vaut 0 et passerait donc avant le
   logo — c'est ce qui arrivait à la page d'entrée. Les pages servies par le
   serveur déclarent le leur. */
body.page-connexion .shell > .card { order: 2; }

/* Comptes et accès d'une instance privée. Les formulaires empruntent les règles
   de `.connexion` ci-dessus : mêmes champs, mêmes boutons, une seule apparence
   à tenir. Ce bloc n'ajoute que ce qui n'existe pas ailleurs. */
.card form { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; max-width: 420px; }
.card label { font-size: 12px; color: var(--muted); }
.card input[type="text"], .card input[type="password"], .card select {
  background: var(--bg); color: var(--text); font-family: var(--mono); font-size: 14px;
  border: 1px solid var(--line); border-radius: 7px; padding: 9px 11px;
}
.card input:focus, .card select:focus { outline: none; border-color: var(--amber-ink); }
.card button {
  background: var(--panel2); color: var(--text); font: inherit; font-size: 13px;
  border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px; cursor: pointer;
}
.card button:hover { border-color: var(--amber-ink); color: var(--amber-ink); }
/* Les actions d'une ligne de tableau tiennent côte à côte : une par formulaire,
   parce qu'un formulaire imbriqué n'existe pas en HTML. */
.card form.en-ligne { display: inline-flex; flex-direction: row; margin: 0 6px 0 0; max-width: none; }
td.actions { text-align: right; white-space: nowrap; }
/* Ce qui ne s'affiche qu'une fois : clé du second facteur, code d'invitation.
   Assez grand pour se recopier sans erreur, assez sobre pour ne pas ressembler
   à une décoration. */
.cle-totp {
  font-size: 17px; letter-spacing: .08em; margin-top: 10px; padding: 10px 12px;
  background: var(--panel2); border: 1px solid var(--amber); border-radius: 8px;
  color: var(--amber-ink); word-break: break-all;
}
.secret { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.hint.ok { color: var(--ok-ink); }
/* Le lien vers les accès, dans l'en-tête du tableau de bord d'un parc. Absent
   du total public, qui n'a pas de comptes. */
.lien-acces { font-size: 12px; color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--line); }
.lien-acces:hover { color: var(--amber-ink); border-color: var(--amber-ink); }
/* Les tables servies par le serveur — comptes, journal, échecs — se lisent en
   colonnes alignées à gauche. Le style du site cale ses cellules à droite,
   parce qu'il n'y montre que des nombres ; ici ce sont des noms et des dates,
   et un nom cadré à droite se colle au voisin. */
.card table.registre td { text-align: left; padding-right: 18px; vertical-align: top; }
.card table.registre td:last-child { padding-right: 0; }
.card table.registre td.quand { color: var(--faint); font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.card table.registre td.cible { color: var(--faint); font-size: 12px; }
.card table.registre td.n { text-align: left; font-size: 13px; }
.card table.comptes td.actions { text-align: right; white-space: nowrap; padding-right: 0; }

/* ==========================================================================
   Refonte du site public, 30 septembre 2026.

   L'en-tête commun à toutes les pages publiques, l'accueil et la page des
   organisations. Mêmes jetons que le reste — fond encre, panneaux, ambre pour
   les chiffres et l'action principale, vert réservé à ce qui est mesuré — plus
   trois nuances que la maquette demandait. Rien de ce qui suit ne touche aux
   instances d'organisation : leur en-tête reste `header.top`, et les pages
   de la refonte portent `body.vitrine`.
   ========================================================================== */
:root {
  --texte-carte: #c3cad2;
  --bord-champ: #3a424c;
  --bord-etiquette: #3a3226;
}

/* L'en-tête public, posé par le serveur en tête de chaque page. */
header.entete {
  position: sticky; top: 0; z-index: 10;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.entete-dedans {
  max-width: 1120px; margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
}
.entete-logo { display: inline-flex; line-height: 0; margin-right: auto; }
.entete-logo img { height: 26px; width: auto; }
header.entete nav.pages { order: 0; margin-left: 0; font-size: 15px; }
header.entete nav.pages a { padding: 8px 12px; border-radius: 8px; }
header.entete .langs { order: 0; }
.entete-menu {
  display: none; min-width: 44px; min-height: 44px; padding: 0 12px;
  font: inherit; font-size: 14px; color: var(--text);
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
}

/* Sous 820 px, avec JavaScript : le logo, le bouton ambre, le menu. Les liens
   et les langues passent dessous quand on l'ouvre. Sans JavaScript, la classe
   n'est jamais posée et les liens restent visibles. */
@media (max-width: 819px) {
  .entete-dedans { gap: 10px 8px; padding: 12px 16px; }
  .entete-logo img { height: 22px; }
  .entete-telecharger { padding: 10px 12px; font-size: 14px; }
  header.entete.avec-menu .entete-menu { display: inline-block; }
  header.entete.avec-menu nav.pages,
  header.entete.avec-menu .langs { display: none; }
  header.entete.avec-menu.ouvert nav.pages {
    display: flex; flex-direction: column; flex-basis: 100%; gap: 0; order: 5;
    padding-top: 6px; border-top: 1px solid var(--line);
  }
  header.entete.avec-menu.ouvert nav.pages a {
    font-size: 17px; padding: 14px 4px; border-radius: 0; border-bottom: 1px solid var(--line);
  }
  header.entete.avec-menu.ouvert .langs { display: flex; order: 6; margin-top: 4px; }
  header.entete:not(.avec-menu) nav.pages { flex-basis: 100%; flex-wrap: wrap; order: 5; }
}

/* Le titre posé par le serveur sur les pages qui n'en avaient pas. */
.titre-page {
  font-size: clamp(34px, 6vw, 56px); font-weight: 700; line-height: 1.05; letter-spacing: -.03em;
  margin: 8px 0 4px;
}

/* Boutons. */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; border-radius: 10px; font-size: 16px; font-weight: 600;
  text-decoration: none; cursor: pointer; font-family: inherit; line-height: 1.2;
}
.bouton-principal { background: var(--amber); color: var(--on-amber); padding: 14px 24px; border: 0; }
.bouton-principal:hover { filter: brightness(1.06); }
.bouton-secondaire { background: var(--panel); color: var(--text); padding: 13px 22px; border: 1px solid var(--line); }
.bouton-secondaire:hover { border-color: var(--amber-ink); }
.bouton-contour { background: transparent; color: var(--amber-ink); padding: 13px 22px; border: 1px solid var(--amber); }
.bouton-contour:hover { background: var(--panel2); }
.entete-telecharger { padding: 10px 18px; font-size: 15px; min-height: 40px; }
/* Le point du compteur : ambre, parce que ce qu'il annonce est estimé. */
.point { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.bouton-point::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber);
}

/* Gabarit des pages de la refonte. */
body.vitrine { font-size: 15.5px; line-height: 1.6; }
.conteneur { max-width: 1120px; margin-inline: auto; padding-inline: 20px; }
.vitrine main > .bloc, .vitrine main > .bande { margin-bottom: 72px; }
.vitrine h2, .vitrine h3 { color: var(--text); }
.section-titre {
  font-size: clamp(26px, 4.5vw, 38px); font-weight: 700; letter-spacing: -.025em; line-height: 1.1;
  margin-bottom: 12px;
}
.chapeau {
  font-size: clamp(16px, 2vw, 20px); line-height: 1.55; color: var(--muted); max-width: 60ch;
}
.surtitre {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 8px;
}
.mention { font-size: 13px; color: var(--muted); margin-top: 12px; max-width: 75ch; }
.mention a, .lien { color: var(--amber-ink); }
.lien { text-decoration: none; font-weight: 500; }
.lien:hover { text-decoration: underline; }
.panneau { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.etiquette {
  display: inline-block; font-size: 12px; color: var(--amber-ink);
  border: 1px solid var(--bord-etiquette); border-radius: 999px; padding: 2px 10px;
}
.vitrine .hint { font-size: 13px; color: var(--muted); }

/* Haut de page. */
.ouverture { padding-top: clamp(48px, 9vw, 96px); margin-bottom: 72px; }
.ouverture h1 {
  font-size: clamp(40px, 8vw, 76px); font-weight: 700; line-height: 1.02; letter-spacing: -.035em;
  max-width: 14ch; text-wrap: balance; margin-bottom: 20px;
}
.exemple-impact {
  font-size: clamp(18px, 2.4vw, 24px); line-height: 1.4; font-weight: 600; color: var(--text);
  max-width: 44ch; margin-bottom: 14px;
}
.ouverture h1.titre-org { font-size: clamp(34px, 6vw, 56px); line-height: 1.05; letter-spacing: -.03em; max-width: 20ch; }
.boutons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.encart-org { margin-top: 20px; max-width: 640px; }
.encart-org a {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px;
  color: var(--text); text-decoration: none; font-size: 14.5px;
}
.encart-org a:hover { border-color: var(--amber); }
.encart-lien { color: var(--amber-ink); font-weight: 500; }

/* Onglets et choix. */
.onglets { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.onglets button {
  font: inherit; font-size: 14px; font-weight: 500; min-height: 40px; padding: 8px 16px;
  color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
}
.onglets button[aria-selected="true"], .onglets button[aria-pressed="true"] {
  background: var(--amber); color: var(--on-amber); border-color: var(--amber);
}
.choix[hidden] { display: none; }
.choix { border: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.choix legend { font-size: 13px; color: var(--muted); margin-bottom: 8px; float: left; width: 100%; }
.choix label { position: relative; cursor: pointer; }
.choix input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choix span {
  display: inline-block; padding: 8px 14px; min-height: 40px; line-height: 22px; font-size: 14px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--text);
}
.choix input:checked + span { background: var(--text); color: var(--bg); border-color: var(--text); }
.choix input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 2px; }

/* La démonstration. */
.demo-panneau { margin-top: 24px; }
.demo-saisie { display: flex; gap: 10px; margin-top: 16px; }
.demo-saisie input {
  flex: 1; min-width: 0; min-height: 48px; padding: 12px 16px; font: inherit; font-size: 16px;
  color: var(--text); background: var(--bg); border: 1px solid var(--bord-champ); border-radius: 12px;
}
.demo-saisie input:focus { outline: none; border-color: var(--amber); }
.demo-note { margin-top: 8px; }
.demo-grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 16px; margin-top: 20px;
}
.demo-sortie {
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 16px;
  min-height: 280px; display: flex; flex-direction: column; gap: 12px;
}
.demo-vide { color: var(--muted); font-size: 14px; margin: auto 0; text-align: center; }
.demo-bulle {
  align-self: flex-end; max-width: 85%; background: var(--panel2); border: 1px solid var(--line);
  border-radius: 12px 12px 2px 12px; padding: 8px 12px; font-size: 14px; overflow-wrap: anywhere;
}
.demo-reponse { font-size: 14.5px; color: var(--texte-carte); max-height: 360px; overflow-y: auto; }
.demo-reponse p + p { margin-top: 10px; }
.demo-image, .demo-video {
  position: relative; overflow: hidden; border-radius: 10px; border: 1px solid var(--line); align-self: center;
}
.demo-image { width: min(100%, 260px); aspect-ratio: 1; }
.demo-video { width: 100%; aspect-ratio: 16 / 9; }
.demo-toile {
  position: absolute; inset: -30px;
  background:
    radial-gradient(circle at 30% 35%, #ffb454 0, transparent 38%),
    radial-gradient(circle at 70% 60%, #7fb069 0, transparent 34%),
    radial-gradient(circle at 55% 25%, #98a2ae 0, transparent 30%),
    radial-gradient(circle at 25% 80%, #3a424c 0, transparent 40%),
    #161b21;
}
.demo-progression { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--amber); }
.demo-legende { font-size: 12px; color: var(--muted); text-align: center; }
.demo-statut { font-size: 13px; color: var(--muted); margin-top: auto; }
.demo-compteur { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.demo-compteur-titre { font-size: 13px; color: var(--muted); }
.demo-grammes {
  font-size: clamp(44px, 7vw, 64px); font-weight: 500; color: var(--amber-ink); line-height: 1.1;
  font-variant-numeric: tabular-nums; margin: 4px 0;
}
.demo-ligne { font-size: 14px; color: var(--texte-carte); }
.demo-unite { font-size: 13px; color: var(--muted); margin-top: 4px; min-height: 1.4em; }
.demo-eq {
  list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  margin-top: 16px;
}
.demo-eq li {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  font-size: 13px; color: var(--muted);
}
.demo-eq strong { display: block; font-size: 17px; color: var(--text); font-weight: 500; }
.demo-perspective, .demo-fourchette { font-size: 14px; color: var(--texte-carte); margin-top: 12px; }
.demo-zone-ligne { font-size: 13px; color: var(--texte-carte); margin-top: 10px; }

/* Cartes et bandes. */
.grille-cartes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px;
  margin-top: 20px;
}
.carte { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.carte h3 { font-size: 19px; font-weight: 650; margin-bottom: 8px; }
.carte p { color: var(--texte-carte); }
.bande { background: var(--panel); border-block: 1px solid var(--line); padding-block: 48px; }
.etapes { list-style: none; display: grid; gap: 16px; margin: 20px 0; max-width: 70ch; }
.etapes li { display: flex; align-items: flex-start; gap: 14px; font-size: 16px; color: var(--texte-carte); }
.pastille {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg);
  color: var(--amber-ink); font-weight: 500;
}

/* Le compteur commun, en résumé. */
.compteur-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.compteur-etat { margin-top: 12px; color: var(--muted); }
.chiffres, .graphes {
  display: grid; gap: 16px; margin-top: 20px;
}
.chiffres { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.graphes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); margin-bottom: 16px; }
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat .label { font-size: 13px; color: var(--muted); }
.stat strong { font-size: 32px; font-weight: 500; color: var(--amber-ink); letter-spacing: -.01em; }
.compteur h3 { font-size: 18px; font-weight: 650; margin-bottom: 12px; }
.barres { display: flex; align-items: flex-end; gap: 3px; height: 150px; }
.barres span { flex: 1; min-width: 2px; background: var(--amber); border-radius: 2px 2px 0 0; }
.axe { display: flex; justify-content: space-between; font-size: 12px; color: var(--faint); margin-top: 6px; }
.types { list-style: none; display: grid; gap: 10px; }
.types li { display: grid; grid-template-columns: 9em 1fr auto; align-items: center; gap: 10px; font-size: 14px; }
.types li.hint { display: block; }
.jauge { height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.jauge span { display: block; height: 100%; background: var(--amber); }
.equiv {
  list-style: none; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.equiv li { display: flex; flex-direction: column; font-size: 14px; color: var(--texte-carte); }
.equiv strong { font-size: 20px; font-weight: 500; color: var(--text); }
.equiv em { font-style: normal; font-size: 12.5px; color: var(--faint); }

/* Questions de confiance. */
.confiance details { border-bottom: 1px solid var(--line); max-width: 80ch; }
.confiance details:first-of-type { border-top: 1px solid var(--line); margin-top: 16px; }
.confiance summary {
  list-style: none; cursor: pointer; padding: 16px 32px 16px 0; font-size: 17px; font-weight: 600; position: relative;
}
.confiance summary::-webkit-details-marker { display: none; }
.confiance summary::after {
  content: "+"; position: absolute; right: 4px; top: 12px; font-size: 22px; color: var(--amber-ink);
  transition: transform .2s;
}
.confiance details[open] summary::after { transform: rotate(45deg); }
.confiance details p { color: var(--texte-carte); padding-bottom: 16px; }
.confiance > p { margin-top: 16px; }

/* Passerelle et bandeau final. */
.passerelle-dedans {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
}
.passerelle-dedans p { color: var(--texte-carte); }

/* Page des organisations. */
.org-cartes { display: grid; gap: 16px; }
.org-carte { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px 32px; }
.org-carte h2, .org-carte h3 { font-size: clamp(19px, 2.4vw, 22px); font-weight: 650; margin-top: 10px; }
.tirets { list-style: none; display: grid; gap: 10px; }
.tirets li { position: relative; padding-left: 22px; color: var(--texte-carte); }
.tirets li::before { content: "–"; position: absolute; left: 0; color: var(--amber-ink); font-family: var(--mono); }
.promesses {
  display: grid; gap: 24px; margin-top: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.promesses > div { border-top: 2px solid var(--line); padding-top: 14px; }
.promesses h3 { font-size: 18px; font-weight: 650; margin-bottom: 6px; }
.promesses p { color: var(--texte-carte); }
.promesses p + p { margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  .confiance summary::after { transition: none; }
}

/* L'en-tête et le pied de page restent sombres dans les deux thèmes : ils
   portent le logo « sombre-ambre », qui n'a pas de version claire. Les jetons
   sombres y sont redéfinis, si bien que tout ce qu'ils contiennent — menu,
   langues, bouton de thème — garde ses couleurs de fond foncé. */
header.entete, footer.pied {
  color-scheme: dark;
  --bg: #0f1216; --panel: #161b21; --panel2: #1b222a; --line: #242c35;
  --text: #e8eaed; --muted: #98a2ae; --faint: #7d8894;
  --amber-ink: #ffb454; --ok-ink: #7fb069;
  color: var(--text);
}
/* Le pied fait toute la largeur, jusqu'en bas de la page, alors qu'il est
   écrit dans le conteneur centré : un fond étendu par une ombre, rogné en
   haut seulement. */
footer.pied {
  background: var(--bg);
  box-shadow: 0 0 0 100vmax var(--bg);
  clip-path: inset(0 -100vmax -100vmax -100vmax);
  padding-bottom: 32px;
}
@media print {
  header.entete { display: none; }
  footer.pied { display: none; }
}
.pied-logo { display: inline-flex; line-height: 0; }
.pied-logo img { height: 22px; width: auto; margin: 0; vertical-align: 0; }

/* Le bouton de thème, à côté des langues. Montré par `menu.js` : sans
   JavaScript, la page suit l'ordinateur et n'a pas de bouton qui ne ferait
   rien. */
.entete-theme {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; cursor: pointer;
  color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 8px;
}
.entete-theme[hidden] { display: none; }
.entete-theme:hover { color: var(--text); border-color: var(--muted); }
@media (max-width: 819px) {
  .entete-theme { width: 44px; height: 44px; }
  header.entete.avec-menu .entete-theme { display: none; }
  header.entete.avec-menu.ouvert .entete-theme:not([hidden]) { display: inline-flex; order: 6; margin-top: 4px; }
}

/* ==========================================================================
   Les pages de fond, remises en forme le 30 septembre 2026.

   Le serveur pose `body.page page-<nom>` sur chaque page publique qui n'a pas
   été écrite pour la refonte, plus un surtitre au-dessus de son titre. Tout ce
   qui suit est rangé sous cette classe : l'instance d'un parc ne la reçoit
   jamais, et son tableau de bord garde son dessin.

   Une colonne de 760 px, alignée sur le logo plutôt que centrée ; 820 pour les
   pages faites de listes (FAQ, téléchargement, versions, services, barèmes) ;
   toute la largeur pour le compteur. Le pied reste sur la largeur du site.
   ========================================================================== */
body.page { font-size: 15.5px; line-height: 1.6; }
body.page .shell { max-width: 1120px; padding: clamp(40px, 7vw, 72px) 20px 0; }
body.page .shell:not(.large) > :not(footer):not(header.top) { max-width: 760px; margin-inline: 0; }
body.page-faq .shell:not(.large) > :not(footer):not(header.top),
body.page-telechargement .shell:not(.large) > :not(footer):not(header.top),
body.page-versions .shell:not(.large) > :not(footer):not(header.top),
body.page-services .shell:not(.large) > :not(footer):not(header.top),
body.page-equivalences .shell:not(.large) > :not(footer):not(header.top) { max-width: 820px; }
body.page .titre-page { margin: 0 0 16px; }
body.page .titre-page + .disclaimer {
  font-size: clamp(16px, 2vw, 20px); line-height: 1.55; color: var(--muted);
  margin: 0 0 36px; max-width: 62ch;
}
body.page .disclaimer { font-size: 13px; }

/* Les cartes : un panneau par section, un titre qui se lit comme un titre. */
body.page .card {
  border-radius: 14px; padding: 22px 24px; margin-top: 16px;
}
body.page .card h2 {
  font-size: clamp(19px, 2.4vw, 22px); font-weight: 650; line-height: 1.25;
  text-transform: none; letter-spacing: -.01em; color: var(--text);
}
body.page .card h3 {
  font-size: 16px; font-weight: 650; text-transform: none; letter-spacing: 0;
  color: var(--text); margin: 22px 0 6px;
}
body.page .method p, body.page .card > p:not(.hint) {
  color: var(--texte-carte); font-size: 15.5px; line-height: 1.65; margin-top: 10px;
}
body.page .method h2 { margin-top: 30px; }
body.page .method h2:first-child { margin-top: 0; }
body.page .card .hint { font-size: 13px; color: var(--muted); margin-top: 8px; }
body.page .card ul, body.page .card ol { margin: 10px 0 0 20px; color: var(--texte-carte); }
body.page .card li + li { margin-top: 6px; }

/* Tableaux clé / valeur : des lignes séparées par un filet, la valeur en mono
   ambre. Les barèmes gardent leurs colonnes. */
body.page .bareme { font-size: 14.5px; margin-top: 12px; }
body.page .bareme td { color: var(--texte-carte); }
body.page .bareme tbody th { color: var(--text); }
body.page .code { font-size: 13px; margin-top: 14px; }

/* Appel à l'action et liens de suite. */
body.page .cta a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 12px 22px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  color: var(--text); font-size: 15px; font-weight: 600;
}
body.page .cta a:hover { border-color: var(--amber-ink); background: var(--panel); }
body.page .suite { gap: 12px 24px; margin-top: 32px; font-size: 15px; }
body.page .suite a { font-weight: 500; }
body.page .rgpd { border-radius: 14px; margin-top: 16px; }

/* Questions fréquentes : un accordéon, la première ouverte. */
body.page .faq-item { border-bottom: 1px solid var(--line); }
body.page .faq-item:first-of-type { border-top: 1px solid var(--line); margin-top: 8px; }
body.page .faq-item > summary {
  list-style: none; cursor: pointer; position: relative; padding: 18px 40px 18px 0;
}
body.page .faq-item > summary::-webkit-details-marker { display: none; }
body.page .faq-item > summary h2 { display: inline; font-size: 17.5px; font-weight: 600; line-height: 1.4; }
body.page .faq-item > summary::after {
  content: "+"; position: absolute; right: 6px; top: 14px; font-size: 22px; color: var(--amber-ink);
  transition: transform .2s;
}
body.page .faq-item[open] > summary::after { transform: rotate(45deg); }
body.page .faq-item > summary:hover h2 { color: var(--amber-ink); }
body.page .faq-item > summary:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
body.page .faq-item > p { color: var(--texte-carte); padding: 0 0 20px; max-width: 70ch; }

/* Télécharger : la machine d'abord, bordée d'ambre, puis tous les systèmes,
   puis une carte par moment. */
body.page #conseille { border-color: var(--amber); }
body.page #conseille .dl a.bouton {
  background: var(--amber); color: var(--on-amber); border: 0; border-radius: 10px;
  padding: 12px 20px; font-size: 16px; font-weight: 600; min-height: 44px;
}
body.page #conseille .dl a.bouton span { color: var(--on-amber); opacity: .75; font-weight: 400; }
body.page #tous { font-size: 14.5px; }
body.page #tous td { padding: 12px 0; }
body.page .grille-cartes { margin-top: 16px; }
body.page .grille-cartes .card { margin-top: 0; }

/* Versions : une carte par version, le numéro en mono, « Méthode : » en ambre. */
body.page .release h2 { font-size: 22px; font-weight: 500; flex-wrap: wrap; }
body.page .release .tag { font-size: 12px; padding: 2px 10px; border-radius: 999px; border-color: var(--bord-etiquette); }
body.page .release .quand { font-size: 13px; }
body.page .release .notes { font-size: 14.5px; color: var(--texte-carte); }
body.page .release .notes li.methode { color: var(--texte-carte); }
body.page .release .notes li.methode strong { color: var(--amber-ink); font-weight: 600; }
body.page .release + .release { margin-top: 16px; }

/* Services reconnus : le nombre de chaque type en mono ambre. */
body.page-services .bareme td .mono { color: var(--amber-ink); font-size: 16px; }

/* Le compteur complet : son dessin en deux colonnes, les jetons de la refonte. */
body.page-total .big { border-radius: 14px; }
body.page-total .big strong { font-weight: 500; }

@media (max-width: 640px) {
  body.page .card { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  body.page .faq-item > summary::after { transition: none; }
}
body.page .retention { margin-top: 20px; font-size: 13.5px; line-height: 1.6; }

/* Édition des cartes de visite (/c/admin) : la bascule tient dans sa cellule. */
form.en-ligne { display: inline; margin-left: 8px; }
.photo-actuelle { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.connexion label.case { display: flex; gap: 8px; align-items: center; }
.connexion label.case input { width: auto; }

/* Le parc fictif d'une démonstration. Collé en haut à chaque défilement : une
   capture d'écran, même recadrée sur les chiffres, doit le porter. */
.bandeau-illustration {
  position: sticky; top: 0; z-index: 100;
  margin: 0; padding: 8px 16px;
  background: #ffb454; color: #0f1216;
  font-weight: 600; font-size: 14px; line-height: 1.4; text-align: center;
}