/*
Theme Name: Divi Child - Précis Plastic Injection
Description: Thème enfant de Divi pour la refonte du site Précis Plastic Injection.
Author: Htag Digital
Author URI: https://htag-digital.fr
Template: Divi
Version: 1.0.0
Text Domain: divi-child
*/

body {
	--topbar-h: 42px; /* maquette Accueil l.29 — défile, ne colle pas */
	--navbar-h: 78px; /* maquette Accueil l.41 */
	--fil-h: 48px;    /* maquette Services l.51 */
	--header-h: var(--navbar-h);

	/* Cadre de contenu : les FONDS filent pleine largeur (viewport entier), le
	   CONTENU reste centré. Les blocs de texte du corps restent, eux, à la largeur
	   du design system (--gvid-ppilargeur) à l'intérieur de ce cadre. */
	--frame: 1440px;
}

body.htag-ppi-fil-ariane {
	--header-h: calc(var(--navbar-h) + var(--fil-h));
}

/* --------------------------------------------------------------------------
   Fond de page — pas de plafond de largeur : les fonds de section filent pleine
   largeur. Le cadrage se fait section par section (--frame ou --gvid-ppilargeur).
   -------------------------------------------------------------------------- */
#page-container {
	background: var(--gcid-ppiblanc01);
	/* `clip` et NON `hidden` : `hidden` ferait de #page-container un conteneur de
	   scroll et casserait `position:sticky` sur les cartes empilées. */
	overflow-x: clip;
}

/* Contenu de page pleine largeur : on neutralise la chaîne d'injection du module
   post-content (row à 80% du Theme Builder), sinon toutes les sections — fonds
   compris — héritent de cette largeur et la page paraît boxée. */
.htag-ppi-contenu,
.htag-ppi-contenu > .et_pb_row,
.htag-ppi-contenu > .et_pb_row > .et_pb_column,
.htag-ppi-contenu .et_pb_post_content,
.htag-ppi-contenu .et-l--post,
.htag-ppi-contenu .et-l--post > .et_builder_inner_content {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* Rows de contenu : Divi impose width 80% + max-width 1440 (0-2-0). On neutralise
   pour tout le contenu de page, avec le même `:not` que Divi (0-3-0). */
.et-l--post .et_pb_row:not([class*="et_flex_column"]) {
	width: 100%;
	max-width: none;
	margin: 0;
}

/* Puis on recentre à --gvid-ppilargeur les rows porteuses de texte ; les rows de
   FOND restent pleine largeur. Même spécificité, placée après. */
.et-l--post .et_pb_row.htag-ppi-1d__grille,
.et-l--post .et_pb_row.htag-ppi-pourquoi__entete,
.et-l--post .et_pb_row.htag-ppi-pourquoi__grille,
.et-l--post .et_pb_row.htag-ppi-secteurs__entete,
.et-l--post .et_pb_row.htag-ppi-secteurs__ligne,
.et-l--post .et_pb_row.htag-ppi-realisations__entete,
.et-l--post .et_pb_row.htag-ppi-projet,
.et-l--post .et_pb_row.htag-ppi-contact__grille,
.et-l--post .et_pb_row.htag-ppi-stats__grille,
.et-l--post .et_pb_row.htag-ppi-intro__entete,
.et-l--post .et_pb_row.htag-ppi-intro__grille,
.et-l--post .et_pb_row.htag-ppi-exp__grille,
.et-l--post .et_pb_row.htag-ppi-offre__entete,
.et-l--post .et_pb_row.htag-ppi-offre__intro,
.et-l--post .et_pb_row.htag-ppi-offre__grille,
.et-l--post .et_pb_row.htag-ppi-secteurs-home__entete,
.et-l--post .et_pb_row.htag-ppi-secteurs-home__grille,
.et-l--post .et_pb_row.htag-ppi-entreprise__haut,
.et-l--post .et_pb_row.htag-ppi-frise,
.et-l--post .et_pb_row.htag-ppi-qualite__haut,
.et-l--post .et_pb_row.htag-ppi-rse__ligne,
.et-l--post .et_pb_row.htag-ppi-actu__entete,
.et-l--post .et_pb_row.htag-ppi-actu__grille,
.et-l--post .et_pb_row.htag-ppi-part__entete {
	max-width: var(--gvid-ppilargeur);
	margin-left: auto;
	margin-right: auto;
}

/* --------------------------------------------------------------------------
   Crochets de largeur des rows (toutes pages)
   Recentrage au cadre de contenu, avec le même `:not` que Divi (0-3-0) pour
   battre son modèle de row. Les rows de FOND n'y figurent pas.
   -------------------------------------------------------------------------- */
.et_pb_row.htag-ppi-ne-hero__haut:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-ne-chiffres__entete:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-ne-chiffres__wrap:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-ne-grp__grille:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-ne-d13__grille:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-ne-hist__entete:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-ne-frise__wrap:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-ne-lop__entete:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-ne-lop__grille:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-ne-dir__grille:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-ne-val__entete:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-ne-valeurs:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-ne-amb__rangee:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-qr-manif__rangee:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-qr-smqse__grille:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-qr-cert__entete:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-qr-cert__grille:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-qr-env__grille:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-qr-env__banner:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-qr-eng__grille:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-qr-axes__wrap:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-qr-pourquoi__rangee:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-co-appro__grille:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-co-niv__entete:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-co-niv__wrap:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-co-meth__entete:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-co-meth__wrap:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-co-collab__grille:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-co-transf__grille:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-co-pourquoi__rangee:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-co-faq__wrap:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-co-split:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-et-enjeu__grille:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-et-cout__row:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-et-moyens__entete:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-et-moyens__grille:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-im-iso__entete:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-im-iso__grille:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-im-env__wrap:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-im-qualif__grille:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-im-trace__grille:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-im-mat__grille:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-im-comp__wrap:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-cont-hero__grille:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-cont-form__grille:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-cont-acces__grille:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-sv-row:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-sv-faq__wrap:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-ct__grille:not([class*="et_flex_column"]) {
	max-width: var(--gvid-ppilargeur);
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* FAQ : cadre plus étroit pour la lisibilité. */
.et_pb_row.htag-ppi-co-faq__wrap:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-sv-faq__wrap:not([class*="et_flex_column"]) {
	max-width: 960px;
}

/* ---------- TOP-BAR — 42px, anthracite. Maquette Accueil l.29-38.
   Pas de bouton FR/EN : aucun plugin multilingue installé. ---------- */
.htag-ppi-topbar > .et_pb_row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: var(--frame);
	margin: 0 auto;
	height: 42px;
	padding: 0 var(--gvid-ppiespace5);
}

.htag-ppi-topbar .et_pb_column {
	width: auto;
	max-width: none;
	margin: 0;
}

.htag-ppi-topbar__zone .et_pb_text_inner p {
	display: flex;
	align-items: center;
	gap: 22px;
	margin: 0;
	font-family: var(--gvid-ppifontetq), monospace;
	font-size: 11px; /* hors palette : la maquette descend sous le palier étiquette */
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
	white-space: nowrap;
}

.htag-ppi-topbar__zone--droite .et_pb_text_inner p {
	gap: 20px;
	text-transform: none;
}

.htag-ppi-topbar__fort {
	color: var(--gcid-ppiblanc01);
}

.htag-ppi-topbar__sep {
	opacity: .4;
}

/* ---------- EN-TÊTE COLLANT ----------
   La navbar seule ne peut pas coller (confinée dans `.et-l--header`) : c'est tout
   l'en-tête qui est sticky dans `.et-boc`, décalé de la hauteur de la top-bar. La
   top-bar défile, la navbar se fige à top:0, le fil d'Ariane juste dessous.
   -------------------------------------------------------------------------- */
.et-l--header {
	position: sticky;
	top: calc(-1 * var(--topbar-h));
	z-index: 40;
}

/* Plus sticky (le gabarit l'est) mais `relative` : bloc conteneur du mega-menu.
   Aucun `overflow` ici, il casserait le débordement du panneau. */
.htag-ppi-navbar {
	position: relative;
	z-index: 40;
	border-bottom: 1px solid rgba(0, 0, 0, .09);
}

.htag-ppi-navbar > .et_pb_row {
	align-items: center;
	width: 100%;
	max-width: var(--frame);
	margin: 0 auto;
	min-height: var(--navbar-h);
	padding: 0 var(--gvid-ppiespace5);
}

.htag-ppi-navbar .et_pb_column {
	margin: 0;
}

.htag-ppi-logo img {
	height: 46px;
	width: auto;
	display: block;
}

.htag-ppi-cta {
	justify-self: end;
}

/* Ancres : décalage égal à la hauteur réelle du header. */
[id] {
	scroll-margin-top: var(--header-h);
}

/* ---------- NAV — liens de premier niveau ---------- */
.htag-ppi-nav .et-menu-nav > ul.et-menu {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 30px;
}

.htag-ppi-nav .et-menu > li {
	margin: 0;
	padding: 0;
}

.htag-ppi-nav .et-menu > li > a {
	font-family: var(--gvid-ppifonttit), sans-serif;
	font-size: 14.5px; /* hors palette : la maquette est entre légende et courant */
	font-weight: 600;
	color: var(--gcid-ppianthc01);
	padding: 0;
	transition: color .18s ease;
}

.htag-ppi-nav .et-menu > li > a:hover,
.htag-ppi-nav .et-menu > li > a:focus-visible {
	color: var(--gcid-ppirouge01);
	opacity: 1;
}

/* Page courante — maquette Services l.43 : « Nos services » est en rouge. */
.htag-ppi-nav .et-menu > li.current-menu-item > a,
.htag-ppi-nav .et-menu > li.current_page_item > a,
.htag-ppi-nav .et-menu > li.current-menu-ancestor > a {
	color: var(--gcid-ppirouge01);
}

/* Chevron de la maquette, en remplacement de l'icône Divi. */
.htag-ppi-nav .et-menu > li.menu-item-has-children > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-right: 0;
}

.htag-ppi-nav .et-menu > li.menu-item-has-children > a::after {
	content: "▼";
	font-family: var(--gvid-ppifonttit), sans-serif;
	font-size: 9px;
	color: var(--gcid-ppirouge01);
	position: static;
	top: auto;
	right: auto;
	margin: 0;
	opacity: 1;
}

/* ---------- MEGA-MENU — panneau pleine largeur au survol ----------
   `:focus-within` en plus de `:hover` : un menu au seul survol serait
   inatteignable au clavier. Rendu visuel identique. ---------- */
.htag-ppi-navbar .et-menu li.menu-item-has-children > ul.sub-menu {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	width: auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gvid-ppiespace1) var(--gvid-ppiespace5);
	/* Fond pleine largeur, grille centrée à 1100 ; `max()` garde 40px de
	   respiration sous 1180px. */
	margin: 0;
	padding: 34px max(var(--gvid-ppiespace5), calc((100% - 1100px) / 2));
	background: var(--gcid-ppiblanc01);
	border-top: 0;
	border-bottom: 3px solid var(--gcid-ppirouge01);
	box-shadow: 0 24px 40px rgba(0, 0, 0, .14);
	opacity: 0;
	visibility: hidden;
	transform: none;
	transition: opacity .18s ease, visibility .18s ease;
}

/* La row est `position:relative` chez Divi : sans ceci, le panneau s'ancre sur
   elle (donc dans son padding de 40px) au lieu de la navbar pleine largeur. */
.htag-ppi-navbar > .et_pb_row {
	position: static;
}

/* Le panneau doit couvrir la largeur de la NAVBAR : on repasse en `static` toute
   la chaîne que Divi met en `relative` (li, wrappers du module Menu, colonne).
   /!\ Le sélecteur du `li` recopie celui de Divi (0-3-3) : moins spécifique, il perd. */
.htag-ppi-navbar .et_pb_menu .et_pb_menu__menu > nav > ul > li,
.htag-ppi-navbar .et_pb_menu,
.htag-ppi-navbar .et_pb_menu_inner_container,
.htag-ppi-navbar .et_pb_menu__wrap,
.htag-ppi-navbar .et_pb_menu__menu,
.htag-ppi-navbar .et-menu-nav,
.htag-ppi-navbar .et_pb_column {
	position: static;
}

.htag-ppi-navbar .et-menu li.menu-item-has-children:hover > ul.sub-menu,
.htag-ppi-navbar .et-menu li.menu-item-has-children:focus-within > ul.sub-menu {
	opacity: 1;
	visibility: visible;
}

.htag-ppi-navbar .et-menu ul.sub-menu li {
	margin: 0;
	padding: 0;
	width: auto;
	border: 0;
}

.htag-ppi-navbar .et-menu ul.sub-menu li a {
	display: flex;
	gap: 14px;
	width: auto;
	padding: 14px 12px;
	border-radius: var(--gvid-ppirayonm0);
	color: var(--gcid-ppianthr01);
	transition: background-color .18s ease;
}

.htag-ppi-navbar .et-menu ul.sub-menu li a:hover,
.htag-ppi-navbar .et-menu ul.sub-menu li a:focus-visible {
	background: var(--gcid-ppiblcas01);
	color: var(--gcid-ppianthr01);
	opacity: 1;
}

.htag-ppi-mega__num {
	font-family: var(--gvid-ppifontetq), monospace;
	font-size: 13px;
	font-weight: 700;
	color: var(--gcid-ppirouge01);
	line-height: 1.4;
}

.htag-ppi-mega__titre {
	display: block;
	font-family: var(--gvid-ppifonttit), sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.htag-ppi-mega__desc {
	display: block;
	margin-top: 2px;
	font-size: 12.5px; /* hors palette : accroche du mega-menu, maquette l.56 */
	font-weight: 400;
	color: var(--gcid-ppigrism01);
	line-height: 1.4;
}

/* ---------- Fil d'Ariane — barre de 48px, collante sous la navbar ---------- */
.htag-ppi-fil-barre {
	position: sticky;
	top: var(--navbar-h);
	z-index: 39;
	background: var(--gcid-ppiblcas01);
	border-bottom: 1px solid rgba(0, 0, 0, .07);
}

.htag-ppi-fil-barre > .et_pb_row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gvid-ppiespace5);
	width: 100%;
	max-width: var(--frame);
	margin: 0 auto;
	height: var(--fil-h);
	padding: 0 var(--gvid-ppiespace5);
}

.htag-ppi-fil-barre .et_pb_column {
	width: auto;
	max-width: none;
	margin: 0;
}

.htag-ppi-fil-zone .et_pb_text_inner,
.htag-ppi-sousnav-zone .et_pb_text_inner {
	display: flex;
	align-items: center;
}

.htag-ppi-sousnav-zone {
	margin-left: auto;
}

/* Markup imposé par yoast_breadcrumb() : le séparateur « / » est un nœud de texte
   nu, non ciblable. D'ou l'inversion : le conteneur porte sa couleur, les éléments
   qui l'entourent reprennent la leur. */
.htag-ppi-fil {
	font-family: var(--gvid-ppifontetq), monospace;
	font-size: var(--gvid-ppitxtetiq);
	font-weight: 400;
	letter-spacing: .08em;
	color: #d3d4d6; /* couleur du séparateur — one-off, hors palette rationalisée */
}

.htag-ppi-fil a {
	color: var(--gcid-ppigrisc01);
	text-decoration: none;
	transition: color .18s ease;
}

.htag-ppi-fil a:hover,
.htag-ppi-fil a:focus-visible {
	color: var(--gcid-ppirouge01);
}

.htag-ppi-fil .breadcrumb_last {
	color: var(--gcid-ppianthr01);
	font-weight: 500;
}

/* ---------- Sous-nav d'ancres — page Services ---------- */
.htag-ppi-sousnav {
	display: flex;
	align-items: center;
	gap: 26px;
	font-size: var(--gvid-ppitxtlegd);
	font-weight: 600;
}

.htag-ppi-sousnav a {
	color: var(--gcid-ppigrisa01);
	text-decoration: none;
	transition: color .18s ease;
}

.htag-ppi-sousnav a:hover,
.htag-ppi-sousnav a:focus-visible {
	color: var(--gcid-ppirouge01);
}

/* ---------- FOOTER — sombre ----------
   Pas d'`id="contact"` ici : la page /contact/ existe et Services a déjà son #contact. */
.htag-ppi-footer {
	border-top: 1px solid rgba(255, 255, 255, .08);
	color: var(--gcid-ppiblanc01);
}

/* `:not(…)` porte la spécificité à 0-3-0, sinon la règle de row Divi (1440) gagne. */
.htag-ppi-footer > .et_pb_row:not([class*="et_flex_column"]) {
	max-width: var(--gvid-ppilargeur);
	width: 100%;
	margin: 0 auto;
}

.htag-ppi-footer .et_pb_column {
	width: auto;
	max-width: none;
	margin: 0;
}

/* Logo sur pastille blanche ; `width:fit-content` car Divi étire ses modules. */
.htag-ppi-footer__logo {
	display: inline-block;
	width: fit-content;
	background: var(--gcid-ppiblanc01);
	padding: 12px 14px;
	border-radius: 8px;
}

.htag-ppi-footer__logo img {
	height: 40px;
	width: auto;
	display: block;
}

.htag-ppi-footer__baseline .et_pb_text_inner p {
	margin: 22px 0 0;
	max-width: 300px;
	font-size: 13.5px; /* hors palette — maquette l.338 */
	line-height: 1.7;
	color: rgba(255, 255, 255, .6);
}

.htag-ppi-footer__groupe .et_pb_text_inner p {
	margin: 18px 0 0;
	font-family: var(--gvid-ppifontetq), monospace;
	font-size: 11.5px;
	letter-spacing: .05em;
	color: rgba(255, 255, 255, .4);
}

/* Sur-titre de colonne — maquette l.342. */
.htag-ppi-footer__titre .et_pb_text_inner p {
	margin: 0 0 16px;
	font-family: var(--gvid-ppifontetq), monospace;
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gcid-ppirouge01);
}

/* Les colonnes de liens sont rendues par le module Menu natif, dont le défaut
   est une barre horizontale : on la repasse en colonne. */
.htag-ppi-footer__menu .et-menu-nav > ul.et-menu {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 11px;
}

.htag-ppi-footer__menu .et-menu > li {
	margin: 0;
	padding: 0;
	float: none;
}

.htag-ppi-footer__menu .et-menu > li > a {
	font-family: var(--gvid-ppifonttit), sans-serif;
	font-size: var(--gvid-ppitxtlegd);
	font-weight: 400;
	color: rgba(255, 255, 255, .72);
	padding: 0;
	transition: color .18s ease;
}

.htag-ppi-footer__menu .et-menu > li > a:hover,
.htag-ppi-footer__menu .et-menu > li > a:focus-visible {
	color: var(--gcid-ppiblanc01);
	opacity: 1;
}

.htag-ppi-footer__contact .et_pb_text_inner p {
	margin: 0;
	font-size: var(--gvid-ppitxtlegd);
	line-height: 1.7;
	color: rgba(255, 255, 255, .72);
}

.htag-ppi-footer__contact .et_pb_text_inner p + p {
	margin-top: var(--gvid-ppiespace4);
}

.htag-ppi-footer__contact a {
	color: var(--gcid-ppiblanc01);
}

/* Barre légale — maquette l.354. */
.htag-ppi-footer__barre {
	margin-top: 44px;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, .1);
}

.htag-ppi-footer__legal .et_pb_text_inner p {
	display: flex;
	gap: 20px;
	margin: 0;
	font-family: var(--gvid-ppifontetq), monospace;
	font-size: 11px;
	letter-spacing: .05em;
	color: rgba(255, 255, 255, .4);
}

.htag-ppi-footer__legal--liens .et_pb_text_inner p {
	justify-content: flex-end;
}

.htag-ppi-footer__legal a {
	color: rgba(255, 255, 255, .4);
	transition: color .18s ease;
}

.htag-ppi-footer__legal a:hover,
.htag-ppi-footer__legal a:focus-visible {
	color: var(--gcid-ppiblanc01);
}

/* ===== PAGE NOS SERVICES — sources/PPI - Maquette Services.dc.html ===== */

/* ---------- Motifs partagés ---------- */

/* Trame blueprint — Divi ne sait pas empiler deux dégradés avec une taille de tuile. */
.htag-ppi-trame--clair,
.htag-ppi-trame--sombre {
	position: relative;
}

.htag-ppi-trame--clair::before,
.htag-ppi-trame--sombre::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-size: 48px 48px;
	z-index: 0;
}

.htag-ppi-trame--clair::before {
	background-image:
		linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 0, 0, .03) 1px, transparent 1px);
}

.htag-ppi-trame--sombre::before {
	background-image:
		linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
}

/* Sur-titre : filet rouge 26-28x2 + texte mono majuscule. */
.htag-ppi-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	font-family: var(--gvid-ppifontetq), monospace;
	font-size: var(--gvid-ppitxtetiq);
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gcid-ppirouge01);
}

/* Sur fond sombre la maquette passe au rouge clair — meilleur contraste. */
.htag-ppi-eyebrow--clair {
	color: var(--gcid-ppisurvol1);
}

.htag-ppi-eyebrow__tiret {
	flex: 0 0 28px;
	height: 2px;
	background: var(--gcid-ppirouge01);
}

.htag-ppi-eyebrow__compteur {
	margin-left: auto;
	color: var(--gcid-ppigrisc01);
	letter-spacing: .16em;
}

/* Équerres d'angle — 20-26px, bordure 2px. */
.htag-ppi-equerres::before,
.htag-ppi-equerres::after {
	content: "";
	position: absolute;
	width: 22px;
	height: 22px;
	pointer-events: none;
	z-index: 3;
}

.htag-ppi-equerres::before {
	top: 20px;
	left: 20px;
	border-left: 2px solid rgba(255, 255, 255, .7);
	border-top: 2px solid rgba(255, 255, 255, .7);
}

.htag-ppi-equerres::after {
	bottom: 20px;
	right: 20px;
	border-right: 2px solid rgba(255, 255, 255, .7);
	border-bottom: 2px solid rgba(255, 255, 255, .7);
}

/* Libellé FIG posé sur une photo. */
.htag-ppi-fig {
	position: absolute;
	bottom: 22px;
	right: 52px;
	z-index: 3;
}

.htag-ppi-fig .et_pb_text_inner p {
	margin: 0;
	font-family: var(--gvid-ppifontetq), monospace;
	font-size: 10.5px; /* hors palette — libellé technique, maquette l.91 */
	letter-spacing: .14em;
	color: rgba(255, 255, 255, .85);
}

/* Vitesses de parallaxe lues par le JS via `--ppi-parallax` (Divi ne pose pas
   d'attribut `data-*`). Valeurs relevées dans la maquette. */
.htag-ppi-parallax {
	will-change: transform;
}

.htag-ppi-parallax--n005 { --ppi-parallax: -0.05; }
.htag-ppi-parallax--n007 { --ppi-parallax: -0.07; }
.htag-ppi-parallax--p008 { --ppi-parallax: 0.08; }
.htag-ppi-parallax--p01  { --ppi-parallax: 0.1; }

/* Sous `prefers-reduced-motion` le JS ne transforme rien : on retire le calque. */
@media (prefers-reduced-motion: reduce) {
	.htag-ppi-parallax {
		will-change: auto;
	}
}

/* Numéraux géants ajourés — README « Motifs récurrents ». */
.htag-ppi-filigrane {
	margin: 0;
	font-family: var(--gvid-ppifonttit), sans-serif;
	font-weight: 900;
	font-size: 220px;
	line-height: .8;
	letter-spacing: -.04em;
	color: transparent;
	-webkit-text-stroke: 2px rgba(0, 0, 0, .05);
	pointer-events: none;
	white-space: nowrap;
}

/* ---------- 1. EN-TÊTE « 1d » — bloc titre + bandeau photo. Maquette l.75-93.
   Padding de section et taille du H1 = paramètres de module. ---------- */
.htag-ppi-1d {
	position: relative;
	overflow: hidden;
}

/* Fond quadrillé blueprint du bloc titre — maquette l.77. */
.htag-ppi-1d::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 0, 0, .03) 1px, transparent 1px);
	background-size: 48px 48px;
}

.htag-ppi-1d__grille {
	position: relative;
	z-index: 1;
	align-items: end; /* titre et chapô alignés en bas — maquette l.78 */
}

