/* ==========================================================================
   CloudFive — état des services. Direction « Le filet ».

   Même direction artistique que cf-panel.css et que cloudfive.fr/v6, et pour
   la même raison : le site a corrigé trois fois la même erreur (.stats en
   v8.3, .socle-offres, .universe) avec à chaque fois le même commentaire —
   « on garde la structure, on retire le contenant ». Cette page part donc de
   l'arrivée de cette trajectoire :

     - aucune carte, aucune ombre sur un bloc statique
     - DEUX épaisseurs de filet, jamais trois
     - la typographie fait la hiérarchie
     - un seul accent orange par écran
     - le chiffre en grand, son unité en petit et en gris
     - rayons 16 / 10 / 8, courbe cubic-bezier(0.16, 1, 0.3, 1)
     - appui à scale(0.97) sur tout ce qui se presse

   DEUX THÈMES DANS UN SEUL FICHIER. Les panels existants ont chacun leur
   feuille (cf-panel.css clair, cf-v6.css graphite) parce qu'on choisit à la
   construction. Ici le visiteur choisit, et la bascule doit être instantanée :
   un seul jeu de classes, les jetons redéfinis sous [data-theme]. Les valeurs
   sombres sont celles de cf-v6.css, au jeton près, pour que les trois
   interfaces restent la même famille.

   Écrite à la main, servie localement : pas de Tailwind par CDN. Le brain a
   déjà mis Fastly/GitHub en bogon ; un visiteur derrière le /24 se serait
   retrouvé avec une page nue — et une page d'état illisible pendant une
   attaque, c'est l'inverse du but.
   ========================================================================== */

:root {
  /* --- Clair : le #FAFAFA du site vitrine ------------------------------
     #FFFFFF et #FAFAFA sont à 1,044:1 l'un de l'autre, soit 4,6 % de
     lumière : physiquement le même écran. Ce qui fatigue n'est pas la
     clarté mais l'étendue indifférenciée. La réponse est la structure
     (filets, chiffres, courbes), pas l'assombrissement. */
  --bg:        #FAFAFA;
  --bg-warm:   #FCFAF8;
  --surface:   #FFFFFF;
  --raised:    #FFFFFF;

  --ink:       #111113;
  --muted:     #76767B;
  --faint:     #9A9AA0;
  --ghost:     #C4C4C9;

  /* Deux épaisseurs. Pas trois. */
  --line:      rgba(17, 17, 19, 0.10);
  --line-soft: rgba(17, 17, 19, 0.06);

  --cf:        #f96e1e;
  --cf-fill:   #f96e1e;
  --cf-ink:    #d95c0f;   /* l'orange dès qu'il se pose en TEXTE */
  --cf-lite:   #ff8f3c;
  --cf-wash:   rgba(249, 110, 30, 0.09);

  --ok:        #2FB85D;
  --ok-wash:   rgba(47, 184, 93, 0.12);
  --danger:    #D2384A;
  --danger-wash: rgba(210, 56, 74, 0.11);
  --warn:      #C8881A;
  --warn-wash: rgba(200, 136, 26, 0.13);
  --info:      #3A5BC7;
  --vide:      rgba(17, 17, 19, 0.09);   /* barre de jour sans mesure */

  --r-media:   16px;
  --r-btn:     10px;
  --r-chip:    8px;

  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --gutter:    56px;
  --max:       980px;      /* page publique : une colonne de lecture */
  --max-large: 1180px;     /* console d'administration */

  color-scheme: light;
}

/* --- Sombre : les jetons de cf-v6.css, variante console graphite -------
   Règle de confort tenue de la charte : le fond n'est jamais noir, le texte
   n'est jamais blanc pur. C'est l'écart entre les deux qui fatigue, pas la
   teinte. */
