/*
 * La porte d'un site dédié — fiche de bien comme fiche de programme.
 *
 * Gary, 30/08/2026 : « la porte d'entrée est trop basique. Fais un
 * design qui laisse supposer que ce qui vont voir est spécial. »
 *
 * LE PRINCIPE. La première photo du projet est POSÉE AU FOND, en
 * pleine lumière. Deux battants la recouvrent, voilés de sombre, et se
 * rejoignent au centre sur un filet d'or. Au survol ils s'écartent :
 * la lumière passe par la fente. On n'entre pas dans une page, on
 * ouvre une porte.
 *
 * LA MÉCANIQUE, et son piège. Chaque battant fait 50,5 % de large et
 * DÉCOUPE un calque qui, lui, fait toute la largeur de la porte
 * (198,02 % de 50,5 %), calé à gauche pour le battant gauche, à droite
 * pour le droit. Ce calque porte la photo en `center / cover`, comme
 * le fond : les trois plans partagent donc EXACTEMENT le même cadrage,
 * et la photo qui apparaît dans la fente prolonge celle des battants
 * au pixel près.
 *
 * La première version posait la photo directement sur le battant en
 * `background-size: 198% 100%`. Les deux moitiés se raccordaient bien
 * entre elles — mais `100 %` en hauteur ÉTIRE l'image, là où le fond la
 * RECADRE : à l'ouverture, la fente montrait un autre morceau de la
 * maison. La porte perdait tout son sens. Ne jamais mélanger `cover`
 * et un pourcentage de hauteur entre deux plans censés n'en faire
 * qu'un.
 */

.sd-cadre {
	display: block;
	container-type: inline-size;
	container-name: porte;
}

.sd {
	position: relative;
	display: block;
	isolation: isolate;
	overflow: hidden;
	margin-top: 22px;
	aspect-ratio: 2.1 / 1;
	/* PAS de min-height ici, et min-width:0 explicite.
	   `aspect-ratio` + `min-height` fabriquent une largeur minimale
	   INTRINSÈQUE (hauteur × rapport) qui remonte jusqu'à la colonne de
	   grille qui contient la porte : sur la fiche d'un bien en 375 px,
	   l'encadré passait de 335 à 419 pixels et la page se faisait
	   couper à droite. La hauteur se déduit de la largeur, jamais
	   l'inverse. */
	min-width: 0;
	border: 1px solid rgba(139, 111, 71, 0.38);
	background: var(--green-800);
	color: var(--white);
	text-decoration: none;
}

.sd:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }

/* ── 1. Ce qu'il y a derrière la porte ─────────────────────────────── */

.sd-lumiere {
	position: absolute;
	z-index: 0;
	inset: 0;
	background: var(--sd-photo) center / cover no-repeat;
}

/* La lueur chaude qui monte du sol quand la porte s'ouvre. */
.sd-lumiere::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0;
	background: radial-gradient(118% 96% at 50% 104%, rgba(214, 176, 120, 0.5), transparent 62%);
	transition: opacity 0.8s ease;
}

/* ── 2. Les deux battants ──────────────────────────────────────────── */

.sd-battant {
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 0;
	width: 50.5%;
	overflow: hidden;
	transition: transform 0.78s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}

/* Le calque fait toute la largeur de la porte — 100 / 50,5 = 198,02 % —
   et porte la photo au même cadrage que le fond. Le battant n'est
   qu'une fenêtre découpée dedans. */
.sd-battant-photo {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 198.02%;
	background: var(--sd-photo) center / cover no-repeat;
}

.sd-battant-g .sd-battant-photo { left: 0; }
.sd-battant-d .sd-battant-photo { right: 0; }

/* Le voile de chaque battant, posé PAR-DESSUS son calque : la porte
   fermée est sombre, l'ouverture laisse passer la lumière.

   Le filet d'or de la jointure est lui aussi un pseudo-élément, PAS une
   bordure. Une bordure réduit la boîte de référence du battant : le
   calque, calculé en pourcentage, y perdait deux pixels et la photo de
   la fente se décalait d'autant. Un décalage de deux pixels suffit à
   faire voir deux photos au lieu d'une. */
