/* =========================================================
   Générateur de jeux à imprimer — 1 instit à la station
   Polices : dépose Andika + Marelle dans assets/fonts/
   (mêmes fichiers .woff2 que le cahier prénom cursive)
   ========================================================= */

@font-face{font-family:"Andika";src:url("assets/fonts/Andika-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
/* Marelle Bâton (SIL OFL) : minuscules cursives, majuscules bâton.
   Fournie avec l'outil, rien à copier. */
@font-face{font-family:"Marelle";src:url("assets/fonts/MarelleBaton-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
/* Script Bâton : Andika modifiée (SIL OFL), I majuscule sans empattements.
   Renommée comme l'exige la licence pour un fichier modifié. */
@font-face{font-family:"ScriptBaton";src:url("assets/fonts/ScriptBaton-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
/* GE Typo Libre : cursive romande (Etat de Neuchâtel / Etat de Fribourg),
   déclarée libre de droits dans le fichier lui-même. */
@font-face{font-family:"GeTypo";
  src:url("assets/fonts/GeTypoLibre.woff2") format("woff2"),
      url("assets/fonts/GeTypoLibre.ttf") format("truetype");
  font-weight:400;font-display:swap}

:root{
  /* couleurs de la marque : rose, mauve, bleu */
  --rose:#E0688F;
  --mauve:#7B5EA7;
  --bleu:#3D8FC6;

  --papier:#faf7fc;
  --carte:#ffffff;
  --encre:#332a3d;
  --encre-2:#6f6480;
  --trait:#e8e0f0;

  --accent:var(--mauve);
  --accent-fonce:#63498a;
  --accent-clair:#f2ecfa;
  --alerte:#c0455f;

  --r:10px;
  --sh:0 1px 2px rgba(51,42,61,.05), 0 8px 24px rgba(123,94,167,.07);
}

*{box-sizing:border-box}
/* L'attribut hidden doit toujours l'emporter : sans cette règle, les
   display:grid / display:flex plus bas laissent les panneaux visibles. */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--papier); color:var(--encre);
  font-family:"Andika", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:16px; line-height:1.5;
  -webkit-text-size-adjust:100%;
}
h1,h2,h3{margin:0; font-weight:700; letter-spacing:-.01em}
h2{font-size:1.15rem}
h3{font-size:1rem}
p{margin:0}
.sub{color:var(--encre-2); font-size:.9rem; margin-top:.25rem}
.hint{color:var(--encre-2); font-size:.82rem}
em{font-style:italic}

/* ---------- boutons ---------- */
.btn{
  font:inherit; font-size:.92rem; cursor:pointer;
  border:1px solid var(--trait); background:var(--carte); color:var(--encre);
  padding:.55rem .95rem; border-radius:var(--r);
  transition:background .15s, border-color .15s, transform .05s;
}
.btn:hover{background:#f3efe8}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.btn-primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn-primary:hover{background:var(--accent-fonce)}
.btn-ghost{background:transparent}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.btn-row{display:flex; gap:.5rem; flex-wrap:wrap}

/* ---------- écran de code ---------- */
.gate{
  position:fixed; inset:0; display:grid; place-items:center;
  background:var(--papier); padding:1.25rem; z-index:50;
}
.gate-box{
  width:min(420px,100%); background:var(--carte); border:1px solid var(--trait);
  border-radius:16px; box-shadow:var(--sh); padding:2rem 1.75rem;
}
.gate-eyebrow{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mauve); font-weight:700; margin-bottom:.5rem;
}
.gate-box{border-top:4px solid var(--rose)}
.gate-title{font-size:1.4rem; line-height:1.25}
.gate-help{color:var(--encre-2); font-size:.9rem; margin-top:.6rem}
.gate-field{display:flex; gap:.5rem; margin-top:1.1rem}
.gate-field input{
  flex:1; font:inherit; letter-spacing:.12em; text-transform:uppercase;
  padding:.6rem .75rem; border:1px solid var(--trait); border-radius:var(--r);
  background:var(--papier);
}
.gate-field input:focus{outline:2px solid var(--accent); outline-offset:1px}
.gate-msg{min-height:1.2rem; margin-top:.7rem; font-size:.88rem}
.gate-msg.err{color:var(--alerte)}
.gate-msg.ok{color:var(--accent)}

/* ---------- barre du haut ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  background:rgba(250,247,252,.93); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--trait);
}
.topbar-in{
  max-width:1120px; margin:0 auto; padding:.7rem 1rem;
  display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap;
}

/* La marque : trois pastilles rose, mauve, bleu — les trois couleurs
   du code des graphèmes qu'on retrouve sur les cartes imprimées. */
.brand{display:flex; align-items:center; gap:.7rem}
.brand-mark{display:flex; gap:3px; flex:none}
.brand-mark i{width:9px; height:9px; border-radius:50%; display:block}
.brand-mark i:nth-child(1){background:var(--rose)}
.brand-mark i:nth-child(2){background:var(--mauve)}
.brand-mark i:nth-child(3){background:var(--bleu)}
.brand-txt{display:flex; flex-direction:column; line-height:1.15}
.brand-txt strong{font-size:1.02rem; letter-spacing:-.01em}
.brand-txt strong b{color:var(--rose); font-weight:700}
.brand-txt em{font-style:normal; font-size:.78rem; color:var(--encre-2)}

.tabs{display:flex; gap:.25rem; margin-left:auto}
.tab{
  font:inherit; font-size:.9rem; cursor:pointer; border:0; background:transparent;
  color:var(--encre-2); padding:.45rem .85rem; border-radius:99px;
}
.tab:hover{color:var(--encre); background:var(--accent-clair)}
.tab.is-on{background:var(--mauve); color:#fff; font-weight:700}
.tab:focus-visible{outline:2px solid var(--mauve); outline-offset:2px}

/* ---------- mise en page ---------- */
.wrap{max-width:1120px; margin:0 auto; padding:1.5rem 1rem 4rem}
.pan{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:1.25rem; align-items:start}
@media (max-width:880px){ .pan{grid-template-columns:1fr} .col-side{order:2} }
.col-main{display:grid; gap:1.25rem; min-width:0}
.col-side{display:grid; gap:1rem}

.card{background:var(--carte); border:1px solid var(--trait); border-radius:14px; box-shadow:var(--sh); padding:1.25rem}
.col-side .card{border-left:3px solid var(--rose)}
.card-tight{padding:1rem 1.1rem}
.card-hd{margin-bottom:1rem}
.card-ft{margin-top:1rem; padding-top:1rem; border-top:1px solid var(--trait); display:flex; gap:.75rem; align-items:center; flex-wrap:wrap}
.bullets{margin:.6rem 0 0; padding-left:1.1rem; color:var(--encre-2); font-size:.88rem}
.bullets li{margin-bottom:.4rem}

/* ---------- champs ---------- */
.fld{display:grid; gap:.3rem; font-size:.85rem; color:var(--encre-2); min-width:0}
.fld input, .fld select{width:100%; max-width:100%;
  font:inherit; font-size:.95rem; color:var(--encre);
  padding:.5rem .65rem; border:1px solid var(--trait); border-radius:var(--r); background:var(--papier);
}
.fld input:focus, .fld select:focus{outline:2px solid var(--accent); outline-offset:1px}
.fld.chk{display:flex; align-items:center; gap:.5rem; align-self:center; min-width:0}
.fld.chk span{min-width:0}
.row-2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,200px); gap:.75rem}
@media (max-width:560px){ .row-2{grid-template-columns:1fr} }

.quickadd{display:flex; gap:.5rem; margin-top:1rem; flex-wrap:wrap}
.quickadd input{
  flex:1 1 200px; font:inherit; padding:.55rem .75rem;
  border:1px solid var(--trait); border-radius:var(--r); background:var(--papier);
}
.quickadd input:focus{outline:2px solid var(--accent); outline-offset:1px}

.note-i{
  margin-top:.75rem; font-size:.85rem; color:var(--encre-2);
  background:var(--accent-clair); border-radius:var(--r); padding:.55rem .8rem;
}
.note-i b{color:var(--mauve)}

/* ---------- liste de mots ---------- */
.items{list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.5rem}
.item{
  display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:.75rem; align-items:center;
  border:1px solid var(--trait); border-radius:var(--r); padding:.5rem; background:var(--papier);
}
.item-vis{
  width:56px; height:56px; border-radius:8px; overflow:hidden; background:#fff;
  border:1px dashed var(--trait); display:grid; place-items:center; cursor:pointer;
  font-size:.68rem; color:var(--encre-2); text-align:center; padding:2px; line-height:1.2;
}
.item-vis img{width:100%; height:100%; object-fit:cover; display:block}
.item-vis:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.item-mot{font:inherit; font-size:1rem; border:0; background:transparent; padding:.3rem; border-radius:6px; width:100%; min-width:0}
.item-mot:focus{outline:2px solid var(--accent); background:#fff}
.item-act{display:flex; gap:.2rem}
.icon-btn{
  border:0; background:transparent; cursor:pointer; color:var(--encre-2);
  font-size:1rem; padding:.35rem .5rem; border-radius:6px; line-height:1;
}
.icon-btn:hover{background:#efe9e0; color:var(--encre)}
.icon-btn:focus-visible{outline:2px solid var(--accent)}
.empty{color:var(--encre-2); font-size:.9rem; text-align:center; padding:1.5rem 1rem; border:1px dashed var(--trait); border-radius:var(--r); margin-top:1rem}

/* ---------- jeux ---------- */
.game{
  background:var(--carte); border:1px solid var(--trait); border-radius:14px;
  box-shadow:var(--sh); padding:1.25rem; position:relative; overflow:hidden;
}
.game::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(var(--rose), var(--mauve), var(--bleu));
}
.game-hd{display:flex; align-items:baseline; gap:.75rem}
.need{font-size:.78rem; color:var(--encre-2); background:var(--papier); border:1px solid var(--trait); padding:.1rem .5rem; border-radius:99px}
.opts{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.75rem; margin:1rem 0}
.go{margin-top:.25rem}

/* groupe de cases à cocher, hors de la grille d'options */
.groupe{
  border:1px solid var(--trait); border-radius:var(--r); background:var(--papier);
  padding:.5rem .9rem .7rem; margin:0 0 1rem; display:flex; flex-wrap:wrap; gap:.5rem 1.4rem;
}
.groupe legend{font-size:.8rem; color:var(--encre-2); padding:0 .35rem}
.opt{display:flex; align-items:center; gap:.45rem; font-size:.92rem; cursor:pointer}
.opt input{cursor:pointer}

.choix-mots{margin:0 0 1rem}
.fld-chks{display:flex; flex-direction:column; gap:.45rem; justify-content:center; min-width:0}
.chips{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.5rem}
.chip{
  display:inline-flex; align-items:center; gap:.35rem; cursor:pointer;
  border:1px solid var(--trait); border-radius:99px; padding:.28rem .7rem;
  font-size:.85rem; background:var(--papier);
}
.chip:hover{border-color:var(--mauve)}
.chip input{margin:0; cursor:pointer}
.chip.on{background:var(--accent-clair); border-color:var(--mauve); color:var(--accent-fonce); font-weight:700}

/* ---------- bibliothèque ---------- */
.biblio{list-style:none; margin:0; padding:0; display:grid; gap:.5rem}
.bib{display:flex; gap:.75rem; align-items:center; border:1px solid var(--trait); border-radius:var(--r); padding:.7rem .85rem; background:var(--papier)}
.bib-nom{font-weight:700}
.bib-meta{font-size:.82rem; color:var(--encre-2)}
.bib-act{margin-left:auto; display:flex; gap:.4rem}

/* ---------- fenêtre de choix d'image ---------- */
.modal{position:fixed; inset:0; z-index:70; background:rgba(47,42,38,.4); display:grid; place-items:center; padding:1rem}
.modal-box{
  width:min(640px,100%); max-height:86vh; overflow:auto; background:var(--carte);
  border:1px solid var(--trait); border-radius:16px; box-shadow:var(--sh); padding:1.25rem;
}
.modal-etroit{width:min(440px,100%)}
.modal-hd{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.modal-tools{display:flex; gap:.5rem; margin:1rem 0; flex-wrap:wrap}
.modal-tools input{
  flex:1 1 200px; font:inherit; padding:.55rem .75rem;
  border:1px solid var(--trait); border-radius:var(--r); background:var(--papier);
}
.modal-tools input:focus{outline:2px solid var(--accent); outline-offset:1px}
.modal .hint a{color:var(--mauve)}
.web-liens{
  font-size:.88rem; color:var(--encre-2); background:var(--papier);
  border:1px solid var(--trait); border-radius:var(--r); padding:.55rem .8rem; margin-bottom:.9rem;
}
.web-liens .hint{display:block; margin-top:.2rem}
.pick-cat{font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--encre-2); margin:.9rem 0 .5rem}
.pick-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:.6rem}
.pick-grid .modal .hint a{color:var(--mauve)}
.web-liens{
  font-size:.88rem; color:var(--encre-2); background:var(--papier);
  border:1px solid var(--trait); border-radius:var(--r); padding:.55rem .8rem; margin-bottom:.9rem;
}
.web-liens .hint{display:block; margin-top:.2rem}
.pick-cat{grid-column:1/-1; margin-top:.4rem}
.pick-it{
  border:1px solid var(--trait); border-radius:var(--r); background:var(--papier);
  padding:.5rem; cursor:pointer; display:grid; gap:.3rem; justify-items:center; font:inherit;
}
.pick-it:hover{background:var(--accent-clair); border-color:var(--accent)}
.pick-it:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.pick-it img{width:52px; height:52px; object-fit:contain}
.pick-it span{font-size:.78rem; color:var(--encre-2); text-align:center; line-height:1.2}

/* ---------- toast ---------- */
.lien{
  font:inherit; color:var(--mauve); background:none; border:0; padding:0;
  text-decoration:underline; cursor:pointer;
}
.lien:hover{color:var(--accent-fonce)}

.alerte-douce{
  display:block; margin-top:.7rem; font-size:.85rem; color:#8a4a2f;
  background:#fdf1e7; border:1px solid #f0d5c0; border-radius:var(--r); padding:.5rem .7rem;
}

body.depot::after{
  content:"Dépose ton fichier de sauvegarde, ou tes photos";
  position:fixed; inset:0; z-index:90; display:grid; place-items:center;
  background:rgba(123,94,167,.14); border:3px dashed var(--mauve);
  color:var(--accent-fonce); font-size:1.05rem; font-weight:700; pointer-events:none;
}

.toast{
  position:fixed; left:50%; bottom:1.5rem; transform:translateX(-50%);
  background:var(--encre); color:#fff; padding:.6rem 1rem; border-radius:99px;
  font-size:.9rem; z-index:80; box-shadow:var(--sh);
}

/* =========================================================
   PAGES IMPRIMÉES — identité 1institalastation
   Blanc, photo entière, capitales, et UNE couleur par jeu :
   celle du niveau, reprise du code couleur du padlet.
   ========================================================= */
.preview{position:fixed; inset:0; background:#efe9e0; z-index:60; display:flex; flex-direction:column}
.preview-bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:.75rem 1rem; background:var(--carte); border-bottom:1px solid var(--trait);
}
.preview-scroll{flex:1; overflow:auto; padding:1.5rem}
.pv-scaler{transform-origin:top center; margin:0 auto; width:210mm}

.page{
  --pc:#D9992E;
  width:210mm; height:297mm; background:#fff; margin:0 auto 1.5rem;
  box-shadow:0 2px 12px rgba(0,0,0,.12); overflow:hidden; position:relative;
  padding:9mm 9mm 12mm; display:flex; flex-direction:column; gap:5mm;
}
.n-m1{--pc:#3D95CC}
.n-m2{--pc:#D9992E}
.n-m3{--pc:#D1495B}
.n-plus,.n-p1{--pc:#6E9E4A}
.n-aucun{--pc:#7B5EA7}

/* le bandeau : la signature visuelle, reprise sur toutes les pages */
.band{
  flex:none; background:var(--pc); color:#fff; border-radius:99px;
  padding:2.6mm 7mm; display:flex; align-items:baseline; justify-content:space-between; gap:5mm;
}
.band .jeu{font-size:11pt; font-weight:700; text-transform:uppercase; letter-spacing:.14em}
.band .thm{font-size:10pt; opacity:.92}
.corps{flex:1; min-height:0; display:flex; flex-direction:column; gap:4mm}

.page-ft{
  position:absolute; left:9mm; right:9mm; bottom:5mm;
  display:flex; justify-content:space-between; align-items:center;
  font-size:7.5pt; color:#a49a90;
}
.page-ft .niv{
  color:var(--pc); font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  border:.35mm solid var(--pc); border-radius:99px; padding:.4mm 2.6mm;
}
.page-dos{padding:9mm}

/* --- écritures --- */
.e-capitales{font-family:"Andika",sans-serif; text-transform:uppercase; letter-spacing:.05em}
.e-script{font-family:"ScriptBaton","Andika",sans-serif}
.e-cursive{font-family:"Marelle","Andika",cursive}
.e-suisse{font-family:"GeTypo","Marelle",cursive}
.mot3{display:flex; flex-direction:column; align-items:center; gap:.4mm; line-height:1.15}
.mot3 .e-capitales{font-size:13pt; font-weight:700}
.mot3 .e-script{font-size:12pt}
.mot3 .e-cursive{font-size:15pt}
.mot3 .e-suisse{font-size:15pt}

/* --- code couleur des graphèmes (Céline Alvarez) --- */
.g-vo{color:#D1495B}
.g-co{color:#3D95CC}
.g-di{color:#6E9E4A}

/* --- LOTO : deux planches par feuille --- */
.deux{flex:1; display:flex; flex-direction:column; gap:5mm; min-height:0}
.planche{
  flex:1; min-height:0; border:1mm solid var(--pc); border-radius:5mm; padding:4mm;
  display:flex; flex-direction:column;
}
.planche-g{flex:1; display:grid; gap:2.5mm; min-height:0}
.planche-g.c6{grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr)}
.planche-g.c9{grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr)}
.case{
  border:.35mm solid #e0d9cf; border-radius:3mm; background:#fff; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1mm; padding:2mm;
}
.case img{flex:1; min-height:0; width:100%; object-fit:contain}
.case .mot{font-size:11pt; text-align:center; line-height:1.15}
.case.mot-seul .mot{font-size:16pt}

/* --- cartes (loto pioche, memory) --- */
.cartes{display:flex; flex-wrap:wrap; gap:3mm; align-content:flex-start}
.cartes.miroir{flex-direction:row-reverse}
.carte{
  border:.5mm solid var(--pc); border-radius:3mm; background:#fff; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1mm; padding:2.5mm;
}
.carte img{flex:1; min-height:0; width:100%; object-fit:contain}
.carte .mot{font-size:11pt; text-align:center; line-height:1.15}
.carte.txt .mot{font-size:15pt}

/* dos : le fond déborde de 1,5 mm pour absorber le décalage recto-verso */
.carte-dos{
  border-radius:3mm; background:var(--pc); box-shadow:0 0 0 1.5mm var(--pc);
  display:grid; place-items:center; overflow:hidden;
}
.dos-txt{
  color:#fff; font-size:8pt; text-transform:uppercase; letter-spacing:.14em;
  text-align:center; padding:2mm; opacity:.9;
}

/* --- CARTES À PINCES --- */
.colonne{flex:1; display:flex; flex-direction:column; gap:4mm; justify-content:flex-start}
.pince{
  /* hauteur fixe : une carte seule sur la dernière page garde ses
     dimensions au lieu de s'étirer sur toute la feuille */
  height:48mm; flex:0 0 auto; position:relative; background:#fff;
  border:.7mm solid var(--pc); border-radius:4mm; padding:3mm 4mm;
  display:grid; grid-template-columns:44mm 1fr; gap:4mm; align-items:center;
}
.pince-q{
  height:40mm; min-width:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  border-right:.35mm dashed #ddd5cb; padding-right:3mm; text-align:center;
}
.pince-q img{width:100%; height:100%; object-fit:contain}
.pince-q.txt .mot{font-size:22pt; line-height:1.05}
.pince-r{height:40mm; min-width:0; display:flex; align-items:center; justify-content:center; gap:5mm}
.pince-r.n2{gap:9mm}
.pince-r.n2 .pince-c{width:42mm; height:36mm}
.pince-r.n4{gap:4mm}
.pince-r.n4 .pince-c{width:30mm; height:30mm}
.pince-c{
  width:36mm; height:36mm; flex:0 0 auto;
  border:.35mm solid #e0d9cf; border-radius:3mm; background:#fff;
  display:flex; align-items:center; justify-content:center; padding:2mm; overflow:hidden;
}
.pince-c img{width:100%; height:100%; object-fit:contain}
.pince-c .mot{font-size:13pt; text-align:center; line-height:1.15}
.pince-num{position:absolute; top:1.5mm; left:3mm; font-size:7pt; color:#bdb4aa}

.corrige{font-size:11pt}
.corrige ol{margin:0; padding-left:6mm; line-height:1.9}
.corrige .note{margin-top:5mm; font-size:9.5pt; color:#8d8479}

/* --- MOT CACHÉ --- */
.mc{flex:1; display:flex; flex-direction:column; align-items:center; gap:5mm}
.mc-grille{
  display:grid; grid-template-columns:repeat(var(--n),1fr);
  width:min(160mm, calc(var(--n) * 19mm)); border:.7mm solid var(--pc); border-radius:3mm; overflow:hidden;
}
.mc-c{
  aspect-ratio:1; display:grid; place-items:center;
  border:.25mm solid #e6e0d6; font-family:"Andika",sans-serif; text-transform:uppercase;
  font-size:15pt; letter-spacing:.02em;
}
.mc-on{background:color-mix(in srgb, var(--pc) 22%, #fff); font-weight:700}
.mc-consigne{font-size:11pt; color:#6d635a}
.mc-mots{display:flex; flex-wrap:wrap; justify-content:center; gap:4mm}
.mc-mot{
  border:.4mm solid #e0d9cf; border-radius:3mm; padding:2.5mm 3mm; min-width:26mm;
  display:flex; flex-direction:column; align-items:center; gap:1.5mm;
}
.mc-mot img{width:18mm; height:18mm; object-fit:contain}
.mc-mot .mot{font-size:12pt}

/* --- MOT MÉLANGÉ : six cartes par feuille --- */
.grille6{
  flex:1; min-height:0; display:grid;
  grid-template-columns:1fr 1fr; grid-template-rows:repeat(3,1fr); gap:6mm;
}
.mel{
  border:.6mm solid var(--pc); border-radius:4mm; background:#fff; overflow:hidden;
  padding:4mm; display:flex; flex-direction:column; justify-content:center; gap:3mm; min-height:0;
}
/* hauteur fixe : le dessin ne mange plus la place des lettres */
.mel-img{flex:0 0 auto; display:flex; align-items:center; justify-content:center}
.mel-img img{display:block}
.mel-l{display:flex; flex-wrap:nowrap; justify-content:center; gap:1.5mm}
.mel-l > span{
  flex:none; border:.4mm solid #ddd5cb; border-radius:2mm;
  display:grid; place-items:center; line-height:1; overflow:hidden;
}
.mel-l > span.vide{border-style:dashed; background:#fcfaf7}

/* --- CARTES DE VOCABULAIRE --- */
.voc{
  border:.6mm solid var(--pc); border-radius:4mm; background:#fff; overflow:hidden;
  display:flex; flex-direction:column; flex:0 0 auto;
}
.voc-img{flex:0 0 auto; display:flex; align-items:center; justify-content:center}
.voc-img img{display:block}
.voc-mots{
  flex:1; min-height:0; padding:2.5mm 2mm 3mm;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.8mm; text-align:center;
}
/* Le filet ne sert qu'à indiquer où couper pour séparer le mot de l'image.
   Il n'apparaît donc qu'avec les étiquettes-mots, et en pointillé. */
.voc.coupe .voc-mots{border-top:.35mm dashed #c2b9ad}

.voc.petite .voc-mots .e-capitales{font-size:11pt}
.voc.petite .voc-mots .e-script{font-size:10pt}
.voc.petite .voc-mots .e-cursive,
.voc.petite .voc-mots .e-suisse{font-size:12pt}
.voc-mots .e-capitales{font-size:15pt; font-weight:700}
.voc-mots .e-script{font-size:14pt}
.voc-mots .e-cursive{font-size:16pt}
.etiq{overflow:hidden; 
  border:.4mm dashed #c9c2b8; border-radius:3mm; background:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.8mm; padding:2mm; flex:0 0 auto; text-align:center;
}

/* --- JEU DES PAIRES --- */
.dob{
  position:relative; background:#fff; border:.6mm solid var(--pc); overflow:hidden; flex:0 0 auto;
}
.dob.rond{border-radius:50%}
.dob.carre{border-radius:5mm}
.sym{position:absolute; display:grid; place-items:center}
.sym img{width:100%; height:100%; object-fit:contain}
.sym .mot{font-size:9pt; text-align:center; line-height:1.1}

/* =========================================================
   IMPRESSION
   ========================================================= */
@media print{
  @page{ size:A4; margin:0 }
  html,body{background:#fff}
  body > *{display:none !important}
  #preview{display:block !important; position:static; inset:auto; background:#fff}
  .preview-bar{display:none !important}
  .preview-scroll{overflow:visible; padding:0}
  .pv-scaler{transform:none !important; width:auto}
  .page{box-shadow:none; margin:0; break-after:page; page-break-after:always}
  .page:last-child{break-after:auto; page-break-after:auto}
  *{-webkit-print-color-adjust:exact; print-color-adjust:exact}
}

@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important} }

/* barre de comptage des mots */
.compte-bar{
  background:var(--accent-clair); border:1px solid #cfe0da; color:var(--accent-fonce);
  border-radius:var(--r); padding:.6rem .9rem; font-size:.88rem;
}

/* ---------- miniatures des jeux ---------- */
.game-hd{display:flex; align-items:center; gap:.9rem}
.game-hd h2{flex:none}
.mini{
  flex:none; width:104px; height:74px; border:1px solid var(--trait); border-radius:8px;
  background:#fff; overflow:hidden; padding:5px; display:grid; gap:3px; place-items:stretch;
}
/* place-items stretch + contain : l'image entière tient dans sa case */
.mini img{width:100%; height:100%; object-fit:contain; display:block; min-width:0; min-height:0}
.g-loto{grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,1fr)}
.g-loto img{border:1px solid #ece6dd; border-radius:3px; padding:2px}
.g-mem{grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,1fr)}
.g-mem i{background:var(--accent); border-radius:3px; display:block}
.g-pin{grid-template-columns:30px 1fr; align-items:center; gap:4px}
.g-pin b{font-size:7px; letter-spacing:.03em; text-align:center}
.g-pin > span{display:grid; grid-template-columns:repeat(3,1fr); gap:3px; height:100%}
.g-pin span img{border:1px solid #ece6dd; border-radius:3px; padding:2px}
.g-mc{grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(3,1fr); gap:2px}
.g-mc i{
  font-style:normal; font-size:8px; display:grid; place-items:center;
  border:1px solid #ece6dd; border-radius:2px; color:var(--encre-2);
}
.g-mc i.on{background:var(--accent-clair); color:var(--accent-fonce); font-weight:700}
.g-dob{position:relative; border-radius:50%; width:74px; padding:0}
.g-dob span{position:absolute; width:26px; height:26px}
.g-dob span:nth-child(1){top:6px; left:24px}
.g-dob span:nth-child(2){bottom:8px; left:8px}
.g-dob span:nth-child(3){bottom:8px; right:8px}
.g-mel{grid-template-rows:1fr auto; text-align:center; gap:2px}
.g-mel b{font-size:8px; letter-spacing:.1em}
.g-voc{grid-template-rows:1fr auto; text-align:center; gap:2px}
.g-voc b{font-size:8px}
.g-voc em{display:none}