:root[data-theme="dark"] {
  --bg:        #0F1217;
  --bg-warm:   #141921;
  --surface:   #141921;
  --raised:    #1A2029;

  --ink:       #DFE4EB;
  --muted:     #8C95A3;
  --faint:     #767F8D;
  --ghost:     #434C58;

  --line:      rgba(220, 230, 245, 0.085);
  --line-soft: rgba(220, 230, 245, 0.05);

  --cf:        #f96e1e;
  --cf-fill:   #f96e1e;
  --cf-ink:    #ff8f3c;   /* sur graphite c'est --cf-lite qui porte le texte */
  --cf-lite:   #ff8f3c;
  --cf-wash:   rgba(249, 110, 30, 0.12);

  /* Désaturés : ils ne doivent pas rivaliser avec l'orange. */
  --ok:        #3FBF72;
  --ok-wash:   rgba(63, 191, 114, 0.14);
  --danger:    #E05F6B;
  --danger-wash: rgba(224, 95, 107, 0.14);
  --warn:      #D9A43B;
  --warn-wash: rgba(217, 164, 59, 0.15);
  --info:      #6E8FEF;
  --vide:      rgba(220, 230, 245, 0.09);

  color-scheme: dark;
}

/* Sans choix explicite, on suit le système. Le garde :not([data-theme]) est
   indispensable : sans lui, un visiteur qui a CHOISI le clair sur une machine
   en mode sombre se verrait imposer le sombre malgré son choix. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1217; --bg-warm: #141921; --surface: #141921; --raised: #1A2029;
    --ink: #DFE4EB; --muted: #8C95A3; --faint: #767F8D; --ghost: #434C58;
    --line: rgba(220, 230, 245, 0.085); --line-soft: rgba(220, 230, 245, 0.05);
    --cf-ink: #ff8f3c; --cf-wash: rgba(249, 110, 30, 0.12);
    --ok: #3FBF72; --ok-wash: rgba(63, 191, 114, 0.14);
    --danger: #E05F6B; --danger-wash: rgba(224, 95, 107, 0.14);
    --warn: #D9A43B; --warn-wash: rgba(217, 164, 59, 0.15);
    --info: #6E8FEF; --vide: rgba(220, 230, 245, 0.09);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Pas de transition sur body : la bascule de thème la ferait traîner sur
     toute la page. Les couleurs changent d'un coup, c'est plus net. */
}

/* --- Typographie --------------------------------------------------------
   Échelle INTÉRIEURE : un titre de page d'état ne crie pas. L'accueil du
   site monte à 86px, pas une page de supervision. */

h1, h2, h3, h4 {
  margin: 0; color: var(--ink);
  font-weight: 500; letter-spacing: -0.035em; line-height: 1.12;
}
h1 { font-size: clamp(27px, 3vw, 37px); }
h2 { font-size: clamp(20px, 2.1vw, 25px); }
h3 { font-size: 17px; letter-spacing: -0.015em; }
h4 { font-size: 15px; letter-spacing: -0.01em; font-weight: 500; }

p { margin: 0; color: var(--muted); }
.lead { font-size: 15.5px; line-height: 1.55; color: var(--muted); max-width: 70ch; }
.small { font-size: 13px; color: var(--faint); }
.tiny  { font-size: 11.5px; color: var(--faint); letter-spacing: 0.04em; }

a { color: var(--cf-ink); text-decoration: none; transition: color 200ms var(--ease); }
a:hover { color: var(--cf); }

/* Ce qui fait qu'un tableau a l'air réglé. */
td, th, input, select, .num, .val, .unite { font-variant-numeric: tabular-nums; }
.mono, code, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

:focus-visible {
  outline: 2px solid var(--cf);
  outline-offset: 2px;
  border-radius: 4px;
}

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- Mise en page -------------------------------------------------------- */

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--large { max-width: var(--max-large); }
/* padding-BLOCK et non le raccourci `padding` : ces classes se portent
   toujours avec .wrap, et un raccourci de même spécificité déclaré plus bas
   remettait padding-left/right à 0 — la gouttière disparaissait et le
   contenu touchait les deux bords de l'écran, à toutes les largeurs. */
.rubrique { padding-block: clamp(28px, 3vw, 44px); }
.fil { border-top: 1px solid var(--line); }
.fil-doux { border-top: 1px solid var(--line-soft); }

/* --- En-tête -------------------------------------------------------------
   Le filet n'apparaît qu'une fois la barre collée, comme sur le site : au
   repos elle doit se fondre dans la page. */

