/* ==========================================================================
   Linium — styles du thème
   Toutes les valeurs de charte viennent de theme.json (--wp--preset--*, --wp--custom--*).
   Les valeurs en dur ici sont uniquement des géométries relevées sur la maquette
   (rayons, décalages, ratios) qui n'ont pas leur place dans les tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Conteneur de contenu : 1200px, gouttière fluide. */
.wp-site-blocks > * {
	margin-block: 0;
}

/* Un <hr> tire sa couleur de sa bordure : si on annule la bordure,
   il faut une couleur de fond, sinon le trait est invisible. */
.wp-block-separator {
	border: 0;
	height: 1px;
	background-color: currentColor;
	opacity: 0.35;
}

/* Twenty Twenty-Five pose `:where(.wp-site-blocks :focus){outline:2px solid}`.
   La règle vise `:focus` et non `:focus-visible` : dans Chrome, un clic souris
   laisse donc un anneau affiché en permanence sur les boutons (flèches du
   carrousel, puces, CTA…).
   On ne supprime PAS l'indicateur de focus — il est indispensable à la
   navigation au clavier — on le réserve aux cas où le navigateur le juge
   pertinent. La règle du parent étant dans :where(), sa spécificité est nulle :
   n'importe quel sélecteur de classe la surclasse. */
/* Règle générique plutôt qu'une liste de sélecteurs : une énumération laisse
   forcément passer des éléments (liens de navigation, bouton burger, bouton de
   fermeture de la superposition…). `:focus-visible` laisse le navigateur
   décider — l'anneau reste donc au clavier, et disparaît au clic souris. */
.wp-site-blocks :focus:not(:focus-visible),
.wp-block-navigation__responsive-container :focus:not(:focus-visible) {
	outline: none;
}

/* Anneau explicite pour le clavier, sur les contrôles ronds du carrousel :
   l'anneau par défaut du parent épouserait mal le cercle. */
.linium-carousel__nav:focus-visible,
.linium-carousel__dot:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   2. Composants de texte récurrents
   -------------------------------------------------------------------------- */

/* Eyebrow « L O R E M   I P S U M » : 16px, interlettrage très large.
   padding-left compense le letter-spacing du dernier caractère pour
   que le bloc reste optiquement centré. */
.linium-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 300;
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-transform: uppercase;
	line-height: 1.2;
	margin: 0;
}

.linium-eyebrow.has-text-align-center {
	padding-left: var(--wp--custom--tracking--eyebrow);
}

/* Grand titre éditorial (43px) */
.linium-title-lg {
	font-size: var(--wp--preset--font-size--xxx-large);
	letter-spacing: var(--wp--custom--tracking--heading-large);
	line-height: 1.32;
}

/* Colonne de texte centrée de la section intro */
.linium-measure {
	max-width: 730px;
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   3. En-tête
   -------------------------------------------------------------------------- */

/* Fixe en permanence : transparent sur le héros, puis fond blanc dès que la
   page défile (attribut data-stuck posé par assets/js/header.js). */
.linium-header {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 100;
	padding-block: 13px;
	color: var(--wp--preset--color--base);
	transition: background-color 0.3s ease, color 0.3s ease,
		box-shadow 0.3s ease, padding-block 0.3s ease;
}

.linium-header[data-stuck] {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	padding-block: 7px;
	box-shadow: 0 2px 18px color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
}

/* Sur fond blanc, la feuille du logo repasse en or alors que le texte reste
   sombre : on ne peut donc pas se reposer sur currentColor. */
.linium-header[data-stuck] .linium-header__mark {
	color: var(--wp--preset--color--accent-1);
}

.linium-header[data-stuck] .linium-langswitch {
	border-color: var(--wp--preset--color--accent-1);
}

.linium-header[data-stuck] .linium-langswitch:hover,
.linium-header[data-stuck] .linium-langswitch:focus-visible {
	background-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
}

@media (prefers-reduced-motion: reduce) {
	.linium-header {
		transition: none;
	}
}

/* La rangée de l'en-tête est plus large que le contenu courant : 1440 (relevé),
   contre 1200 pour les sections. */
.linium-header > .wp-block-group {
	max-width: 1440px;
	margin-inline: auto;
	width: 100%;
}

.linium-header .wp-block-group {
	align-items: center;
}

.linium-header__brand {
	display: flex;
	align-items: center;
	gap: 25px;
	text-decoration: none;
	color: inherit;
}

.linium-header__mark {
	width: 50px;
	height: 52px;
	flex: none;
}

.linium-header__wordmark {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 44px;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	/* compense l'interlettrage du dernier caractère */
	padding-inline-end: 0.08em;
}

/* Navigation */
.linium-header .wp-block-navigation {
	--navigation-layout-justification-setting: flex-end;
	font-size: 16px;
	letter-spacing: 0.06em;
}

.linium-header .wp-block-navigation .wp-block-navigation__container {
	gap: 54px;
	align-items: center;
}

/* Écart nav → sélecteur de langue (relevé : 59px). */
.linium-header > .wp-block-group > .wp-block-group {
	gap: 59px;
}

/* Trait de survol : filet de 1px qui apparaît au survol, plus bas qu'un
   soulignement de texte. Ce n'est PAS un état actif permanent.
   La zone réservée sous le texte est portée par le <li> : le sous-menu
   s'ouvre sous cette zone (top:100%) et ne recouvre donc pas le filet,
   tout en gardant le survol continu entre l'entrée et son sous-menu. */
/* Réserve symétrique : sans le padding-top, la zone du filet déséquilibre la
   boîte et le texte de la nav paraît remonté par rapport au logo.
   Uniquement au PREMIER niveau : appliquée aussi aux entrées de sous-menu,
   elle les espaçait de 36px chacune. */
.linium-header .wp-block-navigation > .wp-block-navigation__container > .wp-block-navigation-item {
	padding-block: 18px;
}

.linium-header .wp-block-navigation__submenu-container .wp-block-navigation-item {
	padding-block: 0;
}

.linium-header .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0;
	/* annule le soulignement de lien global (theme.json elements.link:hover),
	   qui ferait doublon avec le filet */
	text-decoration: none;
}

.linium-header .wp-block-navigation-item__content:hover,
.linium-header .wp-block-navigation-item__content:focus {
	text-decoration: none;
}

.linium-header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -9px;
	height: 1px;
	background-color: currentColor;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.linium-header .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
.linium-header .wp-block-navigation-item__content:focus-visible::after {
	opacity: 1;
}

/* Les entrées de sous-menu gardent un survol classique, sans filet. */
.linium-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	content: none;
}

/* Sous-menus */
.linium-header .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	border: 0;
	/* Aucun menu déroulant n'apparaît sur la maquette : rayon choisi pour
	   s'accorder aux formes arrondies de la charte. */
	border-radius: var(--wp--custom--submenu-radius);
	padding-block: 10px;
	box-shadow: 0 18px 40px color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
}

