/* ═══════════════════════════════════════════════════════════════════════════
   Habillage commun des exercices REGROUPÉS À PALIERS (24/10/2026)
   Choisi par le prof : « A — L'Horlogerie des Mages » (parchemin et or, ciel étoilé)
   + la guide de « C » (Maître Ysaline, dans une bulle, à côté de chaque explication).
   S'active avec <body class="paliers-mages">. Structure attendue (celle de
   proportionnalite/conversion/heures.html) : .carte, .palier, .pastille, .gemmes,
   .question, .inputs, .valider, #retour, .explication (ou .horloge), .continuer, .fin.
   Le fond étoilé n'est posé que SANS thème : un thème choisi par l'élève s'applique en entier.
   ═══════════════════════════════════════════════════════════════════════════ */
body.paliers-mages{ font-family:"Segoe UI", system-ui, Arial, sans-serif; color:#2b1b08; }
body.paliers-mages:not([class*="theme-"]){ background:radial-gradient(ellipse at 50% 0%, #2b2350 0%, #12102a 60%, #07060f 100%) fixed; }
body.paliers-mages:not([class*="theme-"])::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.55;
  background-image:radial-gradient(2px 2px at 20% 30%, #fff8 50%, transparent 51%), radial-gradient(1.5px 1.5px at 70% 20%, #fff7 50%, transparent 51%),
    radial-gradient(2px 2px at 85% 60%, #ffd76a88 50%, transparent 51%), radial-gradient(1.5px 1.5px at 35% 80%, #fff6 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 50%, #fff9 50%, transparent 51%); background-size:420px 420px; }

/* la carte en parchemin, au-dessus des décors de thème */
.paliers-mages .carte{ position:relative; z-index:11; max-width:860px; margin:16px auto; padding:24px 22px;
  background:linear-gradient(180deg,#fbf3dc,#f1e2b9); border:3px solid #c9a14a; border-radius:18px;
  box-shadow:0 0 0 6px rgba(201,161,74,.25), 0 18px 40px rgba(0,0,0,.55); color:#2b1b08; }
.paliers-mages .carte::before, .paliers-mages .carte::after{ content:"✦"; position:absolute; top:8px; color:#b0832a; font-size:18px; }
.paliers-mages .carte::before{ left:12px; } .paliers-mages .carte::after{ right:12px; }

/* en-tête de l'écran de choix : la guide et sa bulle */
.paliers-mages .heros{ display:flex; align-items:center; gap:16px; text-align:left; margin-bottom:18px; }
.paliers-mages .heros .guide-portrait{ width:112px; height:112px; }
.paliers-mages .heros h1{ margin:0 0 8px; font-family:Georgia,"Times New Roman",serif; color:#5a3a0c; font-size:1.9em; letter-spacing:.02em; }
.paliers-mages .guide-portrait{ flex:0 0 auto; width:72px; height:72px; border-radius:50%; object-fit:cover; background:#f5d98a;
  border:3px solid #c9a14a; box-shadow:0 0 0 3px #fbf3dc, 0 6px 14px rgba(0,0,0,.3); }
.paliers-mages .bulle{ position:relative; background:#fffaf0; border:2px solid #b0832a; border-radius:16px; padding:11px 15px;
  font-weight:600; line-height:1.45; text-align:left; color:#3b2708; box-shadow:3px 3px 0 #b0832a; }
.paliers-mages .bulle::before{ content:""; position:absolute; left:-11px; top:22px; border:9px solid transparent; border-right-color:#b0832a; border-left:0; }
.paliers-mages .bulle b{ color:#8b1d1d; }

/* les paliers : médaillons peints */
.paliers-mages .paliers{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.paliers-mages .palier{ position:relative; cursor:pointer; font:inherit; padding:18px 12px 16px; text-align:center; color:#3b2708;
  background:linear-gradient(180deg,#fffaf0,#f3e3bd); border:2px solid #c9a14a; border-radius:16px;
  box-shadow:0 4px 0 #a07a2c, 0 10px 18px rgba(0,0,0,.18); transition:transform .15s, box-shadow .15s; }
.paliers-mages .palier:hover{ transform:translateY(-4px); box-shadow:0 8px 0 #a07a2c, 0 16px 24px rgba(0,0,0,.25); }
.paliers-mages .palier:active{ transform:translateY(2px); box-shadow:0 2px 0 #a07a2c; }
.paliers-mages .palier .medaillon{ width:92px; height:92px; display:block; margin:0 auto 6px; filter:drop-shadow(0 6px 8px rgba(0,0,0,.35)); }
.paliers-mages .palier .rond{ display:none; }
.paliers-mages .palier .nom{ display:block; font-family:Georgia,serif; font-size:1.12em; font-weight:800; margin:2px 0; }
.paliers-mages .palier .ex{ display:block; font-size:.88em; font-weight:500; color:#6b4f22; }
.paliers-mages .palier .etat{ display:block; margin-top:8px; font-size:.84em; font-weight:700; color:#8a5a0c; min-height:1.2em; }
.paliers-mages .palier .conseil{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:.74em; font-weight:800;
  padding:3px 11px; border-radius:999px; background:#8b1d1d; color:#ffe9b0; box-shadow:0 0 0 2px #e8c66a; }
.paliers-mages .parcours{ margin-top:16px; width:100%; cursor:pointer; font:inherit; font-weight:800; padding:13px; color:#5a3a0c;
  background:transparent; border:2px dashed #b0832a; border-radius:14px; }
.paliers-mages .parcours small{ display:block; font-weight:500; color:#8a6a35; margin-top:2px; }
.paliers-mages .note{ margin-top:12px; font-weight:500; font-size:.86em; color:#7a5f32; }

/* pendant le jeu */
.paliers-mages .bandeau{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.paliers-mages .pastille{ display:inline-flex; align-items:center; gap:6px; padding:3px 12px 3px 3px; border-radius:999px; font-weight:800; background:#3b2708; color:#ffe9b0; }
.paliers-mages .pastille img{ width:28px; height:28px; }
.paliers-mages .serie{ font-weight:800; color:#8a1c1c; min-width:60px; }
.paliers-mages .gemmes{ display:flex; gap:5px; justify-content:center; margin:12px 0 16px; }
.paliers-mages .gemmes i{ width:17px; height:17px; transform:rotate(45deg); border-radius:4px; background:#efe0b8; border:2px solid #b0832a; transition:transform .3s; }
.paliers-mages .gemmes i.ok{ background:linear-gradient(135deg,#ffe58a,#d4a017); border-color:#8a6510; box-shadow:0 0 8px #f5c84299; }
.paliers-mages .gemmes i.ko{ background:#c0392b; border-color:#7b1d14; }
.paliers-mages .gemmes i.ici{ border-color:#5a3a0c; transform:rotate(45deg) scale(1.25); box-shadow:none; }
.paliers-mages .question{ font-family:Georgia,serif; font-weight:800; color:#3b2708; font-size:1.7em; margin:4px 0 18px; line-height:1.35; }
.paliers-mages .question b{ color:#3b2708; }
.paliers-mages .sens{ display:block; font-family:"Segoe UI",system-ui,sans-serif; font-size:.48em; font-weight:700; color:#8a6a35; letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px; }
.paliers-mages .inputs{ display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.paliers-mages .inputs .groupe{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.paliers-mages .inputs input{ width:112px; height:58px; font:inherit; font-size:1.6em; font-weight:800; text-align:center; border-radius:14px; outline:none;
  background:#fffdf5; border:2px solid #c9a14a; color:#3b2708; box-shadow:inset 0 2px 4px rgba(0,0,0,.08); }
.paliers-mages .inputs input:focus{ border-color:#8b1d1d; box-shadow:0 0 0 4px rgba(139,29,29,.15); }
.paliers-mages .inputs .u{ font-size:1.5em; font-weight:800; color:#3b2708; }
.paliers-mages .valider{ font:inherit; font-size:1.2em; font-weight:800; padding:12px 40px; border:none; border-radius:14px; cursor:pointer;
  background:linear-gradient(180deg,#e8c66a,#b8892c); color:#2b1b08; box-shadow:0 5px 0 #7a5a1c; }
.paliers-mages #retour{ margin-top:14px; min-height:1.6em; font-size:1.12em; font-weight:800; }
.paliers-mages #retour .ok{ color:#1f7a3a; } .paliers-mages #retour .ko{ color:#a11d1d; }
.paliers-mages .continuer{ margin-top:12px; font:inherit; font-weight:800; padding:11px 30px; border:none; border-radius:12px; cursor:pointer; background:#3b2708; color:#ffe9b0; }

/* l'explication, avec la guide à côté */
.paliers-mages .avec-guide{ display:flex; gap:12px; align-items:flex-start; max-width:640px; margin:12px auto 4px; text-align:left; }
.paliers-mages .avec-guide > .guide-portrait{ margin-top:6px; }
.paliers-mages .explication, .paliers-mages .horloge{ flex:1; max-width:600px; margin:0 auto; padding:16px 18px 14px; text-align:center;
  background:#fffaf0; border:2px solid #d9b96b; border-radius:14px; box-shadow:0 6px 14px rgba(0,0,0,.15); color:#3b2708; }
.paliers-mages .hb-barre{ display:flex; height:32px; border:2px solid #7a5a1c; border-radius:8px; overflow:hidden; }
.paliers-mages .hb-min{ flex:1; background:#f3e7c8; } .paliers-mages .hb-min.on{ background:linear-gradient(180deg,#ffd76a,#d4a017); }
.paliers-mages .hb-min.six{ border-right:2px solid rgba(122,90,28,.6); } .paliers-mages .hb-min:last-child{ border-right:0; }
.paliers-mages .hb-graduation{ position:relative; height:20px; margin-top:4px; font-size:.78em; font-weight:700; color:#6b4f22; }
.paliers-mages .hb-graduation span{ position:absolute; transform:translateX(-50%); white-space:nowrap; }
.paliers-mages .hb-graduation span:first-child{ transform:none; } .paliers-mages .hb-graduation span:last-child{ transform:translateX(-100%); }
.paliers-mages .hb-msg{ margin-top:10px; line-height:1.65; font-weight:600; } .paliers-mages .hb-msg b{ color:#1f7a3a; font-weight:900; }
.paliers-mages .hb-pas{ display:block; margin-top:6px; font-weight:800; color:#a11d1d; }

/* fin de partie */
.paliers-mages .fin h1{ font-family:Georgia,serif; color:#5a3a0c; margin:6px 0; }
.paliers-mages .fin .gros{ font-size:2.6em; font-weight:900; margin:4px 0; color:#3b2708; }
.paliers-mages .fin .sous{ color:#6b4f22; font-weight:600; }
.paliers-mages .fin .avec-guide{ justify-content:center; align-items:center; }
.paliers-mages .fin .boutons{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:18px; }
.paliers-mages .fin button{ font:inherit; font-weight:800; padding:11px 20px; border-radius:12px; cursor:pointer; background:#fffaf0; border:2px solid #b0832a; color:#3b2708; }
.paliers-mages .fin button.plein{ background:linear-gradient(180deg,#e8c66a,#b8892c); }

/* effets (js/paliers-guide.js) */
.pm-etincelle{ position:fixed; z-index:2000; pointer-events:none; font-size:20px; animation:pmVol 1s ease-out forwards; }
@keyframes pmVol{ from{ transform:translate(0,0) scale(1); opacity:1; } to{ transform:translate(var(--dx),var(--dy)) scale(.4) rotate(var(--r)); opacity:0; } }
.pm-rebond{ animation:pmRebond .4s ease; } @keyframes pmRebond{ 40%{ transform:scale(1.15); } }
.pm-tremble{ animation:pmTremble .28s ease 2; } @keyframes pmTremble{ 25%{ transform:translateX(-6px); } 75%{ transform:translateX(6px); } }
@media (prefers-reduced-motion: reduce){ .pm-etincelle{ display:none; } .pm-rebond, .pm-tremble{ animation:none; } }

/* téléphone */
@media (max-width:640px){
  .paliers-mages .paliers{ grid-template-columns:1fr; }
  .paliers-mages .palier{ display:grid; grid-template-columns:72px 1fr; text-align:left; align-items:center; column-gap:12px; padding:14px; }
  .paliers-mages .palier .medaillon{ width:68px; height:68px; margin:0; grid-row:span 3; }
  .paliers-mages .heros{ flex-direction:column; text-align:center; } .paliers-mages .heros .guide-portrait{ width:84px; height:84px; }
  .paliers-mages .heros .bulle::before{ left:50%; top:-11px; transform:translateX(-50%); border:9px solid transparent; border-bottom-color:#b0832a; border-top:0; }
  .paliers-mages .heros h1{ font-size:1.4em; text-align:center; }
  .paliers-mages .question{ font-size:1.35em; } .paliers-mages .inputs input{ width:96px; }
  .paliers-mages .avec-guide > .guide-portrait{ width:48px; height:48px; }
}
/* score max de chaque palier (js/paliers-guide.js) */
.paliers-mages .palier .score-max-palier, .paliers-mages .parcours .score-max-palier{ display:block; margin-top:4px; font-size:.82em; font-weight:800; color:#7a4e08; }
.paliers-mages .score-max-jeu{ font-size:.85em; font-weight:800; color:#7a4e08; background:#fff4d6; border:1px solid #e3c27a; border-radius:999px; padding:2px 10px; white-space:nowrap; }