/* ==========================================================================
   assets/css/logement.css
   --------------------------------------------------------------------------
   Sections spécifiques aux FICHES LOGEMENT (pages produits). Reprend la
   maquette idhotes-page-logement-modele : mêmes classes BEM, mêmes tokens
   --idh-*. Ne redéfinit PAS ce qui vit déjà dans accueil.css / base.css /
   components.css (.etapes, .temoignages, .dispo__photo, .sejour, .section-*,
   .venue, .forme) — ces gabarits sont réutilisés tels quels.
   ========================================================================== */

/* --- Fil d'Ariane ------------------------------------------------------- */
.fil {
	padding: 18px var(--idh-cadre, var(--rail)) 0;
	display: flex; flex-wrap: wrap; gap: 8px;
	font-size: .82rem; color: var(--idh-ink-soft);
}
.fil a { color: inherit; text-decoration: none; }
.fil a:hover { color: var(--idh-primary); }
.fil span[aria-hidden] { opacity: .5; }
.fil b { color: var(--idh-ink); font-weight: 600; }

/* --- Bandeau intérieur (hauteur réduite, pas de conditions du jour) ----- */
.hero--page { min-height: min(var(--idh-bandeau-h, 70vh), 720px); }
/* Texte ancré près du bas du bandeau (marge réduite vs l'accueil) ; il reste
   assez d'air pour que la carte .fiche-info chevauche l'arête sans masquer le
   titre (logement.js recale sa marge sur la moitié de sa hauteur). */
.hero--page .hero__texte { padding-bottom: clamp(72px, 10vh, 128px); }

/* Le titre d'une fiche produit se lit comme un h2 du site : même chasse
   (wdth 92) — pas la chasse resserrée / croissante animée du hero d'accueil
   (.hero h1 .ligne:nth-child(N) > span dans components.css impose wdth 76/88/100). */
.hero--page .hero__texte .idh-conteneur h1 .ligne > span {
	font-variation-settings: "wdth" 92;
}

/* --- Section générique intérieure -------------------------------------------
   Même cadre que l'accueil (.journal / .avis / .dispo) : padding latéral
   = --idh-cadre (plafonne le contenu à 1400 px, centré, sur grand écran),
   pas de max-width qui rétrécirait le contenu sous cette valeur. */
.section { padding: clamp(56px, 9vh, 120px) var(--idh-cadre, var(--rail)); }
.section--alt { background: var(--idh-bg-alt); }
.section__tete { max-width: 720px; margin-bottom: clamp(32px, 5vh, 56px); }
.section__tete p:last-child { margin-top: 14px; color: var(--idh-ink-soft); }

/* --- Boutons secondaires --------------------------------------------------- */
.bouton--fantome {
	display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px;
	border: 1px solid var(--idh-line); border-radius: var(--idh-radius-btn);
	color: var(--idh-ink); text-decoration: none; font-size: .88rem; background: transparent;
}
.bouton--fantome:hover { border-color: var(--idh-primary); color: var(--idh-primary); }

/* ==========================================================================
   RUBAN MARITIME DÉFILANT — .bord (dans la section Services)
   ========================================================================== */
.bord {
	border-top: 1px solid var(--idh-line); border-bottom: 1px solid var(--idh-line);
	overflow: hidden; color: var(--idh-ink-soft);
	font-size: .82rem; font-variant-numeric: tabular-nums;
	--bord-duree: 46s;
	/* Ruban « conditions du jour » : plein écran (enfant direct de .sejour,
	   pas de .sejour__contenu qui le cadrerait). */
	margin: clamp(28px, 4vh, 56px) 0 0;
}
.bord__piste { display: flex; width: max-content; animation: idh-bord-defile var(--bord-duree) linear infinite; }
.bord:hover .bord__piste, .bord:focus-within .bord__piste { animation-play-state: paused; }
.bord__lot { display: flex; align-items: center; gap: 0 30px; padding: 13px 15px; }
@keyframes idh-bord-defile { to { transform: translateX(-50%); } }
.bord__item { display: flex; gap: 9px; align-items: center; white-space: nowrap; }
.bord__item b { font-weight: 600; color: var(--idh-ink); }
.bord__coef { color: var(--idh-accent); }
.bord__coef b { color: var(--idh-accent); }
.bord__sep { color: var(--idh-accent); opacity: .5; width: .7em; height: .7em; flex-shrink: 0; }
.bord__lieu { white-space: nowrap; opacity: .72; }
.bord--sombre { border-color: rgba(242,243,238,.22); color: rgba(242,243,238,.72); }
.bord--sombre .bord__item b { color: var(--idh-on-primary); }
.bord--sombre .bord__lieu { color: rgba(242,243,238,.72); }
@media (prefers-reduced-motion: reduce) {
	.bord__piste { animation: none; }
	.bord { overflow-x: auto; }
}

