/* ==========================================================================
   assets/css/components.css
   --------------------------------------------------------------------------
   Un bloc par composant, dans l'ordre où ils ont été livrés :
     1. .hero          [idh_hero]
     2. .photo-story   [idh_photos]
     3. .journal        [idh_blog]
   Chaque bloc est autonome : le supprimer ne casse pas les autres.
   ========================================================================== */

/* ==========================================================================
   1 — HERO
   ========================================================================== */

/* Enveloppe de .hero + .hero__today (voir components/hero.php) : .hero garde
   son overflow:hidden (indispensable pour clipper le zoom/parallax de
   .hero__media, inset:-12% en haut/bas) — .hero__today, positionné pour
   déborder sous le bas du hero, doit rester HORS de .hero pour ne pas être
   rogné à cette limite. */
.hero-enveloppe { position: relative; }

.hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	color: #fff;
	background: var(--idh-primary-dark);
}

.hero__media { position: absolute; inset: -12% 0 -12%; }
/* !important : sur l'accueil le hero est rendu dans un widget Elementor, dont
   `.elementor img { height: auto }` (même spécificité, chargé après) écrase
   sinon le height:100% — l'image (surtout en tablette/mobile) s'affiche alors à
   sa hauteur naturelle et ne remplit plus le bloc. */
.hero__media img,
.hero__media video {
	width: 100% !important; height: 100% !important; max-width: none !important;
	object-fit: cover; display: block;
}

/* Média unique : léger zoom d'entrée au chargement. */
.hero__media:not(.hero__media--slider) > img,
.hero__media > video { animation: idh-dezoom 3s cubic-bezier(.16,.8,.3,1) both; }
@keyframes idh-dezoom { from { transform: scale(1.12); } to { transform: scale(1); } }

/* Slider de la galerie « Image du bandeau » (accueil) : fondu enchaîné + zoom
   AVANT (Ken Burns) sur la vue active. assets/js/pages.js pose .is-active en
   boucle toutes les 6s (DUREE, pages.js) — la cadence de changement d'image.
   ------------------------------------------------------------------------
   Chaque vue repart de scale(1) à CHAQUE fois qu'elle devient active — le
   zoom (--hero-zoom-duree, 8s) est posé UNIQUEMENT par .is-active, pas sur
   .hero__slide au repos : pages.js force un reflow avant de rajouter la
   classe (`void slide.offsetWidth`) pour que l'animation reparte bien à
   zéro à chaque activation, même en revenant sur une vue déjà vue. Comme la
   cadence de changement (6s) est plus courte que le zoom (8s), chaque vue
   est retirée — et son animation coupée — avant d'avoir atteint son terme
   (scale = 1,09 à 6s sur un cycle de 8s) : l'agrandissement juste avant le
   changement est donc volontairement adouci, jamais au sommet (1,12).
   Pas de « ressaut » à la coupure : retirer .is-active retire AUSSI la
   déclaration `animation` (posée uniquement par cette classe) — une fois
   l'animation retirée, le transform ne reste PAS figé tout seul, il retombe
   instantanément sur sa valeur de base (aucune ici => scale(1)), même sans
   transition dessus. C'est pages.js qui évite le saut : il lit le transform
   CALCULÉ juste avant de couper la classe et le fige en style inline, qui
   prend le relais une fois l'animation partie (voir commentaire JS de
   [data-hero-slider]). Ne pas compter sur le seul CSS pour ce point. */
.hero__media--slider { --hero-zoom-duree: 8s; }
.hero__media--slider .hero__slide {
	position: absolute; inset: 0;
	opacity: 0;
	transition: opacity 1.4s ease;
}
.hero__media--slider .hero__slide.is-active {
	opacity: 1;
	animation: idh-hero-zoom var(--hero-zoom-duree) linear both;
}
@keyframes idh-hero-zoom { from { transform: scale(1); } to { transform: scale(1.12); } }

.hero::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(18,26,23,.82) 0%, rgba(18,26,23,.24) 52%, rgba(18,26,23,.42) 100%);
}

