/* --- KI - Liste des projets --------------------------------------------- */
.kalimmo-grid {
	display: grid;
	gap: var(--ki-gap, 24px);
	grid-template-columns: repeat(var(--ki-cols, 3), 1fr);
	/* Toutes les lignes de la grille prennent la hauteur de leur vignette
	   la plus haute : c'est ce qui permet aux cartes d'une même ligne
	   d'être alignées en bas, même avec des accroches de longueurs
	   différentes. */
	grid-auto-rows: 1fr;
}

/* Au-delà de 4 colonnes, la grille se réduit progressivement : à 8
   vignettes par ligne, une colonne de vignette devient illisible en
   dessous d'une certaine largeur d'écran. Ces paliers s'appliquent quel
   que soit le réglage "Vignettes par ligne" et le plafonnent sans jamais
   l'augmenter (min() avec la valeur réglée). */
@media (max-width: 1400px) {
	.kalimmo-grid { grid-template-columns: repeat(min(var(--ki-cols, 3), 6), 1fr); }
}
@media (max-width: 1100px) {
	.kalimmo-grid { grid-template-columns: repeat(min(var(--ki-cols, 3), 4), 1fr); }
}
@media (max-width: 860px) {
	.kalimmo-grid { grid-template-columns: repeat(min(var(--ki-cols, 3), 3), 1fr); }
}
@media (max-width: 640px) {
	.kalimmo-grid { grid-template-columns: repeat(min(var(--ki-cols, 3), 2), 1fr); }
}
@media (max-width: 460px) {
	.kalimmo-grid { grid-template-columns: 1fr; }
}

.kalimmo-liste {
	display: flex;
	flex-direction: column;
	gap: var(--ki-gap, 24px);
}
.kalimmo-liste .kalimmo-card {
	display: flex;
	align-items: center;
	gap: 20px;
}

.kalimmo-card {
	display: block;
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	/* Avec grid-auto-rows: 1fr sur le conteneur, la carte remplit toute la
	   hauteur de sa cellule. La photo garde ses proportions (aspect-ratio,
	   object-fit: cover) : c'est donc bien le bloc de texte qui absorbe la
	   différence de hauteur, comme demandé. */
	height: 100%;
}
.kalimmo-card img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: inherit;
}
.kalimmo-card-titre {
	display: block;
	margin-top: 8px;
	font-weight: 600;
}
.kalimmo-card-ville,
.kalimmo-card-lots,
.kalimmo-card-prix {
	display: block;
	margin-top: 4px;
	font-size: 0.9em;
	opacity: 0.8;
}

/* --- KI - Liste des projets : style "Photo" (recadrée + superpositions) --- */
.kalimmo-card-photo {
	display: flex;
	flex-direction: column;
}
.kalimmo-card-photo .kalimmo-card-media {
	position: relative;
	display: block;
	overflow: hidden;
	background: #ddd; /* évite un flash vide pendant le chargement de l'image */
}
.kalimmo-card-photo .kalimmo-card-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}
.kalimmo-card-photo .kalimmo-card-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.05) 35%, transparent 60%);
	pointer-events: none;
}
.kalimmo-card-photo .kalimmo-card-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: 2px;
	line-height: 1;
}
.kalimmo-card-ville-overlay,
.kalimmo-card-residence-overlay {
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 2;
	margin-top: 0;
	color: #fff;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.75em;
	opacity: 1;
}
.kalimmo-card-photo .kalimmo-card-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1 1 auto;   /* absorbe la hauteur restante de la carte */
	min-height: 0;
	padding: 16px 4px 0;
}
/* Le lien de bas de carte est repoussé en bas du bloc de texte : sur une
   ligne de vignettes de contenus inégaux, les "Découvrir →" restent
   alignés entre eux au lieu de suivre la fin de chaque accroche. */
.kalimmo-card-photo .kalimmo-card-body > .kalimmo-card-lien {
	margin-top: auto;
	padding-top: 12px;
}
/* La photo, elle, ne se laisse jamais étirer : elle conserve le ratio
   choisi, seule la zone de texte varie. */
