/* ==================================================================
   COUCHE ÉDITORIALE
   ==================================================================

   Le carnet est l'almanach d'une année scolaire : cinq périodes, cinq
   chapitres. Le vocabulaire vient donc de l'imprimé — un bandeau-titre,
   un filet double, une note en marge, un relevé numéroté.

   Cette feuille est chargée après styles.css et la surcharge
   volontairement : le système (échelles, jetons, contrastes) reste la
   fondation, cette couche donne le ton.
   ================================================================== */

/* --- Bandeau-titre -------------------------------------------------- */

#entete {
  background: var(--papier);
  color: var(--encre);
  padding: var(--e6) var(--e5) 0;
}

.entete-haut {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e5);
}

.entete-titre {
  font-family: var(--titre);
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--encre);
  margin: 0;
}

.entete-sous-titre {
  display: block;
  font-family: var(--titre);
  font-weight: 400;
  font-size: 0.4em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muet);
  margin-top: var(--e2);
}

.entete-droite {
  display: flex;
  align-items: flex-end;
  gap: var(--e4);
}

.identite {
  margin: 0;
  text-align: right;
  font-family: var(--mono);
  font-size: var(--t-2xs);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muet);
  line-height: 1.8;
  white-space: nowrap;
}

.identite b {
  display: block;
  font-family: var(--titre);
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--encre);
}

/* Le geste du typographe : un filet épais sur un filet fin. */
.regle-double {
  border-top: 3px solid var(--encre);
  border-bottom: 1px solid var(--encre);
  height: 4px;
  margin-top: var(--e4);
}

/* --- Les sélecteurs deviennent des mentions, pas des pastilles ------ */

.entete-selecteurs {
  gap: var(--e4);
  margin-top: var(--e3);
  padding-bottom: var(--e3);
}

.pastille-classe,
.pastille-niveau,
.pastille-annee {
  border: 0;
  background: transparent;
  color: var(--muet);
  padding: var(--e1) 0;
  font-family: var(--mono);
  font-size: var(--t-2xs);
  letter-spacing: 0.12em;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}

.pastille-classe .nom {
  display: inline;
  font-family: var(--mono);
  font-size: var(--t-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pastille-classe[aria-pressed='true'],
.pastille-annee[aria-pressed='true'] {
  background: transparent;
  color: var(--encre);
  border-bottom-color: var(--encre);
}

.pastille-niveau[aria-pressed='true'] {
  background: transparent;
  color: var(--attention);
  border-bottom-color: var(--attention);
}

.bouton-icone {
  border: 1px solid var(--bord-fort);
  color: var(--encre);
  border-radius: 2px;
  font-size: var(--t-2xs);
}

.bouton-icone:hover {
  background: var(--encre);
  color: var(--papier);
}

/* --- Onglets : une navigation de journal, pas des boîtes ------------ */

#onglets {
  background: var(--papier);
  border-bottom: 1px solid var(--bord);
  gap: var(--e5);
  padding: 0 var(--e5);
}

.onglet {
  flex: 0 0 auto;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: var(--e3) 0;
  font-family: var(--titre);
  font-size: var(--t-md);
  color: var(--muet);
}

.onglet[aria-selected='true'] {
  background: transparent;
  color: var(--encre);
  border-bottom-color: var(--encre);
  box-shadow: none;
}

/* --- La feuille ----------------------------------------------------- */

.feuille {
  background: var(--papier);
  box-shadow: 0 0 0 1px var(--bord);
  max-width: 1120px;
}

#vue-bilan {
  padding: var(--e6) var(--e5) 96px;
}

/* --- L'ouverture : la fraction et la frise --------------------------- */

.ouverture {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) 1.4fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  padding-bottom: var(--e6);
}

.chiffre-couverture {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin: var(--e3) 0 0;
  font-family: var(--titre);
  line-height: 0.82;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

.fr-haut {
  font-size: clamp(56px, 7vw, 96px);
  font-weight: 800;
}

.fr-barre {
  font-size: clamp(38px, 5vw, 66px);
  font-weight: 400;
  color: var(--bord-fort);
  margin: 0 var(--e1);
}

.fr-bas {
  font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 400;
  color: var(--muet);
}

.chiffre-lettres {
  font-style: italic;
  color: var(--encre-douce);
  margin: var(--e4) 0 0;
  font-size: var(--t-lg);
}

.frise-periodes {
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid var(--encre);
  padding: 0;
  margin-top: var(--e3);
}

.frise-periodes .periode {
  border: 0;
  border-right: 1px solid var(--bord);
  border-radius: 0;
  background: transparent;
  text-align: left;
  padding: var(--e3) var(--e3) var(--e4) 0;
  position: relative;
  opacity: 1;
}

.frise-periodes .periode:last-child {
  border-right: 0;
}

.frise-periodes .periode.courante {
  background: transparent;
}

.frise-periodes .periode.courante::before {
  content: '';
  position: absolute;
  inset: -1px auto auto 0;
  width: calc(100% - var(--e3));
  height: 3px;
  background: var(--attention);
}

.frise-periodes .periode b {
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
}

.frise-periodes .periode.courante b {
  color: var(--attention);
}

.frise-periodes .periode span {
  font-size: var(--t-2xs);
}

.frise-periodes .periode-compte {
  font-family: var(--titre);
  font-size: var(--t-xl);
  font-weight: 600;
  font-style: normal;
  color: var(--encre);
  margin-top: var(--e3);
  font-variant-numeric: tabular-nums;
}

.frise-periodes .periode.vide .periode-compte {
  color: var(--bord-fort);
  font-weight: 400;
}

.periode-mot {
  display: block;
  font-family: var(--texte);
  font-size: var(--t-sm);
  color: var(--muet);
  text-transform: none;
  letter-spacing: 0;
}

/* --- La note en marge ------------------------------------------------ */

#vue-bilan .encadre-ocre {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: var(--e5);
  align-items: baseline;
  margin: 0 0 var(--e6);
  padding: var(--e5) 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--bord);
  border-bottom: 1px solid var(--bord);
  border-radius: 0;
}