/* ==========================================================================
   FICHE-INFO — bandeau commune / capacité / avis / prix
   ========================================================================== */
/* La carte de réservation chevauche le bas du [idh_hero], centrée sur son
   arête inférieure. [idh_fil] et [idh_fiche] sont des widgets frères dans
   la colonne Elementor du contenu : on replace la carte AVANT le fil
   (order) et on annule la gouttière (~100 px) qu'Elementor pose entre le
   bloc hero et le bloc contenu, pour que le chevauchement soit possible. */
.elementor-element:has(> .elementor-widget-container > .elementor-shortcode > .fiche-info) { order: -1; }
.e-con:has(> .elementor-element > .elementor-widget-container > .elementor-shortcode > .fil) { margin-top: 0 !important; }

/* [idh_sejour] (fond vert) et [idh_avis] (fond clair) doivent se toucher :
   on annule la gouttière de 20 px que le conteneur Elementor pose entre les
   deux widgets frères (le padding interne de .avis garde l'air nécessaire). */
.elementor-element:has(> .elementor-widget-container > .elementor-shortcode > .sejour)
+ .elementor-element:has(> .elementor-widget-container > .elementor-shortcode > .avis) {
	margin-top: -20px; /* = gap du conteneur Elementor (--widgets-spacing) */
}

.fiche-info {
	/* Repli avant JS : logement.js règle ensuite margin-top à la moitié
	   exacte de la hauteur de carte (chevauchement centré sur l'arête). */
	margin: clamp(-84px, -5vw, -54px) 0 0;
	position: relative; z-index: 10;
	padding: 0 var(--idh-cadre, var(--rail));
}
.fiche-info__carte {
	background: #fff; border-radius: var(--idh-radius);
	box-shadow: 0 30px 60px -30px rgba(18,26,23,.35);
	padding: 26px 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px;
}
.fiche-info__item { display: flex; flex-direction: column; gap: 2px; }
.fiche-info__item small { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--idh-ink-soft); }
.fiche-info__item strong { font-size: 1.05rem; }
.fiche-info__sep { width: 1px; align-self: stretch; background: var(--idh-line); }
.fiche-info__cta { margin-left: auto; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
@media (max-width: 1040px) { .fiche-info__carte { padding: 22px 24px; gap: 16px 24px; } }
@media (max-width: 760px) {
	.fiche-info { margin-top: -34px; }
	.fiche-info__carte { flex-direction: column; align-items: stretch; text-align: center; }
	.fiche-info__sep { display: none; }
	.fiche-info__cta { margin-left: 0; justify-content: center; }
}
@media (max-width: 480px) {
	.fiche-info__cta { flex-direction: column; align-items: stretch; }
	.fiche-info__cta .bouton, .fiche-info__cta .bouton--fantome { text-align: center; justify-content: center; }
}

/* ==========================================================================
   GALERIE — mosaïque de tuiles
   ========================================================================== */
.galerie-grille {
	display: grid; grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, clamp(140px, 19vw, 230px));
	/* Même écart entre photos que [idh_photos] (.photo-story, components.css). */
	gap: 18px;
}
/* <button> : reset d'apparence + !important sur fond/bord/police —
   Twenty Twenty-One stylise `button:not(:hover):not(:active):not(.has-background)`
   (spécificité 0-3-1 : fond sombre, rayon 25px, police du thème) et gagne sinon.
   Rayon = « Arrondi des images » de la charte (--idh-media-radius). */