.hd {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 24px;
  padding: 14px var(--gutter);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 260ms var(--ease);
}
.hd.colle { border-bottom-color: var(--line); }
.hd-brand { display: flex; align-items: center; gap: 10px; }
.hd-brand img { display: block; height: 32px; width: auto; }
.hd-titre { font-size: 15px; font-weight: 500; color: var(--ink); letter-spacing: -0.02em; }
.hd-nav { display: flex; gap: 4px; margin-left: auto; }
.hd-tab {
  padding: 6px 12px; border-radius: var(--r-chip); font-size: 13.5px;
  color: var(--muted); transition: color 180ms var(--ease), background 180ms var(--ease);
}
.hd-tab:hover { color: var(--ink); background: var(--cf-wash); }
.hd-tab.on { color: var(--ink); font-weight: 500; }
.hd-droite { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.hd-nav + .hd-droite { margin-left: 0; }
.hd-login { font-size: 13px; color: var(--muted); }
.hd-login b { color: var(--ink); font-weight: 500; }

/* --- Bascule de thème ----------------------------------------------------
   Deux icônes, une seule visible. Pas de libellé : l'icône dit tout, et un
   mot en plus déséquilibrerait la barre. */

.theme {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-chip);
  background: transparent; color: var(--muted); cursor: pointer;
  transition: color 180ms var(--ease), border-color 180ms var(--ease),
              transform 160ms var(--ease);
}
.theme:hover { color: var(--ink); border-color: var(--ghost); }
.theme:active { transform: scale(0.94); }
.theme svg { width: 16px; height: 16px; display: block; }
.theme .lune { display: none; }
:root[data-theme="dark"] .theme .soleil { display: none; }
:root[data-theme="dark"] .theme .lune { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme .soleil { display: none; }
  :root:not([data-theme="light"]) .theme .lune { display: block; }
}

/* --- Le verdict ----------------------------------------------------------
   Composant signature de la page : une seule phrase, en grand, qui répond à
   la seule question que se pose le visiteur. Pas de boîte — deux filets et
   une pastille. */

.verdict { padding-block: clamp(34px, 4vw, 54px) clamp(26px, 3vw, 38px); }
.verdict-ligne { display: flex; align-items: flex-start; gap: 16px; }
.verdict-pt {
  flex: none; width: 13px; height: 13px; border-radius: 50%;
  margin-top: 11px; background: var(--ok);
  box-shadow: 0 0 0 5px var(--ok-wash);
}
.verdict--panne .verdict-pt { background: var(--danger); box-shadow: 0 0 0 5px var(--danger-wash); }
.verdict--degrade .verdict-pt { background: var(--warn); box-shadow: 0 0 0 5px var(--warn-wash); }
.verdict--inconnu .verdict-pt { background: var(--ghost); box-shadow: 0 0 0 5px var(--line-soft); }
.verdict h1 { max-width: 20ch; }
.verdict .lead { margin-top: 10px; }

/* La pastille respire, mais seulement quand tout va bien : une page en panne
   ne doit pas scintiller, ça ajoute de l'anxiété à une mauvaise nouvelle. */
@media (prefers-reduced-motion: no-preference) {
  .verdict:not(.verdict--panne):not(.verdict--degrade) .verdict-pt {
    animation: pouls 2.8s var(--ease) infinite;
  }
}
@keyframes pouls {
  0%, 100% { box-shadow: 0 0 0 5px var(--ok-wash); }
  50%      { box-shadow: 0 0 0 9px transparent; }
}

/* --- Bandeau de chiffres -------------------------------------------------
   Repris de cloudfive.fr/v6 : pas de boîte, deux filets, des séparateurs
   verticaux. Le chiffre avant son libellé. */