.sd-battant-photo { z-index: 0; }

.sd-battant::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
}

.sd-battant::before {
	content: "";
	position: absolute;
	z-index: 2;
	top: 0;
	bottom: 0;
	width: 1px;
	background: rgba(198, 168, 120, 0.78);
}

.sd-battant-g { left: 0; }
.sd-battant-g::before { right: 0; }
.sd-battant-g::after { background: linear-gradient(90deg, rgba(3, 9, 17, 0.9), rgba(3, 9, 17, 0.6)); }

.sd-battant-d { right: 0; }
/* La lueur de la jointure — la lumière passe déjà sous une porte fermée. */
.sd-battant-d::before { left: 0; box-shadow: -1px 0 15px rgba(198, 168, 120, 0.22); }
.sd-battant-d::after { background: linear-gradient(90deg, rgba(3, 9, 17, 0.56), rgba(3, 9, 17, 0.86)); }

/* Sans photo — un bien dont la vignette manque — les battants restent
   des panneaux sombres. La porte tient debout, elle n'a rien à montrer. */
.sd-sans-photo .sd-lumiere { background: linear-gradient(120deg, var(--green-650), var(--green-800)); }
.sd-sans-photo .sd-battant-photo { background: linear-gradient(120deg, var(--green-700), var(--green-800)); }

/* ── 3. Le voile du texte ──────────────────────────────────────────── */

/* Il passe DEVANT les battants : le texte reste lisible que la porte
   soit fermée ou grande ouverte, et la fente de lumière s'ouvre à
   droite, là où il n'y a rien d'écrit. */
.sd-voile {
	position: absolute;
	z-index: 2;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(2, 8, 16, 0.82) 0%, rgba(2, 8, 16, 0.52) 34%, rgba(2, 8, 16, 0.07) 68%, transparent 100%);
}

.sd-texte {
	position: relative;
	z-index: 3;
	display: grid;
	height: 100%;
	max-width: 66%;
	align-content: center;
	gap: 10px;
	padding: 28px 38px;
}

