/* ------------------------------------------------------------------ */
/* Marelle : la réglure Seyes est dessinée par la police elle-même.     */
/* Le glyphe « espace » porte le lignage, les lettres prennent la       */
/* couleur CSS. Une ligne d'espaces insécables = une ligne vierge.      */
/* ------------------------------------------------------------------ */
@font-face{
  font-family:"Marelle";
  src:url("../../fonts/Marelle-Regular.woff2") format("woff2");
  font-display:swap;
}
/* La réglure n'est plus celle de la police : ses traits de 0,062 mm ne
   sortent pas d'une imprimante laser, alors qu'ils s'affichent à l'écran
   et dans le PDF. On la trace en bordures CSS, à l'épaisseur voulue —
   test à l'appui, les bordures s'impriment franchement là où un fond est
   tramé. La géométrie reprend exactement celle de Marelle : un trait
   tous les 0,48 em, cinq par ligne d'écriture. */

/* ---------- Réglages ---------- */
.reglages{display:grid;gap:16px;margin-bottom:16px}
/* les listes déroulantes : larges, deux ou trois par ligne */
.reglages-listes{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
/* les nombres : étroits, alignés entre eux */
.reglages-nombres{grid-template-columns:repeat(auto-fit,minmax(180px,220px))}
.reglages .field{margin-bottom:0}
.reglages select,
.reglages input[type=number]{width:100%;min-width:0}
.row-actions{margin-top:18px;align-items:center}
.jauge{font-size:.95rem;color:var(--gris)}
.jauge.ok{color:var(--vert)}
.jauge.trop{color:var(--rouge);font-weight:600}

/* ---------- La feuille ---------- */
.feuille{
  --interligne:2mm;
  --taille-ecriture:calc(var(--interligne) / 0.48);   /* hauteur d'x = 0,48 em */
  color:#000;
}
.page{
  background:#fff;
  width:210mm;min-height:297mm;margin:0 auto 24px;padding:7mm;
  box-shadow:var(--ombre);border-radius:2px;
}
/* La page garde ses 210 mm — sinon les retours à la ligne et le nombre de
   phrases par page changeraient — mais on l'agrandit à l'écran pour
   qu'elle occupe la largeur du panneau de réglages. L'agrandissement se
   fait par transform, compris partout, la hauteur étant compensée en
   marge puisque transform ne déplace pas ce qui suit. */
@media screen{
  .page{transform:scale(var(--zoom,1));transform-origin:top center}
}
.feuille-entete{
  display:flex;flex-wrap:wrap;gap:10px 24px;align-items:flex-end;
  margin-bottom:6mm;font-family:system-ui,sans-serif;
}
.feuille-titre{font-size:11pt;font-weight:700;margin:0}
.feuille-titre small{display:block;font-weight:400;color:#555;font-size:9pt}
.feuille-champs{display:flex;gap:16px;flex-wrap:wrap;margin-left:auto;font-size:10pt}
.feuille-entete.suite{
  margin-bottom:4mm;padding-bottom:2mm;border-bottom:.5pt solid #bbb;
}
.feuille-entete.suite .feuille-titre small{display:inline;margin-left:8px}
.champ-boite{border:1.5pt solid #000;padding:2pt 6pt;min-width:26mm;min-height:8mm}
.champ-boite span{font-size:8pt;color:#333;display:block}
.consigne{
  font-family:system-ui,sans-serif;font-size:9.5pt;color:#333;
  margin:0 0 4mm;padding-bottom:2mm;border-bottom:.5pt solid #bbb;
}

/* ---------- Zone d'écriture ---------- */
.zone-ecriture{position:relative}
/* La réglure est peinte une seule fois pour tout le groupe de lignes.
   Peinte ligne par ligne, les arrondis au pixel décalaient les traits d'une
   ligne à l'autre — jusqu'à 11 % d'écart, mesuré. Un seul motif, un seul
   arrondi : le pas est rigoureusement constant, comme sur les feuilles de
   Desmoulins qui tracent toute la page d'un coup.
   Les cinq traits ont la même épaisseur ; seule la couleur distingue la
   ligne d'écriture, là encore comme Desmoulins. */
.lignes{
  background-image:repeating-linear-gradient(to bottom,
    transparent 0,
    transparent 0.24em, var(--interligne-couleur) 0.24em,
    var(--interligne-couleur) calc(0.24em + var(--ep-reglure)),
    transparent calc(0.24em + var(--ep-reglure)),
    transparent 0.72em, var(--interligne-couleur) 0.72em,
    var(--interligne-couleur) calc(0.72em + var(--ep-reglure)),
    transparent calc(0.72em + var(--ep-reglure)),
    transparent 1.2em, var(--interligne-couleur) 1.2em,
    var(--interligne-couleur) calc(1.2em + var(--ep-reglure)),
    transparent calc(1.2em + var(--ep-reglure)),
    transparent 1.68em, var(--ligne-forte) 1.68em,
    var(--ligne-forte) calc(1.68em + var(--ep-reglure)),
    transparent calc(1.68em + var(--ep-reglure)),
    transparent 2.16em, var(--interligne-couleur) 2.16em,
    var(--interligne-couleur) calc(2.16em + var(--ep-reglure)),
    transparent calc(2.16em + var(--ep-reglure)),
    transparent 2.4em);
  font-family:"Marelle",cursive;
  font-size:var(--taille-ecriture);      /* les em du motif suivent l'écriture */
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}
.ligne{
  /* La police doit être posée ici : c'est elle qui fixe la position de la
     ligne de base dans la boîte, et donc l'alignement des lettres sur la
     réglure. Héritée de l'interface, la ligne de base remontait d'un quart
     d'interligne et les lettres flottaient au-dessus des traits. */
  font-family:"Marelle",cursive;
  font-size:var(--taille-ecriture);
  line-height:2.4;                 /* 5 interlignes : la réglure s'enchaîne */
  margin:0;
}

/* Couleurs opaques, jamais de rgba() : une transparence est tramée à
   l'impression et ressort beaucoup trop pâle. */
.calque-reglure{
  font-family:"Marelle",cursive;
  color:#666666;                   /* le modèle à repasser, 60 % de noir */
}
.ligne.libre{white-space:nowrap;overflow:hidden}
.ligne.libre .calque-reglure{color:transparent}

/* Réglure : couleurs et épaisseur, réglées ici.
   1 px vaut 0,265 mm à l'impression — plus épais que les 0,12 mm validés au
   test, donc largement imprimable — et reste visible à l'écran, là où une
   valeur en millimètres tomberait sous le demi-pixel et disparaîtrait. */
.feuille{
  /* Le violet ressort bleu à l'impression : la conversion RVB vers CMJN de
     l'imprimante perd du magenta. Ces teintes sont donc poussées vers le
     rouge pour retomber sur du violet une fois sur le papier. */
  --ligne-forte:#8B4BD0;
  --interligne-couleur:#AE8AE6;
  --ep-reglure:1px;                /* 0,265 mm : proche des 0,20 mm de
                                      Desmoulins, et visible à l'écran */
}
.feuille.reglure-mauve{--ligne-forte:#A64BC0;--interligne-couleur:#C489DA}
.feuille.reglure-bleu {--ligne-forte:#1F5FA8;--interligne-couleur:#4B87C4}
.feuille.reglure-gris {--ligne-forte:#3F3F3F;--interligne-couleur:#6E6E6E}

/* ---------- Un bloc par phrase ---------- */
.bloc{break-inside:avoid;page-break-inside:avoid;margin-bottom:4mm}
.bloc + .bloc{border-top:.4pt dotted #bbb;padding-top:3mm}
.phrase-ref{
  font-family:system-ui,sans-serif;font-size:10.5pt;font-weight:600;
  margin:0 0 1.5mm;color:#111;
}
/* Heure de départ et d'arrivée, à droite de chaque phrase : le temps se
   relève phrase par phrase, au crayon */
.chrono-champs{
  float:right;margin-left:6mm;
  font-size:8.5pt;font-weight:400;color:#444;white-space:nowrap;
}
.chrono-champs b{
  display:inline-block;width:16mm;margin:0 3mm 0 1mm;
  border-bottom:.5pt solid #555;
}
.analyse,.sens,.explication{
  font-family:system-ui,sans-serif;font-size:8.5pt;color:#333;margin:0 0 1mm;
}
.sens{font-style:italic}
.explication{color:#444}
.sens strong,.explication strong{color:#111}
.consigne .legende{
  font-family:system-ui,sans-serif;font-size:8pt;color:#555;
  display:inline-block;margin-left:6px;
}

/* ---------- Fonctions grammaticales ---------- */
/* Couleur + style de trait : reste lisible imprimé en noir et blanc */
.g-sujet,.g-verbe,.g-cod,.g-coi,.g-cc{
  text-decoration-line:underline;text-decoration-thickness:1.4px;text-underline-offset:3px;
}
.g-sujet{color:#1a56b0;text-decoration-style:solid;text-decoration-color:#1a56b0}
.g-verbe{color:#c0392b;text-decoration-style:double;text-decoration-color:#c0392b}
.g-cod  {color:#1f7a44;text-decoration-style:dotted;text-decoration-color:#1f7a44}
.g-coi  {color:#7a3fa8;text-decoration-style:dashed;text-decoration-color:#7a3fa8}
.g-cc   {color:#a8641a;text-decoration-style:wavy;text-decoration-color:#a8641a}
/* L'adverbe n'a pas de fonction : il est encadré, non souligné */
.g-adv{
  color:#5c5c5c;text-decoration-line:none;
  border:1px dotted #9a9a9a;border-radius:3px;padding:0 2px;
}

/* ---------- Mots expliqués ---------- */
.lexique{
  margin:6mm 0 0;padding-top:3mm;border-top:.5pt solid #bbb;
  font-family:system-ui,sans-serif;font-size:9pt;color:#222;
}
.lexique h3{font-size:9pt;margin:0 0 2mm;text-transform:uppercase;letter-spacing:.06em;color:#555}
.lexique dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:1mm 4mm}
.lexique dt{font-weight:700}
.lexique dd{margin:0}

/* ---------- Collection ---------- */
.filtres{margin-top:8px}
.carte-pangramme{
  background:var(--carte);border-radius:var(--radius);box-shadow:var(--ombre);
  padding:20px 24px;margin-bottom:14px;
}
.carte-pangramme .cursive{
  font-family:"Marelle",cursive;font-size:1.9rem;line-height:1.7;
  margin:0 0 10px;color:var(--encre);
}
.carte-pangramme .phrase-ref{font-size:1.05rem;margin-bottom:12px}
.carte-pangramme .sens{font-size:1rem;color:var(--encre);margin-bottom:6px}
.carte-pangramme .analyse{font-size:.95rem;color:var(--gris);margin-bottom:12px}
.carte-pangramme .analyse strong,.carte-pangramme .sens strong{color:var(--encre)}
.badge-temps{background:var(--vert-clair);color:var(--vert)}
.legende{margin:8px 0 0;font-size:.95rem;color:var(--gris)}
.carte-pangramme .infos{
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  font-size:.9rem;color:var(--gris);margin-bottom:10px;
}
.badge{
  background:var(--peche-clair);color:var(--orange);border-radius:999px;
  padding:2px 12px;font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;
}
.mots{margin:0 0 14px;padding:0;list-style:none;display:grid;gap:6px}
.mots li{font-size:.95rem}
.mots strong{color:var(--encre)}
.mots span{color:var(--gris)}

/* Une phrase mise de côté : visible dans la collection, hors des tirages */
.carte-pangramme.mise-de-cote{opacity:.55;border-left:6px solid var(--peche)}
.partage{border-left:6px solid var(--orange)}
.partage a.btn{display:inline-block;text-decoration:none}

/* ---------- Cours ---------- */
table.cours{width:100%;border-collapse:collapse;font-size:.98rem;min-width:640px}
table.cours th,table.cours td{
  text-align:left;padding:10px 12px;border-bottom:1px solid var(--peche);vertical-align:top;
}
table.cours th{font-size:.8rem;text-transform:uppercase;color:var(--gris)}
table.cours td:first-child{white-space:nowrap;font-weight:600}
.exemple{display:block;margin-top:6px;color:var(--gris);font-size:.92rem}
.cours-temps{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.carte-temps{
  background:var(--peche-clair);border-radius:var(--radius);padding:16px 18px;
}
.carte-temps h3{margin:0 0 6px;font-size:1.05rem;color:var(--orange)}
.carte-temps p{margin:0 0 8px;font-size:.95rem}
.exemple-phrase{font-size:1rem;color:var(--encre)}

/* ---------- Atelier ---------- */
#saisie-pangramme{
  width:100%;font:inherit;font-size:1.1rem;padding:12px;
  border:2px solid var(--peche);border-radius:8px;resize:vertical;
}
.alphabet{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 10px}
.lettre{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:8px;
  background:var(--peche-clair);color:var(--encre);
  font-weight:700;font-size:1.05rem;
}
.lettre.trouvee{
  background:var(--vert-clair);color:var(--vert);
  text-decoration:line-through;text-decoration-thickness:2px;opacity:.75;
}
.etat{font-weight:600;margin:0}
.etat.ok{color:var(--vert)}
.etat.attente{color:var(--gris)}
.fonctions{margin-bottom:12px}
.mots-cliquables{
  font-size:1.25rem;line-height:2.1;margin:0 0 20px;
  padding:14px;background:var(--peche-clair);border-radius:8px;
}
.mot-cliquable{cursor:pointer;padding:1px 2px;border-radius:4px}
.mot-cliquable:hover{background:#fff}
.mot-cliquable.g-neutre{color:var(--encre)}
#liste-mots-rares .sup{background:none;border:0;color:var(--gris);cursor:pointer}
#liste-mots-rares .sup:hover{color:var(--rouge)}

/* ---------- Chrono ---------- */
.phrase-en-cours{margin:4px 0 16px;color:var(--gris)}
.phrase-en-cours strong{color:var(--encre)}
.chrono-bloc{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:8px}
.chrono-affichage{
  font-size:3.4rem;font-weight:800;font-variant-numeric:tabular-nums;
  color:var(--orange);line-height:1;
}
.saisie-temps{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:0 0 18px;padding-top:14px;border-top:1px solid var(--peche);
}
.saisie-temps .ou{color:var(--gris);font-style:italic}
.saisie-temps input{width:80px}
.curseur{width:min(360px,100%);accent-color:var(--orange)}
.podium{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.podium-place{
  background:var(--peche-clair);border-radius:var(--radius);padding:14px 20px;
  min-width:170px;border-left:6px solid var(--peche);
}
.podium-place.p1{border-left-color:#e0a800}
.podium-place.p2{border-left-color:#9aa0a6}
.podium-place.p3{border-left-color:#b87333}
.podium-nom{font-weight:700;font-size:1.1rem}
.podium-score{font-size:1.5rem;font-weight:800;color:var(--orange);line-height:1.2}
.podium-detail{color:var(--gris);font-size:.9rem}
.table-wrap{overflow-x:auto}
.historique{width:100%;border-collapse:collapse}
.historique th,.historique td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--peche)}
.historique th{font-size:.8rem;text-transform:uppercase;color:var(--gris)}
.historique .phrase{max-width:26ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.historique .sup{background:none;border:0;color:var(--gris);cursor:pointer;font-size:1rem}
.historique .sup:hover{color:var(--rouge)}

/* ---------- Impression ---------- */
@media print{
  @page{size:A4 portrait;margin:7mm}   /* la zone non imprimable de la HP ne fait que 4,2 mm */
  body{background:#fff}
  main{padding:0;max-width:none}
  #view-collection,#view-chrono{display:none !important}
  #view-feuille{display:block !important}
  .feuille{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .page{
    width:auto;min-height:0;padding:0;margin:0;box-shadow:none;border-radius:0;
    break-after:page;page-break-after:always;
  }
  .page:last-child{break-after:auto;page-break-after:auto}
}

@media screen and (max-width:820px){
  .page{width:auto;max-width:100%;min-height:0;padding:8mm}
}