/* Décalage sous l'entrée, pour laisser voir le filet de survol.
   Le cœur pose `top:100%` via `.wp-block-navigation .has-child
   .wp-block-navigation__submenu-container` (0,3,0) : il faut peser plus.
   Le ::before comble l'écart d'une zone transparente, sinon le curseur
   quitterait la zone survolée en descendant et le sous-menu se refermerait. */
.linium-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
	top: calc(100% + 15px);
}

.linium-header .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: -15px;
	height: 15px;
}

/* Le cœur impose `padding:.5em 1em` via un sélecteur à 5 classes
   (`.wp-block-navigation .has-child .wp-block-navigation__submenu-container >
   .wp-block-navigation-item > .wp-block-navigation-item__content`).
   Il faut donc au moins autant de poids pour resserrer les entrées. */
.linium-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.linium-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	border-bottom: 0;
	color: var(--wp--preset--color--contrast);
	font-size: 16px;
	line-height: 1.35;
	padding: 7px 26px;
	white-space: nowrap;
	transition: color 0.2s ease;
}

/* Or au survol et sur la page courante. */
/* Doit peser au moins autant que la règle de couleur de base ci-dessus, qui a
   dû monter à 6 classes pour battre le padding du cœur. */
.linium-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.linium-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible,
.linium-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.linium-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
.linium-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible,
.linium-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent-1);
}

/* Sélecteur de langue : cercle fin */
.linium-langswitch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 49px;
	height: 49px;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 16px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: inherit;
	flex: none;
	transition: background-color 0.25s, color 0.25s;
}

.linium-langswitch:hover,
.linium-langswitch:focus-visible {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--accent-2);
}

/* Menu mobile : WordPress bascule en superposition sous 600px. Les styles de
   sous-menu du bureau (boîte blanche flottante + ombre) y produisaient un
   vilain rectangle — on les neutralise et on centre tout. */
@media (max-width: 600px) {
	/* Le cœur pilote l'alignement de la superposition par ces deux variables :
	   les surcharger évite une course à la spécificité. */
	.linium-header .wp-block-navigation__responsive-container.is-menu-open {
		--navigation-layout-align: center;
		--navigation-layout-justify: center;
	}

	/* La justification du bureau (« items-justified-right ») est reconduite par
	   le cœur dans la superposition, où la liste passe en colonne : elle y
	   colle donc les entrées à droite. On la neutralise explicitement. */
	.linium-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
	.linium-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
	.linium-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container.items-justified-right {
		align-items: center;
		justify-content: center;
		text-align: center;
		width: 100%;
	}

	.linium-header .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
		gap: 26px;
	}

	.linium-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		position: static;
		background-color: transparent;
		box-shadow: none;
		border: 0;
		padding-block: 6px;
		color: inherit;
		align-items: center;
		width: 100%;
	}

	.linium-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 6px 0;
		font-size: 15px;
		opacity: 0.75;
	}

	/* Pas de filet de survol sur mobile : l'entrée active est simplement surlignée. */
	.linium-header .wp-block-navigation-item {
		padding-block: 0;
	}

	/* Une entrée qui porte un sous-menu est dimensionnée par celui-ci (plus
	   large que son propre libellé) : sans mise en colonne centrée, le lien
	   parent se retrouve décalé alors que le <li>, lui, est bien centré. */
	.linium-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
	.linium-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
	}

	.linium-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		text-align: center;
	}

	.linium-header .wp-block-navigation-item__content::after {
		content: none;
	}

	.linium-header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
	.linium-header .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content {
		background-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 22%, transparent);
		box-decoration-break: clone;
		padding-inline: 12px;
	}
}

/* --------------------------------------------------------------------------
   4. Hero
   -------------------------------------------------------------------------- */

.linium-hero {
	/* Hauteur pilotée ici et non par l'attribut du bloc : un style en ligne
	   l'emporte sur toute feuille et empêchait toute adaptation mobile. */
	min-height: 463px;
	padding: 0;
}

.linium-hero .wp-block-cover__inner-container {
	display: flex;
	align-items: center;
	justify-content: center;
	/* le titre est optiquement centré sous l'en-tête */
	padding-top: 66px;
}

.linium-hero__title {
	color: var(--wp--preset--color--base);
	text-align: center;
	margin: 0;
	max-width: 900px;
}

/* --------------------------------------------------------------------------
   5. Intro + sceau circulaire
   -------------------------------------------------------------------------- */

.linium-intro {
	position: relative;
	padding-top: 82px;
}

/* Relevé : ⌀150, haut à 54px du début de la section, débord de 88px
   au-delà du bord droit du conteneur de contenu. */
.linium-seal {
	position: absolute;
	top: 54px;
	right: -88px;
	width: 150px;
	height: 150px;
	pointer-events: none;
}

.linium-seal svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* textLength sur le textPath force le texte à faire le tour complet du cercle,
   quelle que soit la police : l'interlettrage est calculé par le navigateur. */
.linium-seal__ring {
	font-family: var(--wp--preset--font-family--body);
	font-size: 10px;
	font-weight: 300;
	text-transform: uppercase;
	fill: var(--wp--preset--color--contrast);
}

.linium-seal__mark {
	color: var(--wp--preset--color--accent-1);
}

/* --------------------------------------------------------------------------
   6. Fiches biens (3 colonnes : 350 / 75 / 350 / 75 / 350)
   -------------------------------------------------------------------------- */

/* .wp-block-columns en préfixe : le cœur émet
   `:root :where(.wp-block-columns-is-layout-flex){gap:…}` avec la même
   spécificité qu'une classe seule, mais chargé après notre feuille. */
.wp-block-columns.linium-fiches {
	padding-top: 94px;
	gap: var(--wp--custom--card--gap);
}

