/**
* Météo Sevy — CSS de base partagé
*
* Ce fichier contient TOUT ce qui est commun à toutes les pages météo :
* - Variables de palette (couleurs, typo, espacements, ombres)
* - Reset et fond global
* - Subnav sticky (onglets entre pages)
* - Hero (image panoramique + voile + variantes lite par page)
* - Ticker d'alertes
* - Modale jour
* - Boutons utilitaires (search-btn, export-btn)
* - Loading spinner
* - Print
*
* Les fichiers spécifiques (meteo-dashboard.css, meteo-previsions.css,
* meteo-calendrier.css, meteo-statistiques.css) ne contiennent que ce
* qui est unique à leur page.
*
* Modifier une couleur globale ? → ce fichier, section PALETTE.
* Modifier un hero ? → ce fichier, section HERO.
*
* Version: 3.0.0 — éclaté en modules
*/
/* Polices : deplacees en dans inc/head.php le 2026-09-05.
Un @import ici forcait une chaine en serie (CSS -> polices -> fichiers).
En elles se chargent en parallele du reste. */
/* =====================================================
PLEINE LARGEUR — supprime toutes les marges Astra
y compris top/bottom pour éviter tout gap parasite
au-dessus de la subnav.
===================================================== */
body.meteo-fullwidth-page .ast-container,
body.meteo-fullwidth-page .ast-container-outer,
body.meteo-fullwidth-page .ast-flex,
body.meteo-fullwidth-page #content.site-content,
body.meteo-fullwidth-page .site-content,
body.meteo-fullwidth-page #content,
body.meteo-fullwidth-page #primary,
body.meteo-fullwidth-page .site-main {
padding: 0 !important;
max-width: 100% !important;
width: 100% !important;
margin: 0 !important;
}
body.meteo-fullwidth-page {
overflow-x: hidden;
background: #0A0A0B !important;
}
/* Cache les titres de page Astra qui peuvent créer un espace vide
au-dessus de notre subnav (titre invisible mais qui occupe sa hauteur).
Ces sélecteurs couvrent les variantes Astra / Astra Pro. */
body.meteo-fullwidth-page .entry-header,
body.meteo-fullwidth-page header.entry-header,
body.meteo-fullwidth-page .ast-page-title-bar-wrapper,
body.meteo-fullwidth-page .ast-archive-description,
body.meteo-fullwidth-page .ast-single-post-banner,
body.meteo-fullwidth-page .ast-single-post-header,
body.meteo-fullwidth-page .ast-page-banner,
body.meteo-fullwidth-page .ast-banner-default,
body.meteo-fullwidth-page #ast-page-title-bar,
body.meteo-fullwidth-page .ast-page-title-bar {
display: none !important;
}
/* Forcer 0 padding/margin top/bottom sur toute la chaîne de wrappers
pour que la subnav soit collée au header Astra, sans gap. */
body.meteo-fullwidth-page #primary > article,
body.meteo-fullwidth-page article.meteo-pro-content {
margin: 0 !important;
padding: 0 !important;
}
/* ========================================
PALETTE — Soleil & Nature sur Noir
======================================== */
:root,
[data-theme="dark"],
[data-theme="light"] {
/* Fonds */
--color-bg: #0A0A0B;
--color-bg-soft: #0E0E11;
--color-surface: #121214;
--color-surface-2: #1B1B1F;
--color-surface-3: #25252A;
/* Accents soleil */
--color-primary: #F5B82E; /* or solaire */
--color-primary-light:#FFD06B;
--color-primary-dark: #C9931E;
--color-accent: #E07A1F; /* ambre cuivré */
--color-accent-light: #F39C4A;
/* Nature */
--color-sage: #88A878; /* vert sauge */
--color-moss: #4A6B3A; /* vert mousse */
--color-bronze: #A67C4E; /* bronze chaud */
/* Alertes */
--color-warning: #D29922;
--color-critical: #C94A1E;
--color-info: #88A878;
/* Températures */
--color-temp-cold: #6BA3D6;
--color-temp-mild: #88A878;
--color-temp-warm: #F5B82E;
--color-temp-hot: #B8553A;
/* Texte */
--color-text: #F0EBE0; /* blanc cassé chaud */
--color-text-secondary:#9A9A8C; /* brume */
--color-text-dim: #6A6A60;
--color-text-strong: #FFF8E7;
/* Bordures et grilles */
--color-border: rgba(245, 184, 46, 0.10);
--color-border-strong:rgba(245, 184, 46, 0.25);
--color-grid: rgba(245, 184, 46, 0.05);
/* Gradients */
--gradient-gold: linear-gradient(135deg, #F5B82E 0%, #E07A1F 100%);
--gradient-sage: linear-gradient(135deg, #88A878 0%, #4A6B3A 100%);
--gradient-card: linear-gradient(180deg, #121214 0%, #0E0E11 100%);
--gradient-sunset: linear-gradient(135deg, #F5B82E 0%, #E07A1F 100%);
--gradient-sky: linear-gradient(135deg, #1B1B1F 0%, #0A0A0B 100%);
/* Typo */
--font-display: 'Spectral', serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'Space Mono', 'SF Mono', 'Fira Code', monospace;
/* Espacements */
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 1.5rem;
--spacing-lg: 2.5rem;
--spacing-xl: 4rem;
/* Ombres chaudes */
--shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.35);
--shadow-md: 0 6px 24px rgba(0, 0, 0, 0.45);
--shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
--shadow-glow: 0 0 0 1px rgba(245, 184, 46, 0.18), 0 6px 24px rgba(0, 0, 0, 0.5);
/* Transitions */
--transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-smooth: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ========================================
RESET & BASE
======================================== */
.meteo-pro-page * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.meteo-pro-page {
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
line-height: 1.6;
overflow-x: hidden;
position: relative;
}
/* Halo solaire subtil en haut-gauche */
.meteo-pro-page::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(ellipse at 8% -10%, rgba(245, 184, 46, 0.05) 0%, transparent 45%),
radial-gradient(ellipse at 95% 110%, rgba(136, 168, 120, 0.03) 0%, transparent 50%);
}
.meteo-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 clamp(8px, 3.5vw, 28px);
position: relative;
z-index: 1;
}
/* ========================================
SUBNAV STICKY — onglets entre pages
======================================== */
.meteo-subnav-sticky {
position: sticky;
top: var(--meteo-subnav-top, 0px);
z-index: 9999;
background: rgba(10, 10, 11, 0.92);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--color-border);
width: 100%;
}
.meteo-subnav-sticky .meteo-container {
display: flex;
gap: 4px;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
padding-top: 10px;
padding-bottom: 10px;
}
.meteo-subnav-sticky .meteo-container::-webkit-scrollbar { display: none; }
.page-subnav-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 16px;
border-radius: 2px;
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-text-secondary);
text-decoration: none;
transition: color 0.2s, background 0.2s;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
background: transparent;
}
.page-subnav-link:hover {
color: var(--color-text);
border-bottom-color: var(--color-border-strong);
}
.page-subnav-link.active {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
background: transparent !important;
}
/* Mobile : défilement horizontal (comme desktop). Avec 6 onglets, on NE
compresse PAS pour tout faire tenir (ça se chevauchait) — chaque onglet
garde son libellé complet et la barre se fait glisser du doigt. */
@media (max-width: 640px) {
.meteo-subnav-sticky .meteo-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
gap: 2px;
padding-left: 12px;
padding-right: 12px;
}
.page-subnav-link {
flex: 0 0 auto;
min-width: 0;
font-size: 0.7rem;
padding: 6px 12px;
letter-spacing: 0.06em;
}
}
@media (max-width: 380px) {
.page-subnav-link {
font-size: 0.66rem;
padding: 6px 10px;
letter-spacing: 0.05em;
}
}
/* ========================================
HERO — image panoramique + voile + variantes
========================================
Hauteur fixe identique sur toutes les pages.
Le contenu principal (.meteo-dashboard) chevauche le bas de l'image.
======================================== */
.meteo-hero {
position: relative;
width: 100%;
aspect-ratio: 2400 / 1307; /* ratio exact des photos DJI */
/* Plafond en vh et non en px : le hero s'adapte a la fenetre au lieu
d'une valeur fixe. On garde ~18% d'ecran pour amorcer le contenu.
Le rognage se fait par le BAS (background-position: center top),
donc le ciel et les infos qui s'y trouvent sont preserves. */
max-height: 70vh;
overflow: hidden;
isolation: isolate;
padding: 0;
background: var(--color-bg);
}
/* Image de fond — AUCUN filtre : les photos DJI sont rendues telles quelles.
(2026-09-05 : suppression de saturate/brightness/contrast qui delavaient
les ciels et les bleus du lac. Ne pas les remettre.) */
.meteo-hero::before {
content: '';
position: absolute;
inset: 0;
background-image: url('../img/hero-vinelz.jpg?v=20260905w');
/* WebP en principal, JPEG en repli pour les vieux navigateurs :
ceux qui ignorent image-set() gardent la ligne url() ci-dessus. */
background-image: image-set(
url('../img/hero-vinelz.webp?v=20260905w') type('image/webp'),
url('../img/hero-vinelz.jpg?v=20260905w') type('image/jpeg'));
background-size: cover;
background-position: center top;
transform: scale(1.02);
transition: transform 14s ease-out;
z-index: 0;
filter: none;
}
.meteo-hero:hover::before {
transform: scale(1.05);
}
/* Voile sombre — léger en haut pour le texte, fondu rapide en bas pour rejoindre le dashboard */
.meteo-hero::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(180deg,
rgba(10,10,11,0.28) 0%,
rgba(10,10,11,0.06) 30%,
rgba(10,10,11,0.00) 55%,
rgba(10,10,11,0.00) 100%),
linear-gradient(90deg,
rgba(10,10,11,0.10) 0%,
rgba(10,10,11,0.02) 25%,
rgba(10,10,11,0.02) 75%,
rgba(10,10,11,0.10) 100%);
}
/* ----- Variante LITE (prévisions, calendrier, statistiques) ------
Même hauteur que le hero principal — hérite de .meteo-hero */
.meteo-hero--lite .meteo-container,
.meteo-hero--lite .hero-grid {
min-height: 0;
}
.meteo-hero--lite::after {
background:
linear-gradient(180deg,
rgba(10,10,11,0.22) 0%,
rgba(10,10,11,0.05) 30%,
rgba(10,10,11,0.00) 55%,
rgba(10,10,11,0.00) 100%),
linear-gradient(90deg,
rgba(10,10,11,0.08) 0%,
rgba(10,10,11,0.02) 25%,
rgba(10,10,11,0.02) 75%,
rgba(10,10,11,0.08) 100%) !important;
}
/* H1 du lite = identifiant station discret */
.meteo-hero--lite .station-title h1 {
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-text-strong);
line-height: 1.2;
text-shadow:
0 1px 2px rgba(0, 0, 0, 0.85),
0 2px 12px rgba(0, 0, 0, 0.7);
}
.meteo-hero--lite .station-location {
color: #DDD8C8;
text-shadow:
0 1px 2px rgba(0, 0, 0, 0.8),
0 2px 8px rgba(0, 0, 0, 0.6);
}
/* Bloc titre éditorial (bottom right du lite) */
.hero-title-block {
display: flex;
flex-direction: column;
gap: 0.35rem;
text-align: left;
padding-bottom: 0.3rem;
}
.hero-title-eyebrow {
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-primary);
margin-bottom: 0.35rem;
text-shadow:
0 1px 2px rgba(0, 0, 0, 0.9),
0 2px 14px rgba(0, 0, 0, 0.65);
}
.hero-title-main {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(2.4rem, 5.5vw, 4.5rem);
line-height: 0.95;
color: var(--color-text-strong);
letter-spacing: -0.025em;
text-shadow:
0 2px 4px rgba(0, 0, 0, 0.85),
0 4px 24px rgba(0, 0, 0, 0.75),
0 8px 40px rgba(0, 0, 0, 0.5);
}
.hero-title-sub {
font-family: var(--font-mono);
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.1em;
color: #E5E0D2;
margin-top: 0.2rem;
text-shadow:
0 1px 2px rgba(0, 0, 0, 0.85),
0 2px 10px rgba(0, 0, 0, 0.65);
}
.meteo-hero--lite .hero-main {
justify-content: flex-start;
align-items: flex-end;
}
/* ----- Variantes par page : override de l'image uniquement ----- */
.meteo-hero--calendrier::before {
background-image: url('../img/hero-calendrier.jpg?v=20260905w');
/* WebP en principal, JPEG en repli pour les vieux navigateurs :
ceux qui ignorent image-set() gardent la ligne url() ci-dessus. */
background-image: image-set(
url('../img/hero-calendrier.webp?v=20260905w') type('image/webp'),
url('../img/hero-calendrier.jpg?v=20260905w') type('image/jpeg'));
background-position: center center;
}
.meteo-hero--statistiques::before {
background-image: url('../img/hero-statistiques.jpg?v=20260905w');
/* WebP en principal, JPEG en repli pour les vieux navigateurs :
ceux qui ignorent image-set() gardent la ligne url() ci-dessus. */
background-image: image-set(
url('../img/hero-statistiques.webp?v=20260905w') type('image/webp'),
url('../img/hero-statistiques.jpg?v=20260905w') type('image/jpeg'));
background-position: center 40%;
background-size: cover;
}
.meteo-hero--journal::before {
background-image: url('../img/hero-journal.jpg?v=20260905w');
/* WebP en principal, JPEG en repli pour les vieux navigateurs :
ceux qui ignorent image-set() gardent la ligne url() ci-dessus. */
background-image: image-set(
url('../img/hero-journal.webp?v=20260905w') type('image/webp'),
url('../img/hero-journal.jpg?v=20260905w') type('image/jpeg'));
/* ciel + lac uniquement dans les 20% du haut : on ancre en haut,
sinon le cap max-height:800px les rognait (2026-09-05). */
background-position: center top;
}
.meteo-hero--lune::before {
background-image: url('../img/hero-lune.jpg?v=20260905w');
/* WebP en principal, JPEG en repli pour les vieux navigateurs :
ceux qui ignorent image-set() gardent la ligne url() ci-dessus. */
background-image: image-set(
url('../img/hero-lune.webp?v=20260905w') type('image/webp'),
url('../img/hero-lune.jpg?v=20260905w') type('image/jpeg'));
/* ciel + lune dans les 40% du haut : on ancre en haut */
background-position: center top;
}
/* Note : .meteo-hero--previsions est défini dans meteo-previsions.css */
/* =========================================
OVERLAP — le contenu (.meteo-dashboard) chevauche le bas du hero
160 px d'image restent visibles sous le contenu texte du hero.
border-radius arrondi en haut pour un effet "carte posée sur la photo".
========================================= */
.meteo-dashboard {
position: relative;
z-index: 10;
margin-top: 0; /* ne mord plus sur la photo : le noir commence au bas exact de l'image */
background: var(--color-bg);
padding-top: 2rem;
}
/* =====================================================================
DASHBOARD — GRAND ECRAN UNIQUEMENT (> 1024 px)
La photo sert de FOND : elle garde sa hauteur entiere et le contenu
vient se poser DESSUS au lieu de la repousser.
1. le hero n'est plus plafonne : la photo se deploie en entier
2. .meteo-dashboard perd son fond opaque (c'etait lui, la "limite
noire" qui remontait avec le contenu) et chevauche la photo
3. temperature + mesures remontes dans le ciel
Le chevauchement est une valeur en pixels : elle n'a de sens que sur
un ecran large. Sous 1025 px, RIEN de tout ceci ne s'applique et la
mise en page mobile d'origine est conservee telle quelle.
(2026-09-05)
===================================================================== */
/* =====================================================================
PAGE LUNE — les infos sont INTEGREES a la photo (2026-09-05)
Le bloc lune vit desormais dans le hero, pas dans un panneau pose
par-dessus. Ombres portees pour la lisibilite sur le ciel nocturne.
===================================================================== */
/* .meteo-hero--lite impose align-items:flex-end sur .hero-main, ce qui
superposait le titre et le bloc lune. Selecteur plus specifique pour
forcer un empilement vertical propre. */
/* Les variables --moon-* ne sont declarees que sur .moon-page. Le bloc
ayant quitte ce conteneur, elles n'etaient plus definies et les
couleurs retombaient en NOIR sur une photo de nuit. On les redeclare
ici, avec des valeurs un peu plus claires : le fond n'est plus un
aplat sombre mais une photo. */
.meteo-hero--lune {
--moon-gold: #F5B82E;
--moon-text: #F2F6FC;
--moon-text-dim: #C6D2E4;
--moon-card: rgba(255, 255, 255, 0.06);
--moon-card-bd: rgba(255, 255, 255, 0.14);
}
.mw-moon .meteo-hero--lune .hero-main {
display: flex;
flex-direction: row; /* titre a gauche, infos lune a droite */
align-items: flex-start;
justify-content: space-between;
gap: 3rem;
flex-wrap: wrap;
}
.meteo-hero--lune .moon-hero-row {
justify-content: flex-end;
align-items: flex-start;
gap: clamp(1.5rem, 4vw, 3rem);
margin: 0; /* aligne en haut avec le titre */
}
.meteo-hero--lune .moon-hero { align-items: flex-start; }
.meteo-hero--lune .moon-hero-name { margin-top: 0.6rem; }
.meteo-hero--lune .moon-next { display: flex; flex-direction: column; gap: 0.9rem; }
.meteo-hero--lune .moon-hero-name,
.meteo-hero--lune .moon-hero-illum,
.meteo-hero--lune .moon-hero-date,
.meteo-hero--lune .moon-next-label,
.meteo-hero--lune .moon-next-date {
text-shadow: 0 2px 10px rgba(0,0,0,0.85), 0 1px 3px rgba(0,0,0,0.95);
}
/* le disque est petit dans le hero : on bride sa taille */
.meteo-hero--lune .moon-hero-disc { transform: scale(0.72); transform-origin: center top; }
/* Mobile/tablette : le hero s'adapte a son contenu, sinon overflow:hidden
couperait le bloc lune sur les petits ecrans. */
@media (max-width: 1024px) {
.mw-moon .meteo-hero {
aspect-ratio: auto;
max-height: none;
min-height: 78vh;
}
/* Sur petit ecran le bloc retombe sur la colline sombre : le disque
est un SVG sombre, aucune ombre de texte ne le rendrait lisible.
On lui donne un support translucide — reserve au mobile, le grand
ecran garde l'integration directe sur la photo. */
.meteo-hero--lune .moon-hero-row {
background: rgba(7, 11, 22, 0.72);
backdrop-filter: blur(7px);
-webkit-backdrop-filter: blur(7px);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 16px;
padding: 1.4rem 1.2rem;
margin-top: 1.4rem;
}
}
@media (min-width: 1025px) {
/* la photo de la lune se deploie en entier, comme le dashboard */
.mw-moon .meteo-hero { max-height: none; }
/* 1. la photo n'est jamais rognee — DASHBOARD UNIQUEMENT */
.mw-dashboard .meteo-hero {
max-height: none;
}
/* 2. le bloc de contenu perd son fond opaque et chevauche la photo.
Sous la photo, le fond noir de la page reprend naturellement. */
.mw-dashboard .meteo-dashboard {
background: transparent;
/* En vw et non en px : la hauteur du hero est proportionnelle a sa
largeur (aspect-ratio 2400/1307), donc un chevauchement fixe en
pixels remontait trop haut sur les ecrans de bureau etroits et
faisait chevaucher la banderole avec le bloc de mesures.
Mais le bloc de mesures, lui, reste a ~466px quelle que soit la
largeur (tailles de police fixes) : une simple proportion ne
suffisait pas non plus. D'ou ce max() a deux regimes :
- hero = 54.46vw (ratio 2400/1307) + 118px de barres
- au-dessus de ~1620px : -470px, l'espacement calibre
- en dessous : le contenu est plaque a 530px minimum,
ce qui garantit qu'il ne remonte jamais sur les mesures. */
margin-top: max(412px - 54.46vw, -470px);
}
/* 3. le bloc du hero remonte sous le titre de station, sinon le
contenu qui chevauche viendrait le recouvrir.
Seul l'axe vertical change — largeur, alignement horizontal
et tailles de police restent identiques. */
.meteo-hero:not(.meteo-hero--lite) .hero-main,
.meteo-hero--lune .hero-main { /* la lune est --lite mais doit remonter aussi */
grid-row: 2;
align-self: start;
margin-top: 1.5vw;
}
}
/* Filet doré au bas du hero — ligne d'horizon signature */
.meteo-hero .meteo-container::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(245, 184, 46, 0.35) 20%,
rgba(245, 184, 46, 0.65) 50%,
rgba(245, 184, 46, 0.35) 80%,
transparent 100%);
z-index: 3;
}
.meteo-hero .meteo-container {
position: relative;
z-index: 2;
height: 100%;
padding-top: 2rem;
padding-bottom: 60px; /* espace sous le contenu du hero avant la transition voile */
display: flex;
flex-direction: column;
}
.meteo-hero .hero-grid {
flex: 1;
}
/* Layout interne : top + bottom */
.hero-grid {
display: grid;
grid-template-rows: auto 1fr auto;
gap: 1rem;
}
.hero-main {
grid-row: 3;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 2rem;
flex-wrap: wrap;
}
/* Bandeau station — coin haut-gauche */
.station-title {
grid-row: 1;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 2rem;
flex-wrap: wrap;
}
.station-title h1 {
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 400;
color: var(--color-text);
margin: 0;
letter-spacing: 0.18em;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 0.65rem;
line-height: 1.2;
}
.station-title h1::before {
content: '';
width: 8px; height: 8px;
background: var(--color-primary);
border-radius: 50%;
box-shadow: 0 0 12px rgba(245, 184, 46, 0.7);
animation: stationPulse 2.5s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes stationPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(0.85); }
}
.station-location {
font-family: var(--font-mono);
font-size: 0.7rem;
color: var(--color-text-secondary);
letter-spacing: 0.1em;
margin-top: 4px;
text-transform: uppercase;
}
.station-location #lastUpdate {
color: var(--color-primary);
letter-spacing: 0.08em;
}
/* ========================================
TICKER ALERTES — CNN style noir + or
======================================== */
.alerts-ticker {
display: flex;
align-items: stretch;
overflow: hidden;
border-radius: 2px;
margin-bottom: 1rem;
height: 44px;
border: 1px solid var(--color-border);
background: var(--color-surface);
position: relative;
}
.alerts-ticker--ok { border-color: rgba(136, 168, 120, 0.25); }
.alerts-ticker--warning { border-color: rgba(210, 153, 34, 0.35); }
.alerts-ticker--critical { border-color: rgba(201, 74, 30, 0.45); }
.alerts-ticker__label {
flex-shrink: 0;
display: flex;
align-items: center;
padding: 0 1.4rem 0 1.5rem;
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.22em;
white-space: nowrap;
color: var(--color-bg);
background: var(--color-primary);
position: relative;
border-right: none;
}
.alerts-ticker__label::after {
content: '';
position: absolute;
right: -16px; top: 0; bottom: 0;
width: 16px;
background: linear-gradient(135deg, var(--color-primary) 50%, transparent 50%);
}
.alerts-ticker--warning .alerts-ticker__label { background: var(--color-warning); }
.alerts-ticker--warning .alerts-ticker__label::after { background: linear-gradient(135deg, var(--color-warning) 50%, transparent 50%); }
.alerts-ticker--critical .alerts-ticker__label { background: var(--color-critical); color: var(--color-text-strong); }
.alerts-ticker--critical .alerts-ticker__label::after { background: linear-gradient(135deg, var(--color-critical) 50%, transparent 50%); }
/* Pas d'alerte → étiquette « OK » verte (comme l'app) */
.alerts-ticker--ok .alerts-ticker__label { background: #2f9e44; color: #ffffff; }
.alerts-ticker--ok .alerts-ticker__label::after { background: linear-gradient(135deg, #2f9e44 50%, transparent 50%); }
.alerts-ticker__track {
flex: 1;
overflow: hidden;
display: flex;
align-items: center;
padding-left: 2rem;
}
.alerts-ticker__belt {
display: flex;
align-items: center;
width: max-content;
white-space: nowrap;
animation: ticker-belt 22s linear infinite;
will-change: transform;
}
.alerts-ticker__belt span {
font-family: var(--font-mono);
white-space: nowrap;
font-size: 0.82rem;
font-weight: 400;
letter-spacing: 0.04em;
padding-right: 6rem;
color: var(--color-text);
}
.alerts-ticker--ok .alerts-ticker__belt span { color: var(--color-text); }
.alerts-ticker--warning .alerts-ticker__belt span { color: var(--color-warning); }
.alerts-ticker--critical .alerts-ticker__belt span { color: #FF8A6E; }
@keyframes ticker-belt {
0% { transform: translateX(0%); }
100% { transform: translateX(-50%); }
}
.alerts-ticker:hover .alerts-ticker__belt { animation-play-state: paused; }
/* Bloc alertes legacy masqué */
#alertsCard, .alerts-card { display: none !important; }
/* ========================================
MODALE JOUR (calendrier)
======================================== */
.meteo-modal-overlay {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 18px;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 9999;
}
.meteo-modal {
width: min(720px, 100%);
max-height: min(78vh, 720px);
overflow: auto;
background: var(--color-surface);
border: 1px solid var(--color-border-strong);
border-radius: 4px;
box-shadow: var(--shadow-lg);
}
.meteo-modal-body { padding: 1.5rem 1.5rem 1.6rem; }
.meteo-day-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 1.2rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--color-border);
}
.meteo-day-modal-title {
font-family: var(--font-display);
font-size: 1.3rem;
font-weight: 400;
color: var(--color-primary);
line-height: 1.2;
letter-spacing: -0.01em;
}
.meteo-day-modal-close {
border: 1px solid var(--color-border);
background: var(--color-surface-2);
color: var(--color-text);
width: 36px;
height: 36px;
border-radius: 3px;
cursor: pointer;
transition: border-color var(--transition-fast);
}
.meteo-day-modal-close:hover { border-color: var(--color-primary); }
.meteo-day-modal-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.meteo-day-metric {
padding: 1rem;
background: var(--color-surface-2);
border: 1px solid var(--color-border);
border-radius: 3px;
min-width: 0;
}
.meteo-day-metric-label {
font-family: var(--font-mono);
font-size: 0.7rem;
color: var(--color-text-secondary);
margin-bottom: 6px;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.meteo-day-metric-value {
font-family: var(--font-display);
font-size: 1.4rem;
color: var(--color-primary);
overflow-wrap: anywhere;
line-height: 1;
}
.meteo-day-metric-sub {
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--color-text-secondary);
margin-top: 0.4rem;
}
@media (max-width: 520px) {
.meteo-day-modal-grid { grid-template-columns: 1fr; }
}
/* ========================================
BOUTONS (search, export)
======================================== */
.search-btn,
.export-btn {
padding: 0.85rem 1.5rem;
font-family: var(--font-mono);
font-size: 0.78rem;
background: var(--color-primary);
color: var(--color-bg);
border: none;
border-radius: 3px;
cursor: pointer;
transition: background var(--transition-fast);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.search-btn:hover,
.export-btn:hover {
background: var(--color-primary-light);
}
/* ========================================
LOADING / SPINNER
======================================== */
.loading {
display: inline-block;
width: 18px;
height: 18px;
border: 2px solid var(--color-border);
border-top-color: var(--color-primary);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.alerts-status {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 0.85rem;
color: var(--color-text-secondary);
padding: 0.75rem 1rem;
background: var(--color-surface-2);
border-radius: 3px;
border: 1px solid var(--color-border);
}
.alerts-status--loading { color: var(--color-text-secondary); }
.alerts-status--normal { color: var(--color-sage); border-color: rgba(136, 168, 120, 0.3); }
.alerts-status--warning { color: var(--color-warning); border-color: rgba(210, 153, 34, 0.3); }
.alerts-status--critical { color: var(--color-critical); border-color: rgba(201, 74, 30, 0.4); }
.alerts-spinner {
display: inline-block;
width: 12px; height: 12px;
border: 2px solid var(--color-border);
border-top-color: var(--color-primary);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
.alerts-list {
list-style: none;
padding: 0; margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.alerts-list-item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 0.7rem 0.9rem;
border-radius: 3px;
border-left: 3px solid transparent;
background: var(--color-surface-2);
border: 1px solid var(--color-border);
font-family: var(--font-mono);
font-size: 0.82rem;
line-height: 1.4;
color: var(--color-text);
}
.alerts-list-item--critical { border-left-color: var(--color-critical); }
.alerts-list-item--warning { border-left-color: var(--color-warning); }
.alerts-list-item--info { border-left-color: var(--color-sage); }
/* ========================================
PRINT
======================================== */
@media print {
.meteo-tabs, .theme-toggle, .meteo-subnav-sticky, .alerts-ticker { display: none; }
.meteo-pro-page { background: white; color: black; }
}
/* ========================================
RESPONSIVE — règles de base
======================================== */
@media (max-width: 992px) {
.meteo-hero .meteo-container { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.hero-main { flex-direction: column; align-items: stretch; }
}
@media (max-width: 768px) {
.meteo-container { padding: 0 clamp(8px, 3vw, 16px); }
.meteo-hero .meteo-container { padding: 1.2rem 1rem 1.5rem; }
.station-title { gap: 1rem; }
.station-title h1 { font-size: 0.7rem; letter-spacing: 0.15em; }
.station-location { font-size: 0.62rem; }
.hero-main { gap: 1.25rem; }
.alerts-ticker { height: 36px; margin-bottom: 1rem; }
.alerts-ticker__label { font-size: 0.62rem; padding: 0 0.7rem 0 0.85rem; letter-spacing: 0.18em; }
.alerts-ticker__belt span { font-size: 0.74rem; padding-right: 4rem; }
/* Hero variants : on garde l'aspect-ratio 21/9 partout, pas de min-height vh */
.hero-title-main { font-size: clamp(2rem, 8vw, 2.8rem); }
.hero-title-eyebrow { font-size: 0.62rem; letter-spacing: 0.14em; }
.hero-title-sub { font-size: 0.68rem; }
}
@media (max-width: 480px) {
.station-title h1 { font-size: 0.66rem; }
}
/* =============================================================
Insights : compass vent, flèche tendance pression, bloc astronomie
============================================================= */
.wind-compass-wrap {
position: relative;
width: 22px;
height: 22px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.30);
display: inline-flex !important;
align-items: center;
justify-content: center;
vertical-align: middle;
margin-right: 0.4rem;
flex-shrink: 0;
}
.wind-compass-north {
position: absolute;
top: 1px;
left: 50%;
transform: translateX(-50%);
width: 3px;
height: 3px;
border-radius: 50%;
background: rgba(217, 83, 79, 0.85);
}
.wind-compass-arrow {
display: inline-block;
font-size: 0.75rem;
line-height: 1;
color: #f1c40f;
transform: rotate(0deg);
transition: transform 0.6s ease;
transform-origin: center;
}
.wind-cardinal {
margin-left: 0.35rem;
font-size: 0.8em;
opacity: 0.75;
font-weight: 500;
}
.pressure-trend {
margin-left: 0.25rem;
font-weight: 700;
font-size: 0.95em;
transition: color 0.4s ease;
}
.meteo-insights {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.6rem;
margin-bottom: 1rem;
padding: 0.8rem 1rem;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
}
.insight-cell {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.2rem;
}
.insight-icon {
font-size: 1.25rem;
}
.insight-emoji {
margin-right: 0.2rem;
}
.insight-value {
font-size: 0.95rem;
font-weight: 600;
color: var(--color-text-strong, #fff);
line-height: 1.2;
}
.insight-label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.04em;
opacity: 0.55;
}
@media (max-width: 480px) {
.meteo-insights { grid-template-columns: repeat(2, 1fr); gap: 0.4rem; }
.insight-value { font-size: 0.85rem; }
}