/* STUDIO : feuille unique. Aucune police distante, aucun CDN.

   Direction artistique : le logo, orange neon sur noir. Le sombre est donc la maison
   de la marque, et le clair en est la traduction : meme famille de teintes, assombries
   pour rester lisibles sur fond pale.

   Trois regles tenues, parce qu'un neon mal tenu rend un tableau de bord illisible :
     1. la lueur ne sert QUE a la marque (le logo et le mot STUDIO), jamais au texte,
        jamais aux donnees ;
     2. l'orange est de la CHROME (marque, navigation, bouton principal, liens). Les
        couleurs d'etat restent vertes, ambre et rouges : si tout est orange, l'orange
        ne signale plus rien ;
     3. chaque couleur portant du texte est MESUREE, pas choisie a l'oeil, et pas
        recopiee en commentaire : « python outils/teintes.py » sort les 44 paires,
        et tests/test_design.py refuse la moindre sous 4,5:1. Un commentaire
        vieillit en silence, un test non.

   La courbe n'a qu'une teinte (--serie-1) : c'est un trait et un remplissage, jamais
   du texte, donc elle n'entre pas dans le calcul des contrastes. Les lire dans
   tests/test_design.py, qui les mesure au lieu de les affirmer.
   Rayons : 6 px pour tout conteneur et tout controle, pastilles en pleine rondeur. */

:root {
  color-scheme: light;
  --plan: #f5f1ea;
  --surface: #fffdfa;
  --surface-creuse: #f3ece2;
  --encre: #17120f;
  --encre-2: #56493f;
  --filet: #ece2d5;
  --filet-fort: #d6c7b6;
  --marque: #e2630c;            /* traits et bordures, jamais du texte : sous le seuil */
  --marque-encre: #a8460f;      /* la meme teinte, assombrie pour ecrire */
  --lien: #a8460f;
  --lueur: none;                /* pas de neon sur fond clair, il ne se verrait pas */
  --serie-1: #e2630c;
  --bon: #0ca30c;
  --attention: #fab219;
  --grave: #ec835a;
  --critique: #d03b3b;
  --bon-encre: #006300;
  --critique-encre: #a32424;
  --attention-encre: #7a5600;
  --bouton-fond: #ff8a1e;
  --bouton-encre: #17120f;
  --ombre: 0 1px 2px rgba(23, 18, 15, 0.08), 0 8px 24px rgba(23, 18, 15, 0.05);
  --r: 6px;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --plan: #0a0908;            /* noir chaud, jamais du noir pur */
    --surface: #16120e;
    --surface-creuse: #1f1913;
    --encre: #fdf6ec;
    --encre-2: #cbbbaa;
    --filet: #2a2118;
    --filet-fort: #3d3125;
    --marque: #ff8a1e;
    --marque-encre: #ffb04d;
    --lien: #ffc478;
    --lueur: 0 0 18px rgba(255, 138, 30, 0.45);
    --serie-1: #d97316;
    --bon-encre: #2fbf2f;
    --critique-encre: #f08a8a;
    --attention-encre: #fab219;
    --bouton-fond: #ff8a1e;
    --bouton-encre: #0f0d0b;    /* 8,2:1 sur l'orange */
    --ombre: 0 1px 2px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --plan: #0a0908;
  --surface: #16120e;
  --surface-creuse: #1f1913;
  --encre: #fdf6ec;
  --encre-2: #cbbbaa;
  --filet: #2a2118;
  --filet-fort: #3d3125;
  --marque: #ff8a1e;
  --marque-encre: #ffb04d;
  --lien: #ffc478;
  --lueur: 0 0 18px rgba(255, 138, 30, 0.45);
  --serie-1: #d97316;
  --bon-encre: #2fbf2f;
  --critique-encre: #f08a8a;
  --attention-encre: #fab219;
  --bouton-fond: #ff8a1e;
  --bouton-encre: #0f0d0b;
  --ombre: 0 1px 2px rgba(0, 0, 0, 0.6);
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--plan);
  color: var(--encre);
  font: 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--lien); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-style: solid; }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 20px; }