.linium-fiche {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* Masque ovale : haut = demi-cercle exact (r = largeur/2), bas nettement plus plat.
   Valeurs relevées sur la maquette. */
.linium-fiche__media {
	width: 100%;
	margin: 0;
	aspect-ratio: 350 / 407;
	border-radius: var(--wp--custom--card--radius);
	overflow: hidden;
	background-color: color-mix(in srgb, var(--wp--preset--color--accent-4) 35%, var(--wp--preset--color--base));
}

.linium-fiche__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* --- Cadrage dans les masques -------------------------------------------
   Les deux masques imposent un ratio fixe et l'image est recadrée en
   `cover` : elle remplit toujours la forme, quel que soit le format fourni
   (testé avec des sources portrait 2:3). Par défaut le recadrage est centré.

   Quand la source est plus haute que le cadre, ces classes additionnelles
   permettent de choisir la zone conservée — à poser sur le bloc Image via
   « Avancé → Classes CSS additionnelles ». Utile surtout pour le carrousel,
   très large, où une photo portrait perd l'essentiel de sa hauteur. */
.linium-fiche__media.is-focus-top img,
.linium-carousel__slide.is-focus-top img {
	object-position: center top;
}

.linium-fiche__media.is-focus-bottom img,
.linium-carousel__slide.is-focus-bottom img {
	object-position: center bottom;
}

.linium-fiche__media.is-focus-left img,
.linium-carousel__slide.is-focus-left img {
	object-position: left center;
}

.linium-fiche__media.is-focus-right img,
.linium-carousel__slide.is-focus-right img {
	object-position: right center;
}

.linium-fiche__label {
	margin: 94px 0 0;
	color: var(--wp--preset--color--accent-1);
}

.linium-fiche__price {
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: 0.08em;
	line-height: 1;
	margin: 26px 0 0;
}

.linium-fiche .wp-block-buttons {
	margin-top: 39px;
}

/* --------------------------------------------------------------------------
   7. Section éditoriale
   -------------------------------------------------------------------------- */

/* La gouttière des colonnes est générée côté serveur par WordPress à partir de
   blockGap ; on la pose aussi ici pour que le rendu soit identique partout. */
.wp-block-columns.linium-edito {
	padding-top: 159px;
	align-items: flex-start;
	gap: 122px;
}

/* Le paragraphe de droite démarre plus bas que le titre (relevé : ~108px). */
.linium-edito__text {
	padding-top: 100px;
}

/* Mesure de texte plus étroite à l'intérieur du pavé CTA (relevé : ~460px). */
.linium-cta .linium-measure {
	max-width: 460px;
}

/* --------------------------------------------------------------------------
   8. Carrousel
   --------------------------------------------------------------------------
   Modèle validé au pixel sur la maquette :
     - slide centrale 1200 × 645
     - voisines : MÊME boîte, scale(0.777), décalées de ±0.9433 × largeur
     - les voisines débordent du viewport et sont coupées par le bord de page
   Un track flex ne reproduit PAS ce rendu : le pas (1132) est inférieur à la
   largeur de slide (1200), donc les slides se chevauchent en layout et c'est la
   mise à l'échelle qui les écarte.
   -------------------------------------------------------------------------- */

.linium-carousel {
	--slide-w: min(1200px, calc(100% - 2 * var(--wp--custom--gutter)));
	--slide-scale: var(--wp--custom--carousel--scale);
	margin-top: 136px;
	position: relative;
}

.linium-carousel__viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
}

/* Le « stage » est à la largeur d'une slide et porte le ratio : c'est lui qui
   donne sa hauteur au carrousel. On ne peut pas calculer cette hauteur depuis
   --slide-w, qui contient un pourcentage : dans `height`, un % se résout sur la
   HAUTEUR du parent (auto ici), pas sur sa largeur — la boîte s'effondrerait. */
.linium-carousel__stage {
	position: relative;
	width: var(--slide-w);
	margin-inline: auto;
	aspect-ratio: 1200 / 645;
}

.linium-carousel__slide {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	aspect-ratio: 1200 / 645;
	margin: 0;
	/* clampé par le navigateur à height/2 = le rayon relevé (322px à 1200px de large) */
	border-radius: 999px;
	overflow: hidden;
	background-color: color-mix(in srgb, var(--wp--preset--color--accent-4) 35%, var(--wp--preset--color--base));
	transform: translate(-50%, -50%);
	transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.65s;
	will-change: transform;
}

.linium-carousel__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* L'ordre compte : scale s'applique d'abord (autour du centre de la slide),
   puis translateX du pas, puis le recentrage -50%. */
.linium-carousel__slide[data-pos="prev"] {
	transform: translate(-50%, -50%) translateX(calc(100% * -1 * var(--wp--custom--carousel--pitch))) scale(var(--slide-scale));
}

.linium-carousel__slide[data-pos="next"] {
	transform: translate(-50%, -50%) translateX(calc(100% * var(--wp--custom--carousel--pitch))) scale(var(--slide-scale));
}

.linium-carousel__slide[data-pos="far-prev"] {
	transform: translate(-50%, -50%) translateX(calc(100% * -2 * var(--wp--custom--carousel--pitch))) scale(var(--slide-scale));
	opacity: 0;
}

.linium-carousel__slide[data-pos="far-next"] {
	transform: translate(-50%, -50%) translateX(calc(100% * 2 * var(--wp--custom--carousel--pitch))) scale(var(--slide-scale));
	opacity: 0;
}

.linium-carousel__slide[data-pos="current"] {
	z-index: 2;
}

/* Flèches : cercles blancs pleins, à l'intérieur de la slide centrale */
.linium-carousel__nav {
	position: absolute;
	top: 50%;
	z-index: 3;
	width: var(--wp--custom--carousel--arrow-size);
	height: var(--wp--custom--carousel--arrow-size);
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--accent-1);
	cursor: pointer;
	transition: background-color 0.25s, color 0.25s, transform 0.25s;
}

.linium-carousel__nav:hover,
.linium-carousel__nav:focus-visible {
	background-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
}

.linium-carousel__nav svg {
	width: 14px;
	height: 16px;
	display: block;
}

.linium-carousel__nav--prev {
	inset-inline-start: calc(50% - var(--slide-w) / 2 + var(--wp--custom--carousel--arrow-inset));
}

.linium-carousel__nav--next {
	inset-inline-end: calc(50% - var(--slide-w) / 2 + var(--wp--custom--carousel--arrow-inset));
}

/* Pagination */
.linium-carousel__dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 18px;
	margin-top: 50px;
	padding: 0;
	list-style: none;
}

.linium-carousel__dot {
	width: 18px;
	height: 13px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background-color: var(--wp--preset--color--accent-4);
	cursor: pointer;
	transition: width 0.35s, height 0.35s, background-color 0.35s;
}

/* La puce active est plus large ET plus haute que les inactives (mesuré). */
.linium-carousel__dot[aria-current="true"] {
	width: 27px;
	height: 18px;
	background-color: var(--wp--preset--color--accent-1);
}

.linium-carousel__dot:hover {
	background-color: var(--wp--preset--color--accent-1);
}

/* Sans JS : pas de superposition, on empile proprement les slides. */
.linium-carousel:not([data-ready]) .linium-carousel__stage {
	width: auto;
	aspect-ratio: auto;
	display: flex;
	flex-direction: column;
	gap: 40px;
	align-items: center;
}

.linium-carousel:not([data-ready]) .linium-carousel__slide {
	position: static;
	transform: none;
	width: min(1200px, 100%);
}

.linium-carousel:not([data-ready]) .linium-carousel__nav,
.linium-carousel:not([data-ready]) .linium-carousel__dots {
	display: none;
}

/* --------------------------------------------------------------------------
   9. Pavé CTA (pilule géante)
   -------------------------------------------------------------------------- */

