/* ------------------------------------------------------------------
 * Page « Nos produits »
 * Balisage produit par scripts/build-nos-produits.php.
 * Chargement : inc/nos-produits.php, après la feuille du thème enfant.
 *
 * Feuille séparée, et non une section de style.css : ce fichier est la
 * seule partie de l'habillage propre à cette page, et style.css est
 * édité en parallèle par d'autres chantiers. Une section de plus dans
 * un fichier de sept mille lignes se fait écraser au premier
 * enregistrement concurrent ; un fichier à part, non.
 *
 * Elle est chargée après style.css : à spécificité égale, ses règles
 * l'emportent, ce dont on se sert pour neutraliser la grille du corps
 * d'article sur les composants réemployés ici.
 * ---------------------------------------------------------------- */

/* Section collée à la précédente : la bande de réassurance suit le hero
 * et la frise de chantier suit le tableau des prix. Dans les deux cas,
 * le bloc porte déjà son propre fond et ses propres marges ; la
 * respiration de section ferait un trou. */
.elementor-section.be-sec--flush {
	padding-block: 0;
}

/* --- Grille à deux cartes ---
 * « .be-cards--3 » existait déjà pour la page d'accueil ; les
 * réalisations n'en ont que deux et s'étireraient sur toute la largeur.
 */
