/*
 * Unités BuildingStack — cartes, filtres et visionneuse.
 *
 * Servent à deux endroits : la landing « projet » ([unites_dispo]) et la page
 * Locations ([locations]). Les tokens de la landing sont repris quand ils
 * existent, avec une valeur de repli pour que le bloc tienne debout sur
 * n'importe quelle page.
 *
 * SOMMAIRE
 *  1. Conteneur de la page Locations
 *  2. Filtres
 *  3. Grille + carte
 *  4. Visionneuse photos
 *  5. Responsive
 */

/* ============ 1. CONTENEUR (page Locations) ============ */
/* Le bloc peint son propre fond : déposé sur une page ordinaire, il ne dépend
   pas de la mise en page du thème. */
.unites-listing{
	background:var(--ink, #17161a);
	color:var(--paper, #f5f1e7);
	padding:40px;
	border-radius:20px;
	font-size:16px;
	line-height:1.5;
	-webkit-font-smoothing:antialiased;
}
.unites-listing *, .unites-listing *::before, .unites-listing *::after{box-sizing:border-box;}
.unites-listing h3{margin:0;font-weight:600;color:inherit;}
.unites-listing p{margin:0;}
.unites-listing ul{margin:0;padding:0;list-style:none;}
.unites-listing a{color:inherit;text-decoration:none;}
.unites-listing img{display:block;max-width:100%;}

.unites-listing__compte{
	font-size:15px;color:var(--stone, #948e80);
	margin:0 0 28px;
}
.unites-listing__compte strong{color:var(--paper, #f5f1e7);font-weight:600;}
/* Masquée à l'œil, gardée pour les lecteurs d'écran : c'est cette ligne qui
   annonce le nombre de résultats après un filtrage. */
.unites-listing__compte--invisible{
	position:absolute;width:1px;height:1px;margin:-1px;padding:0;
	overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.unites-listing__aucun{
	margin-top:32px;padding:28px;text-align:center;
	border:1px dashed var(--ink-line, rgba(245,241,231,0.12));border-radius:14px;
	color:var(--stone, #948e80);font-size:15px;
}
.unites-dispo__vide{color:var(--stone, #948e80);font-size:15px;}

/* ============ 2. FILTRES ============ */
.unites-filtres{
	display:flex;flex-direction:column;gap:14px;
	padding-bottom:22px;margin-bottom:22px;
	border-bottom:1px solid var(--ink-line, rgba(245,241,231,0.12));
}
.unites-filtres__groupe{
	display:flex;flex-wrap:wrap;align-items:center;gap:8px;
}
.unites-filtres__titre{
	flex:none;width:72px;
	font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
	color:var(--stone, #948e80);
}
.unites-filtres__pastille{
	display:inline-flex;align-items:center;gap:7px;
	padding:8px 14px;border-radius:999px;
	font-family:inherit;font-size:14px;font-weight:500;line-height:1;
	border:1px solid var(--ink-line, rgba(245,241,231,0.12));
	background:transparent;color:var(--paper, #f5f1e7);
	cursor:pointer;
	transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.unites-filtres__pastille:hover{border-color:var(--paper, #f5f1e7);}
.unites-filtres__pastille:focus-visible{outline:2px solid var(--ember, #e9691d);outline-offset:2px;}
.unites-filtres__pastille[aria-pressed="true"]{
	background:var(--paper, #f5f1e7);color:var(--ink, #17161a);
	border-color:var(--paper, #f5f1e7);
}
.unites-filtres__n{font-size:12px;opacity:.55;font-variant-numeric:tabular-nums;}
/* Une valeur que les autres filtres ont déjà vidée reste lisible mais inerte. */
.unites-filtres__pastille[disabled]{opacity:.3;cursor:default;}
.unites-filtres__pastille[disabled]:hover{border-color:var(--ink-line, rgba(245,241,231,0.12));}

/* ============ 3. GRILLE + CARTE ============ */
.unites-dispo{
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:32px 28px;
	align-items:stretch;
}

.unites-dispo .unite{
	min-width:0;display:flex;flex-direction:column;
	background:var(--ink-soft, #211f24);
	border:1px solid var(--ink-line, rgba(245,241,231,0.12));
	border-radius:16px;
	overflow:hidden;
	transition:border-color .25s ease;
}
.unites-dispo .unite:hover{border-color:rgba(245,241,231,0.28);}
.unites-dispo .unite[hidden]{display:none;}

/* — Visuel + pastilles — */
.unites-dispo .unite__media{
	position:relative;display:block;overflow:hidden;
	aspect-ratio:4 / 3;background:var(--ink, #17161a);
}
.unites-dispo .unite__media img{
	position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
	transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.unites-dispo .unite:hover .unite__media img{transform:scale(1.04);}
.unites-dispo .unite__media:focus-visible{outline:2px solid var(--ember, #e9691d);outline-offset:-2px;}
/* Fiche pas encore préchauffée : un aplat discret, pas un trou. */
.unites-dispo .unite__media-vide{
	position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
	color:var(--stone, #948e80);opacity:.35;
}
.unites-dispo .unite__media-vide svg{width:34px;height:34px;}

.unites-dispo .unite__statut,
.unites-dispo .unite__etiquette{
	position:absolute;top:14px;
	display:inline-flex;align-items:center;gap:7px;
	padding:7px 11px;border-radius:999px;
	font-size:12px;font-weight:700;line-height:1;
}
.unites-dispo .unite__statut{
	left:14px;
	background:rgba(23,22,26,0.78);color:var(--paper, #f5f1e7);
	letter-spacing:.06em;text-transform:uppercase;
	-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
/* La pastille verte dit « libre » d'un coup d'œil, avant même de lire. */
.unites-dispo .unite__statut::before{
	content:"";flex:none;width:6px;height:6px;border-radius:50%;background:#7fc47a;
}
.unites-dispo .unite__etiquette{
	right:14px;background:var(--paper, #f5f1e7);color:var(--ink, #17161a);letter-spacing:.01em;
}

/* — Corps — */
.unites-dispo .unite__corps{
	display:flex;flex-direction:column;flex:1;padding:22px;
}
.unites-dispo .unite__entete{
	display:flex;justify-content:space-between;align-items:baseline;
	gap:6px 12px;flex-wrap:wrap;
}
.unites-dispo .unite__titre{
	font-size:22px;font-weight:600;letter-spacing:-.01em;line-height:1.2;
}
.unites-dispo .unite__prix{
	display:flex;align-items:baseline;gap:5px;white-space:nowrap;
}
.unites-dispo .unite__montant{font-size:22px;font-weight:600;letter-spacing:-.01em;}
.unites-dispo .unite__periode{font-size:14px;color:var(--stone, #948e80);}

/* Immeuble et ville : indispensables dès que la liste dépasse un projet. */
.unites-dispo .unite__lieu{
	margin-top:6px;font-size:13px;color:var(--stone, #948e80);
}

/* — Specs : micro-libellé + valeur, séparés par un filet — */
.unites-dispo .unite__specs{
	display:flex;flex-wrap:wrap;align-items:center;
	margin-top:14px;row-gap:8px;overflow:hidden;
	font-size:15px;color:var(--paper, #f5f1e7);
}
/* Le filet est porté par chaque spec et remonté de 1px : quand la ligne passe
   à la suivante, il sort du conteneur et l'overflow le coupe — pas de trait
   orphelin en début de ligne. */
.unites-dispo .unite__specs li{
	display:inline-flex;align-items:center;gap:7px;padding:0 12px;
	margin-left:-1px;border-left:1px solid var(--ink-line, rgba(245,241,231,0.12));
}
.unites-dispo .unite__specs li:first-child{
	padding-left:0;margin-left:0;border-left:0;
}
.unites-dispo .unite__specs li:last-child{padding-right:0;}
.unites-dispo .unite__spec-label{
	font-size:11px;letter-spacing:.05em;text-transform:uppercase;
	color:var(--stone, #948e80);white-space:nowrap;
}

/* Repliée à deux lignes : une fiche bavarde ne doit pas déformer la grille. */
.unites-dispo .unite__desc{
	margin-top:14px;font-size:14px;line-height:1.55;color:var(--stone, #948e80);
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* — Actions — */
.unites-dispo .unite__actions{
	display:flex;gap:10px;margin-top:auto;padding-top:22px;
}
.unites-dispo .unite__actions .wp-block-button{flex:1;min-width:0;margin:0;}
/* Le bouton est redécrit ici plutôt que repris de .projet-landing : la page
   Locations n'a pas ce conteneur. */
.unites-dispo .unite__actions .wp-block-button__link{
	display:inline-flex;align-items:center;justify-content:center;gap:8px;
	width:100%;padding:15px 22px;border-radius:999px;
	font-family:inherit;font-size:14px;font-weight:700;letter-spacing:.01em;
	border:1px solid var(--ember, #e9691d);
	background:transparent;color:var(--paper, #f5f1e7);
	text-decoration:none;white-space:nowrap;
	transition:background .15s ease, color .15s ease;
}
.unites-dispo .unite__actions .wp-block-button__link:hover,
.unites-dispo .unite__actions .wp-block-button__link:focus-visible{
	background:var(--ember, #e9691d);color:#1b1108;
}
.unites-dispo .unite__actions .wp-block-button__link:focus-visible{
	outline:2px solid var(--ember, #e9691d);outline-offset:2px;
}
.unites-dispo .unite__actions .wp-block-button__link::after{
	content:"";width:18px;height:12px;flex:none;background:currentColor;
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16' fill='none'%3E%3Cpath d='M2 8h20M16 2l6 6-6 6' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
	mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16' fill='none'%3E%3Cpath d='M2 8h20M16 2l6 6-6 6' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
	transition:transform .18s ease;
}
.unites-dispo .unite__actions .wp-block-button__link:hover::after{transform:translateX(3px);}

.unites-dispo .unite__photos{
	flex:none;width:50px;align-self:stretch;
	display:inline-flex;align-items:center;justify-content:center;
	padding:0;border:1px solid var(--ink-line, rgba(245,241,231,0.12));border-radius:999px;
	background:transparent;color:var(--paper, #f5f1e7);cursor:pointer;
	transition:border-color .15s ease, color .15s ease;
}
.unites-dispo .unite__photos:hover{border-color:var(--paper, #f5f1e7);}
.unites-dispo .unite__photos:focus-visible{outline:2px solid var(--ember, #e9691d);outline-offset:2px;}
.unites-dispo .unite__photos svg{width:19px;height:19px;}

/* ============ 4. VISIONNEUSE PHOTOS ============ */
/* Rattachée au <body> : les valeurs sont littérales, aucun token à portée. */

.unites-lightbox{
	position:fixed;inset:0;z-index:100000;
	display:flex;align-items:center;justify-content:center;
	padding:24px;
	background:rgba(15,14,17,0.94);
	-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
	opacity:0;transition:opacity .18s ease;
}
.unites-lightbox[hidden]{display:none;}
.unites-lightbox.is-open{opacity:1;}
.unites-lightbox__img{
	max-width:min(1100px, 100%);max-height:100%;
	width:auto;height:auto;display:block;
	border-radius:14px;object-fit:contain;
	box-shadow:0 30px 80px rgba(0,0,0,0.5);
}
.unites-lightbox__fermer,
.unites-lightbox__nav{
	position:absolute;
	display:inline-flex;align-items:center;justify-content:center;
	width:46px;height:46px;padding:0;
	border:1px solid rgba(245,241,231,0.22);border-radius:999px;
	background:rgba(23,22,26,0.7);color:#f5f1e7;
	cursor:pointer;transition:border-color .15s ease, background .15s ease;
}
.unites-lightbox__fermer:hover,
.unites-lightbox__nav:hover{border-color:#f5f1e7;background:rgba(23,22,26,0.95);}
.unites-lightbox__fermer:focus-visible,
.unites-lightbox__nav:focus-visible{outline:2px solid #e9691d;outline-offset:2px;}
.unites-lightbox__fermer{top:20px;right:20px;}
.unites-lightbox__nav--prec{left:20px;}
.unites-lightbox__nav--suiv{right:20px;}
.unites-lightbox__fermer svg,
.unites-lightbox__nav svg{width:20px;height:20px;}
.unites-lightbox__legende{
	position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
	margin:0;padding:8px 16px;border-radius:999px;
	background:rgba(23,22,26,0.7);color:#f5f1e7;
	font-size:13px;letter-spacing:.02em;white-space:nowrap;
}
body.unites-lightbox-ouverte{overflow:hidden;}

@media (prefers-reduced-motion: reduce){
	.unites-dispo .unite__media img,
	.unites-lightbox{transition-duration:0.001ms !important;}
}

/* ============ 5. RESPONSIVE ============ */
@media (max-width: 900px){
	.unites-listing{padding:28px 22px;}
	.unites-filtres__titre{width:100%;}
}

@media (max-width: 767px){
	.unites-dispo{
		grid-template-columns:repeat(2, minmax(0, 1fr));
		gap:32px 20px;
	}
	/* Deux colonnes sur 600px : la fiche se resserre pour que le titre et le
	   prix tiennent encore sur la même ligne. */
	.unites-dispo .unite__corps{padding:18px;}
	.unites-dispo .unite__titre,
	.unites-dispo .unite__montant{font-size:19px;}
	.unites-dispo .unite__specs{font-size:14px;}
	.unites-dispo .unite__actions{padding-top:18px;}
}

/* La rangée de specs n'entre plus sur une ligne : le libellé passe au-dessus
   de la valeur plutôt que de replier la troisième spec sous les deux autres. */
@media (min-width: 576px) and (max-width: 767px){
	.unites-dispo .unite__specs{
		display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0, 1fr);
		overflow:visible;
	}
	.unites-dispo .unite__specs li{
		flex-direction:column;align-items:flex-start;gap:3px;
		padding:0 10px;margin-left:0;
	}
}

@media (max-width: 575px){
	.unites-listing{padding:22px 16px;border-radius:14px;}
	.unites-dispo{
		grid-template-columns:1fr;
		gap:24px;
	}
	.unites-dispo .unite__corps{padding:20px;}
	.unites-dispo .unite__titre,
	.unites-dispo .unite__montant{font-size:21px;}
}

@media (max-width: 720px){
	.unites-lightbox{padding:16px;}
	.unites-lightbox__fermer{top:12px;right:12px;}
	.unites-lightbox__nav--prec{left:8px;}
	.unites-lightbox__nav--suiv{right:8px;}
}