/* --- Pilotage : ossature ---------------------------------------------- */
/* Trois dispositions, toutes en `auto-fit` : deux cartes côte à côte, une pleine
 * largeur pour le graphe des douze mois, puis trois. Sur téléphone tout s'empile dans
 * l'ordre des six chiffres, qui est celui du raisonnement — combien j'ai vendu, à qui,
 * quand, ce qui vient, ce que ça rapporte, ce qui revient. */

.tete-pilotage { align-items: flex-end; }

.paire,
.trio {
  display: grid;
  gap: var(--e1);
  align-items: start;
}

.paire { grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); }
.trio { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }

/* --- Pilotage : une carte de chiffre ---------------------------------- */

.chiffre {
  background: var(--surface);
  padding: clamp(18px, 2.2vw, 28px);
  display: grid;
  gap: var(--e5);
  align-content: start;
}

.chiffre-tete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e3);
  flex-wrap: wrap;
}

.chiffre-titre {
  font-size: var(--t-mini);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--titre);
}

/* Le repère — objectif, seuil, exercice comparé. Un indicateur qui montre un écart
 * sans dire à quoi laisse deviner sa propre règle. */
.chiffre-repere {
  font-size: var(--t-mini);
  color: var(--encre-pale);
}

.chiffre-valeur-ligne {
  display: flex;
  align-items: baseline;
  gap: var(--e4);
  flex-wrap: wrap;
}

.chiffre-valeur {
  font-size: clamp(38px, 4.6vw, 58px);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.9;
}

/* Les trois cartes du bas portent des chiffres plus courts et disposent de moins de
 * place : la même échelle les ferait passer à la ligne. */
.chiffre-valeur-moyen { font-size: clamp(34px, 4vw, 50px); }

/* L'accent ne dit qu'une chose ici : ce chiffre appelle une décision. Au-dessus du
 * seuil de dépendance, sur la marge la plus faible. Nulle part ailleurs. */
.chiffre-alerte { color: var(--accent-texte); }

.chiffre-precision {
  font-size: 14px;
  color: var(--encre-douce);
}

.chiffre-ecart {
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--f-bleu-texte);
}

.ecart-bas { color: var(--accent-texte); }

/* La note de lecture, saisie par Chris. Le code n'en produit jamais : une phrase
 * engendrée qui aurait l'air d'une analyse serait crue. */
.chiffre-note {
  font-size: var(--t-texte);
  color: var(--encre-douce);
  line-height: 1.5;
  border-top: 1px solid var(--trait);
  padding-top: 14px;
}

/* --- Saisie de la note ---------------------------------------------------
 *
 * L'état précédent disait « elles se saisissent dans Notion, base Notes de pilotage,
 * clé ca ». C'était une fonction morte : Chris n'ouvre pas Notion pour une phrase, et
 * une clé technique n'a rien à faire sous un chiffre.
 *
 * `<details>` fait l'ouverture nativement — il n'y a pas une ligne de JavaScript dans
 * ce projet. Fermé, le pli n'occupe qu'une ligne : c'est la condition pour qu'un écran
 * de six chiffres ne se transforme pas en formulaire. */
.note-bloc { border-top: 1px solid var(--trait); padding-top: 14px; }
.note-bloc .chiffre-note { border-top: 0; padding-top: 0; }

.note-pli { margin-top: 6px; }

.note-ouvrir {
  display: inline-block;
  font-size: var(--t-micro);
  color: var(--encre-pale);
  cursor: pointer;
  /* La cible tactile fait la hauteur d'un doigt sans occuper la place d'un bouton :
   * l'action est secondaire, elle ne doit pas concurrencer le chiffre. */
  padding: 6px 0;
  list-style: none;
}

.note-ouvrir::-webkit-details-marker { display: none; }
.note-ouvrir::before { content: "";}
.note-pli[open] .note-ouvrir { color: var(--encre-douce); }

.note-forme { display: grid; gap: 8px; margin-top: 4px; }

.note-etiquette {
  font-size: var(--t-micro);
  color: var(--encre-pale);
}

.note-champ {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--trait-moyen);
  background: var(--surface);
  color: var(--encre);
  font: inherit;
  font-size: var(--t-petit);
  line-height: 1.5;
  /* Verticalement seulement : `resize: both` laisse élargir le champ au-delà de la
   * carte, et la mise en page se casse sans qu'on comprenne d'où ça vient. */
  resize: vertical;
}