.htag-ppi-1d__grille > .et_pb_column {
	width: auto;
	max-width: none;
	margin: 0;
}

/* /!\ Le <span> rouge vit dans le titre : une réédition inline depuis le builder
   peut le faire sauter (le titre reste juste, il perd sa couleur). */
.htag-ppi-1d__titre h1 {
	margin: 18px 0 0;
	text-wrap: balance;
}

.htag-ppi-accent {
	color: var(--gcid-ppirouge01);
}

.htag-ppi-1d__chapo .et_pb_text_inner p {
	margin: 0 0 8px;
	font-size: var(--gvid-ppitxtcour);
	line-height: 1.65;
	color: var(--gcid-ppigrisa01);
	text-wrap: pretty;
}

/* Bandeau photo de l'en-tête (section suivante) — image de FOND native.
   Scrim, équerres et FIG en overlay CSS. */
.htag-ppi-bandeau1d {
	position: relative;
	overflow: hidden;
}

.htag-ppi-bandeau1d::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(13, 14, 16, .1), rgba(13, 14, 16, .3));
}

/* Équerre haut-gauche (l'autre coin est porté par le FIG plus bas). */
.htag-ppi-bandeau1d::after {
	content: "";
	position: absolute;
	top: 20px;
	left: 20px;
	width: 22px;
	height: 22px;
	z-index: 2;
	pointer-events: none;
	border-left: 2px solid rgba(255, 255, 255, .7);
	border-top: 2px solid rgba(255, 255, 255, .7);
}

/* La rangée passe en statique pour que le FIG (absolu) s'ancre sur la section. */
.htag-ppi-bandeau1d__rangee,
.htag-ppi-bandeau1d__rangee > .et_pb_column {
	position: static;
	min-height: 0;
}

/* ---------- 2. NOS EXPERTISES — cartes empilées. Maquette l.96-124.
   /!\ `position:sticky` casse si un ANCÊTRE a `overflow:hidden` : la section reste
   en `overflow:visible`. Chaque carte peut clipper son propre contenu. ---------- */
.htag-ppi-expertises,
.htag-ppi-expertises > .et_pb_row {
	overflow: visible;
}

.htag-ppi-expertises__intro {
	position: relative;
	/* padding vertical via module (150/90). Ici : sides + clip du filigrane. */
	padding-left: var(--gvid-ppiespace5);
	padding-right: var(--gvid-ppiespace5);
	overflow: hidden; /* clippe le filigrane « 08 » ; sibling des cartes, pas ancêtre */
	justify-content: center; /* la row est flex : centre la colonne de contenu */
}

.htag-ppi-expertises__intro > .et_pb_column {
	max-width: var(--gvid-ppilargeur);
	width: 100%;
	margin: 0; /* voir carte : marge auto ferraille avec justify-content en flex */
	position: relative;
	z-index: 1;
}

.htag-ppi-expertises__filigrane {
	position: absolute;
	top: 40px;
	right: -24px;
	z-index: 0;
	margin: 0;
}

.htag-ppi-expertises__titre h2 {
	font-family: var(--gvid-ppifonttit), sans-serif;
	font-weight: 900;
	font-size: 52px; /* H2 harmonisé du README ; le palier 54 est réservé au H1 */
	line-height: 1.02;
	letter-spacing: -.03em;
	margin: 18px 0 0;
	padding: 0;
	max-width: 900px;
	color: var(--gcid-ppianthr01);
}

/* --- La carte ---
   /!\ `.et_pb_row` dans le sélecteur (0-3-0) : la règle `position:relative` de Divi
   (0-2-0 via `:not()`) battait `.htag-ppi-carte` seul et tuait l'empilement. */
.htag-ppi-expertises > .et_pb_row.htag-ppi-carte {
	position: sticky;
	top: var(--header-h);
	max-width: none;
	width: 100%;
	/* padding vertical via module (120px) ; ici le reste de l'habillage. */
	background: var(--gcid-ppiblanc01);
	border-top: 2px solid var(--gcid-ppirouge01);
	border-top-left-radius: 22px;
	border-top-right-radius: 22px;
	box-shadow: 0 -26px 60px rgba(0, 0, 0, .16);
	overflow: hidden;
	display: flex;
	align-items: center;
	/* Contenu centré par le flex : sur un item flex, `margin-left:auto` pousserait
	   la colonne à droite. */
	justify-content: center;
}

/* Trame propre à la carte — un poil plus dense que la trame standard. */
.htag-ppi-carte::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(0, 0, 0, .028) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 0, 0, .028) 1px, transparent 1px);
	background-size: 48px 48px;
}

/* Équerres de la carte — sombres, 26px, à 34px du bord (maquette l.111-112). */
.htag-ppi-carte::after {
	content: "";
	position: absolute;
	top: 26px;
	left: 34px;
	width: 26px;
	height: 26px;
	border-left: 2px solid rgba(0, 0, 0, .25);
	border-top: 2px solid rgba(0, 0, 0, .25);
	pointer-events: none;
}

.htag-ppi-carte__col {
	position: relative;
	z-index: 1;
	max-width: var(--gvid-ppilargeur);
	width: 100%;
	/* Pas de `margin:auto` : sur un item flex elle l'emporte sur `justify-content`. */
	margin: 0;
	padding: 0 60px;
}

.htag-ppi-carte__col > * {
	max-width: 780px;
}

/* Numéral géant ajouré, 440px, coin bas droit. Rouge sur les 2 cartes mises en
   avant (Micro-injection et Bi-injection) — maquette `numStroke`. */
.htag-ppi-carte__filigrane {
	position: absolute;
	right: -40px;
	bottom: -90px;
	z-index: 0;
	max-width: none;
	margin: 0;
	pointer-events: none;
}

.htag-ppi-carte__num {
	margin: 0;
	font-family: var(--gvid-ppifonttit), sans-serif;
	font-weight: 900;
	font-size: 440px;
	line-height: .7;
	letter-spacing: -.05em;
	color: transparent;
	-webkit-text-stroke: 2px rgba(0, 0, 0, .16);
}

.htag-ppi-carte--phare .htag-ppi-carte__num {
	-webkit-text-stroke-color: rgba(226, 6, 26, .55);
}

.htag-ppi-carte__kicker {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	font-family: var(--gvid-ppifontetq), monospace;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gcid-ppirouge01);
}

.htag-ppi-carte__total {
	color: var(--gcid-ppigrisp01);
	font-weight: 500;
}

.htag-ppi-carte__tiret {
	flex: 0 0 26px;
	height: 1px;
	background: var(--gcid-ppirouge01);
}

.htag-ppi-carte__libelle {
	color: var(--gcid-ppigrisc01);
	font-weight: 500;
	letter-spacing: .14em;
}

/* Titre de carte : 60px — variante « display » documentée par le README,
   volontairement hors de l'échelle Hn standard. */
.htag-ppi-carte__titre h3 {
	font-family: var(--gvid-ppifonttit), sans-serif;
	font-weight: 900;
	font-size: 60px;
	line-height: 1.02;
	letter-spacing: -.03em;
	margin: 22px 0 20px;
	padding: 0;
	color: var(--gcid-ppianthr01);
	text-wrap: balance;
}

.htag-ppi-carte__texte .et_pb_text_inner p {
	margin: 0;
	max-width: 680px;
	font-size: var(--gvid-ppitxtchap);
	line-height: 1.6;
	color: var(--gcid-ppigrisa01);
	text-wrap: pretty;
}

/* ---------- Boutons — base commune ----------
   Divi pose `border:2px solid` sans couleur (liseré bleu) + une flèche ::after au
   survol qui décale le libellé. La maquette a sa propre flèche, dans le texte. */
.htag-ppi-carte__cta,
.htag-ppi-cta,
.htag-ppi-contact__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: 0;
	border-radius: var(--gvid-ppirayons0);
	font-family: var(--gvid-ppifonttit), sans-serif;
	font-weight: 700;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.htag-ppi-carte__cta::after,
.htag-ppi-cta::after,
.htag-ppi-contact__cta::after {
	display: none;
}

/* Dimensions figées au survol : au hover Divi change padding ET border (0-3-0), ce
   qui élargit le bouton. On fige les deux à leur valeur de repos (miroir plus bas). */
.htag-ppi-cta.et_pb_module:hover {
	padding: 13px 22px;
	border: 0;
}

.htag-ppi-carte__cta.et_pb_module:hover {
	padding: 15px 26px;
	border: 0;
}

.htag-ppi-contact__cta.et_pb_module:hover {
	padding: 16px 28px;
	border: 0;
}

/* Le bouton fantôme garde sa bordure 1px (elle ne fait que changer de couleur au
   survol) — sinon la règle ci-dessus la supprimerait et le libellé bougerait. */
.htag-ppi-contact__cta--ghost.et_pb_module:hover {
	border: 1px solid var(--gcid-ppiblanc01);
}

/* CTA de la navbar — rouge, maquette Accueil l.52. */
.htag-ppi-cta {
	padding: 13px 22px;
	font-size: 14px;
	background: var(--gcid-ppirouge01);
	color: var(--gcid-ppiblanc01);
}

.htag-ppi-cta:hover {
	background: var(--gcid-ppiactif01);
	color: var(--gcid-ppiblanc01);
}

/* CTA de carte — sombre, vire au rouge au survol. Maquette l.118. */
.htag-ppi-carte__cta {
	margin-top: 34px;
	padding: 15px 26px;
	font-size: 14.5px;
	background: var(--gcid-ppinoir001);
	color: var(--gcid-ppiblanc01);
}

.htag-ppi-carte__cta:hover {
	background: var(--gcid-ppirouge01);
	color: var(--gcid-ppiblanc01);
}

/* ---------- 3. BANDEAU « De l'idée au produit fini ». Maquette l.127-140.
   Hauteur via module ; scrim + trame + texte en overlay CSS, centrés par flex. ---------- */
.htag-ppi-bandeau {
	position: relative;
	margin-top: 70px;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.htag-ppi-bandeau__rangee {
	position: static;
	min-height: 0;
	width: 100%;
	z-index: 2;
}

.htag-ppi-bandeau__rangee > .et_pb_column {
	position: static;
	min-height: 0;
	width: 100%;
	max-width: none;
	margin: 0;
}

/* Scrim horizontal + trame par-dessus l'image de fond, maquette l.129-130. */
.htag-ppi-bandeau::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 48px 48px,
		linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 48px 48px,
		linear-gradient(90deg, rgba(13, 14, 16, .92) 0%, rgba(13, 14, 16, .5) 55%, rgba(13, 14, 16, .2) 100%);
}

/* Eyebrow + accroche : empilées, statiques, centrées à 1200. */
.htag-ppi-bandeau__eyebrow,
.htag-ppi-bandeau__accroche {
	position: relative;
	z-index: 2;
	max-width: var(--gvid-ppilargeur);
	width: 100%;
	margin: 0 auto;
	padding: 0 var(--gvid-ppiespace5);
}

.htag-ppi-bandeau__accroche {
	margin-top: 18px;
}

.htag-ppi-bandeau__accroche .et_pb_text_inner p {
	margin: 0;
	max-width: 760px;
	font-family: var(--gvid-ppifonttit), sans-serif;
	font-weight: 900;
	font-size: var(--gvid-ppitxttit2);
	line-height: 1.04;
	letter-spacing: -.03em;
	color: var(--gcid-ppiblanc01);
}

.htag-ppi-fig--bandeau {
	bottom: 26px;
	right: 60px;
	z-index: 3;
}

/* ---------- 4. POURQUOI CHOISIR PPI — chiffres animés. Maquette l.143-157. ---------- */
.htag-ppi-pourquoi {
	position: relative;
	overflow: hidden;
	padding: 130px var(--gvid-ppiespace5);
}

.htag-ppi-pourquoi::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
	background-size: 48px 48px;
}

.htag-ppi-pourquoi__entete,
.htag-ppi-pourquoi__grille {
	position: relative;
	z-index: 1;
	max-width: var(--gvid-ppilargeur);
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

.htag-ppi-pourquoi__titre h2 {
	font-family: var(--gvid-ppifonttit), sans-serif;
	font-weight: 900;
	font-size: 52px;
	line-height: 1.02;
	letter-spacing: -.03em;
	margin: 18px 0 56px;
	padding: 0;
	color: var(--gcid-ppiblanc01);
}

/* Les filets de la grille sont faits par le fond du conteneur qui transparaît
   dans les gouttières de 2px — maquette l.148. */
.htag-ppi-pourquoi__grille {
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .1);
}

.htag-ppi-chiffre {
	background: var(--gcid-ppinoir001);
	padding: 38px 34px;
	width: auto;
	max-width: none;
	margin: 0;
}

.htag-ppi-chiffre__valeur {
	margin: 0;
	font-family: var(--gvid-ppifonttit), sans-serif;
	font-weight: 900;
	font-size: var(--gvid-ppitxttit1);
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--gcid-ppiblanc01);
}

/* « de 50 à 650 tonnes » et « ISO 9001 & ISO 13485 » sont du texte, pas des
   nombres : la maquette les descend à 34 et 30px. */
.htag-ppi-chiffre__valeur--petit {
	font-size: 34px;
	line-height: 1.1;
	letter-spacing: -.02em;
	padding-top: 8px;
}

.htag-ppi-chiffre__unite {
	color: var(--gcid-ppirouge01);
}

.htag-ppi-chiffre__mot {
	font-size: 26px;
	color: var(--gcid-ppirouge01);
}

.htag-ppi-chiffre__libelle .et_pb_text_inner p {
	margin: 14px 0 0;
	font-family: var(--gvid-ppifontetq), monospace;
	font-size: var(--gvid-ppitxtetiq);
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .62);
}

/* ---------- 5. SECTEURS ACCOMPAGNÉS — maquette l.160-173.
   3 rows × 3 colonnes natives. Ne restent en CSS que le liseré rouge, la
   disposition nom/numéro et les gouttières. ---------- */
.htag-ppi-secteurs__ligne {
	display: flex;
	gap: 16px;
}

/* Colonnes égales : `flex:1` (le `width:auto` de Divi les faisait rétrécir) et
   `flex-direction:row` explicite (Divi met `column`). */
.htag-ppi-secteurs__ligne > .htag-ppi-secteur {
	flex: 1 1 0;
	width: auto;
	max-width: none;
	min-width: 0;
	margin: 0;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.htag-ppi-secteur {
	display: flex;
	gap: 12px;
	border-left: 3px solid var(--gcid-ppirouge01);
	transition: transform .18s ease, box-shadow .18s ease;
}

.htag-ppi-secteur:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(0, 0, 0, .1);
}

/* Le nom (heading) ne doit pas s'étirer ni pousser le numéro à la ligne. */
.htag-ppi-secteur .htag-ppi-secteur__titre {
	flex: 0 1 auto;
	margin: 0;
}

.htag-ppi-secteur .htag-ppi-secteur__num {
	flex: 0 0 auto;
	margin: 0;
}

.htag-ppi-secteur__num .et_pb_text_inner p {
	margin: 0;
	font-family: var(--gvid-ppifontetq), monospace;
	font-size: var(--gvid-ppitxtetiq);
	font-weight: 700;
	color: var(--gcid-ppigrisp01);
}

/* ---------- 6. SUCCESS STORY — maquette l.176-264 ---------- */
.htag-ppi-realisations {
	position: relative;
	overflow: hidden;
	padding: var(--gvid-ppiespace7) var(--gvid-ppiespace5) 60px;
}

.htag-ppi-realisations::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 0, 0, .03) 1px, transparent 1px);
	background-size: 48px 48px;
}

.htag-ppi-realisations__entete,
.htag-ppi-projet {
	position: relative;
	z-index: 1;
	max-width: var(--gvid-ppilargeur);
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

.htag-ppi-realisations__titre h2 {
	font-family: var(--gvid-ppifonttit), sans-serif;
	font-weight: 900;
	font-size: 52px;
	line-height: 1.02;
	letter-spacing: -.03em;
	margin: 18px 0;
	padding: 0;
	color: var(--gcid-ppianthr01);
}

.htag-ppi-realisations__chapo .et_pb_text_inner p {
	margin: 0 0 70px;
	max-width: 720px;
	font-size: 18px;
	line-height: 1.6;
	color: var(--gcid-ppianthm01);
	text-wrap: pretty;
}

/* Les 4 projets alternent photo/texte. La grille est posée dans le module ;
   ici on ne règle que l'espacement vertical entre projets. */
.htag-ppi-projet {
	align-items: center;
}

.htag-ppi-projet + .htag-ppi-projet {
	margin-top: 64px;
}

.htag-ppi-projet > .et_pb_column {
	width: auto;
	max-width: none;
	margin: 0;
}

.htag-ppi-projet__media {
	position: relative;
}

.htag-ppi-projet__photo {
	height: 400px;
	margin: 0;
	border-radius: 16px;
	overflow: hidden;
	background: var(--gcid-ppiblcas01);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* `cover` plutôt que `contain` : remplissage égal du cadre quel que soit le ratio. */
.htag-ppi-projet__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	padding: 0;
	display: block;
}

/* Équerres sombres du cadre photo — maquette l.189-190. */
.htag-ppi-projet__media::before,
.htag-ppi-projet__media::after {
	content: "";
	position: absolute;
	width: 22px;
	height: 22px;
	pointer-events: none;
	z-index: 2;
}

.htag-ppi-projet__media::before {
	top: 14px;
	left: 14px;
	border-left: 2px solid rgba(0, 0, 0, .35);
	border-top: 2px solid rgba(0, 0, 0, .35);
}

.htag-ppi-projet__media::after {
	bottom: 14px;
	right: 14px;
	border-right: 2px solid rgba(0, 0, 0, .35);
	border-bottom: 2px solid rgba(0, 0, 0, .35);
}

/* Pastille numérotée rouge, coin haut droit de la photo. */
.htag-ppi-projet__pastille {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 3;
	margin: 0;
}

.htag-ppi-projet__pastille .et_pb_text_inner p {
	margin: 0;
	padding: 6px 10px;
	border-radius: var(--gvid-ppirayons0);
	background: rgba(226, 6, 26, .92);
	font-family: var(--gvid-ppifontetq), monospace;
	font-size: 10.5px;
	letter-spacing: .14em;
	color: var(--gcid-ppiblanc01);
}

.htag-ppi-projet__num .et_pb_text_inner p {
	margin: 0;
	font-family: var(--gvid-ppifontetq), monospace;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gcid-ppigrisc01);
}

.htag-ppi-projet__titre h3 {
	font-family: var(--gvid-ppifonttit), sans-serif;
	font-weight: 900;
	font-size: 34px;
	line-height: 1.05;
	letter-spacing: -.02em;
	margin: 12px 0 18px;
	padding: 0;
	color: var(--gcid-ppianthr01);
}

.htag-ppi-projet__texte .et_pb_text_inner p {
	margin: 0;
	font-size: var(--gvid-ppitxtcour);
	line-height: 1.65;
	color: var(--gcid-ppigrisa01);
	text-wrap: pretty;
}

.htag-ppi-projet__texte .et_pb_text_inner p + p {
	margin-top: 16px;
}

.htag-ppi-projet__presta {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid rgba(0, 0, 0, .12);
}

.htag-ppi-projet__presta-titre {
	margin: 0 0 10px;
	font-family: var(--gvid-ppifontetq), monospace;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gcid-ppirouge01);
}

.htag-ppi-projet__presta-liste {
	margin: 0;
	font-family: var(--gvid-ppifontetq), monospace;
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--gcid-ppianthm01);
}

/* ---------- 7. CONTACT — maquette l.266-301 ---------- */
.htag-ppi-contact {
	position: relative;
	overflow: hidden;
	padding: 130px var(--gvid-ppiespace5);
}

.htag-ppi-contact::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
	background-size: 48px 48px;
}

/* Filigrane « PPI » ajouré, en bas à droite. Sur fond sombre le contour passe
   au blanc translucide — maquette l.269. */
.htag-ppi-contact__filigrane {
	position: absolute;
	right: -10px;
	bottom: -70px;
	z-index: 0;
	margin: 0;
}

.htag-ppi-contact__filigrane .htag-ppi-filigrane {
	-webkit-text-stroke-color: rgba(255, 255, 255, .05);
}

.htag-ppi-contact__grille {
	position: relative;
	z-index: 1;
	max-width: var(--gvid-ppilargeur);
	width: 100%;
	margin: 0 auto;
	padding: 0;
	align-items: center;
}

.htag-ppi-contact__grille > .et_pb_column {
	width: auto;
	max-width: none;
	margin: 0;
}

.htag-ppi-contact__titre h2 {
	font-family: var(--gvid-ppifonttit), sans-serif;
	font-weight: 900;
	font-size: 52px;
	line-height: 1.02;
	letter-spacing: -.03em;
	margin: 18px 0 0;
	padding: 0;
	color: var(--gcid-ppiblanc01);
}

.htag-ppi-contact__chapo .et_pb_text_inner p {
	margin: 20px 0 0;
	max-width: 520px;
	font-size: var(--gvid-ppitxtchap);
	line-height: 1.55;
	color: rgba(255, 255, 255, .82);
}

.htag-ppi-contact__cta {
	margin-top: 34px;
	margin-right: 14px;
	padding: 16px 28px;
	font-size: 15px;
	background: var(--gcid-ppirouge01);
	color: var(--gcid-ppiblanc01);
}

/* Sur fond sombre, le CTA plein vire au BLANC au survol (règle README). */
.htag-ppi-contact__cta:hover {
	background: var(--gcid-ppiblanc01);
	color: var(--gcid-ppinoir001);
}

.htag-ppi-contact__cta--ghost {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .28);
	color: var(--gcid-ppiblanc01);
}

.htag-ppi-contact__cta--ghost:hover {
	background: transparent;
	border-color: var(--gcid-ppiblanc01);
	color: var(--gcid-ppiblanc01);
}

/* --- Fiche contact --- */
.htag-ppi-fiche {
	position: relative;
	padding: 36px 34px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 16px;
}

/* Équerres débordantes de la fiche — maquette l.281-282. */
.htag-ppi-fiche::before,
.htag-ppi-fiche::after {
	content: "";
	position: absolute;
	width: 22px;
	height: 22px;
	pointer-events: none;
}

.htag-ppi-fiche::before {
	top: -12px;
	right: -12px;
	border-right: 2px solid rgba(255, 255, 255, .35);
	border-top: 2px solid rgba(255, 255, 255, .35);
}

.htag-ppi-fiche::after {
	bottom: -12px;
	left: -12px;
	border-left: 2px solid rgba(255, 255, 255, .35);
	border-bottom: 2px solid rgba(255, 255, 255, .35);
}

.htag-ppi-fiche__titre .et_pb_text_inner p {
	margin: 0;
	font-family: var(--gvid-ppifontetq), monospace;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gcid-ppirouge01);
}

/* Portrait flottant, identité à côté. */
.htag-ppi-fiche__portrait {
	position: relative;
	float: left;
	margin: 18px 18px 0 0;
	width: 88px;
	height: 88px;
}

.htag-ppi-fiche__portrait img {
	width: 88px;
	height: 88px;
	object-fit: cover;
	border-radius: var(--gvid-ppirayonl0);
	display: block;
	filter: grayscale(.15);
}

/* Petite équerre rouge sur le portrait — maquette l.287. */
.htag-ppi-fiche__portrait::after {
	content: "";
	position: absolute;
	bottom: -4px;
	right: -4px;
	width: 16px;
	height: 16px;
	border-right: 2px solid var(--gcid-ppirouge01);
	border-bottom: 2px solid var(--gcid-ppirouge01);
}

.htag-ppi-fiche__identite {
	padding-top: 26px;
	overflow: hidden; /* établit un contexte de formatage à côté du portrait flottant */
}

.htag-ppi-fiche__nom {
	margin: 0;
	font-family: var(--gvid-ppifonttit), sans-serif;
	font-weight: 900;
	font-size: 26px;
	letter-spacing: -.02em;
	line-height: 1.05;
	color: var(--gcid-ppiblanc01);
}

.htag-ppi-fiche__role {
	margin: 4px 0 0;
	font-size: var(--gvid-ppitxtlegd);
	color: rgba(255, 255, 255, .62);
}

.htag-ppi-fiche__coords {
	clear: both;
	margin-top: 26px;
}

.htag-ppi-fiche__ligne {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
}