.linium-cta {
	margin-top: 240px;
	padding: 101px 120px;
	/* clampé par le navigateur à height/2 : donne exactement le rayon relevé */
	border-radius: 999px;
	background-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	text-align: center;
}

.linium-cta .linium-eyebrow,
.linium-cta h2,
.linium-cta p {
	color: var(--wp--preset--color--base);
}

.linium-cta .wp-block-button__link {
	background-color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--accent-1);
}

.linium-cta .wp-block-button__link:hover,
.linium-cta .wp-block-button__link:focus {
	background-color: transparent;
	color: var(--wp--preset--color--base);
}

/* --------------------------------------------------------------------------
   10. Carte (chargement au clic — RGPD)
   -------------------------------------------------------------------------- */

.linium-map {
	margin-top: 174px;
	/* pas de width : alignfull élargit via des marges négatives, une largeur
	   explicite les neutraliserait */
	height: 600px;
	position: relative;
	background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 8%, var(--wp--preset--color--base));
}

.linium-map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.linium-map__consent {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
	text-align: center;
	padding: 24px;
}

.linium-map__consent p {
	margin: 0;
	max-width: 46ch;
}

/* --------------------------------------------------------------------------
   11. Pied de page
   -------------------------------------------------------------------------- */

.linium-footer {
	background-color: var(--wp--preset--color--accent-2);
	color: var(--wp--preset--color--base);
	padding-top: 192px;
	padding-bottom: 143px;
}

.linium-footer .linium-eyebrow,
.linium-footer h2,
.linium-footer p,
.linium-footer a {
	color: var(--wp--preset--color--base);
}

.linium-footer .wp-block-button__link {
	background-color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--accent-1);
}

.linium-footer .wp-block-button__link:hover,
.linium-footer .wp-block-button__link:focus {
	background-color: transparent;
	color: var(--wp--preset--color--base);
}

/* Colonne de droite : tout est CENTRÉ sur un même axe (relevé : les lignes ont
   des bords droits différents mais un centre identique), pas aligné à droite. */
.linium-footer__brand {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 34px;
	margin: 0;
}

/* La colonne de droite démarre 7px plus bas que celle de gauche (relevé).
   Un margin-top sur le lockup fusionnerait avec la marge de la colonne. */
.linium-footer .wp-block-column:last-child {
	padding-top: 7px;
}

.linium-footer__mark {
	width: 70px;
	height: 74px;
	flex: none;
}

.linium-footer__wordmark {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 65px;
	line-height: 1;
	/* pas d'interlettrage ici : à hauteur de capitale égale, EB Garamond est
	   déjà plus large que la police de la maquette (218px d'encre pour 217
	   relevés). En ajouter dépasserait. À revoir avec la vraie police. */
	letter-spacing: 0;
	text-transform: uppercase;
}

/* « by » discret + « PROMIRIS » en gros gras (relevé : hauteur de capitale
   24,8px, soit ~34px de corps, contre ~18px pour « by »). */
.linium-footer__byline {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 9px;
	margin: 27px 0 0;
}

.linium-footer__by {
	font-size: 16px;
	font-weight: 300;
}

.linium-footer__promiris {
	font-size: 31px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.linium-footer__contact {
	text-align: center;
	margin-top: 29px;
}

.linium-footer__link a {
	text-decoration: underline;
	text-underline-offset: 5px;
}

/* Barre de crédits */
.linium-credits {
	background-color: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--base);
	font-size: 14px;
	padding-block: 14px;
}

.linium-credits .wp-block-group {
	align-items: center;
}

.linium-credits a {
	color: var(--wp--preset--color--accent-4);
	text-decoration: none;
}

.linium-credits a:hover {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   11 bis. Page d'accueil — sections propres
   --------------------------------------------------------------------------
   Mesures relevées sur « page d'accueil.png » (échelle 1,958, recoupée sur les
   conteneurs 1200 et 1440 comme pour North Living).
   -------------------------------------------------------------------------- */

/* --- Hero d'accueil : logo centré + bouton, deux fois plus haut que celui
       de North Living (949 contre 463). ------------------------------------ */
/* Hauteur du hero d'accueil (relevé : 949). Elle est pilotée ici et non par
   l'attribut du bloc : un style en ligne l'emporte sur toute feuille et rendait
   toute adaptation mobile impossible. */
.linium-hero-home {
	min-height: 949px;
}

.linium-hero-home .wp-block-cover__inner-container {
	flex-direction: column;
	padding-top: 0;
}

.linium-hero__lockup {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 48px;
	margin: 0;
	color: var(--wp--preset--color--base);
}

.linium-hero__mark {
	width: 100px;
	height: 106px;
	flex: none;
}

.linium-hero__wordmark {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 94px;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
}

.linium-hero__byline {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 12px;
	margin: 22px 0 0;
	color: var(--wp--preset--color--base);
}

.linium-hero__by {
	font-size: 22px;
	font-weight: 300;
}

.linium-hero__promiris {
	font-size: 44px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

/* Sur l'accueil, l'éditorial suit le hero : l'écart relevé n'est pas celui
   de North Living, où il suit les fiches. */
.linium-hero-home + .linium-edito {
	padding-top: 114px;
}

.linium-hero-home .wp-block-buttons {
	margin-top: 40px;
	justify-content: center;
}

.linium-hero-home .wp-block-button__link {
	background-color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--accent-1);
}

.linium-hero-home .wp-block-button__link:hover,
.linium-hero-home .wp-block-button__link:focus {
	background-color: transparent;
	color: var(--wp--preset--color--base);
}

/* --- Bloc programme : texte + image ovale, décliné en miroir --------------- */

/* Gouttière minimale entre les deux colonnes. Sans elle, la colonne texte
   (plafonnée à 470) et l'image (550) finissent par se toucher dès que le
   conteneur passe sous ~1030px : l'écart de 180 relevé n'existe qu'à 1200.
   Avec `gap`, le rendu desktop est inchangé (l'image reste plaquée à droite)
   et l'écart ne peut plus devenir négatif. */
.linium-programme {
	align-items: center;
	gap: 60px;
	margin-top: 154px;
}

/* Écart entre les deux blocs programme (relevé : 176, contre 154 après
   l'éditorial). */
.linium-programme + .linium-programme {
	margin-top: 176px;
}

.linium-programme__text {
	max-width: 470px;
}

.linium-programme .linium-seal {
	position: static;
	/* même diamètre que le sceau de la page North Living (150) : l'écart d'1px
	   relevé entre les deux maquettes n'a pas lieu d'être conservé */
	width: 150px;
	height: 150px;
	margin-bottom: 31px;
}

.linium-programme h2 {
	margin: 0;
}

.linium-programme p {
	margin: 32px 0 0;
}

.linium-programme .wp-block-buttons {
	flex-direction: column;
	align-items: flex-start;
	gap: 25px;
	margin-top: 40px;
}

