/*
Fichier : css_meteo.css
Chemin  : D:\speedclicV2\www\assets\css\css_meteo.css
Rôle    : Zone météo de la colonne droite du bandeau — rendu Speedclic, celui qui
          remplace la vignette Météo-France depuis le 06/08/2026.

Fichier dédié, nommé par sa fonction (règles 35 à 37). Il ne touche à rien d'autre
que .sc-mto* : la zone qui l'accueille (.sc-weather) garde ses dimensions, il n'y a
donc aucun risque de déplacer ou de rétrécir ce qui existait déjà.

Créé : 06/08/2026
*/

.sc-mto {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 5px 10px 5px;
    box-sizing: border-box;
    background: linear-gradient(160deg, #3a6ea5 0%, #2f5c8a 100%);
    color: #fff;
    font-family: inherit;
    line-height: 1.2;
}

/* LE BLOC PRINCIPAL OCCUPE TOUTE LA HAUTEUR RESTANTE ET SE CENTRE DEDANS.
   Les deux lignes de texte, elles, sont collées en bas (demande de Ramon,
   06/08/2026) : le regard tombe sur la ville et la température, le détail reste
   disponible sans réclamer l'attention. */
/* LA MARQUE — première ligne, en haut à gauche. Elle ne prend pas de place au
   bloc central : elle est posée au-dessus, discrète, et ne bouge jamais. */
.sc-mto-marque {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    opacity: .72;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sc-mto-haut {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-height: 0;
}

.sc-mto-lieu {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2px;
    opacity: .92;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Le dessin du ciel et la température, côte à côte, au centre du cadre. */
.sc-mto-centre {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.sc-mto-picto {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}

/* Le mot du ciel sous le dessin : petit, il nomme ce que l'image montre. */
.sc-mto-ciel {
    font-size: 11px;
    opacity: .85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.sc-mto-temp {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -1px;
    white-space: nowrap;
}

/* Les deux lignes du bas : elles ne poussent pas, elles ne s'étirent pas. */
.sc-mto-lignes {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1px 12px;
    font-size: 11px;
    opacity: .95;
}

/* Le libellé se distingue de sa valeur sans crier : c'est une zone de coin d'écran,
   pas un tableau de bord. */
.sc-mto-lignes i {
    font-style: normal;
    opacity: .72;
    margin-right: 3px;
}

.sc-mto-source {
    flex: 0 0 auto;
    text-align: center;
    font-size: 10px;
    opacity: .68;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* PÉRIMÉ : l'écran doit le DIRE, pas se taire ni se vider. Une météo d'hier
   affichée comme celle d'aujourd'hui est un mensonge ; une météo d'hier annoncée
   comme telle reste une information. */
.sc-mto-perime { background: linear-gradient(160deg, #6b6f74 0%, #55585c 100%); }

.sc-mto-alerte {
    flex: 0 0 auto;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #ffd9a0;
}

/* Aucun dépôt : même surface, même place, un message explicite. */
.sc-mto-vide {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 8px;
    box-sizing: border-box;
    font-size: 12px;
    color: #5a6b7a;
    text-align: center;
}

/* CARROUSEL DU MODE NATIONAL — les villes sont toutes dans la page, une seule
   est visible. Le conteneur occupe toute la zone pour qu'aucune bascule ne
   fasse sauter la hauteur du bandeau. */
.sc-mto-carrousel,
.sc-mto-ville { width: 100%; height: 100%; }

.sc-mto-ville[hidden] { display: none; }

/* === FIN DU FICHIER : D:\speedclicV2\www\assets\css\css_meteo.css === */