.htag-ppi-fiche__ligne + .htag-ppi-fiche__ligne {
	margin-top: 14px;
}

.htag-ppi-fiche__cle {
	flex: 0 0 56px;
	font-family: var(--gvid-ppifontetq), monospace;
	font-size: 11px;
	letter-spacing: .12em;
	color: var(--gcid-ppigrisc01);
}

/* Coordonnées en attente : PLACEHOLDERS, pas des données. */
.htag-ppi-fiche__val {
	font-family: var(--gvid-ppifontetq), monospace;
	font-size: 13px;
	color: rgba(255, 255, 255, .5);
}

.htag-ppi-fiche__note {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.htag-ppi-fiche__note .et_pb_text_inner p {
	margin: 0;
	font-family: var(--gvid-ppifontetq), monospace;
	font-size: 11px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .4);
}

/* ===== PAGE ACCUEIL — sources/PPI - Maquette Accueil v2.dc.html ===== */

/* Vitesse de parallaxe supplémentaire (filigrane 1988). */
.htag-ppi-parallax--p012 { --ppi-parallax: 0.12; }

/* ---------- 1. HERO — split sombre / photo, 600px. Maquette l.67-85. ---------- */
.htag-ppi-hero__grille {
	max-width: none;
	width: 100%;
	min-height: 600px;
}

.htag-ppi-hero__grille > .et_pb_column {
	margin: 0;
	width: auto;
	max-width: none;
}

/* Panneau sombre gauche */
.htag-ppi-hero__panneau {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 56px;
	background: var(--gcid-ppinoir001);
	color: var(--gcid-ppiblanc01);
}

/* Trame blueprint du panneau (44px, claire) */
.htag-ppi-hero__panneau::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
	background-size: 44px 44px;
}

.htag-ppi-hero__panneau > * {
	position: relative;
	z-index: 1;
}

/* Filigrane PPI géant, coin bas gauche, rouge translucide */
.htag-ppi-hero__deco {
	position: absolute;
	bottom: -40px;
	left: -30px;
	z-index: 0;
	margin: 0;
}

.htag-ppi-hero__filigrane {
	font-size: 230px;
	color: rgba(226, 6, 26, .16);
	-webkit-text-stroke: 0;
	line-height: .8;
}

.htag-ppi-hero__titre h1 {
	margin: 18px 0 0;
}

.htag-ppi-hero__lead .et_pb_text_inner p {
	margin: 18px 0 0;
	max-width: 480px;
	font-size: var(--gvid-ppitxtcour);
	line-height: 1.55;
	color: rgba(255, 255, 255, .78);
}

/* Photo droite : image de fond (module) + biseau diagonal */
.htag-ppi-hero__photo {
	position: relative;
	overflow: hidden;
	min-height: 600px;
}

.htag-ppi-hero__photo::before {
	content: "";
	position: absolute;
	top: 0;
	left: -1px;
	bottom: 0;
	width: 80px;
	z-index: 2;
	background: var(--gcid-ppinoir001);
	clip-path: polygon(0 0, 100% 0, 0 100%);
}

.htag-ppi-hero__fig {
	position: absolute;
	top: 22px;
	right: 22px;
	z-index: 3;
	margin: 0;
}

.htag-ppi-fig--hero {
	background: rgba(13, 14, 16, .5);
	padding: 6px 10px;
	border-radius: var(--gvid-ppirayons0);
}

.htag-ppi-hero__fig .et_pb_text_inner p {
	margin: 0;
	font-family: var(--gvid-ppifontetq), monospace;
	font-size: 10.5px;
	letter-spacing: .14em;
	color: rgba(255, 255, 255, .85);
}

/* Badge "19 presses" rouge, coin bas droit */
.htag-ppi-hero__badge {
	position: absolute;
	right: 24px;
	bottom: 24px;
	z-index: 3;
	max-width: 290px;
	margin: 0;
	padding: 18px 22px;
	border-radius: 10px;
	background: rgba(226, 0, 26, .94);
	color: var(--gcid-ppiblanc01);
}

.htag-ppi-hero__badge-nb {
	margin: 0;
	font-family: var(--gvid-ppifonttit), sans-serif;
	font-weight: 900;
	font-size: 30px;
	line-height: 1;
}

.htag-ppi-hero__badge-sub {
	margin: 6px 0 0;
	font-family: var(--gvid-ppifontetq), monospace;
	font-size: 11px;
	opacity: .9;
}

/* ---------- 2. STATS — bande sombre, 5 colonnes. Maquette l.87-96. ---------- */
.htag-ppi-stats {
	border-top: 2px solid var(--gcid-ppirouge01);
}

.htag-ppi-stat {
	border-left: 2px solid var(--gcid-ppirouge01);
	padding-left: 18px;
	width: auto;
	max-width: none;
	margin: 0;
}

.htag-ppi-stat__nb {
	margin: 0;
	font-family: var(--gvid-ppifonttit), sans-serif;
	font-weight: 900;
	font-size: 46px;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--gcid-ppiblanc01);
	padding: 0 !important;
}

.htag-ppi-stat__nb--petit {
	font-size: 26px;
	line-height: 1.1;
	letter-spacing: -.01em;
	padding-top: 8px;
}

.htag-ppi-stat__u {
	font-size: 22px;
	color: var(--gcid-ppirouge01);
}

.htag-ppi-stat__lib .et_pb_text_inner p {
	margin: 10px 0 0;
	font-family: var(--gvid-ppifontetq), monospace;
	font-size: 11.5px;
	color: rgba(255, 255, 255, .6);
}

/* ---------- 3. INTRO — filigrane 1988, 2 colonnes. Maquette l.98-111. ---------- */
.htag-ppi-intro {
	position: relative;
	overflow: hidden;
}

.htag-ppi-intro__deco {
	position: absolute;
	top: 10px;
	right: -24px;
	z-index: 0;
	margin: 0;
}

.htag-ppi-intro__grille {
	align-items: end;
	margin-top: 52px;
}

.htag-ppi-intro__grille > .et_pb_column {
	margin: 0;
	width: auto;
	max-width: none;
}

.htag-ppi-intro__lead .et_pb_text_inner p {
	margin: 0;
	max-width: 660px;
	font-size: 24px;
	line-height: 1.45;
	color: var(--gcid-ppianthr01);
	text-wrap: pretty;
}

.htag-ppi-intro__label .et_pb_text_inner p {
	margin: 0 0 16px;
	font-family: var(--gvid-ppifontetq), monospace;
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gcid-ppigrisc01);
}

.htag-ppi-intro__second .et_pb_text_inner p {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--gcid-ppigrism01);
}

/* ---------- 4. PLUS DE 35 ANS — bande sombre + photo. Maquette l.113-132. ---------- */
.htag-ppi-exp {
	position: relative;
	overflow: hidden;
}

.htag-ppi-exp::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
	background-size: 48px 48px;
}

.htag-ppi-exp__deco {
	position: absolute;
	bottom: -70px;
	right: -10px;
	z-index: 0;
	margin: 0;
}

.htag-ppi-exp__deco .htag-ppi-filigrane {
	-webkit-text-stroke-color: rgba(255, 255, 255, .05);
}

.htag-ppi-exp__grille {
	position: relative;
	z-index: 1;
	align-items: start;
}

.htag-ppi-exp__grille > .et_pb_column {
	margin: 0;
	width: auto;
	max-width: none;
}

.htag-ppi-exp__titre h2 {
	margin: 18px 0 0;
}

/* Photo en FOND de bloc : les équerres (--clair) se calent exactement sur les
   coins du bloc. Hauteur via module (min-height 300). */
.htag-ppi-exp__photo {
	position: relative;
	margin: 48px 0 0;
	border-radius: 16px;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
.htag-ppi-exp__photo .et_pb_text_inner { margin: 0; }
.htag-ppi-exp__photo .et_pb_text_inner p { margin: 0; }

.htag-ppi-exp__droite {
	border-left: 2px solid var(--gcid-ppirouge01);
	padding-left: 30px;
	margin-top: 6px;
}

.htag-ppi-exp__lead .et_pb_text_inner p {
	margin: 0;
	font-size: 18px;
	line-height: 1.6;
	color: var(--gcid-ppiblanc01);
}

.htag-ppi-exp__second .et_pb_text_inner p {
	margin: 26px 0 0;
	font-size: 15.5px;
	line-height: 1.7;
	color: rgba(255, 255, 255, .6);
}

/* Équerres claires sur photo (35 ans, exp) */
.htag-ppi-equerres--clair { position: relative; }
.htag-ppi-equerres--clair::before,
.htag-ppi-equerres--clair::after {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	z-index: 2;
	pointer-events: none;
}
.htag-ppi-equerres--clair::before {
	top: 14px;
	left: 14px;
	border-left: 2px solid rgba(255, 255, 255, .85);
	border-top: 2px solid rgba(255, 255, 255, .85);
}
.htag-ppi-equerres--clair::after {
	bottom: 14px;
	right: 14px;
	border-right: 2px solid rgba(255, 255, 255, .85);
	border-bottom: 2px solid rgba(255, 255, 255, .85);
}

/* ---------- 5. OFFRE — stepper collant : steps à gauche, visuel sticky à droite
   (crossfade JS via .htag-ppi-offre__img). Maquette l.134-178. ---------- */
.htag-ppi-offre__titre h2 { margin: 18px 0 0; max-width: 900px; }

.htag-ppi-offre__intro { margin-top: 24px; max-width: 1000px; }
.htag-ppi-offre__intro > .et_pb_column { margin: 0; width: auto; max-width: none; }
.htag-ppi-offre__p1 .et_pb_text_inner p { margin: 0; font-size: var(--gvid-ppitxtcour); line-height: 1.65; color: var(--gcid-ppianthm01); }
.htag-ppi-offre__p2 .et_pb_text_inner p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--gcid-ppigrism01); }

.htag-ppi-offre__grille {
	margin-top: 56px;
	align-items: start;
}
.htag-ppi-offre__grille > .et_pb_column { margin: 0; width: auto; max-width: none; }

/* Colonne des étapes */
.htag-ppi-offre__steps { padding-right: 12px; }
.htag-ppi-offre__steps .et_pb_text_inner { margin: 0; }

.htag-ppi-step {
	cursor: pointer;
	padding: 44px 0 48px;
	border-top: 1px solid rgba(0, 0, 0, .14);
	opacity: .38;
	transition: opacity .45s ease;
}
/* La dernière étape porte le filet du bas */
.htag-ppi-step-wrap:last-child .htag-ppi-step { border-bottom: 1px solid rgba(0, 0, 0, .14); }
.htag-ppi-step.is-active { opacity: 1; }

.htag-ppi-step__kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-family: var(--gvid-ppifontetq), monospace;
	font-size: 12px;
	font-weight: 700;
	color: var(--gcid-ppirouge01);
}
.htag-ppi-step__tiret { width: 22px; height: 1px; background: var(--gcid-ppirouge01); }
.htag-ppi-step__lbl { color: var(--gcid-ppigrisc01); font-weight: 500; letter-spacing: .12em; }

.htag-ppi-step__titre {
	font-family: var(--gvid-ppifonttit), sans-serif;
	font-weight: 800;
	font-size: 30px;
	line-height: 1.08;
	letter-spacing: -.02em;
	margin: 16px 0 12px;
	color: var(--gcid-ppianthr01);
}
.htag-ppi-step__text { margin: 0; font-size: 15px; line-height: 1.62; color: var(--gcid-ppigrisa01); }
.htag-ppi-step__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	font-family: var(--gvid-ppifontetq), monospace;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--gcid-ppirouge01);
	text-decoration: none;
}

/* Visuel sticky droit */
.htag-ppi-offre__visual {
	position: sticky;
	top: calc(var(--header-h) + 22px);
	height: min(620px, calc(100vh - 130px));
	border-radius: 20px;
	overflow: hidden;
	background: var(--gcid-ppianthr01);
}

.htag-ppi-offre__img {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity .5s ease;
}
/* Crossfade : l'image active passe AU-DESSUS (z-index 2) et apparaît par-dessus la
   précédente, sans flash. L'image initiale est activée par le JS (pick()). */
.htag-ppi-offre__img { z-index: 1; }
.htag-ppi-offre__img.is-active { opacity: 1; z-index: 2; }
/* Divi enveloppe l'img dans un span sans hauteur : on force la chaîne à 100%. */
.htag-ppi-offre__img,
.htag-ppi-offre__img .et_pb_image_wrap {
	height: 100%;
	display: block;
}
.htag-ppi-offre__img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Scrim + trame + équerres sur le visuel */
.htag-ppi-offre__visual::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 40px 40px,
		linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 40px 40px,
		linear-gradient(180deg, rgba(13, 14, 16, .15) 0%, rgba(13, 14, 16, .05) 45%, rgba(13, 14, 16, .82) 100%);
}

.htag-ppi-offre__overlay {
	position: absolute;
	left: 34px;
	bottom: 34px;
	right: 34px;
	z-index: 3;
	margin: 0;
	color: var(--gcid-ppiblanc01);
}
.htag-ppi-offre__num {
	margin: 0;
	font-family: var(--gvid-ppifonttit), sans-serif;
	font-weight: 900;
	font-size: 96px;
	line-height: .8;
	letter-spacing: -.04em;
	color: transparent;
	-webkit-text-stroke: 2px rgba(255, 255, 255, .55);
}
.htag-ppi-offre__cap {
	display: inline-block;
	margin: 14px 0 0;
	padding: 7px 12px;
	border-radius: 5px;
	background: rgba(226, 0, 26, .92);
	font-family: var(--gvid-ppifontetq), monospace;
	font-size: 12.5px;
	letter-spacing: .12em;
}

/* ---------- 6. SECTEURS — 4 cartes bordure-haut rouge + tuile sombre. Maquette l.180-196. ---------- */
.htag-ppi-secteurs-home__entete { margin-bottom: 0; }
.htag-ppi-secteurs-home__titre h2 { margin: 18px 0 0; }

.htag-ppi-secteurs-home__grille > .et_pb_column { margin: 0; }

.htag-ppi-sect {
	background: var(--gcid-ppiblanc01);
	border-radius: var(--gvid-ppirayonl0);
	border-top: 3px solid var(--gcid-ppirouge01);
	padding: 26px 24px;
	width: auto;
	max-width: none;
	margin: 0;
	transition: transform .18s ease, box-shadow .18s ease;
}
.htag-ppi-sect:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0, 0, 0, .1); }

.htag-ppi-sect__num { margin: 0; font-family: var(--gvid-ppifontetq), monospace; font-size: 11px; font-weight: 700; color: var(--gcid-ppigrisp01); }
.htag-ppi-sect__titre { font-family: var(--gvid-ppifonttit), sans-serif; font-weight: 700; font-size: 19px; margin: 12px 0 8px; color: var(--gcid-ppianthr01); }
.htag-ppi-sect__text { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--gcid-ppigrism01); }

/* Tuile sombre décorative */
.htag-ppi-sect--dark {
	background: var(--gcid-ppinoir001);
	border-top: 0;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 150px;
}
.htag-ppi-sect--dark::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
	background-size: 26px 26px;
}
.htag-ppi-sect-dark__plus { position: absolute; top: 18px; right: 18px; margin: 0; color: rgba(226, 6, 26, .9); font-size: 26px; line-height: 1; }
.htag-ppi-sect-dark__txt { position: relative; margin: 0; font-family: var(--gvid-ppifontetq), monospace; font-size: 11.5px; letter-spacing: .14em; line-height: 1.6; color: var(--gcid-ppiblanc01); }
.htag-ppi-sect-dark__txt span { color: var(--gcid-ppisurvol1); }

/* ---------- 7. BANDEAU PHOTO pleine largeur. Maquette l.198-214. ---------- */
.htag-ppi-bandeau-home {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
}
.htag-ppi-bandeau-home::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 48px 48px,
		linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 48px 48px,
		linear-gradient(90deg, rgba(13, 14, 16, .9) 0%, rgba(13, 14, 16, .45) 55%, rgba(13, 14, 16, .15) 100%);
}
.htag-ppi-bandeau-home__rangee { position: static; min-height: 0; width: 100%; z-index: 2; }
.htag-ppi-bandeau-home__rangee > .et_pb_column { position: static; min-height: 0; width: 100%; max-width: none; margin: 0; }
.htag-ppi-bandeau-home__eyebrow, .htag-ppi-bandeau-home__accroche { position: relative; z-index: 2; max-width: var(--gvid-ppilargeur); width: 100%; margin: 0 auto; padding: 0 var(--gvid-ppiespace5); }
.htag-ppi-bandeau-home__accroche { margin-top: 18px; }
.htag-ppi-bandeau-home__accroche .et_pb_text_inner p {
	margin: 0;
	max-width: 720px;
	font-family: var(--gvid-ppifonttit), sans-serif;
	font-weight: 900;
	font-size: var(--gvid-ppitxttit2);
	line-height: 1.04;
	letter-spacing: -.03em;
	color: var(--gcid-ppiblanc01);
}

/* ---------- 8. ENTREPRISE / GROUPE — photo + frise. Maquette l.216-256. ---------- */
.htag-ppi-entreprise { position: relative; overflow: hidden; }
.htag-ppi-entreprise::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(0, 0, 0, .035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 0, 0, .035) 1px, transparent 1px);
	background-size: 48px 48px;
}
.htag-ppi-entreprise__haut { position: relative; z-index: 1; align-items: center; }
.htag-ppi-entreprise__haut > .et_pb_column { margin: 0; width: auto; max-width: none; }

.htag-ppi-entreprise__media { position: relative; }
.htag-ppi-entreprise__photo img { width: 100%; height: 460px; object-fit: cover; display: block; border-radius: 20px; }
.htag-ppi-entreprise__badge {
	position: absolute;
	left: -1px;
	bottom: -1px;
	margin: 0;
	padding: 22px 28px;
	border-radius: 16px;
	background: var(--gcid-ppirouge01);
	color: var(--gcid-ppiblanc01);
}
.htag-ppi-entreprise__badge-nb { margin: 0; font-family: var(--gvid-ppifonttit), sans-serif; font-weight: 900; font-size: 40px; line-height: 1; letter-spacing: -.02em; }
.htag-ppi-entreprise__badge-lbl { margin: 8px 0 0; font-family: var(--gvid-ppifontetq), monospace; font-size: 11px; font-weight: 500; letter-spacing: .12em; opacity: .85; }
.htag-ppi-entreprise__tag {
	position: absolute;
	top: 18px;
	right: 52px;
	margin: 0;
}
.htag-ppi-entreprise__tag .et_pb_text_inner p {
	margin: 0;
	padding: 6px 10px;
	border-radius: var(--gvid-ppirayons0);
	background: rgba(13, 14, 16, .5);
	font-family: var(--gvid-ppifontetq), monospace;
	font-size: 10.5px;
	letter-spacing: .14em;
	color: var(--gcid-ppiblanc01);
}
.htag-ppi-entreprise__titre h2 { margin: 16px 0 0; }
.htag-ppi-entreprise__lead .et_pb_text_inner p { margin: 22px 0 0; font-size: 18px; line-height: 1.6; color: var(--gcid-ppianthm01); }

/* Frise : la ligne (::before) se cale au centre des points — 80px de padding-top
   de la row + ~7px de demi-point. */
.htag-ppi-frise { position: relative; z-index: 1; }
.htag-ppi-frise::before {
	content: "";
	position: absolute;
	left: 7px;
	right: 7px;
	top: 87px;
	height: 2px;
	background: rgba(0, 0, 0, .12);
}
.htag-ppi-frise > .et_pb_column { margin: 0; width: auto; max-width: none; }
.htag-ppi-frise__item { position: relative; }
.htag-ppi-frise__point {
	display: block;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--gcid-ppirouge01);
	box-shadow: 0 0 0 6px var(--gcid-ppiblanc01);
}
.htag-ppi-frise__annee { margin: 24px 0 8px; font-family: var(--gvid-ppifonttit), sans-serif; font-weight: 900; font-size: 28px; letter-spacing: -.02em; color: var(--gcid-ppianthr01); }
.htag-ppi-frise__text { margin: 0; max-width: 330px; font-size: 14.5px; line-height: 1.65; color: var(--gcid-ppigrisa01); }

/* ---------- 9. QUALITÉ / RSE — bande sombre. Maquette l.258-297. ---------- */
.htag-ppi-qualite { position: relative; overflow: hidden; }
.htag-ppi-qualite::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
	background-size: 48px 48px;
}
.htag-ppi-qualite__deco { position: absolute; top: -60px; right: -40px; z-index: 0; margin: 0; }
.htag-ppi-qualite__deco .htag-ppi-filigrane { font-size: 230px; -webkit-text-stroke-color: rgba(255, 255, 255, .05); }
.htag-ppi-qualite__haut { position: relative; z-index: 1; align-items: center; }
.htag-ppi-qualite__haut > .et_pb_column { margin: 0; width: auto; max-width: none; }
.htag-ppi-qualite__titre h2 { margin: 16px 0 20px; }
.htag-ppi-qualite__lead .et_pb_text_inner p { margin: 0; max-width: 520px; font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .82); }

/* Cartes ISO en grille 2×2 dans la colonne droite */
.htag-ppi-qualite__cartes {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	position: relative;
}
.htag-ppi-qualite__cartes::before {
	content: "";
	position: absolute;
	top: -14px;
	right: -14px;
	width: 22px;
	height: 22px;
	border-right: 2px solid rgba(255, 255, 255, .35);
	border-top: 2px solid rgba(255, 255, 255, .35);
}
.htag-ppi-qualite__cartes::after {
	content: "";
	position: absolute;
	bottom: -14px;
	left: -14px;
	width: 22px;
	height: 22px;
	border-left: 2px solid rgba(255, 255, 255, .35);
	border-bottom: 2px solid rgba(255, 255, 255, .35);
}
.htag-ppi-iso {
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: var(--gvid-ppirayonl0);
	padding: 26px 22px;
}
.htag-ppi-iso__nom { margin: 0; font-family: var(--gvid-ppifonttit), sans-serif; font-weight: 900; font-size: 24px; color: var(--gcid-ppiblanc01); }
.htag-ppi-iso__lbl { margin: 8px 0 0; font-family: var(--gvid-ppifontetq), monospace; font-size: 11px; color: rgba(255, 255, 255, .55); }

/* Lignes RSE : grille 110 / 240 / 1fr, filets */
.htag-ppi-rse__ligne {
	position: relative;
	z-index: 1;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
	align-items: baseline;
}
.htag-ppi-rse__ligne--first {
	margin-top: 80px !important; /* au-dessus du gap de section ; commenté car exception assumée */
	border-top: 1px solid rgba(255, 255, 255, .16);
}
.htag-ppi-rse__ligne > .et_pb_column { margin: 0; width: auto; max-width: none; }
.htag-ppi-rse__num { margin: 0; font-family: var(--gvid-ppifonttit), sans-serif; font-weight: 900; font-size: 42px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(226, 6, 26, .6); }
.htag-ppi-rse__lbl { margin: 0; padding-top: 10px; font-family: var(--gvid-ppifontetq), monospace; font-size: 12px; letter-spacing: .14em; font-weight: 700; color: var(--gcid-ppiblanc01); }
.htag-ppi-rse__c3 .et_pb_text_inner p { margin: 0; max-width: 740px; font-size: 15.5px; line-height: 1.7; color: rgba(255, 255, 255, .7); }

/* ---------- 10. ACTUALITÉS — module Blog Divi stylé aux cartes de la maquette
   (l.299-317). Dynamique : se met à jour quand le client publie. ---------- */
.htag-ppi-actu__titre h2 { margin: 16px 0 0; }
.htag-ppi-actu__chapo-intro .et_pb_text_inner p { margin: 16px 0 40px; max-width: 640px; font-size: var(--gvid-ppitxtcour); line-height: 1.6; color: var(--gcid-ppigrism01); }

/* Le mode grille Divi utilise salvattore (positionnement absolu) : on repasse les
   articles en flux et on pose une vraie grille 3 colonnes. */
.htag-ppi-actu-blog .et_pb_blog_posts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.htag-ppi-actu-blog .et_pb_blog_posts::after,
.htag-ppi-actu-blog .et_pb_blog_posts::before { display: none; } /* pas de colonnes salvattore */

