/* =========================================================================
   Pas à son — fiche « Lecture & compréhension » (modèle commun CP → CM2)
   Complète styles.css et page-son.css (fil d'Ariane) sans les modifier.
   Préfixe lc- pour ne jamais toucher les classes des pages existantes.
   Mise en page : en-tête de fiche, feuille du texte (paragraphes numérotés),
   questions, correction repliée ; version imprimable A4 en deux pages.
   ========================================================================= */

/* ---------- Réglages par niveau (aucun code dupliqué) ------------------ */
body[data-niveau] {
  --lc-texte: 1.4375rem;      /* taille du texte à lire */
  --lc-ligne: 38ch;           /* longueur de ligne maximale */
  --lc-question: 1.3125rem;   /* taille des questions */
  --lc-para-espace: 1.25rem;  /* espace entre paragraphes */
}
body[data-niveau="cp"]  { --lc-texte: 1.625rem;  --lc-ligne: 30ch; --lc-question: 1.4375rem; --lc-para-espace: 1.5rem; }
body[data-niveau="ce1"] { --lc-texte: 1.4375rem; --lc-ligne: 38ch; --lc-question: 1.3125rem; --lc-para-espace: 1.25rem; }
body[data-niveau="ce2"] { --lc-texte: 1.3125rem; --lc-ligne: 46ch; --lc-question: 1.25rem;   --lc-para-espace: 1.125rem; }
body[data-niveau="cm1"] { --lc-texte: 1.25rem;   --lc-ligne: 52ch; --lc-question: 1.1875rem; --lc-para-espace: 1rem; }
body[data-niveau="cm2"] { --lc-texte: 1.25rem;   --lc-ligne: 56ch; --lc-question: 1.1875rem; --lc-para-espace: 1rem; }

/* ---------- En-tête de fiche ------------------------------------------ */
.lc-entete { padding-top: 1.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.lc-etiquettes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lc-etiquette {
  display: inline-flex; align-items: center; gap: 0.375rem;
  min-height: 2.25rem; padding: 0 0.875rem;
  border-radius: var(--rayon-pilule);
  background: var(--lavande-50); color: var(--violet-700);
  font-size: 1rem; font-weight: 600;
}
.lc-etiquette--niveau { background: var(--violet-600); color: var(--blanc); }
/* Difficulté : étiquette discrète, en contour, texte seul */
.lc-etiquette--difficulte { background: var(--blanc); color: var(--texte-doux); border: 2px solid var(--lavande-200); font-weight: 500; max-width: 100%; padding-block: 0.25rem; white-space: normal; overflow-wrap: anywhere; }   /* passe à la ligne si le texte est très agrandi */
.lc-titre { font-size: 3rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; word-spacing: 0; }
.lc-consigne { font-size: 1.375rem; color: var(--texte-doux); }
.lc-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; padding-top: 0.25rem; }
.lc-actions .bouton { min-height: 3.25rem; }

/* Étapes : je lis → je réponds → je vérifie (même composant que l'accueil) */
.lc-etapes { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 1.0625rem; font-weight: 600; color: var(--texte-doux); }
.lc-etapes li { display: inline-flex; align-items: center; gap: 0.5rem; }
.lc-etapes .chemin__numero { width: 2rem; height: 2rem; font-size: 0.9375rem; }

/* ---------- Titres de section ----------------------------------------- */
.lc-section { padding-top: 3rem; }
.lc-section__titre { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 1.25rem; }
.lc-section__titre h2 { font-size: 2rem; line-height: 1.2; font-weight: 600; letter-spacing: 0; }

