/**
 * Terrain vierge (page « Ajout d'un nouveau bâtiment », public/js/terrain-vierge.js) et plan d'un
 * site ou d'un groupement (public/js/plan-site.js). Les couleurs de la maquette (--mq-*) et les
 * « + », parcelles et petites fenêtres viennent de public/css/atelier-batiment.css. Aussi sur la fiche d'un bâtiment
 * en mode performance (.atelier), où la ville est dessinée autour de la maquette.
 */

.terrain, .plan-site, .atelier {
    --mq-herbe: #dff3e4;
    --mq-herbe-trait: rgba(16, 185, 129, 0.16);
    --mq-terre: #c9a27c;
    --mq-terre-ombre: #a77f5a;
    --mq-allee: #eef1f6;
}
html[data-theme="dark"] .terrain,
html[data-theme="dark"] .plan-site,
html[data-theme="dark"] .atelier {
    --mq-herbe: #17312a;
    --mq-herbe-trait: rgba(52, 211, 153, 0.12);
    --mq-terre: #5b4634;
    --mq-terre-ombre: #45352a;
    --mq-allee: #263252;
}

.terrain__herbe { fill: var(--mq-herbe); stroke: var(--mq-herbe-trait); stroke-width: 1; }
.terrain__tranche { fill: var(--mq-terre); }
.terrain__tranche--d { fill: var(--mq-terre-ombre); }
.terrain__sol .mq-sol-trame { stroke: var(--mq-herbe-trait); }
.plan-site__allee { fill: var(--mq-allee); opacity: 0.9; }

/* ═══ Terrain vierge ════════════════════════════════════════════════════════════════════════ */

.terrain.section_batiment { padding: 0; overflow: hidden; }
.terrain__scene {
    position: relative;
    border-radius: var(--radius);
    background:
        radial-gradient(ellipse at 50% 20%, var(--mq-ciel-haut) 0%, transparent 70%),
        linear-gradient(180deg, var(--mq-ciel) 0%, var(--mq-ciel-bas) 100%);
    overflow: hidden;
}
/* Un nuage, comme sur la fiche bâtiment (le soleil n'est plus que sur la liste des bâtiments, 16/10/2026). */
.terrain__scene::after {
    content: ''; position: absolute; pointer-events: none;
    top: 70px; left: 22%; width: 110px; height: 30px; border-radius: 40px;
    background: var(--mq-nuage); opacity: 0.85;
    box-shadow: 30px -12px 0 4px var(--mq-nuage), 64px 2px 0 -4px var(--mq-nuage);
    animation: atelier-nuage 46s ease-in-out infinite alternate;
}
.terrain__dessin {
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(420px, 62vh, 620px);
    transition: transform 0.7s cubic-bezier(.22, 1, .36, 1);
}
.terrain__dessin svg { width: 100%; height: 100%; }
/* Les choix s'ouvrent en bas : le terrain remonte et recule, l'esquisse reste visible au-dessus. */
.terrain--choix .terrain__dessin { transform: translateY(-17%) scale(0.74); }
/* Cartes plus compactes que sur les autres écrans (pas de carré), pour laisser voir le terrain. */
.terrain__choix .choice { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.terrain__choix .choice label { aspect-ratio: auto; flex-direction: row; gap: 0.6rem; justify-content: flex-start; padding: 0.7rem 0.8rem; text-align: left; }
.terrain__choix .choice label span { font-size: 30px; }
.terrain__choix .choice label span + p { margin: 0; }
/* Téléphone (recette du 22/10/2026, 390 px) : trois colonnes laissaient des cartes de 100 px dont le texte débordait. Une carte par
   ligne, comme le plein écran (parcours-classement.css) ; un libellé long passe à la ligne dans sa carte. */
@media (max-width: 560px) {
    .terrain__choix .choice { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
}
.terrain__choix .choice label p { min-width: 0; overflow-wrap: anywhere; }
.terrain__plus .mq-plus-corps { animation-duration: 0.9s; }
.terrain--choix .terrain__parcelle .mq-plus { opacity: 0; transition: opacity 0.3s ease; }
.terrain--construit .terrain__parcelle { pointer-events: none; }
.terrain--construit .terrain__parcelle .mq-parcelle-sol { animation: none; stroke-opacity: 0.25; }

.terrain__invite {
    position: absolute;
    left: 50%;
    bottom: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    background: var(--panneau-fond);
    box-shadow: var(--panneau-ombre);
    color: var(--ink);
    font-weight: 600;
    font-size: 0.9rem;
    transform: translateX(-50%);
    animation: terrain-invite 2.6s ease-in-out infinite;
    pointer-events: none;
}
.terrain__invite .material-symbols-outlined { color: var(--primary); }
@keyframes terrain-invite {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, -5px); }
}
.terrain--choix .terrain__invite { opacity: 0; transition: opacity 0.25s ease; animation: none; }

