/* =====================================================================================
 * css/carte.css : LE STYLE DE LA CARTE DE VALMONT (pages de jeu seulement)
 * -------------------------------------------------------------------------------------
 * Tout est préfixé .carte- : ce fichier ne peut rien casser ailleurs.
 * Il utilise les variables (couleurs, durées, courbes) définies dans css/style.css.
 *
 * POUR LE RAPPORT (direction artistique de la carte) :
 *   - Une carte CONTEMPORAINE posée sur la table d'un jeu médiéval : un plan d'architecte,
 *     précis et aéré. Traits fins (1 à 1,5 px, grâce à vector-effect: non-scaling-stroke,
 *     qui garde la même épaisseur quelle que soit la taille de l'écran), aucun aplat chargé.
 *   - Tout est MONOCHROME (parchemin), sauf trois couleurs qui portent une information :
 *     l'or = un bâtiment construit, le rouge en hachures = un bâtiment abîmé,
 *     le givre = l'hiver qui gagne les bords de la carte.
 *   - Une police supplémentaire, IBM Plex Mono, seulement pour les étiquettes, les
 *     coordonnées, la légende et le cartouche : la voix d'un relevé technique, avec des
 *     chiffres de largeur fixe, qui tranche avec Cinzel et Alegreya du reste du jeu.
 *   - Animations : uniquement transform, opacity et stroke-dashoffset.
 * ===================================================================================== */


/* ---------- 1. Les variables propres à la carte ----------
 * Définies sur les TROIS endroits où la carte s'affiche : sa section, sa copie sur l'écran
 * de fin (.carte-fin, placée dans #fin) et l'avis (.carte-avis-zone, placé dans <body>).
 * Sans cela, ces deux derniers ne "verraient" pas les variables (elles s'héritent du parent). */
.carte-section, .carte-fin, .carte-avis-zone {
    --carte-police: "IBM Plex Mono", ui-monospace, monospace;
    --carte-t: 0.8125rem;              /* 13 px : étiquettes, légende, cartouche */
    --carte-interlettre: 0.08em;
    --carte-feuille: var(--surface);   /* le papier : charbon très sombre et uni */
    --carte-encre: var(--texte);       /* les traits du terrain (à faible opacité) */
    --carte-or: var(--accent);         /* les bâtiments construits */
    --carte-sang: var(--danger);       /* les bâtiments abîmés (hachures) */
    --carte-givre: var(--hiver);       /* l'hiver */
    --carte-d-repere: 200ms;           /* 1. le repère circulaire s'ouvre */
    --carte-d-trace: 700ms;            /* 2. le contour se dessine */
    --carte-d-balaye: 420ms;           /* les hachures de la tempête balaient le bâtiment */
}
.carte-section { margin-top: var(--e-6); }


/* ---------- 2. La feuille ---------- */
.carte-cadre {
    position: relative;
    background: var(--carte-feuille);
    box-shadow: var(--relief);
    border-radius: var(--rayon);
    overflow: hidden;
}
.carte-plan { display: block; width: 100%; height: auto; max-width: none; }
.carte-plan text { font-family: var(--carte-police); letter-spacing: var(--carte-interlettre); text-anchor: middle; }


/* ---------- 3. Le terrain : traits fins, couleur parchemin, faible opacité ---------- */
.carte-terrain path, .carte-terrain line, .carte-terrain circle, .carte-bord {
    fill: none; stroke: var(--carte-encre); stroke-width: 1.2;
    vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round;
}
.carte-grille line { stroke-opacity: 0.06; stroke-width: 1; }
.carte-coordonnees text { font-size: 12px; font-weight: 500; fill: var(--texte-doux); }
.carte-relief path { stroke-opacity: 0.3; stroke-width: 1; }
.carte-arbre { fill: none; stroke: var(--carte-encre); stroke-opacity: 0.32; stroke-width: 1; }
.carte-riviere path { stroke-opacity: 0.5; stroke-width: 1.5; }
.carte-pont { stroke-opacity: 0.5; }
.carte-champ { stroke: var(--carte-encre); stroke-opacity: 0.22; stroke-width: 1; vector-effect: non-scaling-stroke; }
.carte-hachure-trait { stroke: var(--carte-encre); stroke-opacity: 0.3; stroke-width: 1; }
.carte-chemin path { stroke-opacity: 0.5; stroke-width: 1.5; stroke-dasharray: 1 7; }
.carte-place { stroke-opacity: 0.4; }
.carte-terrain .carte-nord path { fill: var(--carte-encre); fill-opacity: 0.6; stroke: none; }
.carte-nord text, .carte-echelle text { font-size: 12px; fill: var(--texte-doux); }
.carte-echelle path { stroke-opacity: 0.6; }
.carte-bord { stroke-opacity: 0.2; }