/* ---------- La feuille du texte --------------------------------------- */
.lc-feuille {
  max-width: calc(var(--lc-ligne) + 7rem);
  padding: 2rem 2.25rem 2.25rem 1.5rem;
  border-radius: var(--rayon-carte);
  border: 2px solid var(--lavande-200);
  background: var(--blanc);
  color: var(--encre);
}
html[data-contraste="renforce"] .lc-feuille { color: #000000; }
.lc-texte { display: flex; flex-direction: column; gap: var(--lc-para-espace); }
.lc-paragraphe {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.75rem;
  padding: 0.25rem 0.5rem 0.25rem 0;
  border-radius: 0.875rem;
  scroll-margin-top: 1.5rem;
  transition: background-color .2s ease;
}
.lc-paragraphe:target { background: var(--jaune-50); }
.lc-num {
  width: 2.25rem; height: 2.25rem; margin-top: 0.3em;
  border-radius: 50%; background: var(--lavande-50); color: var(--violet-700);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 700; letter-spacing: 0;
}
.lc-paragraphe p {
  font-family: var(--police-lecture);
  font-size: var(--lc-texte);
  line-height: max(1.65, var(--interligne));
  max-width: var(--lc-ligne);
}

/* Intertitres, listes, étapes, dialogues */
.lc-intertitre { font-size: 1.25rem; font-weight: 700; color: var(--violet-700); letter-spacing: 0; margin-top: 0.25rem; }
.lc-feuille--sans-numeros .lc-paragraphe { grid-template-columns: minmax(0, 1fr); padding-left: 0.75rem; }
.lc-dialogue { white-space: pre-line; }
.lc-liste { font-family: var(--police-lecture); font-size: var(--lc-texte); line-height: 1.5; max-width: var(--lc-ligne); display: flex; flex-direction: column; gap: 0.375rem; }
.lc-liste:not(.lc-liste--etapes) li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: 0.5rem; }
.lc-liste:not(.lc-liste--etapes) li::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--violet-600); margin-top: 0.65em; }
.lc-liste--etapes { gap: 0.625rem; }
.lc-liste--etapes li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.625rem; align-items: start; }
.lc-liste__num {
  width: 2rem; height: 2rem; margin-top: 0.15em; border-radius: 0.625rem;
  background: var(--vert-50); color: var(--vert-800);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--police-interface); font-size: 1rem; font-weight: 700;
}

/* ---------- Questions ------------------------------------------------- */
.lc-questions { display: flex; flex-direction: column; gap: 1.25rem; max-width: 52rem; }
.lc-question {
  padding: 1.5rem 1.75rem;
  border-radius: var(--rayon-carte);
  border: 2px solid var(--bordure);
  background: var(--surface);
  display: flex; flex-direction: column; gap: 1rem;
  min-width: 0;
}
.lc-question__tete { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.lc-question__num {
  width: 2.75rem; height: 2.75rem; flex-shrink: 0;
  border-radius: 50%; background: var(--violet-600); color: var(--blanc);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; font-weight: 700;
}
.lc-type {
  display: inline-flex; align-items: center; gap: 0.375rem;
  min-height: 2.25rem; padding: 0 0.875rem;
  border-radius: var(--rayon-pilule);
  font-size: 1rem; font-weight: 600;
  background: var(--c-fond); color: var(--c-texte);
}
.lc-type .icone { width: 1.25rem; height: 1.25rem; }
.lc-question__tete .bouton-rond { margin-left: auto; width: 3rem; height: 3rem; }

.lc-question fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.lc-enonce {
  padding: 0;
  font-family: var(--police-lecture);
  font-size: var(--lc-question);
  line-height: 1.45;
  font-weight: 700;
  max-width: 40ch;
}

.lc-choix { display: flex; flex-direction: column; gap: 0.625rem; }
.lc-choix label { position: relative; display: block; cursor: pointer; }
.lc-choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lc-choix__boite {
  display: flex; align-items: center; gap: 0.875rem;
  min-height: 3.5rem; padding: 0.5rem 1rem;
  border-radius: 1rem;
  border: 2px solid var(--bordure-bouton);
  background: var(--blanc); color: var(--encre);
  font-family: var(--police-lecture); font-size: var(--lc-question); line-height: 1.35;
}
.lc-choix__case {
  width: 1.75rem; height: 1.75rem; flex-shrink: 0;
  border-radius: 0.5rem; border: 2px solid var(--violet-600);
  display: flex; align-items: center; justify-content: center;
  color: var(--blanc);
}
.lc-choix__case .icone { width: 1.125rem; height: 1.125rem; stroke-width: 3.5; opacity: 0; }
.lc-choix input:checked + .lc-choix__boite { border-color: var(--violet-600); background: var(--lavande-50); font-weight: 700; }
.lc-choix input:checked + .lc-choix__boite .lc-choix__case { background: var(--violet-600); }
.lc-choix input:checked + .lc-choix__boite .lc-choix__case .icone { opacity: 1; }
.lc-choix input:focus-visible + .lc-choix__boite { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Plusieurs réponses : cases carrées ; une réponse : cases arrondies */
.lc-precision { font-size: 1rem; font-weight: 600; color: var(--texte-doux); }
.lc-choix__case--multiple { border-radius: 0.3rem; }

/* Vrai ou faux */
.lc-vf { display: flex; flex-direction: column; gap: 0.75rem; }
.lc-vf__ligne { display: flex; flex-direction: column; gap: 0.5rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--bordure); }
.lc-vf__ligne:last-child { border-bottom: 0; padding-bottom: 0; }
.lc-vf__texte { font-family: var(--police-lecture); font-size: var(--lc-question); line-height: 1.4; }
.lc-vf__groupe { display: grid; grid-template-columns: repeat(2, minmax(0, 8.5rem)); gap: 0.625rem; }
.lc-vf__groupe .lc-choix__boite { min-height: 3.25rem; }
.lc-vf__groupe label { position: relative; display: block; cursor: pointer; }
.lc-vf__groupe input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lc-vf__groupe input:checked + .lc-choix__boite { border-color: var(--violet-600); background: var(--lavande-50); font-weight: 700; }
.lc-vf__groupe input:checked + .lc-choix__boite .lc-choix__case { background: var(--violet-600); }
.lc-vf__groupe input:checked + .lc-choix__boite .lc-choix__case .icone { opacity: 1; }
.lc-vf__groupe input:focus-visible + .lc-choix__boite { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Réponse très courte : « Étape n° ___ » */
.lc-reponse-courte { display: flex; align-items: flex-end; gap: 0.5rem; font-family: var(--police-lecture); font-size: var(--lc-question); }
.lc-reponse-courte__trait { display: inline-block; width: 5rem; height: 2rem; border-bottom: 2px solid var(--lavande-300); }

.lc-lignes { display: flex; flex-direction: column; gap: 0.5rem; }
.lc-lignes .ligne-ecriture { display: block; height: 2.5rem; }
.lc-lignes__etiquette { font-size: 1rem; color: var(--texte-doux); font-weight: 500; }

/* Saisie à l'écran (masquée à l'impression, où restent les traits et les lignes) */
.lc-champ { font: inherit; font-family: var(--police-lecture); font-size: max(16px, var(--lc-question)); color: var(--texte); background: #fff; border: 2px solid var(--lavande-200); border-radius: 0.75rem; padding: 0.4rem 0.75rem; min-height: 2.75rem; box-sizing: border-box; max-width: 100%; }
.lc-champ:focus { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--focus); }
.lc-champ--court { width: 12rem; }
textarea.lc-champ { width: 100%; resize: vertical; line-height: 1.6; }
input.lc-champ:not(.lc-champ--court) { width: 100%; }
.lc-saisie { display: flex; flex-direction: column; gap: 0.5rem; }
@media screen {
  .lc-reponse-courte { flex-wrap: wrap; align-items: center; }
  .lc-reponse-courte__trait, .lc-lignes--papier { display: none; }
}
@media print {
  .lc-champ, .lc-saisie { display: none !important; }
}

/* Coup de pouce (facultatif) */
.lc-aide summary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0 1rem;
  border-radius: var(--rayon-pilule);
  background: var(--jaune-50); color: var(--ocre-800);
  font-weight: 600; font-size: 1.0625rem;
  cursor: pointer; list-style: none;
}
.lc-aide summary::-webkit-details-marker { display: none; }
.lc-aide summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.lc-aide p { margin-top: 0.75rem; font-size: 1.125rem; display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: center; }
.lc-aide a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; }