.note-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.note-aide { font-size: var(--t-micro); color: var(--encre-pale); }

/* La phrase DÉRIVÉE de la marge. Distincte de la note de Chris — un filet accent plutôt
 * qu'un filet neutre — parce qu'elle vient du calcul : la confondre avec une note
 * saisie brouillerait exactement la distinction que cet écran tient. */
.chiffre-derive {
  font-size: var(--t-texte);
  color: var(--encre);
  line-height: 1.5;
  border-top: 1px solid var(--trait);
  padding-top: 14px;
}

/* L'âge de la donnée. Ce qui remplace le « calculé à 06:00 » de la maquette : il n'y a
 * pas de traitement de nuit, les chiffres se calculent à la lecture. */
.chiffre-age {
  font-size: var(--t-mini);
  color: var(--encre-pale);
  line-height: 1.5;
}

.chiffre-pied {
  display: flex;
  justify-content: space-between;
  gap: var(--e4);
  flex-wrap: wrap;
  align-items: baseline;
}

.chiffre-vide { display: grid; gap: var(--e2); }

.chiffre-vide-titre {
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 600;
  letter-spacing: -0.03em;
}

/* --- Pilotage : la jauge du chiffre d'affaires ------------------------ */

.jauge {
  display: flex;
  height: 34px;
  gap: var(--e1);
}

.jauge-part { display: block; }

/* Le reste prend la place libre : sans objectif il n'y a pas de reste, donc pas de
 * segment — et la jauge devient une répartition entre réalisé et engagé. */
.jauge-reste { flex: 1; background: var(--jauge-vide); }

.jauge-legende {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.pastille { width: 10px; height: 10px; flex: none; }
.pastille-reste { background: var(--jauge-vide); }
.pastille-avant { background: var(--comparaison); }
.pastille.f-vert       { background: var(--f-vert); }
.pastille.f-rouge      { background: var(--f-rouge); }
.pastille.f-jaune      { background: var(--f-jaune); }
.pastille.f-neutre     { background: var(--f-neutre); }
.pastille.f-bleu-pale  { background: var(--f-bleu-terne); }
.jauge-engage.f-bleu-pale  { background: var(--f-bleu-terne); }

/* --- Pilotage : les rangs de dépendance ------------------------------- */
/* Les barres sont en proportion de la PREMIÈRE, pas du total : la question posée est
 * « à quel point la première écrase les autres ». En proportion du total, une première
 * école à 38 % donnerait une barre courte et la comparaison se perdrait. */

.rangs { display: grid; gap: 9px; }

.rang {
  display: grid;
  grid-template-columns: minmax(80px, 120px) 1fr auto;
  gap: 12px;
  align-items: center;
}

.rang-nom {
  font-size: var(--t-texte);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rang-autres { color: var(--encre-tenue); }

.rang-piste {
  display: block;
  height: 12px;
  background: var(--jauge-vide);
}

.rang-barre { display: block; height: 12px; }
.rang-tete { background: var(--accent-trait); }
.rang-suite { background: var(--comparaison-forte); }
.rang-reste { background: var(--comparaison); }

.rang-part {
  font-size: var(--t-texte);
  font-weight: 600;
  width: 42px;
  text-align: right;
}

/* --- Pilotage : les douze mois --------------------------------------- */

.colonnes {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(3px, 0.6vw, 8px);
  align-items: end;
  height: 170px;
}

.colonne-mois {
  display: grid;
  gap: 8px;
  align-content: end;
  height: 100%;
}

.colonne-valeur {
  font-size: var(--t-mini);
  text-align: center;
  color: var(--encre-tenue);
}

/* Les deux composantes empilées. La hauteur de chacune vient du bloc de géométrie ;
 * le conteneur donne l'assise et la direction. */
.colonne-empilee {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
}

.colonne-part { display: block; }
.colonne-fait { background: var(--comparaison-forte); }

/* L'engagé, plus pâle. Les derniers mois d'une année scolaire sont presque entièrement
 * engagés : les confondre avec du réalisé ferait lire un chiffre d'affaires acquis. */
.colonne-prevu { background: var(--comparaison); }

.colonnes-etiquettes {
  height: auto;
  align-items: baseline;
  border-top: 1px solid var(--trait);
  padding-top: 10px;
}

.colonne-nom {
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--encre-pale);
}

.colonne-nom-courant { color: var(--encre-douce); font-weight: 600; }

/* --- Pilotage : l'engagement comparé --------------------------------- */
/* Les deux années partagent la même échelle, sinon la comparaison ne veut rien dire —
 * c'est le défaut classique d'un graphe à deux axes. */

.paires { display: grid; gap: 12px; }

.paire-mois {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 12px;
  align-items: center;
}

.paire-nom {
  font-size: var(--t-petit);
  color: var(--encre-tenue);
}

.paire-barres { display: grid; gap: 3px; }

.paire-barre { display: block; height: 13px; }
.paire-avant { background: var(--comparaison); }

/* --- Pilotage : la marge par formateur ------------------------------- */

.marges { display: grid; gap: 14px; }

.marge { display: grid; gap: var(--e2); }

.marge-tete {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e3);
}