.be-cards--2 {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* --- Bloc en deux colonnes ---
 * Un appel à l'action sur toute la largeur d'un bandeau de 1 200 px
 * laisse sa moitié droite vide, ce qui se lit comme un défaut de mise
 * en page plutôt que comme une respiration. La colonne de droite dit ce
 * que contient la page visée : c'est la réponse à « qu'est-ce que je
 * vais y trouver », que le titre seul ne donne pas.
 */
.be-split {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(1.75rem, 5vw, 4rem);
	align-items: center;
}

.be-split__main .be-sec__head {
	margin-bottom: var(--be-space-lg);
}

.be-split__main .be-sec__more {
	margin: 0;
}

.be-split__list {
	display: grid;
	gap: var(--be-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.be-split__list li {
	position: relative;
	margin: 0;
	padding: var(--be-space-sm) var(--be-space-md) var(--be-space-sm) 2.6rem;
	border: 1px solid rgba(247, 244, 241, 0.2);
	border-radius: var(--be-radius);
	background-color: rgba(255, 255, 255, 0.06);
	font-size: var(--be-fs-sm);
	line-height: 1.45;
}

/* Coche dessinée en masque, comme les pastilles du hero : pas de police
 * d'icônes à charger pour quatre puces. */
.be-split__list li::before {
	content: "";
	position: absolute;
	left: var(--be-space-md);
	top: 0.95rem;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background-color: var(--be-almond);
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6 12-12-1.4-1.4z'/%3E%3C/svg%3E") center / 12px 12px no-repeat,
		linear-gradient(#000, #000);
	-webkit-mask-composite: xor;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.6 16.2 5.4 12l-1.4 1.4 5.6 5.6 12-12-1.4-1.4z'/%3E%3C/svg%3E") center / 12px 12px no-repeat,
		linear-gradient(#000, #000);
	mask-composite: exclude;
}

@media (max-width: 860px) {
	.be-split {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* --- Composants de finition réemployés hors article ---
 * Les modèles réutilisables et le tableau des prix arrivent ici dans un
 * widget Elementor, donc sans la grille à trois couloirs du corps d'un
 * article (8g). Les composants héritent de leur mise en forme par la
 * portée « .be-prose » ; il reste à leur rendre la largeur, que la
 * grille leur donnait.
 */
/* La portée « .be-prose » sert ici à hériter de la mise en forme des
 * composants, pas de la mise en page du corps d'article. La grille à
 * trois couloirs de la section 8g n'a pas lieu d'être dans un widget
 * Elementor : elle y enfermait tout le contenu — tableau des prix
 * compris — dans le couloir de texte de 42 rem, décalé à droite d'une
 * section par ailleurs pleine largeur. La section porte déjà la largeur. */
.be-sec .be-prose {
	display: block;
}

.be-sec .be-prose .be-trust,
.be-sec .be-prose .be-band {
	margin-inline: 0;
	width: auto;
	max-width: none;
}

.be-sec .be-prose .be-band {
	margin-block: 0;
	border: 0;
	background-color: transparent;
}

.be-sec .be-prose .be-band__inner {
	padding-inline: 0;
}

/* La frise et la FAQ gardent une mesure de lecture, même sur 1 200 px. */
.be-sec .be-prose .be-band__inner .be-flow,
.be-sec .be-prose .be-faq {
	max-width: 52rem;
}

/* Le tableau des prix, lui, prend toute la largeur : c'est une grille
 * de données, pas un paragraphe. */
.be-sec .be-prose .be-compare {
	max-width: none;
}

.be-sec .be-prose .be-compare thead th {
	position: static;
}

/* « .be-sec__more a » souligne le lien d'un filet bas : c'est ce qu'on
 * veut pour un lien de fin de section, pas pour un bouton plein, qui
 * se retrouvait barré d'un trait sous son libellé. */
.be-split__main .be-sec__more .be-btn,
.be-sec .be-sec__more .be-btn {
	border-bottom: 0;
	padding-bottom: 0.85rem;
}

/* ------------------------------------------------------------------
 * Composants réemployés : déclarations autonomes
 * ------------------------------------------------------------------
 *
 * La bande de réassurance et la frise de chantier sont des modèles
 * réutilisables, partagés avec les articles de finition. Leur mise en
 * forme vit dans style.css, sous une portée qui énumère les contextes
 * où elle s'applique — et cette énumération change au gré des chantiers
 * qui touchent ce fichier. Quand « .be-prose » en disparaît, les deux
 * composants arrivent ici sans grille : les quatre repères s'empilent
 * et la frise perd ses médaillons.
 *
 * Les règles nécessaires sont donc redéclarées ici, sous la seule
 * portée dont cette page a besoin. C'est une duplication assumée : elle
 * coûte une trentaine de lignes et rend la page indépendante d'un
 * fichier que plusieurs chantiers se partagent.
 * ---------------------------------------------------------------- */

/* --- Bande de réassurance --- */
.be-sec .be-prose .be-trust__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: var(--be-space-md) var(--be-space-lg);
	max-width: var(--be-container);
	margin-inline: auto;
	padding: 0;
	list-style: none;
}

.be-sec .be-prose .be-trust__list li {
	margin: 0;
	padding-left: 0;
	text-align: center;
}

.be-sec .be-prose .be-trust__list li::before {
	content: none;
}

/* --- Frise de chantier --- */
.be-sec .be-prose .be-flow {
	counter-reset: be-flow-n;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	margin: var(--be-space-lg) 0 0;
	padding: 0;
	list-style: none;
}

.be-sec .be-prose .be-flow > li {
	counter-increment: be-flow-n;
	position: relative;
	margin: 0;
	padding: 0 0 var(--be-space-lg) 3.5rem;
}

/* Le trait qui relie les médaillons, interrompu sous le dernier. */
.be-sec .be-prose .be-flow > li::after {
	content: "";
	position: absolute;
	left: 1.09rem;
	top: 2.4rem;
	bottom: 0;
	width: 2px;
	background-color: var(--be-oak-200);
}

.be-sec .be-prose .be-flow > li:last-child {
	padding-bottom: 0;
}

.be-sec .be-prose .be-flow > li:last-child::after {
	content: none;
}

.be-sec .be-prose .be-flow > li::before {
	content: counter(be-flow-n);
	position: absolute;
	left: 0;
	top: 0;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background-color: var(--be-yale);
	color: var(--be-oak-100);
	font-family: var(--be-font-display);
	font-size: var(--be-fs-base);
	font-weight: 800;
	line-height: 1;
	/* Le halo masque le trait derrière le médaillon. Il reprend le fond
	 * de la section, qui est blanc ici et non le beige des articles. */
	box-shadow: 0 0 0 4px #fff;
}

/* --- FAQ --- */
.be-sec .be-prose .be-faq__item > :not(summary) {
	margin-bottom: var(--be-space-md);
	color: var(--be-text-muted);
	max-width: 68ch;
}