/* GRAAL — feuille de style unique.
   Charte graphique Healshape : bleu #1A4E7E, or #FFC800, bleus clairs #BBDAE6 / #E6F1F5,
   anthracite #242C33, polices BaseNine (titres) et Jost (texte).
   Les couleurs de données sont des paliers de ces mêmes teintes, ramenés dans la bande
   de luminosité qui garantit la lisibilité en vision des couleurs déficiente. */

/* ---------- Polices de la marque ---------- */

@font-face {
  font-family: 'BaseNine';
  src: url('../fonts/basenine-regular.woff2') format('woff2'),
       url('../fonts/basenine-regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'BaseNine SmallCaps';
  src: url('../fonts/basenine-smallcaps.woff2') format('woff2'),
       url('../fonts/basenine-smallcaps.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('../fonts/jost-variable.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light;

  /* Couleurs de marque, reprises telles quelles */
  --marque:          #1A4E7E;   /* bleu Healshape */
  --marque-clair:    #BBDAE6;
  --marque-pale:     #E6F1F5;
  --accent:          #FFC800;   /* or Healshape */
  --accent-encre:    #1A4E7E;   /* texte sur l'or, comme les boutons du site */

  /* Surfaces et encres */
  --plan:            #F2F8FA;
  --surface:         #FFFFFF;
  --surface-2:       #E6F1F5;
  --encre:           #242C33;
  --encre-2:         #4F6472;
  --encre-3:         #7D93A2;
  --grille:          #DCEAF0;
  --ligne:           #BBDAE6;
  --bordure:         rgba(26, 78, 126, .14);
  --ombre:           0 1px 2px rgba(26, 78, 126, .06);

  /* Issue d'impression — validé tous-couples (ΔE CVD min 21,2) */
  --issue-succes:    #1f86de;   /* palier clair du bleu Healshape */
  --issue-arret:     #d6a700;   /* palier de l'or Healshape */
  --issue-echec:     #bd413f;
  --issue-inconnu:   #7D93A2;

  /* États machine — 4 classes chromatiques, validées tous-couples */
  --etat-attente:      #BBDAE6;
  --etat-preparation:  #7D93A2;
  --etat-marche:       #1f86de;
  --etat-achevee:      #009c89;
  --etat-interruption: #d6a700;
  --etat-defaut:       #bd413f;

  /* Courbes d'ambiance — mêmes valeurs à l'écran et dans les PDF */
  --ambiance-temperature: #1f86de;
  --ambiance-humidite:    #009c89;

  /* Série catégorielle, ordre fixe — jamais recyclé */
  --serie-1: #1f86de; --serie-2: #df6c32; --serie-3: #00b481; --serie-4: #d6a700;
  --serie-5: #de73bd; --serie-6: #1c882d; --serie-7: #654db6; --serie-8: #c74b47;

  /* Rampe séquentielle, teinte du bleu Healshape */
  --seq-250: #8cc0f5; --seq-350: #56a3ea; --seq-450: #1f86de; --seq-550: #12639f;

  --statut-bon:      #1c882d;
  --statut-attention:#d6a700;
  --statut-serieux:  #df6c32;
  --statut-critique: #bd413f;

  --rayon: 10px;
  --police: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --police-titre: 'BaseNine SmallCaps', 'BaseNine', var(--police);
  --police-marque: 'BaseNine', var(--police);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    /* Fond volontairement remonté : la barre du haut restant blanche, un gris très
       sombre trancherait trop. Les couleurs de séries ont été recalculées sur cette
       surface et y tiennent le seuil de 3:1. */
    --marque: #8CBEE2; --marque-clair: #C6DDE8; --marque-pale: #3E4854;
    --accent: #FFC800; --accent-encre: #1A2A38;
    --plan: #2B333C; --surface: #333C46; --surface-2: #3E4854;
    --encre: #F2F8FA; --encre-2: #C6DDE8; --encre-3: #9FB3C2;
    --grille: #424D59; --ligne: #4F5D6B;
    --bordure: rgba(187, 218, 230, .16);
    --ombre: 0 1px 2px rgba(0, 0, 0, .22);
    --issue-succes: #288de5; --issue-arret: #a68000; --issue-echec: #e76761; --issue-inconnu: #9FB3C2;
    --etat-attente: #4F5D6B; --etat-preparation: #9FB3C2; --etat-marche: #288de5;
    --etat-achevee: #00a692; --etat-interruption: #a68000; --etat-defaut: #e76761;
    --ambiance-temperature: #288de5; --ambiance-humidite: #00a692;
    --serie-1: #288de5; --serie-2: #df6c32; --serie-3: #00a692; --serie-4: #a68000;
    --serie-5: #cd63ad; --serie-6: #45a94e; --serie-7: #8e79e7; --serie-8: #e76761;
    --seq-250: #1a6cab; --seq-350: #2183d6; --seq-450: #288de5; --seq-550: #74b4f2;
    --statut-bon: #45a94e; --statut-attention: #a68000;
    --statut-serieux: #df6c32; --statut-critique: #e76761;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --marque: #8CBEE2; --marque-clair: #C6DDE8; --marque-pale: #3E4854;
  --accent: #FFC800; --accent-encre: #1A2A38;
  --plan: #2B333C; --surface: #333C46; --surface-2: #3E4854;
  --encre: #F2F8FA; --encre-2: #C6DDE8; --encre-3: #9FB3C2;
  --grille: #424D59; --ligne: #4F5D6B;
  --bordure: rgba(187, 218, 230, .16);
  --ombre: 0 1px 2px rgba(0, 0, 0, .22);
  --issue-succes: #288de5; --issue-arret: #a68000; --issue-echec: #e76761; --issue-inconnu: #9FB3C2;
  --etat-attente: #4F5D6B; --etat-preparation: #9FB3C2; --etat-marche: #288de5;
  --etat-achevee: #00a692; --etat-interruption: #a68000; --etat-defaut: #e76761;
  --ambiance-temperature: #288de5; --ambiance-humidite: #00a692;
  --serie-1: #288de5; --serie-2: #df6c32; --serie-3: #00a692; --serie-4: #a68000;
  --serie-5: #cd63ad; --serie-6: #45a94e; --serie-7: #8e79e7; --serie-8: #e76761;
  --seq-250: #1a6cab; --seq-350: #2183d6; --seq-450: #288de5; --seq-550: #74b4f2;
  --statut-bon: #45a94e; --statut-attention: #a68000;
  --statut-serieux: #df6c32; --statut-critique: #e76761;
}

* { box-sizing: border-box; }

/* `display` explicite sur .alerte, .legende, etc. l'emporterait sur [hidden]. */
[hidden] { display: none !important; }

/* Toutes les tailles sont exprimées en rem : la racine porte l'échelle globale.
   16 px x 1,2 = 19,2 px, soit +20 % sur l'ensemble de l'interface. */
html { font-size: 19.2px; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: .875rem;
  line-height: 1.5;
  color: var(--encre);
  background: var(--plan);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--marque); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Les titres reprennent la BaseNine SmallCaps du site ; le corps reste en Jost,
   plus lisible dans les tableaux denses. */
h1, h2 {
  font-family: var(--police-titre);
  line-height: 1.2; margin: 0 0 .5rem; font-weight: 400;
  letter-spacing: .01em; color: var(--marque);
}
h1 { font-size: 1.55rem; }
h2 { font-size: 1.12rem; }
h3 { font-size: .9rem; color: var(--encre-2); font-weight: 600; margin: 0 0 .4rem; line-height: 1.3; }

/* ---------- Ossature ---------- */

/* La barre du haut reste blanche dans les deux thèmes, comme sur healshape.com :
   le logo y garde ses couleurs de marque. Redéfinir les jetons sur .entete suffit,
   tout ce qu'elle contient les hérite. */
.entete {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .55rem 1rem;
  background: var(--barre);
  border-bottom: 1px solid rgba(26, 78, 126, .16);
  box-shadow: 0 1px 4px rgba(26, 78, 126, .10);

  --barre: #FFFFFF;
  --barre-voile: rgba(255, 255, 255, .10);
  --surface: var(--barre);
  --surface-2: #E6F1F5;
  --marque: #1A4E7E;
  --marque-pale: #E6F1F5;
  --encre: #242C33;
  --encre-2: #4F6472;
  --encre-3: #7D93A2;
  --ligne: #BBDAE6;
  --bordure: rgba(26, 78, 126, .14);
}
.entete .logo { display: flex; align-items: center; gap: .85rem; white-space: nowrap; }
.entete .logo img { height: 2.9rem; width: auto; }
.entete .logo .separateur { width: 1px; height: 2rem; background: var(--ligne); }
.entete .marque { font-family: var(--police-marque); font-size: 1.05rem; letter-spacing: .04em; color: var(--marque); }
.entete .marque span {
  display: block; font-family: var(--police); font-size: .68rem;
  letter-spacing: .01em; color: var(--encre-3);
}

/* Le logo existe en deux versions. La barre du haut étant toujours blanche, elle
   garde la version d'origine ; seule la page de connexion bascule avec le thème. */
.logo-clair  { display: block; }
.logo-sombre { display: none; }
:root[data-theme="dark"] .connexion .logo-clair  { display: none; }
:root[data-theme="dark"] .connexion .logo-sombre { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .connexion .logo-clair  { display: none; }
  :root:not([data-theme="light"]) .connexion .logo-sombre { display: block; }
}
.nav { display: flex; gap: .15rem; flex-wrap: wrap; flex: 1; }
.nav a {
  padding: .35rem .75rem; border-radius: var(--rayon);
  color: var(--encre-2); font-weight: 500; white-space: nowrap;
}
.nav a:hover { background: var(--surface-2); color: var(--marque); text-decoration: none; }
.nav a[aria-current="page"] { background: var(--marque); color: #fff; }
.entete .compte { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--encre-2); }

.contenu { max-width: 96rem; margin: 0 auto; padding: 1.2rem 1rem 3rem; }

/* Sous la barre, un dégradé étalé amortit le passage au fond de page. Il reprend
   la teinte de la barre, pour qu'un changement de l'une suive sur l'autre. */
.entete::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 3.2rem;
  background: linear-gradient(to bottom, var(--barre-voile), transparent);
  pointer-events: none;
}

/* En thème sombre, la barre passe en blanc cassé : moins frontale contre le fond,
   tout en restant nettement plus claire que le reste de l'interface. */
:root[data-theme="dark"] .entete {
  --barre: #F4F8FA;
  --barre-voile: rgba(244, 248, 250, .14);
  border-bottom-color: rgba(26, 78, 126, .26);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .entete {
    --barre: #F4F8FA;
    --barre-voile: rgba(244, 248, 250, .14);
    border-bottom-color: rgba(26, 78, 126, .26);
  }
}

/* ---------- Blocs ---------- */

.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}
.carte > h2 { display: flex; align-items: baseline; gap: .6rem; }
.carte > h2 .aide {
  font-size: .75rem; font-weight: 400; color: var(--encre-3);
  font-family: var(--police); letter-spacing: 0;
}

