/* ==========================================================================
   FEUILLE DE STYLE — tout est en "placeholder" : formes plates, couleurs
   générées, texte = nom du futur fichier d'illustration.
   ========================================================================== */
:root{
  --fond: #eef1f7;
  --panneau: #ffffff;
  --texte: #2b2f3a;
  --accent: #4a63e7;
  --danger: #e05252;
  --succes: #2fb380;
  --or: #e0a83a;
  --gris: #9aa1ad;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;
  font-family:'Baloo 2','Trebuchet MS','Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--fond);color:var(--texte);}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3{margin:0.2em 0;}

/* ---------- écrans ---------- */
#ecran-menu, #ecran-jeu{display:none;min-height:100vh;flex-direction:column;}
#ecran-menu.actif, #ecran-jeu.actif{display:flex;}

/* ---------- menu ---------- */
.entete-menu{padding:20px 24px;background:var(--accent);color:#fff;}
.entete-menu p{opacity:.9;margin-top:4px;font-size:14px;}
#liste-niveaux{padding:16px 24px 60px;max-width:900px;margin:0 auto;width:100%;}
.titre-palier{margin-top:22px;margin-bottom:6px;color:var(--accent);border-bottom:2px solid #dfe3ee;padding-bottom:4px;}
.carte-niveau{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:var(--panneau);border:2px solid #dfe3ee;border-radius:14px;
  padding:10px 14px;margin-bottom:8px;font-size:15px;transition:transform .1s;
}
.carte-niveau:not(.verrouille):hover{transform:translateY(-2px);border-color:var(--accent);}
.carte-niveau.verrouille{opacity:.45;cursor:not-allowed;}
.carte-niveau.termine{border-color:var(--succes);}
.num-niveau{background:var(--accent);color:#fff;border-radius:50%;width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;}
.carte-niveau.termine .num-niveau{background:var(--succes);}
.titre-niveau{flex:1;}
.mode-niveau{font-size:12px;color:var(--gris);}
.etoiles-niveau{font-size:14px;color:var(--or);letter-spacing:1px;}
.etoiles-niveau .etoile-vide{color:#d8dce6;}
.check{color:var(--succes);font-weight:bold;}
#pied-menu{text-align:center;padding:16px;color:var(--gris);font-size:12px;}
#pied-menu button{background:none;border:1px solid var(--gris);border-radius:8px;padding:6px 10px;color:var(--gris);}

/* ---------- écran de jeu ---------- */
.barre-haut{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--panneau);border-bottom:1px solid #dfe3ee;}
.barre-haut h2{font-size:17px;flex:1;}
.barre-haut button{background:#eef1f7;border:none;border-radius:10px;padding:8px 12px;font-size:13px;}
.compteur-coups{font-size:13px;color:var(--gris);white-space:nowrap;}
.consigne{padding:10px 16px;background:#fff8e6;border-bottom:1px solid #f0e2b0;font-size:14px;}

#zone-equations{flex:1;padding:24px 16px;display:flex;flex-direction:column;gap:22px;align-items:center;overflow:auto;}
.equation-row{display:flex;align-items:center;gap:14px;background:var(--panneau);border-radius:18px;padding:16px;box-shadow:0 2px 6px rgba(0,0,0,.06);width:100%;max-width:820px;flex-wrap:wrap;justify-content:center;}
.eq-label{font-size:11px;color:var(--gris);width:100%;text-align:center;}
.plateau{
  flex:1;min-width:220px;min-height:120px;background:#f4f6fb;border:2px dashed #cdd4e4;
  border-radius:14px;display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;padding:10px;
  transition:background .15s,border-color .15s;
}
.plateau.cible-survolee{background:#e4ebff;border-color:var(--accent);}
.plateau-vide-indicateur{margin:auto;color:var(--gris);font-size:12px;font-style:italic;}
.signe-egal{font-size:34px;font-weight:700;color:var(--accent);}

/* ---------- termes ---------- */
.terme-top{position:relative;}
.draggable{cursor:grab;touch-action:none;}
.draggable.en-cours-drag{opacity:.25;}
.cliquable{cursor:pointer;}

.carte{
  position:relative;width:76px;min-height:92px;border-radius:12px;
  background:var(--couleur,#8a8f9c);color:#fff;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:6px;box-shadow:0 2px 4px rgba(0,0,0,.15);
  border:3px solid rgba(0,0,0,.15);
}
.carte-visuel{font-weight:700;font-size:17px;text-align:center;word-break:break-word;}
.carte-filename{font-size:7px;opacity:.85;margin-top:4px;text-align:center;font-style:italic;}
.carte-box{border:3px solid var(--or);box-shadow:0 0 0 3px rgba(224,168,58,.35);}
.carte-negative.style-anti-distinct{filter:hue-rotate(140deg) saturate(1.3);}
.carte-negative.style-anti-marqueur::after{
  content:'▼';position:absolute;top:3px;right:5px;font-size:10px;color:#fff;
  background:rgba(0,0,0,.35);border-radius:50%;width:14px;height:14px;display:flex;align-items:center;justify-content:center;
}
.carte-reference{background:repeating-linear-gradient(45deg,#8a8f9c,#8a8f9c 6px,#787d8a 6px,#787d8a 12px);}
.carte-badge{position:absolute;top:-8px;left:-8px;background:var(--danger);color:#fff;border-radius:50%;width:20px;height:20px;font-size:12px;display:flex;align-items:center;justify-content:center;}

.badge-mult{position:absolute;top:-9px;right:-9px;background:var(--accent);color:#fff;border-radius:10px;padding:2px 6px;font-size:11px;font-weight:700;}
.badge-neutre-mult{position:absolute;bottom:-8px;right:-8px;background:var(--gris);color:#fff;border-radius:50%;width:22px;height:22px;font-size:10px;display:flex;align-items:center;justify-content:center;}

.groupe{position:relative;display:flex;align-items:center;}
.groupe-parenthese{gap:4px;background:#f0f2fa;border:2px solid #c7cee4;border-radius:14px;padding:8px 10px;}
.parenthese-symbole{font-size:30px;font-weight:700;color:var(--accent);}
.groupe-enfants{display:flex;align-items:center;gap:6px;}
.op-plus{font-weight:700;color:var(--gris);}
.btn-developper{margin-left:6px;background:var(--accent);color:#fff;border:none;border-radius:8px;padding:6px 8px;font-size:11px;}

.neutre{width:56px;height:56px;border-radius:50%;background:var(--gris);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.neutre .carte-visuel{font-size:18px;}
.neutre .carte-filename{font-size:6px;}
.neutre-multiplicatif{background:#7f8798;}

.fantome{width:76px;min-height:92px;border:3px dashed var(--accent);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--accent);font-size:10px;text-align:center;padding:4px;opacity:.8;animation:pulse 1.4s infinite;}
@keyframes pulse{0%,100%{opacity:.5;}50%{opacity:1;}}
.lien-actif{width:14px;height:14px;border-radius:50%;background:var(--accent);}

/* ---------- réserve / outils ---------- */
.bas-jeu{background:var(--panneau);border-top:1px solid #dfe3ee;padding:10px 16px 16px;}
#zone-reserve{display:flex;gap:10px;flex-wrap:wrap;min-height:70px;padding:8px;border:2px dashed #dfe3ee;border-radius:12px;justify-content:center;}
.reserve-vide{margin:auto;color:var(--gris);font-size:13px;}
.outil{width:70px;min-height:84px;border-radius:12px;background:var(--couleur,#8a8f9c);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px;border:3px dashed #fff;cursor:grab;touch-action:none;position:relative;}
.outil-en-attente{box-shadow:0 0 0 3px var(--or);}
.outil .carte-visuel{font-size:14px;font-weight:700;}
.outil .carte-filename{font-size:7px;font-style:italic;margin-top:3px;}

#zone-trash{margin-top:10px;text-align:center;padding:10px;border:2px dashed var(--danger);border-radius:12px;color:var(--danger);font-size:13px;}
#zone-trash.cible-survolee{background:#fdeaea;}

.barre-actions{display:flex;gap:10px;justify-content:center;margin-top:10px;flex-wrap:wrap;}
.barre-actions button{border:none;border-radius:10px;padding:10px 16px;font-size:14px;}
.btn-verifier{background:var(--succes);color:#fff;}
.btn-indice{background:var(--or);color:#fff;}
.btn-reset{background:#eef1f7;color:var(--texte);}
.btn-menu{background:#eef1f7;color:var(--texte);}

#message-bar{max-width:820px;margin:8px auto 0;text-align:center;font-size:13px;padding:8px 12px;border-radius:10px;display:none;}
#message-bar.visible{display:block;}
#message-bar.info{background:#e6f0ff;color:var(--accent);}
#message-bar.erreur{background:#fdeaea;color:var(--danger);}

/* ---------- ghost de drag ---------- */
.ghost-drag{position:fixed;z-index:9999;pointer-events:none;transform:scale(1.05);opacity:.9;}

/* ---------- overlay victoire ---------- */
#overlay-victoire{position:fixed;inset:0;background:rgba(20,25,40,.55);display:none;align-items:center;justify-content:center;z-index:1000;}
#overlay-victoire.visible{display:flex;}
.boite-victoire{background:#fff;border-radius:20px;padding:30px 34px;text-align:center;max-width:340px;}
.boite-victoire h2{color:var(--succes);}
.boite-victoire .boutons{display:flex;gap:10px;justify-content:center;margin-top:16px;}
.boite-victoire button{border:none;border-radius:10px;padding:10px 16px;}
.boite-victoire .suivant{background:var(--accent);color:#fff;}
.boite-victoire .menu{background:#eef1f7;}
#victoire-etoiles{font-size:30px;color:var(--or);letter-spacing:6px;margin:6px 0 2px;display:none;}
#victoire-etoiles .etoile-vide{color:#d8dce6;}