.htag-ppi-actu-blog .et_pb_post {
	position: relative;
	left: auto;
	top: auto;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 14px;
	overflow: hidden;
	background: var(--gcid-ppiblanc01);
	transition: box-shadow .18s ease;
	display: flex;
	flex-direction: column;
}
.htag-ppi-actu-blog .et_pb_post:hover { box-shadow: 0 14px 30px rgba(0, 0, 0, .1); }

/* Ordre maquette : photo, date, titre, chapô (Divi sort titre avant la date). */
.htag-ppi-actu-blog .et_pb_post .et_pb_image_container { order: 0; }
.htag-ppi-actu-blog .et_pb_post .post-meta { order: 1; }
.htag-ppi-actu-blog .et_pb_post .entry-title { order: 2; }
.htag-ppi-actu-blog .et_pb_post .post-content { order: 3; }

/* Photo 200px cover — sélecteur renforcé pour battre les règles de blog Divi. */
.htag-ppi-actu-blog .et_pb_post .et_pb_image_container,
.htag-ppi-actu-blog .et_pb_post .et_pb_image_container a { display: block; margin: 0; width: 100%; }
.htag-ppi-actu-blog .et_pb_post .et_pb_image_container a.entry-featured-image-url img,
.htag-ppi-actu-blog .et_pb_post .et_pb_image_container img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
}
/* Sans image à la une : placeholder hachuré. */
.htag-ppi-actu-blog .et_pb_post:not(.has-post-thumbnail) .et_pb_image_container { display: none; }

/* Corps de la carte */
.htag-ppi-actu-blog .et_pb_post .post-meta,
.htag-ppi-actu-blog .et_pb_post .entry-title,
.htag-ppi-actu-blog .et_pb_post .post-content { padding-left: 24px; padding-right: 24px; }
.htag-ppi-actu-blog .et_pb_post .post-meta { padding-top: 24px; margin: 0; font-family: var(--gvid-ppifontetq), monospace; font-size: 11px; letter-spacing: .1em; color: var(--gcid-ppirouge01); }
.htag-ppi-actu-blog .et_pb_post .post-meta a { color: var(--gcid-ppirouge01); text-decoration: none; }
.htag-ppi-actu-blog .et_pb_post .entry-title {
	margin: 12px 0 0;
	font-family: var(--gvid-ppifonttit), sans-serif;
	font-weight: 700;
	font-size: 19px;
	line-height: 1.25;
	color: var(--gcid-ppianthr01);
}
.htag-ppi-actu-blog .et_pb_post .entry-title a { color: inherit; text-decoration: none; }
.htag-ppi-actu-blog .et_pb_post .post-content {
	padding-bottom: 24px;
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--gcid-ppigrism01);
}
.htag-ppi-actu-blog .et_pb_post .post-content p { margin: 0; }

/* ---------- 11. PARTENAIRES — entête + carousel `[htag_logo_carousel]` (le marquee
   vient du plugin ; ici on cale seulement le conteneur). Maquette l.319-331. ---------- */
.htag-ppi-part__entete { text-align: center; }
.htag-ppi-part__titre h2 { margin: 0; }

/* Le module texte du shortcode doit être pleine largeur pour le carousel. */
.htag-ppi-part__marquee {
	width: 100%;
	margin-top: 28px;
}
.htag-ppi-part__marquee .et_pb_text_inner { width: 100%; }

/* Léger fondu sur les bords du bandeau (les logos entrent/sortent en douceur). */
.htag-ppi-part__marquee .htag-lc {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/* ---------- Boutons de l'accueil (bordure/padding figés au hover) ---------- */
.htag-ppi-hero__cta, .htag-ppi-entreprise__cta, .htag-ppi-qualite__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: 0;
	border-radius: var(--gvid-ppirayons0);
	font-family: var(--gvid-ppifonttit), sans-serif;
	font-weight: 700;
	font-size: 14px;
	padding: 15px 26px;
	transition: background-color .18s ease, color .18s ease;
}
.htag-ppi-hero__cta::after, .htag-ppi-entreprise__cta::after, .htag-ppi-qualite__cta::after { display: none; }
.htag-ppi-hero__cta.et_pb_module:hover, .htag-ppi-entreprise__cta.et_pb_module:hover, .htag-ppi-qualite__cta.et_pb_module:hover { padding: 15px 26px; border: 0; }

/* Hero + qualité : rouge → blanc au survol (sur sombre). */
.htag-ppi-hero__cta, .htag-ppi-qualite__cta { margin-top: 24px; background: var(--gcid-ppirouge01); color: var(--gcid-ppiblanc01); }
.htag-ppi-hero__cta:hover, .htag-ppi-qualite__cta:hover { background: var(--gcid-ppiblanc01); color: var(--gcid-ppinoir001); }
/* Entreprise : sombre → rouge (sur clair). */
.htag-ppi-entreprise__cta { margin-top: 28px; background: var(--gcid-ppinoir001); color: var(--gcid-ppiblanc01); }
.htag-ppi-entreprise__cta:hover { background: var(--gcid-ppirouge01); color: var(--gcid-ppiblanc01); }

/* ===== PPI — Supplément « Notre entreprise » ===== */

/* Mot du Directeur */
.htag-ppi-ne-dir__guillemet{ font-family: var(--gvid-ppifonttit); font-weight: 900; font-size: 56px;
  line-height: .8; color: var(--gcid-ppirouge01); }
.htag-ppi-ne-dir__cite{ font-family: var(--gvid-ppifonttit); font-weight: 700; font-size: 26px; line-height: 1.35;
  letter-spacing: -.01em; color: var(--gcid-ppianthr01); margin: 22px 0 0; }
