/* exomaths.be — thème « feuille quadrillée du cours de maths » (maquette validée du 14/11/2026) */

/* ——— Polices auto-hébergées (aucun appel à Google : RGPD) ——— */
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-style: normal; font-display: swap; src: url(../fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-style: normal; font-display: swap; src: url(../fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-style: italic; font-display: swap; src: url(../fonts/atkinson-hyperlegible-latin-400-italic.woff2) format("woff2"); }
@font-face { font-family: "Kalam"; font-weight: 400; font-display: swap; src: url(../fonts/kalam-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Kalam"; font-weight: 700; font-display: swap; src: url(../fonts/kalam-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 600; font-display: swap; src: url(../fonts/bricolage-grotesque-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 800; font-display: swap; src: url(../fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2"); }

:root {
  --vert: #1d7f74;          /* marque : boutons, titres, logo */
  --vert-fonce: #145e56;
  --vert-clair: #d6f0eb;
  --rouge-marge: #e0675d;
  --rouge-bic: #d2392f;
  --rouge-texte: #b52a21;   /* rouge assez foncé pour du texte sur blanc (contraste AA) */
  --postit: #fff27a;
  --fluo: #f6f36a;
  --encre: #1d2733;
  --encre-2: #4a5866;
  --papier: #fbfdff;
  --bord: #c9dbe8;
  --grille: rgba(110, 160, 210, .22);
  --texte: "Atkinson Hyperlegible", system-ui, sans-serif;
  --bic: "Kalam", "Comic Sans MS", cursive;
  --titre: "Bricolage Grotesque", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--encre); font-family: var(--texte); font-size: 18px; line-height: 1.5; }
