/* L'Épreuve des Neuf Sceaux — univers des Archives des Mathémages (cire, parchemin, Porte aux neuf sceaux),
   avec l'ergonomie d'une vraie copie : barre de progression collante, 9 pastilles, cartes nettes, niveaux 6e/5e/4e.
   Clair par défaut ; sombre sous le thème Nuit du site (body.theme-night). Animations coupées si prefers-reduced-motion. */
:root, body {
  --fond:#e9dcc0; --carte:#fffaf0; --carte2:#f6ead2; --bord:#d9c49a; --encre:#2a1d0e; --doux:#6b5537; --or:#b8862b; --or2:#f1c76a;
  --ok:#1d7a3e; --okfond:#eaf7ec; --okbord:#9fd6ad; --ko:#9b2c1f; --kofond:#fbeee9; --kobord:#e8b9ac;
  --n6:#2f8f5b; --n5:#2f6fbf; --n4:#7b4fc4; --ligne:#cdb68a; --ombre:0 8px 22px rgba(60,35,10,.16);
}
body.theme-night {
  --carte:#221c15; --carte2:#2b231a; --bord:#4a3b26; --encre:#f3e7cf; --doux:#cdb894; --or:#e2b55a; --or2:#f6d38a;
  --ok:#6fd38f; --okfond:#16281b; --okbord:#2f6a40; --ko:#f19a87; --kofond:#2e1913; --kobord:#7a3a2c;
  --n6:#5fcf8f; --n5:#6fa8ef; --n4:#b192ef; --ligne:#5a4830; --ombre:0 8px 22px rgba(0,0,0,.45);
}
* { box-sizing:border-box; }
body { margin:0; padding:18px 12px 48px; font-family:system-ui,"Segoe UI",Roboto,Arial,sans-serif; color:var(--encre); }
body:not([class*="theme-"]) { background:var(--fond) radial-gradient(ellipse at top, #f7efdc 0%, var(--fond) 70%) fixed; }
body::before, body::after, .theme-overlay { z-index:0 !important; pointer-events:none !important; }
.wrap { max-width:820px; margin:0 auto; position:relative; z-index:10; color:var(--encre); }
.wrap * { text-shadow:none; }
body.theme-night[data-allow-theme][data-jeu] > main.wrap { background:#15110c !important; color:var(--encre) !important; border-color:#4a3b26 !important; }
.wrap a:not(.lien):not(.second) { color:var(--or); }
.titre-livre { font-family:Georgia,"Times New Roman",serif; }

/* En-tête */
.entete { display:flex; gap:12px; align-items:center; background:linear-gradient(180deg,var(--carte),var(--carte2)); border:1px solid var(--bord);
  border-radius:16px; padding:10px 14px; box-shadow:var(--ombre); margin:0 0 10px; }
.entete .cachet { width:54px; height:54px; flex:0 0 auto; }
.entete h1 { margin:0; font:700 clamp(1.25rem,3.8vw,1.75rem) Georgia,"Times New Roman",serif; color:var(--encre); }
.entete p { margin:2px 0 0; color:var(--doux); font-weight:600; font-size:.92rem; }
.toolbar { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:0 0 12px; }
.lien { padding:.42rem .85rem; border-radius:999px; background:var(--carte); border:1px solid var(--bord); color:var(--encre) !important;
  font-weight:650; font-size:.88rem; text-decoration:none; box-shadow:var(--ombre); cursor:pointer; font-family:inherit; }

.carte { background:var(--carte); color:var(--encre); border:1px solid var(--bord); border-radius:16px; padding:16px 18px; margin:0 0 12px; box-shadow:var(--ombre); }
.carte h2 { margin:0 0 8px; font:700 1.2rem Georgia,"Times New Roman",serif; color:var(--encre); }
.centre { text-align:center; }
.aide { color:var(--doux); line-height:1.5; font-size:.95rem; }
.petit { font-size:.85rem; color:var(--doux); }
.gros { font:800 1.05rem system-ui,sans-serif; padding:.8rem 1.6rem; border-radius:12px; border:1px solid #6d1410; cursor:pointer; color:#fff7e6 !important;
  background:linear-gradient(180deg,#c43a2c,#8e1d14); box-shadow:0 4px 0 #5a0e0b, 0 0 0 3px rgba(241,199,106,.35); touch-action:manipulation; letter-spacing:.01em; }
.gros:active { transform:translateY(2px); box-shadow:0 1px 0 #5a0e0b; }
.second { font:700 .95rem system-ui,sans-serif; padding:.6rem 1rem; border-radius:12px; border:1px solid var(--bord); background:var(--carte);
  color:var(--encre) !important; cursor:pointer; text-decoration:none; display:inline-block; touch-action:manipulation; }
.regles { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin:12px 0; text-align:left; }
.regle { border:1px solid var(--bord); border-radius:12px; padding:10px 12px; background:var(--carte2); }
.regle b { display:block; font-size:1.1rem; margin-bottom:2px; font-family:Georgia,serif; }
.regle span { color:var(--doux); font-size:.9rem; line-height:1.4; }
.option { display:flex; gap:.6rem; align-items:flex-start; justify-content:center; margin:12px 0; font-weight:600; text-align:left; }
.option input { width:20px; height:20px; margin-top:1px; accent-color:#b3261e; }
.code { display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; margin:10px 0; }
.code input { font:800 1.05rem ui-monospace,Consolas,monospace; letter-spacing:.15em; text-transform:uppercase; width:11ch; padding:.45rem .6rem;
  border-radius:10px; border:2px solid var(--ligne); text-align:center; color:var(--encre); background:var(--carte); }

/* ── Scène d'ouverture : la Porte des Archives ── */
.scene { position:relative; border-radius:18px; overflow:hidden; margin:0 0 12px; box-shadow:var(--ombre);
  background:radial-gradient(ellipse at 50% 30%, #3a2a3e 0%, #17111d 70%); border:1px solid #4a3b26; padding:14px 12px 16px; color:#f3e7cf; }
.scene .dialogue { position:relative; z-index:3; margin:12px auto 0; max-width:600px; background:rgba(25,18,10,.82); border:1px solid rgba(241,199,106,.45);
  border-radius:14px; padding:12px 14px 12px 64px; text-align:left; min-height:88px; cursor:pointer; }
.scene .portrait { position:absolute; left:10px; top:12px; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-size:1.6rem;
  background:radial-gradient(circle at 40% 35%, #6b4b8a, #2c1d3d); border:2px solid #b8862b; }
.scene .qui { font:700 .85rem Georgia,serif; color:#f1c76a; letter-spacing:.04em; text-transform:uppercase; }
.scene .texte { margin:4px 0 0; font:1.02rem/1.5 Georgia,"Times New Roman",serif; color:#f3e7cf; }
.scene .suite { position:absolute; right:12px; bottom:8px; font-size:.78rem; color:#cdb894; }
.scene .actions { position:relative; z-index:3; }

.porte { position:relative; width:min(330px,82vw); aspect-ratio:320/300; margin:4px auto 0; perspective:900px; }
.porte .arche { position:absolute; inset:-14px -16px -4px; border-radius:50% 50% 8px 8px / 30% 30% 8px 8px;
  background:repeating-linear-gradient(90deg,#6e6a73 0 46px,#5b5760 46px 48px), #6e6a73; box-shadow:inset 0 0 0 6px #4b4850, 0 10px 30px rgba(0,0,0,.6); }
.porte .lumiere { position:absolute; inset:0; border-radius:46% 46% 4px 4px / 22% 22% 4px 4px; overflow:hidden;
  background:radial-gradient(ellipse at 50% 55%, #fff4c9 0%, #f1c76a 30%, #8a5a12 70%, #2a1a05 100%); display:grid; place-items:center; }
.porte .tresor { opacity:0; transform:scale(.6); transition:opacity .8s ease .9s, transform .8s ease .9s; text-align:center; color:#3b2208; font:800 1.05rem Georgia,serif; }
.porte .tresor .coffre { font-size:3rem; display:block; filter:drop-shadow(0 0 12px #fff4c9); }
.porte.ouverte .tresor { opacity:1; transform:none; }
.porte .battant { position:absolute; top:0; bottom:0; width:50%; transition:transform 1.8s cubic-bezier(.3,.8,.3,1); }
.porte .battant svg { width:100%; height:100%; display:block; }
.porte .gauche { left:0; transform-origin:left center; border-radius:46% 0 0 4px / 22% 0 0 4px; overflow:hidden; }
.porte .droite { right:0; transform-origin:right center; border-radius:0 46% 4px 0 / 0 22% 4px 0; overflow:hidden; }
.porte .sceaux-porte { position:absolute; left:50%; top:30%; transform:translateX(-50%); display:grid; grid-template-columns:repeat(3,1fr); gap:4px; width:44%; z-index:2; }
.porte .sceaux-porte .cachet { width:100%; height:auto; aspect-ratio:1; }
.porte .torche { position:absolute; top:28%; width:10px; height:46px; background:linear-gradient(#6b4a2a,#3b2614); border-radius:3px; z-index:2; }
.porte .torche.g { left:-34px; } .porte .torche.d { right:-34px; }
.porte .flamme { position:absolute; left:50%; top:-26px; width:22px; height:30px; transform:translateX(-50%); border-radius:50% 50% 45% 45% / 60% 60% 40% 40%;
  background:radial-gradient(ellipse at 50% 70%, #fff6c4 0%, #ffb52e 40%, #e3541b 75%, transparent 76%); filter:drop-shadow(0 0 10px #ffae3d); animation:flamme 1.1s ease-in-out infinite alternate; }
.porte .torche.d .flamme { animation-delay:.4s; }
@keyframes flamme { 0% { transform:translateX(-50%) scale(1,1) rotate(-3deg); } 100% { transform:translateX(-50%) scale(.88,1.12) rotate(4deg); } }
.porte.ouverte .sceaux-porte { opacity:0; transition:opacity .6s ease; }

/* ── Sceau de cire (composant) ── */
.cachet { position:relative; display:inline-block; width:64px; height:64px; flex:0 0 auto; isolation:isolate; }
.cachet .moitie, .cachet .fissure, .cachet .eclats, .cachet .lueur { position:absolute; inset:0; }
.cachet .moitie svg { width:100%; height:100%; display:block; filter:drop-shadow(0 2px 2px rgba(0,0,0,.35)); }
.cachet .moitie.g { clip-path:polygon(0 0,54% 0,44% 30%,56% 52%,46% 74%,56% 100%,0 100%); }
.cachet .moitie.d { clip-path:polygon(54% 0,100% 0,100% 100%,56% 100%,46% 74%,56% 52%,44% 30%); }
.cachet .ruban { position:absolute; left:50%; top:50%; width:46%; height:58%; transform:translateX(-50%); z-index:-1; }
.cachet .ruban::before, .cachet .ruban::after { content:""; position:absolute; top:0; width:44%; height:100%; background:var(--ruban,#b8862b);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%); box-shadow:inset 0 0 0 1px rgba(0,0,0,.2); }
.cachet .ruban::before { left:2%; transform:rotate(14deg); transform-origin:top center; }
.cachet .ruban::after { right:2%; transform:rotate(-14deg); transform-origin:top center; }
.cachet.niv-6 { --ruban:var(--n6); } .cachet.niv-5 { --ruban:var(--n5); } .cachet.niv-4 { --ruban:var(--n4); }
.cachet .fissure { width:100%; height:100%; opacity:0; pointer-events:none; }
.cachet .fissure path { fill:none; stroke:#2a0605; stroke-width:3; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; }
.cachet .eclats i { position:absolute; left:46%; top:46%; width:9%; height:9%; background:#a3221a; border-radius:30% 60% 40% 50%; opacity:0; }
.cachet .lueur { border-radius:50%; opacity:0; background:radial-gradient(circle, rgba(255,233,160,.95) 0%, rgba(241,199,106,.55) 35%, transparent 68%); transform:scale(.6); }
/* rempli (réponse écrite) : liseré doré */
.cachet.rempli .moitie svg { filter:drop-shadow(0 0 0 #000) drop-shadow(0 0 4px var(--or2)); }
/* BRISÉ : les deux moitiés s'écartent, éclats de cire, lueur dorée */
.cachet.brise .moitie.g { animation:moitieG .9s cubic-bezier(.2,.7,.3,1) forwards; }
.cachet.brise .moitie.d { animation:moitieD .9s cubic-bezier(.2,.7,.3,1) forwards; }
.cachet.brise .eclats i { animation:eclat .9s ease-out forwards; }
.cachet.brise .lueur { animation:lueur 1.1s ease-out forwards; }
@keyframes moitieG { 0% { transform:none; } 15% { transform:translate(-2px,0) rotate(-4deg); } 100% { transform:translate(-26%,10%) rotate(-28deg); opacity:.35; } }
@keyframes moitieD { 0% { transform:none; } 15% { transform:translate(2px,0) rotate(4deg); } 100% { transform:translate(26%,10%) rotate(28deg); opacity:.35; } }
@keyframes eclat { 0% { opacity:1; transform:none; } 100% { opacity:0; transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(.6); } }
@keyframes lueur { 0% { opacity:0; transform:scale(.5); } 35% { opacity:1; transform:scale(1.35); } 100% { opacity:.55; transform:scale(1.15); } }
.cachet.brise.fini .moitie.g { transform:translate(-26%,10%) rotate(-28deg); opacity:.35; animation:none; }
.cachet.brise.fini .moitie.d { transform:translate(26%,10%) rotate(28deg); opacity:.35; animation:none; }
.cachet.brise.fini .lueur { opacity:.4; transform:scale(1.1); animation:none; }
/* FISSURÉ (réponse fausse ou vide) : une fêlure se dessine, le sceau tient — sobre, pas humiliant */
.cachet.fissure-faite .fissure { opacity:1; }
.cachet.fissure-faite .fissure path { animation:trait .6s ease-out forwards; }
.cachet.fissure-faite .moitie { animation:tremble .3s ease; filter:saturate(.75); }
@keyframes trait { to { stroke-dashoffset:0; } }
@keyframes tremble { 25% { transform:translateX(-2px); } 75% { transform:translateX(2px); } }
.cachet.fissure-faite.fini .fissure path { stroke-dashoffset:0; animation:none; }

/* ── Barre de progression collante (le registre) ── */
.progression { position:sticky; top:8px; z-index:30; background:linear-gradient(180deg,var(--carte),var(--carte2)); border:1px solid var(--bord); border-radius:14px; padding:8px 10px 10px; margin:0 0 12px; box-shadow:var(--ombre); }
.progression .haut { display:flex; justify-content:space-between; gap:8px; font-weight:700; font-size:.88rem; color:var(--doux); margin-bottom:6px; flex-wrap:wrap; }
.progression .haut b { color:var(--encre); }
.barre { height:7px; border-radius:99px; background:var(--ligne); overflow:hidden; margin-bottom:8px; }
.barre i { display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,#b8862b,#f1c76a); transition:width .35s ease; }
.pastilles { display:grid; grid-template-columns:repeat(9,1fr); gap:4px; }
.pastille { border:none; background:none; padding:0; cursor:pointer; touch-action:manipulation; display:grid; justify-items:center; }
.pastille .cachet { width:min(44px,9vw); height:min(44px,9vw); }
.pastille .cachet:not(.rempli):not(.brise):not(.fissure-faite) .moitie svg { opacity:.5; }
.pastille small { font:800 .7rem system-ui; color:var(--doux); margin-top:2px; }
.chrono { font-variant-numeric:tabular-nums; }

/* ── Questions : un feuillet du registre par sceau ── */
.question { scroll-margin-top:140px; position:relative; background:linear-gradient(180deg,var(--carte),var(--carte2)); }
.question::before { content:""; position:absolute; left:0; top:14px; bottom:14px; width:4px; border-radius:0 4px 4px 0; background:var(--ruban,#b8862b); }
.question.niv-6 { --ruban:var(--n6); } .question.niv-5 { --ruban:var(--n5); } .question.niv-4 { --ruban:var(--n4); }
.question .tete { display:flex; gap:12px; align-items:center; margin:0 0 8px; }
.question .tete .cachet { width:58px; height:58px; }
.question .tete .titre-sceau { font:700 1.05rem Georgia,serif; }
.question .tete .rune { display:block; font-size:.78rem; color:var(--doux); font-weight:600; }
.niveau { font-size:.76rem; font-weight:800; padding:3px 10px; border-radius:999px; color:#fff; margin-left:auto; }
.niveau.n6 { background:var(--n6); } .niveau.n5 { background:var(--n5); } .niveau.n4 { background:var(--n4); }
body.theme-night .niveau { color:#120d07; }
.enonce { font-size:1.12rem; font-weight:600; line-height:1.5; margin:4px 0 12px; overflow-x:auto; color:var(--encre); }
.enonce svg { max-width:100%; height:auto; color:var(--encre); }
.saisie { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.saisie input { font:700 1.15rem system-ui,sans-serif; flex:1 1 220px; max-width:420px; padding:.55rem .75rem; border-radius:10px;
  border:2px solid var(--ligne); color:var(--encre); background:var(--carte); }
.saisie input:focus { outline:none; border-color:var(--or); box-shadow:0 0 0 3px rgba(241,199,106,.35); }
.unite { font-weight:800; }
.consigne { font-size:.84rem; color:var(--doux); margin-top:6px; }
.choix { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; }
.choix button { font:700 1rem system-ui,sans-serif; padding:.65rem .6rem; border-radius:10px; border:2px solid var(--ligne); background:var(--carte); color:var(--encre) !important; cursor:pointer; touch-action:manipulation; }
.choix button.pris { border-color:var(--or); box-shadow:inset 0 0 0 2px var(--or); }

/* Correction */
.question.revele.juste { border-color:var(--okbord); }
.question.revele.faux { border-color:var(--kobord); }
.verdict { margin-top:12px; padding:10px 12px; border-radius:10px; line-height:1.45; }
.verdict.ok { background:var(--okfond); border:1px solid var(--okbord); }
.verdict.ko { background:var(--kofond); border:1px solid var(--kobord); }
.verdict b { font-weight:800; }
.verdict .detail { display:block; margin-top:6px; color:var(--doux); font-size:.92rem; }
.verdict .liens { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; align-items:center; }
.verdict .liens a, .recap a { font-size:.85rem; font-weight:700; color:var(--or) !important; text-decoration:none; border:1px solid var(--or); padding:2px 10px; border-radius:999px; white-space:nowrap; }
.etiquette { display:inline-block; font-size:.78rem; font-weight:700; padding:2px 10px; border-radius:999px; border:1px solid var(--bord); color:var(--doux); }
.question .verdict { display:none; } .question.revele .verdict { display:block; }

/* Récap */
.score { font:900 clamp(1.6rem,6vw,2.2rem) Georgia,serif; margin:6px 0; color:var(--encre); }
.score small { font-size:.55em; color:var(--doux); font-weight:700; }
.recap { display:grid; grid-template-columns:1fr 1fr; gap:12px; text-align:left; margin:12px 0; }
.recap section { border-radius:12px; padding:12px; border:1px solid var(--bord); }
.recap .maitrise { background:var(--okfond); border-color:var(--okbord); } .recap .revise { background:var(--kofond); border-color:var(--kobord); }
.recap h3 { margin:0 0 8px; font:700 1rem Georgia,serif; }
.recap ul { margin:0; padding-left:1.1em; line-height:1.5; } .recap li { margin:0 0 6px; }
.actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:12px; }
.alerte { margin:10px 0 0; padding:10px 12px; border-radius:10px; background:#fff3dc; color:#6b3d00; border:1px solid #e9c27a; font-weight:600; }
body.theme-night .alerte { background:#2e2410; color:#fcd68a; border-color:#6b5420; }
#recap { scroll-margin-top:140px; }
#confettis { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:50; }

@media (max-width:540px) {
  body { padding:10px 8px 40px; }
  .recap { grid-template-columns:1fr; }
  .enonce { font-size:1.04rem; } .carte { padding:14px 13px; }
  .question .tete .cachet { width:50px; height:50px; }
  .porte .torche { display:none; }
  .scene .dialogue { padding-left:58px; }
}
@media (prefers-reduced-motion: reduce) {
  .cachet *, .porte *, .porte .battant, .barre i { animation:none !important; transition:none !important; }
  .cachet.brise .moitie.g { transform:translate(-26%,10%) rotate(-28deg); opacity:.35; }
  .cachet.brise .moitie.d { transform:translate(26%,10%) rotate(28deg); opacity:.35; }
  .cachet.brise .lueur { opacity:.55; } .cachet.fissure-faite .fissure path { stroke-dashoffset:0; }
}
@media print { body { background:#fff !important; } .toolbar, .progression, .actions, #confettis, .scene { display:none !important; } .carte { box-shadow:none; break-inside:avoid; } }