/* ==========================================================================
   assets/css/pages.css
   --------------------------------------------------------------------------
   Pages de contenu (groupe ACF IDH · 7). Aujourd'hui : la page « liste des
   logements » ([idh_logements]) — barre de filtre + grille de vignettes
   .fiche-logement. Reprend la maquette idhotes-page-mes-logements, mêmes
   tokens --idh-*. .hero--page / .fil / .section / .logement-intro / .faq
   sont partagés avec logement.css (fiches produits) — non redéfinis ici.
   Tout le contenu est cadré à --idh-cadre (comme l'accueil) ; seul le ruban
   .bord « conditions du jour » reste pleine largeur (géré par logement.css).
   ========================================================================== */

/* --- Barre de filtre --------------------------------------------------- */
.filtre {
	display: flex; flex-wrap: wrap; align-items: end; gap: 14px 26px;
	padding: 18px var(--idh-cadre, var(--rail)) 0;
}
.filtre__champ { display: flex; flex-direction: column; gap: 5px; }
.filtre label {
	font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
	color: var(--idh-ink-soft);
}
.filtre select {
	font: inherit; font-size: .88rem; padding: 9px 12px;
	border: 1px solid var(--idh-line); border-radius: var(--idh-radius-btn);
	background: #fff; color: var(--idh-ink); cursor: pointer;
}
.filtre__compte {
	margin: 0 0 2px auto; font-size: .82rem; color: var(--idh-ink-soft);
	font-variant-numeric: tabular-nums;
}

/* --- Grille des vignettes -------------------------------------------------- */
.logements__grille {
	padding: clamp(28px, 5vh, 56px) var(--idh-cadre, var(--rail)) clamp(48px, 8vh, 96px);
	display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(22px, 3vw, 40px);
}

.fiche-logement {
	display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--idh-line); border-radius: var(--idh-radius);
	overflow: hidden; text-decoration: none; color: inherit;
	transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.fiche-logement:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -22px rgba(20,30,26,.28); }
.fiche-logement:focus-visible { outline: 2px solid var(--idh-accent); outline-offset: 3px; }