.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.stat { padding: 20px 0 20px 22px; border-left: 1px solid var(--line-soft); }
.stat:first-child { padding-left: 0; border-left: 0; }
.stat-n { font-size: clamp(27px, 2.8vw, 34px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.unite { font-size: 14px; color: var(--faint); margin-left: 3px; letter-spacing: 0; }
.stat-l { margin-top: 7px; font-size: 12.5px; color: var(--faint); }
.stat--ok .stat-n { color: var(--ok); }
.stat--danger .stat-n { color: var(--danger); }
.stat--cf .stat-n { color: var(--cf-ink); }

/* --- Groupes et composants ----------------------------------------------- */

.groupe { padding: 24px 0; border-top: 1px solid var(--line); }
.groupe:first-of-type { border-top: 0; }
.groupe-tete {
  display: flex; align-items: baseline; gap: 12px;
  width: 100%; padding: 0; margin-bottom: 4px;
  background: none; border: 0; color: inherit; font: inherit;
  text-align: left; cursor: pointer;
}
.groupe-tete h2 { font-size: 17px; letter-spacing: -0.015em; }
.groupe-tete .small { margin-left: auto; }
.groupe-chev {
  flex: none; width: 14px; height: 14px; color: var(--faint);
  transition: transform 260ms var(--ease);
}
.groupe[data-ouvert="0"] .groupe-chev { transform: rotate(-90deg); }
.groupe[data-ouvert="0"] .groupe-corps { display: none; }
.groupe-corps { margin-top: 10px; }

.compo {
  display: grid;
  grid-template-columns: minmax(130px, 1.1fr) minmax(0, 2.4fr) auto;
  align-items: center; gap: 18px;
  padding: 11px 0; border-top: 1px solid var(--line-soft);
}
.compo:first-child { border-top: 0; }
.compo-nom { display: flex; align-items: center; gap: 9px; min-width: 0; }
.compo-nom span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14.5px; color: var(--ink);
}
.compo-nom a { color: var(--ink); }
.compo-nom a:hover { color: var(--cf-ink); }
.compo-taux { font-size: 13px; color: var(--muted); white-space: nowrap; }

.pt {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok);
}
.pt--panne    { background: var(--danger); }
.pt--degrade  { background: var(--warn); }
.pt--pause    { background: var(--ghost); }
.pt--inconnu  { background: var(--ghost); }

/* --- Le damier des 90 jours ---------------------------------------------
   Une barre par jour. Des flex plutôt qu'une grille : la dernière barre
   touche le bord droit quel que soit le nombre de jours réellement mesurés,
   donc « aujourd'hui » est toujours au même endroit. */

/* Un seul enfant de grille, légende comprise : laisser sortir deux éléments
   créait une quatrième colonne dans .compo et éjectait le taux sous la ligne. */
.damier-bloc { min-width: 0; }
.damier { display: flex; gap: 2px; align-items: stretch; height: 30px; min-width: 0; }
.jour {
  flex: 1 1 0; min-width: 2px; border-radius: 2px;
  background: var(--ok);
  transition: opacity 140ms var(--ease), transform 140ms var(--ease);
}
.jour--vide    { background: var(--vide); }
.jour--panne   { background: var(--danger); }
.jour--degrade { background: var(--warn); }
.jour:hover { opacity: 0.72; transform: scaleY(1.12); }
.damier-leg {
  display: flex; justify-content: space-between;
  margin-top: 7px; font-size: 11.5px; color: var(--faint);
}
/* L'échelle de temps, une fois par groupe, alignée sur la colonne du damier :
   posée hors grille, « aujourd'hui » se collerait au bord droit de la page
   et non au-dessus de la dernière barre. */
.compo--echelle { padding: 2px 0 2px; border-top: 0; }
.compo--echelle .damier-leg { margin-top: 0; }
.compo--echelle .damier-leg span:nth-child(2) { color: var(--ghost); }

/* Sur mobile, 90 barres de 2px font une bouillie grise : on n'en montre que
   30, et on le dit — une échelle qui annonce 90 jours quand on en voit 30
   serait un mensonge discret mais réel. */
.hors-etroit { display: none; }
@media (max-width: 760px) {
  .jour--hors-mobile { display: none; }
  .hors-etroit { display: inline; }
  .compo--echelle .damier-leg span:first-child,
  .compo--echelle .damier-leg span:last-child { display: none; }
}

/* --- Courbe de temps de réponse -----------------------------------------
   SVG en ligne, tracé plein + aplat très léger. Pas de grille : deux filets
   suffisent à situer, et une grille ferait une troisième épaisseur. */

