/*
 * Lavillaugouet — Identité
 * Finitions du thème Sagamento et blocs de la maquette, utilisables depuis
 * Sagamento Builder par le champ « Classe CSS » d'une ligne ou d'une colonne.
 *
 * Toutes les règles sont portées par .lvg-identite (classe posée sur <body>
 * quand l'identité est appliquée) : désactiver l'extension rend le thème
 * à son apparence d'origine.
 */

.lvg-identite {
	--lvg-jaune: #e8c40c;
	--lvg-jaune-fonce: #8a7308;
	--lvg-marine: #202951;
	--lvg-marine-clair: #3a4472;
	--lvg-sur-marine: #c5cae0;
	--lvg-or-sombre: #3e3714;
	--lvg-creme: #fbf9f2;
	--lvg-bordure: #e7e2ce;
	--lvg-texte: #2d3350;
	--lvg-doux: #6b7193;
	--lvg-pad: 56px;

	/* Le marine en composantes, pour les voiles translucides. */
	--lvg-marine-rvb: 32 41 81;

	/* Texte posé sur le jaune : le bleu marine de la maquette. */
	--sg-accent-contrast: #202951;
}

/* ---------------------------------------------------------------- En-tête */

/* Bouton « Demander un devis » : jaune, angles droits, casse normale. */
.lvg-identite .sg-header-cta {
	background: var(--lvg-jaune);
	border-color: var(--lvg-jaune);
	color: var(--lvg-marine);
	font-size: 15px;
	letter-spacing: 0;
	text-transform: none;
	padding-block: 13px;
}

.lvg-identite .sg-header-cta:hover,
.lvg-identite .sg-header-cta:focus-visible {
	background: var(--lvg-marine);
	border-color: var(--lvg-marine);
	color: #fff;
	filter: none;
}

/* Bouton d'appel, à gauche du bouton de devis. */
.lvg-identite .lvg-tel {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 48px;
	padding: 0 20px;
	border: 2px solid var(--lvg-marine);
	color: var(--lvg-marine);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background .2s ease, color .2s ease;
}

.lvg-identite .lvg-tel:hover,
.lvg-identite .lvg-tel:focus-visible {
	background: var(--lvg-marine);
	color: #fff;
}

.lvg-identite .lvg-tel svg {
	flex: none;
}

/* Menu : soulignement jaune de l'élément actif. */
.lvg-identite .primary-menu > li > a {
	position: relative;
}

.lvg-identite .primary-menu > li.current-menu-item > a::after,
.lvg-identite .primary-menu > li.current-menu-ancestor > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 3px;
	background: var(--lvg-jaune);
}

/* ------------------------------------------------------------ Typographie */

/* Lien de texte souligné en jaune plutôt que coloré. */
.lvg-identite .entry-content a:not(.sg-btn):not([class*="vc_"]):not(.lvg-lien):not(.sbr-lien) {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--lvg-jaune);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/*
 * Les titres ne se coupent pas en fin de ligne : la césure automatique du
 * thème tranchait les mots en capitales, « ACCOM-PAGNENT ». Une coupure
 * voulue reste possible avec un trait d'union conditionnel (&shy;).
 */
.lvg-identite h1,
.lvg-identite h2,
.lvg-identite h3,
.lvg-identite h4,
.lvg-identite h5,
.lvg-identite h6,
.lvg-identite .vc_custom_heading {
	-webkit-hyphens: manual;
	hyphens: manual;
}

/* Petit intitulé en capitales espacées. */
.lvg-identite .lvg-surtitre,
.lvg-identite .lvg-surtitre p {
	margin: 0 0 12px;
	color: var(--lvg-jaune-fonce);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* Sur le marine, le sur-titre garde le jaune de la charte. */
.lvg-identite .lvg-marine .lvg-surtitre,
.lvg-identite .lvg-marine .lvg-surtitre p {
	color: var(--lvg-jaune);
	opacity: 1;
}

.lvg-identite .lvg-jaune .lvg-surtitre,
.lvg-identite .lvg-jaune .lvg-surtitre p {
	color: inherit;
	opacity: .78;
}

/*
 * Le sur-titre et son titre forment un bloc : la marge haute du titre
 * s'ajoutait à la marge basse du sur-titre et les écartait du double.
 */
.lvg-identite .lvg-surtitre + h1,
.lvg-identite .lvg-surtitre + h2,
.lvg-identite .lvg-surtitre + h3,
.lvg-identite .lvg-surtitre + h4,
.lvg-identite .lvg-surtitre + .vc_custom_heading,
.lvg-identite .lvg-surtitre + .wpb_content_element > :first-child {
	margin-top: 0;
}

/* ------------------------------------------------------------------ Bandes */

.lvg-identite .lvg-plein:not(.sb-stretch) {
	padding-left: var(--lvg-pad);
	padding-right: var(--lvg-pad);
}

.lvg-identite .lvg-jaune {
	background: var(--lvg-jaune);
	color: var(--lvg-marine);
	padding-block: 56px;
}

.lvg-identite .lvg-jaune h1,
.lvg-identite .lvg-jaune h2,
.lvg-identite .lvg-jaune h3,
.lvg-identite .lvg-jaune h4,
.lvg-identite .lvg-jaune p,
.lvg-identite .lvg-jaune li {
	color: var(--lvg-marine);
}

.lvg-identite .lvg-marine {
	background: var(--lvg-marine);
	color: var(--lvg-sur-marine);
	padding-block: 56px;
}

.lvg-identite .lvg-marine h1,
.lvg-identite .lvg-marine h2,
.lvg-identite .lvg-marine h3,
.lvg-identite .lvg-marine h4 {
	color: #fff;
}

.lvg-identite .lvg-creme {
	background: var(--lvg-creme);
	padding-block: 56px;
}

/*
 * Boutons posés sur une bande colorée.
 * Sagamento Builder pose .vc_general.vc_btn3.sb-theme-btn (trois classes) sur
 * les boutons « couleur du thème » : les sélecteurs ci-dessous sont plus
 * précis, sinon le bouton reste jaune sur fond jaune.
 */
.lvg-identite .lvg-jaune .vc_general.vc_btn3.sb-theme-btn,
.lvg-identite .lvg-jaune .vc_general.vc_btn3.sb-theme-btn.sg-btn-outline:hover,
.lvg-identite .lvg-jaune a.sg-btn,
.lvg-identite .lvg-jaune button.sg-btn {
	background: var(--lvg-marine);
	background-image: none;
	border-color: var(--lvg-marine);
	color: #fff;
}

/* Au survol, le bouton plein s'inverse : jaune cerclé de marine. */
.lvg-identite .lvg-jaune .vc_general.vc_btn3.sb-theme-btn:not(.sg-btn-outline):hover,
.lvg-identite .lvg-jaune .lvg-plein-btn .vc_general.vc_btn3.sb-theme-btn:hover,
.lvg-identite .lvg-jaune a.sg-btn:not(.lvg-bord):hover,
.lvg-identite .lvg-jaune button.sg-btn:not(.lvg-bord):hover {
	background: var(--lvg-jaune);
	background-image: none;
	border-color: var(--lvg-marine);
	color: var(--lvg-marine);
}

/*
 * Bouton secondaire : fond blanc plutôt que transparent. Sur une photo de
 * fond, un simple contour se perd — le bouton doit rester lisible quelle
 * que soit l'image.
 */
.lvg-identite .lvg-jaune .lvg-bord .vc_general.vc_btn3.sb-theme-btn,
.lvg-identite .lvg-jaune .vc_general.vc_btn3.sb-theme-btn.sg-btn-outline,
.lvg-identite .lvg-jaune .lvg-bord a.sg-btn,
.lvg-identite .lvg-jaune a.sg-btn.lvg-bord {
	background: #fff;
	background-image: none;
	border-color: var(--lvg-marine);
	color: var(--lvg-marine);
}

.lvg-identite .lvg-jaune .lvg-bord .vc_general.vc_btn3.sb-theme-btn:hover,
.lvg-identite .lvg-jaune .vc_general.vc_btn3.sb-theme-btn.sg-btn-outline:hover,
.lvg-identite .lvg-jaune .lvg-bord a.sg-btn:hover,
.lvg-identite .lvg-jaune a.sg-btn.lvg-bord:hover {
	background: var(--lvg-marine);
	background-image: none;
	border-color: var(--lvg-marine);
	color: #fff;
}

/* Boutons posés sur le marine : jaune plein, puis contour. */
.lvg-identite .lvg-marine .vc_general.vc_btn3.sb-theme-btn,
.lvg-identite .lvg-marine .vc_general.vc_btn3.sb-theme-btn.sg-btn-outline:hover,
.lvg-identite .lvg-marine a.sg-btn,
.lvg-identite .lvg-marine button.sg-btn {
	background: var(--lvg-jaune);
	background-image: none;
	border-color: var(--lvg-jaune);
	color: var(--lvg-marine);
}

.lvg-identite .lvg-marine .lvg-bord .vc_general.vc_btn3.sb-theme-btn,
.lvg-identite .lvg-marine .vc_general.vc_btn3.sb-theme-btn.sg-btn-outline,
.lvg-identite .lvg-marine .lvg-bord a.sg-btn,
.lvg-identite .lvg-marine a.sg-btn.lvg-bord {
	background: transparent;
	border-color: var(--lvg-jaune);
	color: var(--lvg-jaune);
}

.lvg-identite .lvg-marine .lvg-bord .vc_general.vc_btn3.sb-theme-btn:hover,
.lvg-identite .lvg-marine .lvg-bord a.sg-btn:hover {
	background: var(--lvg-jaune);
	color: var(--lvg-marine);
}

/* Bouton secondaire sur fond clair : contour seul. */
.lvg-identite .lvg-bord .vc_general.vc_btn3.sb-theme-btn,
.lvg-identite .lvg-bord a.sg-btn,
.lvg-identite a.sg-btn.lvg-bord {
	background: transparent;
	background-image: none;
	border-color: var(--lvg-marine);
	color: var(--lvg-marine);
}

.lvg-identite .lvg-bord .vc_general.vc_btn3.sb-theme-btn:hover,
.lvg-identite .lvg-bord a.sg-btn:hover,
.lvg-identite a.sg-btn.lvg-bord:hover {
	background: var(--lvg-marine);
	border-color: var(--lvg-marine);
	color: #fff;
	filter: none;
}

/* --------------------------------------------------------- Bandeau urgence */

.lvg-identite .lvg-marine.lvg-urgence,
.lvg-identite .lvg-urgence {
	align-items: center;
	background: var(--lvg-marine);
	color: #fff;
	padding-block: var(--lvg-urgence-haut, 22px) var(--lvg-urgence-bas, 22px);
}

.lvg-identite .lvg-urgence .vc_column_container > .vc_column-inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: auto;
	padding-block: 0;
}

/*
 * Le constructeur pose une marge basse sous chaque module : elle s'ajoutait
 * à la marge intérieure du bandeau et déséquilibrait les deux côtés.
 */
.lvg-identite .lvg-urgence .wpb_wrapper > *:last-child,
.lvg-identite .lvg-urgence .wpb_content_element:last-child,
.lvg-identite .lvg-urgence .wpb_text_column:last-child,
.lvg-identite .lvg-urgence .wpb_text_column:last-child > .wpb_wrapper > *:last-child,
.lvg-identite .lvg-urgence .lvg-urgence-message > *:last-child {
	margin-bottom: 0;
}

/*
 * Sur petit écran les colonnes s'empilent, et le bouton se retrouve collé
 * sous le message : les marges des modules ont été annulées juste au-dessus
 * pour équilibrer le bandeau en largeur. L'espace est donc rendu ici, qu'il
 * y ait deux colonnes ou un bouton posé sous le texte dans la même.
 */
@media (max-width: 782px) {
	.lvg-identite .lvg-urgence .vc_column_container + .vc_column_container,
	.lvg-identite .lvg-urgence .wpb_wrapper > .vc_btn3-container:not(:first-child) {
		margin-top: var(--lvg-urgence-empile, 18px);
	}
}

/*
 * L'accroche du bandeau n'est pas un titre de rubrique : elle se lit comme
 * une phrase, en bas de casse.
 */
.lvg-identite .lvg-urgence h2,
.lvg-identite .lvg-urgence h3,
.lvg-identite .lvg-urgence h4 {
	margin: 0 0 5px;
	font-size: var(--lvg-urgence-titre, 24px);
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: none;
	color: #fff;
}

/* ------------------------------------- Bandeau d'urgence : les messages
 *
 * Les messages se superposent dans une même case de grille : la hauteur du
 * bandeau est celle du plus grand, et ne saute pas d'un message à l'autre.
 */