/* ---------- Correction ------------------------------------------------ */
.lc-correction__bouton { min-height: 3.5rem; }
.lc-correction__contenu {
  margin-top: 1.25rem; max-width: 52rem;
  padding: 1.5rem 1.75rem;
  border-radius: var(--rayon-carte);
  background: var(--vert-50); color: var(--encre);
}
.lc-correction__titre { display: none; }
.lc-verso, .lc-tourner { display: none; }
.lc-correction__vf { margin-top: 0.25rem; display: flex; flex-direction: column; gap: 0.125rem; font-size: 1.0625rem; }
.lc-correction__vf strong { color: var(--vert-800); }
.lc-conseil-impression { font-size: 0.9375rem; color: var(--texte-doux); max-width: 46ch; }
.lc-correction__question { font-size: 1rem; color: var(--encre-douce); display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
.lc-correction__type { display: inline-block; padding: 0 0.5rem; border-radius: var(--rayon-pilule); background: var(--blanc); color: var(--vert-800); font-size: 0.875rem; font-weight: 700; }
.lc-correction__contenu[data-replie="true"] { display: none; }
.lc-correction ol { display: flex; flex-direction: column; gap: 1rem; }
.lc-correction ol > li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.75rem; align-items: start; }
.lc-correction__num {
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--blanc); color: var(--vert-800);
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.lc-correction__reponse { font-family: var(--police-lecture); font-size: 1.25rem; font-weight: 700; }
.lc-correction__explication { font-size: 1.0625rem; margin-top: 0.25rem; }
.lc-correction__para { font-size: 1rem; color: var(--vert-800); font-weight: 600; margin-top: 0.25rem; }

/* ---------- Ordinateur : texte et questions côte à côte ----------------
   Le texte reste visible pendant que l'enfant répond. */