/* L'image est plaquée contre le bord extérieur du conteneur : à droite dans le
   sens normal, à gauche en miroir. Sans ça elle se colle au texte (écart nul au
   lieu des 180 relevés). */
.linium-programme__media {
	width: 100%;
	max-width: var(--wp--custom--programme--image-width);
	margin: 0 0 0 auto;
	aspect-ratio: var(--wp--custom--programme--image-ratio);
	border-radius: var(--wp--custom--programme--radius);
	overflow: hidden;
	background-color: color-mix(in srgb, var(--wp--preset--color--accent-4) 35%, var(--wp--preset--color--base));
}

/* Les images sont empilées dans le masque ; celle du bouton survolé est
   révélée. Au repos, c'est la première (voir assets/js/programme.js). */
.linium-programme__media {
	position: relative;
}

.linium-programme__img {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 0.45s ease;
}

.linium-programme__img[data-active="true"] {
	opacity: 1;
}

/* Sans JS, aucun data-active n'est posé : on affiche la première image. */
.linium-programme:not([data-programme-ready]) .linium-programme__img:first-child {
	opacity: 1;
}

.linium-programme__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Variante miroir : image à gauche, texte à droite. */
.linium-programme-reverse .linium-programme__media {
	margin: 0 auto 0 0;
}

.linium-programme-reverse .linium-programme__text {
	margin-inline-start: auto;
}

/* --- Carrousel « Activiteiten » : 3 cartes visibles, débordantes ----------- */

.linium-activites {
	margin-top: 243px;
	position: relative;
}

/* La section est pleine largeur pour que la rangée de 1442 tienne en entier ;
   les éléments de texte sont donc recentrés sur 1200 individuellement. */
.linium-activites > .linium-eyebrow,
.linium-activites__head,
.linium-activites__dots {
	max-width: 1200px;
	margin-inline: auto;
}

.linium-activites__head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	max-width: 1200px;
	margin-inline: auto;
}

.linium-activites__head h2 {
	margin: 0;
	text-align: center;
}

/* La fenêtre fait exactement la largeur de la rangée visible (1442 sur écran
   large, comme la maquette) et c'est ELLE qui découpe. Découper au bord de page
   laissait dépasser la carte suivante dans la marge. */
.linium-activites__viewport {
	margin-top: 66px;
	width: min(1442px, calc(100% - 2 * var(--wp--custom--gutter)));
	margin-inline: auto;
	overflow: hidden;
}

/* La rangée déborde du conteneur de 121px de chaque côté (relevé : 1442 pour
   un conteneur de 1200) : on l'élargit symétriquement. */
.linium-activites__track {
	--activity-visible: 3;
	--activity-gap: var(--wp--custom--activity--gap);
	display: flex;
	gap: var(--activity-gap);
	/* La rangée occupe toute la fenêtre ; les cartes au-delà des trois visibles
	   débordent à droite et sont découpées par elle. */
	width: 100%;
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

.linium-activites__card {
	flex: 0 0 calc(
		(100% - (var(--activity-visible) - 1) * var(--activity-gap)) /
			var(--activity-visible)
	);
	margin: 0;
}

.linium-activites__media {
	margin: 0;
	aspect-ratio: var(--wp--custom--activity--image-ratio);
	border-radius: var(--wp--custom--activity--radius);
	overflow: hidden;
	background-color: color-mix(in srgb, var(--wp--preset--color--accent-4) 35%, var(--wp--preset--color--base));
}

.linium-activites__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.linium-activites__card h3 {
	margin: 65px 0 0;
	color: var(--wp--preset--color--accent-1);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--heading);
	font-size: 22px;
	line-height: 1.5;
}

.linium-activites__card p {
	margin: 19px 0 0;
}

/* Flèches encadrant le titre. L'état actif est un disque or plein ; l'état
   indisponible ne garde que le chevron (relevé sur la maquette : le carrousel
   ne boucle donc pas). */
/* Flèches toujours visibles. Repos : fond transparent, chevron or.
   Survol : disque or, chevron blanc. (La maquette montrait la flèche droite
   déjà survolée, d'où l'inversion initiale.) */
.linium-activites__nav {
	width: 46px;
	height: 46px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: transparent;
	color: var(--wp--preset--color--accent-1);
	cursor: pointer;
	transition: background-color 0.25s, color 0.25s;
}

.linium-activites__nav svg {
	width: 13px;
	height: 15px;
	display: block;
}

.linium-activites__nav:hover,
.linium-activites__nav:focus-visible {
	background-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
}

/* Pas d'état « enfoncé » persistant après un clic : hors survol et hors focus
   clavier, la flèche reprend toujours son apparence de repos. */
.linium-activites__nav:not(:hover):not(:focus-visible) {
	background-color: transparent;
	color: var(--wp--preset--color--accent-1);
}

/* La maquette d'accueil n'a pas les mêmes respirations que North Living sur ces
   deux blocs partagés : on les surcharge via la classe `home` que WordPress
   pose sur <body>, sans toucher au composant commun. */
/* -29 par rapport au relevé : la hauteur des cartes d'activités dépend de la
   longueur du texte de remplissage. L'écart puces↔cartes reste la constante de
   la maquette (72px) ; c'est l'ancrage du CTA qui absorbe la différence, pour
   que carte et pied de page tombent juste. À revoir avec le contenu réel. */
.home .linium-cta {
	margin-top: 152px;
}

.home .linium-map {
	margin-top: 131px;
}

.linium-activites__dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 18px;
	margin: 72px auto 0;
	padding: 0;
	list-style: none;
}

/* Sans JS : les cartes s'empilent, flèches et puces masquées. */
.linium-activites:not([data-ready]) .linium-activites__track {
	flex-wrap: wrap;
	width: 100%;
	margin-inline-start: 0;
	transform: none;
}

.linium-activites:not([data-ready]) .linium-activites__nav,
.linium-activites:not([data-ready]) .linium-activites__dots {
	display: none;
}