.hero__texte {
	position: relative;
	z-index: 2;
	width: 100%;
	/* Aligné sur le rail de contenu du site (--idh-cadre) : le texte part de la
	   même verticale que les sections en dessous (.journal / .avis…), plafonné à
	   1400px et centré sur très grand écran. Ancré en bas ; marge basse réduite
	   mais suffisante pour dégager le bandeau .hero__today qui chevauche. */
	padding: 0 var(--idh-cadre, var(--rail)) clamp(170px, 20vh, 220px);
}
/* Le conteneur interne ne rajoute ni cadre ni recentrage — il ne sert plus qu'à
   porter la couleur / la police du h1 (style inline de components/hero.php). */
.hero__texte .idh-conteneur { max-width: none; margin-inline: 0; padding-inline: 0; }

.hero__eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	margin: 0 0 18px;
	font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; opacity: .9;
}
.hero__eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--idh-accent); }

/* Titre composé en lignes de chasse croissante : une <span class="ligne">
   par retour à la ligne saisi dans idh_accueil_hero_titre. */
.hero h1 {
	/* Même taille/graisse que les h2 du site (base.css) : le hero ne doit
	   pas avoir un niveau de titre à part. */
	font-size: clamp(2.3rem, 5.4vw, 4.3rem);
	line-height: .96;
	letter-spacing: -0.035em;
	font-weight: 600;
	color: #fff;
}
.hero h1 .ligne { display: block; overflow: hidden; padding-bottom: .04em; }
.hero h1 .ligne > span { display: block; transform: translateY(105%); animation: idh-monte 1.15s cubic-bezier(.16,.84,.28,1) both; }
.hero h1 .ligne:nth-child(1) > span { animation-delay: .15s; font-variation-settings: "wdth" 76; }
.hero h1 .ligne:nth-child(2) > span { animation-delay: .28s; font-variation-settings: "wdth" 88; }
.hero h1 .ligne:nth-child(3) > span { animation-delay: .41s; font-variation-settings: "wdth" 100; }
@keyframes idh-monte { to { transform: none; } }

.hero__subtitle {
	font-size: clamp(1.15rem, 2vw, 1.6rem);
	line-height: 1.4;
	max-width: 42ch;
	margin: 24px 0 0;
	color: rgba(255,255,255,.92);
}

.hero__lieu {
	font-size: .98rem;
	margin-top: 26px;
	max-width: 36ch;
	opacity: 0;
	animation: idh-apparait 1s ease .78s both;
}
@keyframes idh-apparait { to { opacity: .92; } }

.hero__defiler {
	position: absolute;
	right: var(--idh-cadre, var(--rail));
	bottom: clamp(170px, 20vh, 220px);
	z-index: 2;
	display: flex; align-items: center; gap: 14px;
	font-size: .76rem;
	color: rgba(255,255,255,.72);
	opacity: 0;
	animation: idh-apparait 1s ease 1.1s both;
}
.hero__defiler i { display: block; width: 1px; height: 54px; background: rgba(255,255,255,.32); position: relative; overflow: hidden; }
.hero__defiler i::after {
	content: ""; position: absolute; inset: 0 0 auto; height: 40%; background: #fff;
	animation: idh-filet 2.4s ease-in-out infinite;
}
@keyframes idh-filet { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(250%); } }

/* --- Bandeau « conditions du jour » --------------------------------------- */
/* Couleurs = « fond secondaire » de la charte (IDH · 1 → idh_charte_fond_alt /
   _titre / _texte → --idh-bg-alt / --idh-alt-title / --idh-alt-ink). */