.fiche-logement__media {
	position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--idh-bg-alt);
	display: grid;
}
.fiche-logement__media img {
	grid-area: 1 / 1; align-self: stretch; justify-self: stretch;
	width: 100%; height: 100%; min-width: 0; min-height: 0;
	object-fit: cover; object-position: center; display: block;
	transition: opacity .5s ease, transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.fiche-logement__media img + img { opacity: 0; }
.fiche-logement:hover .fiche-logement__media img:first-child { transform: scale(1.04); }
.fiche-logement:hover .fiche-logement__media img + img { opacity: 1; }

.fiche-logement__badge {
	position: absolute; left: 14px; top: 14px; z-index: 2;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px; font-size: .74rem; letter-spacing: .02em;
	background: rgba(18,26,23,.62); color: #fff; border-radius: var(--idh-radius-btn);
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.fiche-logement__badge svg { width: 13px; height: 13px; }

.fiche-logement__corps { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.fiche-logement__corps .contexte {
	font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
	color: var(--idh-ink-soft); margin: 0;
}
.fiche-logement__corps h3 { font-size: 1.5rem; margin: 5px 0 8px; }
.fiche-logement__capacite { color: var(--idh-ink-soft); font-size: .92rem; margin: 0 0 14px; }

.fiche-logement__equip { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 6px; }
.fiche-logement__equip li {
	font-size: .86rem; padding-left: 18px; position: relative; color: var(--idh-ink);
}
.fiche-logement__equip li::before {
	content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px;
	background: var(--idh-accent); border-radius: var(--idh-puce-radius, 50%);
}

.fiche-logement__evt {
	display: flex; align-items: flex-start; gap: 8px; margin: 0 0 16px;
	font-size: .82rem; color: var(--idh-ink-soft); padding: 10px 12px;
	background: var(--idh-bg-alt); border-radius: var(--idh-radius);
}
.fiche-logement__evt svg { flex: none; margin-top: 2px; color: var(--idh-accent); }
.fiche-logement__evt b { color: var(--idh-ink); font-weight: 600; }

.fiche-logement__pied {
	margin-top: auto; padding-top: 14px; border-top: 1px solid var(--idh-line);
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.fiche-logement__prix { font-family: var(--idh-font-display); font-size: 1.15rem; font-weight: 700; }
.fiche-logement__prix span {
	display: block; font-family: var(--idh-font-body); font-weight: 400;
	font-size: .74rem; color: var(--idh-ink-soft);
}
.fiche-logement[hidden] { display: none; }

.logements__vide {
	text-align: center; color: var(--idh-ink-soft);
	padding: 0 var(--idh-cadre, var(--rail)) clamp(48px, 8vh, 90px);
}
.logements__vide .lien { border: 0; background: none; cursor: pointer; font: inherit; }

@media (max-width: 900px) {
	.logements__grille { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.filtre { gap: 12px 16px; }
	.filtre__compte { width: 100%; margin: 4px 0 0; }
}

/* ==========================================================================
   [idh_randonnees_complet] — grille de cartes rando (gabarit .carte--rando
   partagé avec la mosaïque du territoire, accueil.css).
   ========================================================================== */
.randos-grille {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: clamp(28px, 4vw, 48px) clamp(20px, 2.4vw, 30px);
	margin-top: 8px;
}
.randos-grille__item { display: flex; }
.randos-grille__item > .carte { width: 100%; }
.randos-grille__item[hidden] { display: none; }

@media (max-width: 1100px) { .randos-grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .randos-grille { grid-template-columns: 1fr; } }

/* ==========================================================================
   Bloc « Carte / Photos » des cartes randonnée (idh_rando_photos_bloc(),
   includes/context.php — maquette apercu-charte-rando, Version B).
   Posé dans le média : .trace (DS) / .idhotes-rando__photo-wrap /
   .idhotes-rando-mini__photo-wrap (plugin idhotes-rando.php). Tous ces
   conteneurs sont position:relative + overflow:hidden.
   ========================================================================== */
.ir-b__toggle[hidden] { display: none !important; }
.ir-b__toggle {
	position: absolute; top: 8px; right: 8px; z-index: 4;
	display: flex; gap: 2px; padding: 3px;
	background: rgba(20, 32, 26, .5); border-radius: 20px;
	-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.ir-b__toggle button {
	-webkit-appearance: none !important; appearance: none !important;
	border: 0 !important; margin: 0 !important;
	padding: 5px 11px !important;
	font: inherit !important; font-size: .68rem !important; font-weight: 500 !important; line-height: 1 !important;
	color: #fff !important; opacity: .68;
	background: transparent !important;
	border-radius: 16px !important;
	cursor: pointer;
	transition: background-color .25s, opacity .25s, color .25s;
	text-transform: none; letter-spacing: 0;
}
.ir-b__toggle button.is-active { background: #fff !important; color: #1a2a22 !important; opacity: 1; }

.ir-b__pane--photos { position: absolute; inset: 0; z-index: 3; }
.ir-b__pane--photos[hidden] { display: none !important; }
.ir-b__photo {
	position: absolute !important; inset: 0 !important;
	width: 100% !important; height: 100% !important; max-width: none !important;
	object-fit: cover; display: block;
	opacity: 0; transition: opacity .4s ease;
}
.ir-b__photo.is-active { opacity: 1; }
.ir-b__photo[data-broken] { display: none !important; }

.ir-b__photo-arrows {
	position: absolute; inset: 0; z-index: 2;
	display: flex; align-items: center; justify-content: space-between;
	padding: 0 6px;
	/* Toujours visibles (juste un peu estompées) : au survol elles sautaient
	   quand la souris quittait la carte après un clic. */
	opacity: .78; transition: opacity .2s;
}
.ir-b__pane--photos:hover .ir-b__photo-arrows,
.ir-b__pane--photos:focus-within .ir-b__photo-arrows { opacity: 1; }
.ir-b__photo-arrows[hidden] { display: none; }
.ir-b__photo-arrows button {
	-webkit-appearance: none !important; appearance: none !important;
	border: 0 !important; margin: 0 !important; padding: 0 !important;
	width: 30px; height: 30px; flex: none;
	display: flex; align-items: center; justify-content: center;
	background: rgba(20, 32, 26, .55) !important; color: #fff !important;
	border-radius: 50% !important;
	font: inherit !important; font-size: 1.15rem !important; line-height: 1 !important;
	cursor: pointer;
}
.ir-b__dots {
	position: absolute; left: 0; right: 0; bottom: 8px; z-index: 2;
	display: flex; justify-content: center; gap: 5px;
}
.ir-b__dots span { width: 5px; height: 5px; border-radius: 50%; background: #fff; opacity: .45; cursor: pointer; }
.ir-b__dots span.is-active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.ir-b__photo { transition: none; }
}

/* ==========================================================================
   [idh_adresses_complet] — grille de cartes adresse (gabarit .carte partagé
   avec la mosaïque du territoire, accueil.css).
   ========================================================================== */
.adresses-grille {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: clamp(30px, 4vw, 52px) clamp(20px, 2.4vw, 30px);
	margin-top: 8px;
}
.adresses-grille__item { display: flex; }
.adresses-grille__item > .carte { width: 100%; }
.adresses-grille__item[hidden] { display: none; }

@media (max-width: 1100px) { .adresses-grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .adresses-grille { grid-template-columns: 1fr; } }

/* ==========================================================================
   [idh_lieux] — galerie de lieux facon [idh_destination] (mosaique .mosaique
   __grille, legende = titre seul) + bouton « Voir les N photos » + visionneuse
   plein ecran (.lightbox de logement.css, pilotee par pages.js).
   ========================================================================== */
.mosaique.lieux .territoire__tete { align-items: center; }

.mosaique.lieux .mosaique__grille { gap: 18px; }

/* [idh_lieux] : grille dense de lieux → rayon « Arrondi des images » de la
   charte, JAMAIS la forme du kit. Le galet Cocon sur une mosaïque de vignettes
   se chevauchant rend la page illisible (cf. page « La région »). Le kit reste
   sur les images uniques mises en avant ([idh_intro], hero). !important : bat
   la règle .mosaique__photo de kits.css (§Application), elle-même en !important. */
.mosaique.lieux .mosaique__photo {
	border-radius: var(--idh-radius) !important;
	clip-path: none !important;
}

/* Bouton « Voir les N photos ». Double classe + !important sur fond/couleur/
   bordure : passe devant TT1 button:not(:hover)… (0-3-1) et .elementor-kit-N
   button. Le reste (padding, police) vient de la règle .avis__plus partagée
   (logement.css). */
.idh-lieux .lieux__voir.avis__plus {
	flex: none; white-space: nowrap; margin-top: 0;
	background: transparent !important;
	color: var(--idh-ink) !important;
	border: 1px solid var(--idh-line) !important;
	box-shadow: none !important; text-shadow: none !important;
}
.idh-lieux .lieux__voir.avis__plus:hover {
	color: var(--idh-primary) !important;
	border-color: var(--idh-primary) !important;
}

/* Les cases sont des liens : le <a> remplit la cellule (comme .mosaique
   figure > a), curseur pointeur, leger assombrissement au survol.
   Depuis v2.4.20 le <a> n'enveloppe QUE .mosaique__photo — la legende et le
   badge +N sont sortis pour ne pas etre rognes par la geometrie du kit. */
.mosaique.lieux figure > a.lieux__tuile { grid-area: 1 / 1; display: grid; cursor: pointer; }
.mosaique.lieux .lieux__tuile .mosaique__photo > img { transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter .3s ease; }
.mosaique.lieux figure:hover .mosaique__photo > img { filter: brightness(.92); }

/* Badge « +N » sur la derniere case quand il reste des lieux hors mosaique. */
.lieux__plus {
	position: absolute; right: 12px; top: 12px; z-index: 1;
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 34px; height: 34px; padding: 0 8px;
	font-family: var(--idh-font-display); font-weight: 600; font-size: .9rem;
	color: #fff; background: rgba(17,26,22,.72); backdrop-filter: blur(8px);
	border-radius: 999px;
}

@media (max-width: 820px) {
	.mosaique.lieux .territoire__tete { align-items: flex-start; }
}
/* En dessous de 900px : grille façon .galerie-grille (fiche produit) — 2
   colonnes, rangées fixes régulières, 1re case pleine largeur sur UNE rangée.
   Les « span 2 » hérités de .mosaique donnaient des galets trop hauts / trop
   serrés (illisibles avec le kit Cocon). */
@media (max-width: 900px) {
	.mosaique.lieux .mosaique__grille {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: clamp(150px, 34vw, 220px);
	}
	.mosaique.lieux .mosaique__grille > figure { grid-column: auto; grid-row: auto; }
	.mosaique.lieux .mosaique__grille > figure:first-child { grid-column: 1 / -1; }
}

/* ==========================================================================
   [idh_apercu_region|adresses|agenda|randos] — teasers de la page sommaire
   « En vacances ici ». Carte encadrée 2 colonnes texte / image, variante
   fond primaire (--idh-primary), aperçu vivant (3 items JSON) au choix.
   ========================================================================== */
.apercu { padding-block: clamp(26px, 4vh, 52px); }

.apercu__grille {
	display: flex; flex-wrap: wrap;
	background: var(--idh-bg-alt);
	border: 1px solid var(--idh-line);
	border-radius: var(--idh-radius);
	overflow: hidden;
}
.apercu--primaire .apercu__grille { background: var(--idh-primary); border-color: var(--idh-primary); }

.apercu__corps {
	flex: 1 1 400px;
	display: flex; flex-direction: column; align-items: flex-start;
	padding: clamp(28px, 4vw, 60px);
}
.apercu__corps h2 { margin: 0 0 14px; max-width: 22ch; }
.apercu__corps h2::first-letter { text-transform: uppercase; }
.apercu__texte { margin: 0; color: var(--idh-ink-soft); max-width: 54ch; line-height: 1.6; }
.apercu--primaire .apercu__corps,
.apercu--primaire .apercu__corps h2 { color: var(--idh-on-primary); }
.apercu--primaire .apercu__texte { color: rgba(255, 255, 255, .82); }

.apercu__media {
	flex: 1 1 380px; margin: 0; align-self: stretch;
	display: grid; min-height: clamp(300px, 40vh, 460px);
	background: var(--idh-bg-alt);
}
/* L'<img> (élément remplacé) est étirée pour REMPLIR toute la case : sans
   align-self/justify-self:stretch + min-*:0 EXPLICITES, une image loading="lazy"
   pas encore chargée n'a pas de taille intrinsèque et retombe à 0 (même bug que
   .volet__media / .mosaique figure — voir accueil.css). */
.apercu__media img {
	grid-area: 1 / 1;
	align-self: stretch; justify-self: stretch;
	min-width: 0; min-height: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: center; display: block;
}
.apercu--simple .apercu__media { min-height: clamp(340px, 48vh, 560px); }
.apercu--inverse .apercu__media { order: -1; }

.apercu__bouton {
	margin-top: clamp(22px, 3vh, 34px);
	display: inline-flex; align-items: center; gap: 9px;
}
.apercu__fleche { transition: transform .25s ease; }
.apercu__bouton:hover .apercu__fleche { transform: translateX(3px); }
.apercu--primaire .apercu__bouton {
	background: #fff; color: var(--idh-primary); border-color: #fff;
}
.apercu--primaire .apercu__bouton:hover { background: rgba(255, 255, 255, .88); border-color: transparent; }

/* --- Aperçu vivant : liste de mini-cartes ------------------------------- */
.apercu__minis {
	align-self: stretch; max-width: 480px;
	margin: clamp(18px, 3vh, 26px) 0 2px;
	display: flex; flex-direction: column; gap: 9px;
}
.apercu__mini {
	display: flex; align-items: center; gap: 13px;
	padding: 9px 11px;
	background: #fff; border: 1px solid var(--idh-line);
	border-radius: calc(var(--idh-radius) * .6);
}
.apercu--primaire .apercu__mini { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); }
.apercu__mini-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.apercu__mini-corps b {
	font-family: var(--idh-font-display); font-weight: 600; font-size: .9rem;
	color: var(--idh-title); line-height: 1.25;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.apercu__mini-corps span { font-size: .77rem; color: var(--idh-ink-soft); }
.apercu--primaire .apercu__mini-corps b { color: #fff; }
.apercu--primaire .apercu__mini-corps span { color: rgba(255, 255, 255, .72); }

.apercu__date {
	flex: none; width: 46px; text-align: center;
	background: var(--idh-bg-alt); border-radius: 9px; padding: 6px 0;
}
.apercu--primaire .apercu__date { background: rgba(255, 255, 255, .16); }
.apercu__date b { display: block; font-family: var(--idh-font-display); font-weight: 700; font-size: 1.12rem; color: var(--idh-title); line-height: 1; }
.apercu__date span { font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--idh-ink-soft); }
.apercu--primaire .apercu__date b { color: #fff; }
.apercu--primaire .apercu__date span { color: rgba(255, 255, 255, .78); }

.apercu__mini-vignette,
.apercu__trace {
	flex: none; width: 54px; height: 54px; border-radius: 9px; overflow: hidden;
	background: var(--idh-bg-alt); display: grid; place-items: stretch; color: var(--idh-primary);
}
.apercu__mini-vignette img,
.apercu__trace-fond,
.apercu__trace svg {
	grid-area: 1 / 1;
	align-self: stretch; justify-self: stretch;
	min-width: 0; min-height: 0; width: 100%; height: 100%;
	object-fit: cover; display: block;
}

/* --- Aperçu adresses : bandeau de vignettes (remplit la largeur) + compteur --- */
.apercu__vignettes {
	align-self: stretch; max-width: 460px;
	margin: clamp(18px, 3vh, 24px) 0 12px;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.apercu__vignette {
	aspect-ratio: 4 / 3;
	border-radius: calc(var(--idh-radius) * .55);
	overflow: hidden; background: var(--idh-bg-alt);
	display: grid;
}
.apercu__vignette img {
	grid-area: 1 / 1;
	align-self: stretch; justify-self: stretch;
	min-width: 0; min-height: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: center; display: block;
}
.apercu__compte { margin: 0; font-size: .86rem; color: var(--idh-ink-soft); }
.apercu__compte b { font-family: var(--idh-font-display); font-weight: 700; color: var(--idh-title); }
.apercu--primaire .apercu__compte { color: rgba(255, 255, 255, .82); }
.apercu--primaire .apercu__compte b { color: #fff; }

@media (max-width: 800px) {
	.apercu__media { order: -1; flex-basis: 100%; min-height: 240px; }
	.apercu--simple .apercu__media { min-height: 260px; }
	.apercu__corps { flex-basis: 100%; }
}

/* ==========================================================================
   [idh_carte_page] / [idh_cartes] — cartes-teaser vers une sous-page (IDH·7)
   --------------------------------------------------------------------------
   Les cartes d'une rangée forment UN encadré (aucune marge extérieure, cartes
   jointives séparées d'un hairline --idh-line), justifiées en hauteur. Palette
   « fond secondaire » : --idh-bg-alt (16) / --idh-alt-title (17) / --idh-alt-ink
   (18). Coins --idh-radius, trame du kit discrète, image plein cadre.
   ========================================================================== */

/* Rangée : [idh_cartes], ou 3 [idh_carte_page] dans le MÊME widget « Shortcode »,
   ou entourées d'un .idh-cartes. --n = nb de cartes (posé par [idh_cartes],
   défaut 3). Largeur = EXACTEMENT celle du contenu encadré du site
   (var(--idh-cadre), comme .journal / .avis / .idh-cm) : jamais pleine largeur,
   jamais plus large que les autres sections, centrée, gouttière entre cartes. */
.idh-cartes,
.elementor-shortcode:has(> .carte-page ~ .carte-page) {
	display: grid;
	grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
	gap: clamp(14px, 1.6vw, 22px);
	align-items: stretch;
	width: calc(100% - 2 * var(--idh-cadre, var(--rail, clamp(20px, 8vw, 132px))));
	margin-inline: auto;
	align-self: center;
}

/* 3 [idh_carte_page] dans 3 colonnes Elementor distinctes : on étire la chaîne
   du widget pour que chaque carte prenne la hauteur de la colonne la plus haute. */
.elementor-widget-shortcode:has(.carte-page):not(:has(.carte-page ~ .carte-page)),
.elementor-widget-shortcode:has(.carte-page):not(:has(.carte-page ~ .carte-page)) > .elementor-widget-container,
.elementor-widget-shortcode:has(.carte-page):not(:has(.carte-page ~ .carte-page)) .elementor-shortcode {
	display: flex; flex-direction: column;
	flex: 1 1 auto; align-self: stretch;
	height: 100%; min-width: 0;
}

.carte-page {
	position: relative;
	display: flex; flex-direction: column;
	height: 100%;
	background: var(--idh-bg-alt);           /* fond plein, sans trame de kit */
	color: var(--idh-alt-ink);
	border: 1px solid var(--idh-line);
	border-radius: var(--idh-radius);
	overflow: hidden;
}

.carte-page__texte {
	flex: 1;
	display: flex; flex-direction: column; align-items: center;
	gap: 14px; text-align: center;
	padding: clamp(28px, 3vw, 40px) clamp(22px, 2.4vw, 34px);
}
.carte-page__texte .section-kicker { justify-content: center; margin: 0; }
.carte-page__titre {
	margin: 0; color: var(--idh-alt-title);
	font-family: var(--idh-font-display); font-weight: 600;
	font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.1;
}
.carte-page__chapo {
	margin: 0; color: var(--idh-alt-ink);
	font-size: .95rem; line-height: 1.55; max-width: 34ch;
}
.carte-page__cta {
	margin-top: auto;                       /* CTA collé en bas de la zone texte */
	display: inline-flex; align-items: center; gap: 8px;
	padding: 11px 22px;
	font: inherit; font-size: .88rem; font-weight: 500;
	color: var(--idh-alt-title); background: transparent;
	border: 1px solid var(--idh-line-strong, var(--idh-line)); border-radius: var(--idh-radius-btn);
	text-decoration: none;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.carte-page__cta:hover {
	background: var(--idh-primary); border-color: var(--idh-primary);
	color: var(--idh-on-primary);
}
.carte-page__cta svg { transition: transform .25s ease; }
.carte-page__cta:hover svg { transform: translateX(3px); }

/* Image plein cadre : position:absolute + inset:0 + !important pour battre
   « .elementor img { height:auto } » (Elementor charge une règle img de même
   spécificité APRÈS pages.css). object-position center = centré H et V. */
.carte-page__media {
	position: relative; flex: none; margin: 0;
	height: clamp(200px, 22vw, 300px); overflow: hidden;
}
.carte-page__media img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover; object-position: center center;
	display: block;
}

@media (max-width: 1000px) {
	.idh-cartes,
	.elementor-shortcode:has(> .carte-page ~ .carte-page) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.idh-cartes,
	.elementor-shortcode:has(> .carte-page ~ .carte-page) { grid-template-columns: 1fr; }
	.carte-page__media { height: clamp(200px, 44vw, 260px); }
}

/* ==========================================================================
   [idh_blocs] — répéteur « Blocs libres » (idh_page_blocs)
   --------------------------------------------------------------------------
   Chaque bloc est une BANDE pleine largeur (le fond alterné --idh-bg-alt
   atteint les bords de la fenêtre) ; le CONTENU reste dans la largeur encadrée
   du site (max 1280, gouttières --idh-cadre) et occupe toute cette largeur —
   justifié à gauche ET à droite. Grande marge verticale entre les bandes.
   5 variantes : shortcode / vidéo / galerie / duo d'images / paragraphe imagé.
   ========================================================================== */
.idh-blocs {
	display: grid;
	gap: clamp(44px, 5vw, 70px);   /* marge verticale entre blocs */
}

.bloc {
	position: relative;
	/* Bande pleine largeur : déposer [idh_blocs] dans un conteneur Elementor
	   « pleine largeur » (e-con-full) — .idh-blocs occupe alors toute la fenêtre
	   et la bande (fond secondaire compris) aussi, sans débordement horizontal. */
	width: 100%;
	padding-block: clamp(46px, 6vw, 84px);
	padding-inline: var(--idh-cadre, var(--rail));
}
.bloc--alt {
	background: var(--idh-bg-alt);
	color: var(--idh-alt-ink);
	padding-block: clamp(64px, 8vw, 104px);
}
.bloc--alt .bloc__titre { color: var(--idh-alt-title); }

/* Le contenu = largeur encadrée du site, centrée, et il l'occupe entièrement. */
.bloc__cadre { max-width: 1280px; margin-inline: auto; }

.bloc__titre { margin: 0 0 16px; color: var(--idh-title); }
.bloc__intro { color: inherit; }
.bloc__intro p { margin: 0 0 .9em; max-width: none; text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
.bloc__intro p:last-child { margin-bottom: 0; }
.bloc__intro a:not(.bouton) { color: var(--idh-link); }

/* --- Variante « media » : 2 colonnes texte / média ------------------------ */
.bloc--media .bloc__cadre {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 4vw, 60px); align-items: center;
}
.bloc--media .bloc__texte { min-width: 0; }
.bloc--media.bloc--gauche .bloc__media { order: -1; }
.bloc--media .bloc__titre { margin-bottom: 10px; }

/* overflow:hidden + border-radius sur la <figure> : clippe les coins de l'image
   sans lutte de spécificité avec « .elementor img { border-radius:0 } ». */
.bloc__media {
	margin: 0;
	border-radius: var(--idh-media-radius);
	overflow: hidden;
}
.bloc__media img {
	width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
}
.bloc__media--pleine { margin-top: clamp(22px, 3vw, 34px); }
.bloc__media--pleine img { aspect-ratio: 16 / 8; }

.bloc__points { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; font-size: .93rem; }
.bloc__points li { display: flex; align-items: flex-start; gap: 9px; }
.bloc__points svg { width: 15px; height: 15px; margin-top: 3px; flex: none; color: var(--idh-accent); }
.bloc__lien { margin-top: clamp(18px, 2.5vw, 26px); }

/* --- Variante « shortcode » --------------------------------------------- */
/* Un shortcode intégré (ex. [idh_lieux type="plage"], [idh_cartes]…) n'a pas
   ses marges/gouttières propres : c'est le bloc qui cadre.
   • --idh-cadre:0 → supprime les gouttières var(--idh-cadre) des composants DS
   • > section { padding-block:0 } → retire leur aération verticale
   • les composants à largeur plafonnée remplissent le cadre du bloc */
.bloc__shortcode { margin-top: clamp(20px, 3vw, 30px); --idh-cadre: 0px; }
.bloc__shortcode > *:first-child { margin-top: 0; }
.bloc__shortcode > *:last-child { margin-bottom: 0; }
.bloc__shortcode > section { padding-block: 0; }
.bloc__shortcode .idh-cartes,
.bloc__shortcode .idh-contact-duo,
.bloc__shortcode .elementor-shortcode:has(> .carte-page ~ .carte-page) {
	width: 100%; max-width: none; margin-inline: 0;
}

/* --- Variante « vidéo » : poster cliquable puis embed ------------------- */
.bloc-video {
	position: relative; aspect-ratio: 16 / 9; overflow: hidden;
	border-radius: var(--idh-media-radius);
	background: var(--idh-primary-dark, var(--idh-primary)) center / cover no-repeat;
	cursor: pointer;
}
.bloc-video--statique { cursor: default; }
.bloc-video::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(20, 28, 24, .05), rgba(20, 28, 24, .45));
	transition: background .25s ease;
}
.bloc-video:not(.bloc-video--statique):hover::after { background: linear-gradient(180deg, rgba(20, 28, 24, .1), rgba(20, 28, 24, .55)); }
.bloc-video__play {
	position: absolute; inset: 0; margin: auto; z-index: 2;
	width: 62px; height: 62px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: rgba(255, 255, 255, .94);
	transition: transform .25s ease, background .25s ease;
}
.bloc-video:hover .bloc-video__play { transform: scale(1.08); background: #fff; }
.bloc-video__play svg { width: 20px; height: 20px; margin-left: 3px; color: var(--idh-primary); }
.bloc-video__duree {
	position: absolute; bottom: 12px; right: 12px; z-index: 2;
	background: rgba(20, 28, 24, .78); color: #fff;
	font-size: .74rem; font-weight: 500; padding: 4px 9px; border-radius: 4px;
}
.bloc-video__legende { position: absolute; bottom: 12px; left: 14px; z-index: 2; color: #fff; font-size: .82rem; opacity: .92; }
.bloc-video.est-lecture { cursor: default; }
.bloc-video.est-lecture::after,
.bloc-video.est-lecture .bloc-video__play,
.bloc-video.est-lecture .bloc-video__duree,
.bloc-video.est-lecture .bloc-video__legende { display: none; }
.bloc-video iframe,
.bloc-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- Variante « galerie » : mosaïque + « +N photos » ------------------- */
.bloc-galerie {
	margin-top: clamp(22px, 3vw, 30px);
	display: grid; grid-template-columns: repeat(4, 1fr);
	/* Mêmes cellules + gouttière que [idh_galerie] (.galerie-grille, logement.css) :
	   des tuiles trop petites / trop serrées font des galets Cocon collés. */
	grid-auto-rows: clamp(140px, 19vw, 230px);
	gap: 18px;
}
.bloc-galerie__tuile {
	/* Rayon = « Arrondi des images » de la charte (--idh-radius), PAS la forme
	   du kit : le galet Cocon sur une grille dense de vignettes rend l'ensemble
	   illisible (galets qui se confondent). Le kit reste sur les images uniques
	   mises en avant ([idh_intro], hero…). */
	position: relative; overflow: hidden; border-radius: var(--idh-radius);
	display: block; background: var(--idh-bg-alt);
}
.bloc-galerie__tuile img {
	position: absolute !important; inset: 0 !important;
	width: 100% !important; height: 100% !important; max-width: none !important;
	object-fit: cover; display: block;
	transition: transform .4s ease;
}
.bloc-galerie__tuile:hover img { transform: scale(1.04); }
.bloc-galerie__tuile--large { grid-column: span 2; grid-row: span 2; }
.bloc-galerie__tuile--plus::after {
	content: attr(data-plus); position: absolute; inset: 0; z-index: 2;
	background: rgba(20, 28, 24, .58); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--idh-font-display); font-weight: 600; font-size: 1.05rem;
}

/* --- Variante « images » : duo plein cadre (largeur encadrée du site) --- */
.bloc-duo {
	max-width: 1280px; margin-inline: auto;
	display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 1.2vw, 16px);
}
.bloc-duo__item { position: relative; margin: 0; overflow: hidden; border-radius: var(--idh-media-radius); }
.bloc-duo__item img {
	width: 100%; height: 100%; aspect-ratio: 3 / 2;
	object-fit: cover; display: block;
}
/* Dégradé = bande basse de hauteur fixe (indépendante de la légende), collée au
   bas de l'image ; la légende se pose par-dessus. */
.bloc-duo__item:has(figcaption)::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
	height: clamp(70px, 24%, 120px);
	background: linear-gradient(to top, rgba(18, 26, 22, .74), transparent);
	pointer-events: none;
}
.bloc-duo__item figcaption {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
	padding: 16px 20px 14px; color: #fff; font-size: .82rem; line-height: 1.35;
}

@media (max-width: 820px) {
	.bloc--media .bloc__cadre { grid-template-columns: 1fr; }
	.bloc--media .bloc__media { order: -1; }
	.bloc-galerie { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(150px, 34vw, 220px); }
	.bloc-galerie__tuile--large { grid-column: 1 / -1; grid-row: span 1; }
	.bloc-duo { grid-template-columns: 1fr; }
}

/* ==========================================================================
   [idh_listing] — grille de 3 fiches (adresse · randonnée · évènement)
   --------------------------------------------------------------------------
   Image cadrée en portrait (4/5), pastille « critère » libre (haut-gauche),
   étiquette de source (haut-droite). Charte --idh-*.
   ========================================================================== */
.idh-listing {
	padding-block: clamp(6px, 1.5vw, 18px);
	padding-inline: var(--idh-cadre, var(--rail));
}
.idh-listing__tete { max-width: 640px; margin-bottom: clamp(22px, 4vw, 38px); }
.idh-listing__tete .section-kicker { margin-bottom: 10px; }
.idh-listing__tete h2 { margin: 0 0 10px; }
.idh-listing__sous { margin: 0; color: var(--idh-ink-soft); }

.idh-listing__grille {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: clamp(16px, 1.8vw, 24px);
}
@media (max-width: 980px) { .idh-listing__grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .idh-listing__grille { grid-template-columns: 1fr; } }

.listing-carte {
	display: flex; flex-direction: column;
	background: #fff;
	border: 1px solid var(--idh-line);
	border-radius: var(--idh-radius);
	overflow: hidden;
	color: inherit; text-decoration: none;
}
a.listing-carte { transition: box-shadow .25s ease, transform .25s ease; }
a.listing-carte:hover { box-shadow: 0 24px 46px -32px rgba(20, 32, 26, .42); transform: translateY(-3px); }

.listing-carte__media {
	position: relative;
	aspect-ratio: 4 / 5;                 /* image justifiée en vertical */
	background: var(--idh-bg-alt);
	overflow: hidden;
	display: grid; place-items: stretch;  /* fond + tracé + illustration superposés */
}
/* Fond (photo / carte IGN), tracé SVG de la randonnée et illustration de repli
   se superposent tous en grid 1/1 — même recadrage (slice/cover) = alignés. */
.listing-carte__media > img,
.listing-carte__trace,
.listing-carte__illu {
	grid-area: 1 / 1;
	width: 100% !important; height: 100% !important;   /* bat .elementor img{height:auto} */
	min-width: 0; min-height: 0; max-width: none !important;
	display: block;
}
.listing-carte__media > img {
	object-fit: cover; object-position: center;   /* net, pas de flou */
}
.listing-carte__trace { pointer-events: none; }
.listing-carte__trace svg { width: 100%; height: 100%; display: block; }

/* Repli sans photo (ex. évènement d'agenda sans image) : illustration à la
   charte + date en incrustation. */
.listing-carte__poster-date {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
	font-family: var(--idh-font-display); font-weight: 600; font-size: 1.15rem;
	letter-spacing: -.01em; color: var(--idh-on-primary);
}

.listing-carte__tag,
.listing-carte__source {
	position: absolute; top: 12px; z-index: 2;
	font-size: .68rem; font-weight: 600; letter-spacing: .04em;
	padding: 5px 11px; border-radius: 999px; line-height: 1;
}
.listing-carte__tag {
	left: 12px; text-transform: uppercase;
	background: #fff; color: var(--idh-ink);
}
.listing-carte__source {
	right: 12px; font-weight: 500; letter-spacing: .01em;
	background: rgba(20, 28, 24, .74); color: #fff;
}

.listing-carte__corps {
	flex: 1;
	display: flex; flex-direction: column; gap: 8px;
	padding: clamp(16px, 1.6vw, 22px);
}
.listing-carte__corps h4 {
	margin: 0; font-family: var(--idh-font-display); font-weight: 600;
	font-size: 1.05rem; letter-spacing: -.01em; color: var(--idh-title);
}
.listing-carte__corps p {
	margin: 0; flex: 1;
	font-size: .9rem; color: var(--idh-ink-soft); line-height: 1.5;
}
.listing-carte__meta {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	margin-top: 4px; padding-top: 12px;
	border-top: 1px solid var(--idh-line);
	font-size: .82rem; color: var(--idh-ink-soft);
}
.listing-carte__meta strong { color: var(--idh-title); font-weight: 600; }

/* ==========================================================================
   Page « Prestations & services »
   [idh_prestations] · [idh_deroule] · [idh_formules] · [idh_options]
   --------------------------------------------------------------------------
   Contenu limité à 1200, centré, responsive ; grilles encadrées (filet
   --idh-line, coins --idh-radius). Charte --idh-*.
   ========================================================================== */
.idh-presta {
	padding-block: clamp(38px, 6vw, 72px);
	padding-inline: var(--idh-cadre, var(--rail));
}
.idh-presta__cadre { max-width: 1200px; margin-inline: auto; }
.idh-presta__tete { max-width: 640px; margin-bottom: clamp(24px, 4vw, 40px); }
.idh-presta__tete .section-kicker { margin-bottom: 10px; }
.idh-presta__tete h2 { margin: 0 0 10px; }
.idh-presta__sous {
	margin: 0; font-style: italic; color: var(--idh-ink-soft);
	font-size: clamp(1rem, 1.4vw, 1.15rem); max-width: 54ch;
}

/* --- 1 · Familles : grille encadrée à hairlines ---------------------------
   4 colonnes (5e item → 2e ligne, sous la 1re case). Hairlines en box-shadow
   inset (haut+gauche) PAR case plutôt que gap+background du conteneur : avec
   un item de moins que de colonnes sur la dernière ligne, le fond du
   conteneur qui « passait » par le gap se voyait comme un grand pavé gris
   (aucune case pour le couvrir) — ici, pas de case = rien d'affiché, juste
   le blanc du conteneur. */
.presta-familles {
	display: grid; grid-template-columns: repeat(4, 1fr);
	background: #fff;
	border: 1px solid var(--idh-line); border-radius: var(--idh-radius); overflow: hidden;
}
.presta-famille {
	background: #fff; padding: clamp(24px, 2.4vw, 32px);
	display: flex; flex-direction: column; gap: 10px;
	box-shadow: inset 1px 1px 0 0 var(--idh-line);
}
.presta-famille__icone { width: 36px; height: 36px; color: var(--idh-accent); }
.presta-famille__icone svg { width: 100%; height: 100%; display: block; }
.presta-famille h3 { margin: 4px 0 0; font-size: 1.1rem; color: var(--idh-title); }
.presta-famille p { margin: 0; font-size: .92rem; color: var(--idh-ink-soft); flex: 1; }
.presta-famille__tag {
	align-self: flex-start; margin-top: 6px;
	font-size: .7rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
	padding: 4px 11px; border-radius: 999px;
}
.presta-famille__tag--inclus { background: rgba(63, 142, 130, .14); color: var(--idh-good, #3f8e82); }
.presta-famille__tag--option { background: rgba(201, 146, 47, .14); color: var(--idh-accent); }
@media (max-width: 980px) { .presta-familles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .presta-familles { grid-template-columns: 1fr; } }

/* --- 2 · Déroulé : bande primaire PLEINE LARGEUR, contenu cadré ------------
   Le fond --idh-primary va aux bords de la fenêtre (à placer dans un conteneur
   Elementor « pleine largeur ») ; le contenu s'aligne EXACTEMENT sur la largeur
   encadrée du site (même axe gauche/droite que les autres sections de la page :
   rail sur la bande, cadre max 1200 centré, sans padding propre). */
.idh-presta--deroule {
	width: 100%;
	padding-block: clamp(46px, 7vw, 84px);
	background: var(--idh-primary);
	color: var(--idh-on-primary);
}
.idh-presta--deroule .idh-presta__tete { max-width: 620px; }
.idh-presta--deroule .section-kicker { color: var(--idh-accent); }
.idh-presta--deroule h2 { color: #fff; }
.idh-presta--deroule .idh-presta__sous { color: rgba(255, 255, 255, .78); }
.deroule-etapes {
	list-style: none; margin: clamp(26px, 4vw, 42px) 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 1px; background: rgba(255, 255, 255, .16);
}
.deroule-etape { background: var(--idh-primary); padding: clamp(20px, 2vw, 26px) clamp(16px, 1.6vw, 22px); }
.deroule-etape__num {
	font-family: var(--idh-font-display); font-weight: 600; font-size: .78rem;
	letter-spacing: .05em; color: var(--idh-accent);
}
.deroule-etape h4 { margin: 12px 0 8px; color: #fff; font-size: 1rem; }
.deroule-etape p { margin: 0; font-size: .87rem; color: rgba(255, 255, 255, .72); }
@media (max-width: 900px) { .deroule-etapes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .deroule-etapes { grid-template-columns: 1fr; } }

/* --- 3 · Formules : comparatif 3 colonnes ------------------------------- */
.presta-formules {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: clamp(18px, 2vw, 24px); align-items: stretch;
}
.presta-formule {
	background: #fff; border: 1px solid var(--idh-line); border-radius: var(--idh-radius);
	padding: clamp(26px, 2.4vw, 32px); display: flex; flex-direction: column;
}
.presta-formule--reco {
	border-color: var(--idh-accent); border-width: 2px; position: relative;
	box-shadow: 0 24px 46px -30px rgba(20, 32, 26, .4);
}
.presta-formule__badge {
	position: absolute; top: -13px; left: clamp(20px, 2vw, 28px);
	background: var(--idh-accent); color: var(--idh-on-accent);
	font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
	padding: 5px 12px; border-radius: 999px;
}
.presta-formule__nom { margin: 0 0 6px; font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--idh-ink-soft); }
.presta-formule__prix {
	margin: 0 0 2px; font-family: var(--idh-font-display); font-weight: 600;
	font-size: clamp(1.7rem, 2.4vw, 2.1rem); letter-spacing: -.02em; color: var(--idh-title);
}
.presta-formule__prix span { font-family: var(--idh-font-body); font-weight: 400; font-size: .92rem; color: var(--idh-ink-soft); }
.presta-formule__cible { margin: 0 0 20px; font-size: .86rem; color: var(--idh-ink-soft); }
.presta-formule__points { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; flex: 1; font-size: .9rem; }
.presta-formule__points li { display: flex; gap: 9px; align-items: flex-start; }
.presta-formule__points svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--idh-good, #3f8e82); }
.presta-formule__points li.non-inclus { color: var(--idh-ink-soft); }
.presta-formule__points li.non-inclus svg { color: var(--idh-line); }
.presta-formule .bouton { width: 100%; justify-content: center; }
@media (max-width: 900px) { .presta-formules { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; } }

/* --- 4 · Options : liste tarifée --------------------------------------- */
.presta-options { margin-top: clamp(22px, 3vw, 32px); border-top: 1px solid var(--idh-line); }
.presta-option {
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	padding: 18px 2px; border-bottom: 1px solid var(--idh-line);
}
.presta-option__g { display: flex; align-items: center; gap: 16px; }
.presta-option__icone { width: 24px; height: 24px; flex: none; color: var(--idh-accent); }
.presta-option__icone svg { width: 100%; height: 100%; display: block; }
.presta-option h4 { margin: 0 0 2px; font-size: .98rem; color: var(--idh-title); }
.presta-option p { margin: 0; font-size: .85rem; color: var(--idh-ink-soft); }
.presta-option__prix { margin: 0; font-family: var(--idh-font-display); font-weight: 600; font-size: 1.05rem; white-space: nowrap; color: var(--idh-title); }
.presta-option__prix span { font-family: var(--idh-font-body); font-weight: 400; font-size: .8rem; color: var(--idh-ink-soft); }
@media (max-width: 560px) { .presta-option { flex-direction: column; align-items: flex-start; gap: 8px; } }

/* ==========================================================================
   Pages « Article » — [idh_article] / [idh_article_chapo|corps|galerie]
   --------------------------------------------------------------------------
   Corps de lecture limité à --mesure (62ch), centré ; l'image « pleine
   largeur » déborde un peu ; galerie = mosaïque (.bloc-galerie partagée).
   Charte --idh-*.
   ========================================================================== */
.idh-article__chapo {
	max-width: var(--mesure); margin: 0 auto;
	font-family: var(--idh-font-body); font-style: italic;
	font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.5;
	color: var(--idh-ink-soft);
}

.idh-article__corps {
	max-width: var(--mesure); margin-inline: auto;
}
.idh-article--tout > * + * { margin-top: clamp(28px, 4vw, 44px); }

.idh-article__corps .a-bloc { margin: 0; }
.idh-article__corps .a-bloc + .a-bloc { margin-top: clamp(30px, 4vw, 44px); }
.idh-article__corps h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); margin: 0 0 14px; color: var(--idh-title); }
.idh-article__corps p { margin: 0 0 1em; }
.idh-article__corps p:last-child { margin-bottom: 0; }
.idh-article__corps a:not(.bouton) { color: var(--idh-link); }
.idh-article__corps ul,
.idh-article__corps ol { margin: 0 0 1em; padding-left: 1.3em; }

/* --- citation --------------------------------------------------------- */
.a-bloc--citation {
	border-left: 2px solid var(--idh-accent);
	padding-left: clamp(18px, 2.4vw, 26px);
}
.a-bloc--citation blockquote {
	margin: 0; font-family: var(--idh-font-display); font-weight: 500;
	font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.3; letter-spacing: -.015em;
	color: var(--idh-title);
}
.a-bloc--citation cite {
	display: block; margin-top: 12px; font-style: normal;
	font-size: .85rem; color: var(--idh-ink-soft);
}

/* --- image pleine largeur (déborde du corps de lecture) ---------------
   Sélecteur qualifié : passe devant `.idh-article__corps .a-bloc{margin:0}`. */
.idh-article__corps .a-bloc--image-pleine,
.idh-article--tout .a-bloc--image-pleine {
	margin-inline: calc(-1 * clamp(0px, 8vw, 150px));
	width: auto;
}
.a-bloc--image-pleine img {
	width: 100%; max-height: 560px; object-fit: cover;
	border-radius: var(--idh-media-radius); display: block;
}
.a-bloc--image-pleine figcaption,
.a-bloc--duo figcaption {
	text-align: center; font-size: .8rem; color: var(--idh-ink-soft); margin-top: 10px;
}

/* --- duo texte + image ----------------------------------------------- */
.a-bloc--duo {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: clamp(20px, 3vw, 30px); align-items: center;
}
.a-bloc--duo .a-bloc__texte { min-width: 0; }
.a-bloc--duo .a-bloc__texte p:last-child { margin-bottom: 0; }
.a-bloc--duo .a-bloc__media { margin: 0; }
.a-bloc--duo .a-bloc__media img {
	width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
	border-radius: var(--idh-media-radius); display: block;
}
@media (max-width: 720px) { .a-bloc--duo { grid-template-columns: 1fr; } }

/* --- chiffre clé ---------------------------------------------------- */
.a-bloc--chiffre {
	display: flex; gap: clamp(16px, 2vw, 22px); align-items: center;
	background: #fff; border: 1px solid var(--idh-line); border-radius: var(--idh-radius);
	padding: clamp(20px, 2vw, 26px) clamp(22px, 2.2vw, 28px);
}
.a-bloc--chiffre__valeur {
	margin: 0; flex: none;
	font-family: var(--idh-font-display); font-weight: 700; letter-spacing: -.02em;
	font-size: clamp(2rem, 3.4vw, 2.6rem); color: var(--idh-accent);
}
.a-bloc--chiffre__legende { margin: 0; font-size: .92rem; color: var(--idh-ink-soft); }

/* --- liste à puces ------------------------------------------------- */
.a-bloc--liste ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.a-bloc--liste li { display: flex; gap: 12px; font-size: .96rem; padding: 0; }
.a-bloc--liste li::before {
	content: ""; flex: none; width: 6px; height: 6px; margin-top: 9px;
	border-radius: 50%; background: var(--idh-accent);
}

/* --- galerie de l'article (mosaïque .bloc-galerie partagée) --------- */
.idh-article-galerie { max-width: 1200px; margin-inline: auto; }
.idh-article-galerie__tete { margin-bottom: clamp(16px, 2.5vw, 22px); }
.idh-article-galerie__tete .section-kicker { margin-bottom: 6px; }
.idh-article-galerie__tete h3 { margin: 0; color: var(--idh-title); }
.idh-article-galerie .bloc-galerie { margin-top: 0; }

/* ==========================================================================
   [idh_journal] — page « Journal » : grille d'articles + filtres + pagination
   Maquette : idhotes-maquette-actualites.html (gabarit 1 · ARCHIVE).
   Filtrage / pagination : assets/js/pages.js (IIFE « .idh-journal »).
   ========================================================================== */
.idh-journal {
	padding-inline: var(--idh-cadre, var(--rail));
	padding-block: clamp(40px, 6vw, 68px);
}
.idh-journal__intro,
.idh-journal__barre,
.idh-journal__grille,
.idh-journal__pagination,
.idh-journal__vide { max-width: 1280px; margin-inline: auto; }

.idh-journal__intro { margin-bottom: clamp(22px, 3vw, 34px); }
.idh-journal__intro h2 { color: var(--idh-title); margin: 0; }
.idh-journal__intro .section-kicker { margin-bottom: 12px; }
.idh-journal__sous {
	margin: 14px 0 0; max-width: 56ch;
	font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--idh-ink-soft);
}

/* --- barre de filtres --------------------------------------------------- */
.idh-journal__barre {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 14px 22px; margin-bottom: clamp(22px, 3vw, 32px);
}
.idh-journal__heb { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--idh-ink-soft); }
.idh-journal__heb select {
	font: inherit; font-size: .85rem; padding: 8px 30px 8px 12px;
	border: 1px solid var(--idh-line); border-radius: var(--idh-radius-btn);
	background: #fff; color: var(--idh-ink); cursor: pointer;
	-webkit-appearance: none; appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--idh-ink-soft) 50%), linear-gradient(135deg, var(--idh-ink-soft) 50%, transparent 50%);
	background-position: calc(100% - 16px) center, calc(100% - 11px) center;
	background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.idh-journal__filtres { display: flex; flex-wrap: wrap; gap: 8px; }
/* Boutons de filtre = traitement bouton de la charte (.bouton / .bouton--clair) :
   angles var(--idh-radius-btn), couleurs charte. Twenty Twenty-One stylise le
   sélecteur nu `button:not(:hover):not(:active):not(.has-background)` (0-3-1) en
   sombre : on repasse background / color / border-color en !important pour le
   battre sans course à la spécificité. */
.idh-journal .filtre-pilule {
	-webkit-appearance: none; appearance: none;
	font: inherit; font-size: .85rem; font-weight: 500; line-height: 1;
	letter-spacing: .01em; text-transform: none;
	margin: 0; padding: 10px 18px;
	border: 1px solid var(--idh-line) !important;
	border-radius: var(--idh-radius-btn);
	background: transparent !important; color: var(--idh-ink) !important;
	cursor: pointer;
	transition: background-color .25s, color .25s, border-color .25s;
}
.idh-journal .filtre-pilule:hover {
	background: var(--idh-ink) !important; color: var(--idh-bg) !important;
	border-color: var(--idh-ink) !important;
}
.idh-journal .filtre-pilule.est-actif {
	background: var(--idh-primary) !important; color: var(--idh-on-primary) !important;
	border-color: var(--idh-primary) !important;
}
.idh-journal .filtre-pilule.est-actif:hover {
	background: var(--idh-primary-dark) !important;
	border-color: var(--idh-primary-dark) !important;
}

/* --- grille ------------------------------------------------------------ */
.idh-journal__grille {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: clamp(26px, 3vw, 34px) clamp(20px, 2.4vw, 28px);
}
.carte-article { display: flex; flex-direction: column; }
.carte-article[hidden] { display: none; }
/* overflow VISIBLE : le badge .carte-article__categorie est posé par-dessus
   sans être rogné par la forme du kit — c'est l'image qui porte le rayon /
   la découpe. */
.carte-article__media {
	position: relative; display: block; overflow: visible;
	aspect-ratio: 4 / 3; margin-bottom: 15px;
}
/* position:absolute sur l'image : le conteneur est dimensionné par
   aspect-ratio (pas une hauteur explicite) — une photo plus « haute » que le
   4:3 (portrait) sortie du flux normal ne peut plus repousser la hauteur du
   conteneur ; object-fit:cover s'occupe seul du recadrage. Sans ça, une image
   portrait s'affichait plus haute que les autres cartes de la grille. */
.carte-article__media img,
.carte-article__media-vide {
	position: absolute; inset: 0;
	width: 100% !important; height: 100% !important; max-width: none !important;
	object-fit: cover; display: block;
	border-radius: var(--idh-media-radius) !important;
	clip-path: var(--idh-media-clip, none);
}
.carte-article__media img { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.carte-article__media-vide { position: absolute; inset: 0; background: var(--idh-bg-alt); }
.carte-article:hover .carte-article__media img { transform: scale(1.045); }
.carte-article__categorie {
	position: absolute; top: 13px; left: 13px; z-index: 2;
	background: rgba(30, 44, 38, .82); color: #fff;
	font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
	padding: 6px 11px; border-radius: var(--idh-radius); backdrop-filter: blur(4px);
}
.carte-article__corps { display: flex; flex-direction: column; align-items: flex-start; }
.carte-article__corps h3 { margin: 0 0 8px; color: var(--idh-title); }
.carte-article__corps h3 a { text-decoration: none; }
.carte-article__corps p { margin: 0 0 10px; font-size: .92rem; color: var(--idh-ink-soft); }
.carte-article__lien { font-size: .85rem; font-weight: 500; color: var(--idh-link); cursor: pointer; margin-top: auto; }

.idh-journal__vide { margin: 30px auto 0; color: var(--idh-ink-soft); }

/* --- pagination numérotée -------------------------------------------- */
/* Le thème (Twenty Twenty-One) a sa propre règle générique .pagination
   (border-top: 3px solid + margin/padding en shorthand) qui matche aussi ce
   <nav class="idh-journal__pagination pagination">. Même spécificité (0-1-0) :
   on doit explicitement remettre border/margin/padding à zéro, sinon un trait
   apparaît sous la grille — y compris quand le nav est vide, car [hidden]
   (0-1-0, feuille navigateur) perd face à notre display:flex (0-1-0, feuille
   auteur, chargée après) : d'où la règle [hidden] dédiée, plus spécifique. */
.idh-journal__pagination {
	display: flex; align-items: center; justify-content: center;
	gap: 6px; margin: clamp(34px, 4vw, 52px) 0 0; flex-wrap: wrap;
	border: 0; padding-top: 0;
}
.idh-journal__pagination[hidden] { display: none; }
.idh-journal__pagination button {
	-webkit-appearance: none; appearance: none;
	font: inherit; font-size: .88rem;
	min-width: 38px; height: 38px; padding: 0 10px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 0 !important; border-radius: var(--idh-radius) !important;
	background: transparent !important; color: var(--idh-ink-soft) !important;
	cursor: pointer; transition: background-color .2s, color .2s;
}
.idh-journal__pagination button:hover:not(:disabled) { background: var(--idh-bg-alt) !important; color: var(--idh-ink) !important; }
.idh-journal__pagination button.est-courant { background: var(--idh-primary) !important; color: var(--idh-on-primary) !important; }
.idh-journal__pagination button:disabled { opacity: .4; cursor: default; }
.idh-journal__pagination .idh-journal__ellipsis { color: var(--idh-ink-soft); padding: 0 4px; }

@media (max-width: 900px) {
	.idh-journal__grille { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.idh-journal__grille { grid-template-columns: 1fr; }
}