.galerie-grille__tuile {
	position: relative; display: grid; margin: 0;
	-webkit-appearance: none; appearance: none;
	padding: 0 !important; border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;   /* reset du <button> sombre du thème, sans halo gris */
	color: inherit !important; font: inherit !important;
	cursor: zoom-in;
	/* overflow VISIBLE : la géométrie du kit (galet Cocon, sommet Montagne)
	   vit sur l'<img>, pas sur la tuile — sinon elle rogne le libellé
	   « Voir les N photos » posé dans le coin (principe de [idh_photos]). */
	overflow: visible;
}
/* grid-area 1/1 + stretch : l'image REMPLIT la tuile (centrée h/v par
   object-fit:cover) même en lazy-load — un height:100% ne se résout pas
   sur une <img> pas encore chargée dans une piste de grille. */
/* Rayon/découpe : géométrie NEUTRE, jamais la forme du kit (voir l'exception
   [idh_galerie] dans kits.css) — border-radius = --idh-radius, clip-path
   aucun, quel que soit le kit actif. Cette règle se charge après kits.css
   (même sélecteur, même !important) : c'est donc bien elle qui décide ici,
   pas la règle générique de kits.css — les deux doivent rester alignées. */
.galerie-grille__tuile 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;
	border-radius: var(--idh-radius) !important;
	clip-path: none !important;
	transition: transform .5s ease;
}
.galerie-grille__tuile:hover img { transform: scale(1.045); }
.galerie-grille__tuile:focus-visible { outline: 2px solid var(--idh-accent); outline-offset: -2px; }
.galerie-grille__tuile--grande { grid-column: span 2; grid-row: span 2; }
.galerie-grille__plus {
	position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 2;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 18px; font-family: var(--idh-font-body); font-size: .82rem; font-weight: 600;
	background: var(--idh-primary); color: var(--idh-on-primary);
	border: 1px solid var(--idh-primary); border-radius: var(--idh-radius-btn);
	box-shadow: 0 6px 18px -8px rgba(18,26,23,.4);
}
/* Responsive : même logique que [idh_photos] (.photo-story) — la grille
   reste ENCADRÉE (padding --idh-cadre du .section parent), jamais de
   défilement plein écran, écart entre photos toujours 18px. */
@media (max-width: 900px) {
	.galerie-grille { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, clamp(150px, 34vw, 220px)); }
	.galerie-grille__tuile--grande { grid-column: 1 / -1; grid-row: span 1; }
}
@media (max-width: 520px) {
	.galerie-grille { grid-template-rows: repeat(3, clamp(160px, 44vw, 210px)); }
}

/* --- Visionneuse plein écran ---------------------------------------------- */
.lightbox {
	position: fixed; inset: 0; z-index: 100;
	display: flex; align-items: center; justify-content: center;
	background: rgba(14,20,17,.94);
	opacity: 0; visibility: hidden; transition: opacity .25s ease;
}
.lightbox.est-ouvert { opacity: 1; visibility: visible; }
.lightbox__figure { max-width: min(92vw, 1400px); max-height: 86vh; margin: 0; text-align: center; }
.lightbox__figure img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: var(--idh-media-radius, var(--idh-radius)); }
.lightbox__figure figcaption { margin-top: 14px; color: rgba(255,255,255,.72); font-size: .84rem; }
/* <button> : reset + !important (cf. .galerie-grille__tuile) — rayon = charte
   (--idh-radius-btn), pas le cercle 50% ni le rayon 25px du thème. */
.lightbox__fermer, .lightbox__nav {
	position: absolute; cursor: pointer; line-height: 1;
	-webkit-appearance: none; appearance: none;
	display: flex; align-items: center; justify-content: center;
	padding: 0 !important; font: inherit !important;
	background: rgba(255,255,255,.1) !important; color: #fff !important;
	border: 1px solid rgba(255,255,255,.24) !important;
	border-radius: var(--idh-radius-btn) !important;
}
.lightbox__fermer { top: 22px; right: 22px; width: 44px; height: 44px; font-size: 1.2rem; }
.lightbox__nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 1.8rem; }
.lightbox__nav--prev { left: 22px; }
.lightbox__nav--next { right: 22px; }
.lightbox__fermer:hover, .lightbox__nav:hover { background: rgba(255,255,255,.22) !important; }
@media (max-width: 640px) {
	.lightbox__nav { width: 42px; height: 42px; font-size: 1.4rem; }
	.lightbox__nav--prev { left: 8px; } .lightbox__nav--next { right: 8px; }
	.lightbox__fermer { top: 12px; right: 12px; width: 38px; height: 38px; }
}

