/* ============================================================================
   plateau.css — Mise en page du jeu, plateau SVG, pièces et panneaux
   ============================================================================
   Rôle  : tout le style propre au JEU : la grille responsive (panneaux +
           plateau), le damier, le Labyrinthe, les pièces (médaillons,
           cadavres, animations), les surbrillances de la machine à états
           et les deux panneaux latéraux.
   Place : chargée par index.html, APRÈS style.css (dont elle utilise les
           variables de thème).
   ============================================================================ */

/* ----- La grille de jeu : 3 colonnes en large, 1 colonne en étroit --------- */
.jeu {
    flex: 1;
    width: 100%;
    max-width: var(--largeur-max);
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr) 21rem;
    gap: 1rem;
    align-items: start;
    padding: 0.5rem 1.5rem 1rem;
}

/* Piège du responsive : par défaut, un enfant de grille ou de flex refuse
   de rétrécir sous sa taille « min-content » — un plateau carré calé sur
   la hauteur de l'écran déborderait alors horizontalement sur mobile.
   min-width: 0 rend la main au calcul de mise en page. */
.jeu > * { min-width: 0; }

#zone-plateau {
    display: flex;
    justify-content: center;
}

/* Le plateau reste carré et tient dans la fenêtre : sa taille est bornée
   par la largeur disponible, la hauteur ET la largeur de l'écran. */
#plateau {
    width: min(100%, calc(100vh - 11rem), calc(100vw - 1.5rem));
    max-width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 0.6rem;
    box-shadow: 0 0 0 1px var(--couleur-bordure), 0 8px 24px rgba(0, 0, 0, 0.35);
    touch-action: manipulation;   /* pas de double-tap-zoom sur mobile */
}

/* Écrans étroits (smartphone) : tout s'empile, le plateau d'abord,
   les panneaux deviennent des tiroirs repliables sous le plateau. */
@media (max-width: 920px) {
    .jeu {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        padding: 0.4rem 0.6rem 1rem;
    }

    #zone-plateau { order: 0; }
    #panneau-partie { order: 1; }
    #panneau-config { order: 2; }

    #plateau { width: min(100%, calc(100vh - 9rem), calc(100vw - 1.2rem)); }
}

/* ----- Les cases du damier -------------------------------------------------- */
.case-claire { fill: var(--case-claire); }
.case-sombre { fill: var(--case-sombre); }

/* Le Labyrinthe (e5) : anneaux concentriques dorés, un fauteuil gravé. */
.labyrinthe-anneau {
    fill: none;
    stroke: var(--couleur-accent);
    stroke-width: 2;
    opacity: 0.45;
}

/* Coordonnées a–i / 1–9 : discrètes, escamotables via l'option dédiée. */
.coordonnee {
    fill: var(--couleur-texte-discret);
    font-size: 15px;
    font-family: Georgia, serif;
    opacity: 0.8;
    pointer-events: none;
}

#plateau.sans-coordonnees .couche-coordonnees { display: none; }

/* ----- Les pièces ------------------------------------------------------------
   Mécanique des couleurs : chaque groupe .piece expose --c (couleur du
   camp) ; le médaillon et les « creux » s'en servent, le pictogramme est
   blanc cassé. Un cadavre écrase --c en gris pierre. */
.piece { --c: grey; }

.piece.camp-rouge { --c: var(--camp-rouge); }
.piece.camp-bleu  { --c: var(--camp-bleu); }
.piece.camp-jaune { --c: var(--camp-jaune); }
.piece.camp-vert  { --c: var(--camp-vert); }

.piece .medaillon {
    fill: var(--c);
    stroke: rgba(0, 0, 0, 0.4);
    stroke-width: 3;
}

