/* ==========================================================================
   assets/css/produits.css
   --------------------------------------------------------------------------
   [idh_produits]. Deux formats, deux blocs distincts ci-dessous :
     .produits--feature  → alterné, galerie interactive (accueil)
     .produits--grille   → cartes compactes (partout ailleurs)
   ========================================================================== */

/* ==========================================================================
   FORMAT FEATURE — bloc alterné, galerie interactive
   --------------------------------------------------------------------------
   Photo d'un côté, texte de l'autre, un bloc sur deux inversé
   (.maison--inverse). Le bloc entier est CADRÉ à --idh-cadre — même
   largeur de contenu que volet / séjour / mosaïque / avis / dispo
   (accueil.css) : plus de plein-bleed. Aucun fond derrière le texte.
   ========================================================================== */

.produits--feature { padding-inline: var(--idh-cadre, var(--rail)); }

/* --- Bloc d'introduction : texte + preuve visuelle (bande photo) --------- */
.produits__intro {
	padding-inline: var(--idh-cadre, var(--rail));
	margin-bottom: clamp(50px, 8vh, 96px);
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: clamp(24px, 4vw, 60px);
	align-items: center;
}
.produits__intro-texte { min-width: 0; }
.produits__chapo {
	margin-top: 18px;
	font-size: clamp(1.05rem, 1.6vw, 1.3rem);
	line-height: 1.55;
	color: var(--idh-ink);
	max-width: 46ch;
}

.produits__intro-media { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-width: 0; }
.produits__intro-media figure {
	margin: 0; overflow: hidden; display: grid;
	border-radius: var(--idh-media-radius);
	background: var(--idh-bg-alt);
}
.produits__intro-media img {
	grid-area: 1 / 1;
	width: 100%; height: 100%;
	min-width: 0; min-height: 0;
	object-fit: cover; display: block;
}
/* petites vignettes carrées : elles fixent la hauteur des lignes de la grille */
.produits__intro-media figure:not(:first-child) img { aspect-ratio: 1 / 1; }
/* grande vignette : portrait, occupe les deux lignes ; l'image s'étire pour
   remplir toute la figure (align-self/justify-self explicites — sans ça une
   image lazy pas encore chargée retombe à 0, cf. .maison__media). */
.produits__intro-media figure:first-child { grid-row: span 2; }
.produits__intro-media figure:first-child img { align-self: stretch; justify-self: stretch; }