/* Hachures rouges (dégâts) et givre (hiver) */
.carte-hachure-sang { stroke: var(--carte-sang); stroke-width: 1.6; }
.carte-hachure-givre { stroke: var(--carte-givre); stroke-width: 1; stroke-opacity: 0.3; }

/* Les emplacements libres : des pointillés très discrets (on devine où le village peut grandir) */
.carte-libre { fill: none; stroke: var(--carte-encre); stroke-opacity: 0.18; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.carte-libre.carte-occupee { opacity: 0; }

/* Le givre : chaque case du bord se couvre quand jour / 13 dépasse son seuil */
.carte-givre-case { opacity: 0; transition: opacity var(--d-lent) var(--ease-sortie); }
.carte-givre-case.carte-gele { opacity: 1; }
.carte-neige-totale { display: none; }


/* ---------- 4. Les bâtiments (vus du dessus) ---------- */
.carte-bat, .carte-mairie { outline: none; }
.carte-socle { fill: var(--carte-feuille); }                        /* cache le terrain sous le bâtiment */
.carte-or { fill: var(--carte-or); fill-opacity: 0.28; }
.carte-contour {
    fill: none; stroke: var(--carte-or); stroke-width: 1.5;
    vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round;
}
.carte-hachures { stroke: none; }
.carte-abime .carte-or { fill-opacity: 0.1; }
.carte-abime .carte-contour { stroke-opacity: 0.55; }
.carte-etiquette { font-size: 12px; font-weight: 500; fill: var(--texte-doux); }
.carte-plus { font-size: 13px; font-weight: 500; fill: var(--texte); }
.carte-habitant { fill: var(--carte-encre); transition: transform var(--d-lent) var(--ease-sortie); }

/* Focus clavier : un anneau or net autour du bâtiment */
.carte-focus { fill: none; stroke: var(--carte-or); stroke-width: 2; opacity: 0; vector-effect: non-scaling-stroke; }
.carte-bat:focus-visible .carte-focus, .carte-mairie:focus-visible .carte-focus { opacity: 1; }

/* La fumée d'un bâtiment abîmé : 3 traits ondulés qui montent en boucle lente */
.carte-fumee path {
    fill: none; stroke: var(--carte-encre); stroke-opacity: 0.5; stroke-width: 1.2; vector-effect: non-scaling-stroke;
    animation: carte-fumee var(--d-pulsation) var(--ease-ambiance) infinite;
    animation-delay: calc(var(--rang) * var(--d-pulsation) / 3);
}


/* ---------- 5. La Mairie : 4 couches, une seule visible (fondu entre les états) ---------- */
.carte-mairie-couche { opacity: 0; transition: opacity var(--d-lent) var(--ease-sortie); }
.carte-mairie--ruine .carte-mairie-ruine,
.carte-mairie--fondations .carte-mairie-fondations,
.carte-mairie--echafaudages .carte-mairie-echafaudages,
.carte-mairie--achevee .carte-mairie-achevee { opacity: 1; }
.carte-mairie-ruine, .carte-mairie-fondations, .carte-mairie-echafaudages path {
    fill: none; stroke: var(--carte-encre); vector-effect: non-scaling-stroke; stroke-linejoin: round;
}
.carte-mairie-ruine { stroke-opacity: 0.5; stroke-dasharray: 6 6; }
.carte-mairie-fondations { stroke-opacity: 0.85; stroke-width: 1.5; }
.carte-mairie-echafaudages path { stroke-opacity: 0.85; stroke-width: 1.5; }
.carte-mairie-echafaudages .carte-trame { stroke-opacity: 0.35; stroke-width: 1; }
.carte-mairie-achevee .carte-or { fill-opacity: 0.9; }                       /* le beffroi en or plein */
.carte-mairie-achevee .carte-contour { stroke: var(--carte-feuille); }
.carte-lueur { fill: none; stroke: var(--carte-or); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }


/* ---------- 6. Les animations (seulement quand quelque chose a CHANGÉ : classes posées par carte.js) ---------- */

/* Nouveau bâtiment : 1. le repère s'ouvre ; 2. le contour se dessine ; 3. l'or arrive en fondu */
.carte-repere { fill: none; stroke: var(--carte-or); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; vector-effect: non-scaling-stroke; }
.carte-nouveau .carte-repere { animation: carte-repere calc(var(--carte-d-repere) + var(--carte-d-trace)) var(--ease-sortie) both; }
.carte-nouveau .carte-contour {
    stroke-dasharray: 1;              /* avec pathLength="1" : un seul tiret, de la longueur du trait */
    animation: carte-trace var(--carte-d-trace) var(--ease-sortie) var(--carte-d-repere) both;
}
.carte-nouveau .carte-or { animation: carte-fondu var(--d-normal) var(--ease-sortie) calc(var(--carte-d-repere) + var(--carte-d-trace)) both; }

/* Tempête : les hachures balaient le bâtiment (de gauche à droite), une seule secousse */
.carte-balaye { transform-box: fill-box; transform-origin: left center; animation: carte-balaye var(--carte-d-balaye) var(--ease-sortie) both; }
.carte-secousse { animation: carte-secousse var(--d-normal) linear; }

/* Réparation : les hachures s'effacent, un anneau or s'élargit et disparaît */
.carte-efface, .carte-disparait { animation: carte-efface var(--d-normal) var(--ease-entree) forwards; }
.carte-anneau {
    fill: none; stroke: var(--carte-or); stroke-width: 2; vector-effect: non-scaling-stroke;
    transform-box: fill-box; transform-origin: center;
    animation: carte-anneau var(--d-lent) var(--ease-sortie) forwards;
}

/* Un compteur qui change (légende, jour du cartouche) */
.carte-change { display: inline-block; animation: carte-change var(--d-normal) var(--ease-ressort); }

@keyframes carte-repere {
    0%   { opacity: 0; transform: scale(0.2); }
    22%  { opacity: 1; transform: none; }
    70%  { opacity: 0.6; }
    100% { opacity: 0; transform: none; }
}
@keyframes carte-trace   { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes carte-fondu   { from { opacity: 0; } to { opacity: 1; } }
@keyframes carte-balaye  { from { transform: scaleX(0); } to { transform: none; } }
@keyframes carte-secousse {
    0%, 100% { transform: none; }
    25% { transform: translateX(-4px); }
    50% { transform: translateX(4px); }
    75% { transform: translateX(-2px); }
}
@keyframes carte-efface  { to { opacity: 0; } }
@keyframes carte-anneau  { from { opacity: 1; transform: scale(0.6); } to { opacity: 0; transform: scale(2.2); } }
@keyframes carte-change  { from { transform: scale(1.3); } to { transform: none; } }
@keyframes carte-fumee {
    0%   { opacity: 0; transform: translateY(4px); }
    40%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(-14px); }
}
@keyframes carte-illumine {
    0%   { opacity: 0; transform: scale(0.6); }
    30%  { opacity: 1; }
    100% { opacity: 0; transform: scale(1.8); }
}
@keyframes carte-avis-entre { from { opacity: 0; transform: translateY(16px); } }


/* ---------- 7. Le pied de la feuille : la légende et le cartouche ---------- */
.carte-pied {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start;
    gap: var(--e-4) var(--e-6); margin-top: var(--e-4);
}
.carte-legende {
    list-style: none; margin: 0; padding: 0; max-width: 52rem;
    display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5);
    font-family: var(--carte-police); font-size: var(--carte-t);
    text-transform: uppercase; letter-spacing: var(--carte-interlettre);
    color: var(--texte-doux);
}
.carte-legende li { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 28px; }
.carte-legende .carte-nombre { color: var(--texte); font-weight: 500; }
.carte-legende-picto { width: 30px; height: 20px; flex: 0 0 auto; }
.carte-legende-picto .carte-contour { stroke-width: 1.2; }