h2 { font-size: 15px; }
h3 { font-size: 13px; }
p { margin: 0 0 8px; }

/* Les colonnes de chiffres s'alignent (chasse fixe) ; les grands nombres restent
   dans la police du texte, chiffres proportionnels : c'est ce qui se lit le mieux. */
.mono, td.n, th.n { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.chiffre { font-variant-numeric: proportional-nums; }

/* Le lien d'evitement : invisible tant qu'on ne tabule pas, bien visible des
   qu'on l'atteint. Le cacher par display:none le retirerait aussi du clavier,
   ce qui reviendrait a ne pas l'avoir. */
.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 10;
  background: var(--surface);
  color: var(--lien);
  border: 1px solid var(--marque);
  border-radius: var(--r);
  padding: 8px 14px;
}
.saut-contenu:focus { left: 8px; }
/* Le contenu recoit le focus apres un saut : on GARDE son repere, sinon on
   ne sait pas ou on a atterri. Annuler un outline est ce que J04 refuse. */
#contenu:focus-visible { outline: 2px solid var(--lien); outline-offset: -4px; }

/* ------------------------------------------------------------------ ossature */

.coque { display: flex; min-height: 100dvh; align-items: stretch; }

.rail {
  width: 208px;
  flex: 0 0 208px;
  border-right: 1px solid var(--filet);
  background: var(--surface);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow-y: auto;
}

.marque { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
/* Le logo est orange neon sur NOIR : son fond fait partie du dessin. Detoure,
   il perd sa lueur sur le theme clair ; garde en carre vif, il y est dur. En
   pastille arrondie, il devient une marque posee, et sur le theme sombre son
   fond se confond presque avec la surface. Compare aux deux themes avant de
   trancher. */
.marque img {
  width: 34px;
  height: 34px;
  border-radius: var(--r);
  filter: drop-shadow(var(--lueur));
}
.marque .mot { display: flex; flex-direction: column; line-height: 1.15; }
.marque strong {
  font-size: 15px;
  letter-spacing: 0.16em;
  color: var(--marque-encre);
  text-shadow: var(--lueur);
}
.marque span { color: var(--encre-2); font-size: 11px; letter-spacing: 0.02em; }

.menu { display: flex; flex-direction: column; gap: 1px; }
.menu a {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px;
  border-radius: var(--r);
  color: var(--encre);
  text-decoration: none;
  border-left: 2px solid transparent;
}
.menu a:hover { background: var(--surface-creuse); }
.menu a[aria-current="page"] {
  background: var(--surface-creuse);
  border-left-color: var(--marque);
  color: var(--marque-encre);
  font-weight: 600;
}
.menu .compteur { font-family: var(--mono); color: var(--encre-2); font-size: 12px; }

.rail footer { margin-top: auto; display: grid; gap: 8px; font-size: 12px; color: var(--encre-2); }

.page { flex: 1 1 auto; min-width: 0; padding: 20px 24px 56px; max-width: 1400px; }
.entete { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.entete p { color: var(--encre-2); margin: 0; }

section { margin-bottom: 28px; }
.titre-bloc { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.titre-bloc p { color: var(--encre-2); font-size: 12px; margin: 0; }

/* -------------------------------------------------------------- conteneurs */

.bloc {
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--r);
  padding: 14px 16px;
}
.grille { display: grid; gap: 12px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.large-2 { grid-column: span 2; }

/* Lignes separees par un filet : moins de boites, plus de donnees lisibles. */
.rangees { display: grid; }
.rangees > * { padding: 9px 0; border-bottom: 1px solid var(--filet); }
.rangees > *:last-child { border-bottom: 0; }
.rangee { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; }
.rangee .gauche { min-width: 0; }
.rangee .titre { display: block; overflow-wrap: anywhere; }
.meta { color: var(--encre-2); font-size: 12px; }

/* ------------------------------------------------------------------ chiffres */

.chiffre { font-size: 40px; line-height: 1; font-weight: 600; letter-spacing: -0.02em; }
.chiffre.moyen { font-size: 26px; }
.chiffre.petit { font-size: 18px; }
.unite { color: var(--encre-2); font-size: 12px; }
.non-trace { color: var(--encre-2); font-style: normal; font-size: 13px; }
.delta-haut { color: var(--bon-encre); }
.delta-bas { color: var(--critique-encre); }

/* ------------------------------------------------------------------ etats */

.pastille {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--filet-fort);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 12px;
  color: var(--encre-2);
  white-space: nowrap;
}
.pastille.pret { border-color: var(--bon); color: var(--bon-encre); }
.pastille.retard { border-color: var(--critique); color: var(--critique-encre); }
.pastille.valider { border-color: var(--attention); color: var(--attention-encre); }
.pastille.haute {
  border-color: var(--bouton-fond);
  background: var(--bouton-fond);
  color: var(--bouton-encre);
}

.alerte {
  display: grid;
  grid-template-columns: 4px 1fr auto;
  gap: 12px;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--r);
  padding: 10px 12px 10px 0;
  overflow: hidden;
}
.alerte .barre { background: var(--filet-fort); align-self: stretch; }
.alerte.critical .barre { background: var(--critique); }
.alerte.serious .barre { background: var(--grave); }
.alerte.warning .barre { background: var(--attention); }
.alerte.good .barre { background: var(--bon); }
.alerte strong { font-size: 13px; }
.alerte p { margin: 2px 0 0; color: var(--encre-2); font-size: 12.5px; }
.alerte .niveau { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--encre-2); padding-right: 12px; }

