/* mathemusetoi.fr — feuille de style commune
   Pour changer la couleur du surligneur : modifiez --surligneur ci-dessous. */
:root {
  --encre: #16213A;
  --bleu: #1F3A8A;
  --gris: #3B4660;
  --quadrillage: #E6ECF7;
  --surligneur: #FFF5D3;
  --cases: #E3F7FF; /* couleur des deux cases de l'accueil */
  --orange: #C2410C;
  --fond: #FFFFFF;
  --titre: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --texte: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;
  --math: 'STIX Two Text', 'Cambria Math', 'Times New Roman', serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--texte);
  font-size: 18px;
  line-height: 1.6;
  color: var(--encre);
  background: var(--fond);
}
img, svg { max-width: 100%; }
a { color: var(--bleu); }
a:hover { color: var(--encre); }
h1, h2, h3 { font-family: var(--titre); line-height: 1.1; letter-spacing: -0.02em; }
.conteneur { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.quadrille {
  background-color: #fff;
  background-image: linear-gradient(var(--quadrillage) 1px, transparent 1px),
                    linear-gradient(90deg, var(--quadrillage) 1px, transparent 1px);
  background-size: 24px 24px;
}
.surligne { background: var(--surligneur); padding: 0 .2em; border-radius: 4px; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lien-evitement { position: absolute; left: -999px; top: 8px; background: var(--encre); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 10; }
.lien-evitement:focus { left: 8px; }

/* En-tête : logo à gauche, menu à droite, fond blanc */
.entete { background: #fff; border-bottom: 2px solid var(--encre); }
.entete-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding-top: 12px; padding-bottom: 12px; }
.marque-haut { display: block; line-height: 0; }
.marque-haut img { display: block; height: 80px; width: auto; }
.marque-haut:hover img { filter: brightness(1.12); }
.reseaux-haut { display: flex; gap: 12px; }
.reseaux-haut a { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #1F3A8A 0%, #16213A 55%, #000415 100%); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 -2px 0 #F2C46D; }
.reseaux-haut a:hover { box-shadow: inset 0 -2px 0 #F2C46D, 3px 3px 0 #BFAF9E; }
.menu { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 700px) { .marque-haut img { height: 72px; } }

/* Boutons */
.bouton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 2px solid var(--encre); border-radius: 12px; background: var(--encre); color: #fff; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.bouton:hover { background: var(--bleu); color: #fff; }

/* Accueil */
.accroche { border-bottom: 2px solid var(--encre); text-align: center; }
.accroche .conteneur { padding-top: 36px; padding-bottom: 36px; }
.accroche h1 { margin: 0; font-weight: 800; font-size: clamp(19px, 6.3vw, 52px); line-height: 1.1; white-space: nowrap; }
.surligne-titre { background: linear-gradient(90deg, #FFFDF7 0%, #FBF0D6 40%, #F7E2A3 100%); padding: 0 12px 4px; border-radius: 10px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.accroche .slogan { margin: 10px 0 0; font-weight: 400; font-size: 13px; color: #4A505C; }
.mail-contact { font-size: 26px; font-weight: 700; margin-top: 16px; }
.accueil-blocs { display: flex; flex-direction: column; gap: 28px; padding-top: 40px; padding-bottom: 72px; }
.niveaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; padding-top: 12px; }
.carte-niveau{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;min-height:150px;padding:36px 26px 24px 60px;text-decoration:none;color:#16213A;background-color:var(--papier,#FFFFFF);background-image:linear-gradient(90deg,transparent 42px,#F2A7A7 42px,#F2A7A7 44px,transparent 44px),linear-gradient(#DCE6F5 1px,transparent 1px),linear-gradient(90deg,#DCE6F5 1px,transparent 1px);background-size:100% 100%,16px 16px,16px 16px;box-shadow:0 1px 1px rgba(22,33,58,.08),0 12px 22px -8px rgba(22,33,58,.30);transform:rotate(var(--rot,0deg));transition:transform .2s ease,box-shadow .2s ease}
.carte-niveau::after{content:"";position:absolute;top:0;right:0;border-style:solid;border-width:0 28px 28px 0;border-color:#FFFFFF #FFFFFF #D5DCE8 #D5DCE8;box-shadow:-2px 2px 3px rgba(22,33,58,.12)}
.carte-niveau::before{content:"";position:absolute;top:-12px;left:50%;width:92px;height:26px;transform:translateX(-50%) rotate(-3deg);background:rgba(226,208,170,.78);box-shadow:0 1px 2px rgba(22,33,58,.10)}
.carte-niveau:hover{transform:rotate(0deg) translateY(-5px);box-shadow:0 2px 2px rgba(22,33,58,.08),0 20px 30px -10px rgba(22,33,58,.35);color:#16213A}
.carte-niveau:nth-child(1){--rot:-1.6deg;--papier:#FFFFFF}
.carte-niveau:nth-child(2){--rot:1.2deg;--papier:#F6F9FF}
.carte-niveau:nth-child(3){--rot:-0.8deg;--papier:#EEF4FF}
.carte-niveau:nth-child(4){--rot:1.6deg;--papier:#E5EEFF}
.carte-niveau .sigle{display:block;font-family:'STIX Two Text','Cambria Math',serif;font-style:italic;font-size:44px;line-height:1;color:#1F3A8A}
.carte-niveau .sigle sup{font-size:22px}
.carte-niveau .nom{display:block;margin-top:8px;font-family:'Caveat',cursive;font-weight:700;font-size:40px;line-height:1;white-space:nowrap}
.carte-niveau .fleche{font-size:28px;font-weight:700}

.fleche { font-size: 30px; font-weight: 700; }
.boites { width: 100%; max-width: 760px; margin: 16px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.boite { border: 2px solid var(--encre); border-radius: 16px; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: linear-gradient(90deg, #FFFFFF 0%, #F9F4EA 45%, #E4D7BE 100%); text-decoration: none; color: var(--encre); font-family: var(--titre); font-weight: 800; font-size: 24px; line-height: 1.15; }
.boite .fleche { color: var(--encre); font-size: 26px; }
.section-categorie { padding-top: 56px; padding-bottom: 96px; }
.bloc-niveau { margin-bottom: 56px; scroll-margin-top: 16px; }
.bloc-niveau h2 { margin: 0 0 20px; font-size: 32px; font-weight: 800; }
.vide { color: var(--gris); margin: 0; padding: 20px; border: 2px dashed #8A93A8; border-radius: 14px; }
a.etiquette { text-decoration: none; color: var(--encre); }
a.etiquette:hover { background: var(--surligneur); }

/* (ancien) bandeau */
.bandeau { border-bottom: 2px solid var(--encre); }
.bandeau .conteneur { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; padding-top: 72px; padding-bottom: 80px; }
.bandeau-texte { flex: 1 1 460px; min-width: 0; }
.surtitre { margin: 0 0 14px; font-weight: 700; font-size: 15px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--bleu); }
.bandeau h1 { margin: 0; font-weight: 800; font-size: clamp(40px, 6vw, 64px); line-height: 1.04; }
.chapo { margin: 24px 0 32px; font-size: 20px; max-width: 520px; color: var(--gris); }
.figure-bandeau { flex: 1 1 400px; min-width: 0; margin: 0; background: #fff; border: 2px solid var(--encre); border-radius: 18px; padding: 24px; box-shadow: 8px 8px 0 var(--encre); }
.figure-bandeau figcaption { margin-top: 14px; text-align: center; font-size: 20px; }

/* Recherche */
.recherche { position: relative; max-width: 540px; }
.recherche-ligne { display: flex; flex-wrap: wrap; gap: 10px; }
.recherche input { flex: 1 1 260px; min-width: 0; height: 52px; padding: 0 18px; border: 2px solid var(--encre); border-radius: 12px; font: inherit; color: var(--encre); background: #fff; }
.resultats { list-style: none; margin: 10px 0 0; padding: 0; background: #fff; border: 2px solid var(--encre); border-radius: 12px; overflow: hidden; }
.resultats:empty { display: none; }
.resultats li { border-top: 1px solid var(--quadrillage); }
.resultats li:first-child { border-top: 0; }
.resultats a, .resultats .indispo { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; text-decoration: none; color: var(--encre); }
.resultats a:hover { background: var(--quadrillage); }
.resultats small { color: var(--gris); }

/* Sections */
.section { padding-top: 72px; padding-bottom: 40px; }
.section h2 { margin: 0 0 8px; font-weight: 800; font-size: clamp(30px, 4vw, 40px); }
.section > .conteneur > p.intro { margin: 0 0 36px; color: var(--gris); }

/* Cartes de niveau */
.grille-niveaux { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.carte { border: 2px solid var(--encre); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 16px; background: #fff; }
.carte-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.carte h3 { margin: 0; font-weight: 800; font-size: 30px; }
.carte h3 a { color: var(--encre); text-decoration: none; }
.carte .sigle { font-family: var(--math); font-style: italic; font-size: 34px; color: var(--bleu); }
.carte .sigle sup { font-size: 18px; }
.carte ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.carte .plus { margin-top: auto; font-weight: 700; color: var(--encre); }

/* Étapes */
.etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; }
.etape h3 { margin: 14px 0 6px; font-size: 22px; font-weight: 700; }
.etape p { margin: 0; color: var(--gris); }
.pastille { width: 52px; height: 52px; border-radius: 50%; background: var(--surligneur); border: 2px solid var(--encre); display: flex; align-items: center; justify-content: center; font-family: var(--titre); font-weight: 800; font-size: 24px; }

/* Auteur */
.auteur { margin-top: 40px; border-top: 2px solid var(--encre); border-bottom: 2px solid var(--encre); }
.auteur .conteneur { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; padding-top: 64px; padding-bottom: 64px; }
.photo { flex: 0 0 180px; height: 180px; border-radius: 50%; border: 2px dashed var(--encre); background: #fff; display: flex; align-items: center; justify-content: center; color: var(--gris); font-size: 15px; overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.auteur-texte { flex: 1 1 400px; min-width: 0; }
.auteur h2 { margin: 0 0 12px; font-size: 34px; font-weight: 800; }

/* Pied de page */
.pied { background: var(--encre); color: #fff; }
.pied .conteneur { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; padding-top: 20px; padding-bottom: 20px; }
.pied a { color: #fff; }
.pied nav { display: flex; flex-wrap: wrap; gap: 20px; }
.pied .marque { font-family: var(--titre); font-weight: 800; font-size: 22px; }
.pied small { color: #C9D2E6; font-size: 14px; }
.pied .signature { font-family: var(--math); font-style: italic; font-size: 12px; color: #AEB8CF; }
.pied-legal { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; font-size: 14px; }
.pied-legal a { color: #C9D2E6; }
.pied-legal .reseau { display: inline-flex; align-items: center; gap: 6px; }

/* En-tête de page intérieure */
.titre-page { border-bottom: 2px solid var(--encre); }
.titre-page .conteneur { padding-top: 40px; padding-bottom: 44px; }
.ariane { font-size: 15px; margin-bottom: 14px; }
.titre-page h1 { margin: 0; font-weight: 800; font-size: clamp(34px, 5vw, 52px); }
.etiquettes { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; }
.etiquette { padding: 4px 14px; border-radius: 999px; border: 2px solid var(--encre); background: #fff; font-size: 15px; font-weight: 700; }
.etiquette.jaune { background: var(--surligneur); }

/* Liste de chapitres (pages niveau) */
.chapitres { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.chapitres li > a, .chapitres li > span { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 64px; padding: 14px 20px; border: 2px solid var(--encre); border-radius: 14px; text-decoration: none; color: var(--encre); font-weight: 700; background: #fff; }
.chapitres li > a:hover { box-shadow: 4px 4px 0 var(--encre); }
.chapitres li > span { border-style: dashed; border-color: #8A93A8; color: var(--gris); font-weight: 400; }
.chapitres .num { font-family: var(--math); font-style: italic; color: var(--bleu); margin-right: 8px; }
.bientot { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--gris); white-space: nowrap; }

/* Page de chapitre */
.mise-en-page { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; padding-top: 48px; padding-bottom: 72px; }
.sommaire { flex: 1 1 220px; max-width: 280px; border: 2px solid var(--encre); border-radius: 16px; padding: 22px; }
.sommaire p { margin: 0 0 12px; font-weight: 700; font-size: 14px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--bleu); }
.sommaire ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; font-size: 17px; }
.sommaire a { color: var(--encre); text-decoration: none; }
.sommaire a:hover { text-decoration: underline; }
.contenu { flex: 999 1 560px; min-width: 0; max-width: 780px; }
.contenu > section { margin-bottom: 44px; scroll-margin-top: 16px; }
.contenu h2 { margin: 0 0 16px; font-weight: 800; font-size: 32px; }
.contenu p { margin: 0 0 12px; }

.encadre { border: 2px solid var(--encre); border-radius: 14px; overflow: hidden; margin: 16px 0; }
.encadre-titre { background: var(--encre); color: #fff; padding: 10px 20px; font-weight: 700; }
.encadre-corps { padding: 18px 20px; }
.encadre-corps > :last-child { margin-bottom: 0; }
.encadre.definition .encadre-titre { background: var(--bleu); }
.exemple { border: 2px dashed var(--bleu); border-radius: 14px; padding: 18px 20px; margin: 16px 0; }
.exemple > :last-child { margin-bottom: 0; }
.methode { border-left: 0; background: #FFF8DB; border-radius: 14px; padding: 18px 20px; margin: 16px 0; }

.video { aspect-ratio: 16 / 9; border: 2px solid var(--encre); border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; overflow: hidden; }
.video iframe { width: 100%; height: 100%; border: 0; }
.video .lecture { width: 72px; height: 72px; border-radius: 50%; background: var(--encre); display: flex; align-items: center; justify-content: center; }
.video .legende { font-weight: 700; background: #fff; padding: 2px 10px; border-radius: 6px; }

.exercice { border: 2px solid var(--encre); border-radius: 14px; padding: 20px; margin-bottom: 20px; }
.exercice-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.exercice-tete strong { font-size: 20px; }
.niveau { font-size: 15px; font-weight: 700; padding: 2px 12px; border-radius: 999px; background: var(--surligneur); border: 2px solid var(--encre); }
.correction { margin-top: 8px; }
.correction summary { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border: 2px solid var(--encre); border-radius: 12px; background: var(--encre); color: #fff; font-weight: 700; cursor: pointer; list-style: none; }
.correction summary::-webkit-details-marker { display: none; }
.correction summary:hover { background: var(--bleu); }
.correction[open] summary .ouvrir, .correction:not([open]) summary .fermer { display: none; }
.correction-corps { border-top: 2px dashed #C9D2E6; margin-top: 16px; padding-top: 16px; }
.correction-corps > :last-child { margin-bottom: 0; }

.navigation-chapitres { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; border-top: 2px solid var(--encre); padding-top: 24px; font-weight: 700; }

/* Formules */
.katex { font-size: 1.08em; }
.katex-display { overflow-x: auto; overflow-y: hidden; padding: 4px 0; }

/* Pages de texte (à propos, mentions) */
.texte-simple { max-width: 780px; padding-top: 48px; padding-bottom: 72px; }
.texte-simple h2 { font-size: 26px; margin: 32px 0 10px; }

@media (max-width: 640px) {
  body { font-size: 17px; }
  .bandeau .conteneur { padding-top: 44px; padding-bottom: 52px; gap: 36px; }
  .figure-bandeau { box-shadow: 5px 5px 0 var(--encre); }
  .sommaire { max-width: none; }
  .menu a { padding: 6px 12px; font-size: 16px; }

  .accroche .conteneur { padding-top: 48px; padding-bottom: 48px; }
  .accueil-blocs { padding-top: 56px; padding-bottom: 72px; gap: 20px; }
  .niveaux, .boites { gap: 20px; }
  .carte-niveau { padding: 32px 22px 22px 56px; min-height: 120px; }
}

@media print {
  .entete, .pied, .sommaire, .recherche { display: none; }
}

/* Feuilles v2 */
.f2{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:178px;padding:40px 22px 20px 58px;text-decoration:none;color:#16213A;background-color:#FFFEFA;border-radius:2px;box-shadow:0 1px 1px rgba(22,33,58,.10),0 16px 24px -14px rgba(22,33,58,.45),0 3px 8px -4px rgba(22,33,58,.15);transform:rotate(var(--rot,0deg));transition:transform .25s ease,box-shadow .25s ease}
.f2:hover{z-index:50;transform:rotate(0deg) translateY(-6px) scale(1.04);box-shadow:0 2px 2px rgba(22,33,58,.10),0 26px 34px -16px rgba(22,33,58,.50);color:#16213A}
.f2{transition:transform .25s ease,box-shadow .35s ease}
.p-carreaux{background-image:linear-gradient(90deg,transparent 42px,#EE9A9A 42px,#EE9A9A 44px,transparent 44px),linear-gradient(#D8E3F4 1px,transparent 1px),linear-gradient(90deg,#D8E3F4 1px,transparent 1px);background-size:100% 100%,16px 16px,16px 16px}
.p-seyes{background-image:linear-gradient(90deg,transparent 42px,#EE9A9A 42px,#EE9A9A 44px,transparent 44px),linear-gradient(90deg,#E6C6DA 1px,transparent 1px),linear-gradient(#B7C8E8 1px,transparent 1px),linear-gradient(#E6ECF7 1px,transparent 1px);background-size:100% 100%,32px 32px,32px 32px,8px 8px}
.p-millimetre{background-color:#FFFDF8;background-image:linear-gradient(#EFB48F 1px,transparent 1px),linear-gradient(90deg,#EFB48F 1px,transparent 1px),linear-gradient(#F8DCCB 1px,transparent 1px),linear-gradient(90deg,#F8DCCB 1px,transparent 1px);background-size:25px 25px,25px 25px,5px 5px,5px 5px}
.p-lignes{background-image:radial-gradient(circle at 22px 46px,#FFFFFF 6px,#C7CDD8 7px,transparent 8px),radial-gradient(circle at 22px calc(100% - 46px),#FFFFFF 6px,#C7CDD8 7px,transparent 8px),linear-gradient(90deg,transparent 42px,#EE9A9A 42px,#EE9A9A 44px,transparent 44px),linear-gradient(transparent 27px,#BCD0EE 27px,#BCD0EE 28px);background-size:100% 100%,100% 100%,100% 100%,100% 28px}
.f2::before{content:"";position:absolute;z-index:2}
.att-scotch::before{top:-13px;left:50%;width:96px;height:28px;transform:translateX(-50%) rotate(-4deg);background:repeating-linear-gradient(45deg,rgba(242,196,109,.55) 0 8px,rgba(255,236,190,.55) 8px 16px);box-shadow:0 1px 2px rgba(22,33,58,.12)}
.att-punaise::before{top:-9px;left:50%;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FF8A8A,#D63B3B 55%,#9E1F1F);box-shadow:2px 4px 4px rgba(22,33,58,.35)}
.att-trombone::before{top:-18px;left:34px;width:14px;height:44px;border:3px solid #8E98AB;border-radius:9px;transform:rotate(8deg);box-shadow:1px 1px 1px rgba(22,33,58,.15)}
.att-scotch2::before{top:-11px;right:-14px;width:78px;height:26px;transform:rotate(38deg);background:rgba(190,215,240,.75);box-shadow:0 1px 2px rgba(22,33,58,.12)}
.f2 .gribouillis{position:absolute;top:22px;right:18px;font-family:'Caveat','STIX Two Text',cursive;font-size:21px;color:rgba(60,72,96,.55);transform:rotate(-5deg);white-space:nowrap}
.f2 .sigle{display:block;font-family:'STIX Two Text','Cambria Math',serif;font-style:italic;font-size:42px;line-height:1;color:#1F3A8A}
.f2 .sigle sup{font-size:21px}
.f2 .ligne{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:6px}
.f2 .nom{font-family:'Caveat',cursive;font-weight:700;font-size:42px;line-height:1;white-space:nowrap;padding:0 4px;background:linear-gradient(transparent 55%,var(--fluo) 55%,var(--fluo) 90%,transparent 90%)}
.f2 .fleche{font-family:'Caveat',cursive;font-weight:700;font-size:34px;line-height:1}
.f2:nth-child(1){--rot:-2deg;--fluo:rgba(255,214,80,.65)}
.f2:nth-child(2){--rot:1.4deg;--fluo:rgba(120,225,160,.60)}
.f2:nth-child(3){--rot:-1deg;--fluo:rgba(120,185,255,.60)}
.f2:nth-child(4){--rot:1.8deg;--fluo:rgba(255,105,105,.50)}

/* Tableaux du bas */
.tab-tableau{margin-bottom:14px;border:12px solid #4E3119;border-radius:4px;border-image:repeating-linear-gradient(90deg,#3F2713 0 5px,#5F3D1F 5px 9px,#4E3119 9px 17px,#6B4626 17px 20px) 12;background-color:#262E2B;background-image:radial-gradient(ellipse 130px 26px at 18% 38%,rgba(235,235,225,0.24),transparent 70%),radial-gradient(ellipse 150px 22px at 62% 30%,rgba(235,235,225,0.18),transparent 70%),radial-gradient(ellipse 170px 30px at 40% 72%,rgba(235,235,225,0.21),transparent 70%),radial-gradient(ellipse 120px 24px at 85% 70%,rgba(235,235,225,0.15),transparent 70%),radial-gradient(ellipse 90px 20px at 10% 85%,rgba(235,235,225,0.18),transparent 70%),radial-gradient(ellipse 110px 18px at 70% 15%,rgba(235,235,225,0.15),transparent 70%),radial-gradient(ellipse 200px 40px at 50% 50%,rgba(235,235,225,0.09),transparent 70%),radial-gradient(ellipse 80px 30px at 92% 40%,rgba(235,235,225,0.18),transparent 70%),linear-gradient(transparent 78%,rgba(235,235,225,.10)),repeating-linear-gradient(170deg,rgba(255,255,255,.03) 0 2px,transparent 2px 6px);box-shadow:inset 0 0 0 2px #2E1C0C,inset 0 0 38px rgba(0,0,0,.65),0 12px 20px -10px rgba(22,33,58,.5);color:rgba(242,238,226,.95);text-shadow:0 0 1px rgba(255,255,255,.7),0 0 10px rgba(255,255,255,.2);overflow:hidden}
.tab-tableau:hover{color:#FFFFFF}
.tab-tableau::before{content:"f′(x) = 2x − 5\A     √2 ≈ 1,414\A ∫ ln x dx = ?    Δ = 1\A    lim (1 + 1/n)ⁿ = e";position:absolute;left:30%;top:6px;right:0;bottom:0;white-space:pre;font-family:'Caveat','STIX Two Text',cursive;font-weight:400;font-size:22px;line-height:1.2;color:rgba(235,235,225,.5);transform:rotate(-4deg) scaleX(1.35);filter:blur(2.8px);pointer-events:none;text-shadow:none}
.tab-tableau::after{content:"Toufik dit à son fils…";position:absolute;left:22px;top:6px;font-family:'Caveat',cursive;font-style:italic;font-weight:400;font-size:17px;color:rgba(242,238,226,.45);text-shadow:none;pointer-events:none}
.tab-tableau>span{position:relative;z-index:1}
.tab-tableau,.tab-peinture{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:78px;padding:14px 26px;margin-bottom:18px;text-decoration:none;font-family:'Caveat',cursive;font-weight:700;font-size:34px;line-height:1.1;transition:transform .2s ease,box-shadow .2s ease;overflow:visible}
.tab-tableau:hover,.tab-peinture:hover{transform:translateY(-4px) rotate(-.5deg)}
.tab-peinture{border:8px solid #EFE6D2;border-radius:6px;background-color:#FFFDF6;background-image:radial-gradient(circle at 4% 82%,rgba(243,156,18,.9) 0 10px,transparent 11px),radial-gradient(circle at 9% 70%,rgba(243,156,18,.6) 0 3px,transparent 4px),radial-gradient(circle at 70% 90%,rgba(155,89,182,.7) 0 6px,transparent 7px),radial-gradient(circle at 96% 84%,rgba(46,204,113,.85) 0 7px,transparent 8px);box-shadow:inset 0 0 0 1px #D9CBAE,0 12px 20px -10px rgba(22,33,58,.40);color:#2B2F38}
.tab-peinture>span:first-child{position:relative;z-index:1;padding:2px 14px 6px;border-radius:40% 55% 45% 60%/60% 45% 55% 40%;background:linear-gradient(100deg,rgba(255,206,84,0) 0%,rgba(255,206,84,.75) 6%,rgba(255,138,128,.6) 45%,rgba(116,185,255,.65) 90%,rgba(116,185,255,0) 100%)}
.tab-peinture::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 24px 11px at 50% 50%,#3498DBcc 0 97%,transparent 100%) 67px 44px/50px 24px no-repeat,radial-gradient(ellipse 20px 4px at 50% 50%,#3498DBe6 0 97%,transparent 100%) 288px 1px/42px 10px no-repeat,radial-gradient(ellipse 6px 3px at 50% 50%,#9B59B6cc 0 97%,transparent 100%) 25px 24px/14px 8px no-repeat,radial-gradient(ellipse 5px 9px at 50% 50%,#F39C12cc 0 97%,transparent 100%) 312px 68px/12px 20px no-repeat,radial-gradient(ellipse 8px 5px at 50% 50%,#F39C12cc 0 97%,transparent 100%) 13px 65px/18px 12px no-repeat,radial-gradient(ellipse 25px 12px at 50% 50%,#2ECC71b3 0 97%,transparent 100%) 147px 65px/52px 26px no-repeat,radial-gradient(ellipse 26px 3px at 50% 50%,#3498DBb3 0 97%,transparent 100%) 39px 64px/54px 8px no-repeat,radial-gradient(ellipse 17px 15px at 50% 50%,#9B59B6e6 0 97%,transparent 100%) 338px 62px/36px 32px no-repeat,radial-gradient(ellipse 9px 11px at 50% 50%,#3498DBcc 0 97%,transparent 100%) 143px 25px/20px 24px no-repeat,radial-gradient(ellipse 19px 15px at 50% 50%,#2ECC7199 0 97%,transparent 100%) 143px 61px/40px 32px no-repeat,radial-gradient(ellipse 20px 8px at 50% 50%,#2ECC71b3 0 97%,transparent 100%) 27px 9px/42px 18px no-repeat,radial-gradient(ellipse 25px 11px at 50% 50%,#9B59B699 0 97%,transparent 100%) 205px -1px/52px 24px no-repeat,radial-gradient(ellipse 23px 10px at 50% 50%,#3498DBcc 0 97%,transparent 100%) 345px 38px/48px 22px no-repeat,radial-gradient(ellipse 19px 9px at 50% 50%,#E84393cc 0 97%,transparent 100%) 37px 28px/40px 20px no-repeat,radial-gradient(ellipse 24px 13px at 50% 50%,#F1C40Fe6 0 97%,transparent 100%) 349px 33px/50px 28px no-repeat,radial-gradient(ellipse 4px 13px at 50% 50%,#3498DBb3 0 97%,transparent 100%) 187px 38px/10px 28px no-repeat,radial-gradient(ellipse 5px 7px at 50% 50%,#2ECC71b3 0 97%,transparent 100%) 49px 57px/12px 16px no-repeat,radial-gradient(ellipse 16px 15px at 50% 50%,#F1C40Fcc 0 97%,transparent 100%) 116px 44px/34px 32px no-repeat,radial-gradient(ellipse 21px 5px at 50% 50%,#F39C12e6 0 97%,transparent 100%) 219px 45px/44px 12px no-repeat,radial-gradient(ellipse 26px 8px at 50% 50%,#E84393e6 0 97%,transparent 100%) 271px 29px/54px 18px no-repeat,radial-gradient(ellipse 9px 13px at 50% 50%,#F39C12b3 0 97%,transparent 100%) 67px 4px/20px 28px no-repeat,radial-gradient(ellipse 9px 3px at 50% 50%,#E74C3Cb3 0 97%,transparent 100%) 238px 69px/20px 8px no-repeat,radial-gradient(ellipse 8px 10px at 50% 50%,#E74C3C 0 97%,transparent 100%) 26px 32px/15px 20px no-repeat,linear-gradient(#E74C3C,#E74C3C) 30px 0/7px 40px no-repeat,radial-gradient(ellipse 10px 13px at 50% 50%,#3498DB 0 97%,transparent 100%) 113px 48px/20px 26px no-repeat,linear-gradient(#3498DB,#3498DB) 118px 0/10px 58px no-repeat,radial-gradient(ellipse 7px 9px at 50% 50%,#F39C12 0 97%,transparent 100%) 200px 23px/14px 18px no-repeat,linear-gradient(#F39C12,#F39C12) 204px 0/6px 30px no-repeat,radial-gradient(ellipse 9px 12px at 50% 50%,#9B59B6 0 97%,transparent 100%) 291px 57px/18px 24px no-repeat,linear-gradient(#9B59B6,#9B59B6) 296px 0/9px 66px no-repeat,radial-gradient(ellipse 6px 8px at 50% 50%,#2ECC71 0 97%,transparent 100%) 334px 18px/12px 16px no-repeat,linear-gradient(#2ECC71,#2ECC71) 338px 0/5px 24px no-repeat,linear-gradient(90deg,#E74C3C 0,#F39C12 18%,#3498DB 40%,#9B59B6 58%,#2ECC71 72%,#E84393 86%,#F1C40F 100%) 0 0/100% 6px no-repeat;opacity:.85;pointer-events:none}
.tab-peinture::after{content:"";position:absolute;right:-30px;top:-34px;width:178px;height:20px;border-radius:45% 6px 6px 70%/60% 6px 6px 40%;background:radial-gradient(circle,#3498DB 0 4px,transparent 5px) 92px 2px/12px 12px no-repeat,radial-gradient(circle,#E74C3C 0 3px,transparent 4px) 128px 9px/10px 10px no-repeat,radial-gradient(ellipse 8px 3px,#F1C40F 0 95%,transparent 100%) 150px 4px/18px 8px no-repeat,repeating-linear-gradient(172deg,#E74C3C 0 3px,#3498DB 3px 5px,#F1C40F 5px 8px,#2B2F38 8px 9px,#E84393 9px 11px) 0 0/40px 100% no-repeat,linear-gradient(#A4A9B0,#6B7078) 40px 0/22px 100% no-repeat,repeating-linear-gradient(90deg,rgba(0,0,0,.12) 0 2px,transparent 2px 11px) 62px 0/100% 100% no-repeat,linear-gradient(#7A4E26,#4E3017) 62px 0/100% 100% no-repeat;transform:rotate(-150deg);box-shadow:2px -3px 5px rgba(22,33,58,.35);z-index:2}
.tab-tableau .fleche,.tab-peinture .fleche{font-family:'Caveat',cursive;font-size:34px;position:relative;z-index:1}
.tab-peinture .titre-peinture small{display:block;margin-top:2px;font-family:'Atkinson Hyperlegible',system-ui,sans-serif;font-weight:400;font-style:italic;font-size:12px;color:#4A505C}

/* Effet projecteur : tout le reste s'assombrit au survol */
.tab-tableau:hover,.tab-peinture:hover{z-index:50;box-shadow:0 18px 30px -12px rgba(0,0,0,.6)}
.menu a,.marque-haut,.chapitres li > a,.bouton{position:relative;transition:box-shadow .35s ease,background .2s}
.marque-haut{border-radius:12px}
.menu a:hover,.menu a:focus-visible,.marque-haut:hover,.chapitres li > a:hover,.bouton:hover{z-index:50;box-shadow:none}
.tab-tableau,.tab-peinture{transition:transform .2s ease,box-shadow .35s ease}

.menu .ico { flex: none; display: block; }

/* Menu : cases comme le logo */
.menu a{position:relative;display:inline-flex;align-items:center;gap:8px;padding:8px 16px 8px 11px;text-decoration:none;font-weight:800;color:#F2C46D;letter-spacing:.2px;background:linear-gradient(135deg,#1F3A8A 0%,#16213A 55%,#000415 100%);border:0;border-radius:12px;box-shadow:0 6px 12px -8px rgba(22,33,58,.6);transition:transform .2s ease,box-shadow .2s ease}
.menu a:hover{color:#F7D58E;transform:translateY(-2px) scale(1.06);box-shadow:0 10px 16px -8px rgba(22,33,58,.6)}
.menu a[aria-current="page"]{box-shadow:inset 0 -3px 0 #F2C46D,0 6px 12px -8px rgba(22,33,58,.6)}

/* Chevalets */
.chevalets{display:flex;flex-wrap:wrap;justify-content:center;gap:24px 90px;margin-top:22px}
.chevalet{position:relative;display:flex;flex-direction:column;align-items:center;width:240px;text-decoration:none;transition:transform .2s ease,box-shadow .35s ease}
.chevalet::before{content:"";position:absolute;top:-18px;left:50%;width:14px;height:26px;margin-left:-7px;border-radius:3px;background:linear-gradient(90deg,#5E3A1B,#8A5A2E,#5E3A1B)}
.chevalet:hover{transform:translateY(-4px);z-index:50;box-shadow:none}
.chevalet .planche{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;height:260px;min-height:0;margin:0;padding:38px 18px 20px;box-sizing:border-box;text-align:center;font-size:36px;line-height:1.05}
.chevalet .planche:hover{transform:none;z-index:auto}
.chevalet .tab-tableau,.chevalet .tab-tableau:hover{box-shadow:inset 0 0 0 2px #2E1C0C,inset 0 0 38px rgba(0,0,0,.65),0 10px 16px -8px rgba(22,33,58,.45)}
.chevalet .tab-peinture{border:9px solid #C5CBD4;border-radius:5px;background-color:#FFFFFF}
.chevalet .tab-peinture,.chevalet .tab-peinture:hover{box-shadow:inset 0 0 0 1px #9AA3B0,inset 0 0 0 4px rgba(255,255,255,.9),0 10px 16px -8px rgba(22,33,58,.40)}
.chevalet .titre-peinture{display:block}
.chevalet .titre-peinture small{margin-top:6px}
.pieds{position:relative;display:block;width:100%;height:86px;background:linear-gradient(90deg,#6B4626,#8A5A2E,#6B4626) 0 0/100% 12px no-repeat,linear-gradient(90deg,#3F2713,#5E3A1B,#3F2713) 50% 12px/8px 66px no-repeat}
.pieds::before,.pieds::after{content:"";position:absolute;top:2px;width:10px;height:88px;border-radius:3px;background:linear-gradient(90deg,#5E3A1B,#8A5A2E,#5E3A1B);transform-origin:top center}
.pieds::before{left:24%;transform:rotate(14deg)}
.pieds::after{right:24%;transform:rotate(-14deg)}
.chevalet-metal::before{background:linear-gradient(90deg,#8E96A3,#D3D8DF,#8E96A3)}
.chevalet-metal .pieds{background:linear-gradient(#D3D8DF,#AEB5C0) 0 0/100% 10px no-repeat,linear-gradient(90deg,#7E8693,#C3C9D2,#7E8693) 50% 10px/6px 66px no-repeat}
.chevalet-metal .pieds::before,.chevalet-metal .pieds::after{width:7px;background:linear-gradient(90deg,#7E8693,#D3D8DF,#7E8693)}
.chevalet .tab-tableau{overflow:hidden}
.chevalet .tab-peinture::after{top:-8px;right:-46px}
.chevalet .titre-peinture{padding:4px 10px 8px!important}


/* Effet 3D au survol (remplace l'effet sombre) */
.f2,.chevalet,.menu a,.papier-nav,.marque-haut,header a:first-child,.chapitres li > a{transition:transform .3s cubic-bezier(.2,.8,.3,1.2),box-shadow .3s ease;transform-style:preserve-3d}
.f2:hover{z-index:5;transform:perspective(700px) rotateX(9deg) rotateY(-11deg) scale(1.09) translateY(-6px);box-shadow:0 2px 2px rgba(22,33,58,.10),-14px 30px 34px -14px rgba(22,33,58,.55)}
.chevalet:hover{z-index:5;transform:perspective(800px) rotateY(-14deg) rotateX(4deg) scale(1.07);box-shadow:none}
.marque-haut:hover,header a:first-child:hover{z-index:5;transform:perspective(600px) rotateY(-12deg) scale(1.06);box-shadow:-10px 14px 20px -10px rgba(22,33,58,.5)}
.chapitres li > a:hover{z-index:5;transform:perspective(600px) rotateX(7deg) scale(1.04);box-shadow:-6px 14px 20px -12px rgba(22,33,58,.45)}

@media (max-width: 640px) { .surligne-titre { padding: 0 5px 2px; border-radius: 6px; } .accroche h1 { letter-spacing: -0.5px; } }

.menu .ico { flex: none; display: block; }
.menu .ico [stroke="#16213A"]{stroke:#F2E6C8}
.menu .ico [fill="#16213A"]{fill:#F2E6C8}
.menu .ico [fill="#2B2F38"]{fill:#4A5A8A}

/* Calcul mental */
.cm-carte{max-width:640px;margin:0 auto;padding:28px 26px 30px;background:#FFFEFA;background-image:linear-gradient(#D8E3F4 1px,transparent 1px),linear-gradient(90deg,#D8E3F4 1px,transparent 1px);background-size:20px 20px;border-radius:4px;box-shadow:0 1px 1px rgba(22,33,58,.1),0 18px 28px -16px rgba(22,33,58,.45);text-align:center}
.cm-intro{margin:0 0 20px;font-size:18px}
.cm-niv,.cm-fin{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.cm-niv button,.cm-fin button,.cm-suivant{min-height:48px;padding:0 22px;border:0;border-radius:12px;background:linear-gradient(135deg,#1F3A8A 0%,#16213A 55%,#000415 100%);color:#F2C46D;font:inherit;font-weight:800;cursor:pointer;transition:transform .15s}
.cm-niv button:hover,.cm-fin button:hover,.cm-suivant:hover{transform:scale(1.05)}
.cm-points{display:flex;justify-content:center;gap:6px;margin-bottom:12px}
.cm-points span{width:14px;height:14px;border-radius:50%;background:#E3E8F2;border:2px solid #C9D2E6}
.cm-points .cours{background:#F2C46D;border-color:#C8932C}
.cm-points .ok{background:#3BB273;border-color:#2A8A57}
.cm-points .ko{background:#E5534B;border-color:#B23A33}
.cm-num{margin:0;color:#4A505C;font-size:14px}
.cm-question{margin:14px 0 22px;font-family:var(--math);font-size:clamp(34px,7vw,52px);font-style:italic;color:#16213A}
.cm-question .fr{font-style:normal}
.cm-choix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cm-rep{min-height:60px;border:2px solid #16213A;border-radius:12px;background:#fff;font-family:var(--math);font-size:26px;color:#16213A;cursor:pointer;transition:transform .15s,background .15s}
.cm-rep:hover:not(:disabled){transform:scale(1.04);background:#FFF5D3}
.cm-rep.bon{background:#D8F3E3;border-color:#2A8A57}
.cm-rep.faux{background:#FBE0DE;border-color:#B23A33}
.cm-rep:disabled{cursor:default}
.cm-retour{margin-top:18px;min-height:20px;font-size:17px}
.cm-retour .vert{color:#2A8A57}.cm-retour .rouge{color:#B23A33}
.cm-astuce{display:block;margin:8px auto 16px;max-width:520px;padding:8px 12px;border-radius:10px;background:#FFF5D3;font-size:15px;color:#3B3F4A}
.cm-score{margin:6px 0 0;font-family:var(--math);font-size:64px;font-weight:700;color:#1F3A8A}
.cm-msg{margin:4px 0;font-size:20px;font-weight:700}
.cm-temps{margin:0 0 20px;color:#4A505C}
.jeu-carte{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;max-width:640px;padding:22px 26px;border-radius:14px;background:linear-gradient(135deg,#1F3A8A 0%,#16213A 55%,#000415 100%);color:#fff;text-decoration:none;transition:transform .2s}
.jeu-carte:hover{transform:scale(1.03);color:#fff}
.jeu-titre{font-family:'Caveat',cursive;font-size:36px;font-weight:700;color:#F2C46D;flex:1 1 100%}
.jeu-texte{flex:1 1 300px;color:#C9D2E6}
.jeu-carte .fleche{font-size:28px;color:#F2C46D}
/* ===== Questions flash ===== */
.qf-carte{max-width:780px}
.qf-intro{margin:0 0 18px;font-size:18px}
.qf-onglets{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:22px}
.qf-onglet{min-height:46px;padding:0 22px;border:2px solid #16213A;border-radius:12px;background:#fff;color:#16213A;font:inherit;font-weight:800;cursor:pointer;transition:transform .15s}
.qf-onglet:hover{transform:scale(1.05)}
.qf-onglet.actif{background:linear-gradient(135deg,#1F3A8A 0%,#16213A 55%,#000415 100%);color:#F2C46D;border-color:#16213A}
.qf-rubs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.qf-rub{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:14px 16px;border:2px solid #16213A;border-radius:12px;background:#fff;color:#16213A;font:inherit;text-align:left;cursor:pointer;transition:transform .15s,background .15s}
.qf-rub:hover{transform:scale(1.04);background:#FFF5D3}
.qf-rub-nom{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:20px}
.qf-rub-txt{font-size:14px;color:#4A505C}
.qf-fil{margin:0 0 8px;font-size:14px;color:#4A505C;font-weight:700}
.qf-diff{display:inline-block;margin:4px 0 0;padding:3px 12px;border-radius:999px;font-size:14px;font-weight:800;color:#16213A}
.qf-d1{background:#D8F3E3}.qf-d2{background:#E3F1C8}.qf-d3{background:#FFF0C2}.qf-d4{background:#FFDCC2}.qf-d5{background:#FBD0CC}
.qf-question{margin:14px 0 20px;font-size:clamp(19px,3.4vw,23px);line-height:1.5;color:#16213A}
.qf-question .katex{font-size:1.12em}
.qf-rep{font-family:inherit;font-size:19px;padding:10px 12px;line-height:1.4}
.qf-rep .katex{font-size:1.1em}
.qf-retour{margin-top:16px}
.qf-bravo{margin:4px 0 14px;font-family:'Caveat',cursive;font-size:30px;font-weight:700;color:#2A8A57}
.qf-what{margin:0;font-family:'Bricolage Grotesque',sans-serif;font-size:40px;font-weight:800;letter-spacing:1px;color:#D7372E;animation:qf-secoue .45s ease}
.qf-nan{margin:0 0 8px;font-family:'Caveat',cursive;font-size:28px;font-weight:700;color:#B23A33}
.qf-explic{margin:0 auto 16px;max-width:620px;padding:12px 16px;border-radius:10px;background:#FFF5D3;text-align:left;font-size:16px;line-height:1.6;color:#2B2F38}
@keyframes qf-secoue{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px) rotate(-2deg)}40%{transform:translateX(8px) rotate(2deg)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){.qf-what{animation:none}}
/* ===== Blagues ===== */
.titre-blagues{margin:44px 0 16px;font-family:'Bricolage Grotesque',sans-serif;font-size:30px}
.blagues{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.blague{padding:18px 20px;background:#FFFEFA;background-image:linear-gradient(#DCE6F5 1px,transparent 1px);background-size:100% 26px;border-radius:4px;box-shadow:0 1px 1px rgba(22,33,58,.1),0 12px 20px -12px rgba(22,33,58,.45)}
.blague:nth-child(odd){transform:rotate(-.6deg)}.blague:nth-child(even){transform:rotate(.6deg)}
.blague-q{margin:0;font-weight:700}
.blague-seule .blague-q{font-family:'Caveat',cursive;font-size:24px;font-weight:700;line-height:1.25}
.blague summary{margin-top:10px;cursor:pointer;color:#1F3A8A;font-weight:700}
.blague-r{margin:8px 0 0;font-family:'Caveat',cursive;font-size:24px;font-weight:700;line-height:1.25;color:#16213A}
/* 6 cases dans le menu : un peu plus compactes pour tenir sur une ligne */
@media (min-width:701px){.menu{gap:8px}.menu a{padding:8px 12px 8px 9px;gap:6px;font-size:16px}.entete-ligne{flex-wrap:nowrap}}
@media (min-width:701px) and (max-width:1180px){.entete-ligne{flex-wrap:wrap}}