.htag-ppi-ne-dir__sign{ font-family: var(--gvid-ppifontetq); font-size: var(--gvid-ppitxtlegd, 12px);
  color: var(--gcid-ppigrisa01, #a9abad); margin-top: 24px; letter-spacing: .05em; }

/* ===== PPI — Supplément « Qualité & RSE » ===== */

/* ---- (10) POURQUOI CHOISIR (centré, eyebrow double tiret) ---- */
.htag-ppi-qr-pourquoi__rangee{ text-align: center; }
.htag-ppi-qr-pourquoi .htag-ppi-eyebrow{ display: inline-flex; justify-content: center; }
.htag-ppi-qr-pourquoi .htag-ppi-eyebrow::after{ content: ""; width: 26px; height: 2px; background: var(--gcid-ppirouge01); }
.htag-ppi-qr-pourquoi__titre{ margin: 20px 0 40px; }
.htag-ppi-qr-pourquoi__chips{ display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.htag-ppi-qr-pourquoi__chips .htag-ppi-ne-chip{ padding: 10px 15px; }

/* ---- (11) ANIMATION DES BARRES (largeur pilotée par data-w + JS IntersectionObserver) ---- */
.htag-ppi-qr-parite__bar span, .htag-ppi-qr-axe__bar span{ width: 0; transition: width 1.2s cubic-bezier(.2,.7,.2,1); }

/* ---- (2) MANIFESTE (bandeau centré) ---- */
.htag-ppi-qr-manif{ text-align: center; max-width: 1000px; margin: 0 auto; }
.htag-ppi-qr-manif__q{ font-family: var(--gvid-ppifonttit); font-weight: 900; font-size: 38px;
  line-height: 1.28; letter-spacing: -.02em; color: var(--gcid-ppianthr01); margin: 0; }
.htag-ppi-qr-manif__p{ font-size: 17px; line-height: 1.6; color: var(--gcid-ppigrism01, #4a4d51); max-width: 640px; margin: 24px auto 0; }

/* ---- (3) SMQSE : carte sombre à coches ---- */
.htag-ppi-qr-carte-coches{ background: var(--gcid-ppinoir001); color: #fff; border-radius: var(--gvid-ppirayonl0, 16px); padding: 38px 34px; }
.htag-ppi-qr-carte-coches .htag-ppi-qr-coche__t{ color: rgba(255,255,255,.85); }
.htag-ppi-qr-carte-coches .htag-ppi-ne-cite__k{ margin-bottom: 22px; }

/* ---- (4) CARTES CERTIFICATIONS ---- */
.htag-ppi-qr-certif{ border: 1px solid rgba(0,0,0,.1); border-radius: var(--gvid-ppirayonl0, 16px); padding: 40px 36px; height:100%; }
.htag-ppi-qr-certif__haut{ display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.htag-ppi-qr-certif__nom{ font-family: var(--gvid-ppifonttit); font-weight: 900; font-size: 38px; letter-spacing: -.03em; color: var(--gcid-ppianthr01); }
.htag-ppi-qr-certif__depuis{ font-family: var(--gvid-ppifontetq); font-size: 11px; letter-spacing: .12em; color: var(--gcid-ppirouge01);
  font-weight: 700; border: 1px solid rgba(226,6,26,.35); padding: 5px 10px; border-radius: var(--gvid-ppirayons0, 4px); white-space: nowrap; }
.htag-ppi-qr-certif__dom{ font-size: 15px; font-weight: 700; color: var(--gcid-ppirouge01); margin: 6px 0 0; }
.htag-ppi-qr-certif__txt{ font-size: 15.5px; line-height: 1.65; color: var(--gcid-ppigrism01, #4a4d51); margin: 16px 0 0; }

/* ---- (5) BANDEAU MÉTROLOGIE : le DÉGRADÉ se fait dans les réglages de fond de la
   COLONNE Divi (image + dégradé superposé). Ici, uniquement le texte (contenu, donc
   toujours au-dessus du fond). La colonne porte la classe .htag-ppi-qr-metro. ---- */
.htag-ppi-qr-metro{ display: flex; flex-direction: column; justify-content: center; }
/* chaque module (surtitre/titre/texte) est cadré à la largeur de contenu */
.htag-ppi-qr-metro__el{ max-width: var(--gvid-ppilargeur); width: 100%; margin: 0 auto; padding: 0 40px; }
.htag-ppi-qr-metro__titre h2{ max-width: 820px; margin: 18px 0 0; }
.htag-ppi-qr-metro__p{ font-size: 16.5px; line-height: 1.6; color: rgba(255,255,255,.8); margin: 18px 0 0; max-width: 660px; }

/* ---- (6) SOUS-TITRES (h3 des colonnes environnement) ---- */
.htag-ppi-qr-sous__titre{ font-family: var(--gvid-ppifonttit); font-weight: 800; font-size: 30px;
  line-height: 1.12; letter-spacing: -.02em; margin: 16px 0; color: var(--gcid-ppianthr01); }

/* ---- (7) ENCART FRANCE 2030 ---- */
.htag-ppi-qr-banner{ border-top: 1px solid rgba(0,0,0,.1); padding-top: 32px; display: flex; align-items: center; gap: 16px; }
.htag-ppi-qr-banner__tag{ font-family: var(--gvid-ppifontetq); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gcid-ppirouge01); font-weight: 700; border: 1px solid rgba(226,6,26,.35); padding: 6px 12px;
  border-radius: var(--gvid-ppirayons0, 4px); flex: 0 0 auto; }
.htag-ppi-qr-banner__txt{ font-size: 15.5px; line-height: 1.6; color: var(--gcid-ppigrism01, #4a4d51); margin: 0; }
.htag-ppi-qr-banner__txt strong{ color: var(--gcid-ppianthr01); }

/* ---- (8) CARTE PARITÉ (barre) ---- */
.htag-ppi-qr-parite{ background: var(--gcid-ppiblanc01); border-radius: var(--gvid-ppirayonl0, 16px); padding: 40px 36px; height:100%; }
.htag-ppi-qr-parite__row{ display: flex; align-items: flex-end; gap: 12px; }
.htag-ppi-qr-parite__nb{ font-family: var(--gvid-ppifonttit); font-weight: 900; font-size: 56px; line-height: 1;
  letter-spacing: -.03em; color: var(--gcid-ppianthr01); }
.htag-ppi-qr-parite__lbl{ font-size: 14px; color: var(--gcid-ppigrism01, #4a4d51); padding-bottom: 8px; }
.htag-ppi-qr-parite__bar{ margin-top: 20px; height: 14px; border-radius: 8px; overflow: hidden; display: flex; background: #eceae7; }
.htag-ppi-qr-parite__bar span{ background: var(--gcid-ppirouge01); }

/* ---- (9) AXES RSE (barres de progression) ---- */
.htag-ppi-qr-axes{ display: flex; flex-direction: column; gap: 34px; margin-top: 20px; }
.htag-ppi-qr-axe{ border-top: 1px solid rgba(255,255,255,.14); padding-top: 26px; }
.htag-ppi-qr-axe__haut{ display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.htag-ppi-qr-axe__nom{ font-family: var(--gvid-ppifonttit); font-weight: 800; font-size: 26px; letter-spacing: -.02em; color:#fff; }
.htag-ppi-qr-axe__pct{ font-family: var(--gvid-ppifonttit); font-weight: 900; font-size: 40px; letter-spacing: -.03em; color: var(--gcid-ppisurvol1, #ff2b3c); }
.htag-ppi-qr-axe__bar{ margin-top: 16px; height: 12px; border-radius: 8px; background: rgba(255,255,255,.1); overflow: hidden; }
.htag-ppi-qr-axe__bar span{ display: block; height: 100%; background: linear-gradient(90deg, #b3040f, var(--gcid-ppirouge01)); }
.htag-ppi-qr-axe__txt{ font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.66); margin: 16px 0 0; max-width: 900px; }

/* ---- responsive : colonnes 2->1 ---- */
@media(max-width:980px){
  .htag-ppi-qr-smqse__grille,.htag-ppi-qr-cert__grille,.htag-ppi-qr-env__grille,.htag-ppi-qr-eng__grille{ grid-template-columns: 1fr !important; }
  .htag-ppi-qr-metro__q{ font-size: 32px; }
}

/* ===== PPI — COMPOSANTS SERVICE (partagés par les pages service) ===== */

/* ---- NIVEAUX (grille filets fins, numéros contour) ---- */
.htag-ppi-co-niv{ display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; background: rgba(0,0,0,.1); border: 1px solid rgba(0,0,0,.1); }
.htag-ppi-co-niv__item{ background: var(--gcid-ppiblcas01, #f4f3f1); padding: 30px 24px; }
.htag-ppi-co-niv__num{ font-family: var(--gvid-ppifonttit); font-weight: 900; font-size: 34px; line-height: .9; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.5px rgba(226,6,26,.55); margin: 0; }
.htag-ppi-co-niv__lib{ font-size: 16px; font-weight: 700; color: var(--gcid-ppianthr01); margin: 18px 0 0; line-height: 1.3; }
@media(max-width:980px){ .htag-ppi-co-niv{ grid-template-columns: repeat(2,1fr); } }

/* ---- MÉTHODE (étapes : numéro géant + contenu, filet haut) ---- */
.htag-ppi-co-steps{ display: flex; flex-direction: column; }
.htag-ppi-co-step{ display: grid; grid-template-columns: 120px 1fr; gap: 40px; padding: 44px 0; border-top: 1px solid rgba(0,0,0,.12); }
.htag-ppi-co-step__num{ font-family: var(--gvid-ppifonttit); font-weight: 900; font-size: 64px; line-height: .9; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 2px rgba(226,6,26,.6); margin: 0; }
.htag-ppi-co-step__kick{ font-family: var(--gvid-ppifontetq); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gcid-ppirouge01); font-weight: 700; margin: 0; }
.htag-ppi-co-step__titre{ font-family: var(--gvid-ppifonttit); font-weight: 800; font-size: 28px; line-height: 1.12; letter-spacing: -.02em; margin: 12px 0; }
.htag-ppi-co-step__p{ font-size: 16px; line-height: 1.7; color: var(--gcid-ppigrism01, #4a4d51); margin: 0 0 20px; max-width: 760px; }
@media(max-width:980px){ .htag-ppi-co-step{ grid-template-columns: 1fr; gap: 12px; } }

/* ---- BANDEAU PHOTO (dégradé fait dans le fond de la COLONNE Divi) ---- */
.htag-ppi-co-metro{ display: flex; flex-direction: column; justify-content: center; }
.htag-ppi-co-metro__el{ max-width: var(--gvid-ppilargeur); width: 100%; margin: 0 auto; padding: 0 40px; }
.htag-ppi-co-metro__titre h2{ max-width: 820px; margin: 18px 0 0; }
.htag-ppi-co-metro__p{ font-size: 16.5px; line-height: 1.6; color: rgba(255,255,255,.8); margin: 18px 0 0; max-width: 660px; }

/* ---- COLLABORATION (grille 2 col de coches, cellules sombres à filets) ---- */
.htag-ppi-co-collab{ display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); }
.htag-ppi-co-collab__item{ background: var(--gcid-ppinoir001); padding: 26px 24px; display: flex; align-items: flex-start; gap: 14px; }
.htag-ppi-co-collab__t{ font-size: 15.5px; line-height: 1.4; font-weight: 600; color: #fff; }
@media(max-width:600px){ .htag-ppi-co-collab{ grid-template-columns: 1fr; } }

/* ---- TRANSFERT (carte blanche + bénéfices 2x2) ---- */
.htag-ppi-co-transf{ background: var(--gcid-ppiblanc01); border-radius: var(--gvid-ppirayonl0, 16px); padding: 38px 34px; position: relative; height: 100%; }
.htag-ppi-co-transf__grid2{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.htag-ppi-co-transf__b{ display: flex; align-items: flex-start; gap: 12px; background: var(--gcid-ppiblcas01, #f4f3f1); border-radius: 10px; padding: 18px; font-size: 14.5px; line-height: 1.45; font-weight: 600; color: #22262b; }
@media(max-width:600px){ .htag-ppi-co-transf__grid2{ grid-template-columns: 1fr; } }

/* ---- POURQUOI CHOISIR (centré, eyebrow double tiret) ---- */
.htag-ppi-co-pourquoi__rangee{ text-align: center; }
.htag-ppi-co-pourquoi .htag-ppi-eyebrow{ display: inline-flex; justify-content: center; }
.htag-ppi-co-pourquoi .htag-ppi-eyebrow::after{ content: ""; width: 26px; height: 2px; background: var(--gcid-ppirouge01); }
.htag-ppi-co-pourquoi__titre{ margin: 20px 0 40px; }
.htag-ppi-co-pourquoi__chips{ display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.htag-ppi-co-pourquoi__chips .htag-ppi-ne-chip{ padding: 10px 15px; }

/* ---- PARC MACHINES (grille 2 col numérotée, cellules sombres à filets) ---- */
.htag-ppi-co-machines{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); }
.htag-ppi-co-machines__item{ background: var(--gcid-ppinoir001); padding: 22px; display: flex; align-items: center; gap: 14px; }
.htag-ppi-co-machines__n{ font-family: var(--gvid-ppifontetq); font-size: 11px; font-weight: 700; color: var(--gcid-ppisurvol1, #ff2b3c); }
.htag-ppi-co-machines__t{ font-size: 15.5px; font-weight: 600; color: #fff; }
.htag-ppi-co-soustitre{ font-family: var(--gvid-ppifontetq); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gcid-ppirouge01); font-weight: 700; margin: 0 0 20px; }
@media(max-width:600px){ .htag-ppi-co-machines{ grid-template-columns: 1fr; } }

/* ---- COÛT (sous-bloc : kicker+titre à gauche / texte+chips à droite) ---- */
.htag-ppi-co-cout{ margin-top: 70px; border-top: 1px solid rgba(0,0,0,.1); padding-top: 48px; }
.htag-ppi-co-cout__k{ font-family: var(--gvid-ppifontetq); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gcid-ppirouge01); font-weight: 700; margin: 0; }
.htag-ppi-co-cout__titre{ font-family: var(--gvid-ppifonttit); font-weight: 800; font-size: 26px; line-height: 1.15; letter-spacing: -.02em; margin: 12px 0 0; }
.htag-ppi-co-cout__p{ font-size: 15.5px; line-height: 1.7; color: var(--gcid-ppigrism01, #4a4d51); margin: 0 0 18px; }

/* ---- ÉTAPES PROCÉDÉ (grille de cartes : ÉTAPE 0X + tiret + titre + texte) ---- */
.htag-ppi-co-procgrid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; background: rgba(0,0,0,.09); border: 1px solid rgba(0,0,0,.09); }
.htag-ppi-co-procstep{ background: var(--gcid-ppiblanc01); padding: 34px 28px 38px; }
.htag-ppi-co-procstep__n{ font-family: var(--gvid-ppifontetq); font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--gcid-ppirouge01); }
.htag-ppi-co-procstep__tiret{ display: block; width: 34px; height: 2px; background: var(--gcid-ppirouge01); margin: 18px 0 22px; }
.htag-ppi-co-procstep__titre{ font-family: var(--gvid-ppifonttit); font-weight: 800; font-size: 22px; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 12px; }
.htag-ppi-co-procstep__p{ font-size: 14.5px; line-height: 1.6; color: var(--gcid-ppigrism01, #4a4d51); margin: 0; }
.htag-ppi-co-procstep p{ padding-bottom: 0; }
@media(max-width:980px){ .htag-ppi-co-procgrid{ grid-template-columns: repeat(2,1fr); } }

/* ---- CARTES STAT À FILET ROUGE (empilées, ex. parc presses) ---- */
.htag-ppi-co-statcards{ display: flex; flex-direction: column; gap: 16px; }
.htag-ppi-co-statcard{ background: var(--gcid-ppiblanc01); border-left: 3px solid var(--gcid-ppirouge01); border-radius: 12px; padding: 26px 28px; }
.htag-ppi-co-statcard__nb{ font-family: var(--gvid-ppifonttit); font-weight: 900; font-size: 40px; line-height: 1; letter-spacing: -.03em; color: var(--gcid-ppianthr01); margin: 0; }
.htag-ppi-co-statcard__lib{ font-family: var(--gvid-ppifontetq); font-size: 12.5px; color: var(--gcid-ppigrism01, #4a4d51); margin: 12px 0 0; line-height: 1.5; }

/* ---- CARTES MATIÈRES (numéro coin + kicker + titre + puces) ---- */
.htag-ppi-co-mats{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.htag-ppi-co-mat{ background: var(--gcid-ppiblcas01, #f4f3f1); border-radius: 14px; padding: 32px 30px; position: relative; overflow: hidden; }
.htag-ppi-co-mat__n{ position: absolute; top: 18px; right: 20px; font-family: var(--gvid-ppifontetq); font-size: 11px; letter-spacing: .14em; color: #c9cbcd; font-weight: 700; }
.htag-ppi-co-mat__k{ font-family: var(--gvid-ppifontetq); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gcid-ppirouge01); font-weight: 700; }
.htag-ppi-co-mat__titre{ font-family: var(--gvid-ppifonttit); font-weight: 800; font-size: 23px; letter-spacing: -.02em; margin: 12px 0 20px; }
.htag-ppi-co-mat__chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.htag-ppi-co-mat__chip{ font-family: var(--gvid-ppifontetq); font-size: 12.5px; font-weight: 500; color: #22262b; background: var(--gcid-ppiblanc01); border: 1px solid rgba(0,0,0,.1); padding: 7px 12px; border-radius: var(--gvid-ppirayons0, 6px); }
@media(max-width:800px){ .htag-ppi-co-mats{ grid-template-columns: 1fr; } }

/* ---- CARTES TECHNOLOGIES (2 cellules sombres : kicker + titre + textes + mini-stats) ---- */
.htag-ppi-co-techs{ display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); }
.htag-ppi-co-tech{ background: var(--gcid-ppinoir001); padding: 48px 44px; }
.htag-ppi-co-tech__k{ display: flex; align-items: center; gap: 12px; font-family: var(--gvid-ppifontetq); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gcid-ppisurvol1, #ff2b3c); font-weight: 700; }
.htag-ppi-co-tech__k span{ color: rgba(255,255,255,.4); font-weight: 500; }
.htag-ppi-co-tech__k i{ width: 22px; height: 1px; background: var(--gcid-ppirouge01); display: inline-block; font-style: normal; }
.htag-ppi-co-tech__titre{ font-family: var(--gvid-ppifonttit); font-weight: 900; font-size: 30px; line-height: 1.1; letter-spacing: -.02em; color: #fff; margin: 20px 0 18px; }
.htag-ppi-co-tech__p{ font-size: 15.5px; line-height: 1.7; color: rgba(255,255,255,.72); margin: 0 0 14px; }
.htag-ppi-co-tech__stats{ display: flex; gap: 36px; margin-top: 32px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.14); }
.htag-ppi-co-tech__nb{ font-family: var(--gvid-ppifonttit); font-weight: 900; font-size: 34px; line-height: 1; letter-spacing: -.02em; color: #fff; }
.htag-ppi-co-tech__lib{ font-family: var(--gvid-ppifontetq); font-size: 11px; color: rgba(255,255,255,.5); margin-top: 8px; letter-spacing: .04em; }
@media(max-width:800px){ .htag-ppi-co-techs{ grid-template-columns: 1fr; } }

/* ---- CHIFFRES : variante 3 colonnes (sélecteur doublé = spécificité 0-2-0 pour
   battre la règle 4 colonnes de base quel que soit l'ordre de chargement) ---- */
.htag-ppi-ne-stats.htag-ppi-ne-stats--3{ grid-template-columns: repeat(3, 1fr); }
@media(max-width:980px){ .htag-ppi-ne-stats.htag-ppi-ne-stats--3{ grid-template-columns: repeat(2,1fr); } }

/* ---- CHAÎNE INTÉGRÉE (carte sombre : liste numérotée + flèches) ---- */
.htag-ppi-co-chaine{ background: var(--gcid-ppinoir001); border-radius: var(--gvid-ppirayonl0, 16px); padding: 38px 34px; }
.htag-ppi-co-chaine__k{ font-family: var(--gvid-ppifontetq); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gcid-ppisurvol1, #ff2b3c); font-weight: 700; margin: 0 0 22px; }
.htag-ppi-co-chaine__list{ display: flex; flex-direction: column; gap: 12px; }
.htag-ppi-co-chaine__item{ display: flex; align-items: center; gap: 14px; }
.htag-ppi-co-chaine__n{ flex: 0 0 auto; font-family: var(--gvid-ppifontetq); font-size: 12px; font-weight: 700; color: var(--gcid-ppisurvol1, #ff2b3c); width: 30px; }
.htag-ppi-co-chaine__t{ font-size: 16px; font-weight: 600; color: #fff; }
.htag-ppi-co-chaine__fleche{ margin-left: 14px; color: rgba(255,255,255,.25); font-family: var(--gvid-ppifontetq); font-size: 13px; line-height: .6; }

/* ---- CARTES ASSEMBLAGE (grille filets fins : n° contour + titre + texte + badge) ---- */
.htag-ppi-co-asms{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: rgba(0,0,0,.1); border: 1px solid rgba(0,0,0,.1); }
.htag-ppi-co-asm{ background: var(--gcid-ppiblanc01); padding: 38px 34px; }
.htag-ppi-co-asm__haut{ display: flex; align-items: baseline; gap: 14px; }
.htag-ppi-co-asm__n{ font-family: var(--gvid-ppifonttit); font-weight: 900; font-size: 34px; line-height: .9; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.5px rgba(226,6,26,.55); }
.htag-ppi-co-asm__titre{ font-family: var(--gvid-ppifonttit); font-weight: 800; font-size: 24px; letter-spacing: -.02em; margin: 0; }
.htag-ppi-co-asm__badge{ margin-left: auto; font-family: var(--gvid-ppifontetq); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--gcid-ppirouge01); font-weight: 700; border: 1px solid rgba(226,6,26,.35); padding: 4px 8px; border-radius: var(--gvid-ppirayons0, 4px); }
.htag-ppi-co-asm__p{ font-size: 15.5px; line-height: 1.65; color: var(--gcid-ppigrism01, #4a4d51); margin: 16px 0 0; }
@media(max-width:800px){ .htag-ppi-co-asms{ grid-template-columns: 1fr; } }

/* ---- MODES (2 cellules sombres : kicker + titre + texte) ---- */
.htag-ppi-co-modes{ display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 2px; }
.htag-ppi-co-mode{ background: var(--gcid-ppinoir001); color: #fff; padding: 34px; }
.htag-ppi-co-mode__k{ font-family: var(--gvid-ppifontetq); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gcid-ppisurvol1, #ff2b3c); font-weight: 700; }
.htag-ppi-co-mode__titre{ font-family: var(--gvid-ppifonttit); font-weight: 800; font-size: 22px; letter-spacing: -.02em; margin: 12px 0 8px; }
.htag-ppi-co-mode__p{ font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.7); margin: 0; }
@media(max-width:600px){ .htag-ppi-co-modes{ grid-template-columns: 1fr; } }

/* ---- CARTES FINITION (grille bordée : n° rouge + titre + texte) ---- */
.htag-ppi-co-fins{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.htag-ppi-co-fin{ border: 1px solid rgba(0,0,0,.1); border-radius: 14px; padding: 32px 30px; }
.htag-ppi-co-fin__haut{ display: flex; align-items: baseline; gap: 12px; }
.htag-ppi-co-fin__n{ font-family: var(--gvid-ppifontetq); font-size: 12px; font-weight: 700; color: var(--gcid-ppirouge01); }
.htag-ppi-co-fin__titre{ font-family: var(--gvid-ppifonttit); font-weight: 800; font-size: 22px; letter-spacing: -.02em; margin: 0; }
.htag-ppi-co-fin__p{ font-size: 15.5px; line-height: 1.65; color: var(--gcid-ppigrism01, #4a4d51); margin: 14px 0 0; }
@media(max-width:800px){ .htag-ppi-co-fins{ grid-template-columns: 1fr; } }

/* ---- CARTE À COCHES CLAIRE (carte blanche + équerre rouge + kicker + coches) ---- */
.htag-ppi-co-cartecoches{ background: var(--gcid-ppiblanc01); border-radius: var(--gvid-ppirayonl0, 16px); padding: 36px 34px; position: relative; height: 100%; }
.htag-ppi-co-cartecoches__eq{ position: absolute; top: -11px; right: -11px; width: 20px; height: 20px; border-right: 2px solid var(--gcid-ppirouge01); border-top: 2px solid var(--gcid-ppirouge01); }
.htag-ppi-co-cartecoches__k{ font-family: var(--gvid-ppifontetq); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gcid-ppirouge01); font-weight: 700; margin: 0 0 22px; }
.htag-ppi-co-cartecoches .htag-ppi-qr-coche__i{ color: var(--gcid-ppirouge01); }
.htag-ppi-co-cartecoches .htag-ppi-qr-coche__t{ color: #22262b; }

/* ---- CHIPS SOMBRES (sur fond noir) ---- */
.htag-ppi-co-chip--dark{ font-family: var(--gvid-ppifontetq); font-size: 12px; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); padding: 6px 11px; border-radius: var(--gvid-ppirayons0, 6px); }

/* ---- CARTES TECHNOLOGIES : variante 3 colonnes + chips ---- */
.htag-ppi-co-techs--3{ grid-template-columns: repeat(3, 1fr); }
.htag-ppi-co-tech__chips{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
@media(max-width:980px){ .htag-ppi-co-techs--3{ grid-template-columns: 1fr; } }

/* ---- CARTE SOMBRE générique (kicker + titre + texte + chips) ---- */
.htag-ppi-co-darkcard{ background: var(--gcid-ppinoir001); color: #fff; border-radius: var(--gvid-ppirayonl0, 16px); padding: 38px 34px; height: 100%; }
.htag-ppi-co-darkcard__k{ font-family: var(--gvid-ppifontetq); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gcid-ppisurvol1, #ff2b3c); font-weight: 700; margin: 0; }
.htag-ppi-co-darkcard__titre{ font-family: var(--gvid-ppifonttit); font-weight: 900; font-size: 24px; line-height: 1.15; letter-spacing: -.02em; margin: 16px 0 14px; }
.htag-ppi-co-darkcard__p{ font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.72); margin: 0 0 18px; }
.htag-ppi-co-darkcard__chips{ display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- TRAÇABILITÉ (mini-grille 2 statcards + carte sombre pleine largeur) ---- */
.htag-ppi-co-trace{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.htag-ppi-co-trace .htag-ppi-co-statcard{ margin: 0; }
.htag-ppi-co-trace__full{ grid-column: 1 / -1; background: var(--gcid-ppinoir001); color: #fff; border-radius: 12px; padding: 26px 24px; }
.htag-ppi-co-trace__k{ font-family: var(--gvid-ppifontetq); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gcid-ppisurvol1, #ff2b3c); font-weight: 700; margin: 0 0 10px; }
.htag-ppi-co-trace__v{ font-family: var(--gvid-ppifontetq); font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.8); margin: 0; }

/* ---- CARTES COMPOSANTS (grille casse : numéro coin + tiret + libellé) ---- */
.htag-ppi-co-comps{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.htag-ppi-co-comp{ background: var(--gcid-ppiblcas01, #f4f3f1); border-radius: 14px; padding: 28px 26px; position: relative; }
.htag-ppi-co-comp__n{ position: absolute; top: 16px; right: 18px; font-family: var(--gvid-ppifontetq); font-size: 11px; letter-spacing: .14em; color: #c9cbcd; font-weight: 700; }
.htag-ppi-co-comp__tiret{ display: block; width: 30px; height: 2px; background: var(--gcid-ppirouge01); margin-bottom: 18px; }
.htag-ppi-co-comp__lib{ font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--gcid-ppianthr01); }
@media(max-width:600px){ .htag-ppi-co-comps{ grid-template-columns: 1fr; } }

/* ===== PPI — Supplément « Contact » ===== */

@media(max-width:980px){
  .htag-ppi-cont-hero__grille,.htag-ppi-cont-form__grille,.htag-ppi-cont-acces__grille{ grid-template-columns: 1fr !important; }
}

/* ---- (2) HERO CONTACT (sombre, intro à droite) ---- */
.htag-ppi-cont-hero__intro{ font-size: 16.5px; line-height: 1.65; color: rgba(255,255,255,.78); margin: 0; }

/* ---- (3) FORMULAIRE (habillage du Contact Form 7) ----
   Le FORMULAIRE est une grille 2 colonnes : nom/société + email/téléphone se
   placent 2 par ligne ; les champs pleine largeur portent --full. Le `> p`
   neutralise les <p> ajoutés automatiquement par WordPress (wpautop) qui
   cassaient sinon la mise en colonnes. */
.htag-ppi-cf .wpcf7-form{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.htag-ppi-cf .wpcf7-form > p{ display: contents; }
.htag-ppi-cf__field{ display: flex; flex-direction: column; gap: 0px; min-width: 0; }
.htag-ppi-cf__field--full,
.htag-ppi-cf__consent,
.htag-ppi-cf__submit,
.htag-ppi-cf .wpcf7-response-output{ grid-column: 1 / -1; }
.htag-ppi-cf__lbl{ font-family: var(--gvid-ppifontetq); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gcid-ppigrism01, #4a4d51); font-weight: 700; }
.htag-ppi-cf .wpcf7-form-control-wrap{ display: block; }
.htag-ppi-cf input[type=text], .htag-ppi-cf input[type=email], .htag-ppi-cf input[type=tel],
.htag-ppi-cf select, .htag-ppi-cf textarea{
  width: 100%; font-family: var(--gvid-ppifonttit), 'Archivo'; font-size: 15px; color: var(--gcid-ppianthr01);
  background: var(--gcid-ppiblcas01, #f4f3f1); border: 1px solid rgba(0,0,0,.1); border-radius: 8px; padding: 14px 16px; outline: none; }
.htag-ppi-cf select{ appearance: none; -webkit-appearance: none; }
.htag-ppi-cf textarea{ line-height: 1.6; resize: vertical; }
.htag-ppi-cf input:focus, .htag-ppi-cf select:focus, .htag-ppi-cf textarea:focus{ border-color: var(--gcid-ppirouge01); background: #fff; }
.htag-ppi-cf__consent{ display: flex; align-items: flex-start; gap: 12px; font-size: 13.5px; line-height: 1.5; color: var(--gcid-ppigrism01, #4a4d51); }
.htag-ppi-cf__consent .wpcf7-list-item{ margin: 0; }
.htag-ppi-cf__consent input[type=checkbox]{ width: 16px; height: 16px; margin-top: 3px; accent-color: var(--gcid-ppirouge01); }
.htag-ppi-cf__submit{ display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.htag-ppi-cf__btn, .htag-ppi-cf input.wpcf7-submit{
  display: inline-flex; align-items: center; gap: 10px; background: var(--gcid-ppirouge01); color: #fff;
  font-family: var(--gvid-ppifonttit), 'Archivo'; font-weight: 700; font-size: 15px; padding: 16px 30px; border: none;
  border-radius: var(--gvid-ppirayons0, 4px); cursor: pointer; transition: background .2s; }
.htag-ppi-cf__btn:hover, .htag-ppi-cf input.wpcf7-submit:hover{ background: #b3040f; }
.htag-ppi-cf__req{ font-size: 12.5px; color: var(--gcid-ppigrisa01, #a9abad); }
@media(max-width:600px){ .htag-ppi-cf .wpcf7-form{ grid-template-columns: 1fr; } }
.htag-ppi-cf .wpcf7-form br{ display: none; }

/* ---- (4) CARTE COORDONNÉES (sombre) ---- */
.htag-ppi-cont-coord{ background: var(--gcid-ppinoir001); color: #fff; border-radius: var(--gvid-ppirayonl0, 16px); padding: 34px 30px; }
.htag-ppi-cont-coord__k{ font-family: var(--gvid-ppifontetq); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gcid-ppisurvol1, #ff2b3c); font-weight: 700; margin: 0 0 22px; }
.htag-ppi-cont-coord__list{ display: flex; flex-direction: column; gap: 20px; }
.htag-ppi-cont-coord__row{ display: flex; gap: 14px; align-items: flex-start; }
.htag-ppi-cont-coord__cle{ flex: 0 0 auto; font-family: var(--gvid-ppifontetq); font-size: 10px; letter-spacing: .1em; color: #ff8a94; font-weight: 700; width: 44px; padding-top: 2px; }
.htag-ppi-cont-coord__val{ font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.9); }

/* ---- (5) FICHE CONTACT (claire) ---- */
.htag-ppi-cont-fiche{ border: 1px solid rgba(0,0,0,.1); border-radius: var(--gvid-ppirayonl0, 16px); padding: 30px 28px; position: relative; }
.htag-ppi-cont-fiche__eq{ position: absolute; top: -11px; right: -11px; width: 20px; height: 20px; border-right: 2px solid var(--gcid-ppirouge01); border-top: 2px solid var(--gcid-ppirouge01); }
.htag-ppi-cont-fiche__k{ font-family: var(--gvid-ppifontetq); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gcid-ppirouge01); font-weight: 700; }
.htag-ppi-cont-fiche__id{ display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.htag-ppi-cont-fiche__photo{ position: relative; flex: 0 0 auto; }
.htag-ppi-cont-fiche__photo img{ width: 76px; height: 76px; object-fit: cover; border-radius: 12px; display: block; filter: grayscale(.15); }
.htag-ppi-cont-fiche__nom{ font-family: var(--gvid-ppifonttit); font-weight: 900; font-size: 22px; letter-spacing: -.02em; line-height: 1.05; color: var(--gcid-ppianthr01); }
.htag-ppi-cont-fiche__role{ font-size: 13.5px; color: var(--gcid-ppigrism01, #4a4d51); margin-top: 4px; }
.htag-ppi-cont-fiche__lignes{ margin-top: 22px; display: flex; flex-direction: column; gap: 12px; font-family: var(--gvid-ppifontetq); font-size: 12.5px; color: var(--gcid-ppigrisa01, #a9abad); }
.htag-ppi-cont-fiche__ligne{ display: flex; justify-content: space-between; gap: 12px; }
.htag-ppi-cont-fiche__ligne span:last-child{ color: var(--gcid-ppigrism01, #4a4d51); }
.htag-ppi-cont-fiche__rappel{ margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(0,0,0,.08); }
.htag-ppi-cont-fiche__rappel a{ display: inline-flex; align-items: center; gap: 8px; font-family: var(--gvid-ppifonttit); font-weight: 700; font-size: 14px; color: var(--gcid-ppirouge01); }

/* ---- (6) HORAIRES ---- */
.htag-ppi-cont-horaires{ background: var(--gcid-ppiblcas01, #f4f3f1); border-radius: var(--gvid-ppirayonl0, 16px); padding: 26px 28px; }
.htag-ppi-cont-horaires__k{ font-family: var(--gvid-ppifontetq); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gcid-ppirouge01); font-weight: 700; margin: 0 0 16px; }
.htag-ppi-cont-horaires__list{ display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--gcid-ppigrism02, #2b2e32); }
.htag-ppi-cont-horaires__row{ display: flex; justify-content: space-between; }
.htag-ppi-cont-horaires__row span:last-child{ font-family: var(--gvid-ppifontetq); color: var(--gcid-ppigrism01, #4a4d51); }
.htag-ppi-cont-horaires__row--off{ color: var(--gcid-ppigrisa01, #a9abad); }

/* ---- (7) COLONNE COORDONNÉES (pile de 3 cartes) ---- */
.htag-ppi-cont-aside{ display: flex; flex-direction: column; gap: 20px; }

/* ---- (8) CARTES ACCÈS ---- */
.htag-ppi-cont-acces{ display: flex; flex-direction: column; gap: 14px; }
.htag-ppi-cont-acces__item{ display: flex; align-items: flex-start; gap: 14px; background: var(--gcid-ppiblanc01); border-radius: 10px; padding: 16px 18px; }
.htag-ppi-cont-acces__badge{ flex: 0 0 auto; font-family: var(--gvid-ppifontetq); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--gcid-ppirouge01); font-weight: 700; border: 1px solid rgba(226,6,26,.3); padding: 5px 9px; border-radius: var(--gvid-ppirayons0, 4px); }
.htag-ppi-cont-acces__t{ font-size: 15px; line-height: 1.5; color: var(--gcid-ppigrism02, #2b2e32); }

/* ---- (9) CARTE LEAFLET (sombre + pin rouge, équerres + légende) ---- */
.htag-ppi-cont-map{ position: relative; border-radius: var(--gvid-ppirayonl0, 16px); overflow: hidden; height: 440px; background: var(--gcid-ppinoir001); }
.htag-ppi-cont-map__canvas{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.htag-ppi-cont-map .htag-ppi-ne-corner{ z-index: 500; }
.htag-ppi-cont-map__label{ position: absolute; left: 20px; bottom: 18px; z-index: 500; font-family: var(--gvid-ppifontetq); font-size: 10.5px; letter-spacing: .12em; color: rgba(255,255,255,.85); background: rgba(13,14,16,.6); padding: 5px 9px; border-radius: 4px; }
/* marqueur : teardrop rouge (comme la maquette) */
.htag-ppi-cont-pin__d{ position: relative; display: block; width: 26px; height: 26px; }
.htag-ppi-cont-pin__d::before{ content:""; position: absolute; inset: 0; border-radius: 50% 50% 50% 0; background: var(--gcid-ppirouge01); transform: rotate(-45deg); box-shadow: 0 8px 22px rgba(226,6,26,.5); }
.htag-ppi-cont-pin__d::after{ content:""; position: absolute; left: 50%; top: 44%; transform: translate(-50%,-50%); width: 9px; height: 9px; background: #fff; border-radius: 50%; }
/* popup Leaflet aux couleurs du site */
.htag-ppi-cont-map .leaflet-popup-content-wrapper{ background: #fff; border-radius: 8px; }
.htag-ppi-cont-map .leaflet-popup-content{ font-family: var(--gvid-ppifonttit), 'Archivo'; font-weight: 700; color: var(--gcid-ppianthr01); }

/* ===== PPI — COMPOSANTS PARTAGÉS des nouvelles maquettes ===== */

/* ---- FIGURES : photo en fond de COLONNE (éditable) + calque overlay ----
   Le neutraliseur `:not()` force le calque à s'ancrer à la colonne, pas au module. */
.htag-ppi-ne-figcol{ position: relative; overflow: hidden; }
.htag-ppi-ne-figcol--radius{ border-radius: var(--gvid-ppirayonl0, 16px); }
.htag-ppi-ne-figcol :not(.htag-ppi-ne-figcol__ov):not(.htag-ppi-ne-figcol__ov *){ position: static; }
.htag-ppi-ne-figcol__ov{ position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.htag-ppi-ne-figcol__grad{ position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,14,16,.08), rgba(13,14,16,.5)); }
.htag-ppi-ne-corner{ position: absolute; width: 22px; height: 22px; }
.htag-ppi-ne-corner--tl{ top: 18px; left: 18px;
  border-left: 2px solid rgba(255,255,255,.7); border-top: 2px solid rgba(255,255,255,.7); }
.htag-ppi-ne-corner--br{ bottom: 18px; right: 18px;
  border-right: 2px solid rgba(255,255,255,.7); border-bottom: 2px solid rgba(255,255,255,.7); }
.htag-ppi-ne-figcol__label{ position: absolute; bottom: 20px; right: 52px;
  font-family: var(--gvid-ppifontetq), monospace; font-size: 10.5px; letter-spacing: .12em;
  color: rgba(255,255,255,.85); }
.htag-ppi-ne-figcol__label--left{ right: auto; left: 24px; }

/* ---- CHIFFRES : grille à filets fins sombre (nombres + accents rouges) ---- */
.htag-ppi-ne-stats{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); }
.htag-ppi-ne-stats__cell{ background: var(--gcid-ppinoir001); padding: 38px 32px; }
.htag-ppi-ne-stats__nb{ font-family: var(--gvid-ppifonttit); font-weight: 900; font-size: 52px;
  line-height: 1; letter-spacing: -.03em; color: var(--gcid-ppiblanc01); margin: 0; }
.htag-ppi-ne-stats__nb--petit{ font-size: 44px; line-height: 1.05; }
.htag-ppi-ne-stats__lib{ font-family: var(--gvid-ppifontetq), monospace; font-size: 12px;
  color: rgba(255,255,255,.62); margin: 14px 0 0; letter-spacing: .04em; line-height: 1.5; }
@media(max-width:980px){ .htag-ppi-ne-stats{ grid-template-columns: repeat(2,1fr); } }
@media(max-width:600px){ .htag-ppi-ne-stats{ grid-template-columns: 1fr; } }

/* ---- FRISE : grille à filets fins (année rouge + tiret + texte) ---- */
.htag-ppi-ne-frise{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  background: rgba(0,0,0,.1); border: 1px solid rgba(0,0,0,.1); }
.htag-ppi-ne-frise__item{ background: var(--gcid-ppiblanc01); padding: 34px 30px; }
.htag-ppi-ne-frise__annee{ font-family: var(--gvid-ppifonttit); font-weight: 900; font-size: 40px;
  line-height: .9; letter-spacing: -.03em; color: var(--gcid-ppirouge01); margin: 0; }
.htag-ppi-ne-frise__tiret{ display: block; width: 34px; height: 2px; background: rgba(226,6,26,.35); margin: 18px 0 16px; }
.htag-ppi-ne-frise__text{ font-size: 16px; line-height: 1.5; font-weight: 600; color: var(--gcid-ppianthr01); margin: 0; }
@media(max-width:980px){ .htag-ppi-ne-frise{ grid-template-columns: repeat(2,1fr); } }
@media(max-width:600px){ .htag-ppi-ne-frise{ grid-template-columns: 1fr; } }

/* ---- CARTES VALEURS (grille numérotée) ---- */
.htag-ppi-ne-valeurs__full{ grid-column: 1 / -1; }
.htag-ppi-ne-valeur{ border: 1px solid rgba(0,0,0,.1); border-radius: 14px; padding: 34px 32px; height: 100%;
  display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; }
.htag-ppi-ne-valeur__num{ font-family: var(--gvid-ppifonttit); font-weight: 900; font-size: 44px;
  line-height: .85; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(226,6,26,.5); }
.htag-ppi-ne-valeur__titre{ font-family: var(--gvid-ppifonttit); font-weight: 800; font-size: 24px; letter-spacing: -.02em; margin: 0 0 10px; }
.htag-ppi-ne-valeur__texte{ font-size: var(--gvid-ppitxtcour, 15.5px); line-height: 1.65; color: var(--gcid-ppigrism01, #4a4d51); margin:0; }
@media(max-width:980px){ .htag-ppi-ne-valeurs{ grid-template-columns: 1fr !important; } .htag-ppi-ne-valeurs__full,.htag-ppi-ne-valeur--full{ grid-column: auto; } }

/* ---- CHIPS (étiquettes) + variante rouge ---- */
.htag-ppi-ne-chips{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.htag-ppi-ne-chip{ font-family: var(--gvid-ppifontetq); font-size: 12.5px; font-weight: 500;
  color: var(--gcid-ppianthr01); background: var(--gcid-ppiblcas01, #f4f3f1); border: 1px solid rgba(0,0,0,.06);
  padding: 8px 13px; border-radius: var(--gvid-ppirayons0, 6px); }
.htag-ppi-ne-chip--rouge{ color: var(--gcid-ppirouge01); background: rgba(226,6,26,.06); border-color: rgba(226,6,26,.2); }

/* ---- CARTE CITATION / carte sombre (kicker rouge) ---- */
.htag-ppi-ne-cite{ background: var(--gcid-ppinoir001); border-radius: var(--gvid-ppirayonl0, 16px);
  padding: var(--gvid-ppiespace5, 40px) var(--gvid-ppiespace4, 36px); position:relative; }
.htag-ppi-ne-cite__k{ font-family: var(--gvid-ppifontetq); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gcid-ppisurvol1, #ff2b3c); font-weight: 700; margin:0 0 14px; }
.htag-ppi-ne-cite__q{ font-family: var(--gvid-ppifonttit); font-weight: 900; font-size: var(--gvid-ppitxttit2, 30px);
  line-height: 1.2; letter-spacing: -.02em; color: var(--gcid-ppiblanc01); margin: 14px 0 0; }
.htag-ppi-ne-cite__p{ font-size: var(--gvid-ppitxtcour, 15px); line-height: 1.65; color: rgba(255,255,255,.68); margin: 22px 0 0; }

/* ---- LISTE À COCHES (rouge) ---- */
.htag-ppi-qr-coches{ display: flex; flex-direction: column; gap: 14px; }
.htag-ppi-qr-coche{ display: flex; align-items: flex-start; gap: 14px; }
.htag-ppi-qr-coche__i{ flex: 0 0 auto; width: 22px; height: 22px; border: 1.5px solid var(--gcid-ppirouge01);
  border-radius: 5px; color: var(--gcid-ppisurvol1, #ff2b3c); font-family: var(--gvid-ppifontetq), monospace;
  font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.htag-ppi-qr-coche__t{ font-size: 15px; line-height: 1.5; }
.htag-ppi-qr-coche--sombre .htag-ppi-qr-coche__t{ color: rgba(255,255,255,.85); }

/* ---- BANDEAU CENTRÉ (ambition / RSE) ---- */
.htag-ppi-ne-amb{ text-align: center; }
.htag-ppi-ne-amb .htag-ppi-eyebrow{ justify-content: center; }
.htag-ppi-ne-amb__q{ margin-top: 26px; }
.htag-ppi-ne-amb__p{ font-size: 17px; line-height: 1.7; color: rgba(255,255,255,.72); max-width: 720px; margin: 28px auto 0; }

/* ---- HERO : intro à droite ---- */
.htag-ppi-ne-hero__intro p{ font-size: 16px; line-height: 1.65; color: var(--gcid-ppigrism01, #4a4d51); margin: 0 0 8px; }
.htag-ppi-ne-hero__bande{ padding: 0 !important; }

/* ---- CONTACT (partagé, fidèle maquette : carte à équerres + photo + filigrane) ---- */
.htag-ppi-ct__deco{ position: relative; }
.htag-ppi-ct__filigrane{ position: absolute; bottom: -70px; right: -10px; font-size: 220px; z-index: 0; margin: 0; }
.htag-ppi-ct__grille{ align-items: center; }
.htag-ppi-ct__chapo{ font-size: 19px; line-height: 1.55; color: rgba(255,255,255,.82); max-width: 540px; margin: 20px 0 0; }
.htag-ppi-ct__btns{ display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.htag-ppi-ct__btn{ display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; padding: 16px 28px; border-radius: var(--gvid-ppirayons0, 4px); }
.htag-ppi-ct__btn--primary, .htag-ppi-ct__btn--primary:visited{ background: var(--gcid-ppirouge01); color: #fff; }
.htag-ppi-ct__btn--primary:hover{ background: #b3040f; color: #fff; }
.htag-ppi-ct__btn--ghost, .htag-ppi-ct__btn--ghost:visited{ background: none; color: #fff; border: 1px solid rgba(255,255,255,.28); }
.htag-ppi-ct__btn--ghost:hover{ border-color: #fff; color: #fff; }
.htag-ppi-ct__fleche{ font-family: var(--gvid-ppifontetq), monospace; }
.htag-ppi-ct__carte{ border: 1px solid rgba(255,255,255,.16); border-radius: var(--gvid-ppirayonl0, 16px); padding: 36px 34px; position: relative; }
.htag-ppi-ct__eq{ position: absolute; width: 22px; height: 22px; }
.htag-ppi-ct__eq--tr{ top: -12px; right: -12px; border-right: 2px solid rgba(255,255,255,.35); border-top: 2px solid rgba(255,255,255,.35); }
.htag-ppi-ct__eq--bl{ bottom: -12px; left: -12px; border-left: 2px solid rgba(255,255,255,.35); border-bottom: 2px solid rgba(255,255,255,.35); }
.htag-ppi-ct__k{ font-family: var(--gvid-ppifontetq), monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gcid-ppirouge01); font-weight: 700; margin: 0; }
.htag-ppi-ct__id{ display: flex; align-items: center; gap: 18px; margin-top: 18px; }
.htag-ppi-ct__photo{ position: relative; flex: 0 0 auto; display: block; }
.htag-ppi-ct__photo img{ width: 88px; height: 88px; object-fit: cover; border-radius: 12px; display: block; filter: grayscale(.15); }
.htag-ppi-ct__photoeq{ position: absolute; bottom: -4px; right: -4px; width: 16px; height: 16px; border-right: 2px solid var(--gcid-ppirouge01); border-bottom: 2px solid var(--gcid-ppirouge01); }
.htag-ppi-ct__ident{ display: flex; flex-direction: column; }
.htag-ppi-ct__nom{ font-family: var(--gvid-ppifonttit); font-weight: 900; font-size: 26px; letter-spacing: -.02em; line-height: 1.05; color: #fff; }
.htag-ppi-ct__role{ font-size: 14px; color: rgba(255,255,255,.62); margin-top: 4px; }
.htag-ppi-ct__lignes{ margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.htag-ppi-ct__ligne{ display: flex; align-items: center; gap: 12px; }
.htag-ppi-ct__cle{ font-family: var(--gvid-ppifontetq), monospace; font-size: 11px; letter-spacing: .12em; color: var(--gcid-ppigrisa01, #a9abad); width: 56px; flex: 0 0 auto; }
.htag-ppi-ct__val{ color: rgba(255,255,255,.5); font-family: var(--gvid-ppifontetq), monospace; font-size: 13px; }
.htag-ppi-ct__note{ margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); font-family: var(--gvid-ppifontetq), monospace; font-size: 11px; line-height: 1.6; color: rgba(255,255,255,.4); margin-bottom: 0; }
@media(max-width:980px){ .htag-ppi-ct__grille{ grid-template-columns: 1fr !important; } }

/* ---- FAQ : habillage du module ACCORDÉON natif Divi (pages service) ---- */
.htag-ppi-faq .et_pb_accordion{ border: 0; }
.htag-ppi-faq .et_pb_toggle{ background: var(--gcid-ppiblanc01); border: 0; border-left: 3px solid rgba(0,0,0,.12);
  border-radius: 12px; margin-bottom: 12px; padding: 26px 28px; box-shadow: none; }
.htag-ppi-faq .et_pb_toggle_open{ border-left-color: var(--gcid-ppirouge01); }
.htag-ppi-faq .et_pb_toggle_title{ font-family: var(--gvid-ppifonttit); font-weight: 700; font-size: 19px;
  letter-spacing: -.01em; color: var(--gcid-ppianthr01); padding: 0; }
.htag-ppi-faq .et_pb_toggle_content{ font-size: 16px; line-height: 1.7; color: var(--gcid-ppigrism01, #4a4d51); padding-top: 16px; margin: 0; }
.htag-ppi-faq .et_pb_toggle .et_pb_toggle_title:before{ color: var(--gcid-ppirouge01); }

/* ===== PPI — Composants « service v2 » (co-conception, études, surmoulage) =====
   Sections split (titre sticky à gauche / corps à droite), listes, grilles de
   cellules à filets, cartes, bandeaux photo. Namespacé htag-ppi-sv-*, additif. */

/* ---- (1) SECTION SPLIT : titre (sticky) à gauche, corps à droite ---- */
.htag-ppi-sv-split__l{ align-self: start; }
@media(min-width:981px){ .htag-ppi-sv-split__l{ position: sticky; top: 110px; } }
.htag-ppi-sv-num{ font-family: var(--gvid-ppifonttit); font-weight: 900; font-size: 76px; line-height: .9; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 2px rgba(226,0,26,.6); margin: 30px 0 0; }
.htag-ppi-sv-num__u{ font-family: var(--gvid-ppifontetq); font-size: 12px; letter-spacing: .1em; margin-top: 12px; line-height: 1.6; }
.htag-ppi-sv--light .htag-ppi-sv-num__u{ color: #7c7f83; }
.htag-ppi-sv--dark  .htag-ppi-sv-num__u{ color: rgba(255,255,255,.5); }
.htag-ppi-sv-bignum{ font-family: var(--gvid-ppifonttit); font-weight: 900; font-size: 110px; line-height: .9; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 2.5px rgba(226,0,26,.6); white-space: nowrap; }
.htag-ppi-sv-bignum__u{ font-family: var(--gvid-ppifontetq); font-size: 12px; letter-spacing: .1em; color: #7c7f83; margin-top: 14px; }

/* ---- (2) CORPS : paragraphes ---- */
.htag-ppi-sv-body > p{ font-size: 16.5px; line-height: 1.75; margin: 0 0 18px; }
.htag-ppi-sv-body > p:last-child{ margin-bottom: 0; }
.htag-ppi-sv-body .htag-ppi-sv-lead{ font-size: 17px; font-weight: 500; }
.htag-ppi-sv--light .htag-ppi-sv-body > p{ color: #3a3d42; }
.htag-ppi-sv--light .htag-ppi-sv-body .htag-ppi-sv-lead{ color: var(--gcid-ppianthr01, #121417); }
.htag-ppi-sv--dark  .htag-ppi-sv-body > p{ color: rgba(255,255,255,.72); }
.htag-ppi-sv--dark  .htag-ppi-sv-body .htag-ppi-sv-lead{ color: #fff; }

/* ---- (3) LISTE À PUCES (carré rouge) ---- */
.htag-ppi-sv-bul{ list-style: none; margin: 4px 0 22px; padding: 0; display: grid; gap: 14px 32px; }
.htag-ppi-sv-bul--2{ grid-template-columns: 1fr 1fr; }
.htag-ppi-sv-bul__i{ display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.55; }
.htag-ppi-sv-bul__i::before{ content: ""; flex: 0 0 auto; width: 7px; height: 7px; background: var(--gcid-ppirouge01); margin-top: 9px; }
.htag-ppi-sv-bul__i--wide{ grid-column: 1 / -1; }
.htag-ppi-sv--light .htag-ppi-sv-bul__i{ color: #22262b; }
.htag-ppi-sv--dark  .htag-ppi-sv-bul__i{ color: rgba(255,255,255,.88); }

/* ---- (4) GRILLE DE CELLULES À FILETS (texte gras) ---- */
.htag-ppi-sv-cells{ display: grid; gap: 2px; margin: 6px 0 26px; }
.htag-ppi-sv-cells--2{ grid-template-columns: 1fr 1fr; }
.htag-ppi-sv-cells--3{ grid-template-columns: 1fr 1fr 1fr; }
.htag-ppi-sv-cells__c{ padding: 23px 22px; font-size: 16px; font-weight: 700; line-height: 1.4; }
.htag-ppi-sv-cells__c--wide{ grid-column: 1 / -1; }
.htag-ppi-sv--light .htag-ppi-sv-cells{ background: rgba(0,0,0,.1); border: 1px solid rgba(0,0,0,.1); }
.htag-ppi-sv--light .htag-ppi-sv-cells__c{ background: var(--gcid-ppiblanc01, #fff); color: var(--gcid-ppianthr01, #121417); }
.htag-ppi-sv--lightcasse .htag-ppi-sv-cells__c{ background: var(--gcid-ppiblcas01, #f4f3f1); }
.htag-ppi-sv--dark .htag-ppi-sv-cells{ background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); }
.htag-ppi-sv--dark .htag-ppi-sv-cells__c{ background: var(--gcid-ppinoir001, #0d0e10); color: #fff; font-weight: 600; }

/* ---- (5) CELLULES « NIVEAU » (numéro contour + libellé) ---- */
.htag-ppi-sv-niv{ display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: rgba(0,0,0,.1); border: 1px solid rgba(0,0,0,.1); margin: 6px 0 32px; }
.htag-ppi-sv-niv__c{ background: var(--gcid-ppiblcas01, #f4f3f1); padding: 24px 22px; }
.htag-ppi-sv-niv__c--wide{ grid-column: 1 / -1; }
.htag-ppi-sv-niv__n{ font-family: var(--gvid-ppifonttit); font-weight: 900; font-size: 28px; line-height: .9; color: transparent; -webkit-text-stroke: 1.5px rgba(226,0,26,.55); }
.htag-ppi-sv-niv__lib{ font-size: 16px; font-weight: 700; color: var(--gcid-ppianthr01, #121417); margin-top: 14px; line-height: 1.35; }

/* ---- (6) LISTE NUMÉROTÉE EN LIGNES (filet) ---- */
.htag-ppi-sv-rows{ display: grid; grid-template-columns: 1fr; gap: 2px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); }
.htag-ppi-sv-rows__r{ background: var(--gcid-ppinoir001, #0d0e10); padding: 24px 26px; display: flex; align-items: center; gap: 16px; }
.htag-ppi-sv-rows__n{ font-family: var(--gvid-ppifontetq); font-size: 12px; color: var(--gcid-ppisurvol1, #ff2b3c); font-weight: 700; }
.htag-ppi-sv-rows__lib{ font-size: 17px; line-height: 1.4; font-weight: 700; color: #fff; }

/* ---- (7) GRILLE DE COCHES (carré rouge ✓) ---- */
.htag-ppi-sv-checks{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px 32px; }
.htag-ppi-sv-checks__i{ display: flex; align-items: flex-start; gap: 13px; }
.htag-ppi-sv-checks__b{ flex: 0 0 auto; width: 22px; height: 22px; border: 1.5px solid var(--gcid-ppirouge01); border-radius: 5px; color: var(--gcid-ppirouge01); font-family: var(--gvid-ppifontetq); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.htag-ppi-sv-checks__t{ font-size: 15.5px; line-height: 1.5; }
.htag-ppi-sv--light .htag-ppi-sv-checks__t{ color: #22262b; font-weight: 600; }
.htag-ppi-sv--dark  .htag-ppi-sv-checks__b{ color: var(--gcid-ppisurvol1, #ff2b3c); }
.htag-ppi-sv--dark  .htag-ppi-sv-checks__t{ color: rgba(255,255,255,.88); }
@media(max-width:860px){ .htag-ppi-sv-checks{ grid-template-columns: 1fr 1fr; } }

/* ---- (8) CARTE (coin équerre, claire ou sombre) ---- */
.htag-ppi-sv-card{ border-radius: 14px; padding: 34px 32px; position: relative; }
.htag-ppi-sv-card--pad{ padding: 44px 40px; }
.htag-ppi-sv-card--white{ background: var(--gcid-ppiblanc01, #fff); }
.htag-ppi-sv-card--dark{ background: var(--gcid-ppinoir001, #0d0e10); color: #fff; overflow: hidden; }
.htag-ppi-sv-card__eq{ position: absolute; width: 20px; height: 20px; }
.htag-ppi-sv-card__eq--tl{ top: -11px; left: -11px; border-left: 2px solid var(--gcid-ppirouge01); border-top: 2px solid var(--gcid-ppirouge01); }
.htag-ppi-sv-card__eq--tr{ top: -11px; right: -11px; border-right: 2px solid var(--gcid-ppirouge01); border-top: 2px solid var(--gcid-ppirouge01); }
.htag-ppi-sv-card__t{ font-family: var(--gvid-ppifonttit); font-weight: 800; font-size: 24px; line-height: 1.16; letter-spacing: -.02em; margin: 0 0 16px; }
.htag-ppi-sv-card--dark .htag-ppi-sv-card__t{ color: #fff; }
.htag-ppi-sv-card__lead{ font-size: 16.5px; line-height: 1.7; margin: 0 0 20px; font-weight: 600; color: var(--gcid-ppianthr01, #121417); }
.htag-ppi-sv-card > p{ font-size: 16px; line-height: 1.72; margin: 0 0 14px; }
.htag-ppi-sv-card > p:last-child{ margin-bottom: 0; }
.htag-ppi-sv-card--white > p{ color: #3a3d42; }
.htag-ppi-sv-card--dark > p{ color: rgba(255,255,255,.8); }
/* mini-liste dans une carte */
.htag-ppi-sv-card .htag-ppi-sv-bul{ margin: 0; }
.htag-ppi-sv-card--dark .htag-ppi-sv-bul__i{ color: rgba(255,255,255,.88); }
.htag-ppi-sv-card--white .htag-ppi-sv-bul__i{ color: #22262b; }

.htag-ppi-sv-card--casse{ background: var(--gcid-ppiblcas01, #f4f3f1); }

/* mini-stats (2 cellules filet : gros nombre + légende mono) */
.htag-ppi-sv-mini{ display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: rgba(0,0,0,.1); border: 1px solid rgba(0,0,0,.1); margin-top: 8px; }
.htag-ppi-sv-mini__c{ background: var(--gcid-ppiblcas01, #f4f3f1); padding: 28px 26px; }
.htag-ppi-sv-mini__nb{ font-family: var(--gvid-ppifonttit); font-weight: 900; font-size: 34px; line-height: 1; letter-spacing: -.03em; color: var(--gcid-ppianthr01, #121417); margin: 0; }
.htag-ppi-sv-mini__u{ font-family: var(--gvid-ppifontetq); font-size: 11.5px; color: #7c7f83; margin: 12px 0 0; letter-spacing: .06em; line-height: 1.5; }
@media(max-width:600px){ .htag-ppi-sv-mini{ grid-template-columns: 1fr; } }

/* rangée de cartes */
.htag-ppi-sv-cards{ display: grid; gap: 24px 32px; align-items: start; }
.htag-ppi-sv-cards--2{ grid-template-columns: 1fr 1fr; }
.htag-ppi-sv-cards--3{ grid-template-columns: 1fr 1fr 1fr; }
@media(max-width:860px){ .htag-ppi-sv-cards--2,.htag-ppi-sv-cards--3{ grid-template-columns: 1fr; } }

/* carte « techno » sombre avec kicker numéroté (surmoulage expertise) */
.htag-ppi-sv-card__k{ font-family: var(--gvid-ppifontetq); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gcid-ppirouge01); font-weight: 700; }
.htag-ppi-sv-card--dark .htag-ppi-sv-card__k{ color: var(--gcid-ppisurvol1, #ff2b3c); }
.htag-ppi-sv-card__h3{ font-family: var(--gvid-ppifonttit); font-weight: 800; font-size: 24px; line-height: 1.16; letter-spacing: -.02em; margin: 14px 0 18px; }
.htag-ppi-sv-card--dark .htag-ppi-sv-card__h3{ color: #fff; }

/* comparatif 2 colonnes (bi-injection) : cellule à filet, accent bord gauche */
.htag-ppi-sv-compare{ display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); }
.htag-ppi-sv-compare__c{ background: var(--gcid-ppinoir001, #0d0e10); padding: 44px 40px; }
.htag-ppi-sv-compare__c--accent{ border-left: 2px solid var(--gcid-ppirouge01); }
.htag-ppi-sv-compare__t{ font-family: var(--gvid-ppifonttit); font-weight: 900; font-size: 26px; letter-spacing: -.02em; margin: 0 0 18px; color: #fff; }
.htag-ppi-sv-compare__p{ font-size: 16.5px; line-height: 1.75; color: rgba(255,255,255,.75); margin: 0; }
@media(max-width:860px){ .htag-ppi-sv-compare{ grid-template-columns: 1fr; } }

/* ---- (9) AVANTAGES : lignes numérotées (gros numéro contour) ---- */
.htag-ppi-sv-adv{ display: flex; flex-direction: column; }
.htag-ppi-sv-adv__r{ display: grid; grid-template-columns: 110px 1fr; gap: 40px; padding: 38px 0; border-top: 1px solid rgba(0,0,0,.12); }
.htag-ppi-sv-adv__r:last-child{ border-bottom: 1px solid rgba(0,0,0,.12); }
.htag-ppi-sv-adv__n{ font-family: var(--gvid-ppifonttit); font-weight: 900; font-size: 56px; line-height: .9; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 2px rgba(226,0,26,.6); }
.htag-ppi-sv-adv__t{ font-family: var(--gvid-ppifonttit); font-weight: 800; font-size: 26px; line-height: 1.14; letter-spacing: -.02em; margin: 0 0 12px; color: var(--gcid-ppianthr01, #121417); }
.htag-ppi-sv-adv__p{ font-size: 16.5px; line-height: 1.75; color: #3a3d42; margin: 0; max-width: 760px; }
@media(max-width:700px){ .htag-ppi-sv-adv__r{ grid-template-columns: 70px 1fr; gap: 22px; } .htag-ppi-sv-adv__n{ font-size: 40px; } }

/* ---- (10) GALERIE RÉALISATIONS (vignettes placeholder) ---- */
.htag-ppi-sv-galtitre{ font-family: var(--gvid-ppifonttit); font-weight: 800; font-size: 22px; letter-spacing: -.02em; color: var(--gcid-ppianthr01, #121417); margin: 0 0 24px; }
.htag-ppi-sv-gal{ display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.htag-ppi-sv-gal__t{ aspect-ratio: 4/3; background: #e3e2df; border: 1px dashed rgba(0,0,0,.2); border-radius: 12px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; font-family: var(--gvid-ppifontetq); font-size: 11px; letter-spacing: .1em; color: #8d9094; }
@media(max-width:860px){ .htag-ppi-sv-gal{ grid-template-columns: 1fr 1fr; } }

/* ---- (10b) GRILLE ÉQUIPEMENTS (numéro mono + libellé) ---- */
.htag-ppi-sv-equip{ display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; background: rgba(0,0,0,.1); border: 1px solid rgba(0,0,0,.1); }
.htag-ppi-sv-equip__c{ background: var(--gcid-ppiblanc01, #fff); padding: 32px 26px; }
.htag-ppi-sv-equip__n{ font-family: var(--gvid-ppifontetq); font-size: 11.5px; color: var(--gcid-ppirouge01); font-weight: 700; letter-spacing: .1em; margin: 0; }
.htag-ppi-sv-equip__lib{ font-size: 17px; font-weight: 700; color: var(--gcid-ppianthr01, #121417); margin: 14px 0 0; line-height: 1.35; }
@media(max-width:860px){ .htag-ppi-sv-equip{ grid-template-columns: 1fr 1fr; } }

/* ---- (11) BANDEAU PHOTO (dégradé gauche + titre) ---- */
/* Photo = fond de COLONNE Divi (éditable) ; ce calque porte le dégradé + le texte.
   Neutraliseur : tout ce qui n'est pas l'overlay repasse en static (cf. figcol). */
.htag-ppi-sv-band{ position: relative; min-height: 400px; overflow: hidden; }
.htag-ppi-sv-band :not(.htag-ppi-sv-band__ov):not(.htag-ppi-sv-band__ov *){ position: static; }
.htag-ppi-sv-band__ov{ position: absolute; inset: 0; z-index: 1; }
.htag-ppi-sv-band__grad{ position: absolute; inset: 0; background: linear-gradient(90deg,rgba(13,14,16,.92) 0%,rgba(13,14,16,.5) 55%,rgba(13,14,16,.2) 100%); z-index: 0; }
.htag-ppi-sv-band__in{ position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); padding: 0 40px; z-index: 2; }
.htag-ppi-sv-band__wrap{ max-width: var(--gvid-ppilargeur); margin: 0 auto; color: #fff; }
.htag-ppi-sv-band__t{ font-family: var(--gvid-ppifonttit); font-weight: 900; font-size: 42px; line-height: 1.06; letter-spacing: -.03em; margin: 18px 0 0; max-width: 820px; }
.htag-ppi-sv-band__p{ font-size: 17px; line-height: 1.65; color: rgba(255,255,255,.82); margin: 18px 0 0; max-width: 680px; }
.htag-ppi-sv-band__fig{ position: absolute; bottom: 26px; right: 60px; z-index: 2; font-family: var(--gvid-ppifontetq); font-size: 10.5px; letter-spacing: .14em; color: rgba(255,255,255,.8); }
.htag-ppi-sv-band .htag-ppi-ne-corner{ z-index: 2; }



/* ============================================================
   PPI — Template Theme Builder « Article » (corps single-post).
   À coller dans la feuille globale AVEC composants-partages.css +
   composants-service.css + composants-service-v2.css.
   Namespacé htag-ppi-art-* + habillage du contenu WordPress .htag-ppi-article.
   ============================================================ */

/* ---- crochets de largeur ---- */
.et_pb_row.htag-ppi-art-hero__row:not([class*="et_flex_column"]){
  max-width: 900px; width: 100%; margin-left: auto; margin-right: auto;
}
.et_pb_row.htag-ppi-art__row:not([class*="et_flex_column"]){
  max-width: 820px; width: 100%; margin-left: auto; margin-right: auto;
}
.et_pb_row.htag-ppi-art-cover__row:not([class*="et_flex_column"]),
.et_pb_row.htag-ppi-art-nav__row:not([class*="et_flex_column"]){
  max-width: var(--gvid-ppilargeur); width: 100%; margin-left: auto; margin-right: auto;
}

/* ---- HERO article ---- */
.htag-ppi-art-hero__meta{ font-family: var(--gvid-ppifontetq); font-size: 12.5px; letter-spacing: .06em; color: rgba(255,255,255,.6); margin: 26px 0 0; }
.htag-ppi-art-hero__meta .htag-ppi-art-hero__sep{ color: rgba(255,255,255,.3); margin: 0 10px; }

/* ---- IMAGE À LA UNE (coins équerres) ---- */
.htag-ppi-art-cover{ position: relative; }
.htag-ppi-art-cover img{ width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--gvid-ppirayonl0, 16px); display: block; }
.htag-ppi-art-cover::before,
.htag-ppi-art-cover::after{ content: ""; position: absolute; width: 24px; height: 24px; z-index: 2; pointer-events: none; }
.htag-ppi-art-cover::before{ top: -10px; left: -10px; border-left: 2px solid var(--gcid-ppirouge01); border-top: 2px solid var(--gcid-ppirouge01); }
.htag-ppi-art-cover::after{ bottom: -10px; right: -10px; border-right: 2px solid var(--gcid-ppirouge01); border-bottom: 2px solid var(--gcid-ppirouge01); }

/* ---- CONTENU DE L'ARTICLE (the_content) ---- */
.htag-ppi-article{ font-size: 17px; line-height: 1.8; color: var(--gcid-ppigrism02, #2b2e32); }
.htag-ppi-article > *:first-child{ margin-top: 0; }
.htag-ppi-article > *:last-child{ margin-bottom: 0; }
.htag-ppi-article p{ margin: 0 0 22px; }
.htag-ppi-article h2{ font-family: var(--gvid-ppifonttit), 'Archivo'; font-weight: 900; font-size: 32px; letter-spacing: -.02em; line-height: 1.12; color: var(--gcid-ppianthr01, #121417); margin: 50px 0 18px; }
.htag-ppi-article h3{ font-family: var(--gvid-ppifonttit), 'Archivo'; font-weight: 800; font-size: 24px; letter-spacing: -.02em; line-height: 1.16; color: var(--gcid-ppianthr01, #121417); margin: 38px 0 14px; }
.htag-ppi-article h4{ font-family: var(--gvid-ppifonttit), 'Archivo'; font-weight: 700; font-size: 19px; color: var(--gcid-ppianthr01, #121417); margin: 30px 0 12px; }
.htag-ppi-article a{ color: var(--gcid-ppirouge01); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.htag-ppi-article strong,.htag-ppi-article b{ color: var(--gcid-ppianthr01, #121417); font-weight: 700; }
.htag-ppi-article ul,.htag-ppi-article ol{ margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 12px; }
.htag-ppi-article ul li{ position: relative; padding-left: 26px; line-height: 1.65; }
.htag-ppi-article ul li::before{ content: ""; position: absolute; left: 2px; top: 11px; width: 7px; height: 7px; background: var(--gcid-ppirouge01); }
.htag-ppi-article ol{ counter-reset: ppiart; }
.htag-ppi-article ol li{ position: relative; padding-left: 38px; line-height: 1.65; counter-increment: ppiart; }
.htag-ppi-article ol li::before{ content: counter(ppiart, decimal-leading-zero); position: absolute; left: 0; top: 2px; font-family: var(--gvid-ppifontetq); font-size: 13px; font-weight: 700; color: var(--gcid-ppirouge01); }
.htag-ppi-article blockquote{ margin: 34px 0; padding: 6px 0 6px 28px; border-left: 3px solid var(--gcid-ppirouge01); font-family: var(--gvid-ppifonttit), 'Archivo'; font-weight: 600; font-size: 22px; line-height: 1.45; letter-spacing: -.01em; color: var(--gcid-ppianthr01, #121417); }
.htag-ppi-article blockquote p{ margin: 0; }
.htag-ppi-article img{ max-width: 100%; height: auto; border-radius: 12px; display: block; margin: 14px 0; }
.htag-ppi-article figure{ margin: 30px 0; }
.htag-ppi-article figcaption{ font-family: var(--gvid-ppifontetq); font-size: 12px; letter-spacing: .04em; color: var(--gcid-ppigrisa01, #a9abad); margin-top: 10px; }
.htag-ppi-article hr{ border: none; border-top: 1px solid rgba(0,0,0,.1); margin: 42px 0; }
.htag-ppi-article > ul li::marker,.htag-ppi-article > ol li::marker{ content: ""; }

/* ---- NAVIGATION PRÉC / SUIV ---- */
.htag-ppi-art-nav{ border-top: 1px solid rgba(0,0,0,.1); padding-top: 30px; }
.htag-ppi-art-nav .et_pb_post_nav{ font-family: var(--gvid-ppifonttit), 'Archivo'; }
.htag-ppi-art-nav a{ color: var(--gcid-ppianthr01, #121417); font-weight: 700; font-size: 15px; }
.htag-ppi-art-nav a:hover{ color: var(--gcid-ppirouge01); }
.htag-ppi-art-nav .nav-previous span,.htag-ppi-art-nav .nav-next span{ color: var(--gcid-ppirouge01); font-family: var(--gvid-ppifontetq); }

/* ============================================================================
   BASCULE DESIGN v3 — 02/09/2026
   Nouveau système graphique : Mulish seule, palette claire rationalisée,
   boutons pilule, plus d'alternance clair/sombre. Périmètre initial : l'accueil
   uniquement (en-tête dédié, préfixe de classes htag-ppi2-). Les anciennes
   classes htag-ppi- restent en l'état pour les pages pas encore migrées.
   ============================================================================ */

/* Divi pose `display:flex;flex-direction:column;row-gap:30px` par défaut sur
   CHAQUE colonne (empilement des modules) — un espacement automatique qui
   s'additionne aux marges déjà posées à la main sur les titres/textes/boutons,
   faussant tous les rythmes verticaux calculés depuis la maquette. On le
   ramène à 0 partout : l'espacement redevient entièrement porté par les
   marges explicites de chaque élément. */
body.home .et_pb_column,
.htag-ppi2-footer .et_pb_column {
	row-gap: 0;
}

body.home {
	--header-h: 0px; /* pas de header sticky sur l'accueil : la nav flotte sur le hero */
}

/* ---------- EN-TÊTE ACCUEIL — transparent, superposé au hero ---------- */
body.home .et-boc {
	position: relative;
}

/* Pas de `.et-l--header` sur ce gabarit : la section d'en-tête (`htag-ppi2-hero-nav`)
   est un enfant direct de `.et-boc`, sans wrapper intermédiaire — vérifié dans le DOM
   rendu le 02/09/2026. On la sort donc du flux directement, elle. */
/* Cette section vit en réalité dans `.et-l--header` (position:sticky, top calé
   à -42px par la règle générique de l'ancien système — cf. ligne ~208 — pensée
   pour une top-bar de 42px que l'accueil n'a pas). Sans neutralisation, le
   header restait à moitié hors champ une fois le scroll dépassé. On neutralise
   l'ancêtre et on gère nous-mêmes le fixed + le fond, avec bascule transparent
   → blanc au scroll (classe `is-scrolled` posée par htag-ppi.js). */
body.home .et-l--header {
	position: static;
}

body.home .htag-ppi2-hero-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 30;
	background: transparent;
	transition: background-color .25s ease, box-shadow .25s ease;
}

body.home .htag-ppi2-hero-nav.is-scrolled {
	/* !important justifié : comme pour les autres sections, Divi pose son propre
	   fond via une règle scopée par id de module (`#et_pb_section_0_tb_header`,
	   specificité 1-0-0) — un sélecteur de classe ne peut pas la battre, même
	   avec trois classes empilées. Vérifié le 02/09/2026.
	   `background-color` en toutes lettres, pas le raccourci `background` : ce
	   dernier restait sans effet une fois combiné à `!important` + `var()` sur
	   cet élément précis (constat isolé, cause exacte non identifiée). */
	background-color: var(--gcid-ppiblanc01) !important;
	box-shadow: 0 2px 16px rgba(30, 47, 63, .10);
}

.htag-ppi2-hero-nav > .et_pb_row {
	/* Cette row rend en `flex` chez Divi (type "row avec module Menu"), pas en
	   `grid` malgré `module.decoration.layout.display:"grid"` posé dans le JSON —
	   ce réglage est silencieusement sans effet sur ce type de row (mesuré le
	   02/09/2026). En flex, sans `justify-content`, les 3 colonnes se tassent à
	   gauche (logo, menu, bouton collés) au lieu de logo/bouton aux extrémités. */
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: var(--frame);
	margin: 0 auto;
	min-height: 96px;
	padding: 0 var(--gvid-ppiespace5);
	transition: min-height .25s ease;
}

.htag-ppi2-hero-nav.is-scrolled > .et_pb_row {
	min-height: 68px;
}

.htag-ppi2-hero-nav.is-scrolled .htag-ppi2-hero-logo img {
	height: 40px;
}

.htag-ppi2-hero-nav > .et_pb_row > .et_pb_column {
	width: auto;
	max-width: none;
	flex: 0 0 auto;
}

.htag-ppi2-hero-logo img {
	height: 52px;
	width: auto;
	display: block;
	transition: height .25s ease;
}

.htag-ppi2-hero-menu .et-menu-nav > ul.et-menu {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 30px;
}

.htag-ppi2-hero-menu .et-menu > li {
	margin: 0;
	padding: 0;
}

.htag-ppi2-hero-menu .et-menu > li > a {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--gcid-ppinavsombre1);
	padding: 0;
	transition: color .18s ease;
}

.htag-ppi2-hero-menu .et-menu > li > a:hover,
.htag-ppi2-hero-menu .et-menu > li > a:focus-visible,
.htag-ppi2-hero-menu .et-menu > li.current-menu-item > a,
.htag-ppi2-hero-menu .et-menu > li.current_page_item > a,
.htag-ppi2-hero-menu .et-menu > li.current-menu-ancestor > a {
	color: var(--gcid-ppirouge01);
}

.htag-ppi2-hero-menu .et-menu > li.menu-item-has-children > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-right: 0;
}

.htag-ppi2-hero-menu .et-menu > li.menu-item-has-children > a::after {
	content: "▼";
	font-size: 8px;
	color: var(--gcid-ppigrisdis01);
	position: static;
	margin: 0;
	opacity: 1;
}

/* Mega-menu — même mécanique pure CSS que l'ancien système (:hover + :focus-within). */
.htag-ppi2-hero-nav .et-menu li.menu-item-has-children > ul.sub-menu {
	position: absolute;
	left: var(--gvid-ppiespace5);
	right: var(--gvid-ppiespace5);
	/* Divi pose `.nav li ul{width:240px}` (dropdown standard, une seule colonne) :
	   `width` explicite l'emporte sur `left+right`, qui se retrouve ignoré (boîte
	   sur-contrainte). `width:auto` referme la boîte sur left/right — même
	   correctif déjà posé sur l'ancien mega-menu (htag-ppi-navbar), oublié ici. */
	width: auto;
	top: 92px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gvid-ppiespace1) var(--gvid-ppiespace6);
	margin: 0;
	padding: 32px 36px;
	background: var(--gcid-ppiblanc01);
	border-top: 2px solid var(--gcid-ppirouge01);
	border-radius: 0 0 16px 16px;
	box-shadow: 0 18px 36px rgba(30, 47, 63, .10);
	opacity: 0;
	visibility: hidden;
	transition: opacity .18s ease, visibility .18s ease;
}

.htag-ppi2-hero-nav .et_pb_row,
.htag-ppi2-hero-nav .et_pb_menu,
.htag-ppi2-hero-nav .et_pb_menu_inner_container,
.htag-ppi2-hero-nav .et_pb_menu__wrap,
.htag-ppi2-hero-nav .et_pb_menu__menu,
.htag-ppi2-hero-nav .et-menu-nav,
.htag-ppi2-hero-nav .et_pb_column,
.htag-ppi2-hero-nav .et_pb_menu .et_pb_menu__menu > nav > ul > li {
	/* !important justifié : Divi pose sur la row un `position:relative` via une
	   règle scopée par id de module (`#et_pb_row_N`, spécificité 1-0-0) que ce
	   sélecteur de classe ne peut pas battre — mesuré le 02/09/2026, le panneau du
	   mega-menu s'ancrait sur la row (~240px) au lieu de la nav pleine largeur. */
	position: static !important;
}

.htag-ppi2-hero-nav .et-menu li.menu-item-has-children:hover > ul.sub-menu,
.htag-ppi2-hero-nav .et-menu li.menu-item-has-children:focus-within > ul.sub-menu {
	opacity: 1;
	visibility: visible;
}

.htag-ppi2-hero-nav .et-menu ul.sub-menu li {
	margin: 0;
	padding: 0;
	width: auto;
	border: 0;
}

.htag-ppi2-hero-nav .et-menu ul.sub-menu li a {
	display: flex;
	gap: 14px;
	padding: 14px 12px;
	border-radius: var(--gvid-ppirayonm);
	color: var(--gcid-ppiencre01);
	transition: background-color .18s ease;
}

.htag-ppi2-hero-nav .et-menu ul.sub-menu li a:hover,
.htag-ppi2-hero-nav .et-menu ul.sub-menu li a:focus-visible {
	background: var(--gcid-ppifondclr01);
	opacity: 1;
}

.htag-ppi2-mega__num {
	color: var(--gcid-ppirouge01);
	font-size: 13px;
	font-weight: 800;
	line-height: 1.4;
}

.htag-ppi2-mega__titre {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.htag-ppi2-mega__desc {
	display: block;
	margin-top: 2px;
	font-size: 12.5px;
	color: var(--gcid-ppigrismoy01);
	line-height: 1.4;
}

/* ---------- BOUTONS — neutralise le preset Divi par défaut ----------
   Un preset global `preset--module--divi-button--default` s'applique à TOUT
   bouton du site (`body #page-container .et_pb_section .preset--module--divi-button--default`,
   spécificité 1-4-0 : un ID + 4 classes) et référence encore l'ancien système
   (--gvid-ppifonttit, --gvid-ppirayons0, --gvid-ppitxtlegd — supprimés).
   Mesuré le 02/09/2026 : sans ce crochet, "Découvrir notre offre" ressort en
   rouge plein malgré `.htag-ppi2-btn--ligne`. On rejoue le même sélecteur avec
   nos classes en plus pour gagner en spécificité, plutôt qu'un `!important`. */
body #page-container .et_pb_section .preset--module--divi-button--default.htag-ppi2-btn--plein {
	background-color: var(--gcid-ppirouge01);
	color: var(--gcid-ppiblanc01) !important;
}

body #page-container .et_pb_section .preset--module--divi-button--default.htag-ppi2-btn--ligne {
	background-color: transparent;
	color: var(--gcid-ppimarine01) !important;
}

body #page-container .et_pb_section .preset--module--divi-button--default.htag-ppi2-btn--sombre {
	background-color: var(--gcid-ppiencre01);
	color: var(--gcid-ppiblanc01) !important;
}

body #page-container .et_pb_section .preset--module--divi-button--default.htag-ppi2-btn {
	font-family: var(--gvid-ppifontprincipale), sans-serif;
	border-radius: var(--gvid-ppirayonpilule);
	font-size: 15px !important; /* le preset force aussi `font-size` en !important */
}

body #page-container .et_pb_section .preset--module--divi-button--default.htag-ppi2-hero-cta {
	font-size: 14px !important;
}

/* ---------- BOUTONS — pilule (rayon 100px), remplace l'ancien carré 4px ---------- */
.htag-ppi2-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border: 0;
	border-radius: var(--gvid-ppirayonpilule);
	font-family: var(--gvid-ppifontprincipale), sans-serif;
	font-weight: 700;
	font-size: 15px;
	padding: 15px 26px;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease,
		transform .18s ease, box-shadow .18s ease;
}

.htag-ppi2-btn::after {
	display: none;
}

.htag-ppi2-btn.et_pb_module:hover {
	padding: 15px 26px;
	border: 0;
}

/* Effet de survol commun aux boutons pleins : léger soulèvement + ombre teintée
   de la couleur du bouton, plutôt qu'un simple changement de fond plat. */
.htag-ppi2-btn--plein,
.htag-ppi2-btn--sombre {
	box-shadow: 0 0 0 rgba(226, 0, 26, 0);
}

.htag-ppi2-btn--plein:hover,
.htag-ppi2-btn--sombre:hover {
	transform: translateY(-2px);
}

.htag-ppi2-btn--plein {
	background: var(--gcid-ppirouge01);
	color: var(--gcid-ppiblanc01);
}

.htag-ppi2-btn--plein:hover {
	background: var(--gcid-ppiactif01);
	color: var(--gcid-ppiblanc01);
	box-shadow: 0 10px 24px rgba(226, 0, 26, .32);
}

.htag-ppi2-btn--ligne {
	background: transparent;
	color: var(--gcid-ppimarine01);
	border: 1px solid rgba(30, 47, 63, .28);
}

.htag-ppi2-btn--ligne.et_pb_module:hover {
	border: 1px solid var(--gcid-ppirouge01);
	padding: 15px 26px;
}

.htag-ppi2-btn--ligne:hover {
	color: var(--gcid-ppirouge01);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(30, 47, 63, .12);
}

.htag-ppi2-btn--sombre {
	background: var(--gcid-ppiencre01);
	color: var(--gcid-ppiblanc01);
}

.htag-ppi2-btn--sombre:hover {
	background: var(--gcid-ppirouge01);
	color: var(--gcid-ppiblanc01);
	box-shadow: 0 10px 24px rgba(226, 0, 26, .28);
}

.htag-ppi2-hero-cta {
	padding: 14px 22px;
	font-size: 14px;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease,
		transform .18s ease, box-shadow .18s ease, padding .25s ease;
}

.htag-ppi2-hero-cta.et_pb_module:hover {
	padding: 14px 22px;
}

/* Même rétrécissement que le reste de la nav au passage en sticky. */
.htag-ppi2-hero-nav.is-scrolled .htag-ppi2-hero-cta,
.htag-ppi2-hero-nav.is-scrolled .htag-ppi2-hero-cta.et_pb_module:hover {
	padding-top: 8px;
	padding-bottom: 8px;
}

/* ---------- LARGEUR DE CONTENU — recentrage à 1200 des rows de texte de l'accueil v3.
   Même sélecteur, même spécificité (0-3-0) que la neutralisation générique de Divi
   (ligne ~55), placé après elle : gagne à spécificité égale. ---------- */
.et-l--post .et_pb_row.htag-ppi2-intro__entete,
.et-l--post .et_pb_row.htag-ppi2-intro__grille,
.et-l--post .et_pb_row.htag-ppi2-exp35__grille,
.et-l--post .et_pb_row.htag-ppi2-offre__entete,
.et-l--post .et_pb_row.htag-ppi2-offre__intro,
.et-l--post .et_pb_row.htag-ppi2-offre__stepper,
.et-l--post .et_pb_row.htag-ppi2-secteurs__entete,
.et-l--post .et_pb_row.htag-ppi2-secteurs__grille,
.et-l--post .et_pb_row.htag-ppi2-entreprise__haut,
.et-l--post .et_pb_row.htag-ppi2-frise,
.et-l--post .et_pb_row.htag-ppi2-qualite__haut,
.et-l--post .et_pb_row.htag-ppi2-smqse,
.et-l--post .et_pb_row.htag-ppi2-actu__entete,
.et-l--post .et_pb_row.htag-ppi2-actu__grille,
.et-l--post .et_pb_row.htag-ppi2-part__entete {
	max-width: var(--gvid-ppilargeur);
	margin-left: auto;
	margin-right: auto;
}

/* Le hero et le bandeau photo restent pleine largeur : fond photo édge-to-édge. */
.htag-ppi2-hero,
.htag-ppi2-bandeau {
	overflow: hidden;
}

/* Universel : padding horizontal 40px sur toutes les sections de contenu. */
.htag-ppi2-hero,
.htag-ppi2-stats,
.htag-ppi2-intro,
.htag-ppi2-exp35,
.htag-ppi2-offre,
.htag-ppi2-secteurs,
.htag-ppi2-entreprise,
.htag-ppi2-qualite,
.htag-ppi2-actu,
.htag-ppi2-partenaires {
	padding-left: var(--gvid-ppiespace5);
	padding-right: var(--gvid-ppiespace5);
}

.htag-ppi2-intro,
.htag-ppi2-exp35,
.htag-ppi2-secteurs,
.htag-ppi2-entreprise,
.htag-ppi2-qualite,
.htag-ppi2-actu {
	padding-top: var(--gvid-ppiespace7);
	padding-bottom: var(--gvid-ppiespace7);
}

/* ---------- EYEBROW commun ---------- */
.htag-ppi2-eyebrow .et_pb_text_inner p,
.htag-ppi2-eyebrow p {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gcid-ppirouge01);
}

.htag-ppi2-eyebrow p::before {
	content: "";
	width: 26px;
	height: 2px;
	background: var(--gcid-ppirouge01);
	flex: 0 0 auto;
}

.htag-ppi2-eyebrow--ligne p {
	justify-content: space-between;
}

.htag-ppi2-eyebrow__droite {
	margin-left: auto;
	color: var(--gcid-ppigrisdis01);
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
}

/* ---------- 1. HERO ---------- */
.htag-ppi2-hero {
	position: relative;
	/* 740px dans la maquette (texte sur 2 lignes à 1440px) ; mesuré le 02/09/2026 à
	   1512px, le H1 tient sur 4 lignes et le bloc de texte + CTA déborde jusqu'à
	   ~734px depuis le haut — sans marge, il chevauchait la carte chiffres
	   flottante (qui remonte de 92px sous le bas du hero). 860px donne de la marge
	   quelle que soit la largeur d'écran, sans dépendre d'un compte de lignes figé. */
	min-height: 860px;
}

.htag-ppi2-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .86) 15%, rgba(255, 255, 255, .75) 42%, rgba(255, 255, 255, .12) 58%, rgba(255, 255, 255, 0) 100%);
	pointer-events: none;
}

.htag-ppi2-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 280px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .55) 51%, rgba(255, 255, 255, .85) 74%, var(--gcid-ppiblanc01) 100%);
	pointer-events: none;
}

/* La position (absolue, left:40/top:210 façon maquette) est posée nativement dans
   le JSON du module (module.decoration.position) — voir génération de contenu.
   Divi pose lui-même `position:relative` sur chaque row ; seul son propre réglage
   de position sort en !important pour le mode "absolute", une classe ne peut pas
   le battre. */
.htag-ppi2-hero__contenu {
	z-index: 2;
}

.htag-ppi2-hero__contenu > .et_pb_column {
	max-width: 640px;
}

.htag-ppi2-hero__eyebrow p {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gcid-ppirouge01);
}

.htag-ppi2-hero__eyebrow p::before {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--gcid-ppirouge01);
}

.htag-ppi2-hero__titre h1 {
	margin: 22px 0 0;
	text-wrap: pretty;
}

.htag-ppi2-hero__lead p {
	font-size: 17px;
	line-height: 1.6;
	color: var(--gcid-ppigrismoy01);
	max-width: 500px;
	margin: 22px 0 0;
}

/* Les deux CTA vivent dans une sous-row à 2 colonnes (voir génération du
   contenu) : une row Divi met ses colonnes côte à côte nativement — deux
   modules Bouton dans UNE colonne s'empilent quel que soit leur `display`,
   la colonne étant elle-même en `flex-direction:column`. */
.htag-ppi2-hero__ctas .et_pb_column {
	width: auto;
	max-width: none;
}

/* ---------- 2. STATS — carte flottante ---------- */
.htag-ppi2-stats {
	position: relative;
	z-index: 20;
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	background: var(--gcid-ppiblanc01);
	border-radius: var(--gvid-ppirayonl);
	box-shadow: 0 10px 34px rgba(30, 47, 63, .10);
}

.htag-ppi2-stats .et_pb_row {
	align-items: center;
}

.htag-ppi2-stat {
	padding-left: 0;
}

.htag-ppi2-stat--filet {
	border-left: 1px solid rgba(30, 47, 63, .10);
	padding-left: 24px;
}

.htag-ppi2-stat__nb {
	margin: 0;
	font-weight: 800;
	font-size: 34px;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--gcid-ppimarine01);
	padding: 0;
}

.htag-ppi2-stat__nb--texte {
	font-size: 20px;
	line-height: 1.2;
	padding-top: 4px;
}

.htag-ppi2-stat__u {
	font-size: 16px;
	font-weight: 600;
}

.htag-ppi2-stat__lib {
	margin: 8px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--gcid-ppigrismoy01);
}

/* ---------- 3. INTRO ---------- */
.htag-ppi2-intro__lead {
	--ppi-parallax: 0.04; /* doit vivre sur l'élément .htag-ppi-parallax lui-même : ne remonte pas depuis un enfant (pas d'héritage vers le haut) */
}

.htag-ppi2-intro__lead p {
	font-size: 24px;
	line-height: 1.45;
	color: var(--gcid-ppiencre01);
	margin: 0;
	max-width: 660px;
	text-wrap: pretty;
}

.htag-ppi2-intro__label p {
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gcid-ppigrisdis01);
	font-weight: 700;
	margin: 0 0 16px;
}

.htag-ppi2-intro__second p {
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--gcid-ppigrismoy01);
	margin: 0;
}

/* ---------- 4. PLUS DE 35 ANS ---------- */
.htag-ppi2-exp35__grille {
	align-items: start;
}

/* Collage à deux photos qui se chevauchent (réf. client) : la colonne n'a pas
   de hauteur propre puisque ses deux enfants sont en position absolue — on la
   lui donne explicitement pour que la row (et sa voisine) se calent dessus. */
.htag-ppi2-exp35__media {
	position: relative;
	min-height: 540px;
}

.htag-ppi2-exp35__photo {
	position: absolute;
	width: 68%;
}

.htag-ppi2-exp35__photo img {
	width: 100%;
	height: 420px;
	object-fit: cover;
	display: block;
}

.htag-ppi2-exp35__photo--back {
	top: 0;
	left: 0;
	z-index: 1;
}

.htag-ppi2-exp35__photo--back img {
	border-radius: var(--gvid-ppirayonxl);
	box-shadow: 0 10px 28px rgba(30, 47, 63, .09);
}

.htag-ppi2-exp35__photo--front {
	top: 120px;
	left: 32%;
	z-index: 2;
}

.htag-ppi2-exp35__photo--front img {
	border: 8px solid var(--gcid-ppiblanc01);
	border-radius: var(--gvid-ppirayonl);
	box-shadow: 0 20px 40px rgba(30, 47, 63, .16);
}

.htag-ppi2-exp35__citation p {
	border-left: 2px solid var(--gcid-ppirouge01);
	padding-left: 30px;
	font-size: 18px;
	line-height: 1.6;
	color: var(--gcid-ppiencre01);
	margin: 6px 0 0;
}

.htag-ppi2-exp35__texte p {
	border-left: 2px solid var(--gcid-ppirouge01);
	padding-left: 30px;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--gcid-ppigrismoy01);
	margin: 26px 0 0;
}

/* ---------- 5. OFFRE — stepper collant + crossfade ---------- */
.htag-ppi2-offre {
	position: relative;
}

.htag-ppi2-offre__intro1 p {
	font-size: 16px;
	line-height: 1.65;
	color: var(--gcid-ppiardoise01);
	margin: 0;
}

.htag-ppi2-offre__intro2 p {
	font-size: 15px;
	line-height: 1.65;
	color: var(--gcid-ppigrismoy01);
	margin: 0;
}

.htag-ppi2-step {
	cursor: pointer;
	padding: 42px 0 46px;
	border-top: 1px solid rgba(0, 0, 0, .12);
	opacity: .3;
	transition: opacity .45s ease;
}

.htag-ppi2-step.is-active {
	opacity: 1;
}

.htag-ppi2-step__kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 12.5px;
	font-weight: 800;
	color: var(--gcid-ppirouge01);
}

.htag-ppi2-step__tiret {
	width: 22px;
	height: 1px;
	background: var(--gcid-ppirouge01);
	display: inline-block;
}

.htag-ppi2-step__lbl {
	color: var(--gcid-ppigrisdis01);
	font-weight: 600;
	letter-spacing: .12em;
}

.htag-ppi2-step__titre {
	font-weight: 800;
	font-size: 30px;
	line-height: 1.1;
	letter-spacing: -.02em;
	margin: 16px 0 12px;
	color: var(--gcid-ppiencre01);
}

.htag-ppi2-step__text {
	font-size: 15px;
	line-height: 1.62;
	color: var(--gcid-ppiardoise01);
	margin: 0;
}

.htag-ppi2-step__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--gcid-ppirouge01);
	margin-top: 18px;
}

.htag-ppi2-offre__panneau {
	position: sticky;
	top: 40px;
	height: min(620px, calc(100vh - 90px));
	border-radius: var(--gvid-ppirayonxl);
	overflow: hidden;
	background: var(--gcid-ppifondimg01);
	box-shadow: 0 12px 32px rgba(30, 47, 63, .10);
}

/* Le htmlAttributes du module Image atterrit sur le DIV wrapper
   (`.et_pb_image`), pas sur le `<img>` lui-même — contrairement au module
   Bouton, qui lui rend directement sur le `<a>`. Sans cibler `img`, le wrapper
   se dimensionnait à 100% mais l'image gardait sa taille naturelle à
   l'intérieur, laissant un vide gris sous la photo. Mesuré le 02/09/2026. */
.htag-ppi2-offre__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity .5s ease;
}

/* Divi insère encore un `<span class="et_pb_image_wrap">` entre le wrapper et
   l'`<img>`. Un span est inline par défaut : sans hauteur explicite dessus, la
   hauteur en % de l'`<img>` n'a pas de base de calcul définie et retombe sur
   son ratio naturel (`height:auto` de WordPress core, `img{...}` global) —
   d'où la bande grise sous la photo. Il faut la hauteur explicite à CHAQUE
   niveau intermédiaire, pas seulement sur les deux extrémités de la chaîne. */
.htag-ppi2-offre__img .et_pb_image_wrap {
	display: block;
	width: 100%;
	height: 100%;
}

.htag-ppi2-offre__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.htag-ppi2-offre__img.is-active {
	opacity: 1;
}

/* Bloc numéro + légende fusionné en un seul module (voir génération de contenu) :
   deux boîtes indépendantes collées bord à bord laissaient un filet du fond gris
   visible entre elles dès que leurs largeurs calculées ne coïncidaient pas au
   pixel près. */
/* Légende retirée (jugée superflue) : l'overlay ne porte plus que le numéro,
   redimensionné à son contenu au lieu d'une barre pleine largeur. */
.htag-ppi2-offre__overlay {
	position: absolute;
	left: 20px;
	bottom: 20px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	background: rgba(255, 255, 255, .92);
	border-radius: var(--gvid-ppirayonm);
	padding: 12px 16px;
}

.htag-ppi2-offre__num {
	font-weight: 800;
	font-size: 22px;
	line-height: 1;
	color: var(--gcid-ppirouge01);
	letter-spacing: -.02em;
}

/* ---------- 6. SECTEURS — flip 3D pur CSS ---------- */
.htag-ppi2-secteur {
	position: relative;
	height: 300px;
	perspective: 1400px;
	cursor: pointer;
}

.htag-ppi2-secteur__inner {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transition: transform .65s cubic-bezier(.4, .1, .2, 1);
}

.htag-ppi2-secteur:hover .htag-ppi2-secteur__inner,
.htag-ppi2-secteur:focus-within .htag-ppi2-secteur__inner {
	transform: rotateY(180deg);
}

.htag-ppi2-secteur__face {
	position: absolute;
	inset: 0;
	border-radius: var(--gvid-ppirayonl);
	overflow: hidden;
	backface-visibility: hidden;
	background: var(--gcid-ppifondimg01) center/cover no-repeat;
}

.htag-ppi2-secteur__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(30, 47, 63, 0) 35%, rgba(30, 47, 63, .78) 100%);
}

.htag-ppi2-secteur__avant-txt {
	position: absolute;
	left: 22px;
	right: 22px;
	bottom: 22px;
	color: var(--gcid-ppiblanc01);
}

.htag-ppi2-secteur__n {
	display: block;
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	color: rgba(255, 255, 255, .7);
}

.htag-ppi2-secteur__titre {
	font-weight: 800;
	font-size: 20px;
	line-height: 1.2;
	margin: 8px 0 0;
	color: inherit;
}

.htag-ppi2-secteur__face--arriere {
	background: var(--gcid-ppiblanc01);
	transform: rotateY(180deg);
	padding: 26px 24px;
	display: flex;
	flex-direction: column;
	border-top: 2px solid var(--gcid-ppirouge01);
}

.htag-ppi2-secteur__n--arriere {
	color: var(--gcid-ppigrisdis01);
	font-weight: 800;
}

.htag-ppi2-secteur__titre--arriere {
	font-weight: 700;
	font-size: 19px;
	margin: 12px 0 10px;
	color: var(--gcid-ppimarine01);
}

.htag-ppi2-secteur__texte {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--gcid-ppigrismoy01);
	margin: 0;
}

.htag-ppi2-secteur__lien {
	margin: auto 0 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--gcid-ppirouge01);
}

.htag-ppi2-secteur-tuile {
	border-radius: var(--gvid-ppirayonl);
	overflow: hidden;
	position: relative;
	height: 300px;
	background: var(--gcid-ppifondlog01);
	display: flex;
	align-items: flex-end;
	padding: 26px 24px;
}

.htag-ppi2-secteur-tuile p {
	font-size: 15px;
	font-weight: 800;
	line-height: 1.5;
	color: var(--gcid-ppimarine01);
	max-width: 70%;
	margin: 0;
}

.htag-ppi2-accent {
	color: var(--gcid-ppirouge01);
}

/* ---------- 7. BANDEAU PHOTO ---------- */
.htag-ppi2-bandeau {
	position: relative;
	height: 520px;
	background: var(--gcid-ppifondimg01);
}

.htag-ppi2-bandeau__img {
	position: absolute;
	left: 0;
	right: 0;
	top: -180px;
	width: 100%;
	height: 880px;
	object-fit: cover;
	will-change: transform;
	--ppi-parallax: -0.22;
}

/* ---------- 8. ENTREPRISE ---------- */
.htag-ppi2-entreprise__media {
	position: relative;
}

.htag-ppi2-entreprise__photo img {
	width: 100%;
	height: 460px;
	object-fit: cover;
	display: block;
	border-radius: var(--gvid-ppirayonxl);
	box-shadow: 0 12px 32px rgba(30, 47, 63, .10);
}

.htag-ppi2-entreprise__badge {
	position: absolute;
	left: 20px;
	bottom: 20px;
	background: rgba(255, 255, 255, .92);
	color: var(--gcid-ppimarine01);
	padding: 16px 22px;
	border-radius: var(--gvid-ppirayonm);
}

.htag-ppi2-entreprise__badge-nb {
	margin: 0;
	font-weight: 800;
	font-size: 28px;
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--gcid-ppirouge01);
}

.htag-ppi2-entreprise__badge-lbl {
	margin: 6px 0 0;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .1em;
	color: var(--gcid-ppigrismoy01);
}

.htag-ppi2-entreprise__lead p {
	font-size: 18px;
	line-height: 1.6;
	color: var(--gcid-ppiardoise01);
	margin: 22px 0 0;
}

.htag-ppi2-entreprise__cta {
	margin-top: 28px;
}

.htag-ppi2-frise {
	position: relative;
}

/* margin-top posé nativement dans le JSON du module (decoration.spacing.margin) :
   Divi émet pour chaque row une règle scopée par id (`#et_pb_row_N{margin-top:0}`,
   spécificité 1-0-0) qu'aucun sélecteur de classe ne peut battre — voir la
   génération de contenu pour htag-ppi2-frise / -smqse / hero__ctas. */

.htag-ppi2-frise::before {
	content: "";
	position: absolute;
	left: 7px;
	right: 7px;
	top: 7px;
	height: 2px;
	background: rgba(0, 0, 0, .10);
}

.htag-ppi2-frise__item {
	position: relative;
}

.htag-ppi2-frise__point {
	display: block;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--gcid-ppirouge01);
	box-shadow: 0 0 0 6px var(--gcid-ppiblanc01);
}

.htag-ppi2-frise__annee {
	font-weight: 900;
	font-size: 28px;
	letter-spacing: -.02em;
	color: var(--gcid-ppiencre01);
	margin: 24px 0 8px;
}

.htag-ppi2-frise__texte {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--gcid-ppiardoise01);
	margin: 0;
	max-width: 330px;
}

/* ---------- 9. QUALITÉ / RSE ---------- */
.htag-ppi2-qualite__lead p {
	font-size: 18px;
	line-height: 1.6;
	color: var(--gcid-ppiardoise01);
	margin: 0;
	max-width: 520px;
}

.htag-ppi2-qualite__cta {
	margin-top: 30px;
}

.htag-ppi2-qualite__haut > .et_pb_column:last-child {
	/* Cette row rend en `grid` (align-items par défaut : stretch) : sans
	   `align-self`, la colonne des badges ISO s'étirait à la hauteur de sa
	   voisine (le bloc de texte, bien plus haut), et les badges avec — d'où les
	   immenses cartes blanches vides. Mesuré le 02/09/2026. */
	align-self: start;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gvid-ppiespace3);
}

.htag-ppi2-iso-badge {
	background: var(--gcid-ppiblanc01);
	border-radius: var(--gvid-ppirayonl);
	padding: 26px 22px;
	box-shadow: 0 6px 20px rgba(30, 47, 63, .06);
	border-top: 3px solid transparent;
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.htag-ppi2-iso-badge:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 32px rgba(30, 47, 63, .14);
	border-top-color: var(--gcid-ppirouge01);
}

.htag-ppi2-iso-badge__nb {
	margin: 0;
	font-weight: 900;
	font-size: 24px;
	color: var(--gcid-ppiencre01);
	transition: color .22s ease;
}

.htag-ppi2-iso-badge:hover .htag-ppi2-iso-badge__nb {
	color: var(--gcid-ppirouge01);
}

/* Apparition douce au scroll (classe posée par htag-ppi.js via IntersectionObserver) */
.htag-ppi2-iso-badge,
.htag-ppi2-smqse__ligne {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .55s ease, transform .55s ease, box-shadow .22s ease, border-color .22s ease;
}

.htag-ppi2-iso-badge.htag-ppi2-is-visible,
.htag-ppi2-smqse__ligne.htag-ppi2-is-visible {
	opacity: 1;
	transform: translateY(0);
}

.htag-ppi2-iso-badge__lbl {
	margin: 8px 0 0;
	font-size: 12.5px;
	color: var(--gcid-ppigrismoy01);
}

.et-l--post .et_pb_row.htag-ppi2-smqse {
	margin-top: var(--gvid-ppiespace6);
}

.htag-ppi2-smqse > .et_pb_column {
	background: var(--gcid-ppiblanc01);
	border-radius: var(--gvid-ppirayonl);
	box-shadow: 0 10px 28px rgba(30, 47, 63, .07);
	padding: 8px 36px;
}

.htag-ppi2-smqse__ligne {
	display: grid;
	grid-template-columns: 70px 220px 1fr;
	gap: var(--gvid-ppiespace5);
	padding: 36px 22px;
	margin: 0 -22px;
	border-bottom: 1px solid rgba(0, 0, 0, .08);
	border-radius: var(--gvid-ppirayonm);
	align-items: baseline;
	transition: background-color .22s ease;
}

.htag-ppi2-smqse__ligne:hover {
	background: var(--gcid-ppifondclr01);
}

.htag-ppi2-smqse__ligne:hover .htag-ppi2-smqse__n {
	opacity: .7;
	transform: scale(1.06);
}

.htag-ppi2-smqse-wrap:last-child .htag-ppi2-smqse__ligne {
	border-bottom: 0;
}

.htag-ppi2-smqse__n {
	margin: 0;
	font-weight: 900;
	font-size: 38px;
	color: var(--gcid-ppirouge01);
	line-height: 1;
	opacity: .35;
	display: inline-block;
	transition: opacity .22s ease, transform .22s ease;
}

.htag-ppi2-smqse__lbl {
	margin: 0;
	font-size: 13px;
	letter-spacing: .12em;
	color: var(--gcid-ppiencre01);
	font-weight: 800;
	padding-top: 8px;
	display: block;
}

.htag-ppi2-smqse__texte {
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--gcid-ppiardoise01);
	margin: 0;
	max-width: 740px;
}

/* ---------- 10. ACTUALITÉS ---------- */
.htag-ppi2-actu__chapo p {
	font-size: 16px;
	line-height: 1.6;
	color: var(--gcid-ppigrismoy01);
	max-width: 640px;
	margin: 18px 0 0;
}

/* Module Blog natif Divi (remplace les 3 cartes placeholder — vrais articles
   publiés, se met à jour tout seul). Divi rend sa grille en positionnement
   absolu façon "salvattore" : on repasse en flux et on repose une vraie
   grille CSS 3 colonnes. Repris du même module déjà éprouvé sur l'ancienne
   version de cette page (htag-ppi-actu-blog), adapté aux nouveaux tokens. */
.htag-ppi2-actu-blog .et_pb_blog_posts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.htag-ppi2-actu-blog .et_pb_blog_posts::after,
.htag-ppi2-actu-blog .et_pb_blog_posts::before {
	display: none;
}

/* Carte classique : image en haut, texte en dessous (le plein-cadre + dégradé
   tenté avant ne rendait pas correctement — le dégradé restait invisible
   quel que soit le pseudo-élément porteur, cf. historique ci-dessus).
   Repris du pattern éprouvé sur l'ancienne version de cette page
   (htag-ppi-actu-blog), adapté aux nouveaux tokens. */
.htag-ppi2-actu-blog .et_pb_post {
	position: relative;
	left: auto;
	top: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--gvid-ppirayonl);
	overflow: hidden;
	background: var(--gcid-ppiblanc01);
	box-shadow: 0 1px 2px rgba(30, 47, 63, .08);
	transition: box-shadow .18s ease, transform .18s ease;
	display: flex;
	flex-direction: column;
}

.htag-ppi2-actu-blog .et_pb_post:hover {
	box-shadow: 0 16px 32px rgba(30, 47, 63, .16);
	transform: translateY(-4px);
}

.htag-ppi2-actu-blog .et_pb_post .et_pb_image_container {
	position: relative;
	margin: 0;
	width: 100%;
	height: 200px;
	background: var(--gcid-ppimarine01);
}

.htag-ppi2-actu-blog .et_pb_post .et_pb_image_container a {
	display: block;
	width: 100%;
	height: 100%;
}

.htag-ppi2-actu-blog .et_pb_post .et_pb_image_container a.entry-featured-image-url img,
.htag-ppi2-actu-blog .et_pb_post .et_pb_image_container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Sans image à la une : le fond uni (--gcid-ppimarine01) posé sur le
   conteneur sert de secours à la place de la photo. */
.htag-ppi2-actu-blog .et_pb_post:not(.has-post-thumbnail) .et_pb_image_container {
	display: block;
}

.htag-ppi2-actu-blog .et_pb_post .post-meta,
.htag-ppi2-actu-blog .et_pb_post .entry-title,
.htag-ppi2-actu-blog .et_pb_post .post-content {
	padding-left: 24px;
	padding-right: 24px;
}

.htag-ppi2-actu-blog .et_pb_post .post-meta {
	order: 1;
	padding-top: 20px;
	margin: 0;
	font-size: 12px;
	letter-spacing: .08em;
	font-weight: 600;
	color: var(--gcid-ppigrisdis01);
}

.htag-ppi2-actu-blog .et_pb_post .post-meta a {
	color: inherit;
	text-decoration: none;
}

.htag-ppi2-actu-blog .et_pb_post .entry-title {
	order: 2;
	margin: 8px 0 0;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.25;
	color: var(--gcid-ppiencre01);
}

.htag-ppi2-actu-blog .et_pb_post .entry-title a {
	color: inherit;
	text-decoration: none;
}

.htag-ppi2-actu-blog .et_pb_post .post-content {
	order: 3;
	padding-bottom: 24px;
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--gcid-ppigrismoy01);
}

.htag-ppi2-actu-blog .et_pb_post .post-content p {
	margin: 0;
}

/* ---------- 11. PARTENAIRES ---------- */
.htag-ppi2-partenaires {
	padding-top: 70px;
	padding-bottom: 64px;
	border-top: 1px solid rgba(0, 0, 0, .07);
}

.htag-ppi2-part__marquee .et_pb_text_inner {
	width: 100%;
}

/* ---------- FOOTER (global — mis à jour avec l'accueil) ---------- */
.htag-ppi2-footer .et_pb_row:not([class*="et_flex_column"]) {
	max-width: var(--gvid-ppilargeur);
	margin-left: auto;
	margin-right: auto;
}

.htag-ppi2-footer__logo img {
	height: 44px;
	display: block;
	width: fit-content;
}

.htag-ppi2-footer__baseline p {
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--gcid-ppigrismoy01);
	margin: 22px 0 0;
	max-width: 300px;
}

.htag-ppi2-footer__groupe p {
	font-size: 13px;
	color: var(--gcid-ppiencre01);
	font-weight: 600;
	margin-top: 18px;
}

.htag-ppi2-footer__titre p {
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gcid-ppirouge01);
	margin: 0 0 16px;
	font-weight: 700;
}

.htag-ppi2-footer__menu .et-menu-nav > ul.et-menu {
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.htag-ppi2-footer__menu .et-menu > li {
	margin: 0;
}

.htag-ppi2-footer__menu .et-menu > li > a {
	font-size: 14px;
	color: var(--gcid-ppiardoise01);
	padding: 0;
}

.htag-ppi2-footer__menu .et-menu > li > a:hover {
	color: var(--gcid-ppirouge01);
}

.htag-ppi2-footer__contact p {
	font-size: 14px;
	line-height: 1.7;
	color: var(--gcid-ppiardoise01);
	margin: 0;
}

.htag-ppi2-footer__contact a {
	color: var(--gcid-ppirouge01);
}

.htag-ppi2-footer__barre {
	margin-top: 44px;
	padding-top: 22px;
	border-top: 1px solid rgba(30, 47, 63, .10);
}

.htag-ppi2-footer__barre > .et_pb_row {
	display: flex;
	justify-content: space-between;
}

.htag-ppi2-footer__legal p {
	margin: 0;
	font-size: 12.5px;
	color: var(--gcid-ppigrisdis01);
}

.htag-ppi2-footer__legal--liens p {
	display: flex;
	justify-content: flex-end;
	gap: 20px;
}

.htag-ppi2-footer__legal--liens a {
	color: var(--gcid-ppigrisdis01);
}