/* Les trois choix : cachés jusqu'au clic sur le terrain, puis ils montent se poser devant. */
.terrain__choix {
    position: absolute;
    left: 50%;
    bottom: 1rem;
    width: min(820px, calc(100% - 2rem));
    padding: 1rem 1.25rem 1.1rem;
    border-radius: var(--panneau-rayon);
    background: var(--panneau-fond);
    box-shadow: 0 24px 50px -22px rgba(15, 23, 42, 0.4), var(--shadow-1);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 30px) scale(0.97);
    transition: opacity 0.35s ease, transform 0.55s cubic-bezier(.2, .9, .3, 1.2), visibility 0s linear 0.55s;
}
.terrain--choix .terrain__choix {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition: opacity 0.35s ease, transform 0.55s cubic-bezier(.2, .9, .3, 1.2), visibility 0s;
}
.terrain__choix h2 { margin: 0 0 0.75rem; font-size: 1.05rem; }
.terrain__choix .choice > label { transition: transform 0.3s cubic-bezier(.2, .9, .3, 1.25), box-shadow 0.25s ease, border-color 0.2s ease; }
.terrain--choix .terrain__choix .choice > label { animation: terrain-carte 0.5s cubic-bezier(.2, .9, .3, 1.25) both; }
.terrain--choix .terrain__choix .choice > label:nth-of-type(2) { animation-delay: 80ms; }
.terrain--choix .terrain__choix .choice > label:nth-of-type(3) { animation-delay: 160ms; }
.terrain__choix .choice > label:hover { transform: translateY(-4px); box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--primary) 50%, transparent); }
@keyframes terrain-carte {
    from { opacity: 0; transform: translateY(16px) scale(0.94); }
    to { opacity: 1; transform: none; }
}
.terrain__legende { margin: 0.75rem 0 0; color: var(--muted); font-size: 0.8rem; line-height: 1.45; }

/* Esquisse au survol d'un choix : des volumes en pointillé qui attendent d'être construits. */
.terrain__esquisse .mq-dessus,
.terrain__esquisse .mq-gauche,
.terrain__esquisse .mq-droite {
    fill: color-mix(in srgb, var(--primary) 7%, transparent);
    stroke: var(--primary);
    stroke-width: 1.4;
    stroke-dasharray: 6 4;
    stroke-opacity: 0.8;
}
.terrain__esquisse { animation: terrain-esquisse 0.35s ease both; }
@keyframes terrain-esquisse {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: none; }
}
.terrain__volumes .mq-niveau, .terrain__volumes .terrain__esquisse { transform-box: view-box; }

/* Repli des parcours quand le dessin n'a pas pu se faire (primitives de maquette-batiment.js absentes, ou 3D de la fiche indisponible :
   parcours-classement.js, materiaux-parcours.js, locaux-risques-parcours.js, travaux-parcours.js, suite-parcours.js) : les choix, sans terrain.
   La page d'ajout ne s'en sert plus (toujours le plein écran, décision du pilote du 23/10/2026). */