.piece .picto   { fill: #f3efe6; }
.piece .creux   { fill: var(--c); }       /* motifs « gravés » dans le picto */
.piece .insigne { fill: #f3efe6; opacity: 0.95; }

/* Déplacements animés : la synchronisation ne change que le transform du
   groupe, la transition fait glisser la pièce d'une case à l'autre. */
.piece {
    transition: transform 0.3s ease;
    cursor: pointer;
}

/* Finitions (phase 8) : la pièce survolée se signale d'un liseré doré,
   et le clavier garde des repères de focus visibles partout. */
.piece:hover .medaillon { stroke: var(--couleur-accent); stroke-width: 4; }

button:focus-visible,
select:focus-visible,
input:focus-visible,
.bouton-importer:focus-within {
    outline: 2px solid var(--couleur-accent);
    outline-offset: 2px;
}

/* Les cadavres : gris, estompés, retournés — « les morts encombrent ».
   Seul le « corps » (médaillon + pictogramme) pivote ; l'insigne du camp
   reste droit et lisible. */
.piece .corps {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.45s ease;
}

.piece.cadavre { --c: var(--cadavre); cursor: default; }
.piece.cadavre .corps { transform: rotate(180deg); }
.piece.cadavre .picto,
.piece.cadavre .insigne { opacity: 0.35; }

/* ----- Surbrillances de la machine à états ----------------------------------
   Elles ne captent jamais le pointeur : le clic est résolu par le SVG. */
.couche-surbrillances *,
.couche-dernier-coup * { pointer-events: none; }

.surbrillance-selection {
    fill: none;
    stroke: var(--couleur-accent);
    stroke-width: 5;
}

.surbrillance-destination { fill: rgba(201, 162, 39, 0.85); }

.surbrillance-prise {
    fill: none;
    stroke: #e0604e;
    stroke-width: 6;
}

.surbrillance-cible {
    fill: none;
    stroke: #e0604e;
    stroke-width: 6;
    animation: pulsation 0.9s ease-in-out infinite;
}

.surbrillance-depot {
    fill: rgba(122, 180, 255, 0.28);
    stroke: #7ab4ff;
    stroke-width: 2;
}

.surbrillance-confirmer {
    fill: none;
    stroke: #f3efe6;
    stroke-width: 3;
    stroke-dasharray: 9 7;
}

@keyframes pulsation {
    50% { stroke-opacity: 0.3; }
}

/* Les deux cases du dernier coup joué : un voile doré très léger. */
.dernier-coup { fill: rgba(201, 162, 39, 0.16); }

/* ----- Les panneaux ---------------------------------------------------------- */
.panneau {
    background: var(--couleur-panneau);
    border: 1px solid var(--couleur-bordure);
    border-radius: 0.8rem;
    padding: 0.7rem 0.9rem;
}

.panneau summary {
    color: var(--couleur-accent);
    font-weight: bold;
    letter-spacing: 0.04em;
    cursor: pointer;
    padding: 0.2rem 0;
}

.bloc-config { margin: 0.8rem 0; }

.bloc-config h3 {
    font-size: 0.95rem;
    color: var(--couleur-texte-discret);
    margin-bottom: 0.45rem;
}

/* La liste des joueurs : pastille du camp, nom, sélecteur Humain/IA. */
.liste-joueurs { list-style: none; }

.ligne-joueur {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0.35rem 0;
}

.nom-camp { flex: 1; }

.choix-joueur {
    font-family: inherit;
    background: var(--couleur-fond);
    color: var(--couleur-texte);
    border: 1px solid var(--couleur-bordure);
    border-radius: 0.4rem;
    padding: 0.25rem 0.35rem;
}

/* La pastille de camp : couleur + taille de cible tactile confortable. */
.pastille {
    display: inline-block;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background: var(--couleur-bordure);
    flex: none;
}

.pastille.camp-rouge { background: var(--camp-rouge); }
.pastille.camp-bleu  { background: var(--camp-bleu); }
.pastille.camp-jaune { background: var(--camp-jaune); }
.pastille.camp-vert  { background: var(--camp-vert); }
.pastille.pastille-neutre { background: var(--couleur-texte-discret); }

.option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.3rem 0;
    cursor: pointer;
}

.bouton-principal {
    width: 100%;
    margin-top: 0.4rem;
    padding: 0.6rem;
    border: none;
    border-radius: 0.5rem;
    background: var(--couleur-accent);
    color: #1c1608;
    font-weight: bold;
    font-size: 1rem;
}

.bouton-principal:hover { filter: brightness(1.1); }

/* ----- Le panneau de partie -------------------------------------------------- */
.indicateur-trait {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 1.05rem;
    margin: 0.6rem 0 0.3rem;
    min-height: 1.6rem;
}

/* La consigne de la machine à états : hauteur réservée pour éviter les
   sauts de mise en page à chaque changement de message. */
.message {
    min-height: 2.6rem;
    font-size: 0.92rem;
    color: var(--couleur-texte-discret);
    font-style: italic;
}

.zone-proposition {
    border: 1px solid var(--couleur-accent);
    border-radius: 0.5rem;
    padding: 0.55rem;
    margin: 0.5rem 0;
}

.boutons-proposition {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.45rem;
}

.boutons-proposition button {
    flex: 1;
    padding: 0.45rem 0.3rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: 0.4rem;
    background: var(--couleur-fond);
    color: var(--couleur-texte);
}

/* ----- Chronomètres (phase 8) : quatre pastilles, le camp au trait brille. */
.liste-chronos {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.15rem 0.8rem;
    margin: 0.3rem 0 0.5rem;
    font-family: "Courier New", monospace;
    font-size: 0.92rem;
}

.chrono {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    opacity: 0.65;
}

.chrono.actif {
    opacity: 1;
    font-weight: bold;
}

/* ----- Annulation et relecture (phase 8) ------------------------------------ */
.barre-navigation {
    display: flex;
    gap: 0.4rem;
    margin: 0.4rem 0 0.2rem;
}

.bouton-annuler { flex: 1; }

.groupe-relecture {
    display: flex;
    gap: 0.25rem;
}

.bouton-nav {
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: 0.4rem;
    background: var(--couleur-fond);
    color: var(--couleur-texte);
    font-size: 0.9rem;
}

.bouton-nav:hover:not(:disabled) { border-color: var(--couleur-accent); }

.bouton-nav:disabled { opacity: 0.35; cursor: default; }

/* Le bandeau doré signale sans ambiguïté qu'on regarde le PASSÉ. */
.bandeau-relecture {
    border: 1px solid var(--couleur-accent);
    border-radius: 0.4rem;
    color: var(--couleur-accent);
    text-align: center;
    padding: 0.3rem;
    margin: 0.3rem 0;
    font-size: 0.9rem;
}

/* ----- Sauvegardes (phase 8) ------------------------------------------------ */
.grille-stockage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
}

