@font-face {
  font-family: 'Fredoka';
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/fredoka-600.ttf') format('truetype');
}

@font-face {
  font-family: 'Playwrite France Traditionnelle';
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/playwrite-fr-trad-400.ttf') format('truetype');
}

@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/atkinson-hyperlegible-400.ttf') format('truetype');
}

@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/atkinson-hyperlegible-700.ttf') format('truetype');
}

:root {
  --rouge: #E5574B;
  --bleu: #2B9CC8;
  --vert: #93B83A;
  --gris: #A3A8AD;
  --orange: #F28C28;
  --violet: #8E5BB5;
  --bleu-fonce: #1D4E89;
  --bleu-clair: #8FD3F0;
  --vert-fonce: #5E7A1F;
  --bois: #EBD5AA;
  --encre: #1F2A33;
  --fond: #E8D9C0;
  --entete: #F6EEDF;
  --bord: #D2BE9A;
  --discret: #5E5040;
  --champ: #F8F1E4;
  --vignette: #EADCC2;
  --icone: #4F6A7A;
  --lien: #2B6F8F;
  --erreur: #B3261E;
  --trait-fin: #AEB5BC;
  --trait-fort: #8F979F;
  --trait-ecriture: #5A6169;
  --police-fiche: 'Fredoka', 'Arial Rounded MT Bold', sans-serif;
  --police-cursive: 'Playwrite France Traditionnelle', 'Comic Sans MS', cursive;
  --police-interface: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --marge: 16px; /* gouttière latérale de l'en-tête (le panneau « Récentes » s'y aligne) */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--police-interface);
  background: var(--fond);
  color: var(--encre);
}

button, input { font: inherit; }
a { color: var(--lien); }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }

.entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  position: relative; /* repère du panneau « Récentes » */
  padding: 6px var(--marge);
  background: var(--entete);
  border-bottom: 1px solid var(--bord);
}

.marque {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font: 600 22px var(--police-fiche);
}

.carres { display: flex; gap: 4px; }
.carres span { width: 14px; height: 14px; border-radius: 4px; }
.carres span:nth-child(1) { background: var(--rouge); }
.carres span:nth-child(2) { background: var(--bleu); }
.carres span:nth-child(3) { background: var(--vert); }

/* Menu des pages : contrôle segmenté, comme .choix ; la page active est inversée. */
.menu-vues { display: flex; }
.menu-vues a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 14px;
  border: 1px solid var(--bord);
  background: var(--champ);
  color: var(--encre);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.menu-vues a:first-child { border-radius: 10px 0 0 10px; }
.menu-vues a:last-child { border-radius: 0 10px 10px 0; border-left: 0; }
.menu-vues a[aria-current="page"] { background: var(--encre); border-color: var(--encre); color: #fff; }

.entete-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.recentes-panneau {
  position: absolute;
  top: calc(100% + 4px);
  right: var(--marge);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(340px, calc(100vw - 32px));
  padding: 14px;
  background: #fff;
  border: 1px solid var(--bord);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgb(31 42 51 / .18);
}

.recentes-panneau[hidden], .recentes-panneau button[hidden] { display: none; }

.recentes-liste {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: min(60vh, 420px);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.recentes-vide { margin: 0; font-size: 14px; color: var(--discret); }

.recente {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid var(--bord);
  border-radius: 10px;
  background: var(--champ);
  color: var(--encre);
  text-align: left;
  cursor: pointer;
}

.recente img { flex: none; width: 44px; height: 44px; border-radius: 6px; object-fit: cover; }
.recente-mot { font: 600 18px var(--police-fiche); letter-spacing: .03em; overflow-wrap: anywhere; }

.bouton-principal {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 22px;
  border: 0;
  border-radius: 12px;
  background: var(--encre);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.atelier {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  padding: 16px var(--marge);
}

.atelier[hidden], .bouton-principal[hidden] { display: none; }

.reglages, .reglages-relier {
  position: relative; /* repère des champs masqués (.masque) : sans lui ils prolongent la page quand le panneau défile */
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--bord);
  border-radius: 18px;
}

.groupe { display: flex; flex-direction: column; gap: 6px; }
.groupe[hidden] { display: none; }

.titre-groupe {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--discret);
}

.discret { margin: 0; font-size: 14px; color: var(--discret); }
.aide { font-size: 12px; }
#source { min-height: 1.3em; }

#mot, #relier-mot {
  min-height: 44px;
  padding: 10px 14px;
  border: 2px solid var(--bleu);
  border-radius: 12px;
  background: var(--champ);
  color: var(--encre);
  font: 600 28px var(--police-fiche);
  letter-spacing: .03em;
  text-transform: uppercase;
}

