/* Pages d'atterrissage (LP) — Metaconcept Core.
   Voir includes/pages/class-lp.php pour le raisonnement.

   Trois objets seulement : la bande d'en-tête, la colonne qui suit la
   lecture, le bloc de conversion. Tout le reste de la page — ses 2 000
   mots — garde exactement la mise en forme qu'il a aujourd'hui. */

/* ------------------------------------------------------------------
   1. LA BANDE D'EN-TÊTE
   ------------------------------------------------------------------
   Elle hérite de .mc-hero--archive : même bande sombre, même hauteur
   que les fiches et les archives. Une page d'atterrissage qui ne
   ressemble pas au site fait douter le visiteur venu de Google. */

.mc-lp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

.mc-lp-gages {
	/* La place de la coche, déclarée une fois pour la liste entière.
	   C'est socle.css qui l'applique au <li> : la remise à zéro des
	   retraits de Divi y pèse un identifiant, et un composant ne peut
	   pas la contredire autrement que par cette variable. */
	--mc-liste-retrait: 20px;

	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.mc-lp-gages li {
	position: relative;
	margin: 0;
	padding-left: var(--mc-liste-retrait);
	font-size: 0.8125rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.82);
}

/* La coche est dessinée, jamais écrite : un caractère « ✓ » se lit à
   voix haute par un lecteur d'écran, et ces gages sont décoratifs. */