.hero__today {
	position: absolute; z-index: 4;
	/* --idh-cadre encadre le bandeau à 1400px sur grand écran, comme
	   .avis/.dispo/.journal — sinon les 4 cartes s'étirent d'un bord à
	   l'autre de l'écran (seul --rail, la gouttière simple, ne plafonne rien).
	   bottom:-60px : le bandeau dépasse le bas du .hero de plus de 50px
	   (demandé explicitement), au lieu de rester bottom:28px à l'intérieur. */
	left: var(--idh-cadre, var(--rail)); right: var(--idh-cadre, var(--rail)); bottom: -60px;
	/* Autant de colonnes que de blocs réellement rendus (components/hero.php) :
	   sans marée, le bandeau se réduit à Météo + Agenda (« version 1 » de la
	   maquette) sans colonne vide. Le cadre (bordure + rayon) est conservé. */
	display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1px;
	background: var(--ht-line);                  /* la gouttière de 1px entre cartes */
	border: 1px solid var(--ht-line);
	/* IDH · 1 → réglages généraux, idh_charte_rayon_image → --idh-radius
	   (includes/tokens.php). overflow:hidden : sans ça, les 4 cartes
	   .hero-info (coins droits) dépasseraient du cadre arrondi. */
	border-radius: var(--idh-radius);
	overflow: hidden;

	/* Palette du bandeau, pilotée par le champ ACF
	   idh_accueil_hero_conditions_couleurs (components/hero.php → classe
	   .hero__today--*). Défaut ci-dessous = « Fond secondaire ». */
	--ht-bg: var(--idh-bg-alt);
	--ht-title: var(--idh-alt-title);
	--ht-text: var(--idh-alt-ink);
	--ht-line: var(--idh-line);
	--ht-line-strong: var(--idh-line-strong);
}
/* « Fond principal » — idh_charte_fond / _titre / _texte */
.hero__today--principal {
	--ht-bg: var(--idh-bg);
	--ht-title: var(--idh-title);
	--ht-text: var(--idh-ink);
}
/* « Couleur principale » — aplat --idh-primary, texte = idh_charte_sur_primaire */
.hero__today--primaire {
	--ht-bg: var(--idh-primary);
	--ht-title: var(--idh-on-primary);
	--ht-text: color-mix(in srgb, var(--idh-on-primary) 76%, transparent);
	--ht-line: color-mix(in srgb, var(--idh-on-primary) 18%, transparent);
	--ht-line-strong: color-mix(in srgb, var(--idh-on-primary) 30%, transparent);
}
/* Version 1 (Météo + Agenda, sans marée) : Météo plus étroite, Agenda large —
   comme la maquette conditions-du-jour-sans-maree. Desktop uniquement ; en
   tablette/mobile le bandeau repasse en grille pilotée par les media queries. */
@media (min-width: 1041px) {
	.hero__today--v1 {
		grid-auto-flow: row; grid-auto-columns: auto;
		grid-template-columns: minmax(0, .66fr) minmax(0, 1fr);
	}
}

