/* ==================================================================
   WETHER — style.css
   Design : app mobile native, condensé, lisible en 3 secondes.
   Palette imposée : Bleu Horizon (#1E3A8A) / Jaune Volt (#FACC15)
   Signature : le "bandeau hybride" — la pièce qui matérialise le
   concept central de l'app (API vs voix du peuple).
   ================================================================== */

:root {
    /* Couleurs de marque (imposées au cahier des charges) */
    --bleu-horizon: #1E3A8A;
    --bleu-horizon-dark: #142a63;
    --bleu-horizon-light: #2c4ba3;
    --jaune-volt: #FACC15;
    --jaune-volt-dark: #e0b30a;
    --blanc: #FFFFFF;
    --gris-clair: #F4F6FB;
    --gris-texte: #94A3C7;
    --rouge-alerte: #F87171;

    /* Typographie */
    --font-display: 'Manrope', 'Segoe UI', system-ui, sans-serif;
    --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

    /* Rayon / ombre, cohérents avec le côté "app native" */
    --radius-l: 24px;
    --radius-m: 16px;
    --radius-s: 10px;
    --shadow-card: 0 12px 32px -8px rgba(20, 42, 99, 0.35);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: var(--font-body);
    background: linear-gradient(180deg, var(--bleu-horizon) 0%, var(--bleu-horizon-dark) 100%);
    color: var(--blanc);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}

button {
    font-family: inherit;
    border: none;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Sécurise l'attribut [hidden] contre tout conflit de spécificité avec des
   règles comme `.weather-card { display: flex }` : sans cette règle,
   un élément avec à la fois une classe en display:flex/grid ET l'attribut
   hidden peut rester visible, car le navigateur ne garantit pas que
   [hidden] gagne face à une classe de même spécificité plus bas dans
   la cascade. */
[hidden] {
    display: none !important;
}

button:focus-visible,
input:focus-visible,
a:focus-visible {
    outline: 2px solid var(--jaune-volt);
    outline-offset: 2px;
}

/* ==================================================================
   HEADER
   ================================================================== */
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    padding-top: max(14px, env(safe-area-inset-top));
}

.app-header__brand {
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-header__logo {
    border-radius: 8px;
}

.app-header__name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
}

.app-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.app-header__lang {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--blanc);
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.02em;
}

.app-header__search-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--blanc);
}

/* ==================================================================
   RECHERCHE (overlay plein écran)
   ================================================================== */
.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: var(--bleu-horizon-dark);
    padding: max(14px, env(safe-area-inset-top)) 18px 18px;
    display: flex;
    flex-direction: column;
}

.search-overlay__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-m);
    padding: 12px 14px;
    color: var(--blanc);
}

.search-overlay__bar input {
    flex: 1;
    background: none;
    border: none;
    color: var(--blanc);
    font-size: 1rem;
    font-family: inherit;
}

.search-overlay__bar input::placeholder {
    color: var(--gris-texte);
}

.search-overlay__bar button {
    color: var(--gris-texte);
    font-size: 1.1rem;
    line-height: 1;
}

.search-overlay__results {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    overflow-y: auto;
}

.search-overlay__results li {
    padding: 14px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 2px;
    cursor: pointer;
}

.search-overlay__results li:active {
    background: rgba(255, 255, 255, 0.06);
}

.search-overlay__results .city-name {
    font-weight: 600;
    font-size: 1rem;
}

.search-overlay__results .city-region {
    font-size: 0.8rem;
    color: var(--gris-texte);
}

.search-overlay__empty {
    text-align: center;
    color: var(--gris-texte);
    padding: 24px 0;
    font-size: 0.9rem;
}

/* ==================================================================
   CONTENU PRINCIPAL
   ================================================================== */
.app-main {
    flex: 1;
    padding: 8px 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
}

/* États (chargement / erreur) */
.state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
    padding: 60px 20px;
    color: var(--blanc);
}

.state__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0;
}

.state__subtitle {
    color: var(--gris-texte);
    font-size: 0.9rem;
    margin: 0;
    max-width: 280px;
}

.loader {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--jaune-volt);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.12);
    color: var(--blanc);
    padding: 10px 22px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9rem;
}

/* ==================================================================
   CARTE MÉTÉO PRINCIPALE
   ================================================================== */
.weather-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-l);
    padding: 28px 22px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.weather-card__city {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}