.grille { display: grid; gap: 1rem; }
.grille.deux  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille.quatre{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .grille.quatre { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 860px)  { .grille.deux, .grille.trois, .grille.quatre { grid-template-columns: 1fr; } }

/* ---------- Tuiles d'indicateurs ---------- */

.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.tuile {
  background: var(--surface); border: 1px solid var(--bordure);
  border-top: 3px solid var(--marque-clair);
  border-radius: var(--rayon); box-shadow: var(--ombre);
  padding: .8rem .95rem;
}
.tuile .intitule { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--encre-3); }
.tuile .intitule .marque { display: inline-block; width: .5rem; height: .5rem; border-radius: 2px; margin-right: .3rem; }
.tuile .valeur {
  font-family: var(--police-marque); font-size: 1.75rem;
  letter-spacing: .01em; margin-top: .2rem; color: var(--encre);
}
.tuile .detail { font-size: .78rem; color: var(--encre-2); }

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

.table-enveloppe { overflow-x: auto; }
table.donnees { width: 100%; border-collapse: collapse; font-size: .84rem; }
table.donnees th, table.donnees td { padding: .4rem .55rem; text-align: left; border-bottom: 1px solid var(--grille); }
table.donnees th { font-weight: 600; color: var(--encre-2); white-space: nowrap; font-size: .78rem; }
table.donnees thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-2); color: var(--marque);
  border-bottom: 1px solid var(--ligne);
}
table.donnees tbody tr:hover { background: var(--marque-pale); }
table.donnees td.num, table.donnees th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.donnees td.discret { color: var(--encre-3); }
table.donnees th a { color: inherit; }
table.donnees th a.actif { color: var(--serie-1); }