.hero-info {
	display: block;
	padding: 16px 18px 18px;
	background: var(--ht-bg);
	color: var(--ht-text);
	position: relative;
	overflow: hidden;
}
.hero-info__tete { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.hero-info__tete svg { width: 19px; height: 19px; color: var(--idh-accent); }
.hero-info__tete small { font-size: .66rem; letter-spacing: .11em; text-transform: uppercase; color: var(--ht-text); }

.hero-info__valeur {
	margin: 0; font-family: var(--idh-font-display); color: var(--ht-title);
	font-size: 1.32rem; line-height: 1.12; font-weight: 600; letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}
.hero-info__valeur em { font-style: normal; font-family: var(--idh-font-body); font-size: .78rem; font-weight: 400; color: var(--ht-text); letter-spacing: 0; }
.hero-info--meteo .hero-info__valeur { font-size: 2.5rem; letter-spacing: -.045em; }
.hero-info--agenda .hero-info__valeur { font-size: 1.12rem; line-height: 1.24; }

.hero-info__detail { margin: 6px 0 0; font-size: .79rem; color: var(--ht-text); }

.hero-info__jours { display: flex; gap: 6px; margin-top: 12px; }
.hero-info__jour { flex: 1; text-align: center; font-size: .68rem; color: var(--ht-text); }
.hero-info__jour b { display: block; font-size: .82rem; color: var(--ht-title); font-weight: 600; font-variant-numeric: tabular-nums; }
.hero-info__jour i { display: block; font-style: normal; font-size: .95rem; margin: 1px 0; }

.hero-info__courbe { margin: 10px 0 2px; height: 46px; }
.hero-info__courbe svg { width: 100%; height: 46px; display: block; overflow: visible; }
.hero-info__courbe path.trait { fill: none; stroke: var(--idh-accent); stroke-width: 1.8; stroke-linecap: round; }
.hero-info__courbe path.aire { fill: var(--ht-line); stroke: none; }
.hero-info__courbe circle { fill: var(--ht-bg); stroke: var(--idh-accent); stroke-width: 2; }
.hero-info__courbe line { stroke: var(--ht-line-strong); stroke-width: 1; stroke-dasharray: 2 3; }

.hero-jauge { position: relative; height: 5px; margin-top: 14px; border-radius: 99px; background: linear-gradient(90deg, var(--ht-line-strong), var(--idh-accent)); }
.hero-jauge i { position: absolute; top: 50%; width: 13px; height: 13px; border-radius: 50%; background: var(--ht-bg); border: 2px solid var(--idh-accent); transform: translate(-50%, -50%); transition: left .8s cubic-bezier(.2,.7,.2,1); }
.hero-jauge__bornes { display: flex; justify-content: space-between; margin-top: 7px; font-size: .66rem; color: var(--ht-text); font-variant-numeric: tabular-nums; }

.hero-info__puces { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.hero-info__puce { font-size: .68rem; padding: 4px 9px; border-radius: 99px; background: var(--ht-line-strong); color: var(--ht-text); white-space: nowrap; }
.hero-info__puce.est-bon { background: rgba(126,190,120,.30); color: var(--ht-title); }
.hero-info__puce.est-moyen { background: rgba(201,146,47,.30); color: var(--ht-title); }
.hero-info__puce.est-mauvais { background: var(--ht-line); color: var(--ht-text); }

@media (max-width: 1040px) {
	/* Tablette + mobile : le bandeau reste ENCADRÉ (bordure + rayon hérités du
	   desktop) mais sort du positionnement absolu — sur petit écran il devient
	   haut, on le laisse s'écouler sous le hero, marges latérales = --rail. */
	.hero__today {
		position: relative; z-index: 5;
		bottom: auto; left: auto; right: auto;
		margin: -40px var(--rail) 0;
		/* on repasse en grille explicite : 2 blocs par ligne, quel qu'en soit le
		   nombre — sinon grid-auto-flow:column garderait tout sur une seule ligne. */
		grid-auto-flow: row; grid-auto-columns: auto;
		grid-template-columns: repeat(2, 1fr);
	}
	.hero__texte { padding-bottom: clamp(60px, 12vh, 120px); }
}
@media (max-width: 560px) {
	.hero__today { grid-template-columns: 1fr; margin-top: -28px; }
}
@media (prefers-reduced-motion: reduce) {
	.hero h1 .ligne > span, .hero__lieu, .hero__defiler, .hero__media img { animation: none; opacity: 1; transform: none; }
	.hero__defiler i::after { animation: none; }
	/* Slider figé sur la 1re vue (le JS ne démarre pas non plus). L'animation
	   de zoom tournant désormais sur TOUTES les vues (voir plus haut), il faut
	   la couper ici explicitement : .hero__media--slider .hero__slide (0-2-0)
	   passe devant la règle générique .hero__media img (0-1-1) ci-dessus. */
	.hero__media--slider .hero__slide { opacity: 0; transition: none; animation: none; }
	.hero__media--slider .hero__slide.is-active { opacity: 1; }
}

/* ==========================================================================
   2 — BANDE PHOTO (4 images)
   ========================================================================== */

.photo-story {
	/* Même cadre que .journal/.avis/.dispo/.hero__today : --idh-cadre plafonne
	   à 1400px sur grand écran (au lieu de .idh-conteneur, qui n'a qu'un
	   padding-inline fixe de 24px — trop étroit, les images débordaient du
	   cadre général du site). Les images touchent directement ce cadre. */
	padding: clamp(64px, 10vh, 120px) var(--idh-cadre, var(--rail));
	display: grid;
	grid-template-columns: 1.25fr .72fr .72fr;
	grid-template-rows: 280px 280px;
	gap: 18px;
	position: relative;
	z-index: 1;
}
.photo-story figure {
	margin: 0;
	/* overflow VISIBLE : la légende (figcaption) est posée par-dessus sans
	   être rognée par la géométrie du kit — c'est l'IMAGE qui porte
	   --idh-media-radius / --idh-media-clip, pas la figure. Pas de background
	   ici : il ferait un halo gris rectangulaire autour d'une image découpée. */
	overflow: visible;
	position: relative;
}
.photo-story figure:first-child { grid-row: 1 / 3; }
.photo-story figure:nth-child(2) { grid-column: 2 / 4; }
.photo-story img {
	width: 100%; height: 100%; object-fit: cover;
	border-radius: var(--idh-media-radius) !important;
	clip-path: var(--idh-media-clip, none);
	transition: transform 1s cubic-bezier(.2,.7,.2,1);
}
.photo-story figure:hover img { transform: scale(1.035); }
.photo-story figcaption {
	/* Rectangle compact, calé en bas à gauche de la photo — pas une bande
	   pleine largeur. z-index au-dessus de l'image : reste lisible même si
	   le kit d'identité arrondit/découpe la photo (--idh-media-radius /
	   clip-path), la légende n'est jamais rognée par la forme. */
	position: absolute; left: 16px; bottom: 16px; right: auto; z-index: 1;
	max-width: calc(100% - 32px);
	background: rgba(17,26,22,.72); color: #fff;
	padding: 10px 16px; font-size: .78rem;
	/* Même rayon que les boutons de la charte (idh_charte_rayon_bouton → --idh-radius-btn). */
	border-radius: var(--idh-radius-btn);
	text-align: left;
	backdrop-filter: blur(8px);
	font-style: normal; /* bat l'italique par défaut du thème/Elementor sur <figcaption> */
}

/* Moins de 4 photos saisies : grille simple, pas de vedette. */
.photo-story--1, .photo-story--2, .photo-story--3 {
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 280px;
}
.photo-story--1 figure:first-child, .photo-story--2 figure:first-child, .photo-story--3 figure:first-child { grid-row: auto; }
.photo-story--2 { grid-template-columns: repeat(2, 1fr); }
.photo-story--2 figure:nth-child(2) { grid-column: auto; }
.photo-story--1 { grid-template-columns: 1fr; }

@media (max-width: 820px) {
	/* Rangée du milieu (photos 2 & 3) plus haute : la légende posée dessus
	   laissait trop peu d'image visible à 190px. */
	.photo-story { grid-template-columns: 1fr 1fr; grid-template-rows: 240px 270px 240px; }
	.photo-story figure:first-child { grid-column: 1 / 3; grid-row: auto; }
	.photo-story figure:nth-child(2) { grid-column: auto; }
	/* 4e photo pleine largeur, encadrée comme la 1re. */
	.photo-story figure:nth-child(4) { grid-column: 1 / 3; }
	/* Sur petit écran, le pavé sombre de la légende cachait une trop grande
	   partie de la photo (texte souvent sur 3-4 lignes). On retire le fond
	   et on porte la lisibilité par une ombre sous le texte : toute l'image
	   reste visible. */
	.photo-story figcaption {
		background: none;
		backdrop-filter: none;
		padding: 0 2px;
		text-shadow: 0 1px 4px rgba(0,0,0,.9), 0 3px 14px rgba(0,0,0,.75);
	}
}

/* ==========================================================================
   3 — JOURNAL (blog)
   ========================================================================== */

.journal { padding: 0 var(--idh-cadre, var(--rail)) clamp(80px, 11vh, 130px); }
.journal h2 { margin-bottom: 40px; }

.articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3.4vw, 46px); }
.articles--carrousel {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: clamp(20px, 3vw, 32px);
	-webkit-overflow-scrolling: touch;
}
.articles--carrousel .article { min-width: min(84vw, 380px); scroll-snap-align: start; }