@media (min-width: 68.0625rem) {
  .lc-lecture {
    display: grid;
    grid-template-columns: minmax(0, calc(var(--lc-ligne) + 7rem)) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
  }
  .lc-section--texte { position: sticky; top: 1rem; }
  .lc-section--texte .lc-feuille { max-height: calc(100vh - 7rem); overflow-y: auto; }
}

/* ---------- Bas de fiche ---------------------------------------------- */
.lc-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 3rem var(--entre-sections); }
.lc-credits { font-size: 0.9375rem; color: var(--texte-doux); overflow-wrap: anywhere; }   /* la ligne de crédits passe à la ligne, même à 200 % de zoom */
.lc-impression { display: none; }

/* ---------- Téléphone ------------------------------------------------- */
@media (max-width: 68rem) {
  .lc-entete { padding-top: 1rem; gap: 0.75rem; }
  .lc-titre { font-size: 2.25rem; }
  .lc-consigne { font-size: 1.1875rem; }
  .lc-section { padding-top: 2.25rem; }
  .lc-section__titre h2 { font-size: 1.625rem; }
  .lc-feuille { padding: 1.25rem 1rem 1.5rem 0.75rem; border-radius: 1.5rem; }
  .lc-paragraphe { grid-template-columns: 2rem minmax(0, 1fr); gap: 0.5rem; }
  .lc-num { width: 1.875rem; height: 1.875rem; font-size: 0.875rem; }
  .lc-question { padding: 1.125rem 1rem; border-radius: 1.5rem; }
  .lc-correction__contenu { padding: 1.125rem 1rem; }
  .lc-actions { width: 100%; }
  .lc-actions .bouton { flex: 1 1 12rem; }
  .lc-bas { flex-direction: column; align-items: stretch; padding-block: 2rem 3rem; }
}

/* Très petit écran ou texte très agrandi (ex. téléphone à 200 % de zoom) :
   les boutons de la fiche restent dans la page — marges latérales réduites,
   icône et libellé passent sur deux lignes si besoin, libellé coupé en dernier
   recours. Zone cliquable et libellés inchangés. */
@media (max-width: 22rem) {
  .lc-actions .bouton, .lc-correction__bouton, .lc-bas .bouton {
    box-sizing: border-box; max-width: 100%; min-width: 0;
    flex-wrap: wrap; padding-inline: 0.75rem; text-align: center; overflow-wrap: anywhere;
  }
}

/* Même cas : réponses à choix et « Vrai / Faux ». Les cases Vrai et Faux
   s'empilent (une par ligne, pleine largeur) ; les réponses longues passent à
   la ligne ; marges intérieures réduites. Cases, libellés et réponses inchangés. */
