/* Soul Force — révision graphique 2026-09.
   Couche de présentation : les héros, les règles et les sauvegardes restent dans leurs modules.
   Les couleurs de lecture et d'action sont communes à tous les menus du jeu. */
:root {
  --sf-ui-base: #202943;
  --sf-ui-panel: #303e60;
  --sf-ui-raised: #405074;
  --sf-ui-text: #fff7e8;
  --sf-ui-muted: #d0daed;
  --sf-ui-gold: #ffdc85;
  --sf-ui-action: linear-gradient(135deg, #ffe5a3, #f1bb62);
  --sf-ui-action-ink: #382b22;
  --sf-ui-radius: 16px;
}
.education-shell {
  --sfedu-surface: var(--sf-ui-panel);
  --sfedu-surface-active: var(--sf-ui-raised);
  --sfedu-card: var(--sf-ui-panel);
  --sfedu-bar: var(--sf-ui-base);
  --sfedu-ink: var(--sf-ui-text);
  --sfedu-ink-doux: var(--sf-ui-muted);
  --sfedu-or: var(--sf-ui-gold);
  background: linear-gradient(180deg, #202943ed, #28395dc9 58%, #364965ad), var(--sfedu-ground);
}
.education-shell .topbar { box-shadow: 0 4px 18px #111b3529; }
.education-shell .acct-btn { min-width: 44px; min-height: 44px; color: var(--sf-ui-muted); border-radius: 14px; }
.education-shell .acct-btn:active { background: var(--sf-ui-raised); }
.education-shell .nav { gap: 4px; padding-inline: 8px; box-shadow: 0 -4px 20px #10172c33; }
.education-shell .nav button { min-height: 56px; border-radius: 14px; color: #c7d2e8; font-size: 11px; letter-spacing: 0; }
.education-shell .nav button.on { background: #36425e; color: #ffe1a0; }
.education-shell .nav button.on:before { width: 20px; height: 3px; background: var(--sf-ui-gold); }
.education-shell .nav .ni svg { width: 25px; height: 25px; }
.education-shell .sfedu { color: var(--sf-ui-text); text-shadow: none; }
.education-shell .sfedu p { color: var(--sf-ui-muted); }
.education-shell .sfedu h2 { letter-spacing: -.3px; }
.education-shell .sfedu h3 { color: var(--sf-ui-gold); }
.education-shell .sfedu .sfedu-btn:not(.quiet),
.education-shell .sfedu .sfedu-skill,
.education-shell .sfedu .sfedu-soul-bubble { border-radius: var(--sf-ui-radius); box-shadow: 0 4px 12px #11192c24; }
.education-shell .sfedu .sfedu-btn:not(.quiet) { background: var(--sf-ui-raised); color: var(--sf-ui-text); }
.education-shell .sfedu .sfedu-btn.secondary { background: var(--sf-ui-panel); color: var(--sf-ui-text); box-shadow: none; }
.education-shell .sfedu .sfedu-btn.sfedu-continue-cta,
.education-shell .sfedu .sfedu-btn.sfedu-carousel-go,
.education-shell .sfedu-primary-actions > .sfedu-btn:first-child,
.education-shell .sfedu-stars > .sfedu-btn:not(.quiet) {
  background: var(--sf-ui-action); color: var(--sf-ui-action-ink); text-shadow: none;
  box-shadow: 0 4px 0 #b27a393b, 0 7px 18px #10172c24;
}
.education-shell .sfedu .sfedu-btn:disabled { opacity: .55; box-shadow: none; cursor: default; }
.education-shell .sfedu .sfedu-btn:active:not(:disabled) { transform: translateY(1px); }
.education-shell .sfedu .sfedu-btn.quiet { color: var(--sf-ui-muted); }
.education-shell .sfedu .sfedu-soul-bubble { color: var(--sf-ui-text); background: var(--sf-ui-panel); }
.education-shell .sfedu-close { width: 54px; height: 48px; border-radius: 14px; background: var(--sf-ui-panel); box-shadow: none; }
.education-shell .sfedu-close:before { width: 25px; height: 20px; background: var(--sf-ui-gold); }
.education-shell .sfedu-carousel-card { background: var(--sf-ui-panel); border-radius: 0 0 20px 20px; box-shadow: none; }
.education-shell .sfedu-carousel-art { animation: none; }
.education-shell .sfedu-carousel-figure { box-shadow: none; height: clamp(144px, min(42dvh, calc(100dvh - 538px)), 400px); }
.education-shell .sfedu-carousel-rim { opacity: .52; }
.education-shell .sfedu-carousel-stage .hc-arrow { background: #fff0c9; box-shadow: 0 3px 12px #10172c40; }
.education-shell .sfedu-carousel-title { color: var(--sf-ui-text); }
.education-shell .sfedu-carousel-progress-label { color: var(--sf-ui-muted); }
.education-shell .sfedu-carousel-gauge { background: #526182; }
.education-shell .sfedu-carousel-gauge i { background: #ffdb83; box-shadow: none; }
.education-shell .sfedu-outils .sfedu-btn { background: var(--sf-ui-panel); }
/* Les leçons se lisent avant de se choisir. Le défilement vertical est intentionnel sur mobile. */
.education-shell .sfedu-subject-page .sfedu-path { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.education-shell .sfedu-subject-page .sfedu-skill {
  min-height: 68px; padding: 10px; justify-content: flex-start; text-align: left;
  background: var(--sf-ui-panel); color: var(--sf-ui-text);
}
.education-shell .sfedu-subject-page .sfedu-skill-copy b { font-size: 14px; line-height: 1.3; overflow-wrap: normal; }
.education-shell .sfedu-subject-page .sfedu-skill.mastered { background: #254b4b; }
.education-shell .sfedu-subject-page .sfedu-subject-banner { margin-bottom: 12px; }
.education-shell .sfedu-subject-page .sfedu-summary { background: var(--sf-ui-base); }
.education-shell .sfedu-subject-page .sfedu-close { width: 50px; height: 44px; }
.education-shell .sfedu-skill-page .sfedu-reward-preview,
.education-shell .sfedu-skill-page .sfedu-stars .sfedu-btn.quiet { background: var(--sf-ui-panel); }
.education-shell .sfedu-screen { scroll-padding-bottom: calc(var(--sfedu-nav, 70px) + 24px); }
/* La carte défile dans une zone qui se termine AVANT la navigation. Une simple
   réserve de padding n'empêche pas un bouton sticky de glisser derrière elle. */
.education-shell #tab-map {
  min-height: 0;
  margin-bottom: var(--sfedu-nav, 70px);
  padding-bottom: 22px;
  scroll-padding-block: 12px;
}
.education-shell #tab-map.atlas-mode { padding-bottom: 0; }
.education-shell #tab-map .map-region-detail {
  bottom: calc(var(--sfedu-nav, 70px) + 12px);
}
.education-shell .sfedu-exercise-active .sfedu-question-primary { background: #283653; }
.education-shell .sfedu-exercise-active .sfedu-question { text-shadow: none; color: var(--sf-ui-text); }
.education-shell .sfedu-exercise-active .sfedu-choices .sfedu-btn { background: #405074; }
.education-shell .sfedu-exercise-active .sfedu-choices .sfedu-btn.sfedu-choice-good,
.education-shell .sfedu-exercise-active .sfedu-choices .sfedu-btn.sfedu-choice-right { background: #286052; color: #fff; opacity: 1; }
.education-shell .sfedu-exercise-active .sfedu-choices .sfedu-btn.sfedu-choice-bad { background: #724653; color: #fff; opacity: 1; }
.education-shell .sfedu-feedback-page { background: var(--sf-ui-base); }
.education-shell .sfedu-feedback-page .sfedu-feedback,
.education-shell .sfedu-feedback-page .sfedu-streak { background: var(--sf-ui-panel); }
.education-shell .sfedu-question-primary .sfedu-passage { color: #e1e7f3; }
/* Carte : le retour devient secondaire, le prochain geste garde l'or. */
.education-shell .map-atlas-return { min-height: 48px; padding: 9px 12px; border: 0; border-radius: 14px; background: var(--sf-ui-panel); box-shadow: none; }
.education-shell .map-atlas-return b { font-size: 13px; }
.education-shell .map-atlas-return small { color: var(--sf-ui-muted); font-size: 11px; }
/* Collection : même surface et lumière discrète ; silhouettes et couleurs originales. */
.sf-education-mode .sc2 .sc2grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sf-education-mode .sc2 .card { border: 0; border-radius: 18px; background: var(--sf-ui-panel); box-shadow: 0 6px 18px #10172c30; }
.sf-education-mode .sc2 .card.active { box-shadow: inset 0 0 0 2px var(--sf-ui-gold), 0 6px 18px #10172c30; }
.sf-education-mode .sc2 .card .art { height: 170px; padding: 8px; background: radial-gradient(ellipse at 50% 72%, color-mix(in srgb, var(--el) 22%, #303e60), #303e60 75%); }
.sf-education-mode .sc2 .card .art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 5px 5px #14203a55); }
.sf-education-mode .sc2 .card .nm { white-space: normal; overflow-wrap: anywhere; font-size: 15px; line-height: 1.25; }
.sf-education-mode .sc2 .card .cap { padding: 8px 12px 6px; }
.sf-education-mode .sc2 .card .elrow { padding-inline: 12px; }
.sf-education-mode .sc2 .card .pick { min-height: 44px; margin: 4px 10px 10px; color: var(--sf-ui-action-ink); background: var(--sf-ui-action); border: 0; border-radius: 12px; }
.sf-education-mode .sc2 .card .pick.on { color: var(--sf-ui-gold); background: var(--sf-ui-base); }
.sf-education-mode .sc2 .sheet { background: var(--sf-ui-base); }
.sf-education-mode .sc2 .sheet-body { max-width: 600px; margin-inline: auto; }
.sf-education-mode .sc2 .hero-frame { width: min(78vw, 340px); padding: 12px; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.sf-education-mode .sc2 .hero-frame img { width: 100%; height: 100%; padding: 8px; filter: drop-shadow(0 8px 12px #10172c60); }
.sf-education-mode .sc2 .sheet-act { min-height: 48px; background: var(--sf-ui-action); color: var(--sf-ui-action-ink); }
/* Options et fenêtres : une lecture simple, des commandes faciles à toucher. */
.sf-education-mode #acctModal .acct-card { background: var(--sf-ui-base); color: var(--sf-ui-text); border: 0; border-radius: 24px; box-shadow: 0 20px 70px #0b102866; }
.sf-education-mode #acctModal .set-grp { background: var(--sf-ui-panel); border: 0; border-radius: 16px; }
.sf-education-mode #acctModal .set-row { min-height: 52px; color: var(--sf-ui-text); }
.sf-education-mode #acctModal .set-row .lab span { color: var(--sf-ui-muted); }
.sf-education-mode #acctModal .set-close { min-width: 44px; min-height: 44px; }
.sf-education-mode #acctModal input[type=range] { min-height: 44px; accent-color: var(--sf-ui-gold); }
.sf-education-mode .eq-child { color: var(--sf-ui-text); }
/* Les focus sont opaques et lisibles sur le ciel comme sur une illustration. */
.education-shell button:focus-visible,
.sf-education-mode .sc2 button:focus-visible,
.sf-education-mode #acctModal button:focus-visible,
#introVN button:focus-visible { outline: 3px solid #ffe1a0; outline-offset: 3px; }
@media (min-width: 480px) {
  .education-shell .sfedu-subject-page .sfedu-path { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sf-education-mode .sc2 .sc2grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 350px) {
  .education-shell .sfedu-subject-page .sfedu-skill { padding: 8px; min-height: 66px; }
  .education-shell .sfedu-subject-page .sfedu-skill-copy b { font-size: 13px; }
  .education-shell .nav button { font-size: 10px; }
  .sf-education-mode .sc2 .card .art { height: 142px; }
}
@media (prefers-reduced-motion: reduce) {
  .education-shell *, #introVN *, .sf-education-mode .sc2 *, #cv2 * { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  .education-shell .sfedu-carousel-rim, .v2-flash, .v2-spark { display: none !important; }
}
/* Combat : les impacts restent près de leur cible ; le panneau de question reprend les menus. */
#cv2.cv2-child .cv2-ask { background: #263652; border: 0; border-radius: 18px; box-shadow: 0 6px 20px #10172c40; }
#cv2.cv2-child .cv2-ask-ctx { background: #334666; color: #e4eaf5; }
#cv2.cv2-child .cv2-ask-c { background: #405074; border: 0; color: #fff7e8; }
#cv2.cv2-child .cv2-ask-c.good, #cv2.cv2-child .cv2-ask-c.right { background: #286052; }
#cv2.cv2-child .cv2-ask-c.bad { background: #784650; }
#cv2.cv2-child .cv2-ask-verdict { background: #334666; }
#cv2.cv2-child .cv2-fx { filter: drop-shadow(0 0 10px var(--glow)); }
#cv2.cv2-child .cv2-result { background: #202943; }
:root.v2-noanim .sfedu-carousel-rim, :root.v2-noanim .v2-flash,
:root.v2-noanim .v2-spark, :root.v2-noanim #cv2 .cv2-fx, :root.v2-noanim #cv2 .cv2-ring { display: none !important; }
/* Fiche de Soul : commandes et compétences cohérentes avec la collection. */
.sf-education-mode .sc2 .sheet-tabs { background: #202943; border: 0; border-radius: 16px; }
.sf-education-mode .sc2 .sheet-tab { min-height: 48px; border-radius: 12px; color: #d0daed; font-size: 14px; }
.sf-education-mode .sc2 .sheet-tab.on { background: #405074; color: #ffdf98; box-shadow: none; }
.sf-education-mode .sc2 .sheet-act.on { border: 0; color: #ffdf98; background: #303e60; }
.sf-education-mode .sc2 .pw-card { display: none; }
.sf-education-mode .sc2 .sk-tile { border: 0; background: #303e60; padding: 12px; border-radius: 14px; }
.sf-education-mode .sc2 .sk-tile .ic img { width: 36px; height: 36px; display: block; object-fit: contain; }
.sf-education-mode .sc2 .sk-tile .t { font-size: 14px; line-height: 1.3; }
.sf-education-mode .sc2 .sk-tile .t small { font-size: 11px; color: #d0daed; opacity: 1; text-transform: none; letter-spacing: 0; }
.sf-education-mode #acctModal .set-grp-h { color: #d0daed; font-size: 11px; letter-spacing: .8px; }
.sf-education-mode #acctModal .set-info { color: #e1e7f3; }
.education-shell .equipment-child { background: transparent; }
.education-shell .eq-child-card, .education-shell .eq-child-empty { background: var(--sf-ui-panel); }
.education-shell .eq-child-card.owned { background: #28514d; }
.education-shell .eq-child-card .eq-child-icon { background: var(--sf-ui-base); }

/* Académie : un cours lisible, un professeur identifié et un essai sans enjeu. */
.sfedu-lesson-page .sfedu-companion{display:flex;align-items:center;gap:12px;margin:16px 0}
.sfedu-lesson-page .sfedu-soul-portrait{width:88px;height:108px;object-fit:contain;flex:none}
.sfedu-lesson-page .sfedu-soul-bubble{font-size:16px;line-height:1.6}
.sfedu-lesson-method,.sfedu-lesson-example{margin:16px 0;padding:16px;border:1px solid var(--sf-line,#c9b788);border-radius:16px;background:var(--sf-ui-panel)}
.sfedu-lesson-page h3{font-size:18px;margin:0 0 12px}
.sfedu-lesson-page p,.sfedu-lesson-page li{font-size:16px;line-height:1.6}
.sfedu-lesson-page ol{padding-left:24px;margin:0}.sfedu-lesson-page li+li{margin-top:8px}
.sfedu-lesson-tip{padding:12px;border-left:3px solid #ac792d}
.sfedu-lesson-answer{font-weight:800}.sfedu-lesson-feedback:empty{display:none}
.sfedu-open-lesson{width:100%;margin-bottom:10px;min-height:48px}
.sfedu-lesson-page .sfedu-choices{grid-template-columns:repeat(2,minmax(0,1fr))}
.sfedu-lesson-page .sfedu-choices button{min-height:64px;white-space:normal;overflow-wrap:anywhere}
@media(max-width:359px){.sfedu-lesson-page .sfedu-choices{grid-template-columns:1fr}.sfedu-lesson-page .sfedu-soul-portrait{width:64px;height:88px}}

.education-shell .sfedu-lesson-page .sfedu-question{color:var(--sf-ui-text);text-shadow:none;text-align:left;font-size:18px}
.education-shell .sfedu-lesson-page .sfedu-lesson-answer{color:var(--sf-ui-gold)}
.education-shell .sfedu-lesson-page .sfedu-choices .sfedu-choice-good,
.education-shell .sfedu-lesson-page .sfedu-choices .sfedu-choice-right{background:#286052;color:#fff;opacity:1}
.education-shell .sfedu-lesson-page .sfedu-choices .sfedu-choice-bad{background:#724653;color:#fff;opacity:1}

/* Film : une illustration unifiée par plan, intégrale sur tous les écrans. */
.sfintro-plan{background-position:center;background-size:cover}
.sfintro-plan:before{content:'';position:absolute;inset:-20px;background:inherit;filter:blur(20px) brightness(.3)}
.sfintro-composition{position:absolute;inset:0;overflow:hidden}
.sfintro-composition>img{position:absolute;inset:0;min-width:0;min-height:0;width:100%;height:100%;object-fit:contain;animation-duration:var(--shot-duration,10s)!important}
.sfintro-texte{font-size:clamp(1.05rem,2.6vw,1.45rem);line-height:1.5;text-wrap:pretty;text-shadow:0 2px 8px #000}
@media (orientation:landscape){
  .sfintro-composition{right:38%}
  .sfintro .sfintro-texte{left:62%;top:50%;bottom:auto;transform:translateY(-50%);padding:24px 28px;background:none;text-align:left}
}
.education-shell .sfedu-lesson-page .sfedu-choices .sfedu-btn{background:var(--sf-ui-raised);border:1px solid #7080a0}
.education-shell .sfedu-lesson-page .sfedu-choices .sfedu-choice-good,
.education-shell .sfedu-lesson-page .sfedu-choices .sfedu-choice-right{background:#286052;border-color:#8ad8b6}
.education-shell .sfedu-lesson-page .sfedu-choices .sfedu-choice-bad{background:#724653;border-color:#e6a0b2}