.terrain--sans-js .terrain__dessin,
.terrain--sans-js .terrain__invite { display: none; }
.terrain--sans-js .terrain__scene { background: none; }
.terrain--sans-js .terrain__scene::before,
.terrain--sans-js .terrain__scene::after { display: none; }
.terrain--sans-js .terrain__choix { position: static; width: auto; opacity: 1; visibility: visible; transform: none; box-shadow: none; }

@media (max-width: 760px) {
    .terrain__dessin { min-height: 300px; }
    .terrain--choix .terrain__dessin { transform: translateY(-20px) scale(0.9); }
    .terrain--choix .terrain__scene { padding-bottom: 1px; }
    .terrain--choix .terrain__choix { position: relative; left: auto; bottom: auto; width: auto; margin: -2rem 0.75rem 0.75rem; transform: none; }
    .terrain__choix { position: relative; left: auto; transform: none; display: none; }
    .terrain--choix .terrain__choix,
    .terrain--sans-js .terrain__choix { display: block; }
}

/* ═══ Plan de site ══════════════════════════════════════════════════════════════════════════ */

.plan-site { position: relative; padding: 0; overflow: hidden; }
.plan-site__entete {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    padding: 1rem 1.25rem 0.25rem;
}
.plan-site__entete h2 { margin: 0; }
.plan-site__aide { margin: 0; color: var(--muted); font-size: 0.85rem; }
.plan-site__scene {
    position: relative;
    margin: 0.5rem;
    border-radius: var(--radius);
    background:
        radial-gradient(ellipse at 50% 20%, var(--mq-ciel-haut) 0%, transparent 70%),
        linear-gradient(180deg, var(--mq-ciel) 0%, var(--mq-ciel-bas) 100%);
    overflow: hidden;
}
.plan-site__dessin { display: flex; align-items: center; justify-content: center; min-height: 360px; }
.plan-site__dessin svg { width: 100%; max-height: 520px; }

.plan-site__batiment {
    cursor: pointer;
    outline: none;
    transform-box: view-box;
    animation: mq-entre 0.75s cubic-bezier(.2, .9, .3, 1.25) both;
    animation-delay: var(--delai, 0ms);
    transition: transform 0.3s cubic-bezier(.2, .9, .3, 1.25), filter 0.3s ease;
}
.plan-site__batiment:hover,
.plan-site__batiment:focus-visible,
.plan-site__batiment.mq-selection {
    transform: translateY(-6px);
    filter: drop-shadow(0 10px 14px color-mix(in srgb, var(--primary) 30%, transparent));
}
.plan-site__batiment:focus-visible .mq-dessus { stroke: var(--primary); stroke-width: 2; }
.plan-site__batiment--a-classer .mq-gauche,
.plan-site__batiment--a-classer .mq-droite,
.plan-site__batiment--a-classer .mq-dessus { stroke-dasharray: 5 3; stroke: var(--warning-color, #b45309); }
.plan-site--focus .plan-site__batiment:not(.mq-selection) { opacity: 0.55; }
.plan-site__nom rect { fill: var(--mq-etiquette); stroke: var(--border-color); }
.plan-site__pop { position: absolute; }

@media (prefers-reduced-motion: reduce) {
    .terrain *, .terrain *::before, .terrain *::after,
    .plan-site *, .plan-site *::before, .plan-site *::after { animation: none !important; transition: none !important; }
}

/* Création directe (terrain-vierge.js, creerDirect) : la fiche arrive. */
.terrain__legende-direct { display: block; margin-top: 0.35rem; color: var(--primary); font-weight: 600; }
.terrain__creation { display: flex; align-items: center; justify-content: center; gap: 0.45rem; margin: 0.75rem 0 0; color: var(--primary); font-weight: 600; }
.terrain__creation[hidden] { display: none; }
.terrain__creation .material-symbols-outlined { animation: spin 1s linear infinite; } /* spin : commun.css */
@media (prefers-reduced-motion: reduce) { .terrain__creation .material-symbols-outlined { animation: none; } }