.kalimmo-card-photo .kalimmo-card-media {
	flex: 0 0 auto;
}
/* Style "Classique" avec un fond personnalisé (Design > "Titre / description - fond") : */
.kalimmo-card-photo .kalimmo-card-body-shade {
	padding: 18px 20px 20px;
	border-radius: 4px;
}
/* Style "Photo & survol" : bloc superposé sur la photo, masqué par défaut,
   révélé en fondu au survol (souris) ou au focus clavier (accessibilité).
   Sans équivalent tactile fiable sur mobile - voir la remarque dans
   readme-dev.md. */
.kalimmo-card-photo .kalimmo-card-body-hover {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 22px 20px;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.22s ease, transform 0.22s ease;
	pointer-events: none;
}
.kalimmo-card-hoverinfo:hover .kalimmo-card-body-hover,
.kalimmo-card-hoverinfo:focus-within .kalimmo-card-body-hover {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.kalimmo-card-body-hover .kalimmo-card-accroche,
.kalimmo-card-body-hover .kalimmo-card-lots,
.kalimmo-card-body-hover .kalimmo-card-prix {
	opacity: 0.9;
}
/* Comportement mobile/tactile pour le style "Photo & survol" : sur un
   écran tactile, :hover n'est jamais déclenché de façon fiable (au mieux
   au premier tap, qui déclenche aussi la navigation vers la fiche projet -
   l'information resterait donc inaccessible). Sur tout appareil sans
   capacité de survol réelle, le panneau reste affiché en permanence,
   superposé sur la photo, sans qu'aucune interaction soit nécessaire.
   Les appareils avec une souris (y compris les tablettes/laptops tactiles
   équipés d'une souris) gardent le survol normal, puisqu'ils remontent
   "hover: hover". */
@media (hover: none) {
	.kalimmo-card-photo .kalimmo-card-body-hover {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
		transition: none;
	}
}
.kalimmo-card-accroche {
	display: block;
	margin-top: 6px;
	font-size: 0.88em;
	line-height: 1.5;
	opacity: 0.75;
}
.kalimmo-card-lien {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 12px;
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.kalimmo-card-fleche {
	transition: transform 0.15s ease;
}
.kalimmo-card-photo:hover .kalimmo-card-fleche {
	transform: translateX(3px);
}
.kalimmo-liste .kalimmo-card-photo {
	flex-direction: row;
}
.kalimmo-liste .kalimmo-card-photo .kalimmo-card-media {
	width: 220px;
	flex-shrink: 0;
}
.kalimmo-liste .kalimmo-card-photo .kalimmo-card-body {
	padding: 0;
}

/* --- KI - Bannière projet : mode "Image" (fond CSS) ------------------------ */
.kalimmo-banniere-image-bg {
	width: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* --- KI - Bannière projet : mode "Slider" (carrousel) ---------------------- */
.kalimmo-carousel {
	position: relative;
	overflow: hidden;
}
.kalimmo-carousel-track {
	display: flex;
	transition: transform 0.5s ease;
}
.kalimmo-carousel-slide {
	flex: 0 0 100%;
	min-width: 100%;
}
.kalimmo-carousel-slide img {
	width: 100%;
	height: auto;
	display: block;
}
.kalimmo-carousel-hauteur-fixe,
.kalimmo-carousel-hauteur-fixe .kalimmo-carousel-track,
.kalimmo-carousel-hauteur-fixe .kalimmo-carousel-slide {
	height: 100%;
}
.kalimmo-carousel-hauteur-fixe .kalimmo-carousel-slide img {
	height: 100%;
	object-fit: cover;
}
.kalimmo-carousel-prev,
.kalimmo-carousel-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(0, 0, 0, 0.4);
	color: #fff;
	border: none;
	width: 40px;
	height: 40px;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
}
.kalimmo-carousel-prev { left: 16px; }
.kalimmo-carousel-next { right: 16px; }
.kalimmo-carousel-dots {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
}
.kalimmo-carousel-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	padding: 0;
}
.kalimmo-carousel-dot.is-active {
	background: #fff;
}

/* --- KI - Bannière projet : mode "Bandeau" (défilement continu) ------------ */
.kalimmo-bandeau {
	overflow: hidden;
	position: relative;
}
.kalimmo-bandeau-track {
	display: flex;
	width: max-content;
	height: 100%;
	animation-name: kalimmo-bandeau-scroll;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
.kalimmo-bandeau-track img {
	height: 100%;
	width: auto;
	/* Important : la plupart des thèmes (dont Avada) appliquent un reset
	   global du type "img { max-width: 100%; }" pour des images responsives.
	   Sur un conteneur en "width: max-content", ce max-width en pourcentage
	   entre en conflit avec le "width: auto" ci-dessus et peut écraser
	   certaines images à une largeur quasi nulle - ce qui ressemblait à des
	   "trous" dans la bande. On neutralise explicitement cette contrainte
	   ici, où elle n'a pas lieu d'être : la hauteur est fixe et la largeur
	   doit suivre le ratio naturel de l'image, sans plafond. */
	max-width: none;
	display: block;
	flex-shrink: 0;
}
.kalimmo-bandeau:hover .kalimmo-bandeau-track {
	animation-play-state: paused;
}
@keyframes kalimmo-bandeau-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* --- KI - Bannière projet : mode "Galerie" (mosaïque) ----------------------- */
.kalimmo-galerie-masonry {
	column-count: var(--ki-galerie-cols, 3);
	column-gap: 16px;
}
.kalimmo-galerie-masonry a {
	display: block;
	margin-bottom: 16px;
	break-inside: avoid;
	cursor: zoom-in;
}
.kalimmo-galerie-masonry img {
	width: 100%;
	display: block;
}
@media (max-width: 900px) {
	.kalimmo-galerie-masonry { column-count: 2; }
}
@media (max-width: 600px) {
	.kalimmo-galerie-masonry { column-count: 1; }
}

/* --- KI - Image du programme (vignette / bannière simple) ----------------- */
/* La classe est portée par la balise <img> elle-même depuis la 1.21.0 :
   l'élément ne produit plus de <div> d'enrobage. */
img.kalimmo-image {
	width: 100%;
	height: auto;
	display: block;
}

/* --- KI - Tableau des lots : lien plan (icône / image personnalisée) ------- */
.kalimmo-plan-lien i,
.kalimmo-btn i {
	font-size: 18px;
}
.kalimmo-media-icone-image {
	width: 24px;
	height: 24px;
	object-fit: contain;
	vertical-align: middle;
}

/* --- KI - Boutons plan de masse / descriptif ------------------------------ */
/* La bordure, le fond, la couleur de texte et l'arrondi sont posés en style
   inline par instance (voir class-fusion-elements.php) : ce bloc ne fixe que
   la mise en page de base. */
.kalimmo-btn {
	display: inline-block;
	padding: 10px 24px;
	text-decoration: none;
	margin-right: 8px;
	line-height: 1.3;
	text-align: center;
	/* Le bouton "Demande d'information" est un <button>, pas un <a> : sans
	   cette règle, le navigateur affiche la flèche par défaut et rien
	   n'indique qu'il est cliquable. */
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;

	/* ---- Pourquoi ces deux lignes (correction 1.21.4) -------------------
	   Les colonnes d'Avada sont des conteneurs flex : leur wrapper porte
	   la classe .fusion-content-layout-column (ou -row), c'est-à-dire
	   display:flex avec align-items:stretch par défaut. Or un conteneur
	   flex "blockifie" ses enfants directs et les étire sur toute la
	   largeur : un display:inline-block n'y change RIEN. C'est pour cela
	   que le bouton prenait toute la largeur quel que soit le réglage.
	   align-self reprend la main sur ce comportement, et width:auto annule
	   l'étirement résiduel. Avada contourne le même problème en enrobant
	   ses boutons dans un .fusion-button-wrapper ; on s'en passe ici pour
	   garder un balisage sans imbrication inutile. */
	align-self: flex-start;
	width: auto;
	max-width: 100%;
}
.kalimmo-btn:hover,
.kalimmo-btn:focus {
	cursor: pointer;
}

/* Alignement dans la colonne. Ne s'applique qu'en contexte flex, c'est-à-
   dire dans une colonne Avada - ce qui couvre tous les usages réels. */
.kalimmo-btn-align-center {
	align-self: center;
	margin-left: auto;
	margin-right: auto;
}
.kalimmo-btn-align-right {
	align-self: flex-end;
	margin-left: auto;
	margin-right: 0;
}

/* Étirement sur toute la largeur, quand il est explicitement demandé.
   align-self:stretch rétablit le comportement par défaut du conteneur
   flex, et la neutralisation de margin-right évite que "width:100% + 8px
   de marge" ne déborde du conteneur. */
.kalimmo-btn-pleine-largeur {
	display: block;
	align-self: stretch;
	width: 100%;
	box-sizing: border-box;
	margin-left: 0;
	margin-right: 0;
	text-align: center;
}

/* --- KI - Tableau des lots ------------------------------------------------- */
/* Les couleurs (bordure, entête, statuts) sont injectées par instance via
   l'onglet Design de l'élément Fusion Builder (voir class-fusion-elements.php).
   Ce bloc ne fixe que la mise en page de base. */
.kalimmo-tableau-lots {
	width: 100%;
	border-collapse: collapse;
	margin-top: 24px;
}
.kalimmo-tableau-lots th,
.kalimmo-tableau-lots td {
	border: 1px solid #ddd;
	text-align: left;
}

/* --- KI - Année de livraison ------------------------------------------------ */
.kalimmo-annee-livraison {
	margin: 8px 0;
}

/* --- Carte OpenStreetMap (Leaflet) ------------------------------------------ */
/* Leaflet a besoin d'une hauteur explicite sur son conteneur pour
   s'afficher - sans ça la carte reste invisible (0px de haut). */
.kalimmo-map {
	width: 100%;
	height: 400px;
	border-radius: 8px;
}

/* --- KI - Tableau des lots : sous-titre ------------------------------------- */
.kalimmo-tableau-soustitre {
	margin: 0 0 12px;
}

/* --- KI - Recherche projets (élément indépendant) --------------------------- */
/* Grille plutôt que flex : le formulaire occupe toute la largeur de la
   colonne Avada qui le contient, et chaque champ occupe toute la largeur
   de sa cellule. Le nombre de champs par ligne est réglable dans l'onglet
   Design (--ki-recherche-cols) ; à 1, chaque champ est sur sa propre
   ligne en pleine largeur. */
.kalimmo-recherche {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(var(--ki-recherche-cols, 3), minmax(0, 1fr));
	align-items: end;
	gap: var(--ki-recherche-gap, 12px);
}
@media (max-width: 780px) {
	.kalimmo-recherche { grid-template-columns: repeat(min(var(--ki-recherche-cols, 3), 2), minmax(0, 1fr)); }
}
@media (max-width: 520px) {
	.kalimmo-recherche { grid-template-columns: 1fr; }
}
.kalimmo-recherche-groupe {
	display: block;
	width: 100%;
	min-width: 0;   /* sans ça, un contenu long empêcherait la cellule de se réduire */
}
.kalimmo-recherche-champ,
.kalimmo-recherche select {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 12px;
	background: #fff;
	font-family: inherit;
	font-size: inherit;
}
.kalimmo-recherche-btn {
	width: 100%;
	cursor: pointer;
	border: 1px solid transparent;
	font-family: inherit;
}
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- KI - Recherche programmes : fourchette de prix (double curseur) ------- */
.kalimmo-recherche-prix {
	box-sizing: border-box;
	padding: 8px 12px 10px;
	background: #fff;
}
.kalimmo-recherche-prix-entete {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	font-size: 0.85em;
	line-height: 1.3;
}
.kalimmo-recherche-prix-label {
	opacity: 0.7;
}
.kalimmo-recherche-prix-valeur {
	font-weight: 600;
	white-space: nowrap;
}
/* Les deux curseurs sont empilés au même endroit pour former une seule
   barre à deux poignées. Seules les poignées reçoivent les événements
   souris (pointer-events), sinon le curseur du dessus intercepterait
   tous les clics destinés à celui du dessous. */
.kalimmo-recherche-prix-pistes {
	position: relative;
	display: block;
	height: 26px;
	margin-top: 6px;
}
.kalimmo-recherche-prix-pistes::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 3px;
	margin-top: -1.5px;
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.12);
}
.kalimmo-recherche-prix-curseur {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 26px;
	margin: 0;
	padding: 0;
	background: none;
	appearance: none;
	-webkit-appearance: none;
	pointer-events: none;
}
.kalimmo-recherche-prix-curseur:focus {
	outline: none;
}
.kalimmo-recherche-prix-curseur::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid #fff;
	background: currentColor;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	cursor: grab;
	pointer-events: auto;
}
.kalimmo-recherche-prix-curseur::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid #fff;
	background: currentColor;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	cursor: grab;
	pointer-events: auto;
}
.kalimmo-recherche-prix-curseur::-moz-range-track {
	background: none;
	border: none;
}
.kalimmo-recherche-prix-curseur:active::-webkit-slider-thumb { cursor: grabbing; }
.kalimmo-recherche-prix-curseur:active::-moz-range-thumb { cursor: grabbing; }