#vue-bilan .encadre-ocre .etiquette {
  color: var(--attention);
}

#vue-bilan .texte-retard {
  font-size: var(--t-lg);
  line-height: 1.45;
  margin: 0;
}

/* --- Le relevé -------------------------------------------------------- */

.bloc-releve {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}

.titre-section {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e5);
  margin-bottom: var(--e2);
}

.titre-section h2 {
  font-family: var(--titre);
  font-size: var(--t-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

.liste-domaines {
  gap: 0;
  border-top: 1px solid var(--encre);
  margin-top: 0;
}

.ligne-domaine {
  grid-template-columns: 34px minmax(0, 1fr) 180px 74px;
  gap: var(--e5);
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--bord);
}

.ligne-domaine:hover {
  background: var(--surface);
}

.rang-domaine {
  font-family: var(--mono);
  font-size: var(--t-xs);
  color: var(--bord-fort);
  font-variant-numeric: tabular-nums;
}

.nom-domaine {
  font-size: var(--t-lg);
  white-space: normal;
}

.ligne-domaine.en-retard .nom-domaine {
  font-weight: 600;
}

.ligne-domaine.en-retard .mini-jauge i {
  background: var(--attention);
}

.nom-domaine .sigle-domaine {
  background: transparent;
  color: var(--muet);
  font-size: var(--t-2xs);
  margin-left: var(--e2);
  margin-right: 0;
  padding: 0;
  min-width: 0;
  vertical-align: 1px;
}

.mini-jauge {
  height: 3px;
  border-radius: 0;
  background: var(--bord);
}

.compte-domaine {
  font-size: var(--t-md);
  color: var(--encre);
}

.compte-domaine small {
  color: var(--muet);
}

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

@media (max-width: 820px) {
  #entete {
    padding: var(--e4) var(--e3) 0;
  }

  #onglets,
  #vue-bilan {
    padding-left: var(--e3);
    padding-right: var(--e3);
  }

  #onglets {
    gap: var(--e4);
    overflow-x: auto;
  }

  .ouverture {
    grid-template-columns: 1fr;
    gap: var(--e5);
  }

  #vue-bilan .encadre-ocre {
    grid-template-columns: 1fr;
    gap: var(--e2);
  }

  .ligne-domaine {
    grid-template-columns: 26px minmax(0, 1fr) 64px;
    gap: var(--e3);
  }

  .ligne-domaine .mini-jauge {
    display: none;
  }

  .identite {
    display: none;
  }
}

/* L'impression garde la main : cette couche ne doit rien y changer. */
@media print {
  #entete,
  #onglets {
    display: none !important;
  }
}

/* --- Les couleurs de domaine, deuxième version ----------------------- *
 * Neuf teintes d'une même famille : même clarté, même saturation, écartées
 * régulièrement en teinte. Elles se lisent comme un jeu de crayons de
 * couleur, pas comme des confettis — et elles s'appliquent sur de larges
 * surfaces (bandeau de section, jauge, pastille) plutôt qu'en semis.        */

.dom-fr {
  --teinte: #35618f;
  --teinte-pale: #eaf0f7;
}
.dom-eca {
  --teinte: #7b4a7e;
  --teinte-pale: #f4ecf4;
}
.dom-math {
  --teinte: #2f6b4f;
  --teinte-pale: #e9f2ed;
}
.dom-sci {
  --teinte: #1f7a85;
  --teinte-pale: #e6f2f4;
}
.dom-fmt {
  --teinte: #a85a3c;
  --teinte-pale: #f8eee9;
}
.dom-fhs {
  --teinte: #8d6614;
  --teinte-pale: #f7f1e2;
}
.dom-epc {
  --teinte: #8f3f4c;
  --teinte-pale: #f7ebed;
}
.dom-psy {
  --teinte: #62742f;
  --teinte-pale: #f0f3e6;
}
.dom-eal {
  --teinte: #4c4e9c;
  --teinte-pale: #ecedf7;
}

/* La pastille reprend la teinte du domaine. */
.sigle-domaine {
  background: var(--teinte, var(--encre));
  color: #fff;
}

/* Dans le relevé, le sigle reste discret mais coloré. */
.nom-domaine .sigle-domaine {
  background: transparent;
  color: var(--teinte, var(--muet));
  font-weight: 700;
}

.ligne-domaine .mini-jauge i {
  background: var(--teinte, var(--couvert));
}

.ligne-domaine.en-retard .mini-jauge i {
  background: var(--teinte, var(--attention));
}

/* Le bandeau de section du référentiel : large aplat, filet à gauche. */
tr.section td {
  background: var(--teinte-pale, var(--kraft));
  border-left: 4px solid var(--teinte, var(--bord-fort));
}

.section-carte {
  background: var(--teinte-pale, var(--kraft));
  border-left: 4px solid var(--teinte, var(--bord-fort));
}

.section-discipline {
  color: var(--teinte, var(--encre));
}

/* Une carte couverte porte la couleur de son domaine. */
.carte-couverte {
  box-shadow: inset 3px 0 0 var(--teinte, var(--couvert));
}