.message { border-left: 3px solid var(--filet-fort); padding: 8px 12px; margin-bottom: 10px; background: var(--surface); border-radius: var(--r); }
.message.good { border-left-color: var(--bon); }
.message.warning { border-left-color: var(--attention); }
.message.critical { border-left-color: var(--critique); }

.banniere-demo {
  background: var(--surface-creuse);
  border-bottom: 1px solid var(--filet);
  padding: 7px 24px;
  font-size: 12.5px;
  color: var(--encre-2);
}

.vide { color: var(--encre-2); border: 1px dashed var(--filet-fort); border-radius: var(--r); padding: 14px; }
.vide strong { color: var(--encre); display: block; margin-bottom: 4px; }

/* ------------------------------------------------------------------ controles */

.champ { display: grid; gap: 4px; margin-bottom: 10px; }
.champ > span { font-size: 12px; color: var(--encre-2); }
.champ .aide { font-size: 11.5px; color: var(--encre-2); }
input[type="text"], input[type="number"], input[type="date"], input[type="password"], select, textarea {
  font: inherit;
  color: var(--encre);
  background: var(--surface);
  border: 1px solid var(--filet-fort);
  border-radius: var(--r);
  padding: 7px 9px;
  width: 100%;
  min-width: 0;
}
textarea { min-height: 72px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--encre-2); opacity: 1; }
:focus-visible { outline: 2px solid var(--lien); outline-offset: 1px; }

.bouton {
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--r);
  border: 1px solid var(--bouton-fond);
  background: var(--bouton-fond);
  color: var(--bouton-encre);
  padding: 7px 13px;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
}
.bouton.second { background: var(--surface); color: var(--encre); border-color: var(--filet-fort); }
.bouton.discret { background: none; border-color: transparent; color: var(--lien); padding: 4px 6px; }
.bouton:active { transform: translateY(1px); }
.bouton:disabled { opacity: 0.5; cursor: not-allowed; }
.barre-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.filtres { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-bottom: 12px; }
.filtres .champ { margin: 0; min-width: 150px; }

/* ------------------------------------------------------------------ tableaux */

