/* EduGlob — feuille de styles globale (externalisée du helmet)
   Ne contient que ce qui ne peut pas être inline : reset, base body,
   et les règles responsive ciblant les attributs [data-resp]. */

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:#f4efe6;color:#23211c;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
canvas{display:block}
[data-resp="grab"]:hover [data-resp="grabpill"]{background:#a89d83}
[data-resp="grab"]{touch-action:none}

/* --- Mode plein écran (focus) : masque les chromes pour agrandir l'affichage --- */
[data-resp="focusbtn"]:hover{background:#f3eee2!important}
[data-resp="root"][data-focus="1"] [data-resp="nav"]{display:none!important}
[data-resp="root"][data-focus="1"] [data-resp="stepbar"]{display:none!important}
[data-resp="root"][data-focus="1"] [data-resp="main"]{padding-top:0!important}
[data-resp="root"][data-focus="1"] [data-resp="focusbtn"]{background:#1c3d5a!important;color:#fff!important;border-color:#1c3d5a!important}
[data-resp="root"][data-focus="1"] [data-resp="focusbtn"]:hover{background:#274f70!important}
[data-resp="root"][data-focus="1"] [data-resp="ic-enter"]{display:none!important}
[data-resp="root"][data-focus="1"] [data-resp="ic-exit"]{display:block!important}

@media (max-width:820px){
  [data-resp="root"]{flex-direction:column!important;height:100dvh!important}
  /* La racine d'une activité (imbriquée sous la page principale) occupe seulement
     l'espace restant sous le menu, sinon le bas (et la poignée) passe sous l'écran. */
  [data-resp="root"] [data-resp="root"]{height:100%!important}
  [data-resp="nav"]{position:relative!important;width:100%!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;padding:7px 12px!important;gap:8px!important;border-right:none!important;border-bottom:1px solid #e3dccc!important;flex:none!important;z-index:40!important}
  [data-resp="nav-brand"]{margin:0!important;flex:none!important;text-align:left!important;padding-top:0!important;margin-bottom:0!important}
  [data-resp="nav-brand"] img{max-width:40px!important}
  [data-resp="nav-copy"]{display:none!important}
  [data-resp="burger"]{display:flex!important;order:-1!important;margin-left:0!important;margin-right:2px!important}
  [data-resp="tabwrap"]{position:absolute!important;top:calc(100% + 4px)!important;left:10px!important;right:auto!important;width:210px!important;background:#fffdf8!important;border:1px solid #e3dccc!important;border-radius:12px!important;box-shadow:0 10px 28px rgba(0,0,0,0.18)!important;padding:8px!important;gap:6px!important;z-index:60!important}
  [data-resp="root"][data-menu="0"] [data-resp="tabwrap"]{display:none!important}
  [data-resp="tabbtn"]{flex-direction:row!important;gap:11px!important;padding:10px 12px!important;flex:none!important;width:100%!important;white-space:nowrap!important;align-items:center!important;justify-content:flex-start!important}
  [data-resp="tab"]{flex-direction:column!important}
  /* min-height:0 : le panneau sombre peut être entièrement masqué (tirette à fond en haut) */
  [data-resp="globe"]{flex:none!important;height:var(--gh,50%)!important;min-height:0!important}
  [data-resp="grab"]{position:static!important;left:auto!important;top:auto!important;bottom:auto!important;width:auto!important;height:22px!important;cursor:row-resize!important;border-bottom:1px solid #e3dccc!important;border-left:none!important;background:#f4efe6!important;flex:none!important}
  [data-resp="grabpill"]{width:42px!important;height:5px!important}
  /* min-height:64px = poignée + marge de sécurité : tirette à fond en bas, la poignée reste attrapable
     (même valeur que RESERVE dans dragSplit.js) */
  [data-resp="aside"]{width:100%!important;max-width:100%!important;flex:1 1 auto!important;border-left:none!important;border-top:none!important;min-height:64px!important;overflow-y:auto!important;padding-bottom:env(safe-area-inset-bottom,0px)!important}
  [data-resp="stepbar"]{position:static!important;height:auto!important;z-index:30!important;flex:none!important}
  [data-resp="stepbar-inner"]{padding:7px 12px 0!important;gap:16px!important}
  [data-resp="stepbar-title"]{display:none!important}
  [data-resp="main"]{padding-top:0!important}
}

/* --- Listes déroulantes : apparence entièrement réglée ici (plus d'aspect natif) ---
   Sans cela, certains navigateurs dessinent leur propre cadre blanc rectangulaire, qui
   dépasse des coins arrondis une fois la liste dépliée. La flèche est dessinée en SVG.
   Les classes (eg-liste, eg-choix, eg-obs-champ) ne règlent que background-color, pour ne pas
   effacer la flèche. */
select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-clip:padding-box;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236e6857' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:10px 6px;cursor:pointer}
select::-ms-expand{display:none}
select:disabled{cursor:default;opacity:1}
select:focus{outline:none;border-color:#2f6f8f;box-shadow:0 0 0 2px rgba(47,111,143,.18)}
select option{background-color:#fff;color:#23211c}

/* --- Puce « Débutant / Expert » et boutons en haut à droite (accueil) ---
   Sur ordinateur, la barre des étapes d'une activité réserve à droite la place de ces boutons :
   les étapes ne passent plus dessous (elles défilent si la place manque). Quand l'écran est
   étroit, le titre de l'activité (déjà écrit dans le menu et le panneau blanc) est masqué. */
@media (min-width:821px){
  [data-resp="root"] [data-resp="root"] [data-resp="stepbar-inner"]{padding-right:200px!important}
}
@media (min-width:821px) and (max-width:1060px){
  [data-resp="root"] [data-resp="root"] [data-resp="stepbar-title"]{display:none!important}
}

/* =====================================================================
   COMPOSANTS COMMUNS DES ACTIVITÉS (classes « eg- », lot 3)
   Utilisés dans le panneau blanc des activités : titres, consignes, boutons,
   listes, onglets de niveau, zones de lecture des mesures, fenêtre de résultat.
   ===================================================================== */

/* --- Textes --- */
.eg-titre{font-family:'Source Serif 4',Georgia,serif;font-weight:700;font-size:15px;color:#1c3d5a;margin-bottom:10px}
.eg-consigne{font-size:11.5px;line-height:1.55;color:#8a8270;margin-bottom:12px}
.eg-etiquette{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#8a8270;margin-bottom:5px}
.eg-note{font-size:11px;line-height:1.5;color:#8a8270}
/* Couleurs des ondes et des messages */
.eg-p{color:#c8492f}
.eg-s{color:#2f6f8f}
.eg-lr{color:#d98a3d}
.eg-ok{color:#3f7a4f;font-weight:700}
.eg-attention{color:#c8772f;font-weight:700}
.eg-erreur{color:#c8492f;font-weight:700}
.eg-neutre{color:#b0892f}

/* --- Zones de lecture (mesures de l'élève) et messages d'état --- */
.eg-lecture{font-size:12px;color:#5a5444;line-height:1.6;padding:10px 12px;background:#f6f1e6;border:1px solid #ece5d5;border-radius:9px}
.eg-lecture b{color:#2a2722}
.eg-statut{font-size:11px;line-height:1.45;color:#8a8270;padding:8px 11px;background:#f6f1e6;border:1px solid #ece5d5;border-radius:8px}

/* --- Boutons, listes, champs --- */
.eg-ligne{display:flex;gap:8px;align-items:stretch}
.eg-btn{border:none;border-radius:8px;padding:11px 16px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.eg-btn-principal{flex:1;background:#2f6f8f;color:#fff}
.eg-btn-principal:hover{background:#285f7b}
.eg-btn-second{background:#efe8d8;color:#5a5444}
.eg-btn-second:hover{background:#e6ddc9}
.eg-btn-petit{flex:none;padding:9px 14px;white-space:nowrap}
.eg-liste{flex:1;min-width:0;border:1px solid #e3dccc;border-radius:8px;padding:9px 30px 9px 10px;font-size:12.5px;font-family:inherit;color:#2a2722;background-color:#fff}
/* Sélecteur de roche (Roches, Densité…) : flèches ‹ › de part et d'autre de la liste déroulante,
   en haut du panneau blanc ; groupes et ✓ des roches faites (cf. roches-mineraux.js, section 5) */
.eg-choix-roche{padding:11px 16px;border-bottom:1px solid #e3dccc;flex:none;display:flex;align-items:center;gap:8px}
.eg-choix-roche-fleche{flex:none;width:34px;height:34px;border:1px solid #e3dccc;background:#fff;border-radius:8px;cursor:pointer;font-size:16px;color:#5a5444;font-family:inherit}
.eg-choix-roche-liste{font-size:13px;font-weight:600;cursor:pointer}
.eg-choix-roche-liste optgroup{font-style:normal;font-weight:700;color:#6e6857}
.eg-choix-roche-liste option{font-weight:500;color:#23211c}
/* Modèle 3D pas encore disponible (panneau sombre de Roches, Densité…) : pas d'iframe, pas d'appel à Sketchfab */
.eg-modele-absent{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:22px;background:#111;color:#b9c2d8;text-align:center}
.eg-modele-absent-titre{font-family:'Source Serif 4',Georgia,serif;font-size:17px;font-weight:700;color:#e9eefb}
.eg-modele-absent p{max-width:340px;font-size:13px;line-height:1.5;margin:0}
.eg-champ{width:92px;padding:9px 10px;border:1px solid #d8cfba;border-radius:8px;font-size:14px;font-family:inherit;background:#fffdf8}
.eg-champ-label{font-size:12.5px;font-weight:600;color:#4a4636}

/* --- Graphiques interactifs (canvas) --- */
.eg-canvas{width:100%;height:auto;display:block;border-radius:10px;background:#fbf8f1;border:1px solid #ece5d5;touch-action:none;cursor:pointer}

/* --- Onglets de niveau (Facile / Intermédiaire / Difficile) ---
   La couleur de l'onglet actif se règle avec --eg-accent sur le conteneur. */
.eg-onglets{display:flex;gap:6px}
.eg-onglet{flex:1;border:1px solid #e3dccc;border-radius:9px;padding:9px 4px;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.1;background:#fff;color:#5a5444}
.eg-onglet b{font-weight:700;font-size:12.5px}
.eg-onglet small{font-size:9px;font-weight:600;letter-spacing:.03em;color:#a89d83}
.eg-onglet.actif{background:var(--eg-accent,#2f6f8f);border-color:var(--eg-accent,#2f6f8f);color:#fff}
.eg-onglet.actif small{color:rgba(255,255,255,.85)}

/* --- Panneau blanc : zone qui défile --- */
.eg-panneau{flex:1;min-height:0;display:flex;flex-direction:column;padding:12px 16px;overflow-y:auto}
.eg-panneau > *{flex:none}

/* --- Fenêtre de résultat (notation) --- */
.eg-modal-fond{position:fixed;inset:0;z-index:300;background:rgba(24,20,12,.5);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:24px}
.eg-modal{background:#fffdf8;border-radius:16px;width:100%;max-width:480px;max-height:88vh;overflow-y:auto;box-shadow:0 26px 70px rgba(0,0,0,.36);border:1px solid #e3dccc}
.eg-modal-tete{padding:22px 26px 8px}
.eg-modal-surtitre{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#9a917c;margin-bottom:4px}
.eg-modal-niveau{font-family:'Source Serif 4',Georgia,serif;font-weight:700;font-size:26px;line-height:1.1}
.eg-modal-score{font-family:'Source Serif 4',Georgia,serif;font-weight:700;font-size:34px;line-height:1;color:#23211c}
.eg-modal-score-label{font-size:10.5px;color:#9a917c;letter-spacing:.03em;margin-top:2px}
.eg-modal-conseil{font-size:13px;line-height:1.5;color:#5a5444;margin-top:13px}
.eg-modal-lignes{padding:4px 26px;display:flex;flex-direction:column;gap:8px}
.eg-modal-ligne{border:1px solid #ece5d5;border-left-width:4px;border-radius:9px;padding:9px 12px;background:#fcf8f0}
.eg-modal-ligne-tete{display:flex;align-items:center;justify-content:space-between;gap:10px}
.eg-modal-ligne-nom{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#2a2722}
.eg-modal-ligne-pastille{width:10px;height:10px;border-radius:2px;flex:none}
.eg-modal-ligne-note{font-size:12px;font-weight:700;white-space:nowrap}
.eg-modal-ligne-detail{font-size:11.5px;color:#8a8270;margin-top:5px;padding-left:18px}
.eg-modal-ligne-detail b{color:#5a5444}
.eg-modal-remarque{margin:12px 26px 0;padding:11px 13px;background:#f4efe6;border-radius:9px;font-size:12px;line-height:1.5;color:#6e6857}
.eg-modal-boutons{display:flex;gap:10px;padding:18px 26px 22px}
.eg-modal-continuer{flex:1;background:#2f6f8f;color:#fff;border:none;border-radius:9px;padding:11px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}

/* =====================================================================
   SISMOGRAMME — tableau comparatif et animations des ondes (panneau sombre)
   ===================================================================== */
.sis-carte{display:flex;flex-direction:column;gap:14px;width:100%;max-width:820px;max-height:100%;overflow-y:auto;background:#fffdf8;border:1px solid #e3dccc;border-radius:14px;padding:18px;box-shadow:0 18px 48px rgba(0,0,0,.4)}
.sis-anims{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.sis-anim{border:1px solid #ece5d5;border-top-width:3px;border-radius:9px;padding:8px 8px 7px;display:flex;flex-direction:column}
.sis-anim-nom{font-family:'Source Serif 4',Georgia,serif;font-weight:700;font-size:13px;line-height:1.1}
.sis-anim-ordre{font-size:9px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;margin:2px 0 6px}
.sis-anim canvas{width:100%;height:auto;display:block;border-radius:6px}
.sis-anim-p{border-top-color:#c8492f;background:#fdf6f2} .sis-anim-p .sis-anim-nom{color:#a83a22} .sis-anim-p .sis-anim-ordre{color:#c8492f} .sis-anim-p canvas{background:#fbf3ee}
.sis-anim-s{border-top-color:#2f6f8f;background:#f2f6f9} .sis-anim-s .sis-anim-nom{color:#26617f} .sis-anim-s .sis-anim-ordre{color:#2f6f8f} .sis-anim-s canvas{background:#eef4f8}
.sis-anim-lr{border-top-color:#d98a3d;background:#fdf6ec} .sis-anim-lr .sis-anim-nom{color:#b06d22} .sis-anim-lr .sis-anim-ordre{color:#c07e2c} .sis-anim-lr canvas{background:#fbf2e4}
.sis-tableau{border:1px solid #e3dccc;border-radius:10px;overflow:hidden;display:grid;grid-template-columns:96px 1fr 1fr 1fr;font-size:11px;line-height:1.35}
.sis-tableau > div{padding:7px 8px;border-bottom:1px solid #ece5d5;border-right:1px solid #ece5d5;color:#4a4636}
.sis-tableau > div:nth-child(4n){border-right:none}
.sis-tableau > div:nth-last-child(-n+4){border-bottom:none}
.sis-tableau .sis-coin{background:#efe8d8;border-bottom-color:#e3dccc;border-right:none}
.sis-tableau .sis-entete{border-right:none;color:#fff;font-family:'Source Serif 4',Georgia,serif;font-weight:700;font-size:13px;border-bottom-color:#e3dccc}
.sis-tableau .sis-entete span{font-weight:400;font-size:10px;opacity:.85}
.sis-tableau .sis-ligne-nom{background:#f7f2e7;color:#5a5444;font-weight:700}
.sis-tableau .sis-discret{color:#a89d83}
.sis-legende{display:flex;gap:16px;flex-wrap:wrap;font-size:11px;color:#6e6857}
.sis-legende span{display:flex;align-items:center;gap:6px}
.sis-legende i{width:11px;height:11px;border-radius:3px;display:inline-block}

/* =====================================================================
   COMPOSANTS COMMUNS (suite) — activités avec globe 3D
   ===================================================================== */
/* En-tête du panneau blanc : titre de l'activité, bouton, consignes générales */
.eg-entete{padding:11px 18px;border-bottom:1px solid #e3dccc;flex:none}
.eg-entete-ligne{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:5px}
.eg-entete-titre{font-family:'Source Serif 4',Georgia,serif;font-weight:700;font-size:15px}
.eg-entete-consignes{font-size:11px;line-height:1.5;color:#6e6857}
.eg-encadre-expert{font-size:10.5px;line-height:1.4;color:#8a8270;margin-top:7px;padding:8px 11px;border:1px solid #e3dccc;border-radius:9px;background:#eef3f5}

/* Boutons supplémentaires */
.eg-btn-rouge{background:#c8492f;color:#fff}
.eg-btn-rouge:hover{background:#b33f27}
.eg-btn-mini{padding:7px 12px;font-size:12.5px;white-space:nowrap;flex:none}
.eg-btn:disabled{background:#c2bbab!important;color:#fff;cursor:not-allowed}
.eg-btn-icone{flex:none;border:1px solid #e3dccc;background:#fff;border-radius:8px;padding:7px 11px;font-size:13px;cursor:pointer;color:#5a5444;font-family:inherit}

/* Onglets en ligne avec une pastille de couleur (stations) — couleur active : --eg-accent */
.eg-onglet-ligne{flex-direction:row;justify-content:center;gap:6px;padding:7px 4px;font-size:12px;font-weight:600;border-radius:8px}
.eg-puce{width:9px;height:9px;border-radius:3px;flex:none;display:inline-block}

/* Encarts translucides posés sur le globe (panneau sombre) */
.eg-encart{position:absolute;background:rgba(8,12,24,.72);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:12px 14px;color:#e9eefb}
.eg-encart-titre{font-size:12px;font-weight:600;letter-spacing:.04em;color:#aab6d6;text-transform:uppercase;margin-bottom:6px}
.eg-encart-texte{font-size:11.5px;line-height:1.5;color:#9aa6c6}
.eg-encart-ligne{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.eg-encart-ligne:last-child{margin-bottom:0}
.eg-bouton-oeil{position:absolute;left:18px;bottom:16px;z-index:20;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:rgba(8,12,24,.72);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.12);border-radius:9px;color:#e9eefb;cursor:pointer}

/* Graphique qui occupe toute la hauteur disponible du panneau */
.eg-zone-graphique{flex:1;min-height:0;display:flex;justify-content:center;align-items:center;margin-top:8px}
.eg-zone-graphique canvas{height:100%;width:auto;max-width:100%;display:block;background:#fbf8f1;border:1px solid #ece5d5;border-radius:9px;touch-action:none;cursor:ew-resize}
.eg-pied{display:flex;align-items:center;gap:10px;flex:none;margin-top:8px}
.eg-pied-texte{font-size:12px;color:#5a5444;line-height:1.35;flex:1;min-width:0}
.eg-pied-texte b{color:#2a2722}

/* =====================================================================
   COMPOSANTS COMMUNS (v=4) — repères à cocher, tableau de nommage
   ===================================================================== */
/* Case à cocher d'un repère (Moho, LVZ…) ; couleur de la case : accent-color en ligne */
.eg-repere{display:flex;align-items:center;gap:9px;font-size:11.5px;color:#4a4636;cursor:pointer;margin-bottom:7px}
.eg-repere input{width:15px;height:15px;cursor:pointer;flex:none}
.eg-colonne-droite{width:215px;flex:none;border-left:1px solid #ece5d5;display:flex;flex-direction:column;padding:14px 16px;min-height:0;overflow-y:auto}
.eg-retour{font-size:11.5px;line-height:1.45;color:#5a5444;margin-top:10px}

/* Tableau de nommage : un groupe par ensemble, une ligne par sous-partie
   (colonnes : ensemble 33 % · sous-partie 38 % · rhéologie 29 %) */
.eg-nommage{display:flex;flex-direction:column;overflow-y:auto;min-height:0}
.eg-nommage-tete{display:flex;border-bottom:1px solid #ece5d5;padding-bottom:5px}
.eg-nommage-tete span{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#9a917c;padding:0 5px}
.eg-nommage-groupe{display:flex;border-top:1px solid #f0ebdf}
.eg-nommage-groupe:first-of-type{border-top:none}
.eg-col-ensemble{flex:0 0 33%;min-width:0}
.eg-col-partie{flex:0 0 38%;min-width:0}
.eg-col-rheo{flex:1 1 0;min-width:0}
.eg-nommage-ensemble{padding:6px 5px;display:flex;flex-direction:column;justify-content:center;border-right:1px solid #ece5d5;background:#fcfaf4}
.eg-nommage.verrouille .eg-nommage-ensemble{background:#f6f1e6}
.eg-nommage-ensemble .eg-champ-boite{flex:none}
.eg-nommage-profondeur{font-size:10px;color:#8a8270;margin-bottom:4px}
.eg-nommage-parties{flex:1;min-width:0;display:flex;flex-direction:column}
.eg-nommage-ligne{display:flex;align-items:center;border-top:1px solid #f0ebdf;flex:1}
.eg-nommage-ligne:first-of-type{border-top:none}
.eg-nommage-ligne > div{padding:6px 5px;display:flex;align-items:center;gap:5px}
.eg-nommage-aucune{font-size:11px;color:#a89f8a;font-style:italic}
/* Champ de réponse (liste ou texte) avec pastille ✓ / ✗ après vérification */
.eg-champ-boite{position:relative;flex:1;min-width:0;display:flex}
.eg-choix{flex:1;width:100%;min-width:0;padding:5px 26px 5px 7px;border:1px solid #d8cfba;border-radius:6px;font-size:11px;background-color:#fff;color:#23211c;font-family:inherit}
select.eg-choix{padding-right:42px;cursor:pointer}
.eg-choix:disabled{background-color:#f1ece1;cursor:default}
.eg-choix.juste{border-color:#3f7a4f}
.eg-choix.faux{border:1.5px solid #c8492f}
.eg-pastille{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;line-height:1;color:#fff;pointer-events:none}
select.eg-choix ~ .eg-pastille{right:24px}
.eg-pastille.juste{background:#3f7a4f}
.eg-pastille.faux{background:#c8492f}
.eg-definitions{margin-top:12px;background:#fbf8f1;border:1px solid #ece5d5;border-radius:9px;padding:10px 12px;font-size:11px;line-height:1.5;color:#5a5444}

/* =====================================================================
   LITHOSPHÈRE — légende et étiquettes du bloc 3D (panneau sombre)
   ===================================================================== */
.lit-legende{position:absolute;left:8px;right:8px;bottom:7px;background:rgba(8,12,24,.82);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:6px 9px;color:#e9eefb;display:flex;flex-wrap:wrap;align-items:center;gap:5px 12px}
.lit-legende-titre{font-size:8.5px;font-weight:700;letter-spacing:.05em;color:#aab6d6;text-transform:uppercase;flex-basis:100%}
.lit-legende-item{display:inline-flex;align-items:center;gap:6px;font-size:10px;line-height:1.1;font-weight:700;color:#fff}
.lit-legende-item i{width:16px;height:3px;border-radius:2px;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.lit-legende-item i.bloc{width:14px;height:10px}
.lit-etiquettes{position:absolute;inset:0;pointer-events:none;overflow:hidden}
/* Étiquette posée sur le bloc 3D : sa position est recalculée à chaque image (_projeterEtiquettes) */
.lit-etiquette{position:absolute;display:none;white-space:nowrap;width:max-content;line-height:1.12;text-align:center;font:700 10px Helvetica,Arial,sans-serif;letter-spacing:.01em;padding:2.5px 7px;border-radius:7px;color:#fff;box-shadow:0 1px 5px rgba(0,0,0,.45);transform:translate(-50%,-50%)}
.lit-etiquette.droite{transform:translate(9px,-50%);text-align:left}
.lit-etiquette.verticale{transform:translate(-50%,-50%) rotate(-90deg);letter-spacing:.06em;text-transform:uppercase;font-size:9.5px}
.eg-nommage-ligne .eg-col-partie{flex:0 0 56.7%}
/* Nommage en lignes simples (une carte par enveloppe : puce, profondeurs, nom, rhéologie) */
.eg-nommage-carte{display:flex;align-items:center;gap:6px;border:1px solid #ece5d5;border-radius:8px;padding:5px 7px;background:#fffdf8}
.eg-nommage-carte.verrouille{background:#f6f1e6}
.eg-nommage-carte .eg-choix{font-size:12px;padding-top:6px;padding-bottom:6px}

/* =====================================================================
   DENSITÉ ET ISOSTASIE — paillasse (balance, éprouvette), tableau, calculatrice
   ===================================================================== */
.den-btn-sombre{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#e9eefb;border-radius:8px;padding:7px 12px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
.den-zone-titre{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#aab6d6}
/* Balance */
.den-balance-zone{flex:1;min-width:0;border:1.5px dashed rgba(255,255,255,.22);border-radius:12px;background:rgba(255,255,255,.04);padding:14px;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;text-align:center}
.den-plateau{width:110px;height:26px;border-radius:4px;background:linear-gradient(180deg,#e8ecef,#b9c1c8);border:1px solid #8b939a;box-shadow:0 2px 4px rgba(0,0,0,.3)}
.den-roche-plateau{position:absolute;bottom:22px;width:72px;height:72px;background-size:contain;background-repeat:no-repeat;background-position:center;filter:drop-shadow(0 6px 10px rgba(0,0,0,.5));cursor:pointer}
.den-balance-corps{width:128px;margin-top:-2px;background:linear-gradient(180deg,#f2f3f5,#cfd3d8);border:1px solid #9aa1a8;border-radius:0 0 10px 10px;padding:8px 8px 10px;display:flex;flex-direction:column;gap:8px;box-shadow:0 6px 14px rgba(0,0,0,.35)}
.den-ecran{background:#0d2436;border:1px solid #04121c;border-radius:4px;padding:6px 8px;min-height:28px;box-sizing:content-box;display:flex;align-items:baseline;justify-content:center;font-family:'Source Serif 4',Georgia,serif;font-weight:700;font-size:20px;color:#8fe0ff;letter-spacing:.02em}
.den-touche-balance{flex:1;background:#e2e5e8;border:1px solid #9aa1a8;border-radius:3px;font-size:7px;font-weight:700;color:#5a6067;padding:4px 2px;text-align:center;font-family:inherit;cursor:pointer}
.den-touche-balance.tare{background:#c8492f;border-color:#8a2f1c;font-size:8px;color:#fff}
/* Éprouvette */
.den-eprouvette-zone{flex:1;min-width:0;border:1.5px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(255,255,255,.03);padding:14px;display:flex;flex-direction:column}
.den-eprouvette-bord{width:72px;height:10px;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#d7ecf2,#a9d4e0);border:1px solid rgba(255,255,255,.4)}
.den-eprouvette{width:56px;height:260px;border:2px solid rgba(200,235,245,.55);border-top:none;border-radius:0 0 4px 4px;position:relative;display:flex;align-items:flex-end;overflow:hidden;background:linear-gradient(90deg,rgba(255,255,255,.12),rgba(255,255,255,.02) 40%,rgba(255,255,255,.12))}
.den-eprouvette-pied{width:92px;height:12px;border-radius:50%;background:linear-gradient(180deg,#cfe8f0,#8fbdcc);border:1px solid rgba(255,255,255,.3);margin-top:-2px}
.den-eau{width:100%;background:linear-gradient(180deg,#6fc2ea,#2f6f8f);transition:height .3s;position:relative}
.den-roche-eprouvette{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);width:40px;height:40px;background-size:contain;background-repeat:no-repeat;background-position:center;filter:drop-shadow(0 3px 6px rgba(0,0,0,.4));pointer-events:none;z-index:2}
.den-grad{position:absolute;left:0;width:24%;height:1px;background:rgba(20,40,50,.3)}
.den-grad.majeure{width:46%;height:2px;background:rgba(20,40,50,.55)}
.den-grad-texte{position:absolute;right:4%;font-size:7px;color:rgba(20,40,50,.6);font-weight:700;transform:translateY(6px)}
.den-consigne-sombre{margin-bottom:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#e9eefb;border-radius:8px;padding:9px;font-size:12px;font-weight:600;text-align:center}
.den-erreur-sombre{margin-bottom:10px;background:rgba(200,73,47,.18);border:1px solid rgba(200,73,47,.4);color:#ffd9cc;border-radius:8px;padding:9px;font-size:12px;font-weight:600;text-align:center;display:flex;flex-direction:column;gap:8px}
/* Tableau des densités */
.den-tableau{border:1px solid #e3dccc;border-radius:10px;overflow:hidden}
.den-ligne{display:grid;grid-template-columns:1.2fr .8fr .8fr minmax(0,1fr) .7fr;border-top:1px solid #ece5d5;align-items:center;font-size:12px}
.den-ligne > div{padding:8px 10px;color:#5a5444}
.den-ligne.tete{border-top:none;background:#efe8d8;font-size:10.5px;font-weight:700;color:#6e6857;text-transform:uppercase;letter-spacing:.03em}
.den-ligne .nom{font-weight:600;color:#3a3728}
.den-champ{width:100%;min-width:0;box-sizing:border-box;padding:6px 8px;border:1px solid #d8cfba;border-radius:6px;font-size:12px;font-family:inherit;background:#fff;color:#23211c}
.den-champ:disabled{border-color:#ece5d5;background:#f4efe6}
.den-valider{width:100%;background:#2f6f8f;color:#fff;border:none;border-radius:6px;padding:7px 4px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit}
.den-valider:disabled{background:#e3dccc;color:#9a917c;cursor:default}
.den-valider.fait{background:#3f7a4f;color:#fff}
.den-retour{padding:0 10px 8px;font-size:11px;color:#8a4f2f}
/* Parcours (lot 6) : boutons au-dessus de la liste des roches */
.den-parcours{flex:none;display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:10px 16px 0}
.den-parcours-titre{font-size:10px;font-weight:700;color:#8a8270;text-transform:uppercase;letter-spacing:.05em;margin-right:4px}
.den-parcours-btn{background:#fff;border:1px solid #d8cfba;border-radius:16px;padding:5px 12px;font-size:11.5px;font-weight:600;color:#5a5444;cursor:pointer;font-family:inherit}
.den-parcours-btn.actif{background:#1c3d5a;border-color:#1c3d5a;color:#fff}
/* Rappel des minéraux sous une roche validée : foncés = denses */
.den-mineraux{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:0 10px 9px}
.den-mineraux-titre{font-size:9.5px;font-weight:700;color:#a89d83;text-transform:uppercase;margin-right:2px}
.den-min{display:inline-flex;align-items:center;gap:4px;border-radius:10px;padding:2px 8px;font-size:10.5px;background:#efe8d8;color:#5a5444;border:1px solid #e3dccc}
.den-min b{font-weight:700}
.den-min.leger{background:#fbf8f0}
.den-min.lourd{background:#3a3d36;border-color:#3a3d36;color:#fff}
/* Parcours Subduction, étape 2 */
.den-roches-boutons{display:flex;flex-wrap:wrap;gap:5px}
.den-roche-btn{background:#fff;border:1px solid #d8cfba;border-radius:7px;padding:5px 9px;font-size:11px;font-weight:600;color:#3a3728;cursor:pointer;font-family:inherit}
.den-roche-btn:disabled{color:#b3a98f;border-style:dashed;cursor:default}
.den-roche-btn.actif{background:#2f6f8f;border-color:#2f6f8f;color:#fff}
.den-sub-bilan{display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:#5a5444}
.den-sub-etat{margin-top:4px;font-weight:700;color:#3f7a4f}
.den-sub-etat.plonge{color:#c8492f}
/* Parcours Subduction, bilan : colonnes de densité (2,6 → 3,6 sur 230 px) */
.den-sub-graphe{position:relative;height:230px;display:flex;align-items:flex-end;gap:14px;padding:0 12px;border-bottom:1.5px solid #8a8270;background:repeating-linear-gradient(0deg,#f6f1e4 0,#f6f1e4 45px,#ece5d5 45px,#ece5d5 46px);border-radius:10px 10px 0 0}
.den-sub-col{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative;z-index:1}
.den-sub-valeur{font-size:12px;font-weight:700;color:#23211c;margin-bottom:3px}
.den-sub-barre{width:62%;max-width:70px;border-radius:4px 4px 0 0;border:1px solid rgba(35,33,28,.35);border-bottom:none}
.den-sub-astheno{position:absolute;left:0;right:0;border-top:2px solid #c8492f;z-index:2;pointer-events:none}
.den-sub-astheno span{position:absolute;left:8px;top:-17px;font-size:10.5px;font-weight:700;color:#c8492f;background:#fffdf8;padding:0 5px;border-radius:4px}
.den-sub-noms{display:flex;gap:14px;padding:0 12px;margin-top:-12px}
.den-sub-nom{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.den-sub-nom-roche{font-size:11.5px;font-weight:700;color:#3a3728;line-height:1.25;min-height:29px}
.den-sub-nom .den-min{font-size:10px;padding:1px 7px}
/* Calculatrice */
.den-calc{border:1px solid #e3dccc;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:5px}
.den-calc-ecran{background:#20242c;border-radius:6px;padding:6px 8px;text-align:right}
.den-calc-expr{font-size:9px;color:#8a94b6;min-height:11px;overflow:hidden;white-space:nowrap}
.den-calc-val{font-family:'Source Serif 4',Georgia,serif;font-size:16px;font-weight:700;color:#fff;min-height:20px;overflow:hidden;white-space:nowrap}
.den-calc-touches{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.den-calc-touches button{background:#2c313c;color:#fff;border:none;border-radius:5px;padding:5px 0;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit}
.den-calc-touches .op{background:#3a4457;font-weight:700}
.den-calc-touches .fn{background:#8a4f2f;font-size:10px;font-weight:700}
.den-calc-touches .egal{background:#2f6f8f;font-weight:700}
/* Isostasie */
.den-carte{border:1px solid #e3dccc;border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:10px}
.den-carte-titre{font-size:12px;font-weight:700;color:#1c3d5a}
.den-reglage{display:flex;flex-direction:column;gap:4px}
.den-reglage span{font-size:11px;color:#6e6857}

/* =====================================================================
   ROCHES — sous-onglets du schéma bilan
   ===================================================================== */
.roc-onglet{flex:none;border:1px solid #e3dccc;background:#fff;color:#5a5444;border-radius:8px;padding:8px 12px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap}
.roc-onglet.actif{border-color:#2f6f8f;background:#2f6f8f;color:#fff}
.roc-onglet.petit{padding:7px 12px;font-size:11.5px}
/* Étape 4 : diagramme IUGS en grand (panneau sombre) et rappel des familles (panneau blanc) */
.roc-iugs{display:block;border:1px solid #ece5d5;border-radius:10px;overflow:hidden;background:#fff;cursor:zoom-in}
.roc-iugs img{width:100%;height:auto;display:block}
/* Fiche de la famille touchée, en bas du panneau sombre */
.roc-famille-carte{position:absolute;left:28px;right:28px;bottom:26px;z-index:5;background:#fffdf8;border:1.5px solid #a8632f;border-radius:12px;padding:12px 40px 12px 14px;box-shadow:0 10px 26px rgba(0,0,0,.35)}
.roc-famille-fermer{position:absolute;top:8px;right:8px;width:26px;height:26px;border:1px solid #e3dccc;border-radius:7px;background:#fff;color:#8a8270;cursor:pointer;font-size:12px}
.roc-famille-nom{font-size:11px;font-weight:700;color:#a8632f;text-transform:uppercase;letter-spacing:.03em}
.roc-famille-roches{font-size:12.5px;font-weight:600;color:#2a2722;margin-top:3px}
.roc-famille-mineraux{font-size:11px;color:#6e6857;margin-top:2px}
/* =====================================================================
   COMMUN À ROCHES ET MÉTAMORPHISME — champs d'observation, lame mince, fiche minéraux
   ===================================================================== */
.eg-obs-titre{font-size:11px;font-weight:700;color:#6e6857}
.eg-obs-champ{width:100%;padding:8px 30px 8px 10px;border:1px solid #d8cfba;border-radius:7px;font-size:12px;font-family:inherit;background-color:#fff;color:#23211c}
.eg-obs-case{display:flex;align-items:center;gap:8px;font-size:11.5px;color:#4a4636;cursor:pointer}
.eg-obs-case input{width:14px;height:14px;cursor:pointer;flex:none}
/* Boutons LPNA / LPA (panneau sombre) */
.eg-lame-mode{flex:1;border:1px solid rgba(255,255,255,.18);cursor:pointer;padding:8px 10px;border-radius:7px;font-size:12px;font-weight:600;font-family:inherit;background:rgba(255,255,255,.06);color:#f2f5ff}
.eg-lame-mode.actif{border-color:#ff7a5a;background:rgba(255,90,50,.22)}
.eg-lame-credit{position:absolute;top:8px;right:10px;z-index:5;font-size:10.5px;color:#e9eefb;font-style:italic;background:rgba(8,12,24,.55);padding:3px 8px;border-radius:6px;backdrop-filter:blur(2px)}
.eg-bouton-fiche{position:absolute;right:18px;bottom:16px;z-index:20;display:flex;align-items:center;gap:6px;background:rgba(8,12,24,.72);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.12);border-radius:9px;padding:9px 13px;color:#e9eefb;font-size:11.5px;font-weight:600;cursor:pointer;font-family:inherit}
/* Fiche minéraux */
.eg-fiche{background:#fffdf8;border-radius:16px;width:100%;max-width:900px;max-height:90vh;overflow-y:auto;box-shadow:0 26px 70px rgba(0,0,0,.36);border:1px solid #e3dccc}
.eg-fiche-btn{flex:none;width:34px;height:34px;border:1px solid #e3dccc;background:#fff;border-radius:8px;cursor:pointer;font-size:16px;color:#5a5444}
.eg-fiche-col{display:flex;flex-direction:column;gap:6px}
.eg-fiche-titre{font-weight:700;color:#8a8270;text-transform:uppercase;font-size:10px}
.eg-fiche-photo{width:100%;height:170px;border-radius:8px;background:#efe8d8;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.eg-fiche-photo span{font-size:10.5px;color:#a89d83;position:absolute}
.eg-fiche-img{width:100%;height:100%;background-size:cover;background-position:center;position:relative}
.eg-fiche-texte{color:#4a4636;font-size:12.5px;line-height:1.55;margin-top:4px}
.eg-fiche-point{width:8px;height:8px;border-radius:50%;border:none;padding:0;cursor:pointer;background:#e3dccc}
.eg-fiche-point.actif{background:#2f6f8f}

/* =====================================================================
   MÉTAMORPHISME — lignes « absent / hérité / apparu » de la lame mince, étapes en préparation
   ===================================================================== */
.met-mineraux{display:flex;flex-direction:column;gap:6px}
.met-ligne-mineral{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:10px;align-items:center;font-size:11.5px;color:#4a4636}
.met-ligne-mineral .eg-obs-champ{padding-top:6px;padding-bottom:6px;font-size:11.5px}
.met-a-venir{border:1.5px dashed #d8cfba;border-radius:10px;padding:14px 16px;background:#fbf8f1}
.met-a-venir-titre{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#a89d83;margin-bottom:6px}
.met-a-venir p{font-size:12.5px;line-height:1.55;color:#5a5444;margin:0}
/* Étape 3 : réaction « Réactifs → Produits » et réserve d'étiquettes */
.met-reaction{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:stretch}
.met-zone{border:1.5px dashed #cfc5ad;border-radius:10px;padding:8px;min-height:96px;background:#fbf8f1;display:flex;flex-direction:column;gap:6px;transition:border-color .12s,background .12s}
.met-zone.cible{border-color:#2f6f8f;background:#eef5f8;cursor:pointer}
.met-zone-titre{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#8a8270}
.met-zone-etiquettes{display:flex;flex-wrap:wrap;gap:6px}
.met-fleche{align-self:center;font-size:22px;font-weight:700;color:#8a8270}
.met-banque{display:flex;flex-wrap:wrap;gap:6px;padding:8px;border:1px solid #ece5d5;border-radius:10px;background:#fff}
.met-etiquette{display:inline-flex;align-items:center;border:1px solid #d8cfba;background:#fff;color:#2a2722;border-radius:999px;padding:6px 11px;font-size:12px;font-weight:600;font-family:inherit;line-height:1.2;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none}
.met-etiquette.eau{border-color:#9cc3d8;background:#e9f3f8;color:#1c3d5a}
.met-etiquette.choisie{border-color:#c8492f;box-shadow:0 0 0 2px rgba(200,73,47,.22)}
.met-etiquette.placee{cursor:pointer}
.met-etiquette.fantome{position:fixed;z-index:9999;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 8px 20px rgba(0,0,0,.22)}
/* Étape 4 : diagramme P-T (canvas dans le panneau sombre) et liste des roches à placer */
/* Placer des roches sur un schéma (classes communes : diagramme P-T du Métamorphisme, schéma bilan de Roches) */
.eg-placer-cadre{position:absolute;inset:14px;border-radius:12px;overflow:hidden;background:#fffef9}
.eg-placer-canvas{width:100%;height:100%;display:block;touch-action:none;cursor:default}
.eg-placer-canvas.viser{cursor:crosshair}
.eg-placer-canvas.choisir{cursor:pointer}
.eg-placer-canvas.relier{cursor:pointer}
.eg-placer-roches{display:flex;flex-direction:column;gap:6px}
.eg-placer-roche{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:1px solid #e3dccc;background:#fff;border-radius:9px;padding:8px 10px;font-size:12px;font-weight:600;color:#2a2722;font-family:inherit;cursor:pointer}
.eg-placer-roche{touch-action:none;user-select:none;-webkit-user-select:none}
.eg-placer-fantome{position:fixed;z-index:9999;transform:translate(-50%,-50%);pointer-events:none;width:26px;height:26px;border-radius:50%;border:2px solid #fff;box-shadow:0 6px 16px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:700}
.eg-placer-roche.choisie{border-color:#c8492f;box-shadow:0 0 0 2px rgba(200,73,47,.18)}
.eg-placer-pastille{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #cfc5ad;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:9.5px;font-weight:700}
.eg-placer-etat{margin-left:auto;font-size:11px;font-weight:600;color:#a89d83}
.eg-placer-roche.posee .eg-placer-etat{color:#3f7a4f}
.eg-placer-roche.fausse .eg-placer-etat{color:#c8492f}
.met-pt-bouton{padding:9px 12px;font-size:12px}
.met-pt-trajet{font-size:12px;color:#5a5444;line-height:1.5;padding:6px 10px;border-radius:8px;background:#fbf8f1;border:1px solid #ece5d5}
/* Au doigt (écran tactile) ou sur petit écran : étiquettes plus grandes, faciles à attraper (44 px de haut) */
@media (pointer:coarse), (max-width:820px){
  .met-etiquette{min-height:44px;padding:10px 15px;font-size:13.5px}
  .met-zone{min-height:116px}
  .met-banque{gap:8px}
}
/* Densité — bilan Airy / Pratt (colonnes placées en %, hauteurs en px données par le script) */
.den-modele-titre{text-align:center;font-family:'Source Serif 4',Georgia,serif;font-weight:700;font-size:15px;color:#a8632f}
.den-schema{position:relative;height:260px;border-radius:10px;background:#f6f1e4;border:1px solid #ece5d5}
.den-tiret{position:absolute;left:0;right:0;border-top:1.5px dashed #6e6857}
.den-tiret-texte{position:absolute;font-size:9px;color:#6e6857;background:#f6f1e4;padding:0 4px}
.den-col{position:absolute;top:0;height:100%}
.den-airy-haut,.den-airy-bas{position:absolute;left:14%;right:14%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;border:1px solid rgba(35,33,28,.35)}
.den-airy-haut{background:#ecd28a;color:#7a5a1e}
.den-airy-bas{background:#a9cdb0;color:#33502f;border-top:none}
.den-pratt-barre{position:absolute;left:14%;right:14%;bottom:0;border:1px solid rgba(35,33,28,.35);border-radius:2px 2px 0 0}
.den-pratt-texte{position:absolute;left:0;right:0;bottom:-18px;text-align:center;font-size:10px;font-weight:700;color:#5a5444}

/* =====================================================================
   PAGE D'ACCUEIL (EduGlob.dc.html) — menu latéral, boutons du haut, accueil
   ===================================================================== */
.acc-nav{position:relative;z-index:41;flex:none;width:112px;background:#fffdf8;border-right:1px solid #e3dccc;display:flex;flex-direction:column;align-items:stretch;padding:12px 9px;gap:7px}
.acc-burger{display:none;margin-left:auto;width:42px;height:42px;flex:none;border:1px solid #e3dccc;background:#fffdf8;border-radius:10px;cursor:pointer;align-items:center;justify-content:center;color:#1c1a15;font-size:20px;line-height:1}
/* Boutons des activités : titre sur deux lignes au plus ; numéro dans une bulle à cheval
   sur le coin haut gauche (rouge pour l'activité ouverte, aux couleurs du logo) */
.acc-onglet{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;border:none;cursor:pointer;padding:11px 3px 6px;border-radius:10px;font-family:inherit;background:#efe8d8;color:#4f4a3c}
.acc-onglet.actif{background:#2f6f8f;color:#fff}
.acc-onglet span{font-size:10.5px;font-weight:600;line-height:1.2;text-align:center;text-wrap:balance}
.acc-onglet b{position:absolute;top:-7px;left:-7px;width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;line-height:1;background:#fffdf8;color:#1c3d5a;border:1.5px solid #d8cfba;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.acc-onglet.actif b{background:#c8492f;color:#fff;border-color:#c8492f}
/* Activité en préparation : bouton en pointillés, bulle grise, écran d'attente */
.acc-onglet.bientot{background:transparent;border:1.5px dashed #d8cfba;color:#a89d83}
.acc-onglet.bientot b{background:#efe8d8;color:#a89d83;border-color:#d8cfba}
.acc-onglet.bientot.actif{background:#eaf2f6;border-color:#2f6f8f;color:#2f6f8f}
.acc-onglet.bientot.actif b{background:#c8492f;color:#fff;border-color:#c8492f}
.acc-bientot-titre{margin-top:6px;padding:5px 12px;border-radius:999px;background:#efe8d8;color:#6e6857;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
/* Ordinateur à écran peu haut : le menu défile plutôt que de déborder
   (la marge de 9 px à gauche du menu garde la bulle visible) */
@media (min-width:821px){ .acc-nav{overflow-y:auto} .acc-nav [data-resp="tabwrap"]{gap:8px!important;padding-top:4px} }
/* Mobile (menu déroulant en lignes) : la bulle devient une puce ronde à gauche du titre, sur une ligne */
@media (max-width:820px){
  .acc-onglet{min-height:0;padding:10px 12px}
  .acc-onglet b{position:static;flex:none}
  .acc-onglet span{font-size:12.5px;text-align:left}
}
.acc-expert{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;border:1px solid #e3dccc;cursor:pointer;padding:8px 4px;border-radius:10px;font-family:inherit;background:#fffdf8;margin-top:4px}
.acc-interrupteur{position:relative;display:block;width:34px;height:19px;border-radius:10px;background:#cfc7b5;flex:none;transition:background .15s}
.acc-bouton-rond{position:absolute;top:3px;left:3px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:left .15s;display:block}
.acc-expert-texte{font-size:9px;font-weight:700;letter-spacing:.02em;line-height:1.15;text-align:center;color:#8a8270}
.acc-expert.actif{border-color:#2f6f8f;background:#eaf2f6}
.acc-expert.actif .acc-interrupteur{background:#2f6f8f}
.acc-expert.actif .acc-bouton-rond{left:18px}
.acc-expert.actif .acc-expert-texte{color:#2f6f8f}
.acc-copyright{margin-top:auto;text-align:center;font-size:8px;color:#bcb39f;line-height:1.35;padding-top:10px;letter-spacing:.03em}
.acc-outils{position:absolute;top:9px;right:12px;z-index:60;display:flex;align-items:center;gap:8px}
.acc-mode{padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:#efe8d8;color:#6e6857;border:1px solid #e3dccc}
.acc-mode.expert{background:#1c3d5a;color:#fff;border-color:#1c3d5a}
.acc-outil{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:1px solid #e3dccc;background:#fffdf8;border-radius:9px;cursor:pointer;color:#1c3d5a;box-shadow:0 1px 3px rgba(0,0,0,.10);line-height:1;transition:background .12s,color .12s,border-color .12s}
.acc-outil.actif{border-color:#1c3d5a;background:#1c3d5a;color:#fffdf8}
.acc-outil svg{display:block;transition:transform .15s}
.acc-outil.retourne svg{transform:rotate(180deg)}
.acc-ecran{flex:1;min-width:0;min-height:0}
.acc-accueil{flex:1;min-width:0;min-height:0;overflow-y:auto;background:radial-gradient(circle at 50% 26%,#fffdf8,#f1e9d8 78%)}
.acc-accueil-centre{max-width:940px;margin:0 auto;padding:48px 32px 40px;display:flex;flex-direction:column;align-items:center;text-align:center}
.acc-accueil-logo{width:100%;max-width:288px;height:auto;display:block;margin-bottom:10px;border-radius:18px;box-shadow:0 14px 38px rgba(28,61,90,.14)}
.acc-accueil h1{font-family:'Source Serif 4',Georgia,serif;font-weight:700;font-size:27px;line-height:1.25;color:#1c3d5a;margin:18px 0 0;max-width:680px;text-wrap:balance}
.acc-accueil p{font-size:15px;line-height:1.6;color:#6e6857;margin:14px 0 0;max-width:620px;text-wrap:pretty}
.acc-signature{margin-top:22px;padding-top:18px;border-top:1px solid #e3dccc;width:100%;max-width:560px;font-size:12.5px;color:#8a8270;letter-spacing:.02em;display:flex;align-items:center;justify-content:center;gap:7px}
.acc-signature a{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;color:#8a8270}

/* ===== Page enseignant (Enseignant.dc.html) — préfixe ens- ===== */
.ens-page{position:relative;width:100%;min-height:100vh;background:#f4efe6;color:#23211c;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;display:flex;justify-content:center;padding:40px 20px 60px}
.ens-colonne{width:100%;max-width:760px}
/* Page déverrouillée : une seule page sans défilement — barre, sommaire à gauche, panneau à droite */
.ens-page.ouverte{display:block;padding:0;height:100vh;height:100dvh;min-height:0;overflow:hidden}
.ens-app{display:flex;flex-direction:column;height:100%}
.ens-barre{flex:none;display:flex;align-items:center;gap:18px;padding:10px 22px;background:#fffdf8;border-bottom:1px solid #e3dccc}
.ens-barre .ens-titre{flex:1;font-size:19px}
.ens-page .ens-barre a.ens-retour{margin-bottom:0}
.ens-corps{flex:1;min-height:0;display:flex}
.ens-sommaire{flex:none;width:236px;overflow-y:auto;padding:12px 10px;background:#f9f5ec;border-right:1px solid #e3dccc}
.ens-sommaire-groupe{margin-bottom:10px}
.ens-sommaire-titre{display:flex;align-items:center;gap:8px;padding:4px 8px 3px;font-size:12.5px;font-weight:700;color:#1c3d5a}
.ens-sommaire-titre b{flex:none;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#c8492f;color:#fff;font-size:10.5px;display:inline-flex;align-items:center;justify-content:center}
.ens-sommaire-titre b.vide{background:#8a8270}
.ens-sommaire-lien{display:block;width:100%;text-align:left;background:none;border:none;border-radius:7px;padding:5px 8px 5px 36px;font-size:12px;font-family:inherit;color:#5a5444;cursor:pointer}
.ens-sommaire-lien:hover{background:#efe8d8}
.ens-sommaire-lien.actif{background:#1c3d5a;color:#fff;font-weight:600}
.ens-panneau{flex:1;min-width:0;overflow:auto;padding:18px 24px}
.ens-panneau .ens-carte{margin-bottom:0;max-width:1040px}
.ens-fil{font-size:10.5px;font-weight:700;color:#8a8270;text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px}
.ens-compte{font-weight:400;color:#a89d83;margin-left:6px}
.ens-reinit-ligne{background:none;border:none;color:#b3a98f;font-size:10px;font-family:inherit;cursor:pointer;text-decoration:underline}
.ens-ligne-etat{font-size:9.5px;font-weight:400;color:#b3a98f}
.ens-ligne-etat.modifie{color:#c8492f;font-weight:600}
@media (max-width:760px){
  .ens-page.ouverte{height:auto;overflow:visible}
  .ens-corps{flex-direction:column}
  .ens-sommaire{width:auto;border-right:none;border-bottom:1px solid #e3dccc}
  .ens-panneau{overflow:visible;padding:14px 12px}
  .ens-panneau .ens-carte{overflow-x:auto}
}
.ens-page a{color:#2f6f8f;text-decoration:none}
.ens-page a:hover{color:#1c3d5a}
.ens-page a.ens-retour{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#8a8270;margin-bottom:18px}
/* écran verrouillé */
.ens-verrou{background:#fffdf8;border:1px solid #e3dccc;border-radius:14px;padding:28px;text-align:center}
.ens-verrou-titre{font-family:'Source Serif 4',Georgia,serif;font-weight:700;font-size:19px;margin-bottom:8px}
.ens-verrou-texte{font-size:13px;color:#8a8270;margin-bottom:16px}
.ens-verrou-ligne{display:flex;gap:8px;justify-content:center;max-width:280px;margin:0 auto}
.ens-verrou-ligne input{flex:1;min-width:0;border:1px solid #e3dccc;border-radius:8px;padding:10px 12px;font-size:13px;font-family:inherit;background:#fff}
.ens-verrou-ligne button{flex:none;background:#1c3d5a;color:#fff;border:none;border-radius:8px;padding:0 16px;font-size:13px;font-weight:600;cursor:pointer}
.ens-verrou-erreur{font-size:12px;color:#c8492f;margin-top:10px}
/* en-tête */
.ens-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:4px}
.ens-titre{font-family:'Source Serif 4',Georgia,serif;font-weight:700;font-size:24px;color:#1c3d5a}
.ens-deconnexion{flex:none;background:none;border:1px solid #e3dccc;border-radius:8px;padding:7px 13px;font-size:12px;font-weight:600;color:#c8492f;cursor:pointer}
.ens-intro{font-size:13px;color:#8a8270;margin-bottom:26px;line-height:1.5}
/* cartes */
.ens-carte{background:#fffdf8;border:1px solid #e3dccc;border-radius:14px;padding:20px 22px;margin-bottom:16px}
.ens-carte.defile{overflow-x:auto}
.ens-carte.derniere{margin-bottom:0}
.ens-carte-titre{font-size:14px;font-weight:700;margin-bottom:3px}
.ens-carte-titre.espace{margin-bottom:8px}
.ens-carte-texte{font-size:11.5px;color:#8a8270;margin-bottom:14px;line-height:1.5}
.ens-carte-texte.court{margin-bottom:12px}
.ens-carte-info{font-size:12px;color:#5a5444;line-height:1.6}
/* Carte « Modèles 3D » : nom de la roche · lien Sketchfab · état */
.ens-modele{display:grid;grid-template-columns:150px 1fr 130px;gap:10px;align-items:center;padding:6px 0;border-top:1px solid #ece5d5}
.ens-modele:first-of-type{border-top:none}
.ens-modele-nom{font-size:12.5px;font-weight:600;color:#4a4636}
.ens-modele input{min-width:0;border:1px solid #d8cfba;border-radius:7px;padding:7px 9px;font-size:12px;font-family:inherit;background:#fff}
.ens-modele-etat{font-size:11px;color:#a89d83}
.ens-modele-etat.ok{color:#3f7a4f;font-weight:600}
.ens-modele-etat.erreur{color:#c8492f;font-weight:600}
@media (max-width:620px){ .ens-modele{grid-template-columns:1fr} }
.ens-grille4{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:12px}
.ens-grille4.photos{gap:14px}
.ens-grille3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.ens-grille2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* seuils de notation */
.ens-seuil{display:flex;flex-direction:column;gap:4px}
.ens-seuil span{font-size:11px;color:#6e6857}
.ens-seuil input{border:1px solid #d8cfba;border-radius:7px;padding:7px 9px;font-size:13px;font-family:inherit}
.ens-reinit{margin-top:12px;background:none;border:1px solid #e3dccc;border-radius:8px;padding:7px 13px;font-size:11.5px;font-weight:600;color:#5a5444;cursor:pointer}
/* tableau minéraux × roches */
.ens-tableau{border-collapse:collapse;width:100%;font-size:11.5px}
.ens-tableau th{text-align:center;padding:6px 4px;color:#4a4636;font-weight:700;font-size:10.5px;line-height:1.2;vertical-align:bottom}
.ens-tableau th:first-child{text-align:left;color:#8a8270;font-size:10.5px;text-transform:uppercase}
.ens-tableau th button{margin-top:3px;background:none;border:none;color:#b3a98f;font-size:9.5px;cursor:pointer;text-decoration:underline}
.ens-tableau tbody tr{border-top:1px solid #ece5d5}
.ens-tableau td{text-align:center;padding:5px}
.ens-tableau td:first-child{text-align:left;padding:6px 8px;color:#4a4636;font-weight:600;white-space:nowrap}
.ens-tableau td{padding:4px 3px}
.ens-statut{width:100%;border:1px solid #e3dccc;border-radius:6px;padding:5px 8px;font-size:10.5px;font-weight:600;font-family:inherit;cursor:pointer;background:#fff;color:#c2bbab}
.ens-statut.oblig{background:#2f6f8f;border-color:#2f6f8f;color:#fff}
.ens-statut.acc{background:#efe8d8;border-color:#efe8d8;color:#6e6857}
.ens-statut.herite{background:#2f6f8f;border-color:#2f6f8f;color:#fff}
.ens-statut.apparu{background:#4f8f45;border-color:#4f8f45;color:#fff}
.ens-statut{padding:5px 3px}
/* dépôt de photos */
.ens-defileur{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.ens-defileur button{flex:none;width:32px;height:32px;border:1px solid #e3dccc;background:#fff;border-radius:8px;cursor:pointer;font-size:15px;color:#5a5444}
.ens-defileur div{font-size:12.5px;font-weight:700;color:#2a2722}
.ens-groupe{margin-bottom:16px}
.ens-groupe-nom{font-size:12.5px;font-weight:700;color:#2a2722;margin-bottom:8px}
.ens-photo{display:flex;flex-direction:column;gap:6px}
label.ens-photo{cursor:pointer}
.ens-photo-nom{font-size:10px;font-weight:700;color:#8a8270;text-transform:uppercase}
.ens-photo-cadre{width:100%;height:130px;border-radius:8px;background:#efe8d8;border:1px dashed #c7bfae;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.ens-photo-cadre span{font-size:10px;color:#a89d83;position:absolute;text-align:center;padding:0 8px}
/* photo en arrière-plan : si elle n'existe pas encore, on voit « Aucune photo » au lieu d'une icône d'image cassée */
.ens-photo-img{position:absolute;inset:0;background-position:center;background-repeat:no-repeat;background-size:cover}
.ens-photo-img.entiere{background-size:contain}
.ens-photo input[type=file]{font-size:10.5px}
.ens-photo input[type=text]{border:1px solid #d8cfba;border-radius:6px;padding:6px 8px;font-size:11px;font-family:inherit}
/* code d'accès */
.ens-pin{display:flex;gap:8px;max-width:320px}
.ens-pin input{flex:1;min-width:0;border:1px solid #d8cfba;border-radius:7px;padding:9px 11px;font-size:13px;font-family:inherit}
.ens-pin button{flex:none;background:#efe8d8;border:1px solid #e3dccc;border-radius:8px;padding:0 16px;font-size:12.5px;font-weight:600;color:#5a5444;cursor:pointer}