/**
 * POMAR — weather outlook button + modal.
 * Couleurs approximatives reprises du site réel (jaune moutarde / brun),
 * PAS de la maquette fournie (qui utilisait une palette "clay/apricot" de
 * démonstration avec des polices Google Fonts de substitution — voir la
 * SUBSTITUTION NOTICE dans le fichier de maquette). À ajuster avec les
 * vraies variables de couleur du thème The7 / clva-child si elles existent
 * déjà (voir Personnaliser > Couleurs dans l'admin WP).
 */
.pomar-weather-inline {
	--pomar-w-accent: #C9A227;
	--pomar-w-accent-soft: #F6E9B8;
	--pomar-w-brown: #6E4B2A;
	--pomar-w-brown-dark: #3B2C1C;
	--pomar-w-cream: #FFFDF7;
	--pomar-w-border: #E7DACA;
	--pomar-w-text: #3B2C1C;
	--pomar-w-text-muted: #7A6A57;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 10px 0;
}

.pomar-weather-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	/* min-height (pas height) + padding vertical : le bouton peut grandir si
	   le texte passe sur 2 lignes (mobile étroit) sans déborder de la pilule
	   — c'est ce qui débordait avant (hauteur fixe à 42px, texte sur 3 lignes). */
	min-height: 42px;
	padding: 10px 22px;
	border-radius: 999px;
	border: 1px solid var(--pomar-w-brown);
	background: #fff;
	color: var(--pomar-w-brown);
	font: inherit;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.3;
	letter-spacing: .02em;
	text-transform: lowercase;
	text-align: center;
	cursor: pointer;
	transition: background-color .2s ease;
}
.pomar-weather-btn:hover { background: var(--pomar-w-accent-soft); }
.pomar-weather-btn .pomar-weather-dot {
	width: 7px; height: 7px; border-radius: 99px; background: var(--pomar-w-accent); flex: none;
}
.pomar-weather-hint {
	font-size: 14.5px; color: var(--pomar-w-text-muted, #7A6A57);
}

@media (max-width: 480px) {
	/* Sous 480px, le texte du bouton ne tient plus sur une ligne : on passe
	   le bouton en pleine largeur (il peut alors s'étaler sur 2 lignes
	   proprement) et on place le texte d'accompagnement en dessous plutôt
	   qu'à côté. */
	.pomar-weather-inline { flex-direction: column; align-items: stretch; }
	.pomar-weather-btn { width: 100%; }
}

.pomar-weather-scrim {
	position: fixed; inset: 0; z-index: 100000;
	background: rgba(59, 44, 28, .42);
	display: flex; align-items: center; justify-content: center;
	padding: 24px;
}
.pomar-weather-scrim[hidden] { display: none; }

.pomar-weather-modal {
	width: min(780px, 100%);
	max-height: 90vh;
	overflow-y: auto;
	background: var(--pomar-w-cream, #FFFDF7);
	border-radius: 20px;
	box-shadow: 0 24px 60px -20px rgba(36, 28, 20, .35);
}

.pomar-weather-head {
	padding: 28px 32px 22px;
	border-bottom: 1px solid var(--pomar-w-border, #E7DACA);
	display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
}
.pomar-weather-eyebrow {
	font-size: 13.5px; letter-spacing: .16em; text-transform: uppercase;
	color: var(--pomar-w-text-muted, #7A6A57); margin-bottom: 8px;
}
.pomar-weather-title { margin: 0; font-size: 30px; line-height: 1.25; color: var(--pomar-w-text, #3B2C1C); }
.pomar-weather-title em { font-style: italic; }
.pomar-weather-sub { margin: 8px 0 0; font-size: 16px; color: var(--pomar-w-text-muted, #7A6A57); }

.pomar-weather-close {
	appearance: none; border: 0; background: transparent; font-size: 30px; line-height: 1;
	cursor: pointer; color: var(--pomar-w-text-muted, #7A6A57);
}

.pomar-weather-body { padding: 24px 32px; }
.pomar-weather-loading, .pomar-weather-error { font-size: 15px; color: var(--pomar-w-text-muted, #7A6A57); }

.pomar-weather-kpis {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
@media (max-width: 640px) {
	.pomar-weather-kpis { grid-template-columns: 1fr; }
}

.pomar-weather-kpi {
	background: #fff; border: 1px solid var(--pomar-w-border, #E7DACA); border-radius: 14px;
	padding: 20px 18px;
}
.pomar-weather-kpi-label {
	font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--pomar-w-text-muted, #7A6A57); font-weight: 600;
}
.pomar-weather-kpi-value {
	margin-top: 12px; font-weight: 700; font-size: 42px; line-height: 1; color: var(--pomar-w-text, #3B2C1C);
	white-space: nowrap; /* jamais de retour à la ligne dans la valeur d'un KPI */
}
.pomar-weather-kpi-value small { font-size: 18px; font-weight: 500; color: var(--pomar-w-text-muted, #7A6A57); }

/*
 * KPI "Daylight" : la valeur combine deux heures ("14h23 → 14h41"), donc
 * structurellement plus longue que "18/19" ou "18°–23°" — c'est ce qui
 * passait à la ligne sur desktop. Taille légèrement réduite pour CETTE
 * valeur uniquement (38px vs 42px pour les deux autres KPI) — juste assez
 * pour tenir sur une ligne, tout en restant visuellement cohérente avec le
 * reste de la ligne de KPI (vérifié : tient sur une ligne à 780px de large,
 * scrollWidth == clientWidth, pas de débordement).
 */
.pomar-weather-kpi-value--compact { font-size: 38px; letter-spacing: -.01em; }
.pomar-weather-kpi-value--compact small { font-size: 16px; }
.pomar-weather-kpi-bar {
	margin-top: 12px; height: 6px; border-radius: 999px; background: var(--pomar-w-border, #E7DACA); overflow: hidden;
}
.pomar-weather-kpi-bar i { display: block; height: 100%; background: var(--pomar-w-accent, #C9A227); }
.pomar-weather-kpi-note { margin-top: 10px; font-size: 14.5px; line-height: 1.4; color: var(--pomar-w-text-muted, #7A6A57); }

/*
 * Bloc éditorial : une phrase par mois (choisie selon le mois de la date
 * d'arrivée), générée côté serveur — voir class-pomar-weather-editorial.php.
 * Ce n'est pas une donnée mesurée, c'est du texte de marque écrit une fois
 * par mois et réutilisé — éditable dans ce fichier PHP sans toucher au reste
 * du plugin.
 */
.pomar-weather-quote { padding: 4px 32px 24px; font-size: 16px; line-height: 1.5; color: var(--pomar-w-text, #3B2C1C); }
.pomar-weather-quote em { font-style: italic; color: var(--pomar-w-brown, #6E4B2A); }

.pomar-weather-foot {
	padding: 18px 32px 26px; border-top: 1px solid var(--pomar-w-border, #E7DACA);
	display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
}
.pomar-weather-footnote { margin: 0; font-size: 14.5px; line-height: 1.4; color: var(--pomar-w-text-muted, #7A6A57); flex: 1 1 260px; }
.pomar-weather-cta {
	appearance: none; border: 0; border-radius: 999px; padding: 0 22px; height: 44px;
	background: var(--pomar-w-brown, #6E4B2A); color: #fff; font: inherit; font-weight: 600;
	font-size: 14px; letter-spacing: .06em; text-transform: lowercase; cursor: pointer; flex: none;
}
.pomar-weather-cta:hover { opacity: .9; }