/* Ogrelo · pages fiches & guides (server/seo.js, server/guides.js). Même univers que public/landing/landing.css :
   tuiles colorées à ombre pleine, boutons qui s'enfoncent, Baloo 2 pour les titres, mobile d'abord.
   Le rouge est réservé aux erreurs (aucun ici) ; pas de fond pastel derrière l'ogre. */
:root{--bg:#FBF7EE;--card:#fff;--ink:#22261F;--soft:#59614F;--line:#E7E1D3;--ogre:#58A847;--ogre-d:#3E7F31;--ogre-dd:#2F6326;--sun:#F6C445;--mark:#FFF1A8;--lien:#3E7F31;
  --c-bleu:#3F86D8;--c-violet:#8466D6;--c-jaune:#E3A72F;--c-vert:#3E9F5A;--c-sarcelle:#2A9C93;--c-orange:#E5873A;--c-rose:#D46F9C;
  --display:"Baloo 2","Trebuchet MS",system-ui,sans-serif;--body:"Andika","Trebuchet MS",system-ui,sans-serif;--r:20px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#141813;--card:#1D221C;--ink:#ECEFE8;--soft:#B1BAAA;--line:#323A30;--ogre:#5FB34D;--ogre-d:#3E7F31;--ogre-dd:#2C5E23;--mark:#5A4E12;--lien:#8FD07E}}
:root[data-theme="dark"]{--bg:#141813;--card:#1D221C;--ink:#ECEFE8;--soft:#B1BAAA;--line:#323A30;--ogre:#5FB34D;--ogre-d:#3E7F31;--ogre-dd:#2C5E23;--mark:#5A4E12;--lien:#8FD07E}

*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.65 var(--body);overflow-x:hidden}
img,svg{max-width:100%}
a{color:var(--lien);text-underline-offset:3px;text-decoration-thickness:2px}
.w{max-width:780px;margin:0 auto;padding:0 16px}
main.w{padding-bottom:12px}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.18;letter-spacing:-.01em;margin:1.7em 0 .5em}
h1{font-size:clamp(1.85rem,7.6vw,2.6rem);margin-top:.35em}
h2{font-size:clamp(1.38rem,5.4vw,1.75rem);display:flex;align-items:center;gap:12px}
h3{font-size:1.14rem}
p{margin:.65em 0}
.chapo{font-size:1.1rem}
.note,.auteur{font-size:.88rem;color:var(--soft)}
.bientot{color:var(--soft)}
mark{background:var(--mark);color:inherit;padding:0 3px;border-radius:4px}