/* ==========================================================================
   INTRODUCTION + CARACTÉRISTIQUES
   ========================================================================== */
.logement-intro { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 6vw, 70px); align-items: center; }
.logement-intro--seul { grid-template-columns: 1fr; max-width: 68ch; }
/* Cadre d'image à ratio fixe : sans lui, une photo portrait s'étire sur toute
   sa hauteur naturelle (colonne étroite → image 3-4× plus haute que le texte,
   surtout en tablette). Ratio + object-fit:cover → recadrage centré H et V,
   quelle que soit l'orientation du fichier. */
.logement-intro__media {
	border-radius: var(--idh-media-radius, var(--idh-radius));
	overflow: hidden;
	align-self: center;
	position: relative;
}
/* Hauteur = ratio de la largeur via ::before (hack padding, toujours définie —
   plus fiable qu'aspect-ratio quand l'<img> est en absolu, et immunisé contre
   .elementor img{height:auto}). object-fit:cover → recadrage centré H et V,
   qu'un portrait ou un paysage soit fourni. Carré (1x1, padding-top:100%) —
   pas un ratio panoramique (16/10 auparavant) : le texte de [idh_intro] est
   souvent long, un cadre trop bas laissait un grand vide sous une photo
   courte à côté d'un texte qui continue largement plus bas. */
