/* ─────────────────────────────────────────────────────────────────────────
   vignette-3d.css : le bâtiment en 3D vivante dans une petite boîte. Commun à :
   - la vignette de chaque ligne de « Mes bâtiments » (public/js/liste-vignettes.js ; la taille de la boîte est dans ville.css) ;
   - le logo d'UN bâtiment dans ses pages (public/js/batiment-logo.js, templates/batiment/partials/_logo.html.twig).
   Chargée par base/base.html.twig sur toutes les pages (quelques lignes). Décisions du pilote du 16/10 et du 17/10/2026 (plus
   d'instantané image : la vraie 3D partout, quel que soit le bouton « Animation »).
   ───────────────────────────────────────────────────────────────────────── */

/* L'icône du bâtiment reste dessous : elle s'affiche tant que la 3D n'est pas prête, et définitivement si elle ne peut pas se dessiner. */
.ville__vignette { position: relative; overflow: hidden; display: grid; place-items: center; }
.ville__vignette-repli { color: var(--primary); font-size: 28px; }
.ville__vignette--prete .ville__vignette-repli { visibility: hidden; }
.ville__vignette-scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.ville__vignette-scene .ville__apercu-maquette { height: 100%; border-radius: 0; background: none; perspective: none; }
.ville__vignette-scene svg { width: 100%; height: 100%; display: block; pointer-events: none; }
.ville__vignette-scene .mq-etiquette, .ville__vignette-scene .mq-rose, .ville__vignette-scene .mq-cote, .ville__vignette-scene .mq-personne { display: none; }
.ville__vignette-etoile { position: absolute; top: 3px; right: 3px; z-index: 2; font-size: 16px; color: #f59e0b; }
/* Animation allumée, la 3D flotte à peine ; éteinte, elle ne bouge pas (une boucle redessine l'image sans fin : 13 % de processeur au repos, mesuré).
   Le flottement porte sur la boîte HTML et non sur le <svg> (lot 2 d'optimisation du 19/10/2026) : un `translate` sur le <svg> forçait un
   recalcul de style et une mise en page à chaque image (601 en 10 s, 7 à 10 % du processeur au repos, 32 % sur un portable modeste) ;
   un `transform` sur la boîte est joué par le compositeur. Même amplitude (5 px), même rythme (5 s) ; la vignette, qui coupe ce qui
   dépasse (overflow: hidden), garde le même cadre. */
/* Le logo d'un bâtiment flotte toujours, quel que soit le bouton « Animation », qui ne règle que la ville de « Mes bâtiments » et
   ses vignettes (décision du pilote du 26/10/2026). Derrière une fenêtre ouverte, il s'arrête : sur un poste sans carte graphique, le
   flou de la fenêtre recalculé à chaque image du flottement prenait un cœur entier (mesuré le 26/10/2026, 99 % → 2 %), pour un
   mouvement que le voile cache de toute façon. */
html[data-animation="allege"] .ville__vignette--vivante .ville__apercu-maquette,
.batiment-logo.ville__vignette--vivante .ville__apercu-maquette { animation: vignette-flotte 5s ease-in-out infinite !important; }
@media (prefers-reduced-motion: reduce) { html[data-animation="allege"] .ville__vignette--vivante .ville__apercu-maquette, .batiment-logo.ville__vignette--vivante .ville__apercu-maquette { animation: none !important; } }
body:has(.modal.show, dialog[open]) .batiment-logo .ville__apercu-maquette { animation-play-state: paused !important; }
@keyframes vignette-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ─── Le logo d'UN bâtiment dans ses pages ──────────────────────────────────────────────────────────────────────
   Une boîte plus large que haute (la 3D d'un bâtiment est plus large que haute), de la hauteur de l'ancien carré bleu
   (56 px ; 44 px dans la carte d'en-tête de la fiche). Le carré bleu à icône est le repli, au milieu de la boîte. */
.batiment-logo {
    --logo-h: 56px; flex: none; width: calc(var(--logo-h) * 1.6); height: var(--logo-h); box-sizing: border-box; border-radius: 14px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 9%, var(--surface, #fff)) 0%, color-mix(in srgb, var(--primary) 3%, var(--surface, #fff)) 100%);
    border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
}
.contenu__header--fiche .batiment-logo { --logo-h: 44px; border-radius: 16px; }
.batiment-logo__repli {
    width: var(--logo-h); height: var(--logo-h); box-sizing: border-box; display: grid; place-items: center; padding: 0 !important;
    font-size: calc(var(--logo-h) * 0.55) !important; border-radius: 12px; line-height: 1;
    background: linear-gradient(135deg, #2957FF 0%, #1946fb 100%); color: #fff;
}
.ville__vignette--prete .batiment-logo__repli { visibility: hidden; }
/* Téléphone : la boîte rétrécit un peu (le titre garde la place). */
@media (max-width: 850px) {
    .batiment-logo { --logo-h: 44px; }
}