/* Enfances & Psy : la boîte de crayons de couleur (15 octobre 2026) */
:root {
  --papier: #fbf7ef; --blanc: #fffdf9; --graphite: #3b2e2a; --gris: #6d625c; --trait: #e3d8c8;
  --coquelicot: #e4572e; --coquelicot-p: #fde3d9; --soleil: #e8a317; --soleil-p: #fdf0cc;
  --menthe: #2f9c7a; --menthe-p: #d8f1e8; --lavande: #7b6cc7; --lavande-p: #e9e5f8; --bois: #f3d2a2;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--papier); color: var(--graphite); font: 400 1.08rem/1.72 Petrona, Georgia, serif; }
img { max-width: 100%; height: auto; display: block; }
a { color: #8a3b1f; text-underline-offset: .2em; }
h1, h2, h3, h4 { font-family: Quicksand, system-ui, sans-serif; font-weight: 700; line-height: 1.2; }
.file { position: absolute; left: -999px; }
.file:focus { left: 1rem; top: 1rem; background: var(--soleil); padding: .5rem 1rem; z-index: 9; }

.coquelicot, .age--coquelicot, .mine--coquelicot, .crayon--coquelicot, .bulle--coquelicot, .page-dessin--coquelicot { --c: var(--coquelicot); --p: var(--coquelicot-p); }
.age--soleil, .mine--soleil, .crayon--soleil, .bulle--soleil, .page-dessin--soleil { --c: var(--soleil); --p: var(--soleil-p); }
.age--menthe, .mine--menthe, .crayon--menthe, .bulle--menthe, .page-dessin--menthe { --c: var(--menthe); --p: var(--menthe-p); }
.age--lavande, .mine--lavande, .crayon--lavande, .bulle--lavande, .page-dessin--lavande { --c: var(--lavande); --p: var(--lavande-p); }

/* la trousse : nom et rubriques en mines de crayon */
.trousse { background: var(--blanc); border-bottom: 2px dashed var(--trait); }
.trousse__in { max-width: 1180px; margin: 0 auto; padding: 1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.6rem; }
.trousse__nom { font: 700 1.7rem/1 Quicksand, sans-serif; color: var(--graphite); text-decoration: none; }
.trousse__nom span { color: var(--coquelicot); }
.trousse__nav { display: flex; flex-wrap: wrap; gap: .5rem; }
.mine { display: inline-block; font: 700 .86rem/1 Quicksand, sans-serif; color: var(--graphite); text-decoration: none; padding: .55rem .9rem .55rem .8rem; background: var(--p); border-radius: 4px 999px 999px 4px; border-left: 6px solid var(--c); }
.mine:hover, .mine[aria-current] { background: var(--c); color: #fff; }

main { max-width: 1180px; margin: 0 auto; padding: 0 1rem 3rem; }

/* l'ouverture et la règle graduée */
.ouverture { padding: 2.6rem 0 1.6rem; text-align: center; }
.ouverture h1 { font-size: clamp(1.7rem, 4.2vw, 2.7rem); margin: 0 auto .8rem; max-width: 860px; }
.ouverture p { max-width: 720px; margin: 0 auto; color: var(--gris); }
.ouverture--rubrique { background: var(--p, var(--blanc)); border-radius: 26px 8px 26px 8px; margin-top: 1.6rem; padding: 2rem 1rem; }
.regle { position: relative; display: block; max-width: 760px; margin: 1.6rem auto 0; padding: 1.5rem 1.2rem .9rem; background: var(--bois); border-radius: 6px; text-decoration: none; color: var(--graphite); box-shadow: 0 3px 0 #d9b27a; }
.regle__graduations { position: absolute; left: 0; right: 0; top: 0; height: 12px; background: repeating-linear-gradient(90deg, var(--graphite) 0 1px, transparent 1px 12px), repeating-linear-gradient(90deg, var(--graphite) 0 2px, transparent 2px 60px); background-size: auto 7px, auto 12px; background-repeat: repeat-x; }
.regle__t { font: 700 1.08rem/1.35 Quicksand, sans-serif; }
.regle__t::after { content: " →"; color: var(--coquelicot); }

/* le nuancier des âges */
.nuancier { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 1.2rem; margin: 1.6rem 0 3rem; }
.nuancier > * { min-width: 0; }
.age { background: var(--blanc); border-top: 10px solid var(--c); border-radius: 0 0 20px 20px; padding: 1rem .9rem 1.1rem; box-shadow: 0 2px 0 var(--trait); }
.age h2 { margin: 0 0 .9rem; font-size: 1.45rem; color: var(--c); }
.age h2 small { display: block; font: 500 .85rem/1.3 Quicksand, sans-serif; color: var(--gris); }
.age .feuille { grid-template-columns: 1fr; }

/* fiches en dessins */
.feuille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: .9rem; }
.feuille > * { min-width: 0; }
.dessin { display: grid; gap: .35rem; align-content: start; text-decoration: none; color: var(--graphite); }
.dessin__img { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px 4px 14px 4px; background: var(--trait); border: 2px solid var(--c, var(--graphite)); }
.dessin__img img { width: 100%; height: 100%; object-fit: cover; }
.dessin__t { font: 700 1rem/1.3 Quicksand, sans-serif; overflow-wrap: anywhere; }
.dessin:hover .dessin__t { text-decoration: underline; text-decoration-color: var(--c, var(--coquelicot)); }
.dessin__m { font-size: .84rem; color: var(--gris); }

/* les bulles des inquiétudes */
.bulles { background: var(--blanc); border-radius: 28px; padding: 2rem 1.4rem; border: 2px dashed var(--trait); }
.bulles h2 { margin: 0 0 1.2rem; font-size: 1.6rem; text-align: center; }
.bulles ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 1.1rem; }
.bulle { position: relative; display: inline-block; padding: .75rem 1.1rem; background: var(--p); border: 2px solid var(--c); border-radius: 22px; font: 700 .98rem/1.25 Quicksand, sans-serif; color: var(--graphite); text-decoration: none; }
.bulle::after { content: ""; position: absolute; left: 1.4rem; bottom: -10px; width: 16px; height: 16px; background: var(--p); border-right: 2px solid var(--c); border-bottom: 2px solid var(--c); transform: rotate(45deg) skew(10deg, 10deg); }
.bulle:hover { background: var(--c); color: #fff; }
.bulle:hover::after { background: var(--c); }

/* la page (article, page fixe) */
.page-dessin { max-width: 820px; margin: 0 auto; }
.page-dessin__tete { padding: 2.2rem 0 1rem; }
.page-dessin__tete .mine { margin-bottom: .9rem; }
.page-dessin__tete h1 { font-size: clamp(1.6rem, 3.8vw, 2.4rem); margin: 0 0 .7rem; overflow-wrap: anywhere; }
.page-dessin__m { margin: 0; color: var(--gris); font-size: .92rem; }
.page-dessin__img { margin: .4rem 0 1.6rem; }
.page-dessin__img img { border-radius: 26px 6px 26px 6px; }
.page-dessin__texte { overflow-wrap: anywhere; }
.page-dessin__texte h2 { font-size: 1.5rem; margin: 2.2rem 0 .7rem; padding-bottom: .3rem; background: linear-gradient(transparent 70%, var(--p, var(--soleil-p)) 70%); display: inline; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.page-dessin__texte h2 + * { margin-top: 1.1rem; }
.page-dessin__texte h3 { font-size: 1.2rem; margin: 1.6rem 0 .5rem; }
.page-dessin__texte table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .95rem; display: block; overflow-x: auto; }
.page-dessin__texte th, .page-dessin__texte td { border: 1px solid var(--trait); padding: .55rem .7rem; text-align: left; vertical-align: top; }
.page-dessin__texte th { background: var(--p, var(--soleil-p)); }
.page-dessin__texte blockquote { margin: 1.2rem 0; padding: .9rem 1.2rem; background: var(--blanc); border-left: 5px solid var(--c, var(--coquelicot)); border-radius: 0 16px 16px 0; }
.page-dessin__texte img { border-radius: 14px; }

.encore { max-width: 1180px; margin: 2.8rem auto 0; }
.encore h2 { font-size: 1.4rem; }
.encore--large { margin-top: 1.6rem; }

/* la boîte de crayons du pied */
.boite { margin-top: 3.5rem; background: var(--graphite); color: #eadfd6; padding: 0 1rem 2rem; }
.boite__crayons { list-style: none; margin: 0 auto; padding: 0; max-width: 1180px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: .5rem 1rem; transform: translateY(-1.1rem); }
.crayon a { position: relative; display: block; background: var(--c); color: #fff; text-decoration: none; font: 700 .95rem/1 Quicksand, sans-serif; padding: .85rem 2.6rem .85rem 1rem; border-radius: 4px 0 0 4px; clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%); }
.crayon a::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 26px; background: linear-gradient(90deg, var(--bois) 0 60%, var(--c) 60%); }
.boite__in { max-width: 1180px; margin: 0 auto; display: grid; gap: .8rem; font-size: .93rem; }
.boite__in p { margin: 0; max-width: 760px; }
.boite__in nav { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.boite__in a { color: #fff; }