.courbe { position: relative; width: 100%; }
.courbe svg { display: block; width: 100%; height: auto; }
.courbe-trace { fill: none; stroke: var(--cf); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.courbe-aplat { fill: var(--cf-wash); stroke: none; }
.courbe-axe { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.courbe-leg { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11.5px; color: var(--faint); }
.courbe-vide { padding: 26px 0; text-align: center; color: var(--faint); font-size: 13px; }

/* Gris et non orange : la charte veut UN seul accent orange par écran, et
   dix-huit micro-courbes orange en feraient dix-huit. L'orange est réservé à
   l'action principale de la page ; le rouge reste pour ce qui est tombé. */
.spark { display: block; width: 92px; height: 24px; }
.spark path { fill: none; stroke: var(--ghost); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.spark.spark--panne path { stroke: var(--danger); }

/* --- Étiquettes ---------------------------------------------------------- */

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: var(--r-chip);
  font-size: 12px; font-weight: 500; letter-spacing: 0.01em;
  background: var(--ok-wash); color: var(--ok);
}
.tag--panne   { background: var(--danger-wash); color: var(--danger); }
.tag--degrade { background: var(--warn-wash); color: var(--warn); }
.tag--neutre  { background: var(--line-soft); color: var(--muted); }
.tag--cf      { background: var(--cf-wash); color: var(--cf-ink); }

/* --- Incidents -----------------------------------------------------------
   Une colonne de temps à gauche, un filet vertical, le récit à droite.
   C'est une chronologie : la structure doit se lire avant le texte. */

.incident { padding: 18px 0; border-top: 1px solid var(--line-soft); }
.incident:first-child { border-top: 0; }
.incident-tete { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.incident-tete h1,
.incident-tete h2,
.incident-tete h3 { flex: 1 1 auto; min-width: 0; }
.incident-quand { font-size: 12.5px; color: var(--faint); white-space: nowrap; }
.maj { position: relative; margin-top: 14px; padding-left: 20px; }
.maj::before {
  content: ""; position: absolute; left: 3px; top: 4px; bottom: 4px;
  width: 1px; background: var(--line);
}
.maj-item { position: relative; padding: 0 0 13px 0; }
.maj-item:last-child { padding-bottom: 0; }
.maj-item::before {
  content: ""; position: absolute; left: -20px; top: 7px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ghost); outline: 3px solid var(--bg);
}
.maj-item--actif::before { background: var(--cf); }
.maj-etat { font-size: 12.5px; font-weight: 500; color: var(--ink); }
.maj-texte { font-size: 14px; color: var(--muted); margin-top: 2px; }
.maj-quand { font-size: 11.5px; color: var(--faint); margin-top: 3px; }

/* --- Boutons -------------------------------------------------------------
   Appui à scale(0.97) sur tout ce qui se presse : c'est dans la charte, et
   c'est ce qui donne l'impression que l'interface répond. */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 17px; border-radius: var(--r-btn);
  border: 1px solid transparent; background: var(--cf-fill); color: #fff;
  font: inherit; font-size: 14px; font-weight: 500; line-height: 1.2;
  cursor: pointer; text-decoration: none;
  transition: background 180ms var(--ease), color 180ms var(--ease),
              border-color 180ms var(--ease), transform 140ms var(--ease);
}
.btn:hover { background: #e8631a; color: #fff; }
.btn:active { transform: scale(0.97); }
.btn-quiet { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-quiet:hover { background: var(--cf-wash); border-color: var(--ghost); color: var(--ink); }
.btn-danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger-wash); color: var(--danger); }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* --- Formulaires ---------------------------------------------------------- */

.champ { display: block; margin-bottom: 15px; }
.champ > span { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 5px; }
.champ .small { margin-top: 5px; display: block; }
input[type=text], input[type=password], input[type=number], input[type=url],
input[type=email], select, textarea {
  width: 100%; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: var(--r-btn);
  background: var(--raised); color: var(--ink);
  font: inherit; font-size: 14px;
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--cf);
  box-shadow: 0 0 0 3px var(--cf-wash);
}
textarea { min-height: 92px; resize: vertical; line-height: 1.55; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 18px; }
@media (max-width: 640px) { .duo, .trio { grid-template-columns: 1fr; } }

.bascule { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: 14px; }
.bascule input { width: auto; margin: 0; accent-color: var(--cf); }

/* --- Tableaux ------------------------------------------------------------- */