.lvg-urgences {
	display: grid;
}

/*
 * Le message sortant s'efface d'abord, l'entrant paraît ensuite : deux
 * textes superposés à mi-fondu seraient illisibles.
 */
.lvg-urgence-message {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--lvg-urg-fondu, 600ms) ease, visibility 0s linear var(--lvg-urg-fondu, 600ms);
}

.lvg-urgence-message.is-active {
	opacity: 1;
	visibility: visible;
	transition-delay: var(--lvg-urg-fondu, 600ms), 0s;
}

/* Sans JavaScript, le premier message reste lisible. */
.lvg-urgences:not(.lvg-prete) .lvg-urgence-message:first-child {
	opacity: 1;
	visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
	.lvg-urgence-message {
		transition: none;
	}
}

.lvg-identite .lvg-urgence p {
	margin: 0;
	color: var(--lvg-sur-marine);
	font-size: var(--lvg-urgence-texte, 16px);
	line-height: 1.5;
}

/*
 * Image ronde isolée. Les photos du médaillon à fondu en sont exclues :
 * elles ont déjà leur cercle, et le filet blanc leur en ajoutait un second.
 */
.lvg-identite .lvg-rond .wpb_single_image img,
.lvg-identite .lvg-rond img:not(.lvg-medaillon-photo) {
	aspect-ratio: 1;
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: 50%;
	border: 6px solid #fff;
}

/* ------------------------------------------------------------- Médaillons */

.lvg-identite .lvg-medaillons .wpb_single_image img {
	aspect-ratio: 1;
	display: block;
	/* Diamètre donné directement, et marges automatiques pour le centrage :
	   la largeur ne dépend plus de celle de la figure qui l'enveloppe. */
	width: var(--lvg-med-taille, 170px);
	max-width: 100%;
	height: auto;
	margin-inline: auto;
	object-fit: cover;
	border-radius: 50%;
}

.lvg-identite .lvg-medaillons .wpb_single_image {
	text-align: center;
}

.lvg-identite .lvg-medaillons .wpb_text_column,
.lvg-identite .lvg-medaillons .wpb_text_column p {
	margin-bottom: 0;
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--lvg-marine);
}

/* ------------------------------------------------------------------ Cartes
 *
 * Une carte par colonne : fond blanc sur la bande crème, filet jaune court
 * posé en haut à gauche, et le lien en bas, aligné d'une carte à l'autre
 * quel que soit le nombre de lignes de texte.
 */

/*
 * Les colonnes du builder portent déjà 15 px de marge intérieure : la carte
 * est dessinée un cran plus bas, sur .wpb_wrapper, pour garder la gouttière
 * entre les colonnes.
 */
/* Les deux cartes d'une rangée ont la même hauteur : les liens s'alignent. */
.lvg-identite .lvg-cartes .vc_column_container {
	display: flex;
	flex-direction: column;
}

.lvg-identite .lvg-cartes .vc_column_container > .vc_column-inner {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	/* La gouttière entre deux lignes de cartes, sans marge de ligne. */
	padding-bottom: var(--lvg-carte-ecart, 30px);
}