.weather-card__main {
    display: flex;
    align-items: center;
    gap: 14px;
}

.weather-card__icon {
    font-size: 3.4rem;
    line-height: 1;
}

.weather-card__temp {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 4.4rem;
    line-height: 1;
    letter-spacing: -0.03em;
}

.weather-card__label {
    color: var(--gris-texte);
    font-size: 0.95rem;
    margin: 4px 0 16px;
}

.weather-card__details {
    display: flex;
    gap: 10px;
    margin-bottom: 6px;
}

.detail-pill {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--blanc);
}

/* ----- Bandeau hybride : SIGNATURE ELEMENT --------------------------
   C'est l'élément central du concept : il rend visible la tension
   entre la donnée officielle (API) et la voix du terrain (votes).
   Traité différemment du reste (bordure jaune, fond distinct) pour
   qu'il se remarque immédiatement quand il apparaît. */
.hybrid-banner {
    margin-top: 14px;
    width: 100%;
    background: rgba(250, 204, 21, 0.12);
    border: 1px solid rgba(250, 204, 21, 0.45);
    border-radius: var(--radius-m);
    padding: 14px 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
    animation: hybrid-in 0.35s ease-out;
}

@keyframes hybrid-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.hybrid-banner__icon {
    font-size: 1.1rem;
    line-height: 1.3;
}

.hybrid-banner p {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.4;
    color: var(--blanc);
}

.hybrid-banner strong {
    color: var(--jaune-volt);
}

/* Prévisions 5 jours */
.forecast {
    margin-top: 16px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 4px;
}

.forecast-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    padding: 8px 2px;
}

.forecast-day__name {
    font-size: 0.72rem;
    color: var(--gris-texte);
    text-transform: capitalize;
}

.forecast-day__icon {
    font-size: 1.3rem;
}

.forecast-day__max {
    font-size: 0.82rem;
    font-weight: 700;
}

.forecast-day__min {
    font-size: 0.72rem;
    color: var(--gris-texte);
}

/* ==================================================================
   BANNIÈRE DE VOTE — "Le pouvoir du peuple"
   ================================================================== */
.vote-banner {
    background: var(--blanc);
    color: var(--bleu-horizon);
    border-radius: var(--radius-l);
    padding: 20px 18px;
    text-align: center;
}

.vote-banner__question {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.98rem;
    margin: 0 0 16px;
    color: var(--bleu-horizon-dark);
}

.vote-banner__buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.vote-btn {
    background: var(--gris-clair);
    border-radius: var(--radius-s);
    padding: 12px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: transform 0.12s ease, background 0.12s ease;
}

.vote-btn:active {
    transform: scale(0.94);
}

.vote-btn.is-selected {
    background: var(--jaune-volt);
}

.vote-btn__emoji {
    font-size: 1.5rem;
}

.vote-btn__label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--bleu-horizon-dark);
}

.vote-banner__feedback {
    margin: 14px 0 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bleu-horizon-dark);
}

/* ==================================================================
   BANNIÈRE D'INSTALLATION PWA
   ================================================================== */
.install-banner {
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: calc(14px + var(--safe-bottom));
    background: var(--bleu-horizon-dark);
    border: 1px solid rgba(250, 204, 21, 0.3);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-card);
    padding: 14px 14px 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 40;
    animation: install-in 0.4s ease-out;
}

@keyframes install-in {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.install-banner__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 0.78rem;
    color: var(--gris-texte);
}

.install-banner__text strong {
    color: var(--blanc);
    font-size: 0.9rem;
}

.btn-install {
    background: var(--jaune-volt);
    color: var(--bleu-horizon-dark);
    font-weight: 800;
    font-size: 0.82rem;
    padding: 9px 16px;
    border-radius: 999px;
    white-space: nowrap;
}

.install-banner__close {
    color: var(--gris-texte);
    font-size: 1rem;
    padding: 4px;
}

/* ==================================================================
   FOOTER
   ================================================================== */
.app-footer {
    text-align: center;
    padding: 10px 0 calc(16px + var(--safe-bottom));
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.35);
}

.app-footer a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
}

/* ==================================================================
   RESPONSIVE — au-delà du mobile, on garde le format "carte centrée"
   ================================================================== */
@media (min-width: 540px) {
    body {
        align-items: center;
    }
    .app-header, .app-main {
        width: 100%;
        max-width: 480px;
    }
}

/* Accessibilité : réduction des animations si demandé */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}