/* =========================================================================
   ColorLearn — css/fiche.css
   LE STYLE DES ÉLÉMENTS DE FICHE.

   Chargé UNIQUEMENT par les pages qui portent une fiche — celles qui
   déclarent un générateur, plus la page du professeur et l'atelier
   livre. Dix kilo-octets de mise en forme d'exercices n'ont rien à
   faire dans des conditions de vente, et c'est la même règle que pour
   js/prompts.js : ce qui ne sert qu'à quinze pages ne part pas sur cent
   trente-sept.
   ========================================================================= */

/* =========================================================================
   LES ÉLÉMENTS DE FICHE

   Dix blocs qui n'existaient pas : le lexique, les repères, les pièges,
   les étapes, le savais-tu, l'exemple résolu, les exercices, le corrigé,
   l'auto-évaluation. Ils suivent le langage du produit — trait épais,
   noir et blanc, zones franches — parce qu'une feuille se colorie aux
   crayons et se photocopie.

   Deux règles gouvernent tout ce qui suit :

     · CE QUI S'ÉCRIT A UNE LIGNE POUR ÉCRIRE. Un exercice sans espace de
       réponse se fait au brouillon, et le brouillon se perd.
     · CE QUI SE CORRIGE SE SÉPARE DE CE QUI SE CHERCHE. Le corrigé n'est
       jamais sous les yeux pendant l'exercice.
   ========================================================================= */

/* ---------- Le lexique : un mot, sa définition ---------- */
.lexique {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3mm;
  margin: 0;
}

.lexique__entree {
  border: var(--trait-fin) solid var(--encre);
  border-radius: var(--rayon);
  padding: 6px 10px 8px;
  break-inside: avoid;
}

.lexique dt {
  font-family: var(--police-titre);
  font-size: 15px;
  line-height: 1.2;
}

.lexique dd {
  margin: 2px 0 0;
  font-size: 12.5px;
}

/* ---------- Les repères : une étiquette, un fait ---------- */
.reperes {
  list-style: none;
  counter-reset: repere;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2mm 4mm;
  margin: 0;
  padding: 0;
}

.repere {
  counter-increment: repere;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 0;
  border-bottom: 1px dotted rgb(0 0 0 / 0.35);
  font-size: 13px;
  break-inside: avoid;
}

.repere::before {
  content: counter(repere);
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: var(--trait-fin) solid var(--encre);
  border-radius: 50%;
  font-family: var(--police-titre);
  font-size: 11px;
}

/* L'étiquette dit de quoi il s'agit — Capitale, Altitude, Date. C'est
   elle qui rend le repère vérifiable plutôt que vaguement vrai. */
.repere__etiquette {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.06em;
}

/* ---------- Les pièges : l'erreur d'abord ---------- */
.astuce--piege {
  border-style: dashed;
}