a { color: var(--vert-fonce); }
a:hover { color: #0d3f3a; }
:focus-visible { outline: 3px solid #f2b705; outline-offset: 3px; }

.quadrille {
  background-color: var(--papier);
  background-image: linear-gradient(var(--grille) 1px, transparent 1px), linear-gradient(90deg, var(--grille) 1px, transparent 1px);
  background-size: 20px 20px;
}
body > .quadrille { min-height: 100vh; position: relative; }
.marge { position: absolute; top: 0; bottom: 0; left: 64px; width: 2px; background: var(--rouge-marge); box-shadow: 4px 0 0 rgba(224, 103, 93, .35); pointer-events: none; }
.feuille { max-width: 1180px; margin: 0 auto; padding: 24px 24px 64px 96px; }
.fluo { background: linear-gradient(transparent 52%, var(--fluo) 52%, var(--fluo) 92%, transparent 92%); padding: 0 2px; }
.manuscrit { font-family: var(--bic); color: var(--rouge-bic); font-size: 1.1em; }
.invisible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; }
.evitement { position: absolute; left: -9999px; top: 8px; background: #fff; padding: 8px 14px; z-index: 10; }
.evitement:focus { left: 96px; }

/* ——— En-tête ——— */
.entete { background: rgba(251, 253, 255, .92); border-bottom: 2px solid var(--vert); position: relative; }
.entete__barre { padding-top: 14px; padding-bottom: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--vert-fonce); }
.logo__dessin { color: var(--vert); }
.logo__mot { font-family: var(--titre); font-weight: 800; font-size: 26px; letter-spacing: -.5px; }
.logo__be { color: var(--rouge-bic); }
.menu { display: flex; flex-wrap: wrap; gap: 6px; }
.menu a { padding: 10px 14px; border-radius: 8px; text-decoration: none; font-weight: 700; }
.menu a[aria-current="page"], .menu a:hover { background: var(--vert-clair); }

/* ——— Titres ——— */
.ariane { font-size: 15px; color: var(--encre-2); margin-bottom: 18px; }
.titre-page { margin: 0; font-family: var(--titre); font-weight: 800; font-size: clamp(32px, 4.4vw, 48px); line-height: 1.08; letter-spacing: -.8px; }
.titre-page--accueil { font-size: clamp(34px, 5vw, 56px); }
.sous-titre { margin: 10px 0 0; font-size: 18px; color: var(--encre-2); }
.titre-carte { margin: 0 0 12px; font-family: var(--titre); font-weight: 800; font-size: 26px; }
.titre-carte--petit { font-size: 22px; margin-bottom: 8px; }

/* ——— Mise en page ——— */
.colonnes { display: flex; flex-wrap: wrap; gap: 36px; margin-top: 32px; align-items: flex-start; }
.colonnes__principale { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 36px; }
.colonnes__laterale { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }

.carte { background: rgba(255, 255, 255, .85); border: 2px solid var(--bord); border-radius: 6px; padding: 26px 28px; }
.carte--vide { margin-top: 32px; text-align: center; }
.carte--generateur { background: #fff; border: 3px solid var(--vert); border-radius: 8px; box-shadow: 0 8px 0 var(--vert-clair); }
.carte--pdf { background: #fff; border-color: var(--vert); padding: 22px; }
.carte--pdf p { margin: 0 0 14px; font-size: 16px; }

.lecon p { margin: 0 0 12px; line-height: 1.6; }
.lecon ol { margin: 0; padding-left: 22px; line-height: 1.7; }

/* ——— Post-it ——— */
.postit { background: var(--postit); font-family: var(--bic); box-shadow: 0 5px 12px rgba(0, 0, 0, .1); line-height: 1.35; }
.postit--astuce { margin: 20px 0 0; padding: 14px 18px; max-width: 460px; transform: rotate(-1deg); font-size: 20px; }
.postit--bulle { margin: 0; padding: 10px 14px; max-width: 220px; transform: rotate(2deg); font-size: 18px; text-align: center; }

/* ——— Corrigé « au bic rouge » ——— */
.exemple__enonce { margin: 0 0 14px; font-size: 20px; }
.exemple__enonce strong { font-size: 24px; }
.bic { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 6px 24px; align-items: baseline; font-family: var(--bic); color: var(--rouge-bic); }
.bic__calcul { font-size: 26px; white-space: nowrap; }
.bic__calcul--resultat { font-size: 30px; font-weight: 700; justify-self: start; border-bottom: 4px double var(--rouge-bic); padding-bottom: 2px; }
.bic__note { font-size: 18px; }

/* ——— Notation maths : fractions en hauteur, exposants ——— */
.frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; font-size: .78em; line-height: 1.1; margin: 0 .12em; }
.frac__n { border-bottom: .09em solid currentColor; padding: 0 .2em .05em; }
.frac__d { padding: .05em .2em 0; }
sup { font-size: .62em; line-height: 0; }
.gen__enonce .frac, .exemple__enonce .frac { font-size: .72em; }
.bic__calcul { padding: .1em 0; }

/* ——— Générateur ——— */
.gen__tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.gen__tete .titre-carte { margin: 0; }
.niveaux { display: flex; gap: 6px; flex-wrap: wrap; }
.btn { transition: transform .12s ease; cursor: pointer; font-family: inherit; }
.btn:hover { transform: translateY(-1px); }
.pastille { min-height: 44px; padding: 0 16px; border-radius: 999px; font-weight: 700; font-size: 15px; background: #fff; color: var(--vert-fonce); border: 2px solid #9cc9c1; }
.pastille[aria-pressed="true"] { background: var(--vert); color: #fff; border-color: var(--vert); }
.gen__corps { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.gen__exercice { flex: 999 1 360px; min-width: 0; }
.gen__consigne { margin: 0 0 4px; font-size: 16px; color: var(--encre-2); }
.gen__enonce { margin: 0 0 20px; font-size: 40px; font-weight: 700; letter-spacing: 1px; }
.gen__saisie { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.gen__champ { font-size: 28px; font-weight: 700; }
.gen__saisie input.large { width: min(100%, 300px); }
.gen__saisie input { width: 120px; height: 52px; font-size: 26px; font-family: inherit; text-align: center; border: 2px solid var(--vert); border-radius: 8px; background: var(--papier); color: var(--encre); }
.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; border-radius: 10px; border: 0; background: var(--vert); color: #fff; font-weight: 700; font-size: 18px; text-decoration: none; box-shadow: 0 3px 0 var(--vert-fonce); }
.bouton:hover { color: #fff; }
.bouton--large { width: 100%; min-height: 48px; font-size: 17px; }
.bouton-rouge, .bouton-contour { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: 10px; background: #fff; font-weight: 700; font-size: 16px; text-decoration: none; }
.bouton-rouge { border: 2px solid var(--rouge-bic); color: var(--rouge-texte); }
.bouton-contour { border: 2px solid var(--vert); color: var(--vert-fonce); }
.gen__message:empty { display: none; }
.message { margin: 18px 0 0; font-family: var(--bic); font-size: 24px; }
.message--juste { color: var(--vert-fonce); font-size: 26px; }
.message--faux { color: var(--rouge-bic); }
.gen__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.gen__prof { flex: 1 1 170px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.gen__serie { margin: 0; font-size: 15px; color: var(--encre-2); }
.gen__corrige { margin-top: 24px; border-top: 2px dashed #e0a39d; padding-top: 18px; }
.gen__corrige-titre { margin: 0 0 10px; font-weight: 700; font-size: 17px; }
.gen[aria-busy="true"] { opacity: .6; transition: opacity .15s; }

/* ——— Personnage ——— */
.medaillon { width: 150px; height: 150px; border-radius: 50%; overflow: hidden; border: 3px solid var(--vert); background: #fff; display: grid; place-items: center; }
.medaillon--grand { width: 180px; height: 180px; border-width: 4px; }
.medaillon img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; display: block; }
.medaillon svg { width: 70%; height: 70%; }

/* ——— FAQ ——— */
.faq { border-bottom: 1px dashed var(--bord); padding: 12px 0; }
.faq:last-child { border-bottom: 0; }
.faq summary { font-weight: 700; font-size: 18px; cursor: pointer; }
.faq[open] summary { color: var(--vert-fonce); }
.faq p { margin: 10px 0 0; font-size: 17px; line-height: 1.6; }

/* ——— Colonne latérale ——— */
.apercu { position: relative; height: 262px; border: 1px solid var(--bord); box-shadow: 0 4px 10px rgba(0, 0, 0, .08); padding: 14px 14px 14px 34px; overflow: hidden; transform: rotate(-1deg); margin-bottom: 4px; }
.apercu::before { content: ""; position: absolute; top: 0; bottom: 0; left: 24px; width: 1px; background: var(--rouge-marge); }
.carte--pdf .apercu p { margin: 0 0 9px; font-size: 13px; }
.carte--pdf .apercu .apercu__titre { font-weight: 700; font-size: 12px; margin-bottom: 8px; }
.carte--pdf .apercu .apercu__pied { position: absolute; bottom: 8px; right: 12px; margin: 0; font-size: 10px; color: var(--encre-2); }
.case { display: flex; align-items: center; gap: 10px; margin: 18px 0 14px; font-size: 16px; min-height: 44px; }
.case input { width: 20px; height: 20px; accent-color: var(--vert); }
.liste-notions { margin: 0; padding: 0; list-style: none; }
.liste-notions li { border-bottom: 1px dashed var(--bord); display: flex; align-items: center; min-height: 44px; font-size: 17px; }
.liste-notions li:last-child { border-bottom: 0; }
.liste-notions a { display: flex; align-items: center; min-height: 44px; width: 100%; }
.liste-notions span { color: var(--encre-2); }
.bientot { font-family: var(--bic); color: var(--rouge-texte); font-size: 15px; margin-left: 6px; }
.encart { background: var(--vert); color: #fff; border-radius: 6px; padding: 22px; }
.encart p { margin: 0 0 12px; font-size: 16px; line-height: 1.5; }
.encart .encart__sur { font-family: var(--bic); font-size: 19px; color: var(--postit); margin-bottom: 6px; }
.encart a { color: #fff; font-weight: 700; }

/* ——— Accueil et hubs ——— */
.accueil { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; margin-top: 12px; }
.accueil__texte { flex: 999 1 520px; }
.accueil__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.accueil__prof { flex: 1 1 200px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.grille-annees { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 24px; margin-top: 40px; }
.grille-domaines { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; margin-top: 40px; }
.carte--annee { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--encre); background: #fff; transition: transform .12s ease, border-color .12s; }
.carte--annee:hover { transform: translateY(-2px); border-color: var(--vert); color: var(--encre); }
.carte--annee__nom { font-family: var(--titre); font-weight: 800; font-size: 26px; color: var(--vert-fonce); }
.carte--annee__intro { font-size: 16px; color: var(--encre-2); }
.pastille-epreuve { align-self: flex-start; background: var(--vert-clair); color: var(--vert-fonce); font-weight: 700; font-size: 14px; padding: 2px 10px; border-radius: 999px; }

/* ——— Pages de texte et formulaires ——— */
.texte p, .texte li { line-height: 1.6; }
.texte p { margin: 0 0 12px; }
.texte ul { margin: 0; padding-left: 22px; }
.texte li { margin-bottom: 8px; }
.texte .titre-carte + p, .texte h2:not(:first-child) { margin-top: 0; }
.texte h2:not(:first-child) { margin-top: 22px; }
.accueil__bas { margin-top: 40px; }
.accueil__qui { flex: 999 1 500px; min-width: 0; }
.accueil__grandit { flex: 1 1 280px; min-width: 0; }
.formulaire { max-width: 720px; margin-top: 28px; }
.champ { margin: 0 0 20px; border: 0; padding: 0; }
.champ > label, .champ legend { display: block; font-weight: 700; margin-bottom: 6px; }
.champ textarea, .champ input[type=email], .champ select { width: 100%; font: inherit; font-size: 17px; padding: 10px 12px; border: 2px solid var(--vert); border-radius: 8px; background: var(--papier); color: var(--encre); }
.champ select { max-width: 320px; min-height: 48px; }
.choix { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.choix input { width: 20px; height: 20px; accent-color: var(--vert); }
.facultatif { font-weight: 400; color: var(--encre-2); font-size: 15px; }
.aide { font-size: 15px; color: var(--encre-2); margin: 6px 0 0; }
.contexte { background: var(--vert-clair); border-radius: 8px; padding: 14px 18px; margin-bottom: 22px; }
.contexte p { margin: 0 0 4px; }
.contexte__titre { font-weight: 700; color: var(--vert-fonce); }
.contexte__enonce { font-size: 24px; font-weight: 700; }
.piege { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.gen__signaler { margin: 18px 0 0; text-align: right; font-size: 14px; }
.gen__signaler a { color: var(--encre-2); }
.carte--vide .medaillon { margin: 10px auto 20px; }

/* ——— Pied ——— */
.pied { border-top: 2px solid var(--vert); background: rgba(251, 253, 255, .95); }
.pied__barre { padding-top: 28px; padding-bottom: 36px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: 15px; color: var(--encre-2); }
.pied__barre p { margin: 0; }
.pied__liens { display: flex; gap: 18px; flex-wrap: wrap; }

@media (max-width: 720px) {
  .marge { display: none; }
  .feuille { padding-left: 20px; padding-right: 20px; }
  .carte { padding: 20px; }
  .gen__enonce { font-size: 32px; }
  .bic { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .bic__note { margin-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .carte--annee { transition: none; }
  .btn:hover, .carte--annee:hover { transform: none; }
}

@media print {
  .entete, .pied, .colonnes__laterale, .gen__actions, .niveaux { display: none; }
}