/* La Vie Météo — Micro-interactions professionnelles.
   Principes : transitions courtes (≤ 220 ms), easing doux, uniquement
   transform/opacity/box-shadow (GPU), et surtout : sélecteurs SCOPÉS —
   jamais de transition globale sur a/button/img (coût de rendu sur les
   pages denses : cartes SVG, listes, chat). */

:root {
    --motion-ease: cubic-bezier(.22, .61, .36, 1);
    --motion-fast: 150ms;
    --motion-med: 220ms;
}

/* ── Boutons d'action précis : élévation au survol, appui au clic ── */
.vig-export-btn,
.map-zoom-btn,
.windy-btn,
.tab-btn,
a.btn {
    transition:
        transform var(--motion-fast) var(--motion-ease),
        box-shadow var(--motion-fast) var(--motion-ease),
        background-color var(--motion-fast) var(--motion-ease),
        border-color var(--motion-fast) var(--motion-ease),
        color var(--motion-fast) var(--motion-ease);
}
.vig-export-btn:hover,
a.btn:hover {
    transform: translateY(-1px);
}
.vig-export-btn:active,
a.btn:active {
    transform: translateY(0) scale(.98);
    transition-duration: 80ms;
}

/* ── Cartes / panneaux : élévation discrète au survol (desktop only,
      le hover n'existe pas au doigt et coûte cher sur mobile) ── */
@media (hover: hover) and (pointer: fine) {
    .card,
    .stat-box,
    .obs-card {
        transition:
            transform var(--motion-med) var(--motion-ease),
            box-shadow var(--motion-med) var(--motion-ease);
    }
    .card:hover,
    .stat-box:hover,
    .obs-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
    }
}

/* ── Focus clavier visible et net (accessibilité) ── */
:where(button, a, input, select, textarea):focus-visible {
    outline: 2px solid var(--accent-color, var(--accent-color));
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Anti-CLS : réserver l'espace des cartes avant leur rendu ──
   Le SVG France arrive en async : sans espace réservé, la page saute
   (CLS mesuré : 0.95). NB : pas d'aspect-ratio ici — combiné à la
   hauteur fixe de style.css, il dérivait la LARGEUR de la hauteur et
   faisait déborder la carte sur mobile (610px pour 500px d'écran). */
.map-container {
    width: 100%;
    max-width: 100%;
    min-height: 200px;
}

/* ── Taille tactile minimale des boutons de la carte (WCAG target-size) ── */
.vig-export-btn {
    min-height: 36px;
    min-width: 44px;
    padding: 8px 14px;
}
/* Le bouton Copier partage la même position absolue que Exporter :
   on le décale à gauche pour qu'ils soient côte à côte. */
.vig-export-btn.vig-copy-btn {
    right: 128px;
}

/* ── Respect strict des préférences utilisateur ── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}