.lvg-identite .lvg-cartes .vc_column_container > .vc_column-inner > .wpb_wrapper {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	box-sizing: border-box;
	background: var(--lvg-carte-fond, #fff);
	border: 0;
	padding: var(--lvg-carte-pad, 26px 30px 28px);
}

/* Le filet jaune : court, en haut à gauche, à l'intérieur de la carte. */
.lvg-identite .lvg-cartes .vc_column_container > .vc_column-inner > .wpb_wrapper::before {
	content: "";
	display: block;
	flex: none;
	width: var(--lvg-carte-filet, 34px);
	height: 4px;
	margin-bottom: 16px;
	background: var(--lvg-jaune);
}

/*
 * Les modules de la carte ne gardent pas la marge basse du constructeur :
 * l'espace entre le texte et le lien est donné une seule fois, plus bas.
 */
.lvg-identite .lvg-cartes .vc_column_container > .vc_column-inner > .wpb_wrapper > *,
.lvg-identite .lvg-cartes .wpb_text_column p:last-child {
	margin-bottom: 0;
}

/*
 * Les lignes de cartes se suivent : la bande donne déjà l'air en haut et en
 * bas, deux marges intérieures de ligne l'auraient doublé.
 */
.lvg-identite .lvg-cartes {
	padding-block: 0;
}

/* Respiration sous une ligne de cartes qui n'est pas déjà dans une bande. */
.lvg-identite .lvg-cartes:not(.lvg-creme):not(.lvg-jaune):not(.lvg-marine) {
	padding-block-end: 26px;
}

.lvg-identite .lvg-cartes .vc_column_container > .vc_column-inner > .wpb_wrapper > h2,
.lvg-identite .lvg-cartes .vc_column_container > .vc_column-inner > .wpb_wrapper > h3,
.lvg-identite .lvg-cartes .vc_column_container > .vc_column-inner > .wpb_wrapper > h4,
.lvg-identite .lvg-cartes h3,
.lvg-identite .lvg-cartes h4 {
	margin: 0 0 var(--lvg-carte-titre-bas, 12px);
	font-size: var(--lvg-carte-titre, 18px);
	letter-spacing: .01em;
	color: var(--lvg-marine);
}

.lvg-identite .lvg-cartes p {
	margin: 0;
	color: var(--lvg-doux);
	font-size: var(--lvg-carte-texte, 14px);
	line-height: 1.75;
}

/*
 * Icône de carte : posée au fil du texte, en haut à droite, le texte
 * venant se ranger autour. Le flottement évite tout recouvrement, quelle
 * que soit la longueur du titre.
 */
.lvg-identite .lvg-carte-icone {
	float: right;
	width: var(--lvg-carte-icone, 46px);
	height: var(--lvg-carte-icone, 46px);
	margin: 0 0 14px 20px;
	color: var(--lvg-carte-icone-couleur, var(--lvg-marine));
}

.lvg-identite .lvg-carte-icone svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/*
 * Icône pleine plutôt que dessinée au trait : le glyphe porte lui-même sa
 * forme, il se remplit de la couleur courante et ne reçoit pas de contour.
 */
.lvg-identite .lvg-icone-pleine svg {
	fill: currentColor;
	stroke: none;
}

/*
 * Glyphe plein évidé : rempli de blanc et cerclé de la couleur courante.
 * Le contour ne grossit pas avec l'icône — il est donné en pixels, et le
 * cadre du dessin est élargi d'autant pour qu'il ne soit pas rogné.
 */
.lvg-identite .lvg-icone-blanche svg {
	fill: var(--lvg-icone-fond, #fff);
	stroke: currentColor;
	stroke-width: var(--lvg-icone-trait, 2px);
}

.lvg-identite .lvg-icone-blanche svg path {
	vector-effect: non-scaling-stroke;
}

/*
 * Icône au trait, pour les grandes icônes de rubrique. Le trait est donné
 * en pixels d'écran et non dans le repère du dessin : l'icône s'agrandit
 * sans s'épaissir, là où un glyphe plein devient vite un aplat. D'où aussi
 * une taille par défaut plus généreuse que l'icône de carte ordinaire.
 *
 * Une pointe de flèche pleine — le recyclage en a trois — porte son
 * remplissage en attribut sur son tracé, ce qui l'emporte sur le fill
 * hérité d'ici : elle reste pleine sans règle supplémentaire.
 */
.lvg-identite .lvg-carte-icone.lvg-icone-fine {
	width: var(--lvg-carte-icone, 86px);
	height: var(--lvg-carte-icone, 86px);
	margin: 0 0 18px 26px;
}

.lvg-identite .lvg-icone-fine svg {
	fill: none;
	stroke: currentColor;
	stroke-width: var(--lvg-icone-fin, 3.2px);
}

.lvg-identite .lvg-icone-fine svg * {
	vector-effect: non-scaling-stroke;
}

@media (max-width: 782px) {
	.lvg-identite .lvg-carte-icone.lvg-icone-fine {
		width: var(--lvg-carte-icone-mobile, 64px);
		height: var(--lvg-carte-icone-mobile, 64px);
		margin-left: 20px;
	}
}

/* Le lien reprend sous l'icône plutôt qu'à côté. */
.lvg-identite .lvg-cartes .vc_btn3-container {
	clear: both;
}

/*
 * Plan intégré : il prend toute la largeur de sa colonne et garde ses
 * proportions, le cadre d'origine étant donné en pixels.
 */
.lvg-identite .lvg-plan {
	clear: both;
	margin: var(--lvg-plan-haut, 20px) 0 0;
	line-height: 0;
}

.lvg-identite .lvg-plan iframe {
	display: block;
	width: 100%;
	aspect-ratio: var(--lvg-plan, 16 / 10);
	height: auto;
	max-width: 100%;
	border: 0;
	filter: var(--lvg-plan-filtre, none);
}

/* Le lien suit le texte de près, comme sur la maquette. */
.lvg-identite .lvg-cartes .vc_btn3-container {
	margin: var(--lvg-carte-lien, 18px) 0 0;
	padding: 0;
	line-height: 1;
}

/*
 * Pas un bouton mais un lien souligné de jaune : le cadre bleu alourdissait
 * la carte et répétait celui du bouton de la rangée de titre.
 */
.lvg-identite .lvg-cartes .vc_general.vc_btn3.sb-theme-btn,
.lvg-identite .lvg-cartes .vc_general.vc_btn3,
.lvg-identite .lvg-cartes .lvg-bord .vc_general.vc_btn3.sb-theme-btn,
.lvg-identite .lvg-cartes a.sg-btn,
.lvg-identite .lvg-cartes button.sg-btn {
	display: inline-block;
	background: none !important;
	border: 0 !important;
	border-bottom: 2px solid var(--lvg-jaune) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 0 5px !important;
	color: var(--lvg-marine) !important;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	transition: border-color .2s ease, color .2s ease;
}

.lvg-identite .lvg-cartes .vc_general.vc_btn3.sb-theme-btn:hover,
.lvg-identite .lvg-cartes .vc_general.vc_btn3:hover,
.lvg-identite .lvg-cartes .lvg-bord .vc_general.vc_btn3.sb-theme-btn:hover,
.lvg-identite .lvg-cartes a.sg-btn:hover,
.lvg-identite .lvg-cartes button.sg-btn:hover {
	border-bottom-color: var(--lvg-marine) !important;
	color: var(--lvg-marine) !important;
}

@media (max-width: 782px) {
	.lvg-identite .lvg-cartes .vc_column_container > .vc_column-inner {
		padding-bottom: 20px;
	}
}

/* ------------------------------------------------------ Pages intérieures
 *
 * Quatre blocs pour les pages de second niveau. Tous se posent par une
 * classe, le contenu restant au constructeur.
 */

/* ----- Le bandeau de page : sur-titre, titre, chapeau.
 *
 * À poser sur la première ligne de la page, à côté de lvg-marine, et de
 * lvg-bande-photo lorsqu'une photo l'accompagne.
 */
.lvg-identite .lvg-page-tete {
	/*
	 * La hauteur du bandeau vient d'une hauteur minimale, et non d'une
	 * marge haute : la photo de fond garde sa place, et le texte reste
	 * près du bord supérieur au lieu de flotter au milieu.
	 */
	/*
	 * « important » : une marge posée dans l'onglet Design de la ligne est
	 * écrite ainsi par le constructeur, et passerait devant. La hauteur du
	 * bandeau se règle ici, par --lvg-page-hauteur.
	 */
	padding-block: var(--lvg-page-haut, 36px) var(--lvg-page-bas, 48px) !important;
	min-height: var(--lvg-page-hauteur, 360px);
	align-items: flex-start;
}

.lvg-identite .lvg-page-tete > .vc_column_container,
.lvg-identite .lvg-page-tete > .wpb_column {
	align-self: flex-start;
}

.lvg-identite .lvg-page-tete h1,
.lvg-identite .lvg-page-tete h2 {
	margin: 0;
	max-width: var(--lvg-page-titre-large, 22ch);
	font-size: var(--lvg-page-titre, clamp(30px, 4.4vw, 46px));
	line-height: 1.15;
	/* Les lignes se répartissent au mieux : plus de mot seul en dernière. */
	text-wrap: balance;
}

/* Le chapeau se lit sur une colonne étroite, comme dans lvg-zones. */
.lvg-identite .lvg-page-tete .wpb_text_column,
.lvg-identite .lvg-page-tete p {
	max-width: var(--lvg-page-large, 620px);
}

.lvg-identite .lvg-page-tete .lvg-chapo,
.lvg-identite .lvg-page-tete .lvg-chapo p {
	margin-top: 20px;
	font-size: var(--lvg-page-chapo, 17px);
	line-height: 1.75;
}

/* La marge du dernier module s'ajoutait à celle de la bande. */
.lvg-identite .lvg-page-tete .vc_column_container .wpb_wrapper > *:last-child {
	margin-bottom: 0;
}

/* Fil d'ariane : une ligne de liens discrets au-dessus du titre. */
.lvg-identite .lvg-fil,
.lvg-identite .lvg-fil p {
	margin: 0 0 var(--lvg-fil-bas, 26px);
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgb(255 255 255 / .55);
}

.lvg-identite .lvg-fil a {
	color: inherit;
	text-decoration: none;
}

.lvg-identite .lvg-fil a:hover {
	color: var(--lvg-jaune);
}

/* ----- La frise chronologique.
 *
 * Une liste écrite dans un module Texte, en mode code :
 *   <ol class="lvg-frise">
 *     <li><span class="lvg-date">1872</span>
 *         <h3>La création</h3><p>…</p></li>
 *   </ol>
 */
.lvg-identite .lvg-frise {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lvg-identite .lvg-frise > li {
	display: grid;
	grid-template-columns: var(--lvg-frise-date, 172px) minmax(0, 1fr);
	gap: 0 var(--lvg-frise-ecart, 34px);
	padding: var(--lvg-frise-pad, 28px) 0;
	border-top: 1px solid var(--lvg-frise-filet, var(--lvg-bordure));
}

.lvg-identite .lvg-frise > li:last-child {
	border-bottom: 1px solid var(--lvg-frise-filet, var(--lvg-bordure));
}

.lvg-identite .lvg-marine .lvg-frise {
	--lvg-frise-filet: rgb(255 255 255 / .16);
}

.lvg-identite .lvg-frise .lvg-date {
	position: relative;
	display: block;
	padding-left: 26px;
	font-size: var(--lvg-frise-taille, 26px);
	font-weight: 800;
	line-height: 1.1;
	color: var(--lvg-marine);
	font-variant-numeric: tabular-nums;
}

.lvg-identite .lvg-marine .lvg-frise .lvg-date {
	color: #fff;
}

/* Le tiret jaune tient lieu de repère sur la frise. */
.lvg-identite .lvg-frise .lvg-date::before {
	content: "";
	position: absolute;
	left: 0;
	top: .42em;
	width: 14px;
	height: 3px;
	background: var(--lvg-jaune);
}

.lvg-identite .lvg-frise h3,
.lvg-identite .lvg-frise h4 {
	margin: 0 0 8px;
	font-size: var(--lvg-frise-titre, 19px);
	line-height: 1.3;
	color: var(--lvg-marine);
}

.lvg-identite .lvg-marine .lvg-frise h3,
.lvg-identite .lvg-marine .lvg-frise h4 {
	color: #fff;
}

.lvg-identite .lvg-frise p {
	margin: 0;
	max-width: 62ch;
	color: var(--lvg-doux);
}

.lvg-identite .lvg-marine .lvg-frise p {
	color: var(--lvg-sur-marine);
}

/* ----- La citation.
 *
 * Dans un module Texte, en mode code :
 *   <blockquote class="lvg-citation">…</blockquote>
 *   <p class="lvg-citation-source">Louise Weiss</p>
 */
.lvg-identite .lvg-citation {
	margin: 0;
	max-width: var(--lvg-citation-large, 780px);
	border-left: 3px solid var(--lvg-jaune);
	padding: 0 0 0 var(--lvg-citation-pad, 32px);
	font-style: italic;
	font-size: var(--lvg-citation-taille, clamp(19px, 2.4vw, 26px));
	line-height: 1.55;
	color: var(--lvg-marine);
}

.lvg-identite .lvg-marine .lvg-citation {
	color: #fff;
}

.lvg-identite .lvg-citation p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.lvg-identite .lvg-citation-source,
.lvg-identite .lvg-citation-source p {
	margin: 20px 0 0;
	padding-left: calc(var(--lvg-citation-pad, 32px) + 3px);
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lvg-jaune-fonce);
}

.lvg-identite .lvg-marine .lvg-citation-source,
.lvg-identite .lvg-marine .lvg-citation-source p {
	color: var(--lvg-jaune);
}

/* ----- L'équipe : portrait rond, nom, fonction.
 *
 * À poser sur la ligne ; une colonne par personne, chacune avec un module
 * Image puis un module Texte.
 */
.lvg-identite .lvg-equipe {
	padding-block: var(--lvg-equipe-haut, 10px) var(--lvg-equipe-bas, 10px);
}

.lvg-identite .lvg-equipe .wpb_single_image {
	margin-bottom: var(--lvg-equipe-ecart, 18px);
	text-align: center;
}

/* Le portrait est rond qu'il vienne d'un module Image ou d'une balise
   écrite à la main dans un module Texte. */
.lvg-identite .lvg-equipe .wpb_single_image img,
.lvg-identite .lvg-equipe .wpb_text_column img {
	aspect-ratio: 1;
	display: block;
	width: var(--lvg-equipe-taille, 190px);
	max-width: 100%;
	height: auto;
	margin-inline: auto;
	object-fit: cover;
	/* Les portraits sont cadrés en hauteur : on garde le haut du cliché. */
	object-position: var(--lvg-equipe-cadrage, center top);
	border-radius: 50%;
}

.lvg-identite .lvg-equipe .wpb_text_column img {
	margin-bottom: var(--lvg-equipe-ecart, 18px);
}

.lvg-identite .lvg-equipe .wpb_text_column,
.lvg-identite .lvg-equipe .wpb_text_column p {
	margin-bottom: 0;
	text-align: center;
}

.lvg-identite .lvg-equipe .lvg-nom,
.lvg-identite .lvg-equipe strong {
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--lvg-marine);
}

.lvg-identite .lvg-equipe .lvg-role {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: var(--lvg-doux);
}

/*
 * Une page bâtie en bandes pleine largeur donne elle-même son air : le
 * bandeau vient au contact du menu, et la dernière bande au contact du
 * pied de page. Sans cela, deux bandes blanches les encadrent.
 * Règle séparée : « :has » n'est pas compris partout.
 */
.lvg-identite .content-container:has(.lvg-page-tete) {
	padding-block: 0;
	padding-top: 0;
	padding-bottom: 0;
}

@media (max-width: 782px) {
	.lvg-identite .lvg-page-tete {
		padding-block: 30px 38px !important;
		/* Sur mobile, le texte occupe déjà la hauteur : rien à réserver. */
		min-height: var(--lvg-page-hauteur-mobile, 0);
	}

	.lvg-identite .lvg-frise > li {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	.lvg-identite .lvg-equipe .wpb_single_image {
		margin-bottom: 14px;
	}
}

/* -------------------------------------------------- Bande à photo de fond
 *
 * Une photo pleine largeur derrière la bande, masquée à gauche par un voile
 * marine pour que le texte reste lisible, et découverte à droite.
 *
 * À poser sur la ligne, à côté de lvg-marine. La photo se choisit dans
 * l'onglet Design de la ligne (Image de fond, affichage « Couvrir »), ou
 * ici même avec --lvg-fond-photo.
 *
 * Réglages, dans le champ CSS de la ligne :
 *   --lvg-fond-voile   opacité du voile, de 0 à 1
 *   --lvg-fond-plein   jusqu'où il reste opaque
 *   --lvg-fond-fin     où il s'efface tout à fait
 *   --lvg-fond-cadrage position de la photo dans le cadre
 */
.lvg-identite .lvg-bande-photo {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* Couleur seule : la forme courte effacerait l'image du constructeur. */
	background-color: var(--lvg-marine);
	background-image: var(--lvg-fond-photo, none);
	background-size: cover;
	background-position: var(--lvg-fond-cadrage, center);
	background-repeat: no-repeat;
}

.lvg-identite .lvg-bande-photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(
		90deg,
		rgb(var(--lvg-marine-rvb) / var(--lvg-fond-voile, .93)) 0,
		rgb(var(--lvg-marine-rvb) / var(--lvg-fond-voile, .93)) var(--lvg-fond-plein, 38%),
		rgb(var(--lvg-marine-rvb) / 0) var(--lvg-fond-fin, 88%)
	);
}

/* Le contenu passe devant le voile. */
.lvg-identite .lvg-bande-photo > * {
	position: relative;
	z-index: 1;
}

@media (max-width: 782px) {
	/*
	 * Empilée, la colonne de texte couvre toute la largeur : un dégradé
	 * horizontal la laisserait illisible sur la moitié droite.
	 */
	.lvg-identite .lvg-bande-photo::before {
		background: rgb(var(--lvg-marine-rvb) / var(--lvg-fond-voile-mobile, .9));
	}
}

/* ------------------------------------------------------- Bande des zones
 *
 * « Zones d'intervention » : une bande marine où le texte garde une largeur
 * de lecture plutôt que de courir d'un bord à l'autre, et dont le sur-titre
 * reste jaune.
 *
 * À poser sur la ligne, à côté de lvg-marine.
 */
.lvg-identite .lvg-zones {
	padding-block: var(--lvg-zones-haut, 72px) var(--lvg-zones-bas, 48px);
}

/*
 * La colonne entière est bridée, pas seulement les paragraphes : selon le
 * module employé, le texte n'est pas toujours dans un <p>. La colonne qui
 * porte la carte en est exclue — lvg-large — sinon l'image serait rognée.
 */
.lvg-identite .lvg-zones .vc_column_container:first-child > .vc_column-inner > .wpb_wrapper,
.lvg-identite .lvg-zones .vc_column_container:first-child h1,
.lvg-identite .lvg-zones .vc_column_container:first-child h2,
.lvg-identite .lvg-zones .vc_column_container:first-child h3,
.lvg-identite .lvg-zones .vc_column_container:first-child .wpb_text_column,
.lvg-identite .lvg-zones .vc_column_container:first-child p {
	max-width: var(--lvg-zones-largeur, 640px);
}

.lvg-identite .lvg-zones .lvg-large,
.lvg-identite .lvg-zones .lvg-large .wpb_wrapper,
.lvg-identite .lvg-zones .lvg-large .wpb_text_column,
.lvg-identite .lvg-zones .lvg-large p {
	max-width: none;
}

.lvg-identite .lvg-zones .lvg-surtitre,
.lvg-identite .lvg-zones .lvg-surtitre p {
	margin-bottom: var(--lvg-zones-surtitre, 18px);
}

.lvg-identite .lvg-zones h1,
.lvg-identite .lvg-zones h2 {
	margin: 0 0 var(--lvg-zones-titre-bas, 22px);
}

.lvg-identite .lvg-zones .wpb_text_column {
	margin-bottom: var(--lvg-zones-texte-bas, 28px);
}

.lvg-identite .lvg-zones .vc_btn3-container {
	margin-bottom: 0;
}

/* Bouton un cran plus discret que celui de l'en-tête. */
.lvg-identite .lvg-zones .vc_general.vc_btn3.sb-theme-btn,
.lvg-identite .lvg-zones .vc_general.vc_btn3,
.lvg-identite .lvg-zones a.sg-btn,
.lvg-identite .lvg-zones button.sg-btn {
	padding: var(--lvg-zones-btn, 14px 26px) !important;
	font-size: var(--lvg-zones-btn-texte, 12px);
	letter-spacing: .08em;
}

@media (max-width: 782px) {
	.lvg-identite .lvg-zones {
		padding-block: 48px 44px;
	}

	/*
	 * Les colonnes s'empilent : la carte venait au contact du bouton, qui
	 * n'a pas de marge basse au bureau.
	 */
	.lvg-identite .lvg-zones .vc_column_container:not(:last-child) {
		margin-bottom: var(--lvg-zones-empile, 34px);
	}
}

/*
 * Légende : la petite ligne sous une image ou un bloc — adresses sous la
 * carte, crédit, précision. À poser sur le module de texte.
 *
 * La couleur suit le fond par défaut : claire sur le marine, sombre sur le
 * crème. Les deux réglages la changent sans toucher au reste.
 */
.lvg-identite .lvg-legende,
.lvg-identite .lvg-legende.wpb_text_column,
.lvg-identite .lvg-legende p {
	/* Une légende suit la largeur de ce qu'elle légende, pas la largeur
	   de lecture de la bande : sinon elle se décale vers la gauche. */
	max-width: none;
	margin-bottom: 0;
	font-size: var(--lvg-legende-taille, 13px);
	line-height: 1.6;
	color: var(--lvg-legende-couleur, var(--lvg-doux));
}

.lvg-identite .lvg-marine .lvg-legende,
.lvg-identite .lvg-marine .lvg-legende p {
	color: var(--lvg-legende-couleur, var(--lvg-sur-marine));
}

.lvg-identite .lvg-jaune .lvg-legende,
.lvg-identite .lvg-jaune .lvg-legende p {
	color: var(--lvg-legende-couleur, var(--lvg-or-sombre));
}

/* Alignements, à poser sur un module ou une colonne. */
.lvg-identite .lvg-centre,
.lvg-identite .lvg-centre p {
	text-align: center;
}

.lvg-identite .lvg-droite,
.lvg-identite .lvg-droite p {
	text-align: right;
}

/*
 * Image posée dans un module Texte, au-dessus d'un titre : elle prend
 * toute la largeur de sa colonne et laisse un blanc sous elle.
 */
.lvg-identite .lvg-visuel {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0 0 var(--lvg-visuel-bas, 20px);
}

/*
 * Rangée de contenu courante : elle respire comme une bande colorée, sans
 * en être une. À poser sur les lignes à fond blanc, pour qu'elles ne
 * touchent pas la bande qui les précède.
 */
.lvg-identite .lvg-section {
	padding-block: var(--lvg-section-haut, 56px) var(--lvg-section-bas, 56px);
}

@media (max-width: 782px) {
	.lvg-identite .lvg-section {
		padding-block: 40px;
	}
}

/*
 * Une ligne mise en avant : un numéro, une adresse électronique. Sur une
 * bande marine, le lien se souligne de jaune.
 */
.lvg-identite .lvg-fort,
.lvg-identite .lvg-fort p {
	margin: 0;
	font-size: var(--lvg-fort, 22px);
	font-weight: 700;
	line-height: 1.4;
	color: var(--lvg-marine);
}

.lvg-identite .lvg-marine .lvg-fort,
.lvg-identite .lvg-marine .lvg-fort p {
	color: #fff;
}

.lvg-identite .lvg-fort a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--lvg-jaune);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.lvg-identite .lvg-fort a:hover {
	text-decoration-color: currentColor;
}