#erreur, #relier-erreur { margin: 0; font-size: 14px; font-weight: 700; color: var(--erreur); }

/* Visuellement masqué mais toujours focalisable (le <label> reste cliquable). */
.masque {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.zone-image-choix, .zone-illustration {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 12px;
  border: 2px dashed var(--bord);
  border-radius: 12px;
  cursor: pointer;
}

.zone-image-choix.survol, .zone-illustration.survol, .apercu.survol { outline: 3px dashed var(--bleu); outline-offset: -3px; background: var(--vignette); }

.masque:focus-visible + .zone-image-choix, .masque:focus-visible + .zone-illustration { outline: 3px solid var(--bleu); outline-offset: 2px; }

.vignette {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--vignette);
  color: var(--icone);
}

.vignette img { width: 100%; height: 100%; object-fit: cover; }
.vignette img[hidden], .vignette--image svg { display: none; }

.image-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#nom-image { overflow-wrap: anywhere; }
.lien { font-size: 14px; color: var(--lien); text-decoration: underline; }

/* Options : section centrée (légendes, case) ; boutons radio en contrôle segmenté (les vrais <input> restent focalisables, voir .masque). */
#options { text-align: center; }
.choix { display: flex; min-width: 0; margin: 0; padding: 0; border: 0; }
.choix legend { padding: 0; margin: 0 auto 4px; font-size: 14px; font-weight: 700; }
.choix label {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 4px 8px;
  border: 1px solid var(--bord);
  background: var(--champ);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.choix label:first-of-type { border-radius: 10px 0 0 10px; }
.choix label:last-of-type { border-radius: 0 10px 10px 0; }
.choix label + .masque + label { border-left: 0; }
.choix .masque:checked + label { background: var(--encre); border-color: var(--encre); color: #fff; }
.choix .masque:focus-visible + label { outline: 3px solid var(--bleu); outline-offset: 2px; }

.case { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; font-size: 14px; font-weight: 700; cursor: pointer; }
.case input { width: 22px; height: 22px; accent-color: var(--encre); }

/* Les lettres : palette de pastilles, puis ruban (une pièce par pastille de bois, un maillon entre deux lettres voisines). */
/* 9 pastilles de 36 px sur 2 rangées (5 + 4, centrées) : la largeur est celle de 5 pastilles et de leurs 4 écarts. */
.palette { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: calc(5 * 36px + 4 * 8px); max-width: 100%; margin-inline: auto; }
.pastille { width: 36px; height: 36px; flex: none; padding: 0; border: 2px solid var(--bord); border-radius: 50%; cursor: pointer; }
.pastille[aria-pressed="true"] { border-color: var(--encre); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--encre); }
.pastille--rouge { background: var(--rouge); }
.pastille--bleu { background: var(--bleu); }
.pastille--vert { background: var(--vert); }
.pastille--gris { background: var(--gris); }
.pastille--orange { background: var(--orange); }
.pastille--violet { background: var(--violet); }
.pastille--bleuFonce { background: var(--bleu-fonce); }
.pastille--bleuClair { background: var(--bleu-clair); }
.pastille--gomme { background: linear-gradient(135deg, #fff 44%, var(--erreur) 44% 56%, #fff 56%); }

.ruban { display: grid; gap: 2px 0; padding: 2px; overflow-x: auto; }
.ruban-piece {
  min-height: 34px;
  padding: 0 4px;
  border: 1px solid var(--bord);
  border-radius: 8px;
  background: var(--bois);
  font: 600 20px var(--police-fiche);
  cursor: pointer;
}
.ruban-piece:disabled { cursor: default; }
.ruban-maillon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  justify-self: center;
  padding: 0;
  border: 1px solid var(--bord);
  border-radius: 50%;
  background: var(--champ);
  color: var(--icone);
  cursor: pointer;
}
.ruban-maillon--lie { border-color: var(--encre); background: var(--encre); color: #fff; }

.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.actions[hidden] { display: none; }
.actions-correction { display: grid; grid-template-columns: 1fr 1fr; }

.bouton-secondaire {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--bord);
  border-radius: 10px;
  background: var(--champ);
  color: var(--encre);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.bouton-secondaire:disabled { color: #8A8478; cursor: default; }
.bouton-secondaire[hidden] { display: none; }

.credit { margin: 0; font-size: 13px; color: var(--discret); }

.apercu-section { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }

.apercu-titre {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
}

.apercu-titre h2 { margin: 0; font: 600 20px var(--police-fiche); }

/* Zone de l'aperçu : en une colonne elle garde le ratio A4 ; en deux colonnes elle prend la hauteur restante. La fiche, hors flux, y est mise à l'échelle par scalePreview. */
.apercu { position: relative; aspect-ratio: 297 / 210; overflow: hidden; }

/* Deux colonnes : la page occupe exactement la fenêtre, seul le panneau défile s'il est trop haut. */
@media (min-width: 900px) {
  :root { --marge: 32px; }
  html, body { height: 100%; }
  body { display: grid; grid-template-rows: auto minmax(0, 1fr); }
  .atelier {
    grid-template-columns: minmax(340px, 380px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    min-height: 0;
    padding: 16px var(--marge);
  }
  .reglages, .reglages-relier { min-height: 0; overflow-y: auto; }
  /* Le panneau défile : « Ajouter à la série » reste collé en bas, toujours visible. */
  .actions-serie { position: sticky; bottom: 0; z-index: 1; margin: 0 -16px; padding: 10px 16px; background: #fff; border-top: 1px solid var(--bord); }
  .apercu { flex: 1; min-height: 0; aspect-ratio: auto; }
}

/* Feuille de la vue Relier : A4 portrait réel, mise à l'échelle dans l'aperçu par scalePreview.
   Les lignes (pas --pas) partent du haut ; chaque ligne : mots | point | espace de tracé (≥ 40 mm) | point | image, les colonnes de largeur fixe alignent les points.
   Les variables en mm (--pas, --hauteur, --largeur-mots, --largeur-image) sont posées par renderFeuille (public/rendu-relier.js) depuis geometrie (public/relier.js). */
.apercu-relier { aspect-ratio: 210 / 297; }
.feuille-relier {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  align-content: start;
  grid-auto-rows: var(--pas);
  width: 210mm;
  height: 297mm;
  padding: 12mm;
  transform-origin: top left;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
}
.ligne-relier { display: grid; grid-template-columns: var(--largeur-mots) 3mm minmax(40mm, 1fr) 3mm var(--largeur-image); column-gap: 2mm; align-items: center; }
.mot-relier { display: flex; align-items: center; justify-content: flex-end; height: var(--hauteur); overflow: hidden; }
.point-relier { width: 3mm; height: 3mm; border-radius: 50%; background: #000; }
.image-relier { height: var(--hauteur); }
.image-relier img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; }
/* Mots en texte : la boîte du mot a exactement la hauteur de l'encre du style (K em), donc font-size = hauteur / K ; fitText (public/rendu-fiche.js) réduit ensuite un mot trop large.
   line-height: 0 réduit la ligne à un trait, posé au milieu de la police (Fredoka : 0,365 em au-dessus de la ligne de base ; Playwrite : 0,5 em) ; les paddings vont de ce trait au haut et au bas de l'encre.
   Encre mesurée au canvas (sur « ÉÀÇ » pour les majuscules, « éàçbdfghjklpqy » en script, hampes et jambages en cursive) : majuscules 0,914 + 0,175 = 1,09 em ; script 0,72 + 0,229 = 0,95 em ; cursive 1,43 + 0,93 = 2,36 em.
   Les paddings latéraux gardent les débords d'encre des premières et dernières lettres (j, f cursif). */
.mot-texte { display: block; overflow: hidden; white-space: nowrap; line-height: 0; padding-inline: .12em .06em; color: #000; }
.mot-texte--majuscules, .mot-texte--script { font-family: var(--police-fiche); font-weight: 600; }
.mot-texte--majuscules { font-size: calc(var(--hauteur) / 1.09); padding-block: .55em .54em; }
.mot-texte--script { font-size: calc(var(--hauteur) / .95); padding-block: .355em .595em; }
.mot-texte--cursive { font-family: var(--police-cursive); font-weight: 400; font-size: calc(var(--hauteur) / 2.36); padding-block: .93em 1.43em; }

/* Panneau Relier : liste des lignes (rééditer, supprimer). */
.relier-lignes { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.relier-ligne { display: flex; overflow: hidden; border: 2px solid var(--bois); border-radius: 12px; background: var(--champ); }
.relier-ligne--edition { border-color: var(--bleu); }
.relier-action { position: relative; min-height: 44px; border: 0; background: none; color: var(--encre); cursor: pointer; }
.relier-action--reediter { flex: 1; min-width: 0; padding: 4px 12px; overflow: hidden; font: 600 20px var(--police-fiche); text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.relier-action--monter, .relier-action--descendre { width: 44px; border-left: 1px solid var(--bord); font-size: 16px; }
.relier-action:disabled { opacity: .35; cursor: default; }
.alerte-relier { margin: 0; font-size: 14px; font-weight: 700; color: var(--erreur); }
.feuille-relier img[draggable="true"] { cursor: grab; }
.relier-action--supprimer { width: 44px; border-left: 1px solid var(--bord); font-size: 20px; font-weight: 700; }

.fiche {
  display: grid;
  grid-template-rows: 30% 22% 48%;
  width: 297mm;
  height: 210mm;
  padding: 12mm;
  overflow: hidden;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(74, 52, 20, .20);
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
}

.ligne {
  display: flex;
  align-items: center;
  justify-content: safe center;
  overflow: hidden; /* coupe tout ce qui dépasse de la bande : le test E2E « l'encre du mot tient dans sa bande » (e2e/options.spec.js) garantit que les lettres n'en dépassent pas */
  white-space: nowrap;
  font-family: var(--police-fiche);
  font-weight: 600;
  line-height: 1;
}

.ligne-majuscules { font-size: 26mm; color: #000; }
/* Cursive scolaire (boucles des l, b, h, k, f) : l'encre de Playwrite France Traditionnelle (hampes 1,43 em au-dessus de la ligne de base, jambages 0,93 em en dessous, 2,36 em en tout) ne tient pas dans la bande de 22 % :
   la ligne 2 prend la hauteur de son contenu (voir plus bas), avec ou sans trait, et la ligne 3 le reste. 28 mm est la plus grande taille qui laisse 20 mm à la ligne 3 avec le trait. */
.ligne-majuscules.ligne2--cursive { font-family: var(--police-cursive); font-size: 28mm; font-weight: 400; }
.mot-ligne2 { position: relative; }
/* Cursive : la hampe (1,43 em) et le jambage (0,93 em) dépassent la ligne de 1 em de .43 em en haut et de .93 em en bas ; les paddings donnent à la ligne 2 la hauteur de l'encre. */
.ligne2--cursive .mot-ligne2 { padding-top: .44em; padding-bottom: .94em; }
/* Ligne 2 « Aucun » : le mot garde sa place (donc le trait) mais n'est ni visible, ni lu, ni imprimé. */
.ligne2--aucun .mot-ligne2 { visibility: hidden; }
.ligne2--aucun .trait-ecriture { visibility: visible; }
/* Avec le trait d'écriture (ou en cursive), la ligne 2 prend la hauteur de son contenu (le mot garde sa taille) et la ligne 3 le reste.
   Le padding-bottom du mot (en em, donc proportionnel à lui) fixe l'espace trait-mot à ~2,5 fois la hauteur du mot (capitales, ou hauteur d'x en minuscules et cursive), mesuré depuis la ligne de base pour les majuscules et depuis le bas des jambages pour minuscules et cursive (le trait ne doit pas coller au p ni au f) : une valeur par style.
   Le padding-top laisse la place aux accents (majuscules) et aux hampes (cursive), qui dépassent la ligne de 1 em. */
.fiche:has(.ligne2--trait), .fiche:has(.ligne2--cursive) { grid-template-rows: 30% auto minmax(0, 1fr); }
.ligne2--trait { padding-bottom: 5mm; } /* avec les 4 mm de la zone image, >= 9 mm entre le trait et l'image */
.ligne2--trait .mot-ligne2 { padding-top: .1em; padding-bottom: 1.65em; }
.ligne2--minuscules.ligne2--trait .mot-ligne2 { padding-bottom: 1.38em; }
.ligne2--cursive.ligne2--trait .mot-ligne2 { padding-top: .44em; padding-bottom: 2.26em; }
/* Trait centré sous le mot ; sa largeur (celle du bois de la ligne 1) est posée par ajusterTrait (public/rendu-fiche.js). */
.trait-ecriture { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); border-top: .9mm solid var(--trait-ecriture); }

/* Lettres aimantées : un <g> par pièce (bois + lettre) ; la couleur du <g> est héritée par la lettre. */
.pieces { width: 100%; height: 100%; }
.pieces .bois { fill: var(--bois); }
.seg { cursor: pointer; pointer-events: bounding-box; }
.seg:focus { outline: none; }
.seg:focus-visible .bois { stroke: var(--bleu); stroke-width: 3px; stroke-linejoin: round; } /* pièce focalisée au clavier */
/* Couleur d'une pièce : `fill` sur la fiche, `color` sur le ruban du panneau (les classes automatiques voyelle, consonne, complexe et autre valent rouge, bleu, vert et noir). */
.seg--voyelle, .seg--rouge { fill: var(--rouge); color: var(--rouge); }
.seg--consonne, .seg--bleu { fill: var(--bleu); color: var(--bleu); }
.seg--complexe, .seg--vert { fill: var(--vert); color: var(--vert); }
.seg--autre { fill: #000; color: #000; }
.seg--gris { fill: var(--gris); color: var(--gris); }
.seg--orange { fill: var(--orange); color: var(--orange); }
.seg--violet { fill: var(--violet); color: var(--violet); }
.seg--bleuFonce { fill: var(--bleu-fonce); color: var(--bleu-fonce); }
.seg--bleuClair { fill: var(--bleu-clair); color: var(--bleu-clair); }

.ligne-image { display: grid; grid-template-columns: 1fr 1fr; min-height: 0; }
.zone-image, .zone-libre { min-height: 0; padding: 4mm; }
.cadre-droite { width: 100%; height: 100%; border: .5mm solid var(--trait-fort); border-radius: 4mm; }
.seyes { display: block; width: 100%; height: 100%; }
.seyes-fin, .seyes-fort { fill: none; }
.seyes-fin { stroke: var(--trait-fin); stroke-width: .5mm; }
.seyes-fort { stroke: var(--trait-fort); stroke-width: .8mm; }
.cadre-image { width: 100%; height: 100%; }
.zone-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.zone-image img[hidden] { display: none; }

/* Série : bande compacte sous l'aperçu — en-tête à gauche, vignettes (miniature, mot, déplacer/supprimer) en une rangée qui défile. */
.serie { display: flex; flex-direction: column; gap: 6px; padding: 8px 12px; background: #fff; border: 1px solid var(--bord); border-radius: 18px; }
.serie[hidden] { display: none; }
.serie-entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.serie-entete h2 { margin: 0; font: 600 20px var(--police-fiche); }
.confirmation { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.confirmation[hidden] { display: none; }

.serie-liste { display: flex; flex: 1; gap: 8px; min-width: 0; margin: 0; padding: 2px 2px 6px; overflow-x: auto; list-style: none; }

.vignette-serie {
  display: flex;
  flex: none;
  align-items: center;
  overflow: hidden;
  border: 2px solid var(--bois);
  border-radius: 12px;
  background: var(--champ);
}
.vignette-serie--edition { border-color: var(--bleu); }

.vignette-serie-corps {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 8px;
  border: 0;
  background: none;
  color: var(--encre);
  cursor: pointer;
}
.vignette-serie-corps img { flex: none; width: 44px; height: 44px; object-fit: contain; border-radius: 6px; background: #fff; }
.vignette-serie-numero {
  flex: none;
  min-width: 24px;
  padding: 1px 6px;
  border-radius: 12px;
  background: var(--encre);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.vignette-serie-mot { max-width: 96px; overflow: hidden; font: 600 20px var(--police-fiche); text-overflow: ellipsis; }

.vignette-serie-actions { display: flex; align-self: stretch; border-left: 1px solid var(--bord); }
.serie-action {
  width: 44px;
  min-height: 44px;
  border: 0;
  background: none;
  color: var(--encre);
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
}
.serie-action + .serie-action { border-left: 1px solid var(--bord); }
.serie-action:disabled { color: #8A8478; cursor: default; }

@media (min-width: 900px) {
  .serie { flex-direction: row; align-items: center; gap: 16px; }
  /* Les boutons de l'en-tête rejoignent sa grille : « La série » + « Vider » sur une rangée, « Imprimer » dessous. */
  .serie-entete { display: grid; grid-template-columns: auto auto; align-items: center; gap: 4px 12px; }
  .serie-entete .actions { display: contents; }
  #imprimer-serie, #imprimer-pages { grid-area: 2 / 1 / 3 / 3; }
  #vider-serie, #vider-pages, .confirmation { grid-area: 1 / 2; }
  .confirmation { grid-row: 3; grid-column: 1 / -1; }
}

/* Conteneur d'impression de la série : rendu hors écran (mise en page réelle pour ajuster les textes), visible seulement à l'impression. */
#impression-serie, #impression-relier { position: absolute; top: 0; left: -10000px; }

@page { size: A4 landscape; margin: 0; }

@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: #fff; }
  .controles { display: none !important; }
  html, body { height: auto; }
  body { display: block; }
  .atelier[hidden] { display: none !important; }
  .atelier, .apercu-section { display: block; height: auto; padding: 0; overflow: visible; }
  .apercu { position: static; aspect-ratio: auto; overflow: visible; }
  .seg:focus-visible .bois { stroke: none; }
  .fiche { position: static; transform: none !important; border-radius: 0; box-shadow: none; }
  .feuille-relier { position: static; transform: none !important; box-shadow: none; }
  body.impression-serie .atelier { display: none; }
  #impression-serie { position: static; }
  #impression-serie .fiche:not(:last-child) { break-after: page; }
  /* Impression Relier : seules les feuilles du conteneur s'impriment (ni la vue Relier, ni la fiche), une par page A4 portrait. */
  body.impression-relier #vue-relier, body.impression-relier #vue-fiche { display: none; }
  #impression-relier { position: static; }
  #impression-relier .feuille-relier:not(:last-child) { break-after: page; }
}