/* ============================================================
   Webjunior - feuille de style unique
   1. Réglages (couleurs, polices)   6. Accueil
   2. Bases                          7. Mag : rubriques et articles
   3. En-tête et menu                8. Pied de page
   4. Éléments communs               9. Pages diverses
   5. Grilles et cartes             10. Écrans étroits (mobile)
   ============================================================ */

/* ---------- 1. Réglages ---------- */
:root {
  --encre: #1F2A44;
  --texte: #2B2A33;
  --gris: #6B6257;
  --gris-clair: #8A8175;
  --filet: #E6E1D8;
  --filet-clair: #F0EBE3;
  --fond: #FFFFFF;

  --corail: #E8603C;
  --corail-fonce: #C2502F;
  --vert: #2A9D8F;
  --vert-fonce: #1E6B62;
  --ocre: #F2B33D;
  --ocre-fonce: #8A5A10;
  --bleu: #4A6FA5;
  --bleu-fonce: #3D5F8F;
  --violet-fonce: #6A4E8C;

  --fond-jaune: #FDF3DC;
  --fond-vert: #EEF6F3;
  --fond-greige: #F7F4EE;
  --fond-bleu: #F2F5FA;
  --fond-corail: #FBEFEA;

  --police-logo: 'DM Serif Display', Georgia, serif;
  --police-titre: 'Newsreader', Georgia, serif;
  --police-texte: 'DM Sans', system-ui, sans-serif;

  --rayon: 10px;
  --largeur: 1160px;
}

/* ---------- 2. Bases ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--police-texte);
  font-size: 16px;
  line-height: 1.5;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--encre); text-decoration: none; }
a:hover { color: var(--corail-fonce); }
h1, h2, h3 { font-family: var(--police-titre); font-weight: 500; line-height: 1.15; margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--corail); outline-offset: 2px; }
.invisible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: var(--largeur); margin: 0 auto; padding: 0 24px; }
.bloc { padding-top: 48px; padding-bottom: 56px; }
.bloc-serre { padding-top: 0; }
.bande { padding: 52px 0 56px; }
.bande-jaune { background: var(--fond-jaune); }
.bande-verte { background: var(--fond-vert); }
.bande-greige { background: var(--fond-greige); border-top: 1px solid var(--filet); }
.bande-bleue { background: var(--fond-bleu); }
.bande-corail { background: var(--fond-corail); }

/* ---------- 3. En-tête et menu ---------- */
.entete { background: #fff; border-bottom: 1px solid var(--filet); position: sticky; top: 0; z-index: 20; transition: transform .25s ease; }
.entete.cache { transform: translateY(-100%); }
.entete-ligne { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; padding-top: 18px; padding-bottom: 16px; }

.logo { display: flex; align-items: center; gap: 12px; color: var(--encre); }
.logo:hover { color: var(--encre); }
.logo-cubes { display: grid; grid-template-columns: 14px 14px; gap: 2.5px; flex-shrink: 0; }
.logo-cubes i { width: 14px; height: 14px; border-radius: 3px; }
.logo-cubes i:nth-child(1) { background: var(--corail); }
.logo-cubes i:nth-child(2) { background: var(--ocre); }
.logo-cubes i:nth-child(3) { background: var(--vert); }
.logo-cubes i:nth-child(4) { background: var(--bleu); }
.logo-textes { display: flex; flex-direction: column; }
.logo-nom { font-family: var(--police-logo); font-size: 34px; line-height: 1; }
.logo-signature { font-family: var(--police-titre); font-style: italic; font-size: 14px; color: var(--gris); margin-top: 3px; }

.menu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; font-size: 15px; font-weight: 500; }
.menu > a { padding: 6px 0; }
.menu > a.actif, .menu-mag-bouton.actif { color: var(--corail-fonce); box-shadow: inset 0 -2px 0 currentColor; }