.article { position: relative; }
/* overflow VISIBLE : le badge .article__etiquette est posé par-dessus sans
   être rogné par la forme du kit — c'est l'image (ou son <a>) qui porte
   --idh-media-radius / --idh-media-clip. */
.article figure { margin: 0; overflow: visible; position: relative; }
.article figure > a,
.article figure > img {
	display: block; overflow: hidden;
	border-radius: var(--idh-media-radius) !important;
	clip-path: var(--idh-media-clip, none);
}
.article figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.article:hover figure img { transform: scale(1.05); }
.article__etiquette {
	position: absolute; left: 12px; top: 12px; z-index: 2;
	background: rgba(255,255,255,.92); color: var(--idh-title);
	font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
	padding: 6px 10px; border-radius: var(--idh-radius-btn);
}
.article h3 { font-size: 1.18rem; margin-top: 16px; }
.article h3 a { text-decoration: none; }
.article p { font-size: .9rem; color: var(--idh-ink-soft); margin-top: 10px; }

@media (max-width: 1000px) {
	.articles { grid-template-columns: 1fr 1fr; }
	/* Tablette + mobile : 2 articles seulement (hors carrousel, qui défile). */
	.articles--grille .article:nth-child(n+3) { display: none; }
}
@media (max-width: 700px) {
	.articles { grid-template-columns: 1fr; }
}