@media (max-width: 1040px) {
	.produits__intro { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.produits__intro-media figure:first-child { grid-row: auto; }
	.produits__intro-media figure:first-child img { aspect-ratio: 1 / 1; }
}

.maison {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	min-height: 78vh;
}
.maison + .maison { margin-top: clamp(56px, 8vh, 110px); }

/* Découpe pilotée par le kit d'identité (--idh-media-radius / --idh-media-clip,
   définies par .kit-<kit> dans kits.css). La découpe est portée par le
   CONTENEUR de l'image (.galerie__vue, ou .maison__media quand il n'y a qu'une
   photo) qui a overflow:hidden : le zoom au survol reste ainsi CONTENU dans la
   forme (elle ne bouge pas, l'image zoome dedans). La barre de vignettes
   (.vignettes), qui est SŒUR de .galerie__vue (pas dedans), n'est jamais
   rognée par la forme. */
.maison__media {
	position: relative;
	display: grid;                 /* enfants empilés ; hauteur = la ligne de .maison
	                                  (donc la colonne texte en face) → étirement grille */
	overflow: visible;
	min-width: 0;                  /* sinon la colonne se dimensionne sur le min-content de
	                                  la photo (grid blowout) et écrase la colonne texte */
	min-height: 0;
}
.galerie > .galerie__vue,
.maison__media:has(> .maison__media-img) {
	overflow: hidden;
	border-radius: var(--idh-media-radius) !important;
	clip-path: var(--idh-media-clip, none);
}
.maison--inverse .maison__media { order: 2; }

/* --- Photo : REMPLIT tout le média, quelle que soit la hauteur de la
   colonne texte en face. Tout est empilé en grid-area 1/1. Les <img>
   portent align-self/justify-self:stretch EXPLICITE : sans ça, une image
   pas encore chargée (lazy) n'a pas de taille intrinsèque, la grille la
   pose en « start » et la photo retombe à 0 (vide sous l'image). --------- */
.maison__media > .galerie,
.maison__media > .maison__media-img { grid-area: 1 / 1; min-width: 0; }

.galerie { display: grid; }
.galerie > .galerie__vue { grid-area: 1 / 1; display: grid; overflow: hidden; }

.galerie__vue > img,
.maison__media-img {
	grid-area: 1 / 1;
	width: 100% !important;
	height: 100% !important;
	align-self: stretch;
	justify-self: stretch;
	min-width: 0;
	min-height: 0;
	object-fit: cover;
}
.galerie__vue > img {
	opacity: 0;
	transition: opacity .7s ease, transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.galerie__vue > img.est-vue { opacity: 1; }
.maison:hover .galerie__vue > img.est-vue { transform: scale(1.04); }

/* Une seule photo (pas de galerie) : même zoom au survol, cf. [idh_photos]. */
.maison__media-img { transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.maison:hover .maison__media-img { transform: scale(1.04); }

.galerie > .vignettes { grid-area: 1 / 1; align-self: end; justify-self: start; margin: 20px; z-index: 2; display: flex; gap: 8px; }
/* <button> : reset + !important (le thème stylise button:not(:hover)… en 0-3-1
   : fond sombre, rayon 25px). Vignette = pastille photo ronde. */
.vignette {
	-webkit-appearance: none; appearance: none;
	width: 52px; height: 52px;
	padding: 0 !important;
	border: 1px solid rgba(255,255,255,.55) !important;
	border-radius: 50% !important;
	background: transparent !important;
	cursor: pointer;
	overflow: hidden;
	opacity: .62;
	transition: opacity .3s, border-color .3s;
}
.vignette img { width: 100%; height: 100%; object-fit: cover; }
.vignette:hover { opacity: .9; }
.vignette[aria-current="true"] { opacity: 1; border-color: var(--idh-accent) !important; border-width: 2px !important; }

/* --- Texte : aucun fond, couleurs de page ------------------------------- */
.maison__corps { display: flex; flex-direction: column; justify-content: center; padding: clamp(36px, 5vw, 72px); }
.maison__commune { color: var(--idh-ink-soft); margin-bottom: 12px; }
/* <h3> (pas <h2>) : "5 logements..." est déjà un <h2> juste au-dessus, chaque
   maison doit lui être imbriquée, pas répéter le même niveau (audit « ordre
   des titres »). base.css donne à h3 une taille/graisse/chasse différentes
   de h2 (plus petit, plus léger) — on les réécrit ici pour garder EXACTEMENT
   l'apparence h2 d'origine, seule la sémantique change. */
.maison__corps h3 {
	font-size: clamp(2.3rem, 5.4vw, 4.3rem);
	font-weight: 600;
	font-variation-settings: "wdth" 92;
	letter-spacing: -0.035em;
	line-height: .96;
	margin-left: -0.045em;
}
.maison__corps h3 a { text-decoration: none; }
.maison__capacite { margin-top: 18px; color: var(--idh-ink-soft); font-size: .95rem; }

.maison__equip { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; max-width: 34ch; }
.maison__equip li { padding-top: 10px; border-top: 1px solid var(--idh-line); font-size: .93rem; }

/* --- Prochain évènement (agenda du guide associé au produit) ------------- */
.evenement {
	margin: 22px 0 0; padding: 10px 14px;
	display: inline-flex; align-items: center; gap: 8px;
	border: 1px solid var(--idh-line);
	/* IDH · 1 → réglages généraux, idh_charte_rayon_bouton → --idh-radius-btn
	   (includes/tokens.php) — même rayon que les autres boutons du site. */
	border-radius: var(--idh-radius-btn);
	font-size: .85rem; color: var(--idh-ink-soft);
}
.evenement svg { flex-shrink: 0; color: var(--idh-accent); }

.maison__pied { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 26px; }
.prix {
	font-family: var(--idh-font-display);
	font-size: 1.85rem; font-weight: 600;
	font-variation-settings: "wdth" 88;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	color: var(--idh-title);
}
.prix span { font-family: var(--idh-font-body); font-size: .82rem; font-weight: 400; letter-spacing: 0; color: var(--idh-ink-soft); }
.note { font-size: .88rem; color: var(--idh-ink-soft); }
.note b { color: var(--idh-accent); font-weight: 600; }
.maison__pied .lien { margin-left: auto; font-size: .95rem; font-weight: 500; }

@media (max-width: 1040px) {
	.maison { grid-template-columns: 1fr; min-height: 0; }
	.maison--inverse .maison__media { order: 0; }
	/* Média empilé : plus de colonne en face pour lui donner une hauteur,
	   on lui en impose une (la grille interne étire ensuite la photo). */
	.maison__media { aspect-ratio: 4 / 3; }
	/* Photo produit centrée ET remplie dans le média 4/3 : on force les
	   conteneurs galerie/vue à s'étirer (sinon ils se calent sur la taille
	   naturelle de l'image → photo plus petite, décentrée). */
	.maison__media > .galerie,
	.maison__media > .galerie > .galerie__vue { align-self: stretch; justify-self: stretch; min-width: 0; min-height: 0; }
	.galerie__vue > img,
	.maison__media-img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
}

/* ==========================================================================
   FORMAT GRILLE — carte compacte
   ========================================================================== */

.produits--grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: clamp(20px, 2.6vw, 32px);
}

.produit-carte__lien { display: block; text-decoration: none; color: inherit; }

.produit-carte__media { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; }
.produit-carte__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.produit-carte:hover .produit-carte__media img { transform: scale(1.05); }

.produit-carte__corps { padding-top: 14px; }
.produit-carte__commune { color: var(--idh-ink-soft); font-size: .85rem; margin-bottom: 4px; }
.produit-carte__corps h3 { font-size: 1.15rem; }

.produit-carte__pied { margin-top: 10px; display: flex; align-items: baseline; gap: 14px; }
.prix--petit { font-size: 1.15rem; }

/* Rayon piloté par le kit — voir kits.css, même variable que .maison__media
   plus haut : les cartes et le format feature suivent désormais la même
   géométrie de kit. */
.produit-carte__media { border-radius: var(--idh-media-radius, var(--idh-radius)); overflow: hidden; }