.menu-mag { position: relative; }
.menu-mag-bouton { display: flex; align-items: center; gap: 6px; border: 0; background: none; padding: 6px 0; font-weight: 500; cursor: pointer; }
.menu-mag-bouton svg { transition: transform .2s; }
.menu-mag-bouton[aria-expanded="true"] svg { transform: rotate(180deg); }
.menu-mag-liste {
  display: none;
  position: absolute; top: calc(100% + 18px); left: -24px; width: min(640px, 90vw);
  background: #fff; border: 1px solid var(--filet); border-top: 2px solid var(--encre);
  box-shadow: 0 16px 28px rgba(31, 42, 68, .08);
  padding: 18px 26px 22px;
  grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px;
}
.menu-mag-liste.ouvert { display: grid; }
/* Pont invisible entre le bouton et la liste, pour que le survol ne se perde pas */
.menu-mag-liste::before { content: ''; position: absolute; left: 0; right: 0; top: -22px; height: 22px; }
@media (hover: hover) and (min-width: 961px) {
  .menu-mag:hover .menu-mag-liste { display: grid; }
  .menu-mag:hover .menu-mag-bouton svg { transform: rotate(180deg); }
}
.menu-mag-liste a { display: flex; flex-direction: column; gap: 2px; padding: 11px 0; border-bottom: 1px solid var(--filet-clair); }
.menu-mag-nom { font-weight: 500; }
.menu-mag-desc { font-size: 13px; font-weight: 400; color: var(--gris); }
.menu-mag-tout { grid-column: 1 / -1; border-bottom: 0 !important; color: var(--corail-fonce); font-size: 14px; }
#menu-activites-liste { left: 50%; transform: translateX(-50%); width: min(560px, 90vw); }

.recherche { display: flex; align-items: center; border: 1px solid var(--encre); border-radius: 999px; padding: 2px 2px 2px 14px; }
.recherche input { border: 0; outline: none; background: none; width: 120px; font-size: 14px; padding: 6px 0; transition: width .2s; }
.recherche input:focus { width: 180px; }
.recherche button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }

.burger { display: none; width: 44px; height: 44px; border: 1px solid var(--filet); border-radius: 50%; background: #fff; align-items: center; justify-content: center; cursor: pointer; }

.sous-nav { border-top: 1px solid var(--filet-clair); }
.sous-nav .wrap { display: flex; flex-wrap: wrap; gap: 6px 26px; padding-top: 12px; padding-bottom: 12px; font-size: 14px; }
.sous-nav a { color: var(--gris); }
.sous-nav a.actif { color: var(--encre); font-weight: 500; }

/* ---------- 4. Éléments communs ---------- */
.surtitre { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--corail-fonce); }
.surtitre-vert { color: var(--vert-fonce); }
.surtitre-ocre { color: var(--ocre-fonce); }
.surtitre-bleu { color: var(--bleu-fonce); }
.surtitre-violet { color: var(--violet-fonce); }