.carte-cartouche {
    margin: 0; display: grid; gap: 2px; text-align: right;
    padding: var(--e-3) var(--e-4); border-radius: var(--rayon);
    box-shadow: inset 0 0 0 1px var(--lisere-fort);
    font-family: var(--carte-police); font-size: var(--carte-t);
    text-transform: uppercase; letter-spacing: var(--carte-interlettre);
    color: var(--texte-doux);
}
.carte-cartouche-nom { color: var(--texte); font-weight: 500; letter-spacing: 0.24em; }
.carte-cartouche-jour { color: var(--texte); }


/* ---------- 8. L'infobulle (survol ou focus d'un bâtiment) ---------- */
.carte-infobulle {
    position: absolute; left: 0; top: 0; z-index: 2;
    translate: -50% calc(-100% - 8px);           /* au-dessus du bâtiment (s'ajoute au transform posé par carte.js) */
    display: grid; gap: 2px; pointer-events: none;
    padding: var(--e-2) var(--e-3); border-radius: var(--rayon);
    background: var(--surface-haute); box-shadow: var(--relief), var(--ombre-flottante);
    font-family: var(--carte-police); font-size: var(--carte-t); line-height: 1.4;
    color: var(--texte-doux); white-space: nowrap;
}
.carte-infobulle-titre { color: var(--texte); font-weight: 500; text-transform: uppercase; letter-spacing: var(--carte-interlettre); }