.marge-nom {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.marge-taux {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.marge-piste { display: flex; height: 10px; gap: var(--e1); }
.marge-part { display: block; }
.marge-cout { background: var(--comparaison); }
.marge-part.f-vert   { background: var(--f-vert); }
.marge-part.f-rouge  { background: var(--f-rouge); }
.marge-part.f-jaune  { background: var(--f-jaune); }
.marge-part.f-neutre { background: var(--f-neutre); }

.marge-detail {
  font-size: var(--t-petit);
  color: var(--encre-tenue);
}

/* --- Pilotage : la reconduction -------------------------------------- */
/* Un écusson par école de l'exercice précédent. Comptables d'un coup d'œil jusqu'à une
 * quinzaine, ce qui couvre l'activité de Chris ; au-delà le chiffre suffit et la
 * grille se resserre sans casser. */

.ecussons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18px, 1fr));
  gap: 3px;
  height: 42px;
}

.ecusson { display: block; }
.ecusson-perdu { background: var(--comparaison); }

.perdues { display: grid; gap: var(--e1); }

.perdue {
  background: var(--surface-creuse);
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  gap: var(--e3);
  align-items: baseline;
  flex-wrap: wrap;
}

.perdue-nom { font-size: 14px; }

.perdue-montant {
  font-size: var(--t-petit);
  color: var(--encre-tenue);
}

/* --- Pilotage : le détail complet par école ---------------------------
   Replié par défaut. Le bloc du haut répond à « à quel point la première écrase les
   autres » et doit rester court ; celui-ci répond à « où va le reste », et il contient
   les écoles que le premier ne peut pas montrer — celles dont le CA horaire est nul.

   Aucun script : `<details>` fait l'ouverture nativement, et l'état survit au
   rafraîchissement. */
.rangs-tout {
  margin-top: 0.9rem;
  border-top: 1px solid var(--trait);
  padding-top: 0.6rem;
}

.rangs-tout summary {
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--encre-douce);
  list-style: none;
  padding: 0.15rem 0;
}

/* Le triangle par défaut est retiré des deux côtés : WebKit a le sien. */
.rangs-tout summary::-webkit-details-marker { display: none; }

.rangs-tout summary::before {
  /* **La forme est DESSINÉE, pas écrite.** Un triangle posé en `content:`
   * dépend d'une police qu'on ne choisit pas, et il échappe à la relecture :
   * c'est ainsi qu'un crayon est devenu « ¸E » sur l'écran des notions. Trois
   * bordures font la même flèche, sans glyphe et sans espoir. */
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 0.4rem;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.12s ease;
}

.rangs-tout[open] summary::before { transform: rotate(90deg); }

.rangs-detail {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
  font-size: 0.84rem;
}

.rangs-detail th {
  text-align: left;
  font-weight: 500;
  color: var(--encre-douce);
  padding: 0.25rem 0.4rem;
  border-bottom: 1px solid var(--trait);
}

.rangs-detail td {
  padding: 0.3rem 0.4rem;
  border-bottom: 1px solid var(--trait);
}

.rangs-detail th:not(:first-child),
.rangs-nombre { text-align: right; }

.rang-etat {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.35rem;
  border-radius: 0.6rem;
  background: var(--surface-creuse);
  font-size: 0.74rem;
  color: var(--encre-douce);
}