.tableau { width: 100%; border-collapse: collapse; font-size: 13px; }
.tableau th { text-align: left; font-weight: 600; color: var(--encre-2); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; padding: 0 10px 6px 0; }
.tableau td { padding: 7px 10px 7px 0; border-top: 1px solid var(--filet); vertical-align: baseline; }
.tableau .n { text-align: right; padding-right: 0; }
.deroulant { margin-top: 8px; font-size: 12px; color: var(--encre-2); }
.deroulant summary { cursor: pointer; }
.cadre-defile { overflow-x: auto; }

/* ------------------------------------------------------------------- planche */

.planche { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: flex-start; }
.colonne { flex: 0 0 236px; background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r); }
.colonne > header { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 12px; border-bottom: 1px solid var(--filet); }
.colonne > header strong { font-size: 12.5px; }
.colonne > header .compteur { font-family: var(--mono); color: var(--encre-2); }
.colonne .pile { display: grid; gap: 1px; }
.carte { padding: 10px 12px; border-bottom: 1px solid var(--filet); display: grid; gap: 5px; }
.carte:last-child { border-bottom: 0; }
.carte a { color: var(--encre); text-decoration: none; font-weight: 500; }
.carte a:hover { text-decoration: underline; }
.carte .ligne { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
select.menu-etape {
  font-size: 12px;
  padding: 3px 6px;
  color: var(--encre-2);
  background: var(--surface-creuse);
  border-color: var(--filet);
}
select.menu-etape:hover { color: var(--encre); }
.colonne .vide-colonne { padding: 12px; color: var(--encre-2); font-size: 12px; }

/* ------------------------------------------------------------------ courbes */

/* La courbe porte une largeur en attribut (420 px) pour les lecteurs sans CSS ;
   le viewBox lui permet de retrecir. Sans max-width, elle poussait la page
   Audience de 78 px sur un telephone. */
.courbe { display: block; overflow: visible; max-width: 100%; }
.courbe .trait { fill: none; stroke: var(--serie-1); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.courbe .aire { fill: var(--serie-1); opacity: 0.08; stroke: none; }
.courbe .bout { fill: var(--serie-1); stroke: var(--surface); stroke-width: 2; }
.courbe .cible { stroke: var(--filet-fort); stroke-width: 1; stroke-dasharray: 3 3; }
.courbe .survol { fill: transparent; }
.courbe .survol:hover { fill: var(--encre); opacity: 0.06; }
.legende-courbe { display: flex; gap: 10px; justify-content: space-between; color: var(--encre-2); font-size: 11.5px; font-family: var(--mono); }

/* ---------------------------------------------------------------- calendrier */

.mois { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mois th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--encre-2); padding-bottom: 6px; font-weight: 600; }
.mois td { border: 1px solid var(--filet); vertical-align: top; height: 92px; padding: 5px 6px; background: var(--surface); }
.mois td.hors { background: var(--plan); }
.mois td.jour-courant { outline: 2px solid var(--marque); outline-offset: -2px; }
.mois .numero { font-family: var(--mono); font-size: 11.5px; color: var(--encre-2); }
.mois .entree { display: block; font-size: 11.5px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--encre); text-decoration: none; border-left: 2px solid var(--filet-fort); padding-left: 5px; }
.mois .entree.pub { border-left-color: var(--bon); }
.mois .entree.prev { border-left-color: var(--marque); }

/* ------------------------------------------------------------------- entree */