.logement-intro__media::before { content: ""; display: block; padding-top: 100%; }
.logement-intro__media img {
	position: absolute !important; inset: 0 !important;
	width: 100% !important; height: 100% !important; max-width: none !important;
	object-fit: cover; object-position: center; display: block;
}
.caracteristiques { list-style: none; padding: 0; margin: 26px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.caracteristiques li { display: flex; align-items: center; gap: 10px; font-size: .92rem; }
.caracteristiques svg { width: 20px; height: 20px; color: var(--idh-accent); flex: none; }
@media (max-width: 1040px) { .logement-intro { gap: clamp(26px, 4vw, 44px); } }
@media (max-width: 900px) {
	.logement-intro { grid-template-columns: 1fr; }
	.caracteristiques { grid-template-columns: 1fr; }
	/* Tablette / mobile : 1 colonne, image au-dessus du texte. Elle reprend son
	   ratio naturel — plus de recadrage carré (qui coupait trop, surtout un
	   portrait). Le « trop haute » de la version 2 colonnes ne se pose pas ici :
	   l'image n'est plus à côté d'un texte court, elle est empilée. */
	.logement-intro__media { order: -1; aspect-ratio: auto; }
	.logement-intro__media::before { content: none; }
	.logement-intro__media img {
		position: static !important;
		width: 100% !important; height: auto !important;
	}
}

/* ==========================================================================
   DESCRIPTIF (blocs)
   ========================================================================== */
.descriptif__grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 30px; }
.descriptif__bloc { padding: 26px 28px; background: #fff; border-radius: var(--idh-radius); }
.descriptif__bloc h3 { font-size: 1.15rem; margin: 0 0 14px; }
.descriptif__bloc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.descriptif__bloc li { padding-left: 20px; position: relative; font-size: .92rem; color: var(--idh-alt-ink); }
.descriptif__bloc li::before {
	content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px;
	background: var(--idh-accent); border-radius: var(--idh-puce-radius, 50%);
}
@media (max-width: 720px) { .descriptif__grille { grid-template-columns: 1fr; gap: 18px; } .descriptif__bloc { padding: 22px; } }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { max-width: 860px; }
.faq__item { border-bottom: 1px solid var(--idh-line); }
.faq__item summary {
	list-style: none; cursor: pointer; padding: 20px 34px 20px 0; position: relative;
	font-family: var(--idh-font-display); font-size: 1.05rem; font-weight: 600;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
	content: "+"; position: absolute; right: 0; top: 18px; font-size: 1.3rem; color: var(--idh-accent);
	transition: transform .25s ease;
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { margin: 0 0 22px; max-width: 68ch; color: var(--idh-ink-soft); }

/* ==========================================================================
   CARTE / SECTEUR — RGPD
   ========================================================================== */
.secteur { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 56px); align-items: center; }
.secteur__adresse { font-size: 1rem; margin: 0 0 18px; }
.secteur__carte {
	position: relative; aspect-ratio: 4/3; border-radius: var(--idh-radius); overflow: hidden;
	background: var(--idh-bg-alt); background-size: cover; background-position: center;
}
.secteur__consent {
	position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
	justify-content: center; gap: 14px; text-align: center; padding: 24px;
	background: linear-gradient(rgba(18,26,23,.55), rgba(18,26,23,.55)); color: #fff;
}
/* color explicite : sinon le sélecteur nu `p { color: var(--idh-ink) }` (base.css)
   l'emporte sur le blanc hérité de .secteur__consent → texte sombre illisible
   sur l'overlay foncé de la carte. */
.secteur__consent p { max-width: 34ch; font-size: .86rem; margin: 0; color: #fff; }
.secteur__carte iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: none; }
.secteur__carte.est-accepte .secteur__consent { display: none; }
.secteur__carte.est-accepte iframe { display: block; }
@media (max-width: 900px) { .secteur { grid-template-columns: 1fr; } }

/* ==========================================================================
   AVIS COMPACTS (page logement)
   ========================================================================== */
.avis-produit__chiffres { display: flex; gap: clamp(24px, 4vw, 48px); flex-wrap: wrap; margin: 22px 0 34px; }
.avis-produit__chiffres strong { display: block; font-family: var(--idh-font-display); font-size: 2rem; }
.avis-produit__chiffres span { display: block; font-size: .8rem; color: var(--idh-ink-soft); }

/* Avis paginés ([idh_avis] produit + [idh_avis_complet]) : N visibles, le
   reste replié (attribut hidden retiré au clic « Charger plus »). On force
   l'affichage des témoignages non repliés À TOUTES LES TAILLES : sinon la
   règle mobile de l'accueil (.temoignages .temoignage:nth-child(n+3)
   {display:none}) rognerait la pagination sur tablette/mobile. */
#logement-avis .temoignages .temoignage,
.idh-complet .temoignages .temoignage { display: flex; }
#logement-avis .temoignages .temoignage[hidden],
.idh-complet .temoignages .temoignage[hidden] { display: none; }

/* Idem pour [idh_journal] : la règle mobile de components.css
   (.articles--grille .article:nth-child(n+3){display:none}) ne doit pas
   rogner la pagination client. */
.idh-complet .articles--grille .article { display: block; }
.idh-complet .articles--grille .article[hidden] { display: none; }

/* Listes filtrables .idh-complet ([idh_avis_complet] / [idh_randonnees_complet]
   / [idh_adresses_complet], et duplicables sur une même page). La barre .filtre
   est déjà dans une section cadrée à --idh-cadre : on annule son padding
   latéral (pages.css) pour ne pas double-encadrer. */
.idh-complet .filtre { padding: 4px 0 0; margin: 6px 0 30px; }
.idh-complet [data-idh-vide] { color: var(--idh-ink-soft); margin: 8px 0 0; }

/* Sélecteurs préfixés (#id / .classe) : passent devant le style bouton du kit
   Elementor (.elementor-kit-N button), sinon le bouton hérite d'un fond plein. */
#logement-avis .avis__plus,
.idh-complet .avis__plus,
.idh-lieux .avis__plus {
	margin-top: clamp(26px, 4vw, 44px);
	display: inline-flex; align-items: center; gap: 9px;
	padding: 12px 24px; font: inherit; font-size: .9rem; font-weight: 500; cursor: pointer;
	color: var(--idh-ink); background: transparent;
	border: 1px solid var(--idh-line); border-radius: var(--idh-radius-btn);
	box-shadow: none; text-shadow: none; letter-spacing: 0;
	transition: border-color .2s ease, color .2s ease;
}
#logement-avis .avis__plus:hover,
.idh-complet .avis__plus:hover,
.idh-lieux .avis__plus:hover { border-color: var(--idh-primary); color: var(--idh-primary); background: transparent; }
#logement-avis .avis__plus-n,
.idh-complet .avis__plus-n {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 1.5em; padding: 1px 6px; border-radius: 999px;
	background: var(--idh-line); color: var(--idh-ink); font-size: .78rem; font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   SERVICES — visuel « picto » quand l'étape n'a pas de photo
   ========================================================================== */
.etape__picto { width: 34px; height: 34px; color: var(--idh-accent); margin-bottom: 18px; }