/* Le carnet de graphomotricité : la charte B (carnet illustré) portée à l'écran.
   Papier à points, titres en Fraunces italique, surligneur, cartes blanches à bord encré. */

/* Polices réduites au latin par outils/alleger_polices.py. « Carnet Texte » est Lato : ce nom-là est réservé à ses fichiers d'origine. */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("polices/Fraunces.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("polices/Fraunces-Italic.woff2") format("woff2"); }
@font-face { font-family: "Carnet Texte"; font-weight: 400; font-display: swap; src: url("polices/CarnetTexte-Regular.woff2") format("woff2"); }
@font-face { font-family: "Carnet Texte"; font-weight: 700; font-display: swap; src: url("polices/CarnetTexte-Bold.woff2") format("woff2"); }
@font-face { font-family: "Carnet Texte"; font-weight: 400; font-style: italic; font-display: swap; src: url("polices/CarnetTexte-Italic.woff2") format("woff2"); }

:root {
  --papier: #fbf6ea; --encre: #22305a; --terre: #c03f1c; --point: #d8cfb8;
  --jaune: #ffe066; --rose: #ffb7cb; --menthe: #b4efcf; --bleu: #bcd8ff; --lilas: #dccbff; --peche: #ffc9b8;
  --h: var(--jaune);
  --bord: 2px solid var(--encre); --rayon: 12px; --ombre: 4px 5px 0 rgba(34, 48, 90, .15);
}
.t-jaune { --h: var(--jaune); } .t-rose { --h: var(--rose); } .t-menthe { --h: var(--menthe); }
.t-bleu { --h: var(--bleu); } .t-lilas { --h: var(--lilas); } .t-peche { --h: var(--peche); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; color: var(--encre); font: 400 17px/1.5 "Carnet Texte", system-ui, sans-serif;
  background: var(--papier) radial-gradient(circle, var(--point) 1.4px, transparent 1.7px) 0 0 / 22px 22px;
}
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: .09em; }
a:hover, .lien:hover { text-decoration-thickness: .17em; }
img { max-width: 100%; display: block; }
h1, h2, h3, .marque strong { font-family: "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 100, "WONK" 1; line-height: 1.05; }
h1 { font-style: italic; font-weight: 900; font-size: clamp(2rem, 1.2rem + 3.4vw, 3.3rem); letter-spacing: -.01em; }
h2 { font-weight: 800; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); }
h3 { font-weight: 800; font-style: italic; font-size: 1.12rem; line-height: 1.15; }
h1, h2, h3, .tuile strong { text-wrap: balance; }
.soude { white-space: nowrap; } /* un mot à trait d'union qui ne doit pas se couper */
mark { color: inherit; background: none; padding: 0 .16em; margin: 0 -.16em; box-shadow: inset 0 -.46em 0 var(--h); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
small { font-size: .875em; font-weight: 400; }
:focus-visible { outline: 3px solid #2f6fe0; outline-offset: 3px; }
.evitement { position: absolute; left: 12px; top: -80px; z-index: 5; padding: .6em 1.2em; background: var(--jaune); border: var(--bord); border-radius: 999px; font-weight: 700; }
.evitement:focus { top: 10px; }

main { max-width: 1180px; margin: 0 auto; padding: 18px clamp(16px, 4vw, 40px) 80px; display: grid; gap: 34px; }
main.etroit { max-width: 720px; }
.bloc { display: grid; gap: 16px; }
.pile { display: grid; gap: 16px; justify-items: start; }
.pile > label, .pile > .deux, .pile > form { width: 100%; }
.surtitre { font: 700 .8rem/1.2 "Carnet Texte", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--terre); }
.chapo { font-family: "Fraunces", serif; font-style: italic; font-weight: 500; font-size: 1.2rem; line-height: 1.3; max-width: 46ch; }
.vide { font-style: italic; opacity: .8; }

/* Ruban, tache, numéro cerclé */
.ruban {
  display: inline-block; transform: rotate(-2deg); margin-left: -6px; padding: .28em 1.3em .22em; font: 700 .78rem/1.3 "Carnet Texte", sans-serif;
  letter-spacing: .12em; text-transform: uppercase; background: repeating-linear-gradient(115deg, var(--h) 0 10px, #fff7 10px 20px), var(--h);
  clip-path: polygon(0 0, 100% 0, 98% 50%, 100% 100%, 0 100%, 2% 50%);
}
.tache { --cote: 104px; width: var(--cote); height: var(--cote); flex: none; display: grid; place-items: center; background: var(--h); border-radius: 46% 54% 42% 58% / 55% 44% 56% 45%; }
.tache.grande { --cote: 132px; }
.trace { width: 62%; height: 62%; fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.num { width: 2.1em; height: 2.1em; flex: none; display: inline-grid; place-items: center; font: 900 1.05rem "Fraunces", serif; background: var(--papier); border: var(--bord); border-radius: 56% 44% 52% 48% / 47% 54% 46% 53%; }

/* Boutons et formulaires */
.bouton {
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: .5em 1.15em; border: var(--bord); border-radius: 999px; background: var(--h);
  color: var(--encre); font: 700 1rem/1.2 "Carnet Texte", sans-serif; text-decoration: none; cursor: pointer; box-shadow: 3px 4px 0 rgba(34, 48, 90, .2);
  transition: transform .14s ease, box-shadow .14s ease;
}
.bouton:hover { transform: translate(-1px, -2px); box-shadow: 4px 6px 0 rgba(34, 48, 90, .22); }
.bouton:active { transform: translate(2px, 3px); box-shadow: 0 0 0 rgba(34, 48, 90, 0); }
.bouton:disabled { opacity: .55; cursor: progress; }
.bouton.grand { font-size: 1.1rem; padding: .7em 1.4em; }
.bouton.discret { background: #fff; }
.bouton.danger { background: var(--peche); }
.bouton b { background: #fff; border: var(--bord); border-radius: 999px; padding: 0 .55em; font-size: .9em; }
.boutons { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; }
.lien { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }
label { display: grid; gap: 6px; font-weight: 700; }
label small { color: #4a5680; }
input, select, textarea {
  width: 100%; padding: .62em .8em; border: var(--bord); border-radius: 10px; background: #fff; color: var(--encre); font: 400 1rem/1.4 "Carnet Texte", sans-serif;
}
textarea { resize: vertical; }
input[type="checkbox"] { width: 1.2em; height: 1.2em; accent-color: var(--encre); }
input[type="file"] { padding: .5em; background: var(--papier); border-style: dashed; }
.coche { display: flex; align-items: center; gap: 10px; font-weight: 400; }
.deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; align-items: end; }
.en-ligne { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; }
.en-ligne label { flex: 1 1 260px; }
.rappel { font-size: .92rem; font-style: italic; }
.message { padding: .7em 1.1em; border: var(--bord); border-radius: var(--rayon); background: var(--menthe); font-weight: 700; }
.message.erreur { background: var(--peche); border-style: dashed; }
.pile > .message { width: 100%; }
.message + .porte { margin-top: 0; }
/* L'état d'un envoi de photo : rien tant qu'il n'y a rien à dire */
.etat-envoi { padding: .6em 1em; border: var(--bord); border-radius: var(--rayon); background: var(--jaune); font-weight: 700; }
.etat-envoi:empty { display: none; }
.etat-envoi.fait { background: var(--menthe); }
.etat-envoi.erreur { background: var(--peche); border-style: dashed; }

/* Bandeau */
.bandeau { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; padding: 14px clamp(16px, 4vw, 40px); border-bottom: 2px dashed #c9bf9f; background: #fffdf6; }
.marque { display: grid; text-decoration: none; }
.marque .ruban { --h: var(--rose); justify-self: start; font-size: .64rem; }
.marque strong { font-style: italic; font-weight: 900; font-size: 1.45rem; white-space: nowrap; }
.recherche { flex: 1 1 280px; display: flex; gap: 8px; max-width: 460px; }
.recherche .bouton { padding: .45em 1em; }
body:has(main .grande-recherche) .bandeau .recherche { display: none; } /* la page porte déjà son champ de recherche */
.menu { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; margin-left: auto; font-weight: 700; }
.menu a, .menu .lien { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; text-decoration-thickness: 3px; text-underline-offset: .32em; }
.menu a:hover, .menu .lien:hover { text-decoration: underline; text-decoration-color: var(--jaune); text-decoration-thickness: 3px; }
.menu a[aria-current] { text-decoration: underline; text-decoration-color: var(--terre); text-decoration-thickness: 3px; }
.fil { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: .92rem; }
.fil a { padding: 11px 6px; margin: -11px -6px; } /* zone de toucher de 44 px, sans grossir la ligne */
.fil i { font-style: normal; color: var(--terre); font-weight: 700; }
.fil span { font-weight: 700; }

/* Accueil */
.hero { display: grid; gap: 14px; justify-items: start; padding-top: 10px; }
.hero .ruban:not([class*="t-"]) { --h: var(--rose); }
.grande-recherche { display: flex; flex-wrap: wrap; gap: 12px; width: min(100%, 720px); }
.grande-recherche input { flex: 1 1 260px; font-size: 1.15rem; padding: .7em 1em; border-radius: 999px; box-shadow: var(--ombre); }
.bilan { font-weight: 700; font-size: .95rem; }
.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 18px; }
.tuiles.larges { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.tuile {
  height: 100%; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; align-items: center; gap: 8px; padding: 16px 12px 14px; text-align: center; text-decoration: none;
  background: var(--h); border: var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); transition: transform .16s ease, box-shadow .16s ease;
}
.tuiles li:nth-child(odd) .tuile { transform: rotate(-.7deg); }
.tuiles li:nth-child(even) .tuile { transform: rotate(.6deg); }
.tuiles li .tuile:hover, .tuiles li .tuile:focus-visible { transform: translateY(-4px) rotate(0); box-shadow: 6px 9px 0 rgba(34, 48, 90, .18); }
.tuile .tache { --cote: 88px; background: #fff; transition: transform .2s ease; }
.tuile:hover .tache { transform: rotate(8deg) scale(1.05); }
.tuile strong { font-family: "Fraunces", serif; font-style: italic; font-weight: 800; font-size: 1.08rem; line-height: 1.12; }
.tuile small { font-weight: 700; background: #fff; border-radius: 999px; padding: .1em .8em; }

/* Pastilles : sauter d'un groupe à l'autre dans une catégorie, filtrer la page « À compléter » */
.sauts { display: flex; flex-wrap: wrap; gap: 8px; }
.sauts a { flex: none; display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: 0 1em; border: var(--bord); border-radius: 999px; background: var(--h); font-weight: 700; white-space: nowrap; text-decoration: none; }
.sauts a small { background: #fff; border-radius: 999px; padding: 0 .55em; }
.sauts.filtres a { background: #fff; }
.sauts.filtres a small { background: var(--papier); }
.sauts.filtres a[aria-current] { background: var(--jaune); }
.sauts a:hover { box-shadow: 3px 4px 0 rgba(34, 48, 90, .2); }

/* Catégorie */
.cat-tete { display: grid; grid-template-columns: auto 1fr; gap: 14px 22px; align-items: center; }
.cat-tete > div { display: grid; gap: 8px; justify-items: start; }
.note { grid-column: 1 / -1; justify-self: start; max-width: 520px; background: #fff; padding: 18px 22px 14px; transform: rotate(-.8deg); box-shadow: 0 3px 10px rgba(34, 48, 90, .2); font: 500 1.05rem/1.35 "Fraunces", serif; position: relative; }
.note::before { content: ""; position: absolute; top: -10px; left: 30px; width: 80px; height: 20px; background: #c6f2da; transform: rotate(-4deg); }
.note footer { font: 700 .8rem "Carnet Texte", sans-serif; color: var(--terre); margin-top: 6px; }
.principes { display: flex; flex-wrap: wrap; gap: 8px 22px; font-weight: 700; max-width: 78ch; }
.principes li::before { content: "→ "; color: var(--terre); font-weight: 900; }
/* Les groupes d'une catégorie : un groupe d'une ou deux cartes se pose à côté du suivant au lieu de prendre une rangée */
.axes { display: flex; flex-wrap: wrap; gap: 34px 30px; align-items: start; }
.axe { flex: 1 1 100%; min-width: 0; display: grid; gap: 14px; scroll-margin-top: 16px; }
.axe.petit { flex: 0 1 auto; max-width: min(100%, 470px); }
.axe.n1 { max-width: min(100%, 340px); }
.axe.n1 .cartes { grid-template-columns: minmax(0, 210px); }
.axe.n2 .cartes { grid-template-columns: repeat(2, minmax(0, 210px)); }
.axe h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.axe h2 small { font: italic 400 .95rem "Carnet Texte", sans-serif; }
.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); grid-auto-flow: dense; gap: 20px; align-items: start; }
.carte { background: #fff; border: var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 18px 20px; position: relative; }
.exo { padding: 12px 12px 14px; text-align: center; display: grid; gap: 7px; transition: transform .16s ease, box-shadow .16s ease; }
.exo:nth-child(odd) { transform: rotate(-.5deg); } .exo:nth-child(even) { transform: rotate(.45deg); }
.exo:hover, .exo:focus-within { transform: translateY(-3px) rotate(0); box-shadow: 6px 9px 0 rgba(34, 48, 90, .18); }
.exo .vue { display: grid; place-items: center; height: 138px; }
.exo .photo { width: 100%; height: 138px; object-fit: cover; border-radius: 8px; }
/* Une photo très large prend deux places, une photo en hauteur un cadre plus haut : sinon on n'en voit qu'une bande */
.exo.pano { grid-column: span 2; }
.exo.pano .vue, .exo.pano .photo { height: 110px; }
.exo.haute .vue, .exo.haute .photo { height: 220px; }
/* Sans photo ni dessin à lui, l'exercice se présente par son nom, sur un aplat */
.exo.mot { background: var(--h); padding: 22px 14px; min-height: 110px; align-content: center; }
.exo.mot h3 { font-size: 1.25rem; }
.exo.mot .mat span, .exo.mot .pourquoi { background: #fff; }
.exo.mot .ou { color: var(--encre); } /* la couleur terre ne se lit pas sur un aplat pastel */
.exo h3 a { text-decoration: none; }
.exo h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--rayon); }
.exo .ou { font-size: .85rem; font-weight: 700; color: var(--terre); }
.exo .pourquoi { font-size: .9rem; line-height: 1.3; font-style: italic; background: var(--h); border-radius: 8px; padding: .25em .6em; }
.compris { display: grid; gap: 4px; max-width: 760px; }
.compris b { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--terre); }
.compris p { font: italic 500 1.15rem/1.35 "Fraunces", serif; }
.exo .but { font-size: .9rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.mat { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.mat span, .mat a { font-size: .875rem; font-weight: 700; padding: .1em .75em; border: 1.5px solid var(--encre); border-radius: 999px; background: var(--papier); text-decoration: none; }
.mat a:hover { background: var(--h); }
.genre { position: absolute; left: -8px; top: -10px; transform: rotate(-7deg); padding: .15em .9em; border-radius: 999px; background: var(--encre); color: #fff; font: 700 .72rem "Carnet Texte", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.reperes summary, .lot summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; min-height: 44px; }
.reperes summary::-webkit-details-marker, .lot summary::-webkit-details-marker { display: none; }
.reperes summary::after, .lot summary::after { content: "+"; font: 900 1.6rem "Fraunces", serif; color: var(--terre); }
.reperes[open] summary::after, .lot[open] summary::after { content: "–"; }
/* en colonnes : chaque carte garde sa hauteur, aucune ne s'étire pour suivre sa voisine */
.reperes-grille { columns: 3 300px; column-gap: 18px; margin-top: 16px; }
.reperes-grille .carte { display: grid; gap: 10px; align-content: start; break-inside: avoid; margin-bottom: 18px; }
.puces li, .pistes li { position: relative; padding-left: 1.1em; margin-top: .3em; }
.puces li::before, .pistes li::before { content: ""; position: absolute; left: 0; top: .6em; width: .42em; height: .42em; border-radius: 50%; background: var(--terre); }
.si-alors { display: grid; gap: 14px; }
.si-alors > li { display: grid; grid-template-columns: 1.6em 1fr; gap: 4px 6px; align-items: start; }
.si-alors > li > b { grid-column: 1 / -1; }
.si-alors i { font: 700 1.3rem/1.1 "Carnet Texte", sans-serif; color: var(--terre); font-style: normal; } /* la flèche n'existe pas dans Fraunces */
.pistes { font-size: .92em; margin-top: .3em; }
.pistes li::before { background: none; border: 2px solid var(--terre); }
.ages { display: grid; gap: 8px; }
.ages li { display: grid; grid-template-columns: 5.4em 1fr; gap: 12px; align-items: center; }
.ages b { font: 800 .98rem "Fraunces", serif; color: var(--terre); border: 2px dashed var(--terre); border-radius: 999px; text-align: center; padding: .05em 0; }
.observer dt { font-weight: 700; margin-top: .5em; }
.renvois ul { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.renvois a { display: block; padding: .25em 1em; border: 2px dashed var(--encre); border-radius: 999px; background: #fff; text-decoration: none; font-size: .95rem; }
.renvois a:hover { background: var(--jaune); }

/* Fiche d'un exercice */
.fiche-exo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 26px 34px; padding: 26px; align-items: start; }
.fiche-exo.pano { grid-template-columns: 1fr; }
.fiche-vue { display: grid; place-items: center; }
.fiche-vue .photo { width: auto; height: auto; max-width: 100%; max-height: 520px; border-radius: 10px; border: var(--bord); }
.fiche-exo.pano .fiche-vue .photo { width: 100%; max-height: none; }
.fiche-vue .tache { --cote: min(260px, 60vw); }
.fiche-texte { display: grid; gap: 16px; justify-items: start; }
.fiche-texte section { display: grid; gap: 6px; }
.fiche-texte .mat { justify-content: flex-start; }
.fiche-texte .mat a { padding: .5em 1em; font-size: .9rem; }
.notes { display: none; }
.dit { font: italic 600 1.15rem/1.3 "Fraunces", serif; color: var(--terre); }
.etapes { counter-reset: etape; display: grid; gap: 10px; }
.etapes li { counter-increment: etape; display: grid; grid-template-columns: 2.2em 1fr; gap: 12px; align-items: start; }
.etapes li::before { content: counter(etape); width: 2em; height: 2em; display: grid; place-items: center; font: 900 1rem "Fraunces", serif; background: var(--h); border: var(--bord); border-radius: 56% 44% 52% 48% / 47% 54% 46% 53%; }
.liens { display: flex; flex-wrap: wrap; gap: 6px 18px; }
aside.question { width: 100%; padding: 12px 16px; border: 2px dashed var(--terre); border-radius: var(--rayon); background: #fff8ee; display: grid; gap: 4px; font-size: .95rem; }
aside.question b { color: var(--terre); text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; }

/* Fiches, atelier, comptes */
.fiches { display: grid; gap: 14px; }
.fiche { display: grid; grid-template-columns: auto 1fr auto; gap: 12px 18px; align-items: center; }
.fiche .tache { --cote: 54px; }
.fiche.a-venir { opacity: .75; box-shadow: none; border-style: dashed; }
.etiquette { font-size: .78rem; font-weight: 700; padding: .1em .8em; border-radius: 999px; background: var(--jaune); white-space: nowrap; margin-left: 8px; }
.etiquette.question { background: var(--peche); } .etiquette.nom { background: var(--lilas); } .etiquette.deroule { background: var(--bleu); }
.liste-simple { columns: 2 280px; column-gap: 30px; }
.liste-simple li { padding: .2em 0; break-inside: avoid; }
.lots { display: grid; gap: 6px; }
.lot h2 small { font: 700 1rem "Carnet Texte", sans-serif; background: var(--h); border-radius: 999px; padding: .1em .7em; vertical-align: middle; }
.a-completer { display: grid; gap: 8px; margin: 10px 0 18px; }
.a-completer li { position: relative; padding: 10px 14px; background: #fff; border: 1.5px solid var(--encre); border-radius: 10px; }
.a-completer li:hover { background: #fffdf6; box-shadow: 3px 4px 0 rgba(34, 48, 90, .15); }
.a-completer p { font-size: .9rem; font-style: italic; margin-top: 2px; max-width: 80ch; }
.a-completer a { font-weight: 700; }
.a-completer a::after { content: ""; position: absolute; inset: 0; border-radius: 10px; } /* toute la ligne ouvre la fiche */
.table-defile { overflow-x: auto; }
.comptes { width: 100%; border-collapse: collapse; background: #fff; border: var(--bord); }
.comptes th, .comptes td { text-align: left; padding: 10px 14px; border-bottom: 1.5px solid #d9d2bd; vertical-align: middle; }
.comptes th { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--terre); }
.comptes .inactif td:not(:last-child) { opacity: .65; }
.gestes { display: flex; flex-wrap: wrap; gap: 8px; }
.gestes .bouton { font-size: .88rem; padding: .35em .9em; }
.provisoire { padding: 16px 20px; border: var(--bord); border-radius: var(--rayon); background: var(--jaune); display: grid; gap: 8px; box-shadow: var(--ombre); }
.provisoire code { font: 700 1.6rem/1.2 ui-monospace, Consolas, monospace; letter-spacing: .06em; background: #fff; border: var(--bord); border-radius: 10px; padding: .3em .7em; justify-self: start; user-select: all; }
.porte { margin-top: 6vh; display: grid; gap: 16px; justify-items: start; padding: 30px; }
.porte form { width: 100%; }
.apercu { max-width: 280px; border-radius: 10px; border: var(--bord); }
.fin { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

@media (max-width: 900px) {
  .fiche-exo { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  body { font-size: 16px; }
  /* bandeau resserré : le titre, le menu, puis la recherche sur toute la largeur */
  .bandeau { gap: 2px 14px; padding: 10px 16px; }
  .marque .ruban { display: none; }
  .marque strong { font-size: 1.25rem; }
  .menu { margin-left: 0; width: 100%; gap: 0 4px; justify-content: space-between; font-size: .95rem; }
  .menu a, .menu .lien { padding: 0 8px; }
  .menu > a:first-child { padding-left: 0; }
  .recherche { order: 3; flex-basis: 100%; max-width: none; }
  .boutons { gap: 10px; }
  .bouton.grand { font-size: 1rem; padding: .55em 1em; } /* deux boutons par rangée : les catégories restent près du haut de l'écran */
  .fiche-exo { padding: 18px; }
  .fiche-texte .mat { gap: 10px; }
  .liens { gap: 0 18px; }
  .liens a { display: inline-flex; align-items: center; min-height: 44px; }
  /* le tableau des comptes devient une pile de fiches */
  .comptes thead { display: none; }
  .comptes, .comptes tbody, .comptes tr, .comptes td { display: block; }
  .comptes tr { padding: 8px 0; border-bottom: 1.5px solid #d9d2bd; }
  .comptes td { border: 0; padding: 4px 14px; }
  .cat-tete { gap: 10px 14px; align-items: start; }
  .tache.grande { --cote: 64px; }
  .sauts { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 2px 16px 8px; }
  .axe.petit, .axe.n1 { flex: 1 1 100%; max-width: none; }
  .cartes, .axe.n1 .cartes, .axe.n2 .cartes { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
  .fiche { grid-template-columns: auto 1fr; }
  .fiche .boutons, .fiche .etiquette { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 360px) {
  .exo.pano { grid-column: auto; } /* une seule colonne : rien à enjamber */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}
@media print {
  @page { size: A4; margin: 11mm; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: #fff; font-size: 10pt; min-height: 0; }
  .bandeau, .fil, .sans-impression, .message, .sauts, .evitement, .reperes summary::after { display: none !important; }
  main { display: block; padding: 0; max-width: none; }
  main > * + * { margin-top: 11pt; }
  h1 { font-size: 22pt; } h2 { font-size: 13pt; } h3 { font-size: 9.6pt; }
  .chapo { font-size: 10.5pt; }
  .carte, .tuile { box-shadow: none; }
  .cat-tete { gap: 6pt 12pt; }
  .tache.grande { --cote: 62pt; }
  .principes { font-size: 9pt; gap: 2pt 14pt; }
  /* en flux simple, un titre de groupe ne reste jamais seul en bas de page */
  .axes { display: block; }
  .axes > * + * { margin-top: 11pt; }
  .axe, .axe.petit { display: block; max-width: none; }
  .axe h2 { margin-bottom: 10pt; break-after: avoid; page-break-after: avoid; break-inside: avoid; page-break-inside: avoid; }
  .cartes, .axe.n1 .cartes, .axe.n2 .cartes { grid-template-columns: repeat(5, 1fr); gap: 7pt; }
  .exo { transform: none !important; break-inside: avoid; padding: 5pt 5pt 6pt; gap: 3pt; border-width: 1.2pt; }
  .exo.pano { grid-column: auto; }
  .exo .vue, .exo .photo, .exo.pano .vue, .exo.pano .photo, .exo.haute .vue, .exo.haute .photo { height: 62pt; }
  .exo.mot { background: #fff; min-height: 0; padding: 5pt 5pt 6pt; }
  .exo.mot h3 { font-size: 9.6pt; }
  .exo .tache { --cote: 54pt; }
  .exo .but { -webkit-line-clamp: unset; display: block; font-size: 7.6pt; line-height: 1.25; }
  .mat { gap: 3pt; } .mat span, .mat a { font-size: 6.8pt; border-width: .8pt; }
  .genre { font-size: 6pt; left: -4pt; top: -6pt; }
  .reperes summary { break-after: avoid; page-break-after: avoid; }
  /* une carte sous l'autre : en colonnes, le bloc entier sautait à la page suivante et laissait une demi-page blanche */
  .reperes-grille { columns: auto; margin-top: 8pt; }
  .reperes-grille .carte { margin-bottom: 8pt; padding: 8pt 10pt; font-size: 9pt; }
  .ages b { font-size: 8pt; }
  .renvois { break-inside: avoid; }
  .renvois a { font-size: 8.5pt; }
  .fiche-exo { grid-template-columns: 170pt 1fr; gap: 18pt; border: 0; padding: 0; }
  .fiche-vue .photo { max-height: 200pt; }
  .fiche-vue .tache { --cote: 150pt; }
  /* un exercice seul n'occupe qu'un coin de la feuille : le reste sert à écrire */
  .notes { display: block; margin-top: 20pt; break-inside: avoid; }
  .notes span { display: block; height: 22pt; border-bottom: .8pt solid #aab1c8; }
}