@media (max-width: 22rem) {
  .lc-question .lc-choix__boite { gap: 0.5rem; padding-inline: 0.625rem; min-width: 0; overflow-wrap: anywhere; }
  .lc-vf__groupe { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Très petit écran + texte agrandi --------------------------
   Plus de place pour le texte ; un mot plus large que la ligne entière
   (cas extrême) passe à la ligne au lieu de faire défiler la page. */
@media (max-width: 25rem) {
  .lc-feuille { padding-right: 0.625rem; }
  .lc-liste--etapes li { grid-template-columns: 1.75rem minmax(0, 1fr); gap: 0.375rem; }
  .lc-liste__num { width: 1.625rem; height: 1.625rem; font-size: 0.875rem; }
  .lc-paragraphe p, .lc-liste, .lc-enonce, .lc-choix__boite, .lc-vf__texte { overflow-wrap: break-word; }
}

/* ---------- Version imprimable (A4 portrait) ---------------------------
   Page 1 : texte et questions. Page 2 : correction.
   Taille de base fixe pour que le PDF soit identique pour tous. */
@media print {
  @page { size: A4 portrait; margin: 15mm; }
  html { font-size: 11.5pt !important; }
  body { background: #FFFFFF !important; color: #000000 !important; padding: 0 !important; }
  .lien-evitement, .entete, .fil-ariane, .barre-onglets, .pied, .annonce, .reglages,
  .lc-actions, .lc-etapes, .lc-aide, .lc-correction__bouton, .bouton-rond, .lc-bas .bouton,
  .lc-section__titre .bouton-rond { display: none !important; }
  .conteneur { max-width: none; padding-inline: 0; }

  .lc-impression {
    display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
    padding-bottom: 0.5rem; margin-bottom: 0.75rem;
    border-bottom: 1.5pt solid #C9C0F3; font-size: 10pt; color: #2B2547;
  }
  .lc-impression__champs { display: flex; gap: 2rem; }
  .lc-impression__champs span { display: inline-block; min-width: 9rem; border-bottom: 1pt solid #8C86A8; padding-top: 0.5rem; }

  .lc-entete { padding-top: 0; gap: 0.25rem; }
  .lc-etiquette { min-height: 0; padding: 0.1rem 0.6rem; font-size: 9pt; background: #FFFFFF !important; color: #2B2547 !important; border: 1pt solid #C9C0F3; }
  .lc-etiquette--difficulte { display: none !important; }   /* pas dans la page imprimée : identique aux PDF */
  .lc-titre { font-size: 20pt; }
  .lc-consigne { font-size: 11pt; color: #2B2547; }

  .lc-section { padding-top: 0.5rem; }
  .lc-section__titre { margin-bottom: 0.4rem; }
  .lc-section__titre h2 { font-size: 13pt; }

  .lc-feuille { max-width: none; padding: 0.5rem 0.8rem; border: 1.5pt solid #C9C0F3; border-radius: 10pt; }
  .lc-texte { gap: 0.2rem; }
  .lc-paragraphe { grid-template-columns: 1.6rem 1fr; gap: 0.4rem; break-inside: avoid; }
  .lc-paragraphe p { font-size: 12.5pt; line-height: 1.4; max-width: none; }
  .lc-num { width: 1.35rem; height: 1.35rem; font-size: 8.5pt; background: #FFFFFF !important; border: 1pt solid #8C86A8; color: #2B2547 !important; }

  .lc-lecture { display: block; }
  .lc-section--texte { position: static; }
  .lc-section--texte .lc-feuille { max-height: none; overflow: visible; }
  .lc-questions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; max-width: none; }
  .lc-question--large { grid-column: 1 / -1; }
  .lc-question--large .lc-choix { flex-direction: row !important; gap: 0.1rem 1.5rem !important; }
  .lc-section--texte > .lc-section__titre { display: none; }
  .lc-entete { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 0.75rem; }
  .lc-etiquettes { order: 2; }
  .lc-titre { order: 1; }
  .lc-consigne { order: 3; flex-basis: 100%; }
  .lc-choix { flex-direction: row !important; flex-wrap: wrap; gap: 0.05rem 1.1rem !important; }
  .lc-question { padding: 0.3rem 0.6rem 0.4rem; gap: 0.15rem; border: 1pt solid #C9C0F3; border-radius: 8pt; break-inside: avoid; }
  .lc-question fieldset { gap: 0.2rem; }
  .lc-question__num { width: 1.4rem; height: 1.4rem; font-size: 9.5pt; background: #FFFFFF !important; color: #2B2547 !important; border: 1.2pt solid #2B2547; }
  .lc-type { min-height: 0; padding: 0 0.5rem; font-size: 8.5pt; background: #FFFFFF !important; color: #2B2547 !important; border: 1pt solid #C9C0F3; }
  .lc-type .icone { width: 0.85rem; height: 0.85rem; }
  .lc-enonce { font-size: 11.5pt; line-height: 1.35; max-width: none; }
  .lc-intertitre { font-size: 11pt; color: #2B2547; margin-top: 0.1rem; }
  .lc-liste { font-size: 12pt; line-height: 1.35; max-width: none; gap: 0.05rem; }
  .lc-liste--etapes { gap: 0.15rem; }
  .lc-liste--etapes li { grid-template-columns: 1.5rem 1fr; gap: 0.4rem; }
  .lc-liste__num { width: 1.25rem; height: 1.25rem; font-size: 8.5pt; background: #FFFFFF !important; border: 1pt solid #23663F; }
  .lc-liste:not(.lc-liste--etapes) li::before { background: #2B2547 !important; }
  .lc-precision { font-size: 9.5pt; }
  .lc-vf { gap: 0.15rem; }
  .lc-vf__ligne { flex-direction: row; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: 0.15rem; border-bottom: 0.75pt solid #E6E1FA; }
  .lc-vf__texte { font-size: 11.5pt; }
  .lc-vf__groupe { grid-template-columns: auto auto; gap: 1rem; flex-shrink: 0; }
  .lc-vf__groupe .lc-choix__boite { min-height: 0; padding: 0; border: 0; background: none !important; font-size: 11pt; font-weight: 400 !important; }
  .lc-reponse-courte { font-size: 11.5pt; }
  .lc-reponse-courte__trait { height: 1.2rem; border-bottom: 1pt solid #8C86A8; }
  .lc-conseil-impression { display: none; }
  /* Pied du recto : mode d'impression conseillé */
  .lc-tourner { display: none; }
  .lc-impression__gauche { display: flex; flex-direction: column; gap: 0.05rem; }
  .lc-impression__verso { font-size: 8.5pt; color: #5A5478; }
  .lc-section--questions > .lc-section__titre { display: none; }
  .lc-liste:not(.lc-liste--etapes) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
  .lc-choix { flex-direction: row; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
  .lc-choix__boite { min-height: 0; padding: 0.05rem 0; border: 0; background: none !important; font-size: 11.5pt; font-weight: 400 !important; }
  .lc-choix__case { width: 0.95rem; height: 0.95rem; border-radius: 2pt; border: 1.2pt solid #2B2547; background: #FFFFFF !important; }
  .lc-choix__case .icone { opacity: 0 !important; }
  .lc-lignes { gap: 0.1rem; }
  .lc-lignes__etiquette { font-size: 9.5pt; }
  .lc-lignes .ligne-ecriture { height: 1.75rem; border-bottom-color: #8C86A8; }

  /* Correction : toujours imprimée, sur une nouvelle page */
  .lc-correction { break-before: page; padding-top: 0; }
  .lc-correction > .lc-section__titre { display: none; }
  .lc-correction__contenu { display: block !important; margin-top: 0; max-width: none; padding: 0.6rem 0.8rem; background: #FFFFFF !important; border: 1.5pt solid #7CC79A; border-radius: 10pt; }
  .lc-correction__titre { display: none; }
  .lc-verso { display: flex; flex-direction: column; gap: 0.1rem; padding-bottom: 0.5rem; margin-bottom: 0.6rem; border-bottom: 1.5pt solid #7CC79A; }
  .lc-verso__site { font-size: 10pt; color: #2B2547; }
  .lc-verso__titre { font-size: 18pt; font-weight: 700; color: #000000; }
  .lc-verso__info { font-size: 10pt; color: #2B2547; }
  .lc-correction__question { font-size: 10pt; color: #2B2547; }
  .lc-correction__vf { font-size: 10.5pt; }
  .lc-correction__vf strong { color: #000000; }
  .lc-correction__type { border: 1pt solid #7CC79A; font-size: 8.5pt; }
  .lc-correction ol { gap: 0.6rem; }
  .lc-correction ol > li { grid-template-columns: 1.6rem 1fr; break-inside: avoid; }
  .lc-correction__num { width: 1.35rem; height: 1.35rem; font-size: 9pt; border: 1pt solid #23663F; }
  .lc-correction__reponse { font-size: 13pt; }
  .lc-correction__para { color: #23663F !important; }
  .lc-correction__explication, .lc-correction__para { font-size: 10pt; }

  .lc-bas { padding: 0.75rem 0 0; }

  /* Mise en page compacte : appliquée automatiquement par
     outils/generer-pdf.py quand le recto ne tient pas sur une page.
     Minimums garantis : texte 12 pt, lignes d'écriture 6 mm. */
  html.impression-compacte .lc-paragraphe p { font-size: 12pt; line-height: 1.33; }
  html.impression-compacte .lc-liste { font-size: 12pt; line-height: 1.3; }
  html.impression-compacte .lc-texte { gap: 0.1rem; }
  html.impression-compacte .lc-feuille { padding: 0.35rem 0.7rem; }
  html.impression-compacte .lc-entete { gap: 0.1rem; }
  html.impression-compacte .lc-question { padding: 0.2rem 0.5rem 0.3rem; gap: 0.1rem; }
  html.impression-compacte .lc-questions { gap: 0.3rem; }
  html.impression-compacte .lc-enonce { font-size: 11pt; line-height: 1.3; }
  html.impression-compacte .lc-lignes .ligne-ecriture { height: 1.5rem; }
  .lc-credits { font-size: 8.5pt; }
}

/* ---------- Illustration facultative de la fiche ------------------------
   Registre : assets/js/donnees/illustrations-fiches.js.
   Image placée à droite du texte, qui l'entoure ; centrée au-dessus du
   texte sur petit écran. Elle n'apparaît que sur le recto. */
.lc-illustration { float: right; margin: 0 0 0.75rem 1rem; padding: 0; }
.lc-illustration img { display: block; width: 100%; height: auto; }
.lc-illustration--manchot-empereur { width: 7.5rem; }
.lc-illustration--brochette-de-fruits { width: 12rem; }
.lc-feuille--illustree .lc-texte { display: block; }
.lc-feuille--illustree .lc-texte > * + * { margin-top: var(--lc-para-espace); }
.lc-feuille--illustree::after { content: ''; display: block; clear: both; }
@media (max-width: 30rem) {
  .lc-illustration { float: none; margin: 0 auto 1rem; }
  .lc-illustration--manchot-empereur { width: 6rem; }
  .lc-illustration--brochette-de-fruits { width: min(12rem, 100%); }
}
@media print {
  .lc-illustration { float: right; margin: 0 0 0.2rem 0.6rem; }
  .lc-illustration--manchot-empereur { width: 22mm; }
  .lc-illustration--brochette-de-fruits { width: 42mm; }
  .lc-feuille--illustree .lc-texte > * + * { margin-top: 0.2rem; }
  html.impression-compacte .lc-feuille--illustree .lc-texte > * + * { margin-top: 0.1rem; }
  .lc-illustration img { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Partie indisponible (données incorrectes) ------------------ */
.lc-indisponible { padding: 0.75rem 1rem; border: 2px dashed var(--lavande-300); border-radius: 1rem; color: var(--texte-doux); font-size: 1rem; }

/* ---------- F2 — Bloc « tableau » ---------------------------------------
   Données : { tableau: { titre, entetes, lignes, entetesLignes } }
   Écran large : vrai tableau. Petit écran : une carte par ligne, chaque
   case précédée du titre de sa colonne (aucun défilement horizontal).
   Impression : tableau à filets, lisible en noir et blanc. */
.lc-tableau { min-width: 0; max-width: calc(var(--lc-ligne) + 4rem); }
.lc-tableau__table {
  width: 100%; table-layout: fixed;
  border-collapse: separate; border-spacing: 0;
  border: 2px solid var(--lavande-200); border-radius: 1rem; overflow: hidden;
  background: var(--blanc);
  font-family: var(--police-lecture); font-size: calc(var(--lc-texte) * 0.85); line-height: 1.4;
}
.lc-tableau__titre {
  margin-bottom: 0.5rem;
  font-family: var(--police-interface); font-size: 1.125rem; font-weight: 700; color: var(--violet-700);
}
.lc-tableau__table th, .lc-tableau__table td {
  padding: 0.625rem 0.875rem; text-align: left; vertical-align: top;
  overflow-wrap: break-word; border-top: 2px solid var(--lavande-150);
}
.lc-tableau__table th + th, .lc-tableau__table th + td, .lc-tableau__table td + td { border-left: 2px solid var(--lavande-150); }
.lc-tableau__table thead th {
  border-top: 0; border-bottom: 2px solid var(--lavande-200);
  background: var(--lavande-50); color: var(--violet-800);
  font-family: var(--police-interface); font-size: 1rem; font-weight: 700;
}
.lc-tableau__table tbody tr:first-child > * { border-top: 0; }
.lc-tableau__table tbody th { font-weight: 700; }
@media screen and (max-width: 34rem) {
  .lc-tableau__table, .lc-tableau__table thead, .lc-tableau__table tbody, .lc-tableau__table tr,
  .lc-tableau__table th, .lc-tableau__table td { display: block; width: auto; }
  .lc-tableau__table { border: 0; border-radius: 0; overflow: visible; background: none; }
  /* en-têtes masqués visuellement (repris devant chaque case), lus par les lecteurs d'écran */
  .lc-tableau__table thead { position: absolute; width: 1px !important; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  .lc-tableau__table tbody { display: flex; flex-direction: column; gap: 0.75rem; }
  .lc-tableau__table tbody tr { border: 2px solid var(--lavande-200); border-radius: 1rem; overflow: hidden; background: var(--blanc); }
  .lc-tableau__table tbody tr > * { border-left: 0 !important; border-top: 0; }
  .lc-tableau__table tbody tr > * + *, .lc-tableau__table tbody tr:first-child > * + * { border-top: 2px solid var(--lavande-150); }
  .lc-tableau__table tbody th, .lc-tableau__table tbody td { padding: 0.5rem 0.875rem; }
  .lc-tableau__table tbody tr > *::before {
    content: attr(data-titre); display: block;
    font-family: var(--police-interface); font-size: 0.875rem; font-weight: 700; color: var(--violet-700);
  }
}

/* ---------- F3 — Question « remettre dans l'ordre » ---------------------
   Écran : une ligne par étiquette, boutons 1, 2, 3… et vérification.
   Impression : une case vide devant chaque étiquette pour écrire le numéro. */
.lc-ordre { display: flex; flex-direction: column; gap: 0.75rem; }
.lc-ordre__ligne { display: flex; flex-direction: column; gap: 0.5rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--bordure); }
.lc-ordre__ligne:last-child { border-bottom: 0; padding-bottom: 0; }
.lc-ordre__tete { display: flex; align-items: flex-start; gap: 0.625rem; min-width: 0; }
.lc-ordre__case { display: none; }
.lc-ordre__lettre {
  flex-shrink: 0; width: 2rem; height: 2rem; margin-top: 0.1rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 0.5rem; background: var(--lavande-100); color: var(--violet-800);
  font-size: 1rem; font-weight: 700;
}
.lc-ordre__texte { min-width: 0; font-family: var(--police-lecture); font-size: var(--lc-question); line-height: 1.4; overflow-wrap: break-word; }
.lc-ordre__groupe { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lc-ordre__groupe label { position: relative; display: block; cursor: pointer; }
.lc-ordre__groupe input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lc-ordre__bouton {
  display: flex; align-items: center; justify-content: center;
  min-width: 3rem; min-height: 3rem; padding: 0 0.5rem;
  border-radius: 0.875rem; border: 2px solid var(--bordure-bouton);
  background: var(--blanc); color: var(--encre);
  font-size: 1.25rem; font-weight: 700;
}
.lc-ordre__groupe input:checked + .lc-ordre__bouton { background: var(--violet-600); border-color: var(--violet-600); color: var(--blanc); }
.lc-ordre__groupe input:focus-visible + .lc-ordre__bouton { outline: 3px solid var(--focus); outline-offset: 3px; }
.lc-ordre__marque { font-size: 1rem; font-weight: 700; }
.lc-ordre__ligne[data-etat="juste"] .lc-ordre__marque { color: var(--vert-800); }
.lc-ordre__ligne[data-etat="a-revoir"] .lc-ordre__marque { color: #8A4B00; }
.lc-ordre__verif { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.lc-ordre__verifier { min-height: 3rem; font-size: 1rem; }
.lc-ordre__retour { font-weight: 600; }
.lc-ordre__retour:empty { display: none; }

@media print {
  .lc-tableau { max-width: none; break-inside: avoid; }
  .lc-tableau__table { table-layout: auto; border: 1pt solid #2B2547; border-radius: 0; font-size: 11pt; line-height: 1.3; }
  .lc-tableau__titre { font-size: 10.5pt; color: #2B2547 !important; margin-bottom: 0.15rem; }
  .lc-tableau__table th, .lc-tableau__table td { padding: 0.12rem 0.45rem; border-top: 0.75pt solid #8C86A8; }
  .lc-tableau__table th + th, .lc-tableau__table th + td, .lc-tableau__table td + td { border-left: 0.75pt solid #8C86A8; }
  .lc-tableau__table thead th { background: #EEEAFD !important; color: #000000 !important; border-bottom: 1.2pt solid #2B2547; font-size: 10pt; }
  .lc-tableau__table tbody th { color: #000000; }

  .lc-ordre__groupe, .lc-ordre__verif, .lc-ordre__marque { display: none !important; }
  .lc-ordre { display: grid; grid-template-columns: 1fr 1fr; gap: 0.2rem 1.25rem; }
  .lc-ordre__ligne { padding-bottom: 0; border-bottom: 0; break-inside: avoid; }
  .lc-ordre__tete { align-items: center; gap: 0.4rem; }
  .lc-ordre__case { display: inline-block; flex-shrink: 0; width: 7mm; height: 7mm; border: 1.2pt solid #2B2547; border-radius: 2pt; }
  .lc-ordre__lettre { width: auto; height: auto; margin: 0; background: none !important; color: #2B2547 !important; font-size: 9.5pt; }
  .lc-ordre__lettre::after { content: '.'; }
  .lc-ordre__texte { font-size: 11.5pt; line-height: 1.3; }
  .lc-indisponible { border: 1pt dashed #8C86A8; font-size: 10pt; padding: 0.2rem 0.5rem; }
}

/* ---------- Impression : valeurs de référence, quels que soient les réglages
   Les réglages « Adapter l'affichage » (taille, espacement, contraste, fond)
   restent actifs à l'écran. À l'impression, la fiche utilise toujours les
   valeurs par défaut, comme le PDF : 2 pages A4, sans débordement.
   (La taille du texte est déjà fixée plus haut : html { font-size: 11.5pt }.) */
@media print {
  html, html[data-espacement], html[data-taille], html[data-contraste], html[data-fond] {
    --interligne: 1.6;
    --espace-lettres: 0.01em;
    --espace-mots: 0.06em;
    /* contraste et fond : couleurs par défaut */
    --fond: var(--blanc);
    --surface: var(--blanc);
    --texte: var(--encre);
    --texte-doux: var(--encre-douce);
    --texte-carte: var(--encre-carte);
    --bordure: var(--trait);
    --bordure-bouton: var(--lavande-200);
  }
  html[data-contraste="renforce"] .lc-feuille { color: var(--encre); }
}