/* Pages de contenu (SEO) : /petit-bac-lettre-x, /petit-bac-<catégorie>, règles, idées.
   HTML statique généré par tools/seo_pages.py, sans JavaScript (sauf le bouton de thème,
   /assets/seo-theme.js). Même identité que le jeu depuis la refonte d'octobre : feuille quadrillée
   à marge rouge, encre marine, titres écrits à la main (Caveat), cartes pastel inclinées, ombres
   pleines, gribouillis. Thème clair/sombre : réglage du jeu (data-theme), sinon celui du téléphone. */
:root{
  --paper:#f5f7fc; --grid:#e1e6f4; --ink:#1b2a4a; --ink-soft:#56617f; --card:#fff; --line:#d5dcef;
  --yellow:#ffe14d; --red:#c92f3c; --margin:#f0a3aa; --hl:#fff3a3; --link:#1f5fbf; --hard:#1b2a4a;
  --t-yellow:#ffe14d; --t-coral:#ffc9bd; --t-mint:#bdeed6; --t-sky:#c7e1ff; --t-lilac:#ddd3ff; --t-peach:#ffdcaa; --t-ink:#1b2a4a;
  --hand:'Caveat','Segoe Print','Comic Sans MS',cursive;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#13161e; --grid:#1d2230; --ink:#edf0f8; --ink-soft:#a3abc2; --card:#1c212d; --line:#2c3346;
    --red:#ff6b76; --margin:#6e3039; --hl:#4a4222; --link:#8cbcff; --hard:#05070b;
    --t-yellow:#ffd84a; --t-coral:#ff9d8c; --t-mint:#7fdcb2; --t-sky:#8fc3ff; --t-lilac:#b9a8ff; --t-peach:#ffc36b; --t-ink:#14171f;
  }
}
:root[data-theme="dark"]{
  --paper:#13161e; --grid:#1d2230; --ink:#edf0f8; --ink-soft:#a3abc2; --card:#1c212d; --line:#2c3346;
  --red:#ff6b76; --margin:#6e3039; --hl:#4a4222; --link:#8cbcff; --hard:#05070b;
  --t-yellow:#ffd84a; --t-coral:#ff9d8c; --t-mint:#7fdcb2; --t-sky:#8fc3ff; --t-lilac:#b9a8ff; --t-peach:#ffc36b; --t-ink:#14171f;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){color-scheme:dark} }
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 'Fredoka',system-ui,-apple-system,'Segoe UI',sans-serif;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:22px 22px}
a{color:var(--link)}