/* icônes SVG (trait) et pastille d'icône devant les titres */
.ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.pic{--c:var(--c-vert);width:40px;height:40px;border-radius:13px;display:inline-grid;place-items:center;background:var(--c);color:#fff;box-shadow:0 3px 0 color-mix(in srgb,var(--c) 68%,#000);flex-shrink:0}
.c-bleu{--c:var(--c-bleu)}.c-violet{--c:var(--c-violet)}.c-jaune{--c:var(--c-jaune)}.c-vert{--c:var(--c-vert)}.c-sarcelle{--c:var(--c-sarcelle)}.c-orange{--c:var(--c-orange)}.c-rose{--c:var(--c-rose)}

/* étiquette (rubrique) au-dessus du titre */
.etiquette{display:inline-flex;align-items:center;gap:8px;margin:18px 0 0;font:800 .8rem/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ogre-d);
  background:color-mix(in srgb,var(--ogre) 13%,var(--card));border:2px solid color-mix(in srgb,var(--ogre) 32%,var(--line));border-radius:999px;padding:7px 12px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .etiquette{color:#A6DD97}}
:root[data-theme="dark"] .etiquette{color:#A6DD97}

/* fil d'Ariane en petites pastilles */
.fil{font-size:.84rem;margin:16px 0 6px}
.fil ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.fil li{display:inline-flex;max-width:100%}
.fil a,.fil li[aria-current]{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 11px;border-radius:999px;font-weight:700;text-decoration:none}
.fil a{color:var(--soft);background:var(--card);border:2px solid var(--line)}
.fil li[aria-current]{color:var(--ogre-d);background:color-mix(in srgb,var(--ogre) 13%,var(--card));border:2px solid color-mix(in srgb,var(--ogre) 30%,var(--line))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fil li[aria-current]{color:#A6DD97}}

/* boutons : ombre pleine, on appuie et ils descendent */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:12px 24px;border-radius:18px;background:var(--ogre);color:#fff!important;
  font:800 1.12rem/1.2 var(--display);text-decoration:none;text-align:center;box-shadow:0 5px 0 var(--ogre-dd);transition:transform .08s ease,box-shadow .08s ease}
.bouton:hover{background:color-mix(in srgb,var(--ogre) 92%,#000)}
.bouton:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ogre-dd)}
.btn2{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:10px 20px;border-radius:16px;border:2px solid var(--line);background:var(--card);color:var(--ink)!important;
  font:800 1.02rem/1.2 var(--display);text-decoration:none;box-shadow:0 4px 0 var(--line)}
.btn2:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0}
:focus-visible{outline:3px solid var(--c-bleu);outline-offset:3px;border-radius:8px}

/* bulle de l'ogre (ogre détouré, sans fond) */
.bulle{display:flex;gap:14px;align-items:center;background:var(--card);border:2px solid var(--line);border-radius:var(--r);box-shadow:0 4px 0 var(--line);padding:14px 16px;margin:18px 0 22px}
.bulle img{width:58px;height:58px;flex:none;object-fit:contain;background:none}
.bulle p{margin:0;font:700 1.02rem/1.45 var(--display)}

/* « En bref » : tuile soleil, bien visible */
.reponse{position:relative;background:color-mix(in srgb,var(--sun) 20%,var(--card));border:2px solid color-mix(in srgb,var(--sun) 70%,var(--line));border-radius:var(--r);
  box-shadow:0 5px 0 color-mix(in srgb,var(--sun) 75%,#8a6400);padding:16px 18px 18px;margin:20px 0 26px}
.reponse p{margin:.3em 0}
.reponse .k{display:inline-block;margin:0 0 6px;font:800 .82rem/1 var(--body);letter-spacing:.06em;text-transform:uppercase;background:var(--sun);color:#3A2C00;border-radius:999px;padding:6px 12px}
.reponse>.ico{position:absolute;right:14px;top:14px;width:26px;height:26px;color:color-mix(in srgb,var(--sun) 60%,var(--ink))}
.reponse p:last-child{font-size:1.06rem}

/* blocs de la fiche */
.bloc{--c:var(--c-bleu);background:var(--card);border:2px solid color-mix(in srgb,var(--c) 28%,var(--line));border-radius:var(--r);box-shadow:0 4px 0 color-mix(in srgb,var(--c) 38%,var(--line));
  padding:8px 18px 14px;margin:18px 0;overflow-x:auto}
.bloc h2,.bloc h3{margin-top:.6em}
.bloc.retiens{--c:var(--c-vert);background:color-mix(in srgb,var(--c-vert) 8%,var(--card))}
.bloc.piege{--c:var(--c-orange);background:color-mix(in srgb,var(--c-orange) 10%,var(--card))}
dl dt{font-weight:700;margin-top:8px}dl dd{margin:0 0 6px 0}
table{border-collapse:collapse;width:100%;font-size:.95rem}th,td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}th{background:color-mix(in srgb,var(--ogre) 12%,transparent)}
.verrou{border:2px dashed color-mix(in srgb,var(--c-violet) 45%,var(--line));background:color-mix(in srgb,var(--c-violet) 6%,var(--card));border-radius:var(--r);padding:10px 18px;margin:18px 0}.verrou ul{margin:.3em 0}

/* quiz et exercices : cartes, réponse sous un bouton */
.q{background:var(--card);border:2px solid var(--line);border-radius:var(--r);box-shadow:0 4px 0 var(--line);padding:6px 18px 14px;margin:16px 0}
.q h3{margin-top:.6em;color:var(--c-violet)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .q h3{color:#B6A2F0}}
.q ol{margin:.4em 0;padding-left:1.5em}.q ol li{margin:4px 0}
details{margin-top:8px}
summary{cursor:pointer;font:800 1rem/1.3 var(--display);color:var(--ogre-d)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) summary{color:#8FD07E}}
.q summary{display:inline-block;list-style:none;padding:8px 16px;border-radius:14px;border:2px solid color-mix(in srgb,var(--ogre) 40%,var(--line));background:color-mix(in srgb,var(--ogre) 10%,var(--card));box-shadow:0 3px 0 color-mix(in srgb,var(--ogre) 45%,var(--line))}
.q summary::-webkit-details-marker{display:none}
.q summary:active{transform:translateY(2px);box-shadow:0 1px 0 color-mix(in srgb,var(--ogre) 45%,var(--line))}

/* questions fréquentes : cartes qu'on touche pour ouvrir */
.faq{display:grid;gap:12px;margin:12px 0 8px}
.faq details{margin:0;background:var(--card);border:2px solid var(--line);border-radius:18px;box-shadow:0 4px 0 var(--line);padding:0 18px}
.faq summary{list-style:none;padding:15px 34px 15px 0;font:800 1.04rem/1.35 var(--display);color:var(--ink);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:4px;top:50%;width:10px;height:10px;border-right:3px solid var(--soft);border-bottom:3px solid var(--soft);transform:translateY(-70%) rotate(45deg);transition:transform .15s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .rep{padding:0 0 14px;color:var(--soft)}.faq .rep p{margin:0}

/* tuiles colorées (hubs, « à lire aussi ») : couleurs en rotation, toute la tuile est cliquable */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;padding:0;margin:14px 0 10px;list-style:none}
.grille li{--c:var(--c-vert);position:relative;background:color-mix(in srgb,var(--c) 8%,var(--card));border:2px solid color-mix(in srgb,var(--c) 32%,var(--line));border-radius:18px;
  box-shadow:0 4px 0 color-mix(in srgb,var(--c) 45%,var(--line));padding:14px 16px 14px 16px;margin-bottom:4px;transition:transform .08s ease,box-shadow .08s ease}
.grille li:nth-child(7n+2){--c:var(--c-sarcelle)}.grille li:nth-child(7n+3){--c:var(--c-bleu)}.grille li:nth-child(7n+4){--c:var(--c-violet)}
.grille li:nth-child(7n+5){--c:var(--c-orange)}.grille li:nth-child(7n+6){--c:var(--c-jaune)}.grille li:nth-child(7n+7){--c:var(--c-rose)}
.grille li::before{content:"";display:block;width:30px;height:6px;border-radius:99px;background:var(--c);margin-bottom:10px}
.grille a{font:800 1.06rem/1.3 var(--display);text-decoration:none;color:color-mix(in srgb,var(--c) 55%,var(--ink))}
.grille a::after{content:"";position:absolute;inset:0;border-radius:18px}
.grille li:has(a):active{transform:translateY(3px);box-shadow:0 1px 0 color-mix(in srgb,var(--c) 45%,var(--line))}
.grille small{display:block;color:var(--soft);font-size:.86rem;line-height:1.4;margin-top:6px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .grille a{color:color-mix(in srgb,var(--c) 45%,#fff)}}
:root[data-theme="dark"] .grille a{color:color-mix(in srgb,var(--c) 45%,#fff)}

/* listes à puces rondes */
.liste{list-style:none;padding:0;margin:10px 0}
.liste li{position:relative;padding-left:26px;margin:8px 0}
.liste li::before{content:"";position:absolute;left:4px;top:.55em;width:11px;height:11px;border-radius:50%;background:var(--ogre);box-shadow:0 2px 0 var(--ogre-dd)}
ol.liste{counter-reset:n}ol.liste li{counter-increment:n;padding-left:38px}
ol.liste li::before{content:counter(n);width:26px;height:26px;top:.1em;left:0;border-radius:9px;background:var(--sun);color:#3A2C00;font:800 .9rem/26px var(--display);text-align:center;box-shadow:0 2px 0 #C99A1E}
.liste small{color:var(--soft)}

/* appel vers l'appli */
.cta{background:color-mix(in srgb,var(--ogre) 10%,var(--card));border:2px solid color-mix(in srgb,var(--ogre) 45%,var(--line));border-radius:24px;box-shadow:0 6px 0 color-mix(in srgb,var(--ogre) 55%,var(--line));
  padding:20px 18px 22px;margin:34px 0;text-align:center}
.cta p{margin:.3em 0 1em;font:700 1.05rem/1.45 var(--display)}
.cta .note{font:400 .88rem/1.5 var(--body);margin:1em 0 0}

.sources{font-size:.9rem;padding-left:1.2em}.sources li{margin:6px 0;overflow-wrap:anywhere}
.avert{background:color-mix(in srgb,var(--c-jaune) 14%,var(--card));border:2px solid color-mix(in srgb,var(--c-jaune) 45%,var(--line));border-radius:16px;padding:12px 16px;font-size:.94rem}
footer{border-top:2px solid var(--line);margin-top:34px;padding:20px 0 34px;font-size:.88rem;color:var(--soft)}footer a{color:var(--soft);font-weight:700}

/* illustrations, figures, maths */
.illus img{max-width:100%;height:auto;border-radius:14px}.illus figcaption,.fig figcaption{font-size:.85rem;color:var(--soft)}
.fig{margin:6px 0}.fig-svg{display:block;width:100%;max-width:420px;height:auto;margin:0 auto}
.fig-svg .tr{stroke:var(--ink);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}.fig-svg .tr.fin{stroke-width:1.6}.fig-svg .tir{stroke-dasharray:5 4}
.fig-svg .acc{stroke:var(--ogre);fill:var(--ogre)}.fig-svg .tr.acc{fill:none}.fig-svg .pt{fill:var(--ink)}.fig-svg circle.pt{stroke:none}.fig-svg .ax{stroke:var(--ink);stroke-width:1.6;fill:none}
.fig-svg .gr{stroke:var(--line);stroke-width:1}.fig-svg .flm{fill:var(--ink)}.fig-svg .fla{fill:var(--ogre)}.fig-svg .pg{fill:none;stroke:none}.fig-svg .pg.rem{fill:color-mix(in srgb,var(--ogre) 16%,transparent)}
.fig-svg text{font:700 13px/1 var(--body);fill:var(--ink);paint-order:stroke fill;stroke:var(--card);stroke-width:4px;stroke-linejoin:round}.fig-svg text.me{font-weight:600;font-size:12px;fill:var(--soft)}.fig-svg text.acc{fill:var(--ogre)}
.fig-svg .tr.epais{stroke-width:4}.fig-svg .tr.bg{fill:var(--card)}.fig-svg .per{stroke:none;opacity:.85}.fig-svg .per.p0{fill:color-mix(in srgb,var(--ogre) 45%,transparent)}
.fig-svg .per.p1{fill:color-mix(in srgb,#3B7BC8 45%,transparent)}.fig-svg .per.p2{fill:color-mix(in srgb,#D9702A 45%,transparent)}.fig-svg .per.p3{fill:color-mix(in srgb,#7B3FD1 45%,transparent)}.fig-svg text.ev{font-weight:700;font-size:12px}
.katex{font-size:1.05em}.katex-display{overflow-x:auto;overflow-y:hidden}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}