.titre-article { display: block; font-family: var(--police-titre); font-weight: 500; font-size: 19px; line-height: 1.25; }
.titre-moyen { font-size: 20px; }
.titre-grand { font-size: 32px; line-height: 1.12; }
.chapo { font-family: var(--police-titre); font-size: 18px; line-height: 1.55; color: #4E473F; margin: 0; }
.resume { display: block; font-family: var(--police-titre); font-size: 16px; line-height: 1.5; color: #4E473F; }
.date, .compteur { display: block; font-size: 13px; color: var(--gris); }
.texte-court { font-family: var(--police-titre); font-size: 17px; line-height: 1.45; }

.photo { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; background: var(--fond-greige); }
.vignette { width: 104px; height: 65px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: var(--fond-greige); }

.titre-section { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--encre); margin-bottom: 28px; }
.titre-section h2 { font-weight: 600; font-size: 28px; }

.bouton { display: inline-block; background: var(--encre); color: #fff; border: 0; border-radius: 999px; padding: 13px 22px; font-size: 15px; font-weight: 500; cursor: pointer; text-align: center; }
.bouton:hover { color: #fff; background: #2E3B5C; }
.bouton-bleu { background: var(--bleu); }
.bouton-bleu:hover { background: var(--bleu-fonce); }
.bouton-corail { background: var(--corail); }
.bouton-corail:hover { background: var(--corail-fonce); }
.bouton-contour { background: #fff; color: var(--encre); border: 1px solid var(--encre); }
.bouton-contour:hover { background: var(--fond-greige); color: var(--encre); }
.boutons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.lien-fleche { font-size: 14px; font-weight: 500; color: var(--corail-fonce); }
.lien-vert { color: var(--vert-fonce); }

.pile { display: flex; flex-direction: column; gap: 14px; }
.duo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 56px; align-items: start; }

.carte-blanche { display: flex; flex-direction: column; gap: 8px; background: #fff; border-radius: var(--rayon); padding: 20px 22px; }
.encart { border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.encart h2 { font-weight: 600; font-size: 24px; }
.encart p { margin: 0; font-size: 15px; color: #4E473F; }
.encart-bleu { background: var(--fond-bleu); }

.classement { list-style: none; margin: 0; padding: 0; }
.classement li { display: flex; gap: 20px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--filet); }
.classement li:last-child { border-bottom: 0; }
.classement-num { font-family: var(--police-logo); font-size: 30px; line-height: 1; color: var(--corail); width: 24px; flex-shrink: 0; }
.classement a { font-family: var(--police-titre); font-weight: 500; font-size: 19px; line-height: 1.3; }

.pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--filet); font-weight: 500; }
.pagination a, .pagination span { min-width: 40px; height: 40px; padding: 0 10px; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.pagination-courante { background: var(--encre); color: #fff; }
.pagination-trou { color: var(--gris-clair); }

/* ---------- 5. Grilles et cartes ---------- */
.grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
.grille-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.carte-article { display: flex; flex-direction: column; gap: 10px; }
.carte-activite { background: #fff; border-radius: var(--rayon); overflow: hidden; display: flex; flex-direction: column; }
.carte-activite img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--fond-greige); }
.carte-activite-texte { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.carte-activite .titre-article { font-size: 18px; }

/* ---------- 6. Accueil ---------- */
.une { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 44px; align-items: start; }
.une-principale { display: flex; flex-direction: column; gap: 14px; }
.une-titre { font-size: 36px; letter-spacing: -.3px; }
.une-liste { display: flex; flex-direction: column; }
.une-item { display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--filet); }
.une-item:first-child { padding-top: 0; }
.une-item:last-child { border-bottom: 0; }
.une-item > span { display: flex; flex-direction: column; gap: 7px; }

.blague-texte { font-family: var(--police-titre); font-size: 24px; line-height: 1.45; margin: 0; }

.choix-genre { display: flex; gap: 6px; background: #fff; padding: 4px; border-radius: 999px; border: 1px solid #D9E0EC; }
.choix-genre button { flex: 1; padding: 9px; border: 0; border-radius: 999px; background: none; font-size: 14px; font-weight: 500; cursor: pointer; }
.choix-genre button:hover, .choix-genre button.actif { background: var(--encre); color: #fff; }

.encart-cartes { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; border-top: 2px solid var(--encre); border-bottom: 1px solid var(--filet); padding: 28px 0; }
.encart-cartes-images { display: flex; gap: 10px; }
.encart-cartes-images img { width: 104px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.encart-cartes-texte { flex: 1 1 320px; display: flex; flex-direction: column; gap: 8px; }
.encart-cartes-texte h2 { font-weight: 600; font-size: 24px; }
.encart-cartes-texte p { margin: 0; color: #4E473F; }

/* ---------- 7. Mag : rubriques et articles ---------- */
.rubrique-entete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 40px; padding-bottom: 22px; border-bottom: 2px solid var(--encre); margin-bottom: 18px; }
.rubrique-entete h1 { font-size: 46px; letter-spacing: -.5px; margin-top: 10px; }
.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; font-size: 14px; }
.filtres a { border: 1px solid #D6CFC3; padding: 6px 14px; border-radius: 999px; }
.filtres a.actif { background: var(--encre); border-color: var(--encre); color: #fff; }
.article-avant { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: center; margin-bottom: 52px; }
.mag-bloc { margin-top: 44px; }
.liste-rubriques { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); column-gap: 40px; }
.liste-rubriques a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--filet); }
.liste-rubriques .resume { font-family: var(--police-texte); font-size: 13px; color: var(--gris); text-align: right; }

.article-entete { max-width: 800px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 52px; }
.article-entete h1 { font-size: 44px; letter-spacing: -.5px; line-height: 1.1; }
.chapo-article { font-family: var(--police-titre); font-style: italic; font-size: 21px; line-height: 1.5; color: #4E473F; max-width: 680px; margin: 0; }
.article-infos { font-size: 14px; color: var(--gris); margin: 4px 0 0; }
.article-photo { max-width: 800px; margin: 40px auto 0; padding: 0 24px; }
.article-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 4px; }
.article-photo figcaption { margin-top: 8px; font-size: 13px; color: var(--gris-clair); }

.article-texte { max-width: 728px; margin: 0 auto; padding: 44px 24px 64px; font-family: var(--police-titre); font-size: 19px; line-height: 1.75; color: var(--texte); }
.article-texte > p { margin: 0 0 24px; }
.article-texte > p:first-child::first-letter { font-family: var(--police-logo); float: left; font-size: 70px; line-height: 54px; margin: 7px 10px 0 0; color: var(--encre); }   /* lettrine sur 2 lignes exactement */
.article-texte h2 { font-weight: 600; font-size: 25px; line-height: 1.25; color: var(--encre); margin: 44px 0 14px; }
.article-texte h3 { font-weight: 600; font-size: 21px; color: var(--encre); margin: 32px 0 10px; }
.article-texte a { color: var(--corail-fonce); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article-texte ul, .article-texte ol { margin: 0 0 24px; padding-left: 24px; }
.article-texte li { margin-bottom: 8px; }
.article-texte img { margin: 28px auto; border-radius: 4px; }
.article-texte blockquote { margin: 40px 0; padding: 26px 0; border-top: 2px solid var(--encre); border-bottom: 1px solid var(--encre); font-style: italic; font-size: 26px; line-height: 1.35; color: var(--encre); }
.article-texte table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-family: var(--police-texte); font-size: 15px; }
.article-texte td, .article-texte th { border-bottom: 1px solid var(--filet); padding: 8px; text-align: left; }
.astuce { margin: 36px 0; background: var(--fond-greige); border-left: 3px solid var(--vert); padding: 22px 26px; font-family: var(--police-texte); font-size: 16px; line-height: 1.65; }
.astuce .surtitre { margin-bottom: 8px; }

.article-fin { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--filet); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; font-family: var(--police-texte); }
.tags { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; }
.article-texte .tags a { color: var(--gris); text-decoration: none; }
.partage { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--gris); }
.article-texte .partage a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #D6CFC3; display: flex; align-items: center; justify-content: center; color: var(--encre); }

.bandeau-attente { margin: 0; background: var(--fond-jaune); color: var(--ocre-fonce); text-align: center; font-size: 14px; font-weight: 500; padding: 12px 24px; border-bottom: 1px solid #EBD9A8; }

/* ---------- 8. Pied de page ---------- */
.pied { background: var(--encre); color: #E6E1D8; font-size: 14px; }
.pied .wrap { padding-top: 48px; }
.pied a { color: #E6E1D8; }
.pied a:hover { color: #fff; }
.pied-colonnes { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 36px; }
.pied-marque { display: flex; flex-direction: column; gap: 10px; }
.pied-marque p { margin: 0; line-height: 1.6; color: #C9C2B6; max-width: 300px; }
.pied-nom { font-family: var(--police-logo); font-size: 30px; line-height: 1; color: #fff; }
.pied-signature { font-family: var(--police-titre); font-style: italic; font-size: 15px; color: #C9C2B6; }
.pied-liens { display: flex; flex-direction: column; gap: 9px; }
.pied-titre { font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; margin-bottom: 4px; }
.pied-groupe { margin-top: 40px; padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, .15); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.pied-groupe .pied-titre { margin: 0; }
.pied-bas { padding: 16px 0 22px; border-top: 1px solid rgba(255, 255, 255, .15); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 22px; font-size: 13px; color: #A9A296; }
.pied-bas a { color: #A9A296; }
.pied-bas-liens { display: flex; gap: 8px 22px; }

/* ---------- 9. Pages diverses ---------- */
.page-erreur { max-width: 760px; }
.page-erreur h1 { font-size: 40px; margin: 12px 0 16px; }
.page-erreur .boutons { margin: 28px 0 52px; }

.titre-page { font-size: 46px; letter-spacing: -.5px; line-height: 1.05; }
.duo-egal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.trois-colonnes, .trois-listes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.trois-listes { margin-top: 48px; }
.titre-liste { font-weight: 600; font-size: 24px; padding-bottom: 12px; border-bottom: 2px solid var(--encre); margin-bottom: 4px; }
.liste-filets { list-style: none; margin: 0 0 14px; padding: 0; }
.liste-filets li { border-bottom: 1px solid var(--filet); }
.liste-filets a { display: block; padding: 12px 0; }
.liste-titres { list-style: none; margin: 0; padding: 0; columns: 3; column-gap: 40px; }
.liste-titres li { break-inside: avoid; border-bottom: 1px solid var(--filet); }
.liste-titres a { display: block; padding: 11px 0; }
.note { font-size: 14px; color: var(--gris); margin: 0; }

.bouton-petit { padding: 9px 16px; font-size: 14px; align-self: flex-start; }
.bouton-ocre { background: var(--ocre); color: var(--encre); }
.bouton-ocre:hover { background: #E5A42B; color: var(--encre); }

.recherche-large { display: flex; gap: 8px; background: #fff; border: 1px solid #E3D3AE; border-radius: 999px; padding: 5px 5px 5px 18px; max-width: 520px; }
.recherche-large input { flex: 1; border: 0; outline: none; background: none; min-width: 0; }
.recherche-large .bouton { padding: 10px 18px; font-size: 14px; }

/* Rire en famille */
.blague-carte { background: #fff; border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.blague-carte-texte { font-family: var(--police-titre); font-size: 18px; line-height: 1.6; color: var(--texte); }
.blague-reponse, .blague-page-reponse { font-family: var(--police-titre); font-style: italic; color: var(--vert-fonce); }
.blague-reponse { font-size: 18px; margin: 0; }
.tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tuile { background: #FBF7EF; border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.tuile .titre-article { font-weight: 600; font-size: 21px; }
.bandeau-envoi { background: var(--encre); color: #C9CEDA; border-radius: 14px; padding: 30px 34px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.bandeau-envoi > div { display: flex; flex-direction: column; gap: 6px; max-width: 620px; }
.bandeau-envoi-titre { font-family: var(--police-titre); font-weight: 500; font-size: 26px; color: #fff; }
.article-ligne { display: flex; gap: 20px; align-items: center; }
.vignette-large { width: 160px; height: 100px; }
.texte-seo { font-family: var(--police-titre); font-size: 17px; line-height: 1.7; color: #3A3833; }
.texte-seo h2 { font-weight: 600; font-size: 22px; margin-bottom: 10px; }
.texte-seo p { margin: 0; }

.blague-page { max-width: 760px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.blague-page h1 { font-size: 40px; }
.blague-page-texte { font-family: var(--police-titre); font-size: 25px; line-height: 1.55; color: var(--texte); }
.blague-page-reponse { font-size: 28px; line-height: 1.35; }
.blague-nav { max-width: 760px; margin: 0 auto; padding: 28px 0 0; display: flex; justify-content: space-between; align-items: center; gap: 14px; font-weight: 500; }
.blague-envoi { text-align: center; color: #4E473F; margin: 22px 0 0; }
.bandeau-parents { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }

/* Activités : quiz */
.chapo-limite { max-width: 720px; }
.classement-petit li { padding: 10px 0; gap: 14px; }
.classement-petit .classement-num { font-size: 22px; }
.classement-petit a { font-size: 17px; }
.quiz-entete { max-width: 800px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.quiz-entete h1 { font-size: 40px; }
.quiz-entete .photo { margin-top: 12px; border-radius: 10px; }
.quiz-liste { list-style: none; margin: 0 auto; padding: 0; max-width: 800px; }
.quiz-question { border-bottom: 1px solid var(--filet); padding: 26px 0; }
.quiz-question fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.quiz-question legend { display: flex; gap: 16px; align-items: baseline; padding: 0; margin-bottom: 14px; }
.quiz-num { font-family: var(--police-logo); font-size: 26px; line-height: 1; color: var(--vert); min-width: 34px; }
.quiz-intitule { font-family: var(--police-titre); font-weight: 500; font-size: 21px; line-height: 1.3; }
.quiz-choix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-left: 50px; }
.quiz-question .note { padding-left: 50px; margin-top: 10px; }
.quiz-reponse { position: relative; display: flex; }
.quiz-reponse input { position: absolute; opacity: 0; }
.quiz-reponse span { flex: 1; padding: 12px 14px; border: 1.5px solid #D6CFC3; border-radius: 10px; text-align: center; font-size: 15px; font-weight: 500; cursor: pointer; }
.quiz-reponse input:focus-visible + span { outline: 2px solid var(--corail); outline-offset: 2px; }
.quiz-reponse input:checked + span { background: var(--encre); border-color: var(--encre); color: #fff; }
.quiz-reponse.bonne span { background: #DCEFEA; border-color: var(--vert-fonce); color: #134A44; }
.quiz-reponse.fausse span { background: #FBE4DC; border-color: #B4472A; color: #7A2E18; text-decoration: line-through; }
.quiz-reponse input:disabled + span { cursor: default; }
.quiz-valider { max-width: 800px; margin: 30px auto 0; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.quiz-score { max-width: 800px; margin: 0 auto 20px; background: var(--fond-vert); border-radius: 14px; padding: 30px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; scroll-margin-top: 20px; }
.quiz-score-chiffre { font-family: var(--police-logo); font-size: 60px; line-height: 1; }

/* Activités : coloriages, mots-croisés, Kesako */
.recherche-coloriages { display: flex; flex-wrap: wrap; gap: 8px; max-width: 640px; }
.recherche-coloriages input, .recherche-coloriages select { padding: 11px 14px; border: 1px solid #C9DDD7; border-radius: 999px; background: #fff; }
.recherche-coloriages input { flex: 1 1 240px; }
.carte-coloriage { display: flex; flex-direction: column; gap: 8px; }
.carte-coloriage img { width: 100%; aspect-ratio: 1.414 / 1; object-fit: contain; background: #fff; border: 1px solid var(--filet); border-radius: 8px; padding: 6px; }
.coloriage { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 44px; align-items: start; }
.coloriage-dessin { margin: 0; background: #fff; border-radius: 14px; padding: 18px; }
.coloriage-dessin img { width: 100%; height: auto; }
.coloriage .titre-page { font-size: 38px; }
.solution { margin: 0; padding-left: 22px; font-family: var(--police-titre); font-size: 17px; line-height: 1.6; color: var(--vert-fonce); }
.kesako { display: flex; flex-direction: column; gap: 18px; }
.kesako-frise { display: flex; gap: 12px; overflow: hidden; }
.kesako-frise img { width: 150px; height: 150px; object-fit: cover; border-radius: 12px; background: #fff; }
.kesako-jeu { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; background: #fff; border-radius: 14px; padding: 28px; max-width: 760px; }
.kesako-jeu img { width: 280px; max-width: 100%; border-radius: 10px; }
.kesako-jeu .pile { flex: 1 1 260px; }
.kesako-champ { padding: 14px 16px; border: 1.5px solid #D6CFC3; border-radius: 10px; font-size: 22px; font-family: var(--police-titre); }
.kesako-message { font-family: var(--police-titre); font-size: 22px; line-height: 1.4; margin: 0; }
.kesako-message.bonne strong { color: var(--vert-fonce); }
.kesako-message.fausse strong { color: #B4472A; }

/* Vignettes carrées (mots-croisés) */
.grille-vignettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px 32px; }
.carte-vignette { display: flex; align-items: center; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--filet); }
.carte-vignette img { width: 120px; height: 120px; object-fit: cover; border-radius: 10px; flex-shrink: 0; background: #fff; }

/* Impression d'un coloriage depuis sa page */
@media print {
  html.imprime-dessin body > *:not(main),
  html.imprime-dessin main > *:not(:first-child),
  html.imprime-dessin .coloriage > .pile { display: none !important; }
  html.imprime-dessin .bande { background: none; padding: 0; }
  html.imprime-dessin .coloriage { display: block; }
  html.imprime-dessin .coloriage-dessin { padding: 0; }
  html.imprime-dessin .coloriage-dessin img { width: 100%; }
}

/* Formulaires */
.formulaire-page { max-width: 680px; display: flex; flex-direction: column; gap: 16px; }
.formulaire-page h1 { font-size: 40px; }
.formulaire { background: #fff; border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 18px; margin-top: 8px; }
.champ { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; }
.champ input, .champ select, .champ textarea { width: 100%; padding: 11px 12px; border: 1px solid #D6CFC3; border-radius: 8px; background: #fff; font-size: 16px; font-weight: 400; }
.champ textarea { resize: vertical; }
.champs-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.erreur { font-size: 13px; font-weight: 400; color: #B4472A; }
.succes { background: #DCEFEA; color: #134A44; border-radius: 10px; padding: 16px 20px; }
.formulaire .bouton { align-self: flex-start; }

/* Prénoms */
.generateur { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 48px; align-items: start; }
.generateur-form { gap: 20px; }
.groupe-champs { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.groupe-champs legend { padding: 0; margin-bottom: 8px; font-size: 14px; font-weight: 500; }
.pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.pastille { position: relative; display: flex; }
.pastille input { position: absolute; opacity: 0; }
.pastille span { padding: 8px 16px; border: 1px solid #D6CFC3; border-radius: 999px; font-size: 14px; cursor: pointer; transition: background .15s, color .15s; }
.pastille span:hover { border-color: var(--encre); }
.pastille input:checked + span { background: var(--encre); border-color: var(--encre); color: #fff; }
.pastille input:focus-visible + span { outline: 2px solid var(--corail); outline-offset: 2px; }
.propositions { border-top: 1px solid var(--filet); padding-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.propositions-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.propositions-liste a { background: var(--fond-bleu); border-radius: 10px; padding: 14px 10px; text-align: center; font-family: var(--police-titre); font-weight: 500; font-size: 21px; }
.propositions-liste a:hover { background: var(--bleu); color: #fff; }
.propositions-une { grid-template-columns: 1fr; }
.propositions-une a { font-family: var(--police-logo); font-weight: 400; font-size: 44px; padding: 26px; }
.abecedaire { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.abecedaire a, .abecedaire span { display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 10px; font-family: var(--police-logo); font-size: 22px; }
.abecedaire a { background: #fff; border: 1px solid var(--filet); }
.abecedaire a:hover { background: var(--encre); border-color: var(--encre); color: #fff; }
.abecedaire span { color: #CFC8BC; }
.lettre-bloc { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--filet); scroll-margin-top: 110px; }
.lettre-titre { font-family: var(--police-logo); font-weight: 400; font-size: 44px; line-height: 1; color: var(--bleu); }
.liste-prenoms { list-style: none; margin: 0; padding: 0; columns: 5 140px; column-gap: 24px; }
.liste-prenoms a { display: block; padding: 4px 0; }
.genre-fille::after, .genre-garcon::after, .genre-mixte::after { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-left: 7px; vertical-align: middle; }
.genre-fille::after { background: var(--corail); }
.genre-garcon::after { background: var(--bleu); }
.genre-mixte::after { background: var(--ocre); }
.legende-genres { display: flex; gap: 20px; margin-top: 20px; }
.fiche-prenom { display: flex; flex-direction: column; gap: 14px; }
.fiche-prenom .titre-page { font-family: var(--police-logo); font-weight: 400; font-size: 64px; }
.fiche-prenom-etiquettes { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.fiche-prenom-etiquettes span { background: #fff; border-radius: 999px; padding: 6px 14px; font-size: 14px; }
.nuage-prenoms { display: flex; flex-wrap: wrap; gap: 8px 18px; font-family: var(--police-titre); font-size: 19px; }

/* Cartes virtuelles */
.filtres-cartes { margin: 8px 0 0; }
.filtres-cartes a { background: #fff; border-color: #EBCFC4; }
.carte-ecard { display: flex; flex-direction: column; gap: 10px; }
.carte-ecard-image { position: relative; display: block; }
.carte-ecard-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--fond-greige); }
.carte-ecard-lecture { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(31, 42, 68, .82); }
.carte-ecard-lecture::after { content: ''; position: absolute; left: 13px; top: 10px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #fff; }
.carte-envoi { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 44px; align-items: start; margin-top: 22px; }
.carte-envoi .titre-page { font-size: 38px; }
.carte-media { background: #fff; border-radius: 14px; padding: 10px; }
.carte-media iframe, .carte-media video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; background: #000; }
.carte-media img { width: 100%; height: auto; border-radius: 8px; }
.carte-musique { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.carte-musique audio { height: 36px; }
.carte-partie { align-items: flex-start; }
.carte-partie h2 { font-weight: 600; font-size: 28px; }
.carte-partie p { margin: 0; color: #4E473F; }
.carte-partie-coche { width: 52px; height: 52px; border-radius: 50%; background: #DCEFEA; color: var(--vert-fonce); display: flex; align-items: center; justify-content: center; }
.compteur-caracteres { white-space: nowrap; }
.carte-recue { max-width: 820px; display: flex; flex-direction: column; gap: 22px; }
.carte-recue .titre-page { font-size: 40px; }
.carte-mot { background: #fff; border-radius: 14px; padding: 30px 34px; font-family: var(--police-titre); font-size: 22px; line-height: 1.55; }
.carte-mot p { margin: 0; }
.carte-signature { margin-top: 14px !important; text-align: right; font-style: italic; }

/* Contact, recherche, mentions légales */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
.questions { display: flex; flex-direction: column; margin-top: 8px; }
.question { border-bottom: 1px solid var(--filet); }
.question summary { display: flex; justify-content: space-between; gap: 16px; padding: 15px 0; font-family: var(--police-titre); font-weight: 500; font-size: 18px; cursor: pointer; list-style: none; }
.question summary::-webkit-details-marker { display: none; }
.question summary::after { content: '+'; font-family: var(--police-texte); font-size: 22px; line-height: 1; color: var(--corail-fonce); }
.question[open] summary::after { content: '−'; }
.question p { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: #4E473F; }
.question a { color: var(--corail-fonce); text-decoration: underline; }
.recherche-page { max-width: 640px; margin-top: 6px; }
.resultats { display: flex; flex-direction: column; gap: 22px; max-width: 860px; }
.resultats-groupes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 40px; margin-top: 48px; }
.resultats-groupes:first-child { margin-top: 0; }
.page-legale { padding-top: 20px; }
.page-legale h2:first-child { margin-top: 0; }

/* ---------- 10. Écrans étroits ---------- */
@media (max-width: 960px) {
  .une, .duo, .article-avant, .duo-egal, .trois-colonnes, .trois-listes, .coloriage, .generateur, .carte-envoi, .contact { grid-template-columns: 1fr; gap: 36px; }
  .abecedaire { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .liste-titres { columns: 2; }
  .grille-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied-colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .burger { display: flex; }
  .menu {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--filet); padding: 8px 24px 20px;
    box-shadow: 0 16px 28px rgba(31, 42, 68, .08);
  }
  .menu.ouvert { display: flex; }
  .menu > a, .menu-mag-bouton { padding: 13px 0; border-bottom: 1px solid var(--filet-clair); width: 100%; }
  .menu > a.actif, .menu-mag-bouton.actif { box-shadow: none; }
  .menu-mag-liste, #menu-activites-liste { position: static; width: auto; transform: none; box-shadow: none; border: 0; padding: 0 0 8px 14px; grid-template-columns: 1fr; }
  .menu-mag-desc { display: none; }
  .recherche { margin-top: 16px; }
  .recherche input, .recherche input:focus { width: 100%; }
}

@media (max-width: 600px) {
  .wrap { padding: 0 16px; }
  .logo-nom { font-size: 28px; }
  .logo-signature { font-size: 12px; }
  .bloc { padding-top: 32px; padding-bottom: 40px; }
  .bande { padding: 40px 0 44px; }
  .grille-3 { grid-template-columns: 1fr; gap: 32px; }
  .une-titre, .titre-grand { font-size: 28px; }
  .rubrique-entete h1, .article-entete h1 { font-size: 32px; }
  .chapo-article { font-size: 19px; }
  .article-texte { font-size: 18px; padding-left: 16px; padding-right: 16px; }
  .article-photo { padding: 0; }
  .article-photo img { border-radius: 0; }
  .titre-section h2 { font-size: 24px; }
  .blague-texte { font-size: 21px; }
  .liste-rubriques .resume { display: none; }
  .pied-colonnes { grid-template-columns: 1fr; }
  .encart-cartes-images img { width: 88px; }
  .titre-page, .blague-page h1, .formulaire-page h1 { font-size: 32px; }
  .blague-page-texte { font-size: 21px; }
  .liste-titres { columns: 1; }
  .tuiles { grid-template-columns: 1fr; }
  .champs-duo { grid-template-columns: 1fr; }
  .formulaire, .blague-carte { padding: 20px; }
  .vignette-large { width: 110px; height: 69px; }
  .quiz-choix { grid-template-columns: 1fr; padding-left: 0; }
  .quiz-question .note { padding-left: 0; }
  .quiz-entete h1, .coloriage .titre-page { font-size: 30px; }
  .kesako-jeu { padding: 20px; }
  .kesako-frise img { width: 110px; height: 110px; }
  .propositions-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .propositions-une { grid-template-columns: 1fr; }
  .lettre-bloc { grid-template-columns: 1fr; gap: 10px; }
  .fiche-prenom .titre-page { font-size: 48px; }
  .carte-envoi .titre-page, .carte-recue .titre-page { font-size: 30px; }
  .carte-mot { padding: 22px; font-size: 19px; }
}