/* --- KI - Filtre par ville (filtrage dynamique, sans rechargement) --------- */
.kalimmo-filtre-ville {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ki-filtre-gap, 10px);
}
.kalimmo-filtre-ville button {
	cursor: pointer;
	font-family: inherit;
	font-size: var(--ki-filtre-taille, 13px);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1;
	padding: 11px 18px;
	border: 1px solid var(--ki-filtre-bordure, #dddddd);
	background: var(--ki-filtre-fond, transparent);
	color: var(--ki-filtre-texte, inherit);
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.kalimmo-filtre-ville button.is-active {
	background: var(--ki-filtre-fond-actif, #beaf87);
	color: var(--ki-filtre-texte-actif, #252526);
	border-color: var(--ki-filtre-fond-actif, #beaf87);
}
/* Carte masquée par "KI - Filtre par ville" (voir assets/js/front.js) */
.kalimmo-card[data-filtre-cache] {
	display: none !important;
}

/* --- KI - Bouton Demande d'information (modale) ----------------------------- */
.kalimmo-demande-info-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
}
.kalimmo-demande-info-modal.is-open {
	display: block;
}
.kalimmo-demande-info-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
}
.kalimmo-demande-info-panel {
	position: relative;
	max-width: 480px;
	margin: 5vh auto;
	max-height: 90vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 8px;
	padding: 32px;
}
.kalimmo-demande-info-fermer {
	position: absolute;
	top: 8px;
	right: 12px;
	background: none;
	border: none;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}
.kalimmo-demande-info-intro {
	margin-top: 0;
}
.kalimmo-demande-info-form label {
	display: block;
	margin-bottom: 14px;
	font-weight: 600;
}
.kalimmo-demande-info-form input,
.kalimmo-demande-info-form textarea {
	display: block;
	width: 100%;
	margin-top: 4px;
	padding: 8px 10px;
	font-weight: normal;
	box-sizing: border-box;
	border: 1px solid #ddd;
}
.kalimmo-demande-info-piege {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
}
.kalimmo-demande-info-feedback {
	margin: 12px 0 0;
	font-weight: 600;
}
.kalimmo-demande-info-feedback.is-succes {
	color: #1a7a1a;
}
.kalimmo-demande-info-feedback.is-erreur {
	color: #a00;
}
body.kalimmo-modal-ouverte {
	overflow: hidden;
}

/* Menu de footer : hérite de la charte du footer Avada. */
.kalimmo-menu-programmes ul{list-style:none;margin:0;padding:0}
.kalimmo-menu-programmes li{margin:0 0 .65em;padding:0}
.kalimmo-menu-programmes a{display:inline-block;overflow-wrap:anywhere}
.kalimmo-menu-programmes-tous{margin-top:.6em;text-decoration:underline;text-underline-offset:.2em}

.kalimmo-card-residence-overlay{right:12px;overflow-wrap:anywhere}