/* en-tête */
.top{max-width:1100px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{font-size:26px;font-weight:700;color:var(--ink);text-decoration:none}
.brand b{color:var(--red)}
.top nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.top nav a{text-decoration:none;color:var(--ink);font-weight:600;padding:6px 12px;border-radius:999px;min-height:40px;display:inline-flex;align-items:center;
  border:2px solid transparent}
.top nav a:hover{border-color:var(--ink)}
.themebtn{width:42px;height:42px;border-radius:14px;border:2px solid var(--ink);background:var(--card);color:var(--ink);font-size:18px;cursor:pointer;
  display:inline-grid;place-items:center;box-shadow:0 3px 0 var(--hard)}
.themebtn[hidden]{display:none}
.play{background:var(--yellow);color:#1b2a4a !important;border:2px solid #1b2a4a !important;box-shadow:0 4px 0 var(--hard);font-weight:700;text-decoration:none;border-radius:16px}
.top nav a.play{padding:6px 16px}
.top nav .lg{margin-left:.28em}   /* le lien est en flex : l espace avant « de mots » saute */
.play.big{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:10px 24px;font-size:19px;white-space:nowrap}
.play:active{translate:0 3px;box-shadow:0 1px 0 var(--hard)}

/* la feuille du cahier */
.page{position:relative;max-width:1100px;margin:0 auto 24px;padding:20px 16px 30px 40px;background:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:22px 22px;
  border:2px solid var(--ink);border-radius:18px;box-shadow:5px 5px 0 var(--hard);overflow:hidden;isolation:isolate}
.page::before{content:"";position:absolute;left:22px;top:0;bottom:0;width:2px;background:var(--red);opacity:.6;z-index:-1}
/* quelques gribouillis dans les marges, derrière le contenu */
.page::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;background-repeat:no-repeat;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='m20 4 4 10 10 1-8 7 3 10-9-6-9 6 3-10-8-7 10-1z' fill='none' stroke='%23e0b400' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 34S6 25 6 15a7 7 0 0 1 14-3 7 7 0 0 1 14 3c0 10-14 19-14 19z' fill='none' stroke='%23c92f3c' stroke-width='2.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 20'%3E%3Cpath d='M2 10c6-8 10 8 16 0s10 8 16 0 10 8 16 0' fill='none' stroke='%231f5fbf' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 40'%3E%3Cpath d='M18 2 6 22h10l-4 16 14-22H16z' fill='none' stroke='%231d7a55' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 20c0-2 3-2 3 0 0 4-6 4-6 0 0-6 9-6 9 0 0 8-12 8-12 0 0-10 15-10 15 0' fill='none' stroke='%23ff5da2' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size:34px,28px,64px 22px,24px,30px;
  background-position:right 22px top 18px,right 70px top 64px,right 14px top 220px,4px 300px,right 30px bottom 140px}
@media (min-width:760px){ .page{padding:28px 36px 36px 58px} .page::before{left:32px} }
.crumbs{font-size:14px;color:var(--ink-soft);margin:0 0 8px;font-family:'Space Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.04em;font-size:11.5px}
.crumbs a{color:var(--ink-soft)}
h1{font-size:30px;line-height:1.12;margin:.2em 0 .4em;max-width:22ch}
@media (min-width:760px){ h1{font-size:40px} }
h1 b,.lead b{background:linear-gradient(transparent 55%,var(--hl) 55%)}
h2{font-family:var(--hand);font-weight:700;font-size:30px;line-height:1.1;margin:1.2em 0 .4em}
h3{font-size:18px;margin:0 0 6px}
h3 a{color:inherit;text-decoration:none}
h3 a:hover{text-decoration:underline}
.lead{font-size:18px;color:var(--ink-soft);max-width:70ch}

/* cartes pastel inclinées (une par catégorie) */
.grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:18px}
@media (min-width:600px){ .grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:980px){ .grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.card{border:2px solid #1b2a4a;border-radius:18px;padding:12px 14px;background:var(--t-yellow);color:var(--t-ink);box-shadow:0 4px 0 var(--hard);transform:rotate(-.8deg)}
.grid .card:nth-child(6n+2){background:var(--t-sky);transform:rotate(.7deg)}
.grid .card:nth-child(6n+3){background:var(--t-mint);transform:rotate(-.5deg)}
.grid .card:nth-child(6n+4){background:var(--t-coral);transform:rotate(.9deg)}
.grid .card:nth-child(6n+5){background:var(--t-lilac);transform:rotate(-.7deg)}
.grid .card:nth-child(6n){background:var(--t-peach);transform:rotate(.5deg)}
.card a{color:#1b2a4a}
.card ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.card li{background:rgba(255,255,255,.85);color:#1b2a4a;border:1.5px solid rgba(27,42,74,.35);border-radius:999px;padding:0 10px;
  font-family:var(--hand);font-weight:700;font-size:21px;line-height:1.35}
.none{color:var(--ink-soft);font-size:15px;margin:0}
.card .none{color:#1b2a4a;opacity:.75}

/* astuce : un post-it surligné */
.tips{background:var(--hl);border:2px solid var(--ink);border-radius:16px;padding:2px 16px 12px;margin-top:22px;transform:rotate(.5deg)}
.tips h2{margin-top:.4em}
.pager{display:flex;justify-content:space-between;gap:10px;margin:18px 0}
.pager a{font-weight:600;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;padding:0 14px;border:2px solid var(--ink);border-radius:14px;
  background:var(--card);color:var(--ink);box-shadow:0 3px 0 var(--hard)}
.cta{display:flex;flex-direction:column;gap:12px;align-items:flex-start;margin:28px 0 8px;padding:16px 18px;border-radius:18px;
  border:2px solid var(--ink);box-shadow:5px 5px 0 var(--hard);background:var(--card);transform:rotate(-.6deg)}
.cta div{display:flex;flex-direction:column}
.cta b{font-family:var(--hand);font-size:28px;line-height:1.1}
.cta span{color:var(--ink-soft)}
@media (min-width:760px){ .cta{flex-direction:row;align-items:center;justify-content:space-between} }
.faq details{border-bottom:1.5px dashed var(--line);padding:10px 0}
.faq summary{cursor:pointer;font-weight:600;min-height:32px}
.faq p{margin:.4em 0 0;color:var(--ink-soft)}

/* catégorie de A à Z : la lettre dans un tampon */
.tablewrap{overflow-x:auto;background:var(--card);border:2px solid var(--ink);border-radius:16px;box-shadow:4px 4px 0 var(--hard);margin-top:14px}
table.az{border-collapse:collapse;width:100%}
.az th,.az td{border-bottom:1.5px dashed var(--line);padding:9px 12px;text-align:left;vertical-align:middle}
.az tr:last-child th,.az tr:last-child td{border-bottom:0}
.az thead th{font-size:11.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;font-family:'Space Mono',ui-monospace,monospace}
.az tbody th{width:64px}
.az tbody th a{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:2.5px solid var(--red);color:var(--red);text-decoration:none;
  font-size:20px;transform:rotate(-6deg)}
.az td{font-family:var(--hand);font-weight:700;font-size:21px;line-height:1.3}
.az td .none,.az td .more{font-family:'Fredoka',system-ui,sans-serif;font-weight:500}

/* la page « idées » : une tuile par lettre */
.letgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.lt{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:2px solid #1b2a4a;border-radius:16px;text-decoration:none;color:var(--t-ink);
  background:var(--t-yellow);min-height:72px;box-shadow:0 3px 0 var(--hard);transform:rotate(-1.2deg);transition:translate .12s ease}
.lt:nth-child(6n+2){background:var(--t-sky);transform:rotate(1deg)}
.lt:nth-child(6n+3){background:var(--t-mint);transform:rotate(-.6deg)}
.lt:nth-child(6n+4){background:var(--t-coral);transform:rotate(1.3deg)}
.lt:nth-child(6n+5){background:var(--t-lilac);transform:rotate(-.9deg)}
.lt:nth-child(6n){background:var(--t-peach);transform:rotate(.7deg)}
.lt b{font-size:30px;line-height:1}
.lt span{font-family:var(--hand);font-weight:700;font-size:17px;line-height:1.15}
.lt:hover{translate:0 -3px}
.catlist{columns:2 220px;padding-left:1.2em}
.catlist li{margin:2px 0}

/* pied de page */
.foot{max-width:1100px;margin:0 auto;padding:6px 16px 40px;color:var(--ink-soft);font-size:15px}
.foot h2{font-size:26px;margin:.8em 0 .3em;color:var(--ink)}
.letters{display:flex;flex-wrap:wrap;gap:6px}
.letters a,.letters span{display:inline-flex;align-items:center;justify-content:center;width:38px;height:40px;border:2px solid var(--ink);border-radius:10px;
  text-decoration:none;font-weight:700;font-size:18px;background:var(--card);color:var(--ink)}
.letters a:nth-child(odd){transform:rotate(-3deg)}.letters a:nth-child(even){transform:rotate(2deg)}
.letters a:hover{background:var(--yellow);color:#1b2a4a}
.catlinks{display:flex;flex-wrap:wrap;gap:6px 14px}
.small{font-size:14px;margin-top:16px}
/* pages « catégorie × lettre » (objet en H…) : les mots écrits à la main */
.words{margin:14px 0 18px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.words li{background:var(--card);border:2px solid var(--ink);border-radius:999px;padding:0 14px;font-family:var(--hand);font-weight:700;font-size:23px;line-height:1.4;
  box-shadow:0 2px 0 var(--hard)}
.words li:nth-child(3n+1){transform:rotate(-1deg)}.words li:nth-child(3n+2){transform:rotate(.8deg)}
.letters span{border-style:dashed;color:var(--ink-soft);opacity:.55}
.card .more{margin:8px 0 0;font-size:14px}
td .more{white-space:nowrap;font-size:14px;margin-left:6px}
@media (prefers-reduced-motion: reduce){ .lt{transition:none} }
/* téléphone : l'en-tête tient sur une ligne */
@media (max-width:520px){
  .top{flex-wrap:nowrap;padding:10px 12px;gap:6px}
  .brand{font-size:22px;white-space:nowrap}
  .top nav{flex-wrap:nowrap;gap:2px}
  .top nav a{padding:4px 8px;font-size:15px;min-height:38px}
  .top nav a.play{padding:4px 12px}
  .top nav .lg{display:none}
  .themebtn{width:38px;height:38px;font-size:16px}
}