.sd-cle {
	display: flex;
	align-items: center;
	gap: 13px;
	color: var(--gold-light);
	font-size: 9.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* Le trait qui suit « Site dédié » s'allonge quand la porte s'ouvre. */
.sd-cle::after {
	content: "";
	width: 34px;
	height: 1px;
	background: rgba(168, 139, 99, 0.65);
	transition: width 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sd-nom {
	font-family: var(--font);
	font-size: clamp(27px, 4vw, 43px);
	line-height: 0.98;
	letter-spacing: -0.022em;
	color: var(--white);
	text-wrap: balance;
}

.sd-nom-long {
	font-size: clamp(21px, 2.7vw, 30px);
	line-height: 1.06;
	letter-spacing: -0.015em;
}

.sd-phrase {
	color: rgba(245, 242, 237, 0.82);
	font-size: 13px;
	line-height: 1.4;
}

/* ── « Entrer » ────────────────────────────────────────────────────── */

.sd-entrer {
	position: absolute;
	z-index: 3;
	top: 50%;
	right: 32px;
	display: flex;
	align-items: center;
	gap: 15px;
	transform: translateY(-50%);
}

.sd-entrer-mot {
	color: var(--gold-light);
	font-size: 9.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0;
	transform: translateX(10px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.sd-entrer-rond {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border: 1px solid rgba(168, 139, 99, 0.75);
	border-radius: 50%;
	/* Le rond se retrouve sur la pleine lumière quand la porte s'ouvre :
	   sans fond à lui, la flèche disparaîtrait dans la photo. */
	background: rgba(3, 10, 19, 0.5);
	color: var(--gold-light);
	font-size: 19px;
	line-height: 1;
	transition: background 0.45s ease, color 0.45s ease, border-color 0.45s ease;
}

/* ── L'ouverture ───────────────────────────────────────────────────── */

.sd:hover .sd-battant-g,
.sd:focus-visible .sd-battant-g { transform: translateX(-27%); }

.sd:hover .sd-battant-d,
.sd:focus-visible .sd-battant-d { transform: translateX(27%); }

.sd:hover .sd-lumiere::after,
.sd:focus-visible .sd-lumiere::after { opacity: 1; }

.sd:hover .sd-cle::after,
.sd:focus-visible .sd-cle::after { width: 62px; }

.sd:hover .sd-entrer-mot,
.sd:focus-visible .sd-entrer-mot { opacity: 1; transform: translateX(0); }

.sd:hover .sd-entrer-rond,
.sd:focus-visible .sd-entrer-rond {
	border-color: var(--gold-light);
	background: var(--gold-light);
	color: var(--green-800);
}

/* ── Les proportions, dictées par la largeur de la PORTE ───────────
   Et non par celle de l'écran : sur un grand écran, la fiche d'un
   projet met la porte dans une colonne de 440 px, où un format
   panoramique la réduirait à un bandeau de 129 px de haut. Le format
   par défaut ci-dessus (2,1:1) est celui qui tient partout — c'est
   aussi ce que verra un navigateur sans requêtes de conteneur. */

@container porte (min-width: 600px) {
	.sd { aspect-ratio: 3.4 / 1; }
	.sd-texte { max-width: 66%; padding: 28px 38px; }
	.sd-entrer { right: 32px; }
	.sd-entrer-mot { display: block; }
	.sd-entrer-rond { width: 52px; height: 52px; font-size: 19px; }
}

@container porte (max-width: 599px) {
	/* Le texte prend toute la place jusqu'au rond, pas un pourcentage
	   arbitraire : sur une porte de 415 px, 74 % laissaient un nom long
	   se casser en trois lignes alors qu'il restait de la place. */
	.sd-texte { max-width: calc(100% - 92px); padding: 24px 26px; }
	.sd-nom { font-size: clamp(24px, 7cqw, 34px); }
	.sd-nom-long { font-size: clamp(19px, 5.4cqw, 25px); }
	.sd-entrer { right: 22px; }
	.sd-entrer-mot { display: none; }
	.sd-entrer-rond { width: 46px; height: 46px; font-size: 17px; }
}

@container porte (max-width: 380px) {
	.sd { aspect-ratio: 1.3 / 1; }
	.sd-texte { max-width: 100%; align-content: end; gap: 8px; padding: 22px 20px 74px; }
	.sd-nom { font-size: clamp(26px, 8.6vw, 34px); }
	.sd-nom-long { font-size: clamp(20px, 6.4vw, 26px); }
	/* Le rond « Entrer » descend dans le coin : la phrase s'arrête avant
	   lui, sinon une traduction plus longue passerait dessous. */
	.sd-phrase { max-width: calc(100% - 62px); font-size: 12.5px; }
	.sd-voile { background: linear-gradient(0deg, rgba(2, 8, 16, 0.88) 6%, rgba(2, 8, 16, 0.34) 52%, transparent 100%); }
	.sd-entrer { top: auto; right: 20px; bottom: 20px; transform: none; }
}

/* ── Moins d'animation ─────────────────────────────────────────────── */

/* Le visiteur qui a demandé moins de mouvement ne verra pas la porte
   s'ouvrir : elle est déjà entrouverte, et le survol ne fait
   qu'éclairer. Le sens tient sans le geste. */
@media (prefers-reduced-motion: reduce) {
	.sd-battant, .sd-cle::after, .sd-entrer-mot, .sd-entrer-rond, .sd-lumiere::after { transition: none; }
	.sd-battant-g { transform: translateX(-16%); }
	.sd-battant-d { transform: translateX(16%); }
	.sd:hover .sd-battant-g, .sd:focus-visible .sd-battant-g { transform: translateX(-16%); }
	.sd:hover .sd-battant-d, .sd:focus-visible .sd-battant-d { transform: translateX(16%); }
	.sd-entrer-mot { opacity: 1; transform: none; }
}