/* ==========================================================================
   Carte météo de Vendée — bloc réutilisable (modules/carte-vendee.php)
   Le tracé SVG est celui de la colonne de droite ; les marqueurs sont des
   éléments HTML positionnés en % du cadre, donc solidaires du dessin quelle
   que soit la largeur.
   ========================================================================== */

/* Palette par défaut : celle de Vendée naturisme (menthe et corail). Le site
   breton applique .carteMeteo--or, qui ne redéfinit que ces variables — le
   fichier reste ainsi strictement identique dans les deux projets. */
/* Sur :root et non sur .carteMeteo : l'outil de calage affiche la carte hors
   de cette section, et des variables non résolues y donneraient un tracé noir
   sur fond absent. */
:root {
	--carte-sea: #d9f0f4;
	--carte-sea-deep: #b9e2ea;
	--carte-land: #fdfdfb;
	--carte-land-edge: #cfe6e2;
	--carte-ink: #1a3a4a;
	--carte-accent: #0f7d92;
	--carte-plage: #fdac93;
	--carte-plage-bord: rgba(190, 95, 65, .38);
	--carte-doux: #f2fafb;
	--carte-ciel: linear-gradient(170deg, #eafaf9 0%, #d6eef4 55%, #cfe7f0 100%);
}

.carteMeteo {
	background: var(--carte-ciel);
	padding: 28px 0 34px;
	border-bottom: 1px solid rgba(15, 125, 146, .12);
}

/* Bretagne naturisme : jaune d'or (--color-primary #ffdc72 du thème du site).
   S'applique sur la section, ou directement sur le cadre de la carte dans
   l'outil de calage — les variables cascadent depuis l'élément porteur. */
.carteMeteo--or {
	--carte-sea: #fdf1cf;
	--carte-sea-deep: #f7e0a0;
	--carte-land: #fffdf7;
	--carte-land-edge: #e9d7a4;
	--carte-ink: #463509;
	--carte-accent: #a97400;
	--carte-plage: #ffdc72;
	--carte-plage-bord: rgba(150, 105, 0, .42);
	--carte-doux: #fffaea;
	--carte-ciel: linear-gradient(170deg, #fffbef 0%, #fdf1cf 55%, #fae9b8 100%);

	border-bottom-color: rgba(169, 116, 0, .14);
}

.carteMeteo__inner {
	max-width: 1380px;
	margin: 0 auto;
	padding: 0 22px;
}

/* Variante « page météo » : le bloc n'est plus une accroche mais le contenu
   principal — on lui donne plus d'air et on garde le panneau à portée d'œil
   pendant qu'on parcourt la carte. */
.carteMeteo--page { padding: 34px 0 40px; }
.carteMeteo--page .carteMeteo__inner { max-width: 1500px; }
.carteMeteo--page .carteMeteo__titre { font-size: clamp(1.5rem, 3vw, 2.3rem); }

@media (min-width: 981px) {
	.carteMeteo--page .carteMeteo__corps > aside {
		position: sticky;
		top: 20px;
	}
}

.carteMeteo__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 6px;
}

.carteMeteo__titre {
	margin: 0;
	font-size: clamp(1.3rem, 2.6vw, 2rem);
	line-height: 1.15;
	color: var(--carte-ink);
	letter-spacing: -0.01em;
}

.carteMeteo__date {
	margin: 4px 0 0;
	font-size: .85rem;
	color: #5a7c88;
}

.carteMeteo__lien {
	font-size: .85rem;
	font-weight: 600;
	color: var(--carte-accent);
	white-space: nowrap;
}

.carteMeteo__lien:hover { text-decoration: underline; }

/* --- Bandeau démo -------------------------------------------------------- */
.carteMeteo__demo {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff4d6;
	border-left: 4px solid #e0a500;
	border-radius: 6px;
	padding: 9px 14px;
	margin: 12px 0 0;
	font-size: .84rem;
	color: #6b5200;
}

/* --- Barre de contrôles -------------------------------------------------- */
.carteMeteo__controles {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 16px 0 14px;
}

.carteJours {
	display: flex;
	gap: 7px;
	overflow-x: auto;
	padding-bottom: 2px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.carteJours::-webkit-scrollbar { display: none; }

.carteJours__btn {
	flex: 0 0 auto;
	cursor: pointer;
	border: 1px solid rgba(15, 125, 146, .22);
	background: rgba(255, 255, 255, .78);
	color: var(--carte-ink);
	border-radius: 999px;
	padding: 7px 15px;
	font: inherit;
	font-size: .85rem;
	font-weight: 600;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.carteJours__btn:hover { background: #fff; }
.carteJours__btn.is-active {
	background: var(--carte-accent);
	border-color: var(--carte-accent);
	color: #fff;
}

.carteSeg {
	display: inline-flex;
	border: 1px solid rgba(15, 125, 146, .22);
	border-radius: 999px;
	overflow: hidden;
	background: rgba(255, 255, 255, .78);
}
.carteSeg__btn {
	cursor: pointer;
	border: 0;
	background: transparent;
	color: var(--carte-ink);
	padding: 7px 16px;
	font: inherit;
	font-size: .85rem;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	transition: background-color .15s ease, color .15s ease;
}
.carteSeg__btn + .carteSeg__btn { border-left: 1px solid rgba(15, 125, 146, .18); }
.carteSeg__btn.is-active { background: var(--carte-accent); color: #fff; }

/* --- Disposition carte + panneau ---------------------------------------- */
.carteMeteo__corps {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: 22px;
	align-items: start;
}

@media (max-width: 980px) {
	.carteMeteo__corps { grid-template-columns: minmax(0, 1fr); }
}

/* --- Le cadre de la carte ------------------------------------------------ */
/* --carte-ratio est posé par le PHP (carte_vendee_ratio()) : il vaut le rapport
   du cadre, marge comprise, et doit rester solidaire du viewBox du SVG. */
.carteGeo {
	position: relative;
	width: 100%;
	aspect-ratio: var(--carte-ratio, 1658.44 / 1084.61);
	background: linear-gradient(160deg, var(--carte-sea) 0%, var(--carte-sea-deep) 100%);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(15, 60, 80, .13);
	touch-action: manipulation;
}

/* Repli pour les navigateurs sans aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
	.carteGeo::before { content: ""; display: block; padding-top: 65.4%; }
}

.carteGeo__fond,
.carteGeo__vent,
.carteGeo__marqueurs {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.carteGeo__fond { display: block; }

/* Les valeurs de repli des var() comptent : un <path> sans fill résolu se
   remplit en NOIR. Le SVG porte en plus des attributs fill/stroke, que le CSS
   surcharge — ainsi la carte reste blanche même sans feuille de style.
   non-scaling-stroke : sans lui, stroke-width s'exprime en unités du viewBox
   et le trait serait six fois plus épais sur le tracé breton (247 unités de
   large) que sur le vendéen (1554). */
.carteGeo__terre {
	fill: var(--carte-land, #fdfdfb);
	fill-rule: evenodd;
	stroke: var(--carte-land-edge, #cfe6e2);
	stroke-width: 1.4;
	vector-effect: non-scaling-stroke;
}

/* Départements (carte bretonne uniquement — le tracé vendéen n'en a pas).
   Repère visuel pour situer les plages, sans lien de navigation : un clic
   concurrent gênerait la sélection d'un marqueur. */
.carteGeo__dep {
	fill: transparent;
	stroke: rgba(15, 125, 146, .16);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
	transition: fill .18s ease;
	cursor: help;
}
.carteGeo__dep:hover { fill: rgba(15, 125, 146, .07); }

.carteGeo__vent {
	pointer-events: none;
	opacity: 0;
	transition: opacity .35s ease;
}
.carteGeo.is-vent .carteGeo__vent { opacity: 1; }

.carteGeo__marqueurs { pointer-events: none; }

/* --- Marqueurs ----------------------------------------------------------- */
.carteGeo__pin {
	position: absolute;
	transform: translate(-50%, -50%);
	pointer-events: auto;
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: transform .18s ease;
	z-index: 2;
}
.carteGeo__pin:hover,
.carteGeo__pin:focus-visible { transform: translate(-50%, -50%) scale(1.12); z-index: 5; }
.carteGeo__pin.is-active { z-index: 6; }

/* Fond corail : c'est ce qui distingue une plage d'une ville au premier coup
   d'œil, avant même la différence de taille. */
.carteGeo__bulle {
	position: relative; /* ancre la pastille live */
	display: flex;
	align-items: center;
	gap: 2px;
	background: var(--carte-plage);
	/* Le corail se détache peu de la mer pâle : c'est le liseré qui dessine le
	   bord de la bulle, aussi bien au-dessus des terres que de l'eau. */
	border: 1px solid var(--carte-plage-bord);
	border-radius: 999px;
	padding: 2px 9px 2px 3px;
	box-shadow: 0 3px 9px rgba(10, 60, 75, .18);
	white-space: nowrap;
}
.carteGeo__pin.is-active .carteGeo__bulle {
	border-color: var(--carte-accent);
	box-shadow: 0 0 0 3px rgba(15, 125, 146, .18), 0 3px 9px rgba(10, 60, 75, .2);
}

/* Halo blanc : sans lui, un soleil jaune se noie dans le corail de la bulle. */
.carteGeo__icone {
	width: 38px;
	height: 38px;
	display: block;
	filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .95));
}

.carteGeo__temp {
	font-weight: 700;
	font-size: .95rem;
	color: var(--carte-ink);
}

.carteGeo__nom {
	margin-top: 2px;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .02em;
	color: #35606e;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .9), 0 0 6px rgba(255, 255, 255, .85);
	max-width: 110px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Villes : présentes mais secondaires — la carte parle d'abord des plages.
   Plus petites, sans relief, en retrait tant qu'on ne les survole pas. */
.carteGeo__pin--ville { z-index: 1; }
.carteGeo__pin--ville .carteGeo__bulle {
	background: rgba(255, 255, 255, .78);
	border-color: rgba(15, 125, 146, .12);
	box-shadow: none;
	padding: 1px 7px 1px 2px;
	gap: 0;
}
.carteGeo__pin--ville .carteGeo__icone {
	width: 26px;
	height: 26px;
	filter: none; /* fond blanc : le halo est inutile */
}
.carteGeo__pin--ville .carteGeo__fleche { width: 21px; height: 21px; }
.carteGeo__pin--ville .carteGeo__temp { font-size: .78rem; font-weight: 600; color: #4d6b76; }
.carteGeo__pin--ville .carteGeo__nom {
	font-size: .62rem;
	font-weight: 500;
	color: #6d8a94;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.carteGeo__pin--ville:hover .carteGeo__bulle,
.carteGeo__pin--ville:focus-visible .carteGeo__bulle {
	background: rgba(255, 255, 255, .95);
	box-shadow: 0 3px 9px rgba(10, 60, 75, .18);
}

/* Pastille live : un ambassadeur a publié depuis moins de 48 h.
   Même rouge et même cadence que le badge LIVE de plage.php. */
.carteGeo__live {
	position: absolute;
	top: -3px;
	right: -3px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #ff2d2d;
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
	animation: carteGeo-live 1.4s ease-in-out infinite;
}

@keyframes carteGeo-live {
	0%, 100% { opacity: 1; }
	50%      { opacity: .25; }
}

@media (prefers-reduced-motion: reduce) {
	.carteGeo__live { animation: none; }
}

/* Position exacte de la plage, quand la bulle a dû être écartée */
.carteGeo__exact {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--carte-accent);
	border: 1.5px solid #fff;
	box-shadow: 0 1px 3px rgba(10, 60, 75, .35);
	z-index: 1;
}

/* Flèche de vent (mode vent) */
.carteGeo__fleche {
	width: 30px;
	height: 30px;
	flex: 0 0 auto;
	transition: transform .3s ease;
}

/* --- Panneau de détail --------------------------------------------------- */
.cartePanneau {
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(15, 60, 80, .13);
}

.cartePanneau__photo {
	display: block;
	width: 100%;
	height: 150px;
	object-fit: cover;
	background: #dfeef1;
}

/* --- Contenu live d'un ambassadeur --------------------------------------- */
/* La vidéo est verticale (9:16) : on la recadre pour qu'elle tienne la place
   de la photo sans étirer le panneau. */
.cartePanneau__live {
	position: relative;
	background: #12252c;
	line-height: 0;
}
.cartePanneau__video {
	display: block;
	width: 100%;
	height: 210px;
	object-fit: cover;
}
.cartePanneau__badge {
	position: absolute;
	top: 9px;
	left: 9px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: #ff2d2d;
	color: #fff;
	padding: 3px 8px;
	border-radius: 4px;
	font-size: .7rem;
	font-weight: bold;
	letter-spacing: .05em;
	line-height: 1.4;
}
.cartePanneau__badge i {
	font-size: .5rem;
	animation: carteGeo-live 1.4s ease-in-out infinite;
}
.cartePanneau__age {
	position: absolute;
	bottom: 9px;
	right: 9px;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	padding: 2px 8px;
	border-radius: 4px;
	font-size: .68rem;
	line-height: 1.5;
}

.cartePanneau__mot {
	margin: 0 0 12px;
	padding: 10px 12px;
	background: #fff5f3;
	border-left: 3px solid #ff2d2d;
	border-radius: 0 8px 8px 0;
}
.cartePanneau__mot p {
	margin: 0 0 6px;
	font-size: .87rem;
	line-height: 1.45;
	color: #3d5560;
	font-style: italic;
}
.cartePanneau__mot footer {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: .72rem;
	color: #93a9b1;
}
.cartePanneau__motPuce {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #ff2d2d;
	flex: 0 0 auto;
	animation: carteGeo-live 1.4s ease-in-out infinite;
}

.cartePanneau__corps { padding: 14px 16px 16px; }

.cartePanneau__titre {
	margin: 0 0 2px;
	font-size: 1.12rem;
	color: var(--carte-accent);
	line-height: 1.2;
}
.cartePanneau__geo {
	margin: 0 0 10px;
	font-size: .7rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #93a9b1;
}

.cartePanneau__cond {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
}
.cartePanneau__cond img { width: 54px; height: 54px; }
.cartePanneau__temp {
	font-size: 1.9rem;
	font-weight: 700;
	color: var(--carte-ink);
	line-height: 1;
}
.cartePanneau__label { font-size: .85rem; color: #4d6b76; }

.cartePanneau__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 12px 0;
}
.cartePanneau__stat {
	background: var(--carte-doux);
	border-radius: 9px;
	padding: 8px 6px;
	text-align: center;
}
.cartePanneau__statVal {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	color: var(--carte-ink);
}
.cartePanneau__statLib {
	display: block;
	font-size: .66rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #8aa4ad;
	margin-top: 2px;
}

.cartePanneau__phrase {
	font-size: .87rem;
	line-height: 1.45;
	color: #40606b;
	margin: 0 0 12px;
}

.cartePanneau__lien {
	display: block;
	text-align: center;
	background: var(--carte-accent);
	color: #fff !important;
	font-weight: 600;
	border-radius: 9px;
	padding: 10px;
	font-size: .87rem;
}
.cartePanneau__lien:hover { filter: brightness(.88); }

/* --- Podium du jour ------------------------------------------------------ */
.cartePodium {
	margin-top: 16px;
	background: #fff;
	border-radius: 14px;
	padding: 14px 16px;
	box-shadow: 0 10px 30px rgba(15, 60, 80, .1);
}
.cartePodium__titre {
	margin: 0 0 10px;
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #8aa4ad;
}
.cartePodium__ligne {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	background: none;
	border: 0;
	padding: 6px 4px;
	font: inherit;
	cursor: pointer;
	border-radius: 8px;
	text-align: left;
}
.cartePodium__ligne:hover { background: var(--carte-doux); }
.cartePodium__rang {
	flex: 0 0 20px;
	font-weight: 700;
	color: #c2d4da;
	font-size: .95rem;
}
.cartePodium__ligne img { width: 30px; height: 30px; flex: 0 0 auto; }
.cartePodium__nom {
	flex-grow: 1;
	font-size: .85rem;
	color: var(--carte-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.cartePodium__note {
	flex: 0 0 auto;
	font-size: .75rem;
	font-weight: 700;
	background: #ffdc72;
	color: #6b5200;
	border-radius: 999px;
	padding: 2px 9px;
}

/* --- Légende du vent ----------------------------------------------------- */
.carteLegende {
	display: none;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 12px;
	font-size: .76rem;
	color: #4d6b76;
}
.carteGeo-hasVent .carteLegende { display: flex; }
.carteLegende__ech { display: flex; align-items: center; gap: 5px; }
.carteLegende__puce {
	width: 13px;
	height: 13px;
	border-radius: 3px;
	display: inline-block;
}

/* --- Plages hors cadre --------------------------------------------------- */
.carteHors {
	margin-top: 14px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: .8rem;
	color: #4d6b76;
}
.carteHors__puce {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, .8);
	border: 1px solid rgba(15, 125, 146, .18);
	border-radius: 999px;
	padding: 4px 12px 4px 4px;
	cursor: pointer;
	font: inherit;
	font-size: .8rem;
	color: var(--carte-ink);
}
.carteHors__puce img { width: 26px; height: 26px; }
.carteHors__puce:hover { background: #fff; }

.carteMeteo__source {
	margin: 14px 0 0;
	font-size: .74rem;
	color: #7b98a2;
}
.carteMeteo__source a { color: #7b98a2; text-decoration: underline; }

/* --- Adaptations mobile -------------------------------------------------- */
@media (max-width: 700px) {
	.carteMeteo { padding: 18px 0 24px; }
	.carteMeteo__inner { padding: 0 14px; }
	.carteGeo__icone { width: 28px; height: 28px; }
	.carteGeo__fleche { width: 22px; height: 22px; }
	.carteGeo__temp { font-size: .8rem; }
	.carteGeo__bulle { padding: 1px 7px 1px 2px; }
	.carteGeo__nom { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.carteGeo__vent { display: none; }
	.carteGeo__pin, .carteGeo__fleche { transition: none; }
}