.porte { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.porte .marque { justify-content: center; margin-bottom: 4px; }
.porte .marque img { width: 64px; height: 64px; }
.porte form { width: min(360px, 100%); }
.porte .bloc { box-shadow: var(--ombre); }

/* --------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .coque { flex-direction: column; }
  .rail {
    width: auto;
    flex: none;
    height: auto;
    position: static;
    border-right: 0;
    border-bottom: 1px solid var(--filet);
    flex-direction: row;
    align-items: center;
    gap: 12px;
    overflow-x: auto;
    min-width: 0;
    max-width: 100%;
    padding: 10px 16px;
  }
  .rail footer { display: none; }
  /* Le menu passe en ligne : ses dix liens ne s'enroulent pas et ne doivent pas non
     plus pousser la page. Sans min-width: 0, un enfant de flex refuse de retrecir
     sous la largeur de son contenu, et c'est la PAGE qui s'elargit : mesure du
     16/09, 421 px de defilement horizontal sur les dix pages. Le rail defile a leur
     place, ce qui est le comportement voulu. */
  .menu { flex-direction: row; gap: 4px; min-width: 0; }
  .menu a { border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
  .menu a[aria-current="page"] { border-left-color: transparent; border-bottom-color: var(--marque); }
  .page { padding: 16px; }
  .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); }
  .large-2 { grid-column: auto; }
}

/* Cibles tactiles (WCAG 2.5.8) : au doigt, une cible fait au moins 24 px de cote.
   Mesure du 16/09 : 45 cibles autonomes sur 102 etaient en dessous a 375 px, la
   plus courte a 13 px. La norme EXCEPTE le lien pris dans une phrase, parce que
   l'agrandir casserait l'interligne : ne sont donc vises que les elements qui SONT
   la cible, jamais un lien au fil du texte. « pointer: coarse » attrape aussi la
   tablette en paysage, que la largeur seule laisserait passer. */
@media (max-width: 900px), (pointer: coarse) {
  summary { padding-block: 4px; }
  label.pastille { padding-block: 4px; }
  h2 > a, h3 > a, .lien-seul {
    display: inline-block;
    min-height: 24px;
    line-height: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .bouton:active { transform: none; }
}

@media print {
  .rail, .barre-actions, form { display: none; }
  body { background: #fff; }
}

/* ------------------------------------------------------- utilitaires d'espace

   La politique de securite du site interdit les styles en ligne (style-src 'self') :
   un attribut style= est bloque par le navigateur, donc les quelques reglages
   ponctuels de marge et d'alignement passent par ces classes. Elles sont peu
   nombreuses et nommees par ce qu'elles font, pas par leur valeur en pixels. */

.a-droite { text-align: right; }
.serre { margin: 0; }
.etire { flex: 1; }
.haut-6 { margin-top: 6px; }
.haut-8 { margin-top: 8px; }
.haut-10 { margin-top: 10px; }
.haut-12 { margin-top: 12px; }
.haut-20 { margin-top: 20px; }
.bas-10 { margin-bottom: 10px; }
.bas-12 { margin-bottom: 12px; }
.bas-ligne { align-items: flex-end; }
.colonne-etroite { max-width: 460px; }
/* La porte donne plus de place a la marque : le gabarit demande 64 px, mais la
   regle de l'en-tete les ramenait a 34. Sans cette ligne, l'attribut du HTML
   etait silencieusement ignore. */
.marque-porte { padding: 0 0 12px; }
.marque-porte img { width: 64px; height: 64px; }
.legende-tableau { text-align: left; padding-bottom: 8px; }
/* Un groupe de cases a cocher : un fieldset qui ne dessine pas de cadre. */
.bloc-cases { border: 0; padding: 0; margin: 0; }

/* L'apercu du message Telegram : du texte brut, tel qu'il partira. */
.apercu {
  font: 12px/1.6 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 8px 0 0;
  color: var(--encre-2);
  max-height: 260px;
  overflow-y: auto;
}

/* La recherche du rail, et les etiquettes lues par les lecteurs d'ecran sans etre vues. */
.cherche input[type="search"] { font-size: 13px; padding: 5px 8px; }
.hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@media (max-width: 900px) {
  .cherche { flex: 1 1 160px; min-width: 140px; }
}

/* Un creneau attendu que rien ne couvre : present, mais visiblement vide. */
.mois .entree.trou {
  border-left-style: dashed;
  border-left-color: var(--attention);
  color: var(--encre-2);
  font-style: italic;
}