.table-compacte td, .table-compacte th { padding: .28rem .45rem; }

/* ---------- Étiquettes d'état ---------- */

.pastille {
  display: inline-flex; align-items: center; gap: .32rem;
  padding: .1rem .5rem .13rem; border-radius: 999px;
  font-size: .74rem; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--bordure); background: var(--surface-2); color: var(--encre);
}
.pastille::before { content: ""; width: .5rem; height: .5rem; border-radius: 2px; background: var(--issue-inconnu); }
.pastille.succes::before  { background: var(--issue-succes); }
.pastille.arret::before   { background: var(--issue-arret); }
.pastille.echec::before   { background: var(--issue-echec); }
.pastille.n1::before      { background: var(--statut-critique); }
.pastille.n2::before      { background: var(--statut-attention); }
.pastille.etat::before    { background: var(--serie-1); }
.pastille.systeme::before { background: var(--encre-3); }

.alerte {
  display: flex; gap: .5rem; align-items: flex-start;
  padding: .55rem .75rem; border-radius: var(--rayon); margin-bottom: .6rem;
  border: 1px solid var(--bordure); background: var(--surface-2); font-size: .86rem;
}
.alerte.succes { border-left: 3px solid var(--statut-bon); }
.alerte.erreur { border-left: 3px solid var(--statut-critique); }
.alerte.info   { border-left: 3px solid var(--serie-1); }
.alerte.attention { border-left: 3px solid var(--statut-attention); }

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