/* ---------- 9. L'avis "Nouvelle ferme sur le plan ↓" (quand la carte n'est pas à l'écran) ---------- */
.carte-avis-zone { position: fixed; left: 50%; bottom: var(--e-5); translate: -50% 0; z-index: 21; }
.carte-avis.bouton-secondaire {
    background: var(--surface-haute); color: var(--texte);
    box-shadow: var(--relief), var(--ombre-flottante);
    font-family: var(--carte-police); font-weight: 500; text-transform: uppercase; letter-spacing: var(--carte-interlettre);
    animation: carte-avis-entre var(--d-normal) var(--ease-sortie);
}
.carte-avis-sort { animation: carte-efface var(--d-normal) var(--ease-entree) forwards; }


/* ---------- 10. La carte sur l'écran de fin ---------- */
/* L'écran de fin peut défiler (la carte l'agrandit) ; "safe" évite de couper le haut */
.fin.carte-fin-ouverte { overflow-y: auto; place-content: safe center; }
.carte-fin {
    width: min(100%, 60rem); display: grid; gap: var(--e-3);
    animation: apparaitre var(--d-lent) var(--ease-sortie) var(--d-scene) both;
}
.carte-fin .carte-plan { background: var(--carte-feuille); box-shadow: var(--relief); border-radius: var(--rayon); }
.carte-fin-titre, .carte-fin-recap {
    margin: 0 auto; font-family: var(--carte-police); font-size: var(--carte-t);
    text-transform: uppercase; letter-spacing: var(--carte-interlettre);
}
.carte-fin-titre { color: var(--texte-doux); }
.carte-fin-recap { color: var(--texte); }
/* Victoire : le beffroi s'illumine (deux ondes d'or) */
.carte-fin-gagne .carte-lueur { animation: carte-illumine var(--d-scene) var(--ease-sortie) calc(var(--d-scene) * 1.5) 2; }
/* Défaite : toute la carte sous un voile de neige */
.carte-fin-perdu .carte-neige-totale { display: inline; }
.carte-fin .carte-etiquette, .carte-fin .carte-coordonnees { display: none; }


/* ---------- 11. Écrans moyens et petits ---------- */
/* Les étiquettes deviennent trop petites : la légende prend le relais */
@media (max-width: 999px) {
    .carte-etiquette { display: none; }
}
/* Téléphone : la carte garde sa lisibilité en défilant DANS son cadre (jamais la page entière) */
@media (max-width: 700px) {
    .carte-cadre { overflow-x: auto; }
    .carte-cadre .carte-plan { width: 180%; }
    .carte-coordonnees { display: none; }
    .carte-pied { flex-direction: column; }
    .carte-cartouche { text-align: left; }
    .carte-legende { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Les entrées longues (état de la Mairie, clés de lecture) prennent toute la largeur */
    .carte-legende li[data-legende="Mairie"], .carte-legende .carte-cle { grid-column: 1 / -1; }
}