/*
 * Largeur de lecture limitée, à poser sur un module ou une colonne quand
 * son texte court sur toute la largeur de la bande.
 */
.lvg-identite .lvg-etroit,
.lvg-identite .lvg-etroit p {
	max-width: var(--lvg-etroit, 640px);
}

/* --------------------------------------------------- Entrées encadrées
 *
 * « Vous êtes… » : une colonne d'introduction nue, puis des encadrés
 * cerclés de marine. Le lien de chaque encadré, doré, se pose en bas :
 * les trois liens s'alignent même si les textes n'ont pas la même longueur.
 *
 * À poser sur la ligne, à la place de lvg-cartes.
 */
.lvg-identite .lvg-entrees {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	padding-block: var(--lvg-entrees-haut, 56px) 0;
}

.lvg-identite .lvg-entrees > *:has(> .vc_column_container) {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	width: 100%;
}

.lvg-identite .lvg-entrees .vc_column_container {
	display: flex;
	flex-direction: column;
	align-self: stretch !important;
}

.lvg-identite .lvg-entrees .vc_column_container > .vc_column-inner {
	display: flex !important;
	flex-direction: column !important;
	flex-grow: 1;
	height: 100% !important;
	padding-bottom: var(--lvg-entree-ecart, 30px);
}

/* Les modules ne gardent pas la marge basse du constructeur. */
.lvg-identite .lvg-entrees .vc_column_container > .vc_column-inner > .wpb_wrapper > *,
.lvg-identite .lvg-entrees .wpb_text_column p:last-child {
	margin-bottom: 0;
}

/* L'encadré : toutes les colonnes sauf la première. */
.lvg-identite .lvg-entrees .vc_column_container:not(:first-child) > .vc_column-inner > .wpb_wrapper {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	border: var(--lvg-entree-trait, 2px) solid var(--lvg-marine);
	padding: var(--lvg-entree-pad, 32px 34px 30px);
	/*
	 * Carré comme sur la maquette, mais c'est un minimum : un encadré
	 * dont le texte dépasse s'allonge, et les autres le suivent pour que
	 * la rangée garde une ligne de base commune.
	 */
	aspect-ratio: var(--lvg-entree-forme, 1);
	height: auto;
	flex-grow: 1;
}

/*
 * Icône en tête d'encadré : elle occupe le haut du carré et fait
 * reconnaître l'interlocuteur avant la lecture. À poser dans un module
 * Texte placé avant le titre.
 */
.lvg-identite .lvg-entrees .lvg-entree-icone {
	display: block;
	width: var(--lvg-entree-icone, 46px);
	height: var(--lvg-entree-icone, 46px);
	margin: 0 0 var(--lvg-entree-icone-bas, 16px);
	color: var(--lvg-entree-icone-couleur, var(--lvg-marine));
}

.lvg-identite .lvg-entrees .lvg-entree-icone svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Glyphe plein plutôt que dessiné au trait. */
.lvg-identite .lvg-entrees .lvg-entree-icone.lvg-icone-pleine svg {
	fill: currentColor;
	stroke: none;
}

/* La colonne d'introduction : titre plus grand, pas de cadre. */
.lvg-identite .lvg-entrees .vc_column_container:first-child h1,
.lvg-identite .lvg-entrees .vc_column_container:first-child h2,
.lvg-identite .lvg-entrees .vc_column_container:first-child h3 {
	margin: 0 0 var(--lvg-entree-intro-bas, 20px);
	font-size: var(--lvg-entree-intro, 30px);
	line-height: 1.2;
	color: var(--lvg-marine);
}

.lvg-identite .lvg-entrees h3,
.lvg-identite .lvg-entrees h4 {
	margin: 0 0 var(--lvg-entree-titre-bas, 16px);
	font-size: var(--lvg-entree-titre, 19px);
	line-height: 1.3;
	color: var(--lvg-marine);
}

.lvg-identite .lvg-entrees p {
	margin: 0;
	color: var(--lvg-doux);
	font-size: var(--lvg-entree-texte, 13px);
	line-height: 1.7;
}

.lvg-identite .lvg-entrees .vc_column_container:first-child p {
	font-size: var(--lvg-entree-intro-texte, 14px);
	line-height: 1.75;
}

/* Le lien se pose au bas de l'encadré : les trois s'alignent. */
.lvg-identite .lvg-entrees .vc_btn3-container,
.lvg-identite .lvg-entrees .vc_btn3-container.vc_btn3-inline {
	display: block;
	margin: auto 0 0 !important;
	padding: var(--lvg-entree-lien, 26px) 0 0;
	line-height: 1;
	text-align: left;
}

/* Lien doré, sans cadre ni soulignement. */
.lvg-identite .lvg-entrees .vc_general.vc_btn3.sb-theme-btn,
.lvg-identite .lvg-entrees .vc_general.vc_btn3,
.lvg-identite .lvg-entrees .lvg-bord .vc_general.vc_btn3.sb-theme-btn,
.lvg-identite .lvg-entrees a.sg-btn,
.lvg-identite .lvg-entrees button.sg-btn {
	display: inline-block;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	color: var(--lvg-jaune-fonce) !important;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	transition: color .2s ease;
}

.lvg-identite .lvg-entrees .vc_general.vc_btn3.sb-theme-btn:hover,
.lvg-identite .lvg-entrees .vc_general.vc_btn3:hover,
.lvg-identite .lvg-entrees a.sg-btn:hover,
.lvg-identite .lvg-entrees button.sg-btn:hover {
	background: none !important;
	color: var(--lvg-marine) !important;
	filter: none;
}

@media (max-width: 782px) {
	.lvg-identite .lvg-entrees .vc_column_container > .vc_column-inner {
		padding-bottom: 20px;
	}

	.lvg-identite .lvg-entrees .vc_btn3-container,
	.lvg-identite .lvg-entrees .vc_btn3-container.vc_btn3-inline {
		padding-top: 18px;
	}

	/* Empilés, les encadrés font toute la largeur : carrés, ils seraient
	   démesurés. Ils reprennent la hauteur de leur contenu. */
	.lvg-identite .lvg-entrees .vc_column_container:not(:first-child) > .vc_column-inner > .wpb_wrapper {
		aspect-ratio: auto;
	}
}

/* ------------------------------------------- Rangée de titre d'une rubrique
 *
 * Le sur-titre et le titre à gauche, un bouton facultatif à droite, centré
 * sur la hauteur du titre. Le bouton se pose dans une seconde colonne
 * (ligne 2/3 + 1/3) : la colonne vide ne se voit pas s'il n'y en a pas.
 */
