@import url("../polices/polices.css");

/* Kidicolor — charte « Arc-en-ciel » (docs/charte/CHARTE.md, choix de Tom du 11/11/2026).
   Bandeau dégradé, fond pêche à grosses taches pastel, texte violet nuit, police Fredoka.
   Les cartes de coloriage sont BLANCHES, sans couleur autour du dessin : la couleur de la carte
   (--c, en rotation) ne touche que le titre et les boutons. Les dessins restent sur fond blanc. */
:root {
  --peche: #FFF1E6;
  --encre: #2D1B4E;
  --encre-douce: #5b4d72;
  --gris: #666;
  --blanc: #ffffff;
  --rouge: #FF6B6B;
  --soleil: #FFB830;
  --menthe: #4ECDC4;
  --bleu: #5E9BFF;
  --violet: #B47CFF;
  --rose: #FF8FC7;
  --rose-pale: #FFD6E0;
  --menthe-pale: #D4F5EF;
  --jaune-pale: #FFE9B0;
  --lilas-pale: #E3D9FF;
  --c: var(--violet);
  --police: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --ombre: 0 3px 12px rgba(45, 27, 78, .10);
  --ombre-pastille: 0 2px 0 rgba(0, 0, 0, .12);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--encre); font: 500 18px/1.55 var(--police);
  background:
    radial-gradient(circle at 6% 14%, var(--rose-pale) 0 110px, transparent 111px),
    radial-gradient(circle at 94% 9%, var(--menthe-pale) 0 140px, transparent 141px),
    radial-gradient(circle at 90% 62%, var(--jaune-pale) 0 120px, transparent 121px),
    radial-gradient(circle at 8% 78%, var(--lilas-pale) 0 150px, transparent 151px),
    var(--peche);
  background-attachment: fixed;
}
a { color: inherit; }
img { max-width: 100%; }
.enveloppe { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
h1, h2, h3 { font-family: var(--police); font-weight: 700; line-height: 1.15; text-wrap: balance; }
h1 { font-size: clamp(1.8rem, 4.5vw, 2.4rem); margin: .4em 0 .3em; }
h2 { font-size: clamp(1.35rem, 3vw, 1.7rem); margin: 1.6em 0 .6em; }

/* ── bandeau arc-en-ciel ── */
.entete { background: linear-gradient(90deg, #FF6B6B, #FFB830, #4ECDC4, #5E9BFF, #B47CFF); }
.entete .enveloppe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding-top: 14px; padding-bottom: 12px; }
.logo { font-weight: 700; font-size: 2rem; line-height: 1; text-decoration: none; color: #fff; letter-spacing: -.5px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .15); white-space: nowrap; }
.logo span { color: var(--encre); text-shadow: none; }
.cherche { display: flex; flex: 1 1 240px; max-width: 360px; margin-left: auto; position: relative; }
.cherche input { flex: 1; min-width: 0; font: inherit; font-size: 1rem; padding: 10px 46px 10px 18px; border: 0; border-radius: 999px;
  background: #fff; color: var(--encre); box-shadow: 0 2px 0 rgba(0, 0, 0, .15); }
.cherche input:focus { outline: 3px solid var(--encre); outline-offset: 1px; }
.cherche button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0;
  border-radius: 50%; background: transparent; font-size: 1.05rem; cursor: pointer; }
.rubriques { list-style: none; display: flex; gap: 2px 4px; margin: 0; padding: 0 0 2px; width: 100%; overflow-x: auto; scrollbar-width: none; }
.rubriques::-webkit-scrollbar { display: none; }
.rubriques li { flex: none; }
.rubriques a { display: block; padding: 3px 12px; border-radius: 999px; color: #fff; text-decoration: none; font-weight: 600; font-size: 1rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.rubriques a:hover, .rubriques a[aria-current] { background: rgba(255, 255, 255, .95); color: var(--encre); text-shadow: none; }

/* ── textes ── */
.fil { font-size: .92rem; color: var(--encre-douce); margin: 18px 0 0; }
.fil a { color: var(--encre-douce); }
.chapeau { font-size: 1.12rem; font-weight: 500; color: var(--encre-douce); max-width: 70ch; }
.heros { padding: 14px 0 4px; }
.heros h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); }
.texte-page { max-width: 75ch; background: rgba(255, 255, 255, .78); border-radius: 20px; padding: 6px 24px 14px; box-shadow: var(--ombre); }
.texte-page h1 { margin-top: .5em; }
.texte-page p, .texte-page li { font-weight: 400; }
.a-completer { background: #ffe08a; color: #2b2340; padding: 0 6px; border-radius: 4px; font-weight: 700; border: 2px dashed #d08b00; }
.conseils { max-width: 78ch; background: #fff; border-radius: 20px; padding: 4px 22px 10px; box-shadow: var(--ombre); margin: 34px 0 10px; }
.conseils h2 { color: var(--violet); margin-top: .8em; }
.conseils p { font-weight: 400; }
.mention-ia { display: inline-flex; gap: 6px; align-items: center; font-size: .9rem; font-weight: 600; color: var(--encre-douce); }

/* ── pastilles (âges, thèmes) ── */
.pastilles { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 18px; padding: 0; list-style: none; }
.pastille { display: inline-block; padding: 7px 16px; border-radius: 999px; background: #fff; color: var(--encre); font: inherit;
  font-weight: 700; font-size: 1rem; text-decoration: none; box-shadow: var(--ombre-pastille); border: 0; cursor: pointer; }
.pastille:hover { background: var(--jaune-pale); }
.pastille.on, .pastille[aria-pressed="true"] { background: var(--violet); color: #fff; }

/* ── grilles de cartes : blanches, la couleur seulement sur le titre et les boutons ── */
.grille { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
.carte { background: #fff; border-radius: 20px; padding: 10px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--ombre);
  transition: transform .12s, box-shadow .12s; }
.carte:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(45, 27, 78, .16); }
.carte[hidden] { display: none; }
.carte .vue { display: flex; flex-direction: column; gap: 6px; text-decoration: none; flex: 1; }
.carte img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1.414; object-fit: contain; background: #fff; }
.carte b { font-size: 1rem; line-height: 1.25; font-weight: 700; color: var(--c); }
.carte .age { font-size: .78rem; font-weight: 700; color: var(--gris); }
.carte .boutons { display: flex; gap: 6px; }
.carte .boutons a { flex: 1; text-align: center; padding: 8px 4px; border-radius: 999px; font-weight: 700; font-size: .82rem;
  background: var(--c); color: #fff; text-decoration: none; white-space: nowrap; }
.carte .boutons a:hover { filter: brightness(.92); }
.tuiles .carte b { font-size: 1.15rem; }
.tuiles .carte small { font-size: .85rem; color: var(--gris); font-weight: 600; }
@media (max-width: 420px) {
  .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .carte { padding: 8px; border-radius: 16px; }
  .carte .boutons { flex-direction: column; gap: 4px; }
}

/* ── la page d'un coloriage ── */
.fiche { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .fiche { grid-template-columns: minmax(0, 640px) minmax(260px, 1fr); } }
.atelier { background: #fff; border-radius: 24px; padding: 14px; box-shadow: var(--ombre); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.actions.bas { margin-top: 12px; }
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-weight: 700; font-size: 1.05rem;
  padding: 11px 22px; border: 0; border-radius: 999px; background: var(--c); color: #fff; text-decoration: none; cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .14); }
.bouton:hover { filter: brightness(.93); }
.bouton:disabled { opacity: .6; cursor: progress; }
.actions .bouton.gros { flex: 1 1 200px; font-size: 1.15rem; padding: 14px 20px; }
.bouton.doux { background: #fff; color: var(--encre); box-shadow: inset 0 0 0 2px #e6dcef; }
.bouton.doux:hover { background: var(--jaune-pale); filter: none; }
/* la palette reste sous la main pendant qu'on fait défiler le dessin */
.palette { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px -14px 10px; padding: 10px 14px 8px; position: sticky; top: 0; z-index: 3;
  background: #fff; border-bottom: 2px solid #f1eaf5; }
@media (max-width: 600px) { .palette { flex-wrap: nowrap; overflow-x: auto; } .palette button { flex: none; } }
.palette button { width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgba(45, 27, 78, .35); cursor: pointer; padding: 0; }
.palette button[aria-pressed="true"] { outline: 4px solid var(--encre); outline-offset: 2px; transform: scale(1.1); }
.palette .gomme { background: #fff; font-size: 1rem; }
.feuille { position: relative; background: #fff; border: 2px solid #f1eaf5; border-radius: 10px; overflow: hidden; touch-action: manipulation; }
.feuille svg { position: relative; display: block; width: 100%; height: auto; }
.feuille .z { cursor: pointer; }
.feuille canvas.couleurs { position: absolute; inset: 0; width: 100%; height: 100%; }
.feuille[data-peinture] svg { pointer-events: none; }
.feuille[data-peinture] { cursor: pointer; }
.feuille .attente { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); background: var(--encre); color: #fff;
  border-radius: 999px; padding: 4px 14px; font-size: .85rem; }
.colonne .astuce { background: #fff; border-radius: 16px; padding: 10px 16px; font-size: .97rem; font-weight: 400; box-shadow: var(--ombre); }
.infos { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: .97rem; background: #fff; border-radius: 16px;
  padding: 12px 16px; box-shadow: var(--ombre); }
.infos dt { font-weight: 700; }
.infos dd { margin: 0; font-weight: 400; }
.encart { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.createur { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 10px 0 20px; }
.createur input, .createur select { font: inherit; font-size: 1.2rem; padding: 8px 14px; border: 0; border-radius: 14px; background: #fff;
  color: var(--encre); box-shadow: var(--ombre); }
.createur input { width: min(100%, 320px); }
.titre-couleur { color: var(--c); }

/* ── publicité : hors du dessin, place réservée, toujours signalée ── */
.pub { margin: 32px 0; padding: 8px; background: rgba(255, 255, 255, .6); border-radius: 14px; min-height: 140px; }
.colonne .pub { margin-top: 28px; min-height: 280px; }
.pub .mention { display: block; font-size: .75rem; color: var(--encre-douce); margin-bottom: 4px; }
.pub .vide { display: grid; place-items: center; min-height: 110px; border: 2px dashed #e6dcef; border-radius: 10px;
  color: var(--encre-douce); font-size: .85rem; text-align: center; padding: 8px; }

/* ── pied ── */
.pied { margin-top: 60px; background: var(--encre); color: #eee6f7; padding: 22px 0 30px; font-size: .95rem; }
.pied::before { content: ""; display: block; height: 6px; margin-top: -22px; margin-bottom: 22px;
  background: linear-gradient(90deg, #FF6B6B, #FFB830, #4ECDC4, #5E9BFF, #B47CFF); }
.pied nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.pied a { color: #fff; }
.pied p { font-weight: 400; }
.pied .ia { font-weight: 600; color: #fff; }

/* ── impression : seulement la feuille, pleine page A4 ── */
@page { size: A4 portrait; margin: 0; }
@media print {
  body { background: #fff; }
  .entete, .pied, .fil, h1, .actions, .palette, .colonne, .voisins, .pub, .createur, .chapeau, .conseils, .attente { display: none !important; }
  main .enveloppe, .fiche, .atelier { display: block; max-width: none; padding: 0; margin: 0; border: 0; box-shadow: none; }
  .feuille { border: 0; border-radius: 0; width: 210mm; height: 296mm; }
  .feuille svg { width: 210mm; height: 296mm; }
}
.colonnes { columns: 2 260px; padding-left: 1.2em; }
.colonnes li { break-inside: avoid; }
.entete nav { flex: 1 1 100%; min-width: 0; }
@media (max-width: 600px) {
  .logo { font-size: 1.7rem; }
  .cherche { flex-basis: 100%; max-width: none; margin-left: 0; }
}

/* ── rubriques en familles (labyrinthes, magiques, écriture) ── */
.sommaire { margin-top: 4px; }
.sommaire .pastille { font-size: .92rem; padding: 6px 14px; }
.famille h2 small { font-size: .7em; color: var(--encre-douce); font-weight: 600; }
.famille .chapeau { margin-top: -4px; }
.famille[hidden] { display: none; }
.encart small { color: var(--encre-douce); }
.bloc-cahiers { background: #fff; border-radius: 24px; padding: 6px 22px 12px; box-shadow: var(--ombre); margin: 26px 0 10px; }
.bloc-cahiers h2 { margin-top: .7em; color: var(--violet); }
.bloc-cahiers p { font-weight: 400; max-width: 75ch; }
h1 small { font-size: .6em; color: var(--encre-douce); font-weight: 600; }

/* ── cahiers d'activités : choisir les pages ── */
.classes { margin-bottom: 8px; }
.cahier-app { background: #fff; border-radius: 24px; padding: 16px 18px 0; box-shadow: var(--ombre); margin-top: 6px; }
.onglets { margin: 0 0 12px; }
.onglets .pastille { box-shadow: inset 0 0 0 2px #eee4f6; }
.onglets .pastille[aria-selected="true"] { background: var(--c); color: #fff; box-shadow: none; }
.cahier-options { display: grid; gap: 8px; grid-template-columns: 1fr; margin-bottom: 8px; padding: 12px 14px; border-radius: 16px;
  background: #faf7fd; }
@media (min-width: 800px) { .cahier-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } .choix-rapides { grid-column: 1 / -1; } }
.choix-rapides { display: flex; flex-wrap: wrap; gap: 8px; }
.choix-rapides .bouton { font-size: .95rem; padding: 8px 16px; }
.option { display: flex; gap: 10px; align-items: flex-start; font-size: .97rem; font-weight: 400; cursor: pointer; }
.option input { width: 22px; height: 22px; accent-color: var(--violet); flex: none; margin-top: 2px; }
.cahier h2 { margin: .6em 0 .5em; color: var(--c); }
.pages-cahier { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (max-width: 420px) { .pages-cahier { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.page-cahier label { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 8px; border-radius: 16px; cursor: pointer;
  border: 3px solid #eee4f6; background: #fff; position: relative; transition: border-color .12s, opacity .12s; }
.page-cahier input { position: absolute; top: 12px; left: 12px; width: 24px; height: 24px; accent-color: var(--c); z-index: 1; }
.page-cahier label:has(input:checked) { border-color: var(--c); }
.page-cahier label:has(input:not(:checked)) { opacity: .55; }
.page-cahier label:has(input:focus-visible) { outline: 3px solid var(--encre); outline-offset: 2px; }
.page-cahier .vignette { display: grid; place-items: center; aspect-ratio: 1 / 1.414; background: #fff; border: 1px solid #f0eaf5; border-radius: 6px; overflow: hidden; }
.page-cahier img { display: block; max-width: 100%; max-height: 100%; }
.page-cahier.format-A5 img { width: 100%; }
.page-cahier .legende { display: flex; flex-direction: column; gap: 1px; font-size: .9rem; line-height: 1.25; }
.page-cahier .num { font-size: .78rem; font-weight: 700; color: var(--encre-douce); }
.page-cahier b { color: var(--encre); font-size: .92rem; }
.page-cahier small { color: var(--gris); font-weight: 600; font-size: .78rem; }
.apercu { margin-top: 22px; }
.apercu h2 { font-size: 1.25rem; margin: .4em 0 .2em; }
.feuilles-apercu { display: flex; flex-wrap: wrap; gap: 12px; padding: 4px 0 14px; }
.mini-feuille { position: relative; width: 92px; aspect-ratio: 210 / 297; background: #fff; border: 1px solid #d9cfe6; border-radius: 3px;
  box-shadow: 0 2px 6px rgba(45, 27, 78, .12); }
.mini-place { position: absolute; display: grid; place-items: center; overflow: hidden; }
.mini-place img { max-width: 100%; max-height: 100%; display: block; }
.mini-place.tourne img, .mini-place.tourne-g img { position: absolute; left: 50%; top: 50%; width: 70.7%; height: auto;
  max-width: none; max-height: none; transform: translate(-50%, -50%) rotate(90deg); }
.mini-place.corrige { outline: 1px dashed #ef6c00; }
.num-feuille { position: absolute; right: -6px; bottom: -6px; background: var(--c); color: #fff; font-size: .72rem; font-weight: 700;
  border-radius: 999px; min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 5px; }
.barre-cahier { position: sticky; bottom: 0; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 -18px;
  padding: 12px 18px; background: #fff; border-top: 2px solid #f1eaf5; border-radius: 0 0 24px 24px; }
.barre-cahier .bilan { flex: 1 1 100%; margin: 0; font-weight: 700; font-size: .95rem; }
.barre-cahier .bouton.gros { flex: 1 1 180px; font-size: 1.05rem; padding: 12px 16px; }
@media (min-width: 800px) { .barre-cahier .bilan { flex: 1 1 auto; } .barre-cahier .bouton.gros { flex: 0 1 auto; } }
.apercu .bilan { margin: 0 0 8px; font-weight: 600; color: var(--encre-douce); }
.tuile-classe b { font-size: 1.1rem; }
/* les feuilles à imprimer (hors de l'écran, mais dessinées : le PDF lit leur géométrie) */
#impression { position: absolute; left: -10000px; top: 0; width: 210mm; pointer-events: none; }
#impression .feuille-a4 { position: relative; width: 210mm; height: 297mm; overflow: hidden; background: #fff; }
#impression .place { position: absolute; }
#impression .dedans { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; }
#impression svg { display: block; width: 100%; height: 100%; }
.encre .deco { display: none; }
@media print {
  body.imprime-cahier > *:not(main), body.imprime-cahier main .enveloppe > *:not(#impression) { display: none !important; }
  body.imprime-cahier main .enveloppe { padding: 0; max-width: none; }
  body.imprime-cahier #impression { position: static; left: 0; }
  body.imprime-cahier #impression .feuille-a4 { break-after: page; page-break-after: always; }
}

/* l'en-tête d'un cahier : sa couverture et son sommaire */
.tete-cahier { display: flex; gap: 18px; align-items: flex-start; margin: 6px 0 14px; }
.tete-cahier .couverture { width: 150px; flex: none; aspect-ratio: 1 / 1.414; border: 1px solid #eee4f6; border-radius: 8px;
  box-shadow: var(--ombre); background: #fff; }
.tete-cahier h2 { margin: .2em 0 .3em; color: var(--c); }
.tete-cahier p { margin: 0 0 .4em; font-weight: 400; font-size: .97rem; }
.tete-cahier details { font-size: .95rem; font-weight: 400; }
.tete-cahier summary { cursor: pointer; font-weight: 700; color: var(--encre-douce); }
.tete-cahier ol { margin: .4em 0; padding-left: 1.4em; }
@media (max-width: 520px) { .tete-cahier .couverture { width: 96px; } .tete-cahier h2 { font-size: 1.15rem; } }
.page-cahier.sorte-couverture label, .page-cahier.sorte-diplome label { background: #fbf8ff; }
.onglets .pastille { font-size: .92rem; }

/* une palette ou une barre d'actions marquée « hidden » (fiches d'écriture et de jeux) reste cachée */
.palette[hidden], .actions[hidden] { display: none !important; }

/* les deux façons d'assembler un cahier */
.modes { border: 0; margin: 4px 0 10px; padding: 12px 14px; border-radius: 16px; background: #faf7fd; display: grid; gap: 10px; }
.modes legend { font-weight: 700; padding: 0; margin-bottom: 4px; }
@media (min-width: 800px) { .modes { grid-template-columns: 1fr 1fr; } .modes legend { grid-column: 1 / -1; } }
.mode { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; font-weight: 400; cursor: pointer; background: #fff;
  border: 2px solid #eee4f6; border-radius: 14px; padding: 10px; }
.mode:has(input:checked) { border-color: var(--c); }
.mode input { width: 20px; height: 20px; accent-color: var(--c); flex: none; margin-top: 4px; }
.schema { width: 96px; flex: none; }
.s-feuille { fill: #fff; stroke: var(--encre); stroke-width: 2; }
.s-agrafe { stroke: #e53935; stroke-width: 4; stroke-linecap: round; }
.s-fleche { fill: none; stroke: var(--encre-douce); stroke-width: 2.5; }
.s-pli { stroke: var(--encre-douce); stroke-width: 1.5; stroke-dasharray: 4 3; }
.consigne-livret { background: #fff8e7; border-radius: 14px; padding: 4px 14px 12px; margin-bottom: 10px; font-size: .95rem; font-weight: 400; }
.boutons-livret { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.boutons-livret .bouton { font-size: .95rem; padding: 9px 14px; }
.mini-place.tourne-g img { transform: translate(-50%, -50%) rotate(-90deg); }
.mini-feuille.a-part { outline: 2px dashed #ffb300; }