/* --- Adaptation aux petits écrans -----------------------------------------
   Aucune maquette mobile n'a été fournie. Principes appliqués :
   — un rythme vertical unique entre sections, au lieu des valeurs desktop
     (154 à 243) qui laissaient des trous ou faisaient se toucher les blocs ;
   — les titres suivent une échelle réduite mais restent hiérarchisés ;
   — rien n'est masqué qui porte du sens (le sceau identifie le programme).
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.linium-hero.linium-hero-home {
		min-height: 640px;
	}

	.linium-hero__wordmark {
		font-size: 64px;
	}

	.linium-hero__mark {
		width: 70px;
		height: 74px;
	}

	.linium-hero__promiris {
		font-size: 32px;
	}

	.linium-hero-home + .linium-edito {
		padding-top: 90px;
	}

	.linium-programme,
	.linium-programme + .linium-programme,
	.linium-activites {
		margin-top: 110px;
	}

	.home .linium-cta {
		margin-top: 110px;
	}

	.home .linium-map {
		margin-top: 100px;
	}

	.linium-activites__track {
		--activity-visible: 2;
	}
}

@media (max-width: 782px) {
	/* Hero plein écran sur mobile. `svh` = hauteur du viewport barre d'adresse
	   déployée : avec `vh`, le bas du hero passerait sous la barre du
	   navigateur. `vh` reste en repli pour les navigateurs anciens. */
	.linium-hero.linium-hero-home {
		min-height: 100vh;
		min-height: 100svh;
	}

	.linium-hero__wordmark {
		font-size: 44px;
	}

	.linium-hero__mark {
		width: 48px;
		height: 51px;
	}

	.linium-hero__lockup {
		gap: 20px;
	}

	.linium-hero__promiris {
		font-size: 26px;
	}

	.linium-hero__by {
		font-size: 14px;
	}

	/* Rythme unique : 72px entre toutes les sections. */
	.linium-hero-home + .linium-edito {
		padding-top: 72px;
	}

	.linium-programme,
	.linium-programme + .linium-programme,
	.linium-activites {
		margin-top: 72px;
	}

	.home .linium-cta {
		margin-top: 72px;
	}

	.home .linium-map {
		margin-top: 72px;
	}

	/* Les colonnes s'empilent : l'image passe sous le texte, sans marge auto
	   qui la décalerait. */
	.linium-programme__text,
	.linium-programme__media {
		max-width: none;
		margin-inline: 0;
	}

	.linium-programme .wp-block-column + .wp-block-column {
		margin-top: 40px;
	}


	/* Le sceau reste : c'est lui qui identifie le programme. */
	.linium-programme .linium-seal {
		display: block;
		width: 110px;
		height: 110px;
		margin-bottom: 24px;
	}

	.linium-programme .wp-block-buttons {
		align-items: stretch;
		margin-top: 32px;
		gap: 16px;
	}

	.linium-activites__track {
		--activity-visible: 1;
	}

	.linium-activites__head {
		gap: 16px;
	}

	.linium-activites__viewport {
		margin-top: 40px;
	}

	.linium-activites__card h3 {
		margin-top: 34px;
		font-size: 20px;
	}

	.linium-activites__card p {
		margin-top: 16px;
	}

	.linium-activites__dots {
		margin-top: 40px;
	}
}

/* --------------------------------------------------------------------------
   11 ter. Page « introuvable » (404)
   --------------------------------------------------------------------------
   Aucune maquette : la page reprend les composants existants (eyebrow, titre
   or, mesure de texte, bouton pilule). Le padding haut tient compte de
   l'en-tête, qui est en position fixe et recouvrirait sinon le contenu.
   -------------------------------------------------------------------------- */

/* Bandeau fin derrière l'en-tête : sur fond blanc, la navigation (blanche) est
   illisible tant que la page n'a pas défilé. Assez haut pour couvrir l'en-tête
   en position fixe, sans faire un hero. Un visuel peut y être ajouté depuis
   l'éditeur — il faudra alors baisser l'opacité du voile. */
.linium-hero.linium-hero-slim {
	min-height: 190px;
}

.linium-404 {
	padding-block: 120px 200px;
	text-align: center;
}

.linium-404__title {
	font-size: var(--wp--preset--font-size--xxx-large);
	letter-spacing: var(--wp--custom--tracking--heading-large);
	line-height: 1.32;
	margin: 0;
}

@media (max-width: 1024px) {
	.linium-404 {
		padding-block: 100px 140px;
	}
}

@media (max-width: 782px) {
	.linium-hero.linium-hero-slim {
		min-height: 150px;
	}

	.linium-404 {
		padding-block: 80px 100px;
	}

	.linium-404__title {
		font-size: 32px;
	}
}

/* --------------------------------------------------------------------------
   12. Bandeau cookies
   --------------------------------------------------------------------------
   Bandeau INFORMATIF (voir assets/js/cookie-banner.js) : il mémorise le choix
   mais ne bloque aucun script. Aucun modèle n'existe sur la maquette — les
   formes reprennent la charte (pilules, or, serif pour les libellés).
   -------------------------------------------------------------------------- */

.linium-cookies {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 200;
	padding: 0 var(--wp--custom--gutter) 24px;
	pointer-events: none;
}

.linium-cookies[hidden] {
	display: none;
}

.linium-cookies__inner {
	pointer-events: auto;
	max-width: 1200px;
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding: 22px 34px;
	background-color: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--submenu-radius);
	box-shadow: 0 6px 34px color-mix(in srgb, var(--wp--preset--color--contrast) 16%, transparent);
}

.linium-cookies__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--wp--preset--color--contrast);
	max-width: 78ch;
}

.linium-cookies__link {
	color: var(--wp--preset--color--accent-1);
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.linium-cookies__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: none;
}

.linium-cookies__btn {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 15px;
	line-height: 1;
	letter-spacing: var(--wp--custom--tracking--button);
	text-transform: uppercase;
	padding: 15px 32px;
	border: 1px solid var(--wp--preset--color--accent-1);
	border-radius: 999px;
	background-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.linium-cookies__btn:hover,
.linium-cookies__btn:focus-visible {
	background-color: transparent;
	color: var(--wp--preset--color--accent-1);
}

/* Refuser doit être aussi accessible qu'accepter : même taille, même place. */
.linium-cookies__btn--ghost {
	background-color: transparent;
	color: var(--wp--preset--color--accent-1);
}

.linium-cookies__btn--ghost:hover,
.linium-cookies__btn--ghost:focus-visible {
	background-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
}

@media (max-width: 782px) {
	.linium-cookies {
		padding-bottom: 16px;
	}

	.linium-cookies__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
		padding: 22px;
	}

	.linium-cookies__actions {
		justify-content: center;
	}

	.linium-cookies__btn {
		flex: 1;
		padding-inline: 18px;
	}
}

/* --------------------------------------------------------------------------
   12 bis. Pages sans hero (Contact, et toute page dont le contenu ne commence
   pas par une bannière)
   --------------------------------------------------------------------------
   L'en-tête est fixe et transparent, pensé pour se poser sur la photo du hero.
   Sans hero, il serait blanc sur blanc — donc invisible. La maquette Contact le
   montre d'emblée dans l'état qu'il prend au défilement : fond blanc, texte
   sombre. On applique donc cet état dès le chargement, et on décale le contenu
   sous l'en-tête puisqu'il ne passe plus dessous.

   `:has()` évite d'avoir à marquer chaque page côté PHP ou JS : la règle se
   déduit du contenu réel, et une page qui gagne un hero plus tard repasse
   automatiquement en en-tête transparent. -------------------------------- */

body:not(:has(.linium-hero)) .linium-header {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 2px 18px color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
}