.grille-stockage button,
.bouton-importer {
    padding: 0.42rem 0.3rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: 0.4rem;
    background: var(--couleur-fond);
    color: var(--couleur-texte);
    text-align: center;
    font-size: 0.9rem;
    cursor: pointer;
}

.grille-stockage button:hover,
.bouton-importer:hover { border-color: var(--couleur-accent); }

/* Le bouton Stop des IA : discret au repos, doré quand la pause est active. */
.bouton-pause {
    width: 100%;
    margin: 0.3rem 0;
    padding: 0.4rem;
    border: 1px solid var(--couleur-bordure);
    border-radius: 0.4rem;
    background: var(--couleur-fond);
    color: var(--couleur-texte);
}

.bouton-pause.pause-active {
    border-color: var(--couleur-accent);
    color: var(--couleur-accent);
}

#titre-journal {
    font-size: 0.95rem;
    color: var(--couleur-texte-discret);
    margin: 0.6rem 0 0.3rem;
}

/* Le journal : notation humaine, liseré à la couleur du camp qui a joué. */
.journal {
    list-style: none;
    max-height: 40vh;
    overflow-y: auto;
    font-family: "Courier New", monospace;
    font-size: 0.9rem;
}

@media (max-width: 920px) {
    .journal { max-height: 22vh; }
}

.entree-journal {
    padding: 0.12rem 0.5rem;
    border-left: 4px solid var(--couleur-bordure);
    margin: 0.12rem 0;
    cursor: pointer;               /* cliquable : saute à la position (phase 8) */
    border-radius: 0 0.3rem 0.3rem 0;
    transition: background-color 0.15s ease;
}

.entree-journal:hover { background: rgba(201, 162, 39, 0.10); }

.entree-journal.actif {
    background: rgba(201, 162, 39, 0.18);
    font-weight: bold;
}

.entree-journal.camp-rouge { border-left-color: var(--camp-rouge); }
.entree-journal.camp-bleu  { border-left-color: var(--camp-bleu); }
.entree-journal.camp-jaune { border-left-color: var(--camp-jaune); }
.entree-journal.camp-vert  { border-left-color: var(--camp-vert); }