/*
 * kp-formats.css — Section Formats (Home, entre Mission et Valeurs).
 *
 * Figma : 10132:715. 3 panneaux extensibles (Présentiel / Distanciel / Hybride).
 * Le panneau ouvert (large) montre image + titre + texte ; les réduits montrent
 * un titre vertical. Expansion AU HOVER (CSS pur, :hover + état --default).
 * Auto-enqueué (kp-pattern-formats, dep kp-tokens).
 */

.kp-formats {
	position: relative;
	display: flex;
	justify-content: center;
	padding: var(--kp-section-padding-y, 9.375rem) var(--kp-section-padding-x, 4.5rem);
	background: var(--kp-color-surface-deep);
	overflow: hidden;
}

/* Modifier --bureau : ajoute watermark KARREPROD full largeur derrière le bloc
 * (demande Morgan 2026-06-10, page Le Bureau, 4 cards valeurs). */
/* Watermark positionné JUSTE EN DESSOUS du bas des cards (Figma : bottom 125.5
 * sur le frame parent → dépasse vers le bas). Demande Morgan 2026-06-10 r3. */
.kp-formats--bureau::before {
	content: "KARREPROD";
	position: absolute;
	left: 50%;
	bottom: -2rem;
	transform: translateX(-50%);
	font-family: var(--kp-font-sans);
	font-size: clamp(10rem, 22vw, 22rem);
	font-weight: var(--kp-font-weight-medium);
	letter-spacing: -0.055em;
	line-height: 1;
	color: #121212;
	white-space: nowrap;
	pointer-events: none;
	z-index: 0;
	user-select: none;
}

.kp-formats--bureau .kp-formats__group {
	position: relative;
	z-index: 1;
}

/* Ratios 4 cards (3:1:1:1 = 50/16.6/16.6/16.6) */
.kp-formats--bureau .kp-formats__panel--default {
	flex-grow: 3;
}
.kp-formats--bureau .kp-formats__group:hover .kp-formats__panel {
	flex-grow: 1;
}
.kp-formats--bureau .kp-formats__group:hover .kp-formats__panel:hover {
	flex-grow: 3;
}

.kp-formats__group {
	display: flex;
	width: 100%;
	height: 700px;
	border: 6px solid #1a1a1a;
	overflow: hidden;
}

.kp-formats__panel {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	transition: flex-grow 0.5s ease;
}

/* Ligne orange lumineuse, alternée bas / haut / bas (1=bas, 2=haut, 3=bas) */
.kp-formats__panel::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 4px;
	z-index: 4;
	background: var(--kp-color-brand-primary);
	box-shadow:
		0 0 18px 2px rgba(223, 115, 46, 0.6),
		0 0 6px 0 rgba(223, 115, 46, 0.9);
}

.kp-formats__panel:nth-child(odd)::before {
	bottom: 0;
}

.kp-formats__panel:nth-child(even)::before {
	top: 0;
}

/* Largeurs : panneau ouvert large, réduits étroits (ratio ~4:1:1 = Figma 866/215/215) */
.kp-formats__panel--default {
	flex-grow: 4;
}

.kp-formats__group:hover .kp-formats__panel {
	flex-grow: 1;
}

.kp-formats__group:hover .kp-formats__panel:hover {
	flex-grow: 4;
}

/* Image de fond + gradient legibilité (fond → surface-deep, fluide) */
.kp-formats__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	filter: brightness(0.55); /* panneaux fermés assombris par défaut */
	transition: filter 0.4s ease;
}

.kp-formats__panel::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		180deg,
		rgba(10, 10, 10, 0.2) 0%,
		rgba(10, 10, 10, 0) 40%,
		rgba(10, 10, 10, 0) 50%,
		rgba(0, 0, 0, 0.7) 82%,
		var(--kp-color-black) 100%
	);
}

/* Titre vertical (état réduit) */
.kp-formats__label {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-90deg);
	transform-origin: center;
	z-index: 2;
	font-family: var(--kp-font-sans);
	font-size: 3.25rem; /* ~52px */
	font-weight: var(--kp-font-weight-light);
	letter-spacing: -0.05em;
	line-height: 1;
	color: var(--kp-color-text-inverse);
	white-space: nowrap;
	opacity: 1;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

/* Contenu horizontal (état ouvert) : glass en bas */
.kp-formats__content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: var(--kp-space-6);
	padding: var(--kp-space-8) var(--kp-space-8) var(--kp-space-10);
	background: rgba(255, 255, 255, 0.05);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	opacity: 0;
	transition: opacity 0.3s ease 0.15s;
	pointer-events: none;
}

.kp-formats__title {
	margin: 0;
	font-family: var(--kp-font-sans);
	font-size: var(--kp-font-size-48);
	font-weight: var(--kp-font-weight-light);
	letter-spacing: -0.05em;
	line-height: 1;
	color: var(--kp-color-text-inverse);
	white-space: nowrap;
}

.kp-formats__text {
	margin: 0;
	font-family: var(--kp-font-sans);
	font-size: var(--kp-font-size-18);
	font-weight: var(--kp-font-weight-regular);
	line-height: 1.33;
	color: var(--kp-color-text-inverse);
}

/* --- États ouvert / réduit --- */
/* Défaut (aucun hover) : le panneau --default est ouvert */
.kp-formats__panel--default .kp-formats__content {
	opacity: 1;
	pointer-events: auto;
}
.kp-formats__panel--default .kp-formats__label {
	opacity: 0;
}

/* Au survol du groupe : --default repasse en réduit (sauf s'il est lui-même survolé) */
.kp-formats__group:hover .kp-formats__panel--default .kp-formats__content {
	opacity: 0;
}
.kp-formats__group:hover .kp-formats__panel--default .kp-formats__label {
	opacity: 1;
}

/* Le panneau survolé s'ouvre (placé après → gagne en cas d'égalité) */
.kp-formats__group:hover .kp-formats__panel:hover .kp-formats__content {
	opacity: 1;
	pointer-events: auto;
}
.kp-formats__group:hover .kp-formats__panel:hover .kp-formats__label {
	opacity: 0;
}

/* Filtre noir : seul le panneau OUVERT a l'image en pleine luminosité,
 * les fermés restent assombris (même logique d'état que content/label). */
.kp-formats__panel--default .kp-formats__img {
	filter: brightness(1);
}
.kp-formats__group:hover .kp-formats__panel--default .kp-formats__img {
	filter: brightness(0.55);
}
.kp-formats__group:hover .kp-formats__panel:hover .kp-formats__img {
	filter: brightness(1);
}

@media (max-width: 900px) {
	.kp-formats {
		padding: var(--kp-space-16) var(--kp-space-6);
	}
	.kp-formats__group {
		flex-direction: column;
		height: auto;
	}
	.kp-formats__panel,
	.kp-formats__group:hover .kp-formats__panel,
	.kp-formats__group:hover .kp-formats__panel:hover {
		flex: none;
		min-height: 360px;
	}
	/* Sur mobile : tout ouvert (pas de hover) */
	.kp-formats__label {
		opacity: 0;
	}
	.kp-formats__img,
	.kp-formats__group:hover .kp-formats__panel--default .kp-formats__img {
		filter: brightness(1);
	}
	.kp-formats__content,
	.kp-formats__group:hover .kp-formats__panel--default .kp-formats__content {
		opacity: 1;
		pointer-events: auto;
	}
}