body:not(:has(.linium-hero)) .linium-header__mark {
	color: var(--wp--preset--color--accent-1);
}

body:not(:has(.linium-hero)) .linium-langswitch {
	border-color: var(--wp--preset--color--accent-1);
}

body:not(:has(.linium-hero)) .linium-langswitch:hover,
body:not(:has(.linium-hero)) .linium-langswitch:focus-visible {
	background-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
}

/* Le contenu commençait sous un en-tête transparent ; il doit maintenant
   commencer sous un en-tête opaque. 75px = hauteur de l'en-tête au repos. */
body:not(:has(.linium-hero)) .wp-site-blocks > main {
	padding-top: 78px;
}

/* --------------------------------------------------------------------------
   15. Formulaire de contact (Contact Form 7)
   --------------------------------------------------------------------------
   Le balisage vient du gabarit `forms/contact-form-7.txt` : les grilles et les
   libellés sont écrits à la main, Contact Form 7 ne fournit que les champs.
   D'où un CSS qui reste sur nos propres classes, et ne touche à celles de
   l'extension que là où c'est inévitable (messages de validation).
   -------------------------------------------------------------------------- */

.linium-contact {
	margin-top: 75px;
}

.linium-form {
	max-width: var(--wp--custom--form--width);
	margin-inline: auto;
}

.linium-form__grid {
	display: grid;
	gap: var(--wp--custom--form--gap-y) var(--wp--custom--form--gap-x);
}

.linium-form__grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.linium-form__grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--wp--custom--form--gap-x-3);
	margin-top: var(--wp--custom--form--gap-y);
}

.linium-form__field {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--form--label-gap);
}

.linium-form__field--wide {
	margin-top: var(--wp--custom--form--gap-y);
}

.linium-form__field label {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--label);
	color: var(--wp--preset--color--contrast);
}

.linium-form__req {
	color: var(--wp--preset--color--accent-1);
	text-decoration: none;
	border: 0;
}

/* Les champs : pilule à bordure grise, comme la maquette. Le gris est dérivé
   de la couleur de texte, pour ne pas introduire une couleur hors charte. */
.linium-form input[type="text"],
.linium-form input[type="email"],
.linium-form input[type="tel"],
.linium-form select,
.linium-form textarea {
	box-sizing: border-box;
	width: 100%;
	height: var(--wp--custom--form--field-height);
	padding-inline: 26px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) var(--wp--custom--form--border-tint), var(--wp--preset--color--base));
	border-radius: calc(var(--wp--custom--form--field-height) / 2);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: 16px;
	transition: border-color 0.2s ease;
}

.linium-form textarea {
	height: var(--wp--custom--form--textarea-height);
	padding-block: 20px;
	border-radius: 30px;
	resize: vertical;
}

.linium-form input:focus,
.linium-form select:focus,
.linium-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent-1);
}

/* Chevron dessiné en CSS plutôt qu'en image : une seule couleur à maintenir,
   et il suit la charte sans passer par un fichier SVG à recolorer. */
.linium-form select {
	appearance: none;
	padding-right: 52px;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--wp--preset--color--contrast) 50%),
		linear-gradient(135deg, var(--wp--preset--color--contrast) 50%, transparent 50%);
	background-position: right 30px center, right 24px center;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

/* Civilité et consentement : puces rondes dessinées à la main, les contrôles
   natifs ne se stylent pas de façon fiable d'un navigateur à l'autre. */
.linium-form__civility .wpcf7-list-item {
	margin: 0 40px 0 0;
}

.linium-form__civility label,
.linium-form__consent label {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	cursor: pointer;
	font-size: 16px;
}

.linium-form__civility input,
.linium-form__consent input {
	appearance: none;
	flex: none;
	width: 22px;
	height: 22px;
	margin: 0;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) var(--wp--custom--form--border-tint), var(--wp--preset--color--base));
	border-radius: 50%;
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.linium-form__civility input:checked,
.linium-form__consent input:checked {
	border-color: var(--wp--preset--color--accent-1);
	box-shadow: inset 0 0 0 5px var(--wp--preset--color--accent-1);
}

.linium-form__civility input:focus-visible,
.linium-form__consent input:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 3px;
}

.linium-form__consent {
	margin-top: 26px;
	font-size: 16px;
}

.linium-form__actions {
	margin-top: 65px;
	text-align: center;
}

/* Le bouton d'envoi reprend l'aspect des boutons du thème (pilule ajourée) ;
   il ne peut pas utiliser le bloc Bouton, c'est Contact Form 7 qui le rend. */
.linium-form__actions input[type="submit"] {
	min-width: 260px;
	height: 63px;
	padding-inline: 46px;
	border: 1px solid var(--wp--preset--color--accent-1);
	border-radius: 32px;
	background-color: transparent;
	color: var(--wp--preset--color--accent-1);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 16px;
	letter-spacing: var(--wp--custom--tracking--button);
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.linium-form__actions input[type="submit"]:hover,
.linium-form__actions input[type="submit"]:focus-visible {
	background-color: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
}

/* Messages de Contact Form 7 : on neutralise son cadre par défaut et on
   reprend la charte. */
.linium-form .wpcf7-not-valid-tip {
	margin-top: 6px;
	padding-left: 26px;
	font-size: 14px;
	color: var(--wp--preset--color--accent-3);
}

.wpcf7 form .wpcf7-response-output {
	max-width: var(--wp--custom--form--width);
	margin: 32px auto 0;
	padding: 18px 26px;
	border-width: 1px;
	border-radius: 20px;
	text-align: center;
}

/* --------------------------------------------------------------------------
   16. Bloc agences (texte à gauche, deux fiches à droite)
   -------------------------------------------------------------------------- */

/* 169 = 160 relevé entre le bas de l'en-tête et l'eyebrow, plus les 9px dont
   notre en-tête est plus court que celui de la maquette. */
.linium-intro.linium-intro-contact {
	margin-top: 169px;
	padding-top: 0;
}

.linium-agences {
	margin-top: 159px;
	padding-bottom: 291px;
	align-items: flex-start;
}

.linium-agences__row {
	margin-bottom: 0;
}

.linium-agence {
	flex: 0 0 var(--wp--custom--agence--image-width);
}

/* Même masque ovale que les cartes d'activités — le relevé donne le même
   rapport (1,478) et un rayon à 2 points près. */
.linium-agence__media {
	margin: 0;
}

.linium-agence__media img,
.linium-agence__media.wp-block-image {
	display: block;
	width: 100%;
	aspect-ratio: var(--wp--custom--agence--image-ratio);
	object-fit: cover;
	border-radius: var(--wp--custom--agence--radius);
}

/* Emplacement vide : sans image, la figure n'a pas de hauteur. On lui donne la
   même boîte que l'image finale, en aplat, pour que la maquette se lise. */
.linium-agence__media:not(:has(img[src])) {
	aspect-ratio: var(--wp--custom--agence--image-ratio);
	background-color: var(--wp--preset--color--accent-1);
	border-radius: var(--wp--custom--agence--radius);
}

.linium-agence__label {
	margin: 30px 0 0;
	color: var(--wp--preset--color--accent-1);
	font-size: 22px;
	letter-spacing: var(--wp--custom--tracking--heading);
	text-transform: uppercase;
}

.linium-agence__address {
	margin: 18px 0 0;
	font-size: 16px;
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   13. Responsive
   --------------------------------------------------------------------------
   Aucune maquette tablette/mobile n'a été fournie : les règles ci-dessous sont
   des choix d'intégration, documentés dans IMPORT.md.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.linium-seal {
		width: 180px;
		height: 180px;
		right: 0;
		top: auto;
		bottom: -60px;
	}

	.linium-edito {
		padding-top: 120px;
	}

	.linium-edito__text {
		padding-top: 40px;
	}

	.linium-fiches {
		gap: 48px;
	}

	.linium-fiche__label {
		margin-top: 60px;
	}

	.linium-cta {
		margin-top: 150px;
		padding: 80px 60px;
		border-radius: 120px;
	}

	.linium-map {
		height: 480px;
		margin-top: 120px;
	}

	.linium-footer {
		padding-top: 120px;
		padding-bottom: 90px;
	}

	.linium-footer__brand,
	.linium-footer__byline,
	.linium-footer__contact {
		justify-content: flex-start;
		text-align: left;
	}

	.linium-footer__wordmark {
		font-size: 48px;
	}

	.linium-footer__mark {
		width: 56px;
		height: 59px;
	}

	.linium-carousel {
		margin-top: 100px;
	}
}