input, select, textarea, button {
  font-family: inherit; font-size: .85rem; color: var(--encre);
  background: var(--surface); border: 1px solid var(--ligne);
  border-radius: 6px; padding: .35rem .5rem;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--marque); outline-offset: 1px; }
label { font-size: .78rem; color: var(--encre-2); display: block; margin-bottom: .15rem; }
select[multiple] { min-height: 5.6rem; }

/* Bouton principal : fond or et texte bleu de marque, comme sur healshape.com. */
.bouton {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .4rem .9rem; border-radius: 6px; cursor: pointer;
  background: var(--accent); color: var(--accent-encre);
  border: 1px solid var(--accent); font-weight: 600; letter-spacing: .01em;
}
.bouton:hover { background: #E6B400; border-color: #E6B400; text-decoration: none; }
.bouton.discret {
  background: var(--surface); color: var(--marque);
  border-color: var(--ligne); font-weight: 500;
}
.bouton.discret:hover { background: var(--marque-pale); }
.bouton.danger { background: var(--statut-critique); color: #fff; border-color: var(--statut-critique); }
.bouton.danger:hover { background: #a83533; border-color: #a83533; }

.filtres { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem .75rem; align-items: start; }
/* Les boutons prennent leur propre ligne, sous les critères, quel que soit le nombre
   de colonnes que la largeur disponible permet. */
.filtres .actions {
  grid-column: 1 / -1;
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
  margin-top: .3rem; padding-top: .6rem; border-top: 1px solid var(--grille);
}
.filtres .case { display: flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--encre-2); }
.filtres .case input { width: auto; }

.jetons { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .5rem; }
.jeton {
  font-size: .75rem; padding: .1rem .5rem; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--bordure); color: var(--encre-2);
}

/* ---------- Graphiques ---------- */

.graphe { position: relative; width: 100%; height: 15rem; }
.graphe.haut { height: 18.5rem; }
.graphe.bas  { height: 10.5rem; }
.legende { display: flex; gap: .9rem; flex-wrap: wrap; font-size: .78rem; color: var(--encre-2); margin-bottom: .5rem; }
.legende span { display: inline-flex; align-items: center; gap: .3rem; }
.legende i { width: .7rem; height: .7rem; border-radius: 2px; display: inline-block; }

details.tableau-graphe { margin-top: .6rem; }
details.tableau-graphe > summary { cursor: pointer; font-size: .78rem; color: var(--encre-2); }
details.tableau-graphe > summary:hover { color: var(--encre); }

/* Barres en ligne dans les tableaux : la magnitude sans quitter la ligne. */
.barre { display: block; height: .38rem; border-radius: 0 3px 3px 0; background: var(--serie-1); min-width: 2px; }
.barre.cellule { background: var(--seq-350); }

/* ---------- Chronologie des phases ---------- */

.chrono { display: flex; width: 100%; height: 1.3rem; border-radius: 4px; overflow: hidden; border: 1px solid var(--bordure); }
.chrono div { height: 100%; }
.chrono-legende { display: flex; gap: .8rem; flex-wrap: wrap; font-size: .75rem; color: var(--encre-2); margin-top: .35rem; }

/* ---------- Fiche de lot ---------- */

dl.champs { display: grid; grid-template-columns: max-content 1fr; gap: .25rem .8rem; margin: 0; font-size: .85rem; }
dl.champs dt { color: var(--encre-3); }
dl.champs dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

.fil { font-size: .8rem; color: var(--encre-3); margin-bottom: .4rem; }
.fil a { color: var(--encre-2); }

.pagination { display: flex; gap: .3rem; align-items: center; justify-content: center; margin-top: .9rem; font-size: .82rem; }
.pagination a, .pagination span { padding: .25rem .6rem; border-radius: 6px; border: 1px solid var(--bordure); }
.pagination .courant { background: var(--marque); color: #fff; border-color: transparent; }

.vide { text-align: center; padding: 2.5rem 1rem; color: var(--encre-3); }

.connexion { max-width: 26rem; margin: 7vh auto; padding: 0 1rem; }
.connexion .carte { padding: 1.8rem; border-top: 3px solid var(--accent); }
.connexion .logo { height: 4.4rem; width: auto; margin: 0 auto 1.2rem; }

@media print {
  .entete, .filtres, .bouton, .pagination { display: none !important; }
  body { background: #fff; }
  .carte { break-inside: avoid; border-color: #ccc; }
}