.mc-lp-gages li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 9px;
	height: 5px;
	border-left: 2px solid var(--mc-or, #D5AE05);
	border-bottom: 2px solid var(--mc-or, #D5AE05);
	transform: rotate(-45deg);
}

.mc-lp-avertissement {
	margin: 16px 0 0;
	padding: 8px 12px;
	border-left: 3px solid var(--mc-or, #D5AE05);
	background: rgba(255, 255, 255, 0.08);
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.86);
}

/* ------------------------------------------------------------------
   2. LA COLONNE QUI SUIT LA LECTURE
   ------------------------------------------------------------------

   C'est le levier principal de ces pages. L'appel à l'action du haut
   sort de l'écran au deuxième paragraphe ; celui du bas n'est atteint
   que par ceux qui ont tout lu. Une colonne collante propose l'action
   pendant toute la lecture, au moment où l'envie naît.

   position: sticky et non fixed : la colonne reste DANS sa colonne, ne
   recouvre rien, et s'arrête naturellement en bas de la ligne. Le
   décalage haut tient compte de l'en-tête collant du site, dont la
   hauteur est mesurée par references-table.js (--mc-entete-haut). */

.mc-lp-aside {
	position: sticky;
	top: calc(var(--mc-entete-haut, 92px) + 16px);
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.mc-lp-aside__sommaire {
	padding: 16px 18px;
	border: 1px solid var(--mc-bord, #ECECEC);
	border-radius: var(--mc-rayon-carte, 12px);
	background: var(--mc-fond-doux, #FAFAFA);
}

.mc-lp-aside__legende {
	margin: 0 0 10px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8A8A8A;
}

.mc-lp-aside__sommaire ol {
	margin: 0;
	padding: 0 0 0 18px;
	font-size: 0.875rem;
	line-height: 1.45;
}

.mc-lp-aside__sommaire li {
	margin: 0 0 7px;
}

.mc-lp-aside__sommaire a {
	color: var(--c-base, #4D4D4D);
	text-decoration: none;
}

.mc-lp-aside__sommaire a:hover,
.mc-lp-aside__sommaire a:focus-visible,
.mc-lp-aside__sommaire .est-courant a {
	color: var(--mc-action, #D87A00);
}

.mc-lp-aside__sommaire .est-courant a {
	font-weight: 700;
}

.mc-lp-aside__action {
	padding: 20px;
	border: 1px solid var(--mc-bord, #ECECEC);
	border-radius: var(--mc-rayon-carte, 12px);
	background: #FFFFFF;
	box-shadow: var(--mc-ombre-s, 0 2px 10px -4px rgba(0, 0, 0, .18));
}

.mc-lp-aside__titre {
	margin: 0 0 8px;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--c-base, #4D4D4D);
}

.mc-lp-aside__texte {
	margin: 0 0 16px;
	font-size: 0.875rem;
	line-height: 1.5;
	color: #6A6A6A;
}

.mc-lp-aside__action .gg-ref-cta {
	display: block;
	text-align: center;
}

.mc-lp-aside__tel {
	margin-top: 14px;
	font-size: 0.8125rem;
	line-height: 1.6;
}

/* ------------------------------------------------------------------
   3. LE BLOC DE CONVERSION
   ------------------------------------------------------------------
   Il ne refait pas le bloc « Besoin d'un conseil », qui reste le point
   d'arrivée commun du site. Il dit ce qu'on attend du visiteur pour
   pouvoir lui répondre — ce qui sépare un formulaire rempli d'un
   formulaire abandonné. */

.mc-lp-conversion {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: 32px;
	border-radius: var(--mc-rayon-carte, 12px);
	background: var(--mc-fond-doux, #FAFAFA);
	border: 1px solid var(--mc-bord, #ECECEC);
}

.mc-lp-conversion__texte {
	flex: 1 1 380px;
	min-width: 0;
}

.mc-lp-conversion__titre {
	margin: 0 0 8px;
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--c-base, #4D4D4D);
}

.mc-lp-conversion__promesse {
	margin: 0 0 20px;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: #6A6A6A;
}

.mc-lp-etapes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.mc-lp-etapes li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--c-base, #4D4D4D);
}

.mc-lp-etapes__rang {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--mc-or, #D5AE05);
	color: #2A2620;
	font-size: 0.75rem;
	font-weight: 700;
}

.mc-lp-conversion__action {
	flex: 0 0 auto;
	text-align: center;
}

.mc-lp-conversion__tel {
	margin-top: 12px;
	font-size: 0.8125rem;
}

/* ------------------------------------------------------------------
   4. LE MAILLAGE
   ------------------------------------------------------------------ */

.mc-lp-liens {
	margin: 32px 0;
}

.mc-lp-liens__titre {
	margin: 0 0 12px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8A8A8A;
}

.mc-lp-liens ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mc-lp-liens li {
	margin: 0;
}

.mc-lp-liens a {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid var(--mc-bord, #ECECEC);
	border-radius: 100px;
	background: #FFFFFF;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--c-base, #4D4D4D);
	text-decoration: none;
	transition: border-color .16s ease, color .16s ease;
}

.mc-lp-liens a:hover,
.mc-lp-liens a:focus-visible {
	border-color: var(--mc-action, #D87A00);
	color: var(--mc-action, #D87A00);
}

/* ------------------------------------------------------------------
   5. TÉLÉPHONE
   ------------------------------------------------------------------
   La colonne cesse de coller : sur un écran étroit elle passe SOUS le
   texte, et une colonne collante y mangerait la moitié de la hauteur
   utile. Le bloc d'action remonte en revanche juste après le premier
   écran de texte — c'est le rôle de l'ordre des sections dans le
   gabarit, pas du CSS. */

@media (max-width: 980px) {

	.mc-lp-aside {
		position: static;
		margin-top: 32px;
	}

	.mc-lp-aside__sommaire {
		display: none;
	}

	.mc-lp-conversion {
		padding: 24px 20px;
	}

	.mc-lp-conversion__action {
		flex: 1 1 100%;
	}

	.mc-lp-conversion__action .gg-ref-cta {
		display: block;
	}
}

/* ==================================================================
   LA BANDE DE TITRE DES PAGES D'ATTERRISSAGE
   Garde : body.mc-h-lphero — réglage « 9. Harmonisation — bande de
   titre des pages d'atterrissage ».
   ==================================================================

   CE QUI A ÉTÉ RELEVÉ LE 06/10, SUR LES 72 PAGES ÉTIQUETÉES LP.
   Leur hero porte pourtant les bonnes classes — mc-hero--archive
   mc-hero--sombre — mais il sortait en texte gris #333 sur fond
   blanc, quand tout le reste du site ouvre sur une bande sombre.

   POURQUOI. hero.css fait peindre la SECTION qui contient le hero,
   et non le hero lui-même : sur une archive, cette section ne
   contient que la bande, et le fond va d'un bord à l'autre de
   l'écran sans une seule unité vw. Sur une page d'atterrissage, le
   gabarit met TOUTE la page dans une seule section — 4 619 px de
   haut, mesurés. La règle visait donc un bloc qui tient la page
   entière : elle n'a pas pris, et c'est heureux.

   CE QU'ON FAIT À LA PLACE. Le hero se peint lui-même et s'étend aux
   bords par des marges négatives, avec le garde-fou qui manquait en
   octobre : overflow-x: clip sur #main-content. C'est lui qui change
   tout. Le 02/10, la même technique avait été écartée parce que
   100vw compte la barre de défilement : la page devenait plus large
   que la fenêtre et tout glissait vers la gauche. clip coupe ce
   débordement sans créer de conteneur de défilement — donc, à la
   différence de hidden, les éléments collants (barre d'action des
   fiches, en-tête de tableau) continuent de coller. Vérifié en
   direct : hero à 1 707 px pour une fenêtre de 1 707 px, et zéro
   pixel de débordement horizontal.

   CE QUI RESTE EN BLANC. Le fil d'Ariane des LP est posé par le
   gabarit dans sa propre rangée, au-dessus de la section : il reste
   sur fond clair, alors qu'il fait partie de la bande partout
   ailleurs. Le rattraper proprement demande de toucher au gabarit,
   donc le Theme Builder — c'est noté comme arbitrage, pas bricolé
   ici à coups de hauteurs fixes.
   ------------------------------------------------------------------ */

body.mc-h-lphero #main-content {
	overflow-x: clip;
}

/* ------------------------------------------------------------------
   LE FIL D'ARIANE COLLÉ À SA BANDE — 08/10
   ------------------------------------------------------------------

   RELEVÉ SUR /moules-silicone-fabrication-bijoux/ : 78 px entre le bas
   du fil d'Ariane et le haut de la bande sombre, contre 18 px sur
   toutes les autres familles de pages. C'est l'« écart énorme » signalé.

   LA CAUSE N'EST PAS UNE MARGE, C'EST UN ÉCART DE GRILLE. Le gabarit
   LP met toute la page dans UNE section — fil, bande, contenu,
   conversion : quatre rangées dans un même conteneur flex. Divi 5 pose
   un écart vertical de 60 px entre rangées de section. Le fil et la
   bande, qui devraient se toucher, héritent donc du même écart que
   deux blocs de contenu, et s'ajoutent aux 18 px de marge basse du fil.
   78 = 18 + 60.

   ON NE PEUT PAS BAISSER L'ÉCART DE LA SECTION : il est juste pour les
   trois autres jonctions. On annule donc le seul écart de trop, celui
   entre le fil et la bande, par une marge négative sur la rangée du
   fil — en flex, une marge négative sur un élément se retranche de
   l'écart qui le suit.

   LA VALEUR N'EST PAS RECOPIÉE. Divi 5 range son écart de section dans
   --section-gutter, que la rangée hérite (vérifié : 60 px sur la
   rangée, là où --vertical-gap y vaut déjà 40 px, la valeur des
   rangées). On annule donc EXACTEMENT ce que Divi a posé : si l'écart
   change un jour dans le constructeur, la compensation suit toute
   seule, et il n'y a aucun nombre à tenir à jour ici.

   LES TROIS :has() SONT LA SÉCURITÉ. La règle ne mord que sur une
   rangée qui porte un fil d'Ariane ET qui est immédiatement suivie
   d'une rangée portant une bande de LP. Un gabarit qui rendrait un
   jour au fil sa propre section — ce que dit sa documentation — ne
   serait pas touché : la règle s'éteindrait d'elle-même.

   LES 18 PX DU HAUT. La section ouvrait à 0 et le fil se retrouvait à
   1 px sous l'en-tête fixe. Elle reprend les 18 px que breadcrumbs.css
   donne déjà à toutes les autres familles.

   Mesuré après : 19 px sous l'en-tête, 18 px entre le fil et la bande,
   60 px conservés entre les trois autres rangées, zéro débordement
   horizontal.
   ------------------------------------------------------------------ */

body.mc-h-lphero #main-content .et_pb_section:has(.mc-lp-hero) {
	padding-top: 18px;
}

body.mc-h-lphero #main-content .et_pb_section:has(.mc-lp-hero) > .et_pb_row:has(.mc-breadcrumbs):has(+ .et_pb_row .mc-lp-hero) {
	margin-bottom: calc(-1 * var(--section-gutter, 0px));
}

body.mc-h-lphero #main-content .mc-lp-hero.mc-hero--sombre {
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
	padding-top: 44px;
	padding-bottom: 44px;
	background-color: var(--mc-noir, #1A1816);
	background-image: linear-gradient(115deg, #1A1816 0%, #2A2620 55%, #3A332A 100%);
	color: #FFFFFF;
}

body.mc-h-lphero .mc-lp-hero.mc-hero--sombre h1,
body.mc-h-lphero .mc-lp-hero.mc-hero--sombre .mc-hero__titre {
	color: #FFFFFF;
}

body.mc-h-lphero .mc-lp-hero.mc-hero--sombre p,
body.mc-h-lphero .mc-lp-hero.mc-hero--sombre .mc-hero__intro {
	color: #C9C4B6;
}

body.mc-h-lphero .mc-lp-hero.mc-hero--sombre .mc-hero__kicker,
body.mc-h-lphero .mc-lp-hero.mc-hero--sombre .mc-lp-hero__kicker {
	color: var(--mc-or, #D5AE05);
}

/* Si le fil d'Ariane se trouve DANS le hero — ce qui est le cas des
   gabarits d'archive, et le sera des LP le jour où le gabarit sera
   repris — il prend les teintes de la bande. */
body.mc-h-lphero .mc-lp-hero.mc-hero--sombre .mc-breadcrumbs,
body.mc-h-lphero .mc-lp-hero.mc-hero--sombre .mc-breadcrumbs a {
	color: rgba(255, 255, 255, 0.72);
}

body.mc-h-lphero .mc-lp-hero.mc-hero--sombre .mc-breadcrumbs [aria-current] {
	color: #FFFFFF;
}

/* ==================================================================
   LA MISE EN AVANT — [mc_lp_mise_en_avant], 08/10
   ==================================================================
   Deux blocs posés par le gabarit : les gammes choisies, puis les
   documents choisis. Chacun se tait si son champ est vide, d'où un
   habillage qui ne suppose jamais la présence de l'autre. ========== */

.mc-lp-avant {
	margin-top: 36px;
}

.mc-lp-avant__titre {
	margin: 0 0 16px;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--mc-encre, #4D4D4D);
}

/* ==================================================================
   L'IMAGE À LA UNE DANS LA BANDE D'UNE LP — 08/10
   Garde : body.mc-h-lpimage — réglage « 17. LP — image à la une dans
   la bande ». Décoché par défaut.
   ==================================================================

   MÊME EFFET QUE LE CAS 13, AUTRE INTERRUPTEUR, ET CE N'EST PAS UN
   CAPRICE. Les deux bandes n'ont rien en commun techniquement : celle
   des pages éditoriales est une SECTION Divi marquée
   mc-sec-hero--bande, sur laquelle le cas 13 accroche son
   pseudo-élément ; celle d'une LP est un BLOC qui se peint lui-même et
   s'étend aux bords par des marges négatives. La classe du cas 13
   n'existe nulle part sur une LP, donc rien ne s'y accrochait — c'est
   la question posée le 08/10 à 12 h 23, et la réponse était « non ».

   ET SURTOUT, LES LP SE COMPTENT PAR CENTAINES. Les allumer avec les
   pages éditoriales changerait d'un coup toutes celles qui portent
   déjà une image à la une, sans que personne les ait choisies. D'où
   deux cases : on allume les deux familles séparément.

   LA VARIABLE, ELLE, N'EST PAS DUPLIQUÉE. --mc-hero-visuel est publiée
   par le même PHP dès que l'un des deux cas est coché : une donnée ne
   se recopie pas parce que deux règles la lisent.

   POSITION ET ISOLATION SONT POSÉES ICI, PAS DANS LE BLOC COMMUN.
   La bande des LP est en position statique le reste du temps ; lui
   donner un contexte d'empilement sans raison reviendrait à changer
   son comportement pour tout le monde au bénéfice d'un réglage que
   personne n'a coché. isolation: isolate borne le z-index négatif à
   l'intérieur de la bande : le visuel passe derrière le texte, et
   DEVANT le fond de la bande — sans quoi il disparaîtrait dessous.

   PAS DE VOILE SUR LA PHOTO, c'est l'arbitrage du 07/10 repris tel
   quel : un voile sert à rendre lisible un texte posé PAR-DESSUS une
   image. Ici le texte est à gauche, l'image à droite — un voile ne
   ferait que ternir la photo. Ce qui la fait entrer dans la bande,
   c'est un MASQUE : son bord gauche devient transparent, et c'est le
   fond réel qui apparaît dessous, quel qu'il soit.
   ================================================================== */

body.mc-h-lpimage #main-content .mc-lp-hero.mc-hero--sombre {
	position: relative;
	isolation: isolate;
}

body.mc-h-lpimage #main-content .mc-lp-hero.mc-hero--sombre::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 46%;
	z-index: -1;
	background-image: var(--mc-hero-visuel);
	background-size: cover;
	background-position: center;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.55) 22%, #000 55%);
	mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, 0.55) 22%, #000 55%);
}

/* Le texte se resserre pour ne pas courir sous l'image — même valeur
   que sur les pages éditoriales, et meilleure longueur de ligne que
   les 1 440 px d'avant. */
body.mc-h-lpimage #main-content .mc-lp-hero.mc-hero--sombre .mc-hero__corps {
	max-width: 620px;
}

/* Sous 900 px, l'image disparaît : empilée, elle doublerait la hauteur
   de la bande, et les 400 px sont une règle de marque. */
@media (max-width: 900px) {

	body.mc-h-lpimage #main-content .mc-lp-hero.mc-hero--sombre::after {
		display: none;
	}

	body.mc-h-lpimage #main-content .mc-lp-hero.mc-hero--sombre .mc-hero__corps {
		max-width: none;
	}
}