@media (max-width: 782px) {
	/* Le sceau chevaucherait le texte : on le sort du flux visuel. */
	.linium-seal {
		display: none;
	}

	.linium-hero {
		min-height: 360px;
	}

	.linium-title-lg {
		font-size: 32px;
	}

	.linium-fiche__media {
		max-width: 350px;
		margin-inline: auto;
	}

	/* Sur mobile, une seule slide visible : on annule le décalage des voisines. */
	.linium-carousel {
		--wp--custom--carousel--pitch: 1.08;
		--slide-scale: 0.9;
	}

	.linium-carousel__nav--prev {
		inset-inline-start: 12px;
	}

	.linium-carousel__nav--next {
		inset-inline-end: 12px;
	}

	.linium-cta {
		margin-top: 110px;
		padding: 56px 32px;
		border-radius: 60px;
	}

	.linium-map {
		height: 380px;
	}

	.linium-header__wordmark {
		font-size: 32px;
	}

	/* Pied de page entièrement centré sur mobile : les deux colonnes se
	   retrouvent empilées, un alignement à gauche d'un côté et centré de
	   l'autre donnerait un axe bancal. */
	.linium-footer .wp-block-column,
	.linium-footer p,
	.linium-footer h2 {
		text-align: center;
	}

	.linium-footer .linium-eyebrow {
		/* compense l'interlettrage du dernier caractère */
		padding-left: var(--wp--custom--tracking--eyebrow);
	}

	.linium-footer .wp-block-buttons {
		justify-content: center;
	}

	.linium-footer__brand,
	.linium-footer__byline,
	.linium-footer__contact {
		justify-content: center;
		text-align: center;
	}

	/* Les deux mentions passent l'une sous l'autre : côte à côte, chacune
	   restait décalée par rapport à l'axe central. */
	.linium-credits .wp-block-group {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		gap: 6px;
	}

	.linium-header__mark {
		width: 36px;
		height: 38px;
	}
}

/* --------------------------------------------------------------------------
   14. Derniers ajustements mobiles
   --------------------------------------------------------------------------
   Ces règles doivent rester en FIN de fichier : la section North Living
   redéfinit `.linium-edito__text` dans un `@media (max-width: 1024px)` qui, à
   spécificité égale, l'emportait sur un bloc mobile placé plus haut.
   -------------------------------------------------------------------------- */

@media (max-width: 782px) {
	/* En desktop, la colonne de droite démarre plus bas que le titre qu'elle
	   côtoie. Une fois les colonnes empilées, ce décalage devient un grand
	   trou entre le titre et le paragraphe. */
	.linium-edito__text {
		padding-top: 0;
	}

	/* `gap: 122px` fixe aussi bien l'écart horizontal que vertical : une fois
	   les colonnes empilées, il devenait un trou de 122px. On ne garde la
	   valeur desktop que pour l'axe horizontal. */
	.wp-block-columns.linium-edito {
		gap: 28px;
	}

	.wp-block-columns.linium-programme {
		gap: 40px;
	}

	.linium-edito .wp-block-column + .wp-block-column,
	.linium-programme .wp-block-column + .wp-block-column {
		margin-top: 0;
	}
}

/* --------------------------------------------------------------------------
   17. Responsive — formulaire de contact et bloc agences
   --------------------------------------------------------------------------
   Placé en fin de fichier pour passer après les sections 13 et 14, qui
   contiennent déjà des règles de largeur sur les colonnes.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.linium-contact {
		margin-top: 60px;
	}

	.linium-form__grid--3 {
		column-gap: 32px;
	}

	/* Les deux colonnes du bloc agences ne tiennent plus côte à côte :
	   le texte passe au-dessus, les deux fiches restent en rang. */
	.linium-agences {
		margin-top: 110px;
		gap: 60px;
	}

	.linium-agences__intro,
	.linium-agences__list {
		flex-basis: 100%;
	}

	.linium-agences__row {
		justify-content: center;
	}
}

@media (max-width: 782px) {
	/* Une colonne : à cette largeur, deux champs côte à côte deviennent trop
	   étroits pour un e-mail ou une adresse. */
	.linium-form__grid--2,
	.linium-form__grid--3 {
		grid-template-columns: minmax(0, 1fr);
	}

	.linium-form__grid--3 {
		row-gap: var(--wp--custom--form--gap-y);
	}

	.linium-form__actions {
		margin-top: 44px;
	}

	.linium-form__actions input[type="submit"] {
		width: 100%;
		min-width: 0;
	}

	.linium-agences {
		margin-top: 80px;
		gap: 48px;
	}

	/* Les fiches gardent leur rang à deux tant que la place suffit ; en dessous,
	   le cœur les empile et elles reprennent la largeur de la colonne. */
	.linium-agence {
		flex-basis: var(--wp--custom--agence--image-width);
	}
}

@media (max-width: 600px) {
	.linium-agences__row {
		gap: 36px;
	}

	.linium-agence {
		flex-basis: 100%;
		max-width: 320px;
		margin-inline: auto;
	}

	.linium-form textarea {
		height: 160px;
	}
}