.lvg-identite .lvg-tete {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

/*
 * Une rangée de titre qui annonce des cartes s'en rapproche : c'est leur
 * bande qui donne l'air en dessous. Seule, en revanche — un appel en pied
 * de page, par exemple —, elle garde la marge de sa bande, sans quoi elle
 * aurait plus d'espace au-dessus qu'en dessous.
 * Règles séparées : « :has » n'est pas compris partout.
 */
.lvg-identite .lvg-tete:has(+ .lvg-cartes) {
	padding-bottom: var(--lvg-tete-bas, 26px);
}

.lvg-identite .lvg-tete:has(+ .lvg-entrees) {
	padding-bottom: var(--lvg-tete-bas, 26px);
}

/*
 * Selon le réglage de la ligne, le thème glisse parfois un conteneur entre
 * la ligne et ses colonnes : sans cette règle, les colonnes gardaient la
 * hauteur de leur contenu et le bouton ne pouvait pas descendre. Règle
 * séparée : « :has » n'est pas compris partout, et un sélecteur inconnu
 * dans une liste ferait tomber toute la règle.
 */
.lvg-identite .lvg-tete > *:has(> .vc_column_container) {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	width: 100%;
}

/*
 * La colonne prend la hauteur de la rangée. Le constructeur pose son
 * propre alignement sur ces colonnes selon le réglage de la ligne, d'où
 * les « important » : sans hauteur, le bouton n'a nulle part où descendre.
 */
.lvg-identite .lvg-tete .vc_column_container {
	display: flex;
	flex-direction: column;
	align-self: stretch !important;
}

.lvg-identite .lvg-tete .vc_column_container > .vc_column-inner {
	display: flex !important;
	flex-direction: column !important;
	flex-grow: 1;
	height: 100% !important;
	justify-content: center;
}

/* La colonne du bouton s'aligne sur le bas du titre. */
.lvg-identite .lvg-tete .vc_column_container:not(:first-child) > .vc_column-inner {
	justify-content: flex-end !important;
}

/*
 * Le sur-titre et le titre forment un seul bloc : la marge basse que le
 * constructeur pose sous chaque module les écartait de 35 px.
 */
.lvg-identite .lvg-tete .vc_column_container .wpb_wrapper > * {
	margin-bottom: 0;
}

.lvg-identite .lvg-tete .vc_column_container .wpb_wrapper > .wpb_text_column {
	margin-bottom: var(--lvg-tete-ecart, 8px);
}

.lvg-identite .lvg-tete .vc_column_container .wpb_wrapper > *:last-child,
.lvg-identite .lvg-tete .wpb_text_column p:last-child {
	margin-bottom: 0;
}

.lvg-identite .lvg-tete h1,
.lvg-identite .lvg-tete h2,
.lvg-identite .lvg-tete h3 {
	margin: 0;
}

/* Le bouton de la rangée de titre : cerclé de marine, plein au survol.
   Les deux modules de bouton sont visés : celui du constructeur et celui
   du thème. */
.lvg-identite .lvg-tete .vc_general.vc_btn3.sb-theme-btn,
.lvg-identite .lvg-tete .vc_general.vc_btn3,
.lvg-identite .lvg-tete a.sg-btn,
.lvg-identite .lvg-tete button.sg-btn {
	background: none !important;
	border: 2px solid var(--lvg-marine) !important;
	border-radius: 0 !important;
	color: var(--lvg-marine) !important;
	transition: background-color .2s ease, color .2s ease;
}

.lvg-identite .lvg-tete .vc_general.vc_btn3.sb-theme-btn:hover,
.lvg-identite .lvg-tete .vc_general.vc_btn3:hover,
.lvg-identite .lvg-tete a.sg-btn:hover,
.lvg-identite .lvg-tete button.sg-btn:hover {
	background: var(--lvg-marine) !important;
	color: #fff !important;
	filter: none;
}

/*
 * La colonne du bouton : collée à droite, sans marge basse. Le
 * constructeur pose « vc_btn3-inline » sur l'enveloppe du bouton, qui se
 * réduit alors à sa largeur : un alignement à droite n'y changeait rien.
 */
.lvg-identite .lvg-tete .vc_column_container:not(:first-child) .vc_btn3-container,
.lvg-identite .lvg-tete .vc_column_container:not(:first-child) .vc_btn3-container.vc_btn3-inline {
	display: block;
	width: 100%;
	margin: 0;
	text-align: right;
}

/*
 * …et rien ne traîne sous lui : la marge basse du module, celle de son
 * enveloppe et la marge intérieure de la colonne laissaient la boîte
 * descendre sans le bouton.
 */
.lvg-identite .lvg-tete .vc_column_container > .vc_column-inner,
.lvg-identite .lvg-tete .vc_column_container > .vc_column-inner > .wpb_wrapper,
.lvg-identite .lvg-tete .vc_column_container:not(:first-child) .vc_btn3-container,
.lvg-identite .lvg-tete .vc_column_container:not(:first-child) .vc_general.vc_btn3 {
	margin-bottom: 0 !important;
	padding-bottom: 0;
}

.lvg-identite .lvg-tete .vc_column_container:not(:first-child) .vc_general.vc_btn3 {
	/* Le bouton garde la sienne : elle fait sa hauteur. */
	padding-bottom: 13px;
}

@media (max-width: 782px) {
	.lvg-identite .lvg-tete .vc_column_container:not(:first-child) .vc_btn3-container,
	.lvg-identite .lvg-tete .vc_column_container:not(:first-child) .vc_btn3-container.vc_btn3-inline {
		margin-top: 20px;
		text-align: left;
	}
}

/* --------------------------------------------------------------- Chiffres */

.lvg-identite .lvg-chiffres {
	background: var(--lvg-jaune);
	color: var(--lvg-marine);
	padding-block: 44px;
	text-align: center;
}

.lvg-identite .lvg-chiffres h2,
.lvg-identite .lvg-chiffres h3 {
	margin: 0;
	font-size: 50px;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--lvg-marine);
	/* Chiffres de largeur fixe : le nombre ne tressaute pas pendant qu'il monte. */
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

/* Compteur posé ailleurs que dans une ligne de chiffres clés. */
.lvg-identite .lvg-compteur {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

.lvg-identite .lvg-chiffres p {
	margin: 10px 0 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lvg-or-sombre);
}

/* ------------------------------------------------------------ Partenaires
 *
 * Le bandeau de logos du code court [lvg_partenaires] : une bande qui
 * défile horizontalement, encadrée de deux flèches. Le nombre de logos
 * visibles vient du back-office (--lvg-part-par).
 */

.lvg-identite .lvg-partenaires {
	padding-block: var(--lvg-part-haut-bas, 34px);
}

.lvg-identite .lvg-partenaires .lvg-surtitre {
	margin-bottom: 16px;
}

.lvg-identite .lvg-part-piste {
	display: flex;
	align-items: stretch;
	gap: var(--lvg-part-gouttiere, 14px);
}

.lvg-identite .lvg-part-liste {
	flex-grow: 1;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-auto-flow: column;
	/* Les gouttières retirées, la place restante se partage également. */
	grid-auto-columns: calc(
		(100% - (var(--lvg-part-par, 6) - 1) * var(--lvg-part-gouttiere, 14px)) / var(--lvg-part-par, 6)
	);
	gap: var(--lvg-part-gouttiere, 14px);
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.lvg-identite .lvg-part-liste::-webkit-scrollbar {
	display: none;
}

/* Les copies qui font tourner la bande sans fin se voient comme les autres. */
.lvg-identite .lvg-part-item {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 0;
	padding: var(--lvg-part-pad, 18px 16px);
	background: var(--lvg-part-fond, #fff);
	scroll-snap-align: start;
}

.lvg-identite .lvg-part-item a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.lvg-identite .lvg-part-item img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: var(--lvg-part-haut, 54px);
	object-fit: contain;
}

/* Logos en niveaux de gris, au choix dans le back-office. */
.lvg-identite .lvg-part-gris .lvg-part-item img {
	filter: grayscale(1);
	opacity: .78;
	transition: filter .2s ease, opacity .2s ease;
}

.lvg-identite .lvg-part-gris .lvg-part-item img:hover {
	filter: none;
	opacity: 1;
}

/*
 * Les flèches : le thème habille tous les boutons sauf ceux marqués
 * « sg-icon-btn », que les flèches portent. Les « important » couvrent le
 * cas où un autre habillage passerait encore devant.
 */
.lvg-identite .lvg-partenaires .lvg-part-fleche,
.lvg-identite .lvg-partenaires button.lvg-part-fleche {
	flex: none;
	align-self: center;
	width: 40px;
	height: 40px;
	min-width: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--lvg-marine) !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: color .2s ease;
}

.lvg-identite .lvg-partenaires .lvg-part-fleche:hover {
	background: none !important;
	color: var(--lvg-jaune-fonce) !important;
	filter: none;
}

/* Le chevron suit la couleur du bouton et garde sa taille. */
.lvg-identite .lvg-partenaires .lvg-part-fleche svg {
	display: block;
	width: 22px;
	height: 22px;
	stroke: currentColor;
	fill: none;
}

.lvg-identite .lvg-partenaires .lvg-part-fleche[hidden] {
	display: none;
}

@media (max-width: 1100px) {
	.lvg-identite .lvg-part-liste {
		--lvg-part-par: 3;
	}
}

/*
 * Sur mobile, un seul logo à l'écran : à deux, aucun n'est lisible. Il
 * profite de la place pour s'afficher plus grand.
 */
@media (max-width: 782px) {
	.lvg-identite .lvg-part-liste {
		--lvg-part-par: 1;
	}

	.lvg-identite .lvg-part-item img {
		max-height: calc(var(--lvg-part-haut, 54px) * var(--lvg-part-mobile, 1.4));
	}

	.lvg-identite .lvg-part-item {
		padding: 22px 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lvg-identite .lvg-part-liste {
		scroll-behavior: auto;
	}
}

/* ------------------------------------------------------- Avis Batiref */

.lvg-batiref {
	display: flex;
	flex-direction: column;
	gap: 26px;
	font-size: 14px;
	color: var(--lvg-texte, #2d3350);
}

.lvg-batiref .lvg-avis-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
}

.lvg-batiref .lvg-avis-head h2 {
	margin: 0;
	max-width: 780px;
}

.lvg-batiref .lvg-lien {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--lvg-marine, #202951);
	text-decoration: none;
	border-bottom: 2px solid var(--lvg-jaune, #e8c40c);
	padding-bottom: 4px;
	white-space: nowrap;
}

/* Étoiles */
.lvg-stars {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	line-height: 1;
	letter-spacing: .06em;
	color: var(--lvg-jaune, #e8c40c);
	font-size: 11px;
}

.lvg-stars-bg {
	opacity: .24;
}

.lvg-stars-fg {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

/* Bandeau de synthèse */
.lvg-band {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 18px 24px;
	padding: 22px 28px;
	background: var(--lvg-marine, #202951);
	color: #fff;
}

.lvg-band-left {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	min-width: 0;
}

.lvg-band .lvg-stars {
	font-size: 14px;
}

.lvg-wordmark {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--lvg-jaune, #e8c40c);
}

.lvg-band-note {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.lvg-band-note b {
	font-size: 40px;
	font-weight: 800;
	line-height: 1;
	color: var(--lvg-jaune, #e8c40c);
	font-variant-numeric: tabular-nums;
}

.lvg-band-note span {
	font-size: 15px;
	opacity: .7;
}

.lvg-band-meta {
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-size: 12px;
	line-height: 1.45;
	opacity: .78;
}

.lvg-band-crit {
	margin: 0;
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
}

.lvg-band-cell {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 0 12px;
	min-width: 76px;
}

.lvg-band-cell + .lvg-band-cell {
	border-left: 1px solid rgba(255, 255, 255, .2);
}

.lvg-band-cell dt {
	font-size: 10px;
	letter-spacing: .09em;
	text-transform: uppercase;
	opacity: .7;
}

.lvg-band-cell dd {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Carrousel */
.lvg-carousel {
	display: flex;
	align-items: stretch;
	gap: 18px;
}

/*
 * Le thème habille tous les <button> sauf ceux marqués .sg-icon-btn : les
 * flèches portent cette classe, et les règles ci-dessous repassent devant.
 */
.lvg-batiref .lvg-arrow,
.lvg-batiref button.lvg-arrow {
	width: 44px;
	height: 44px;
	flex: none;
	align-self: center;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--lvg-marine, #202951);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: opacity .2s ease;
}

.lvg-batiref .lvg-arrow:hover {
	background: none;
	color: var(--lvg-jaune-fonce, #8a7308);
}

.lvg-batiref .lvg-arrow:disabled {
	opacity: .25;
	cursor: default;
}

.lvg-batiref .lvg-arrow svg {
	width: 26px;
	height: 26px;
}

.lvg-avis-cards {
	flex-grow: 1;
	min-width: 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 54px) / 4);
	gap: 18px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.lvg-avis-cards::-webkit-scrollbar {
	display: none;
}

.lvg-avis-card {
	margin: 0;
	box-sizing: border-box;
	padding: 22px 20px 18px;
	background: var(--lvg-creme, #fbf9f2);
	border: 1px solid var(--lvg-bordure, #e7e2ce);
	display: flex;
	flex-direction: column;
	gap: 11px;
	scroll-snap-align: start;
	min-width: 0;
}

.lvg-avis-date {
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--lvg-doux, #6b7193);
}

.lvg-avis-who {
	display: flex;
	align-items: center;
	gap: 10px;
}

.lvg-ini {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: none;
	border-radius: 50%;
	background: var(--lvg-marine, #202951);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
}

.lvg-badge {
	display: inline-flex;
	align-items: center;
	height: 20px;
	padding: 0 8px;
	background: var(--lvg-jaune, #e8c40c);
	color: var(--lvg-or-sombre, #3e3714);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.lvg-avis-score {
	display: flex;
	align-items: baseline;
	gap: 9px;
}

.lvg-avis-score .lvg-stars {
	font-size: 15px;
}

.lvg-avis-score b {
	font-size: 30px;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.lvg-avis-score > span:last-child {
	font-size: 14px;
	opacity: .6;
}

.lvg-avis-card blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	flex-grow: 1;
}

.lvg-avis-card blockquote p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--lvg-texte, #2d3350);
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lvg-crit {
	display: flex;
	flex-direction: column;
}

.lvg-crit-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 5px 0;
	border-top: 1px solid var(--lvg-bordure, #e7e2ce);
}

.lvg-crit-row:first-child {
	border-top: 0;
}

.lvg-crit-label {
	font-size: 10px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--lvg-doux, #6b7193);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lvg-crit-note {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: none;
	font-size: 11px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.lvg-avis-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 0;
	font-size: 12px;
	color: var(--lvg-doux, #6b7193);
}

.lvg-avis-foot strong {
	color: var(--lvg-marine, #202951);
}

/* ------------------------------------------------------------ Pied de page
 *
 * Le thème dessine la structure — quatre colonnes de widgets et une barre
 * basse séparée d'un filet. Ne sont repris ici que l'habillage de la
 * maquette et les quelques classes à poser dans les widgets :
 *   lvg-pied-logo    le logo de la première colonne
 *   lvg-reseaux      les pastilles des réseaux sociaux
 *   lvg-pied-tel     le numéro de téléphone, en gras
 *   lvg-pied-mention la ligne discrète sous un contact
 */

.lvg-identite .site-footer .widget-title,
.lvg-identite .site-footer .widgettitle,
.lvg-identite .site-footer h2,
.lvg-identite .site-footer h3 {
	margin: 0 0 var(--lvg-pied-titre-bas, 16px);
	color: var(--lvg-jaune);
	font-size: var(--lvg-pied-titre, 12px);
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.4;
	text-transform: uppercase;
}

.lvg-identite .site-footer p {
	margin: 0 0 10px;
	line-height: 1.7;
}

.lvg-identite .site-footer p:last-child {
	margin-bottom: 0;
}

.lvg-identite .site-footer a {
	color: inherit;
	text-decoration: none;
}

.lvg-identite .site-footer a:hover,
.lvg-identite .site-footer a:focus-visible {
	color: var(--lvg-jaune);
}

/* Listes de liens : sans puces, aérées comme sur la maquette. */
.lvg-identite .site-footer .widget ul,
.lvg-identite .site-footer .menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lvg-identite .site-footer .widget li,
.lvg-identite .site-footer .menu li {
	margin: 0 0 var(--lvg-pied-ligne, 9px);
	padding: 0;
	line-height: 1.5;
}

.lvg-identite .site-footer .widget li:last-child {
	margin-bottom: 0;
}

/* Les colonnes partent du même bord haut, quelle que soit leur hauteur. */
.lvg-identite .site-footer .widget {
	align-self: start;
}

/* Première colonne : logo, phrase de présentation, réseaux. */
.lvg-identite .site-footer .widget img,
.lvg-identite .site-footer figure img {
	max-width: 100%;
	height: auto;
}

.lvg-identite .site-footer .lvg-pied-logo,
.lvg-identite .site-footer .widget img.lvg-pied-logo {
	display: block;
	width: auto;
	max-width: var(--lvg-pied-logo, 200px);
	height: auto;
	/* Le décalage rattrape la marge transparente du fichier, s'il en a. */
	margin: var(--lvg-pied-logo-haut, 0) 0 var(--lvg-pied-logo-bas, 18px);
}

.lvg-identite .lvg-reseaux {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
}

.lvg-identite .lvg-reseaux a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--lvg-reseaux-taille, 42px);
	height: var(--lvg-reseaux-taille, 42px);
	box-sizing: border-box;
	border: 1px solid rgb(255 255 255 / var(--lvg-reseaux-trait, .38));
	background: none;
	color: #fff;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.lvg-identite .lvg-reseaux a:hover,
.lvg-identite .lvg-reseaux a:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--lvg-marine);
}

.lvg-identite .lvg-reseaux svg {
	display: block;
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* Le numéro se lit d'un coup d'œil ; l'horaire reste en retrait. */
.lvg-identite .site-footer .lvg-pied-tel,
.lvg-identite .site-footer .lvg-pied-tel a {
	color: #fff;
	font-size: var(--lvg-pied-tel, 16px);
	font-weight: 700;
}

.lvg-identite .site-footer .lvg-pied-mention {
	font-size: 13px;
	opacity: .62;
}

/* Barre basse : copyright à gauche, liens légaux à droite. */
.lvg-identite .footer-bottom {
	font-size: var(--lvg-pied-bas, 12px);
}

.lvg-identite .footer-bottom .menu,
.lvg-identite .footer-bottom ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lvg-pied-bas-ecart, 26px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lvg-identite .footer-bottom li {
	margin: 0;
}

@media (max-width: 782px) {
	/* Empilés, le copyright et les liens se centrent plutôt que de rester
	   accrochés au bord gauche. */
	.lvg-identite .footer-bottom,
	.lvg-identite .footer-bottom .site-info {
		text-align: center;
	}

	.lvg-identite .footer-bottom .footer-bottom-inner {
		justify-content: center;
	}

	.lvg-identite .footer-bottom .menu,
	.lvg-identite .footer-bottom ul {
		justify-content: center;
		gap: 14px 20px;
	}
}

/* ------------------------------------------------------------- Responsive */

@media (max-width: 1100px) {
	.lvg-identite {
		--lvg-pad: 32px;
	}

	.lvg-avis-cards {
		grid-auto-columns: calc((100% - 18px) / 2);
	}
}

@media (max-width: 782px) {
	.lvg-identite {
		--lvg-pad: 20px;
	}

	.lvg-band {
		padding: 18px 20px;
	}

	.lvg-band-crit {
		gap: 12px 0;
	}

	.lvg-avis-cards {
		grid-auto-columns: 86%;
	}

	.lvg-identite .lvg-chiffres h2,
	.lvg-identite .lvg-chiffres h3 {
		font-size: 38px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lvg-avis-cards {
		scroll-behavior: auto;
	}
}

/* ===================================================== Formulaire Formidable
 *
 * Habillage du formulaire de devis de la maquette. Il s'applique au seul
 * formulaire portant la classe « lvg-devis » (Formidable : Réglages du
 * formulaire > Classe CSS du formulaire), pour ne pas toucher aux autres
 * formulaires du site.
 *
 * Les réglages de Formidable ne sont pas modifiés : désactiver l'extension
 * rend au formulaire son apparence d'origine.
 */

.lvg-devis {
	--lvg-champ: 2px;
}

/* Formidable enveloppe les champs dans un fieldset, que le navigateur
   entoure d'un filet par défaut. */
.lvg-devis fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.lvg-devis .frm_form_fields {
	margin: 0;
	padding: 0;
}

.lvg-devis .frm_screen_reader {
	display: none;
}

/*
 * Les champs se rangent en trois colonnes ; la dernière ligne garde la
 * demande sur deux colonnes et le bouton dans la troisième.
 *
 * Formidable pose sa propre grille de douze colonnes sur le conteneur des
 * champs, et y place le bouton en pleine largeur, dans une feuille de style
 * chargée après celle-ci. Nous remplaçons sa grille par la nôtre et plaçons
 * nous-mêmes la demande et le bouton — d'où les « important », qui ne
 * portent que sur ces quelques propriétés.
 */
.lvg-devis .frm_fields_container {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 14px 22px !important;
	align-items: end;
}

.lvg-devis .frm_form_field {
	grid-column: auto !important;
	margin: 0 !important;
	min-width: 0;
}

/* La zone de demande occupe deux colonnes, le bouton prend la troisième. */
.lvg-devis .lvg-demande {
	grid-column: 1 / span 2 !important;
}

/* Repli si le champ n'a pas reçu la classe : il est reconnu à son contenu.
   Règle séparée : un navigateur qui ignore « :has » n'écarte que celle-ci. */
.lvg-devis .frm_form_field:has(textarea) {
	grid-column: 1 / span 2 !important;
}

.lvg-devis .frm_submit {
	grid-column: 3 !important;
	margin: 0;
	min-width: 0;
}

.lvg-devis .frm_error_style,
.lvg-devis .frm_message {
	grid-column: 1 / -1 !important;
}

/*
 * Le champ leurre anti-robot de Formidable est posé dans un bloc sans
 * classe, qui prenait une case de la grille et repoussait le bouton à la
 * ligne suivante. Il reste dans la page, simplement masqué.
 */
.lvg-devis .frm_verify {
	display: none;
}

/* Règle séparée : « :has » n'est pas compris partout, et un sélecteur
   inconnu dans une liste ferait tomber toute la règle. */
.lvg-devis .frm_fields_container > div:has(> .frm_verify) {
	display: none;
}

/* Étiquettes : capitales espacées, comme les sur-titres de la maquette. */
.lvg-devis .frm_primary_label {
	display: block;
	margin: 0 0 6px !important;
	padding: 0;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--sg-primary, #202951);
}

/* L'astérisque rouge n'existe pas sur la maquette : tous les champs sont
   obligatoires, le dire une fois suffit. */
.lvg-devis .frm_required {
	display: none;
}

.lvg-devis .frm_description {
	font-size: 12px;
	color: var(--sg-primary, #202951);
	opacity: .75;
}

/* Champs : fond blanc, angles droits, filet marine. */
.lvg-devis input[type="text"],
.lvg-devis input[type="email"],
.lvg-devis input[type="tel"],
.lvg-devis input[type="url"],
.lvg-devis input[type="number"],
.lvg-devis select,
.lvg-devis textarea {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 12px 14px;
	border: var(--lvg-champ) solid var(--sg-primary, #202951);
	border-radius: 0;
	background: #fff;
	box-shadow: none;
	color: var(--sg-text, #2d3350);
	font-family: inherit;
	font-size: 15px;
	line-height: 1.3;
}

.lvg-devis textarea {
	height: 48px;
	min-height: 48px;
	resize: vertical;
}

.lvg-devis select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 38px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%23202951' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 18px 18px;
}

.lvg-devis ::placeholder {
	color: var(--sg-muted, #6b7193);
	opacity: 1;
}

.lvg-devis input:focus,
.lvg-devis select:focus,
.lvg-devis textarea:focus {
	outline: 3px solid rgba(32, 41, 81, .45);
	outline-offset: 1px;
}

/*
 * Bouton d'envoi : marine plein, capitales.
 *
 * Formidable écrit sa propre feuille de style, chargée après celle-ci et
 * calée sur le nom du style retenu — impossible de passer devant par la
 * seule spécificité. D'où les « important », limités à ce bouton.
 */
.lvg-devis .frm_submit button,
.lvg-devis .frm_submit input[type="submit"],
.lvg-devis button.frm_button_submit {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 16px 24px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--sg-primary, #202951) !important;
	box-shadow: none !important;
	color: #fff !important;
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: .08em !important;
	line-height: 1.2 !important;
	text-transform: uppercase !important;
	cursor: pointer;
	transition: background .15s ease;
}

.lvg-devis .frm_submit button:hover,
.lvg-devis .frm_submit input[type="submit"]:hover,
.lvg-devis button.frm_button_submit:hover {
	background: #3a4472 !important;
	color: #fff !important;
}

/* Erreurs : un rouge sombre, lisible sur la bande jaune. */
.lvg-devis .frm_error,
.lvg-devis .frm_error_style {
	margin: 6px 0 0;
	color: #7a1212;
	font-size: 12px;
	font-weight: 700;
}

.lvg-devis .frm_blank_field input,
.lvg-devis .frm_blank_field select,
.lvg-devis .frm_blank_field textarea {
	border-color: #7a1212;
}

.lvg-devis .frm_message {
	margin: 0;
	padding: 18px 20px;
	border: var(--lvg-champ) solid var(--sg-primary, #202951);
	background: #fff;
	color: var(--sg-text, #2d3350);
}

@media (max-width: 1100px) {
	.lvg-devis .frm_fields_container {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.lvg-devis .frm_submit {
		grid-column: 2 !important;
	}
}

@media (max-width: 782px) {
	.lvg-devis .frm_fields_container {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 16px !important;
	}

	.lvg-devis .lvg-demande,
	.lvg-devis .frm_submit {
		grid-column: 1 !important;
	}

	.lvg-devis .frm_form_field:has(textarea) {
		grid-column: 1 !important;
	}

	.lvg-devis textarea {
		height: 110px;
		min-height: 110px;
	}
}

/*
 * Colonnes alignées en haut.
 *
 * À poser sur la ligne (vc_row) quand ses colonnes sont de hauteurs
 * différentes — la colonne de texte à gauche du formulaire de devis, par
 * exemple — pour que les contenus partent du même bord haut au lieu d'être
 * centrés verticalement.
 */
/*
 * Colonnes centrées sur la hauteur.
 *
 * Le pendant de lvg-haut : à poser sur la ligne quand une colonne courte
 * — un bouton seul, par exemple — doit se placer en face du milieu de sa
 * voisine plutôt qu'en haut.
 */
.lvg-milieu,
.lvg-milieu > .vc_row,
.lvg-milieu.vc_row {
	align-items: center !important;
}

.lvg-milieu > .vc_column_container,
.lvg-milieu > .vc_col-sm-12,
.lvg-milieu > .vc_col-sm-6,
.lvg-milieu > .vc_col-sm-4,
.lvg-milieu > .vc_col-sm-3,
.lvg-milieu > .vc_col-sm-8,
.lvg-milieu > .vc_col-sm-9 {
	align-self: center !important;
}

.lvg-milieu .vc_column-inner,
.lvg-milieu .vc_column-inner > .wpb_wrapper {
	justify-content: center !important;
	height: auto !important;
}

/* Le bouton d'une colonne d'appoint se range à droite. */
.lvg-milieu .vc_column_container:not(:first-child) .vc_btn3-container,
.lvg-milieu .vc_column_container:not(:first-child) .vc_btn3-container.vc_btn3-inline {
	display: block;
	width: 100%;
	margin-bottom: 0;
	text-align: right;
}

@media (max-width: 782px) {
	.lvg-milieu .vc_column_container:not(:first-child) .vc_btn3-container,
	.lvg-milieu .vc_column_container:not(:first-child) .vc_btn3-container.vc_btn3-inline {
		margin-top: 20px;
		text-align: left;
	}
}

.lvg-haut,
.lvg-haut > .vc_row,
.lvg-haut.vc_row {
	align-items: flex-start !important;
}

.lvg-haut > .vc_column_container,
.lvg-haut > .vc_col-sm-12,
.lvg-haut > .vc_col-sm-6,
.lvg-haut > .vc_col-sm-4,
.lvg-haut > .vc_col-sm-3,
.lvg-haut > .vc_col-sm-8,
.lvg-haut > .vc_col-sm-9 {
	align-self: flex-start !important;
}

.lvg-haut .vc_column-inner,
.lvg-haut .vc_column-inner > .wpb_wrapper {
	justify-content: flex-start !important;
	height: auto !important;
}

/*
 * …et le premier élément de chaque colonne ne pousse plus vers le bas :
 * un titre porte une marge haute, qui décale la colonne entière par
 * rapport à sa voisine même lorsque la ligne est réglée « en haut ».
 */
.lvg-haut .wpb_wrapper > h1:first-child,
.lvg-haut .wpb_wrapper > h2:first-child,
.lvg-haut .wpb_wrapper > h3:first-child,
.lvg-haut .wpb_wrapper > h4:first-child,
.lvg-haut .wpb_wrapper > h5:first-child,
.lvg-haut .wpb_wrapper > h6:first-child,
.lvg-haut .wpb_wrapper > p:first-child,
.lvg-haut .wpb_wrapper > .vc_custom_heading:first-child,
.lvg-haut .wpb_wrapper > .wpb_content_element:first-child > :first-child {
	margin-top: 0 !important;
}

/* ------------------------------------------------- Médaillons : rythme
 *
 * La rangée respire d'elle-même, et la légende de chaque médaillon passe
 * sous l'image : le champ « Titre au-dessus » du module Image suffit, il
 * n'y a pas de bloc de texte à ajouter en dessous.
 *
 * Marge haute volontairement courte : quand le titre de rubrique est dans
 * une ligne à part, c'est elle qui donne déjà l'air au-dessus.
 */
.lvg-identite .lvg-medaillons {
	/*
	 * Trois réglages indépendants, quand le titre est dans sa propre ligne
	 * (classe lvg-titre-section) :
	 * --lvg-med-haut    : entre le titre et les photos
	 * --lvg-med-legende : entre la photo et sa légende
	 * --lvg-med-bas     : sous les légendes
	 *
	 * --lvg-med-titre ne sert que si le titre est DANS cette ligne.
	 */
	--lvg-med-haut: 20px;
	--lvg-med-titre: 10px;
	--lvg-med-legende: 16px;
	--lvg-med-bas: 50px;

	padding-top: var(--lvg-med-haut);
	padding-bottom: var(--lvg-med-bas);
}

.lvg-identite .lvg-medaillons h1,
.lvg-identite .lvg-medaillons h2,
.lvg-identite .lvg-medaillons h3,
.lvg-identite .lvg-medaillons h4 {
	margin-top: 0;
	margin-bottom: var(--lvg-med-titre);
	font-size: 24px;
	line-height: 1.3;
	letter-spacing: .05em;
	text-align: center;
}

.lvg-identite .lvg-medaillons .wpb_single_image {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: var(--lvg-med-legende);
	margin-bottom: 0;
	text-align: center;
}

/* La figure du module Image est en largeur libre : sans cela, le « 100 % »
   du média se mesure sur une boîte qui se mesure elle-même sur lui. */
.lvg-identite .lvg-medaillons .wpb_single_image > * {
	width: 100%;
}

/* Le titre du module Image devient la légende, sous le cercle. */
.lvg-identite .lvg-medaillons .wpb_singleimage_heading,
.lvg-identite .lvg-medaillons .wpb_heading {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--lvg-marine);
}

/* Légende saisie dans un bloc de texte séparé, sous l'image. */
.lvg-identite .lvg-medaillons .wpb_single_image + .wpb_text_column {
	margin-top: 16px;
}

/*
 * Les modules du constructeur portent chacun une marge basse, qui
 * s'ajoutait à celle du titre : l'écart sous le titre de rubrique était le
 * double de celui demandé. Un seul espace, donné par le titre lui-même.
 */
.lvg-identite .lvg-medaillons .wpb_content_element,
.lvg-identite .lvg-medaillons .wpb_text_column,
.lvg-identite .lvg-medaillons .wpb_wrapper > :last-child {
	margin-bottom: 0;
}

@media (max-width: 1100px) {
	.lvg-identite .lvg-medaillons h1,
	.lvg-identite .lvg-medaillons h2,
	.lvg-identite .lvg-medaillons h3,
	.lvg-identite .lvg-medaillons h4 {
		font-size: 22px;
	}
}

@media (max-width: 782px) {
	.lvg-identite .lvg-medaillons h1,
	.lvg-identite .lvg-medaillons h2,
	.lvg-identite .lvg-medaillons h3,
	.lvg-identite .lvg-medaillons h4 {
		font-size: 19px;
	}

}

/* ------------------------------------------------- Titre de rubrique
 *
 * Le petit titre centré qui ouvre une rangée — « Nos équipes spécialisées
 * interviennent sur tous types de chantiers ». À poser sur la ligne ou sur
 * le module de titre, quand celui-ci n'est pas dans la ligne qu'il annonce.
 */
.lvg-identite .lvg-titre-section,
.lvg-identite .lvg-titre-section h1,
.lvg-identite .lvg-titre-section h2,
.lvg-identite .lvg-titre-section h3,
.lvg-identite .lvg-titre-section h4,
.lvg-identite h1.lvg-titre-section,
.lvg-identite h2.lvg-titre-section,
.lvg-identite h3.lvg-titre-section,
.lvg-identite h4.lvg-titre-section {
	font-size: 24px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: .05em;
	text-transform: uppercase;
	text-align: center;
	color: var(--lvg-marine);
}

.lvg-identite .lvg-titre-section .wpb_content_element,
.lvg-identite .lvg-titre-section .wpb_wrapper > :last-child {
	margin-bottom: 0;
}

/* L'air au-dessus de la rubrique est porté par le titre ; l'espace qui le
   sépare des photos est porté par la rangée (--lvg-med-haut). */
.lvg-identite .lvg-titre-section {
	--lvg-titre-haut: 1px;

	padding-top: var(--lvg-titre-haut);
	padding-bottom: 20px;
}

@media (max-width: 1100px) {
	.lvg-identite .lvg-titre-section,
	.lvg-identite .lvg-titre-section h1,
	.lvg-identite .lvg-titre-section h2,
	.lvg-identite .lvg-titre-section h3,
	.lvg-identite .lvg-titre-section h4 {
		font-size: 22px;
	}
}

@media (max-width: 782px) {
	.lvg-identite .lvg-titre-section,
	.lvg-identite .lvg-titre-section h1,
	.lvg-identite .lvg-titre-section h2,
	.lvg-identite .lvg-titre-section h3,
	.lvg-identite .lvg-titre-section h4 {
		font-size: 19px;
	}

	.lvg-identite .lvg-titre-section {
		--lvg-titre-haut: 12px;
	}
}

/* ------------------------------------------------- Apparition en cascade
 *
 * La rangée se révèle élément par élément à son arrivée dans l'écran. Le
 * script pose « lvg-prete » puis « lvg-vue » : tant qu'il n'a pas pris la
 * main, rien n'est masqué.
 *
 * Trois allures, au choix, par une classe posée sur la ligne à côté de
 * lvg-medaillons ou lvg-apparition :
 *   (par défaut)     — fondu en montant
 *   lvg-app-zoom     — fondu en grandissant
 *   lvg-app-tombe    — fondu en descendant
 *
 * Le décalage entre deux éléments se règle avec --lvg-app-pas.
 */
.lvg-identite .lvg-prete .wpb_single_image,
.lvg-identite .lvg-prete .lvg-apparition-item {
	--lvg-app-pas: 90ms;

	opacity: 0;
	transform: translateY(18px);
	transition: opacity .55s ease, transform .55s cubic-bezier(.22, .9, .3, 1);
	transition-delay: calc(var(--lvg-i, 0) * var(--lvg-app-pas));
}

.lvg-identite .lvg-prete.lvg-app-zoom .wpb_single_image,
.lvg-identite .lvg-prete.lvg-app-zoom .lvg-apparition-item {
	transform: scale(.86);
}

.lvg-identite .lvg-prete.lvg-app-tombe .wpb_single_image,
.lvg-identite .lvg-prete.lvg-app-tombe .lvg-apparition-item {
	transform: translateY(-22px);
}

.lvg-identite .lvg-vue .wpb_single_image,
.lvg-identite .lvg-vue .lvg-apparition-item,
.lvg-identite .wpb_single_image.lvg-vue,
.lvg-identite .lvg-apparition-item.lvg-vue {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.lvg-identite .lvg-prete .wpb_single_image,
	.lvg-identite .lvg-prete .lvg-apparition-item {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

@media (max-width: 782px) {
	/*
	 * Les médaillons s'empilent : il faut un espace entre la légende de
	 * l'un et la photo du suivant, que la grille ne donne plus.
	 */
	.lvg-identite .lvg-medaillons {
		/* Une seule colonne : le cercle peut occuper les deux tiers de
		   l'écran, sans jamais dépasser 230 px. */
		--lvg-med-taille: min(66vw, 230px);
	}

	.lvg-identite .lvg-medaillons .vc_column_container {
		margin-bottom: var(--lvg-med-empile, 34px);
	}

	.lvg-identite .lvg-medaillons .vc_column_container:last-child {
		margin-bottom: 0;
	}

	/* Légendes plus lisibles sur un écran tenu à bout de bras. */
	.lvg-identite .lvg-medaillons .wpb_singleimage_heading,
	.lvg-identite .lvg-medaillons .wpb_heading,
	.lvg-identite .lvg-medaillons .wpb_text_column,
	.lvg-identite .lvg-medaillons .wpb_text_column p {
		font-size: 16px;
		letter-spacing: .06em;
	}

	/* Chacun s'annonce à son tour : plus de cascade groupée. */
	.lvg-identite .lvg-prete .wpb_single_image,
	.lvg-identite .lvg-prete .lvg-apparition-item {
		transition-delay: 0s;
	}
}

/* ------------------------------------------- Apparition au défilement
 *
 * Les modules entrent en fondu, en glissant vers le haut, à l'arrivée de
 * leur rangée dans l'écran. Le script ne marque que ce qui n'est pas
 * encore visible : le reste s'affiche sans transition, donc sans
 * clignotement au chargement.
 */
.lvg-identite .lvg-defile-item {
	opacity: 0;
	transform: translateY(var(--lvg-defile-distance, 24px));
	transition:
		opacity var(--lvg-defile-duree, 650ms) ease,
		transform var(--lvg-defile-duree, 650ms) cubic-bezier(.22, .9, .3, 1);
	transition-delay: calc(var(--lvg-i, 0) * var(--lvg-defile-pas, 80ms));
	/* Le mouvement ne doit pas élargir la page. */
	will-change: opacity, transform;
}

.lvg-identite .lvg-defile-item.lvg-defile-vue {
	opacity: 1;
	transform: none;
	will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
	.lvg-identite .lvg-defile-item {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ===================================================== En-tête d'accueil
 *
 * Le médaillon à photos, l'entrée de l'accroche et le traitement jaune de
 * la photo de fond. Le reste de l'en-tête — sur-titre, titre, paragraphe,
 * boutons, image de fond — reste au constructeur.
 */

/* ------------------------------------------------------- Le médaillon
 *
 * Classe distincte de l'utilitaire « lvg-rond » : celui-ci cercle de blanc
 * toute image qu'il contient, ce qui ajoutait un second anneau à
 * l'intérieur du médaillon.
 */

.lvg-medaillon {
	--lvg-medaillon-taille: 380px;
	--lvg-medaillon-fondu: 900ms;

	position: relative;
	width: var(--lvg-medaillon-taille);
	max-width: 100%;
	aspect-ratio: 1;
	margin-inline: auto;
	border-radius: 50%;
	overflow: hidden;
	background: var(--lvg-marine);
	box-shadow: 0 0 0 10px #fff;
}

.lvg-medaillon-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	/*
	 * Le zoom accompagne le fondu : même durée, même courbe, de sorte que
	 * la photo entre d'un seul geste. Le cercle étant à débordement caché,
	 * l'agrandissement se fait sans déborder.
	 */
	transform: scale(var(--lvg-medaillon-hors, 1));
	transition: opacity var(--lvg-medaillon-fondu) ease,
		transform var(--lvg-medaillon-fondu) ease;
}

.lvg-medaillon-photo.is-active {
	opacity: 1;
	transform: scale(var(--lvg-medaillon-dedans, 1));
}

/*
 * La photo qui s'efface poursuit le mouvement au lieu de revenir en
 * arrière : sans cela, l'une avance pendant que l'autre recule, et le
 * cercle paraît respirer plutôt que glisser d'une image à la suivante.
 */
.lvg-medaillon-photo.is-sortante {
	transform: scale(var(--lvg-medaillon-sortie, var(--lvg-medaillon-dedans, 1)));
}

/* Le retour à l'échelle de départ, une fois invisible, ne s'anime pas. */
.lvg-medaillon-photo.sans-transition {
	transition: none;
}

/* Pas de mouvement pour qui a demandé moins d'animations. */
@media (prefers-reduced-motion: reduce) {
	.lvg-medaillon-photo,
	.lvg-medaillon-photo.is-active {
		transform: none;
		transition: none;
	}
}

/*
 * Sans JavaScript, la première photo reste visible. Dès que le script a
 * pris la main — classe « lvg-prete » —, ce repli tombe : sans cela, la
 * première photo resterait opaque sous les autres et reparaîtrait quand
 * la dernière s'efface.
 */
.lvg-medaillon:not(.lvg-prete) .lvg-medaillon-photo:first-child {
	opacity: 1;
}

/*
 * Le diamètre réglé dans le back-office arrive en style en ligne : une
 * redéfinition de la variable ne pourrait pas le contredire. C'est donc la
 * largeur qui est plafonnée.
 */
@media (max-width: 1100px) {
	.lvg-medaillon {
		width: min(var(--lvg-medaillon-taille, 380px), 42vw, 320px);
	}
}

@media (max-width: 782px) {
	.lvg-medaillon {
		width: min(var(--lvg-medaillon-taille, 380px), 68vw, 280px);
		box-shadow: 0 0 0 6px #fff;
	}
}

/* --------------------------------------------- L'entrée de l'accroche */

.lvg-identite .lvg-entree-prete .lvg-part {
	--lvg-entree-pas: 120ms;

	opacity: 0;
	transform: translateY(22px);
	transition: opacity .6s ease, transform .6s cubic-bezier(.22, .9, .3, 1);
	transition-delay: calc(var(--lvg-i, 0) * var(--lvg-entree-pas));
}

/* Les morceaux d'un titre découpé deviennent des blocs, pour que chaque
   ligne monte séparément. */
.lvg-identite .lvg-entree-prete h1 .lvg-part,
.lvg-identite .lvg-entree-prete h2 .lvg-part {
	display: block;
}

.lvg-identite.lvg-effet-mot .lvg-entree-prete h1 .lvg-part,
.lvg-identite.lvg-effet-mot .lvg-entree-prete h2 .lvg-part {
	display: inline-block;
}

.lvg-identite .lvg-entree-vue .lvg-part {
	opacity: 1;
	transform: none;
}

/* Rideau : le texte se dévoile de la gauche plutôt que de monter. */
.lvg-identite.lvg-effet-voile .lvg-entree-prete .lvg-part {
	transform: none;
	clip-path: inset(0 100% 0 0);
	transition: opacity .4s ease, clip-path .7s cubic-bezier(.22, .9, .3, 1);
}

.lvg-identite.lvg-effet-voile .lvg-entree-vue .lvg-part {
	clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
	.lvg-identite .lvg-entree-prete .lvg-part {
		opacity: 1;
		transform: none;
		clip-path: none;
		transition: none;
	}
}

/* ------------------------------------------- Photo de fond en bichromie */

/*
 * La photo est posée sur une couche à part plutôt que sur la ligne : on
 * peut ainsi l'agrandir autour du point d'intérêt, ce qu'un fond de ligne
 * ne permet pas.
 *
 * Deux couches, comme avant : la photo surmontée d'un voile jaune
 * translucide, puis un aplat jaune fondu en « couleur », qui lui prend sa
 * teinte sans toucher à ses valeurs. Le fondu des bords est un masque sur
 * la photo, qui laisse paraître le jaune de la ligne.
 *
 * --lvg-duo-photo : l'image, écrite par l'extension
 * --lvg-duo-x/y   : le point d'intérêt
 * --lvg-duo-zoom  : l'agrandissement, 1 = cadrage au plus juste
 * --lvg-duo-voile : la dose du voile, de 0 à 1
 * --lvg-duo-bord  : la largeur du fondu latéral
 */
.lvg-identite .lvg-fond-duo {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.lvg-identite .lvg-fond-duo::before,
.lvg-identite .lvg-fond-duo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.lvg-identite .lvg-fond-duo::before {
	/* Le voile est la première couche de fond : elle se pose sur la photo. */
	background-image:
		linear-gradient(rgba(232, 196, 12, .42), rgba(232, 196, 12, .42)),
		var(--lvg-duo-photo, none);
	background-image:
		linear-gradient(
			color-mix(in srgb, var(--lvg-duo, var(--lvg-jaune)) calc(var(--lvg-duo-voile, .42) * 100%), transparent),
			color-mix(in srgb, var(--lvg-duo, var(--lvg-jaune)) calc(var(--lvg-duo-voile, .42) * 100%), transparent)
		),
		var(--lvg-duo-photo, none);
	background-size: 100% 100%, cover;
	background-position: center, var(--lvg-duo-x, 50%) var(--lvg-duo-y, 50%);
	background-repeat: no-repeat;
	transform: scale(var(--lvg-duo-zoom, 1));
	transform-origin: var(--lvg-duo-x, 50%) var(--lvg-duo-y, 50%);
	mask-image: linear-gradient(
		90deg,
		transparent 0,
		#000 var(--lvg-duo-bord, 150px),
		#000 calc(100% - var(--lvg-duo-bord, 150px)),
		transparent 100%
	);
	-webkit-mask-image: linear-gradient(
		90deg,
		transparent 0,
		#000 var(--lvg-duo-bord, 150px),
		#000 calc(100% - var(--lvg-duo-bord, 150px)),
		transparent 100%
	);
}

.lvg-identite .lvg-fond-duo::after {
	background: var(--lvg-duo, var(--lvg-jaune));
	mix-blend-mode: color;
}

.lvg-identite .lvg-fond-duo > * {
	position: relative;
	z-index: 1;
}

@media (max-width: 782px) {
	.lvg-identite .lvg-fond-duo::before {
		mask-image: none;
		-webkit-mask-image: none;
	}
}

/* ------------------------------- L'accroche repart : fondu global de sortie */

/*
 * Avant de rejouer, toute l'accroche s'efface d'un seul tenant — sans
 * décalage entre les éléments, pour que la sortie soit nette et l'entrée
 * seule mise en valeur.
 */
.lvg-identite .lvg-entree-sortie .lvg-part {
	opacity: 0;
	transform: none;
	transition: opacity var(--lvg-entree-sortie-duree, .55s) ease;
	transition-delay: 0s;
}

/* Le temps d'une image, aucune transition : le retour à l'état de départ
   ne doit pas s'animer. */
.lvg-identite .lvg-entree-muet .lvg-part {
	transition: none !important;
}

/* ------------------------------ Page d'accueil : l'en-tête touche le menu */

/*
 * Le thème aère le contenu de 64 px en haut et en bas (.content-container,
 * padding-block). Sur la page d'accueil, chaque bande donne elle-même son
 * air : l'en-tête vient au contact du menu, et le pied de page suit le
 * bandeau des partenaires sans blanc entre les deux.
 */
.lvg-identite.home .content-container {
	padding-block: 0;
	padding-top: 0;
	padding-bottom: 0;
}

.lvg-identite.home #content.site-content {
	padding-top: 0;
	margin-top: 0;
}

/*
 * Avant que le script n'ait pris la main, l'accroche est masquée : sans
 * cela, elle paraît puis disparaît le temps qu'il la découpe. La règle ne
 * vaut que si le script d'en-tête a posé sa marque, et ne s'applique ni
 * sans effet d'entrée, ni pour qui a demandé moins d'animations — dans
 * ces deux cas, rien ne la ferait réapparaître.
 */
@media (prefers-reduced-motion: no-preference) {
	html.lvg-js .lvg-identite:not(.lvg-effet-aucun) .lvg-entree:not(.lvg-entree-prete) h1,
	html.lvg-js .lvg-identite:not(.lvg-effet-aucun) .lvg-entree:not(.lvg-entree-prete) h2 {
		opacity: 0;
	}
}

/* ------------------------------------------- En-tête : rythme de l'accroche
 *
 * Quatre réglages, à redéfinir sur la ligne si besoin :
 *   --lvg-hero-titre   : entre le sur-titre et l'accroche
 *   --lvg-hero-chapo   : entre l'accroche et le paragraphe
 *   --lvg-hero-boutons : entre le paragraphe et les boutons
 *   --lvg-hero-texte   : largeur maximale du sur-titre et du paragraphe
 */
.lvg-identite .lvg-entree {
	--lvg-hero-haut: 28px;
	--lvg-hero-titre: 20px;
	--lvg-hero-chapo: 22px;
	--lvg-hero-boutons: 26px;
	--lvg-hero-texte: 560px;
}

/*
 * L'accroche part plus haut : seule la colonne de texte est remontée, celle
 * du médaillon garde son centrage. --lvg-hero-haut règle la hauteur de
 * départ.
 */
.lvg-identite .lvg-entree > .vc_column_container:first-child > .vc_column-inner {
	padding-top: var(--lvg-hero-haut);
}

/* Le premier module de la colonne ne pousse pas l'accroche vers le bas. */
.lvg-identite .lvg-entree .vc_column-inner > .wpb_wrapper > :first-child,
.lvg-identite .lvg-entree .vc_column-inner > .wpb_wrapper > :first-child > :first-child {
	margin-top: 0;
}

.lvg-identite .lvg-entree h1,
.lvg-identite .lvg-entree h2 {
	margin-top: var(--lvg-hero-titre);
	margin-bottom: var(--lvg-hero-chapo);
}

/*
 * Le paragraphe tient sur deux lignes : au-delà, il court sous le médaillon
 * et la ligne devient trop longue à lire.
 */
.lvg-identite .lvg-entree h1 ~ .wpb_text_column,
.lvg-identite .lvg-entree h1 ~ .wpb_text_column p,
.lvg-identite .lvg-entree h2 ~ .wpb_text_column,
.lvg-identite .lvg-entree h2 ~ .wpb_text_column p {
	max-width: var(--lvg-hero-texte);
}

/*
 * Le sur-titre tient sur une seule ligne, et reste pleinement opaque : sur
 * une photo, l'atténuation des bandes unies le rendait blafard.
 */
.lvg-identite .lvg-entree .vc_column-inner > .wpb_wrapper > .wpb_text_column:first-child,
.lvg-identite .lvg-entree .vc_column-inner > .wpb_wrapper > .wpb_text_column:first-child p,
.lvg-identite .lvg-entree .lvg-surtitre,
.lvg-identite .lvg-entree .lvg-surtitre p,
.lvg-identite .lvg-jaune .lvg-entree .lvg-surtitre,
.lvg-identite .lvg-jaune .lvg-entree .lvg-surtitre p {
	max-width: none;
	font-weight: 800;
	opacity: 1;
}

.lvg-identite .lvg-entree .wpb_text_column p:last-child {
	margin-bottom: 0;
}

/* Les boutons se détachent du paragraphe. */
.lvg-identite .lvg-entree .vc_btn3-container,
.lvg-identite .lvg-entree .sg-btn-wrap {
	margin-top: var(--lvg-hero-boutons);
	margin-bottom: 0;
}

@media (max-width: 782px) {
	.lvg-identite .lvg-entree {
		--lvg-hero-texte: 100%;
	}
}

@media (max-width: 782px) {
	/*
	 * L'en-tête se rapproche du menu sans s'y coller : la marge de la ligne
	 * tombe, la colonne de texte garde un peu d'air. « important » parce que
	 * le constructeur écrit la sienne dans l'attribut style de la ligne.
	 */
	.lvg-identite .lvg-entree {
		padding-top: 0 !important;
	}

	.lvg-identite .lvg-entree > .vc_column_container:first-child > .vc_column-inner {
		padding-top: var(--lvg-hero-haut-mobile, 26px) !important;
	}

	/* Le médaillon se détache des boutons qui le précèdent. */
	.lvg-identite .lvg-entree > .vc_column_container + .vc_column_container > .vc_column-inner {
		padding-top: 34px;
	}

	/*
	 * Les deux boutons se rangent côte à côte, centrés sous le texte, qui
	 * reste aligné à gauche : la colonne devient une grille d'une seule
	 * colonne, où seuls les boutons partagent une ligne.
	 */
	.lvg-identite .lvg-entree .vc_column-inner > .wpb_wrapper {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0 12px;
	}

	.lvg-identite .lvg-entree .vc_column-inner > .wpb_wrapper > * {
		flex: 0 0 100%;
	}

	.lvg-identite .lvg-entree .vc_column-inner > .wpb_wrapper > .vc_btn3-container,
	.lvg-identite .lvg-entree .vc_column-inner > .wpb_wrapper > .sg-btn-wrap {
		flex: 0 0 auto;
		margin-bottom: 0;
	}
}