.astuce--piege h3 {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

/* ---------- Les étapes : le numéro porte l'ordre ---------- */
.astuces--etapes {
  counter-reset: astuce;
}

/* ---------- Le savais-tu ---------- */
.saviez-vous {
  margin-top: 6mm;
}

.saviez-vous__fait {
  margin: 0 0 3mm;
  padding: 8px 12px 8px 34px;
  position: relative;
  border: var(--trait-fin) dashed var(--encre);
  border-radius: var(--rayon);
  font-size: 13px;
  break-inside: avoid;
}

.saviez-vous__fait::before {
  content: "?";
  position: absolute;
  top: 7px;
  left: 9px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: var(--trait-fin) solid var(--encre);
  border-radius: 50%;
  font-family: var(--police-titre);
  font-size: 12px;
}

/* ---------- L'exemple entièrement résolu ---------- */
.exemple-guide {
  margin-top: 6mm;
}

.exemple-guide__enonce {
  margin: 0 0 4mm;
  padding: 8px 12px;
  border: var(--trait-epais) solid var(--encre);
  border-radius: var(--rayon);
  font-weight: 800;
  font-size: 14px;
}

.exemple-guide__etapes {
  list-style: none;
  counter-reset: etape;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2.5mm;
}

.exemple-guide__etapes li {
  counter-increment: etape;
  position: relative;
  padding: 6px 10px 8px 40px;
  border-left: var(--trait-epais) solid var(--encre);
  break-inside: avoid;
}

.exemple-guide__etapes li::before {
  content: counter(etape);
  position: absolute;
  top: 6px;
  left: 8px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: var(--trait-fin) solid var(--encre);
  border-radius: 50%;
  background: var(--papier);
  font-family: var(--police-titre);
  font-size: 13px;
}

.exemple-guide__etapes strong {
  display: block;
  font-size: 13.5px;
}

/* Le « pourquoi » est ce qui se transfère à l'exercice suivant : il
   n'est pas une note en petit, il fait partie de l'étape. */
.exemple-guide__etapes span {
  display: block;
  font-size: 12.5px;
  font-style: italic;
}

.exemple-guide__resultat {
  margin: 4mm 0 0;
  padding: 6px 12px;
  border: var(--trait-fin) solid var(--encre);
  border-radius: var(--rayon);
  font-size: 13.5px;
}

/* ---------- Les exercices ---------- */
.exercices {
  margin-top: 6mm;
}

.exercices__liste {
  list-style: none;
  counter-reset: exo;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 3mm;
}

.exercice {
  counter-increment: exo;
  position: relative;
  padding: 6px 10px 8px 38px;
  border: var(--trait-fin) solid var(--encre);
  border-radius: var(--rayon);
  break-inside: avoid;
  page-break-inside: avoid;
}

.exercice::before {
  content: counter(exo);
  position: absolute;
  top: 7px;
  left: 8px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: var(--trait-fin) solid var(--encre);
  border-radius: 50%;
  font-family: var(--police-titre);
  font-size: 13px;
}

.exercice__enonce {
  margin: 0;
  font-size: 13.5px;
  font-weight: 700;
}

/* L'amorce : elle guide les premiers exercices et disparaît des
   derniers. C'est la gradation, et elle se voit. */
.exercice__aide {
  margin: 2px 0 0;
  font-size: 12px;
  font-style: italic;
}

/* La ligne pour écrire. Sans elle, l'exercice se fait au brouillon. */
.exercice .ligne-reponse {
  display: block;
  margin-top: 6px;
  border-bottom: var(--trait-fin) dotted var(--encre);
  height: 9mm;
}

/* ---------- Le corrigé ---------- */
.corrige {
  margin-top: 6mm;
  padding: 8px 12px;
  border: var(--trait-fin) dashed var(--encre);
  border-radius: var(--rayon);
}

.corrige__avert {
  margin: 0 0 4px;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.corrige__liste {
  margin: 0;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Je fais le point ---------- */
.auto-eval {
  margin-top: 6mm;
}

.auto-eval__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2mm;
}

.auto-eval__liste li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px dotted rgb(0 0 0 / 0.35);
  font-size: 13px;
}

/* Une case à cocher au crayon : le geste qui déclenche la révision. */
.auto-eval__case {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  border: var(--trait-fin) solid var(--encre);
  border-radius: 3px;
}

/* ---------- Écrans étroits ---------- */
@media (max-width: 640px) {
  .lexique,
  .reperes {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   LES ÉLÉMENTS DISCIPLINAIRES
   -------------------------------------------------------------------------
   Cinq blocs qui portent un geste que le générique ne rendait pas. Ils
   partagent la règle de tout ce fichier : ils sont faits pour LE PAPIER —
   traits épais, zones larges, rien qui dépende d'une couleur.
   ========================================================================= */

/* ---------- La trace à compléter ---------- */
.trace {
  margin-top: 6mm;
}

.trace__liste {
  display: grid;
  gap: 3mm;
  margin: 0 0 4mm;
  padding-left: 6mm;
  font-size: 14px;
  line-height: 1.9;
}

/* Le trou se voit et s'écrit dessus : une ligne, pas trois traits bas
   qui se confondent avec un soulignement. */
.trace__liste li {
  break-inside: avoid;
  page-break-inside: avoid;
}

.trace__banque {
  margin: 0;
  padding: 3mm 4mm;
  border: var(--trait-fin) dashed var(--encre);
  border-radius: var(--rayon);
  font-size: 13.5px;
  break-inside: avoid;
}

/* ---------- La démarche ---------- */
.demarche {
  margin-top: 6mm;
  display: grid;
  gap: 2.5mm;
  padding: 4mm;
  border: var(--trait-fin) solid var(--encre);
  border-radius: var(--rayon);
  break-inside: avoid;
  page-break-inside: avoid;
  font-size: 13.5px;
}

.demarche p {
  margin: 0;
}

.demarche__protocole {
  margin: 0;
  padding-left: 6mm;
  display: grid;
  gap: 1.5mm;
}

/* ---------- L'imagier ---------- */
.imagier {
  margin-top: 6mm;
}

.imagier__mots {
  list-style: none;
  margin: 3mm 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(46mm, 1fr));
  gap: 2.5mm;
}

.imagier__mots li {
  display: grid;
  grid-template-columns: 9mm 1fr;
  align-items: baseline;
  gap: 2mm;
  padding: 2mm 3mm;
  border: var(--trait-fin) solid var(--encre);
  border-radius: var(--rayon);
  break-inside: avoid;
}

/* Le numéro fait le lien avec la planche : il doit se lire d'un coup. */
.imagier__n,
.carte-muette__n {
  display: grid;
  place-items: center;
  width: 7mm;
  height: 7mm;
  border: var(--trait-fin) solid var(--encre);
  border-radius: 50%;
  font-family: var(--police-titre);
  font-size: 13px;
}

.imagier__fr {
  display: block;
  font-size: 12px;
  font-style: italic;
}

/* ---------- La carte à légender ---------- */
.carte-muette {
  margin-top: 6mm;
}

.carte-muette__consigne {
  margin: 0 0 3mm;
  font-size: 13.5px;
}

.carte-muette__legende {
  list-style: none;
  margin: 3mm 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(52mm, 1fr));
  gap: 2mm 4mm;
  font-size: 13.5px;
}

.carte-muette__legende li {
  display: grid;
  grid-template-columns: 9mm 1fr;
  align-items: center;
  gap: 2mm;
  break-inside: avoid;
}

/* ---------- Le barème ---------- */
.bareme {
  margin-top: 4mm;
  padding: 3mm 4mm;
  border: var(--trait-fin) solid var(--encre);
  border-radius: var(--rayon);
  break-inside: avoid;
  page-break-inside: avoid;
}

.bareme__ligne {
  display: flex;
  flex-wrap: wrap;
  gap: 2mm;
  margin: 0 0 2mm;
}

/* Une case par question : c'est là qu'on écrit le point. */
.bareme__case {
  display: grid;
  place-items: start center;
  width: 9mm;
  height: 11mm;
  padding-top: 1mm;
  border: var(--trait-fin) solid var(--encre);
  border-radius: 3px;
  font-size: 11px;
}

.bareme__total {
  margin: 0;
  font-size: 14px;
}

/* ---------- Impression ----------
   Tout ce qui précède est fait pour le papier. Seul le corrigé posé au
   pied reste à l'écran : imprimé sous les énoncés, il serait sous les
   yeux pendant tout l'exercice. Celui du verso, lui, s'imprime — il a
   sa propre page, et l'enfant retourne la feuille. */
@media print {
  .exemple-guide,
  .exercices,
  .auto-eval,
  /* Une trace de six phrases dépasse le bas d'une page : elle se coupe
     entre deux lignes plutôt que de laisser un blanc de dix centimètres. */
  .trace__liste,
  .imagier__mots,
  .carte-muette__legende {
    break-inside: auto;
  }

  .corrige {
    border-style: solid;
  }
}