.liste { width: 100%; border-collapse: collapse; }
.liste th {
  text-align: left; font-size: 11.5px; font-weight: 500; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--faint);
  padding: 0 14px 9px 0; border-bottom: 1px solid var(--line);
}
.liste td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line-soft); font-size: 14px; vertical-align: middle; }
.liste tr:last-child td { border-bottom: 0; }
.liste .droite, .liste th.droite { text-align: right; padding-right: 0; }
/* Une colonne alignée à droite n'a pas de marge à droite : sans marge à
   GAUCHE, son titre vient toucher celui de la colonne précédente, et on lit
   « RÉPONSE6 H ». */
.liste th.droite, .liste td.droite { padding-left: 18px; }
.liste td.droite + td, .liste th.droite + th { padding-left: 18px; }
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --- Messages ------------------------------------------------------------- */

.flash {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 15px; margin-bottom: 18px;
  border-radius: var(--r-btn); border: 1px solid var(--line);
  font-size: 14px; color: var(--ink);
}
.flash--ok { border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: var(--ok-wash); }
.flash--err { border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: var(--danger-wash); }
.vide { padding: 34px 0; text-align: center; color: var(--faint); font-size: 14px; }

/* --- Pied ----------------------------------------------------------------- */

.pied { padding: 26px 0 40px; border-top: 1px solid var(--line); margin-top: 30px; }
.pied-ligne { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--faint); }
.pied-ligne a { color: var(--muted); }
.pied-ligne a:hover { color: var(--cf-ink); }
.pied-ligne .droite { margin-left: auto; }

/* --- Connexion ------------------------------------------------------------ */

.connexion { min-height: 72vh; display: grid; place-items: center; padding: 40px var(--gutter); }
.connexion form { width: 100%; max-width: 340px; }
.connexion h1 { font-size: 25px; margin-bottom: 6px; }
.connexion .lead { margin-bottom: 24px; font-size: 14px; }

/* --- Apparition ----------------------------------------------------------
   Discrète et une seule fois : une page d'état se consulte en urgence, elle
   ne doit pas faire attendre. */

@media (prefers-reduced-motion: no-preference) {
  .apparait { animation: monte 520ms var(--ease) both; }
  .apparait:nth-child(2) { animation-delay: 40ms; }
  .apparait:nth-child(3) { animation-delay: 80ms; }
  .apparait:nth-child(4) { animation-delay: 120ms; }
}
@keyframes monte {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* --- Infobulle du damier -------------------------------------------------- */

#bulle {
  position: fixed; z-index: 80; pointer-events: none;
  padding: 7px 11px; border-radius: var(--r-chip);
  border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
  font-size: 12.5px; line-height: 1.45; white-space: nowrap;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.14);
  opacity: 0; transform: translateY(4px);
  transition: opacity 140ms var(--ease), transform 140ms var(--ease);
}
#bulle.on { opacity: 1; transform: none; }
#bulle b { font-weight: 500; }
#bulle .small { display: block; margin-top: 1px; }

/* --- Étroit ---------------------------------------------------------------- */

@media (max-width: 820px) {
  :root { --gutter: 22px; }
  .hd { padding-inline: 22px; gap: 14px; }
  .hd-nav { gap: 0; }
  .hd-tab { padding: 6px 9px; font-size: 13px; }
  .stat { padding-left: 16px; }

  /* Deux lignes : le nom et son taux côte à côte, le damier dessous sur
     toute la largeur. Viser `.damier` ne suffit plus — il est désormais
     dans `.damier-bloc`, et c'est LUI l'enfant de la grille ; la règle
     d'avant ne s'appliquait donc à rien et le damier, coincé en colonne
     « auto », débordait de l'écran. */
  .compo { grid-template-columns: minmax(0, 1fr) auto; gap: 7px 14px; }
  .compo-nom  { grid-column: 1; }
  .compo-taux { grid-column: 2; text-align: right; }
  .compo .damier-bloc { grid-column: 1 / -1; order: 3; }

  .compo--echelle { grid-template-columns: 1fr; }
  .compo--echelle > span { display: none; }
  .compo--echelle .damier-leg { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .hd-titre { display: none; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3) { padding-left: 0; border-left: 0; }
}