/*
 * Sofimae - feuille de styles structurelle.
 *
 * Phase "blanche" : volontairement quasi vide. La charte graphique
 * (couleurs, typo, espacements, styles de blocs is-style-*) sera ajoutee
 * apres la proposition de Claude Design.
 *
 * On garde ici uniquement le minimum non-decoratif (item de menu actif),
 * a re-styler ensuite.
 */

/* Item de menu actif (cf. inc/nav-current.php) - placeholder a styler. */
.wp-block-navigation .current-menu-item > a,
.wp-block-navigation .current-menu-parent > a,
.wp-block-navigation .current-menu-ancestor > a {
	text-decoration: underline;
}

/*
 * Cartes "Notre offre" / "Domaines de mesure" (parts/offre-cards.html,
 * parts/domaines-cards.html). Phase "blanche" : structure minimale uniquement
 * (l'affordance "carte" + le centrage du picto), a re-styler avec la charte.
 */
.kcard {
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	padding: 1.25rem;
}
.kcard .kcard__picto {
	margin: 0 auto 0.5rem;
}
.kcard h3 {
	margin: 0;
}
.kcard h3 a {
	text-decoration: none;
}

/*
 * Slider "Ils nous font confiance" (bloc reutilisable, kblocks/images-slider
 * .clients-slider). Logos d'aspects tres differents : on centre chaque logo
 * verticalement et horizontalement dans sa slide, et on borne la hauteur pour
 * une bande homogene. Scope limite a .clients-slider (n'affecte pas les autres
 * sliders). Couleurs/tailles fines viendront avec la charte.
 */
.clients-slider .kb-slider__slide {
	display: flex;
	align-items: center;
	justify-content: center;
	height: auto;
}
.clients-slider .kb-slider__image {
	display: flex;
	align-items: center;
	justify-content: center;
}
/*
 * Hauteur de boite DEFINIE + object-fit:contain : indispensable pour les SVG.
 * wp_get_attachment_image() sort un <img width="1" height="1"> pour les SVG
 * (pas de dimensions en meta) -> avec height:auto le logo s'effondre a 0px.
 * Une hauteur explicite prime sur ces attributs et marche pour SVG/PNG/JPG.
 */
.clients-slider .kb-slider__image img {
	width: 100%;
	height: 80px;
	/* Padding (lateral surtout) + border-box : reduit la zone de contain,
	   donc la taille affichee du logo, en lui laissant de l'air. */
	box-sizing: border-box;
	padding: 6px 28px;
	object-fit: contain;
}

/* =====================================================================
 * CHARTE — Header, bande CTA, Footer  (d'après design/SiteHeader,
 * SiteFooter, Accueil — bande CTA finale). Tokens : voir theme.json.
 * ===================================================================== */

/* --- Icônes inline (mask SVG, prennent la couleur du texte) --- */
.icon {
	display: inline-block;
	width: 1.15em;
	height: 1.15em;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
	vertical-align: -0.2em;
}
.icon--account {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12q-1.65 0-2.825-1.175T8 8q0-1.65 1.175-2.825T12 4q1.65 0 2.825 1.175T16 8q0 1.65-1.175 2.825T12 12Zm-8 8v-2.8q0-.85.438-1.563T5.6 14.55q1.55-.775 3.15-1.163T12 13q1.65 0 3.25.388t3.15 1.162q.725.375 1.163 1.088T20 17.2V20H4Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12q-1.65 0-2.825-1.175T8 8q0-1.65 1.175-2.825T12 4q1.65 0 2.825 1.175T16 8q0 1.65-1.175 2.825T12 12Zm-8 8v-2.8q0-.85.438-1.563T5.6 14.55q1.55-.775 3.15-1.163T12 13q1.65 0 3.25.388t3.15 1.162q.725.375 1.163 1.088T20 17.2V20H4Z'/%3E%3C/svg%3E");
}
.icon--devis {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 17h6v-2H9v2Zm0-4h6v-2H9v2Zm-2 8q-.825 0-1.413-.588T5 19V5q0-.825.588-1.413T7 3h7l5 5v11q0 .825-.588 1.413T17 21H7Zm6-12V5H7v14h10V9h-4Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 17h6v-2H9v2Zm0-4h6v-2H9v2Zm-2 8q-.825 0-1.413-.588T5 19V5q0-.825.588-1.413T7 3h7l5 5v11q0 .825-.588 1.413T17 21H7Zm6-12V5H7v14h10V9h-4Z'/%3E%3C/svg%3E");
}
.icon--phone {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.95 21q-3.125 0-6.175-1.363t-5.55-3.862q-2.5-2.5-3.862-5.55T3 4.05q0-.45.3-.75t.75-.3H8.1q.35 0 .625.238t.325.562l.65 3.5q.05.4-.025.675T9.45 8.7L7.025 11.15q.5.925 1.187 1.787t1.513 1.663q.775.775 1.625 1.438T14.8 17.2l2.35-2.35q.225-.225.588-.337t.712-.063l3.45.7q.35.075.575.337T22.7 16.1v4.05q0 .45-.3.75t-.75.3Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19.95 21q-3.125 0-6.175-1.363t-5.55-3.862q-2.5-2.5-3.862-5.55T3 4.05q0-.45.3-.75t.75-.3H8.1q.35 0 .625.238t.325.562l.65 3.5q.05.4-.025.675T9.45 8.7L7.025 11.15q.5.925 1.187 1.787t1.513 1.663q.775.775 1.625 1.438T14.8 17.2l2.35-2.35q.225-.225.588-.337t.712-.063l3.45.7q.35.075.575.337T22.7 16.1v4.05q0 .45-.3.75t-.75.3Z'/%3E%3C/svg%3E");
}

/* --- Boutons : effet de scale au survol (comme les logos) --- */
.wp-element-button { transition: transform .2s ease; }
.wp-element-button:hover { transform: scale(.95); }

/* Pas d'écart au-dessus du contenu : le header sticky reste accolé. */
.wp-site-blocks > main.wp-block-group { margin-block-start: 0; }

/* ---------------------------- HEADER ---------------------------- */
.site-header {
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--border);
	position: sticky;
	top: 0;
	z-index: 100;
}
.site-header__inner {
	min-height: 78px;
	gap: 24px;
}
.site-header__logo { margin: 0; flex-shrink: 0; }
.site-header__logo img { display: block; width: 164px; height: auto; transition: transform .2s ease; }
.site-header__logo a:hover img { transform: scale(.95); }
.site-header__actions { gap: 14px; align-items: center; }

/* Compte */
.site-header__account { margin: 0; }
.site-header__account a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.site-header__account a:hover { color: var(--wp--preset--color--accent); }

/* Bouton « Demander un devis » (header) */
.btn-devis .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14.5px;
	white-space: nowrap;
	box-shadow: none;
	transition: background .2s ease, box-shadow .2s ease, transform .12s ease;
}
.btn-devis .wp-block-button__link:hover {
	box-shadow: 0 8px 20px rgba(229, 46, 59, .32);
}
.btn-devis .wp-block-button__link:active { transform: translateY(1px); }

/* ---------------- Navigation principale (méga-menu natif) ------------- */
.sofimae-nav { gap: 4px; align-items: center; }
.navtop { position: relative; margin: 0; }

/* Déclencheur de premier niveau */
.navtop__trigger { margin: 0; }
.navtop__trigger a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 10px 14px;
	font-size: 15px;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	transition: color .2s ease;
}
/* Chevron du déclencheur */
.navtop__trigger a::after {
	content: "";
	width: 18px;
	height: 18px;
	background-color: var(--wp--preset--color--muted-2);
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15.4 6.6 10l1.4-1.4 4 4 4-4 1.4 1.4z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15.4 6.6 10l1.4-1.4 4 4 4-4 1.4 1.4z'/%3E%3C/svg%3E");
	transition: transform .2s ease;
}
.navtop:hover .navtop__trigger a,
.navtop:focus-within .navtop__trigger a { color: var(--wp--preset--color--accent); }
.navtop:hover .navtop__trigger a::after,
.navtop:focus-within .navtop__trigger a::after { transform: rotate(180deg); }

/* Panneau (méga-menu) — ouverture au survol / focus, sans JS */
.megapanel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 70;
	/* Annule le margin-block-start (blockGap) du layout flow du .navtop :
	 * sinon le panneau descend de 1.5rem et crée une bande morte qui ferme
	 * le menu quand la souris descend du libellé vers le sous-menu. */
	margin: 0;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	box-shadow: 0 18px 44px rgba(34, 43, 83, .18);
	padding: 14px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .18s ease, visibility .18s ease;
}
.navtop:hover > .megapanel,
.navtop:focus-within > .megapanel { opacity: 1; visibility: visible; }
.megapanel--list { min-width: 260px; }
.megapanel--grid2 { width: 560px; }
.megapanel--grid3 { width: min(840px, 86vw); left: 50%; transform: translateX(-50%); }

/* Lignes à picto (Offre, Domaines) */
.megarow { gap: 12px; padding: 9px 11px; border-radius: 9px; margin: 0; transition: background .2s ease; }
.megarow:hover { background: #f4f5f8; }
.megarow__icon { margin: 0; flex-shrink: 0; }
.megarow__icon img {
	display: block;
	width: 30px;
	height: 30px;
	object-fit: contain;
	filter: grayscale(1) opacity(.5);
	transition: filter .25s ease;
}
.megarow:hover .megarow__icon img { filter: none; }
.megarow__label { margin: 0; line-height: 1.25; }
.megarow__label a {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.megapanel--grid3 .megarow__label a { font-size: 13px; }

/* Listes simples (Société, Secteurs, Recrutement) */
.megalist { list-style: none; margin: 0; padding: 0; }
.megalist li { margin: 0; }
.megalist a {
	display: block;
	padding: 10px 12px;
	font-size: 14.5px;
	font-weight: 500;
	color: #2c324a;
	border-radius: 8px;
	text-decoration: none;
	transition: background .2s ease, color .2s ease;
}
.megalist a:hover { background: #f4f5f8; color: var(--wp--preset--color--primary); }

/* Bascule desktop / mobile (burger) au point de rupture 1080px du design.
 * On double la classe (.sofimae-nav-mobile.wp-block-navigation) pour primer
 * sur le `.wp-block-navigation.is-layout-flex{display:flex}` du cœur (0,2,0).
 * Idem côté desktop : `.wp-block-group.sofimae-nav` (0,2,0) est nécessaire pour
 * battre `.wp-block-group.is-layout-flex{display:flex}` du cœur — un simple
 * `.sofimae-nav` (0,1,0) perd et laisse le menu desktop visible en mobile. */
.sofimae-nav-mobile.wp-block-navigation { display: none; }
@media (max-width: 1080px) {
	.wp-block-group.sofimae-nav { display: none; }
	.site-header__account { display: none; }
	/* Le bouton devis du header est repris en fin de menu mobile (item .nav-cta
	 * du post wp_navigation 990) : on le masque ici. `.wp-block-buttons` (0,2,0)
	 * pour battre `.wp-block-buttons.is-layout-flex{display:flex}` du cœur. */
	.wp-block-buttons.site-header__cta { display: none; }
	.sofimae-nav-mobile.wp-block-navigation { display: flex; }
}

/* -------- Mise en forme de l'overlay du menu mobile (burger) -------- */
/* Contenu de l'overlay : colonne pleine largeur, un peu d'air en haut. */
.sofimae-nav-mobile .wp-block-navigation__responsive-container-content {
	width: 100%;
	padding-top: clamp(8px, 4vw, 24px);
}
.sofimae-nav-mobile .wp-block-navigation__responsive-container-content > .wp-block-navigation__container {
	gap: 0;
	width: 100%;
}
/* Items de 1er niveau : pleine largeur, séparateurs légers, cible tactile large. */
.sofimae-nav-mobile .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.sofimae-nav-mobile .wp-block-navigation-item .wp-block-navigation-item__content,
.sofimae-nav-mobile .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	padding-block: 12px;
	font-size: 16px;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}
.sofimae-nav-mobile .wp-block-navigation-submenu__toggle {
	color: var(--wp--preset--color--primary);
}
/* Sous-menus : légère indentation + items plus discrets. */
.sofimae-nav-mobile .wp-block-navigation__submenu-container {
	padding-left: 12px;
	border: 0;
	background: transparent;
}
.sofimae-nav-mobile .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding-block: 9px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--wp--preset--color--muted);
}

/* --- Les deux CTA repris en bas du menu (Compte + Demander un devis) --- */
.sofimae-nav-mobile .nav-cta { border-bottom: 0; }
.sofimae-nav-mobile .nav-cta:first-of-type { margin-top: 22px; }
.sofimae-nav-mobile .nav-cta + .nav-cta { margin-top: 12px; }
.sofimae-nav-mobile .nav-cta .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 13px 20px;
	border-radius: 10px;
	font-size: 15px;
	text-decoration: none;
}
.sofimae-nav-mobile .nav-cta .wp-block-navigation-item__content::before {
	content: "";
	width: 1.15em;
	height: 1.15em;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
}
/* Compte : bouton secondaire (contour). */
.sofimae-nav-mobile .nav-cta--account .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
}
.sofimae-nav-mobile .nav-cta--account .wp-block-navigation-item__content::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12q-1.65 0-2.825-1.175T8 8q0-1.65 1.175-2.825T12 4q1.65 0 2.825 1.175T16 8q0 1.65-1.175 2.825T12 12Zm-8 8v-2.8q0-.85.438-1.563T5.6 14.55q1.55-.775 3.15-1.163T12 13q1.65 0 3.25.388t3.15 1.162q.725.375 1.163 1.088T20 17.2V20H4Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12q-1.65 0-2.825-1.175T8 8q0-1.65 1.175-2.825T12 4q1.65 0 2.825 1.175T16 8q0 1.65-1.175 2.825T12 12Zm-8 8v-2.8q0-.85.438-1.563T5.6 14.55q1.55-.775 3.15-1.163T12 13q1.65 0 3.25.388t3.15 1.162q.725.375 1.163 1.088T20 17.2V20H4Z'/%3E%3C/svg%3E");
}
/* Demander un devis : bouton principal (accent). */
.sofimae-nav-mobile .nav-cta--devis .wp-block-navigation-item__content {
	color: #fff;
	background: var(--wp--preset--color--accent);
}
.sofimae-nav-mobile .nav-cta--devis .wp-block-navigation-item__content::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 17h6v-2H9v2Zm0-4h6v-2H9v2Zm-2 8q-.825 0-1.413-.588T5 19V5q0-.825.588-1.413T7 3h7l5 5v11q0 .825-.588 1.413T17 21H7Zm6-12V5H7v14h10V9h-4Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 17h6v-2H9v2Zm0-4h6v-2H9v2Zm-2 8q-.825 0-1.413-.588T5 19V5q0-.825.588-1.413T7 3h7l5 5v11q0 .825-.588 1.413T17 21H7Zm6-12V5H7v14h10V9h-4Z'/%3E%3C/svg%3E");
}

/* ------------------------- PIED DE PAGE ------------------------ */
/* Le template part footer est un <footer> : pas de marge haute parasite
   (blockGap entre <main> et le footer au niveau racine du template). */
footer.wp-block-template-part { margin-top: 0; margin-block-start: 0; }

/* ------------------------- BANDE CTA --------------------------- */
.cta-band {
	position: relative;
	overflow: hidden;
	padding-top: clamp(54px, 7vw, 84px);
	padding-bottom: clamp(54px, 7vw, 84px);
}
/* Grand chevron filigrane à droite */
.cta-band::after {
	content: "";
	position: absolute;
	right: -40px;
	top: 50%;
	transform: translateY(-50%);
	width: 340px;
	height: 340px;
	background: rgba(255, 255, 255, .07);
	clip-path: polygon(0 0, 55% 0, 100% 50%, 55% 100%, 0 100%, 45% 50%);
	pointer-events: none;
}
.cta-band__inner { position: relative; z-index: 1; gap: 28px; }
.cta-band__text { max-width: 600px; }
.cta-band__title {
	margin: 0;
	color: #fff;
	font-size: clamp(26px, 3.4vw, 40px);
	line-height: 1.1;
}
.cta-band__lead {
	/* La mise en page « constrained » de WP impose margin-left/right:auto !important
	   aux enfants ; sans cet override, la ligne (max-width 560) se centre au lieu
	   de s'aligner à gauche sous le titre. */
	margin: 14px 0 0 !important;
	font-size: 17.5px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .9);
	max-width: 560px;
	text-align: left;
}
.cta-band__buttons { gap: 14px; }
/* Bouton plein blanc */
.cta-band__btn-primary .wp-block-button__link {
	background: #fff;
	color: var(--wp--preset--color--primary);
	padding: 15px 28px;
	font-size: 15.5px;
	border-radius: 10px;
}
.cta-band__btn-primary .wp-block-button__link:hover {
	background: rgba(255, 255, 255, .92);
}
/* Bouton fantôme bordé blanc */
.cta-band__btn-ghost.is-style-outline .wp-block-button__link {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .7);
	padding: 15px 28px;
	font-size: 15.5px;
	border-radius: 10px;
}
.cta-band__btn-ghost.is-style-outline .wp-block-button__link:hover {
	background: rgba(255, 255, 255, .12);
	border-color: #fff;
}

/* ---------------------------- FOOTER --------------------------- */
.site-footer {
	color: #c8cce0;
	padding-top: clamp(54px, 6vw, 76px);
	padding-bottom: clamp(40px, 5vw, 56px);
}
.site-footer__cols { gap: 40px; }
/* Largeurs des colonnes : base 0 (évite le rétrécissement au contenu),
   réparties par flex-grow ; la colonne marque ~1,6× plus large. */
.site-footer__cols > .wp-block-column { flex: 1 1 0; min-width: 0; }
.site-footer__brand { flex-grow: 1.6; }
.site-footer a { text-decoration: none; }
.site-footer__logo { margin: 0; }
.site-footer__logo img { display: block; width: 200px; height: auto; transition: transform .2s ease; }
.site-footer__logo a:hover img { transform: scale(.95); }
.site-footer__desc {
	margin: 20px 0 0;
	font-size: 14.5px;
	line-height: 1.65;
	color: #aab0cc;
	max-width: 300px;
}
.site-footer__tel { margin: 20px 0 0; }
.site-footer__tel a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 20px;
	font-weight: 800;
	color: #fff;
	transform-origin: left center;
	transition: transform .2s ease;
}
.site-footer__tel a:hover { transform: scale(.95); }
.site-footer__tel .icon--phone {
	color: var(--wp--preset--color--accent);
	transform-origin: center;
}
.site-footer__tel a:hover .icon--phone { animation: phoneRing .6s ease; }

.site-footer__cta { margin: 22px 0 0; }
.site-footer__btn .wp-block-button__link {
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .55);
	background: transparent;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.site-footer__btn .wp-block-button__link:hover,
.site-footer__btn .wp-block-button__link:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--wp--preset--color--primary-dark);
}

@keyframes phoneRing {
	0%, 100% { transform: rotate(0); }
	20% { transform: rotate(-12deg); }
	40% { transform: rotate(10deg); }
	60% { transform: rotate(-6deg); }
	80% { transform: rotate(4deg); }
}

.site-footer__title {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 18px;
}
.site-footer__list { list-style: none; margin: 0; padding: 0; }
.site-footer__list li { margin: 0; }
.site-footer__list a {
	display: block;
	padding: 7px 0;
	font-size: 14.5px;
	color: #aab0cc;
	transition: color .2s ease;
}
.site-footer__list a:hover { color: #fff; }

/* Certifications */
.site-footer__certifs-grid { gap: 12px; }
.site-footer__certif {
	margin: 0;
	background: #fff;
	border-radius: 10px;
	padding: 10px 12px;
	display: flex;
	align-items: center;
}
.site-footer__certif img { display: block; width: auto; }

/* Barre légale */
.site-footer__legal {
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, .12);
	gap: 14px;
}
.site-footer__legal-nav {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
}
.site-footer__legal-nav a {
	font-size: 13.5px;
	color: #9398b8;
	transition: color .2s ease;
}
.site-footer__legal-nav a:hover { color: #fff; }
.site-footer__credit { margin: 0; font-size: 13px; color: #787d9c; }
.site-footer__credit a { color: #787d9c; }
.site-footer__credit a:hover { color: #fff; }

/* Responsive footer (cf. design : 760 -> 2 col, 520 -> 1 col) */
@media (max-width: 760px) {
	.site-footer__cols { flex-wrap: wrap; }
	.site-footer__cols > .wp-block-column { flex-basis: calc(50% - 20px) !important; }
}
@media (max-width: 520px) {
	.site-footer__cols > .wp-block-column { flex-basis: 100% !important; }
}

/* =====================================================================
 * STYLES DE BLOCS (register_block_style) — d'après Foundations.dc.html
 * ===================================================================== */

/* ----------------------------- Boutons ------------------------------- */
/* Primaire (rouge) = défaut, déjà géré par theme.json. On harmonise. */
.wp-block-button.is-style-primaire .wp-block-button__link {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	border: none;
}
.wp-block-button.is-style-primaire .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent-hover);
}
/* Secondaire (marine) */
.wp-block-button.is-style-secondaire .wp-block-button__link {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border: none;
}
.wp-block-button.is-style-secondaire .wp-block-button__link:hover {
	background: #2d3766;
}
/* Fantôme (bordé marine, fond transparent) */
.wp-block-button.is-style-fantome .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--primary);
	border: 1.5px solid var(--wp--preset--color--primary);
}
.wp-block-button.is-style-fantome .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}
/* Ligne (bordé clair, hover rouge) */
.wp-block-button.is-style-ligne .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--primary);
	border: 1.5px solid #d2d5df;
}
.wp-block-button.is-style-ligne .wp-block-button__link:hover {
	color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

/* -------------------------- Groupes / sections ----------------------- */
/* Carte ombrée */
.wp-block-group.is-style-carte-ombree {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	box-shadow: 0 14px 30px rgba(34, 43, 83, .12);
	padding: 26px;
}
/* Section sombre (fond marine, texte clair) */
.wp-block-group.is-style-section-sombre {
	background: var(--wp--preset--color--primary);
	color: #c8cce0;
	border-radius: 16px;
}
.wp-block-group.is-style-section-sombre :where(h1, h2, h3, h4, h5, h6) { color: #fff; }
.wp-block-group.is-style-section-sombre a:not(.wp-block-button__link) { color: #fff; }
/* Section claire alternée */
.wp-block-group.is-style-section-claire {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
}

/* ----------------------------- Paragraphes --------------------------- */
/* Chapô (lead) */
.is-style-lead {
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.6;
	color: var(--wp--preset--color--primary);
}
/* Sur-titre (eyebrow) : chevron rouge + libellé majuscule rouge */
.is-style-eyebrow {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-bottom: 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--wp--preset--color--accent);
}
.is-style-eyebrow::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 16px;
	flex-shrink: 0;
	background: var(--wp--preset--color--accent);
	clip-path: polygon(0 0, 55% 0, 100% 50%, 55% 100%, 0 100%, 45% 50%);
}

/* ------------------------------- FAQ --------------------------------- */
.wp-block-details.is-style-faq {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 14px;
	background: var(--wp--preset--color--base);
	padding: 20px 24px;
	/* Largeur de lecture de l'accordéon. La section est désormais en colonne 1200
	   (comme toutes les autres) ; cette max-width + l'alignement gauche global
	   (voir « ALIGNEMENT NATIF ») cale la FAQ sous le titre, au même bord gauche. */
	max-width: 880px;
}
.wp-block-details.is-style-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-size: 16.5px;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	cursor: pointer;
	list-style: none;
}
.wp-block-details.is-style-faq summary::-webkit-details-marker { display: none; }
/* Marqueur add (fermé) / remove (ouvert) en rouge */
.wp-block-details.is-style-faq summary::after {
	content: "";
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	background-color: var(--wp--preset--color--accent);
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 13H5v-2h6V5h2v6h6v2h-6v6h-2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 13H5v-2h6V5h2v6h6v2h-6v6h-2z'/%3E%3C/svg%3E");
}
.wp-block-details.is-style-faq[open] summary::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13v-2h14v2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13v-2h14v2z'/%3E%3C/svg%3E");
}
.wp-block-details.is-style-faq > *:not(summary) {
	margin-top: 14px;
	font-size: 15.5px;
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
}

/* Overrides de spécificité sur les layouts générés (méga-menu) */
.wp-block-group.sofimae-nav { gap: 4px; }
.wp-block-group.megarow { gap: 12px; }
.wp-block-group.megapanel--grid2 { grid-template-columns: repeat(2, 1fr); gap: 2px; }
.wp-block-group.megapanel--grid3 { grid-template-columns: repeat(3, 1fr); gap: 2px; }

/* =====================================================================
 * BANDEAU D'EN-TÊTE DES PAGES  (templates/page.html)
 *
 * Le bandeau est un core/cover « .page-banner ». inc/page-banner.php pose une
 * classe modificatrice selon la présence d'une image à la une :
 *  - .page-banner--has-image  → page AVEC image à la une (cf. design/Industrie) :
 *    image pleine + dégradé latéral, sans biais rouge.
 *  - .page-banner--default    → page SANS image (cf. design/Presentation) :
 *    image de repli en filigrane + dégradé marine plein + biais rouge signature.
 * Le contenu (fil d'Ariane + sur-titre + titre + chapô) reste éditable.
 * ===================================================================== */
.page-banner {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--primary);
}
/* Image de fond (mise en avant ou repli). */
.page-banner .wp-block-cover__image-background {
	z-index: 0;
}
/* Voile (dim) natif du cover neutralisé : le dégradé est géré ci-dessous. */
.page-banner > .wp-block-cover__background { display: none; }
/* Dégradé diagonal par-dessus l'image. */
.page-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* --- Rendu PAR DÉFAUT (sans image à la une) : cf. design/Presentation.dc.html.
 *     Image de repli en filigrane + dégradé marine plein + biais rouge. --- */
.page-banner--default .wp-block-cover__image-background {
	opacity: .22;
}
.page-banner--default::before {
	background: linear-gradient(100deg, var(--wp--preset--color--primary-dark) 0%, rgba(34, 43, 83, .86) 60%, rgba(34, 43, 83, .66) 100%);
}
/* Biais rouge en filigrane, à gauche (motif signature). */
.page-banner--default::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 34%;
	z-index: 1;
	background: var(--wp--preset--color--accent);
	opacity: .85;
	clip-path: polygon(86% 0, 90% 0, 72% 100%, 68% 100%);
	pointer-events: none;
}

/* --- Rendu AVEC image à la une : cf. design/Industrie.dc.html.
 *     Image pleine (opacité 1) + dégradé latéral laissant voir la photo à
 *     droite, sans biais rouge. --- */
.page-banner--has-image .wp-block-cover__image-background {
	opacity: 1;
	/* Léger mouvement « Ken Burns » : zoom + pan très lents et continus. */
	transform-origin: center center;
	animation: page-banner-kenburns 18s ease-in-out infinite alternate;
	will-change: transform;
}
@keyframes page-banner-kenburns {
	from { transform: scale(1.08) translate3d(0, 0, 0); }
	to   { transform: scale(1.28) translate3d(-4%, -3%, 0); }
}
/* Accessibilité : pas d'animation si l'utilisateur la refuse. */
@media (prefers-reduced-motion: reduce) {
	.page-banner--has-image .wp-block-cover__image-background {
		animation: none;
		transform: none;
	}
}
.page-banner--has-image::before {
	background: linear-gradient(100deg, rgba(20, 25, 55, .95) 0%, rgba(26, 32, 70, .82) 55%, rgba(34, 43, 83, .55) 100%);
}
.page-banner .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-block: clamp(64px, 8vw, 104px);
	padding-inline: clamp(20px, 5vw, 40px);
	text-align: left;
}
/* Fil d'Ariane sur fond sombre. */
.page-banner .breadcrumbs {
	margin-bottom: 20px;
	font-size: 13.5px;
	font-weight: 600;
	color: #fff;
}
.page-banner .breadcrumbs a {
	color: #aeb3cc;
	text-decoration: none;
}
.page-banner .breadcrumbs a:hover { color: #fff; }
/* Sur-titre blanc (chevron rouge hérité de .is-style-eyebrow). */
.page-banner__eyebrow.is-style-eyebrow {
	color: #fff;
	opacity: .82;
	margin-bottom: 16px;
}
/* Masqué si la page n'a pas de section parente (sur-titre vidé par le binding). */
.page-banner__eyebrow:empty { display: none; }
.page-banner .wp-block-post-title {
	color: #fff;
	max-width: 760px;
	margin: 0;
}
.page-banner__lead {
	max-width: 620px;
	margin-top: 22px;
	color: #dfe2ee;
	font-size: clamp(17px, 1.7vw, 21px);
	font-weight: 400;
	line-height: 1.55;
}

/* =====================================================================
 * PAGE D'ACCUEIL  (d'après design/Accueil.dc.html)
 * Les sections sont des blocs/patterns éditables ; ce CSS habille les
 * classes utilitaires posées dans le contenu de la page « Accueil ».
 * ===================================================================== */

/* En-tête de section réutilisable : sur-titre + titre (+ éventuel bouton).
 * IMPORTANT : en layout « constrained », WordPress centre chaque enfant à
 * largeur limitée (max-width:contentSize + margin-inline:auto) PAR RAPPORT à
 * la section pleine largeur. Un titre à max-width 640 se retrouve donc centré
 * dans le viewport, pas aligné à gauche de la colonne. Le sur-titre + titre +
 * chapô sont donc regroupés dans .home-head, un groupe en layout « flow » :
 * il remplit la colonne de contenu, et ses enfants s'alignent à gauche
 * naturellement (le titre garde sa largeur max sans être recentré). */
/* Les sections pleine largeur sont collées : on neutralise le blockGap
   (margin-block-start 1.5rem) que WordPress pose entre blocs frères de
   post-content — c'est lui qui créait le blanc entre le hero et la 1re section. */
.home-section { margin-block-start: 0; padding-top: var(--wp--preset--spacing--section); padding-bottom: var(--wp--preset--spacing--section); }
/* Fond alterné : posé en CSS UNIQUEMENT tant qu'aucune couleur n'a été
   choisie depuis l'admin. Dès qu'on sélectionne une couleur sur le groupe,
   WordPress ajoute .has-background → cette règle se désengage et la couleur
   choisie (has-…-background-color) reprend la main. La section reste ainsi
   modifiable depuis l'éditeur sans réécrire le contenu des pages. */
.home-section--surface:not(.has-background) { background: var(--wp--preset--color--surface); }
.home-section--surface { border-top: 1px solid #ededf1; border-bottom: 1px solid #ededf1; }
/* Espacement interne géré par le blockGap du groupe .home-head (16px) ;
   on neutralise la marge basse du sur-titre pour ne pas la cumuler.
   (Le hero ré-impose ses propres marges plus bas, après cette règle.) */
.home-head .is-style-eyebrow { margin-bottom: 0; }
.home-head__title { max-width: 640px; margin: 0; }
.home-head__lead { max-width: 620px; margin: 0; color: var(--wp--preset--color--muted); }
/* Ligne titre + bouton « voir tout » alignés bas */
.home-head--split { align-items: flex-end; }

/* ------------------------------- HERO -------------------------------- */
.home-hero { position: relative; align-items: flex-start; text-align: left; }
/* Colonne de contenu : centrée (max 1200), contenu calé à gauche, et
   respiration verticale généreuse (cf. design Accueil — variante « Épars »).
   z-index:2 pour passer au-dessus du calque de pictos décoratifs (z-index:1). */
.home-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-block: clamp(76px, 12vw, 128px);
	padding-inline: clamp(20px, 5vw, 40px);
}
.home-hero .is-style-eyebrow { color: #fff; opacity: .85; margin-bottom: 22px; }
.home-hero h1 { color: #fff; max-width: 760px; }
.home-hero h1 em, .home-hero h1 .accent { color: #ff5a64; font-style: normal; }
.home-hero__lead { color: #dfe2ee; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; max-width: 560px; margin-top: 26px; }
.home-hero .wp-block-buttons { margin-top: 38px; }
/* Bouton « Nous contacter » fantôme clair sur le hero */
.home-hero .is-style-fantome .wp-block-button__link {
	background: rgba(255, 255, 255, .06);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .5);
}
.home-hero .is-style-fantome .wp-block-button__link:hover {
	background: rgba(255, 255, 255, .14);
	border-color: rgba(255, 255, 255, .9);
}

/* Calque de pictos « domaines de mesure » flottants — décor injecté en JS
   (assets/js/hero-parallax.js). Chaque picto flotte en boucle (floatY*) et
   réagit à la souris via une parallaxe légère (transform sur .home-hero__picto). */
.home-hero__pictos { position: absolute; inset: 0; overflow: hidden; z-index: 1; pointer-events: none; }
.home-hero__picto {
	position: absolute;
	pointer-events: none;
	transition: transform .25s cubic-bezier(.22, .61, .36, 1);
	will-change: transform;
}
.home-hero__picto img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	/* pictos en blanc sur le fond sombre */
	filter: brightness(0) invert(1) drop-shadow(0 3px 10px rgba(0, 0, 0, .4));
	animation: floatY var(--picto-dur, 8s) ease-in-out var(--picto-delay, 0s) infinite;
}
.home-hero__picto--f2 img { animation-name: floatY2; }
.home-hero__picto--f3 img { animation-name: floatY3; }
@keyframes floatY  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes floatY2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(12px); } }
@keyframes floatY3 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) {
	.home-hero__picto { transition: none; }
	.home-hero__picto img { animation: none; }
}

/* --- Cartes Offre / Domaines (parts/offre-cards, parts/domaines-cards) --- */
/* On enrichit le .kcard « blanc » pour coller au design (rayon, lift, picto). */
.kcards { gap: 16px; }
.kcard {
	position: relative;
	border-radius: 16px;
	padding: 26px 22px;
	background: var(--wp--preset--color--base);
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.kcard:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(34, 43, 83, .13); border-color: #c9ccd6; }
.kcard h3 a { color: var(--wp--preset--color--primary); font-weight: 700; }
/* Lien étiré : on étend la zone cliquable du titre à toute la carte. */
.kcard h3 a::after { content: ""; position: absolute; inset: 0; }
.kcard .kcard__picto { margin: 0 auto 12px; }
.kcard .kcard__picto img { width: 64px; height: 64px; object-fit: contain; }
/* Pictos domaines : grisés au repos, couleur au survol */
.kcards--domaines .kcard { padding: 22px 12px; border-radius: 14px; }
.kcards--domaines .kcard h3 { font-size: 13px; }
.kcards--domaines .kcard__picto img { width: 50px; height: 50px; filter: grayscale(1) opacity(.5); transition: filter .3s ease; }
.kcards--domaines .kcard:hover .kcard__picto img { filter: none; }

/* -------- Tags de disponibilité des domaines (labo / sur site) -------- */
/* Pastilles natives (groupe flex + paragraphes), éditables depuis l'admin.
   Utilisées en tête de chaque page de domaine et dans les cartes « Domaines ». */
.domain-tags { gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.domain-tag {
	margin: 0;
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}
.domain-tag--labo { background: #E7EBF6; color: #222B53; } /* bleu du site (accréditation labo) */
.domain-tag--site { background: #FDECEE; color: #E52E3B; } /* rouge du site (intervention sur site) */
/* Déclinaison compacte + centrée dans les cartes de la grille des domaines. */
.kcard .domain-tags { justify-content: center; margin-top: 10px; }
.kcards--domaines .kcard .domain-tag { font-size: 10.5px; font-weight: 700; padding: 3px 9px; }

/* ------------------------- QUI SOMMES-NOUS --------------------------- */
.qsn-media { position: relative; border-radius: 18px; overflow: hidden; }
.qsn-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qsn-badge {
	position: absolute; left: 20px; bottom: 20px;
	display: flex; align-items: center; gap: 14px;
	background: rgba(34, 43, 83, .92);
	padding: 16px 20px; border-radius: 12px;
}
.qsn-badge__num { margin: 0; font-size: 34px; font-weight: 800; color: #fff; line-height: 1; }
.qsn-badge__lbl { margin: 0; font-size: 13.5px; font-weight: 600; color: #c8cce0; line-height: 1.3; }

/* --------------------------- CHIFFRES CLÉS --------------------------- */
.chiffres { background: var(--wp--preset--color--primary); margin-top: 0; }
.chiffres .wp-block-columns { margin: 0; }
/* Compteurs animés (bloc kblocks/counter) habillés comme les chiffres clés. */
.chiffres .wp-block-column .kb-counter { margin: 0; gap: 12px; }
.chiffres .kb-counter__value { font-size: clamp(40px, 5vw, 56px); font-weight: 800; color: #fff; line-height: 1; letter-spacing: -.02em; gap: 0; }
.chiffres .kb-counter__prefix,
.chiffres .kb-counter__suffix { font-size: 1em; font-weight: 800; opacity: 1; }
.chiffres .kb-counter__label { font-size: 14.5px; font-weight: 600; color: #aab0cc; line-height: 1.4; opacity: 1; }

/* -------------------------- RECONNAISSANCES -------------------------- */
.reconnaissances { text-align: center; }
.reconnaissances > * { margin-left: auto; margin-right: auto; }
.reconnaissances .is-style-eyebrow { justify-content: center; }
.reconnaissances__intro { max-width: 680px; font-size: 18px; font-weight: 600; color: var(--wp--preset--color--primary); }
.reconnaissances__text { max-width: 720px; color: var(--wp--preset--color--muted); }
.reconnaissances__logos { gap: 22px; justify-content: center; align-items: center; flex-wrap: wrap; }
.reconnaissances__logo {
	margin: 0; background: #fff; border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px; padding: 14px 20px; display: flex; align-items: center;
}
.reconnaissances__logo img { display: block; height: 64px; width: auto; }

/* ----------------------------- SECTEURS ----------------------------- */
.secteurs-grid { gap: 18px; }
/* Le bloc Cover est un flex « row » avec align-items:center (même spécificité
   que .sector-card) : on double la classe pour garantir l'emporter et étirer
   l'inner-container sur toute la hauteur, afin de caler le texte tout en bas. */
.sector-card.wp-block-cover {
	position: relative; min-height: 230px; border-radius: 16px; overflow: hidden;
	align-items: stretch; background: var(--wp--preset--color--primary);
}
.sector-card .wp-block-cover__image-background { transition: transform .6s ease; }
.sector-card:hover .wp-block-cover__image-background { transform: scale(1.05); }
/* Ombré en dégradé (transparent en haut → bleu nuit en bas). opacity:1 pour
   neutraliser le .5 imposé par la classe has-background-dim-50 de l'overlay. */
.sector-card .wp-block-cover__background {
	background: linear-gradient(180deg, rgba(20,25,55,0) 0%, rgba(20,25,55,.4) 55%, rgba(20,25,55,.85) 100%) !important;
	opacity: 1 !important;
}
/* Label calé en bas à gauche + flèche en bas à droite (cf. design). */
.sector-card .wp-block-cover__inner-container {
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	padding: 22px;
}
.sector-card h3 { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.2; }
.sector-card h3 a { color: #fff; text-decoration: none; }
.sector-card h3 a:hover { color: #fff; }
/* Lien étiré : toute la carte est cliquable. */
.sector-card h3 a::after { content: ""; position: absolute; inset: 0; }
/* Flèche « arrow_outward » blanche en bas à droite. */
.sector-card .wp-block-cover__inner-container::after {
	content: "";
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	background-color: #fff;
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6v2h8.59L5 17.59 6.41 19 16 9.41V18h2V6z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6v2h8.59L5 17.59 6.41 19 16 9.41V18h2V6z'/%3E%3C/svg%3E");
	transition: transform .3s ease;
}
.sector-card:hover .wp-block-cover__inner-container::after { transform: translate(3px, -3px); }

/* --------------------------- LABORATOIRES --------------------------- */
/* Cartes labo : photo + coordonnées (adresse / tél / e-mail). Les pictos
   sont posés en ::before via mask-image (mêmes SVG que .uic). */
.lab-grid { gap: 24px; }
.lab-card {
	background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border);
	border-radius: 18px; overflow: hidden;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.lab-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(34, 43, 83, .12); border-color: #c9ccd6; }
.lab-card__media { margin: 0; }
.lab-card__media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.lab-card__body { padding: 26px 28px; }
.lab-card__name { margin: 0 0 14px; font-size: 21px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; color: var(--wp--preset--color--accent); }
.lab-card__row { position: relative; margin: 0 0 12px; padding-left: 31px; font-size: 15px; line-height: 1.55; color: var(--wp--preset--color--muted); }
.lab-card__row:last-child { margin-bottom: 0; }
.lab-card__row::before {
	content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask: center / contain no-repeat; mask: center / contain no-repeat;
}
.lab-card__addr::before { -webkit-mask-image: url(../images/icons/ui/location_on.svg); mask-image: url(../images/icons/ui/location_on.svg); }
.lab-card__tel::before  { -webkit-mask-image: url(../images/icons/ui/call.svg); mask-image: url(../images/icons/ui/call.svg); }
.lab-card__mail::before { -webkit-mask-image: url(../images/icons/ui/mail.svg); mask-image: url(../images/icons/ui/mail.svg); }
.lab-card__tel a { font-weight: 700; color: var(--wp--preset--color--primary); text-decoration: none; }
.lab-card__mail a { color: var(--wp--preset--color--muted); text-decoration: none; }
.lab-card__tel a:hover, .lab-card__mail a:hover { color: var(--wp--preset--color--accent); }
.lab-card__fax { color: var(--wp--preset--color--muted-2); }
/* Carte entierement cliquable via le lien "Decouvrir" (lien etire) ;
   tel/mail restent cliquables grace a un z-index superieur sur les lignes. */
.lab-card { position: relative; }
.lab-card__more { margin: 18px 0 0; padding-left: 31px; font-size: 15px; font-weight: 700; }
.lab-card__more a { color: var(--wp--preset--color--primary); text-decoration: none; }
.lab-card__more a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.lab-card:hover .lab-card__more a { text-decoration: underline; }
.lab-card .lab-card__row { z-index: 2; }

/* ------------------------------ ATOUTS ------------------------------ */
.atouts-grid { gap: 18px; }
.atout-card { gap: 14px; padding: 30px 26px; border-radius: 16px; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.atout-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(34, 43, 83, .1); border-color: #c9ccd6; }
.atout-ic {
	width: 54px; height: 54px; border-radius: 13px; background: var(--wp--preset--color--accent-soft);
	display: flex; align-items: center; justify-content: center; padding: 0;
}
.atout-ic img { width: 28px; height: 28px; display: block; }
.atout-card h3 { margin: 2px 0 0; font-size: 19px; font-weight: 700; }
.atout-card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--wp--preset--color--muted); }

/* ----------------------------- PROCESSUS ---------------------------- */
.process-grid { gap: 24px; }
.process-card { padding: 30px 28px; border-radius: 16px; }
.process-card__num { margin: 0; font-size: 46px; font-weight: 800; color: var(--wp--preset--color--accent); line-height: 1; letter-spacing: -.02em; }
.process-card h3 { margin: 18px 0 0; font-size: 19px; font-weight: 700; }
.process-card p { margin: 12px 0 0; font-size: 15px; line-height: 1.65; color: var(--wp--preset--color--muted); }

/* ---------------------------- ACTUALITÉS ---------------------------- */
.actualites-home .wp-block-post-template { gap: 18px; }
.actualite-card {
	background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px; overflow: hidden;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.actualite-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(34, 43, 83, .12); border-color: #c9ccd6; }
.actualite-card > * { padding-left: 20px; padding-right: 20px; }
.actualite-card .wp-block-post-featured-image { padding: 0; margin: 0; }
.actualite-card .wp-block-post-featured-image img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.actualite-card .wp-block-post-date { margin-top: 18px; color: var(--wp--preset--color--muted-2); font-weight: 600; }
.actualite-card .wp-block-post-title { margin: 8px 0 0; font-size: 17px; }
.actualite-card .wp-block-post-title a { color: var(--wp--preset--color--primary); }
.actualite-card .wp-block-post-excerpt { margin: 8px 0 0; }
.actualite-card .wp-block-post-excerpt p { font-size: 14.5px; line-height: 1.6; color: var(--wp--preset--color--muted); }
.actualite-card .wp-block-post-excerpt__more-link { display: inline-block; margin: 6px 0 24px; font-weight: 700; color: var(--wp--preset--color--accent); }

/* Single actualité — image à la une bornée à 600px de large */
.single .wp-block-post-featured-image img { max-width: 600px; height: auto; }

/* Clients — « Ils nous font confiance » : déjà géré par .clients-slider plus haut. */

/* Responsive accueil (breakpoints du design) */
@media (max-width: 980px) {
	.atouts-grid, .process-grid, .actualites-home .wp-block-post-template { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 760px) {
	.secteurs-grid, .atouts-grid, .process-grid, .lab-grid, .actualites-home .wp-block-post-template { grid-template-columns: 1fr !important; }
	.chiffres .wp-block-columns { flex-wrap: wrap; }
	.chiffres .wp-block-column { flex-basis: calc(50% - 12px) !important; }
}

/* =====================================================================
 * PAGES INTÉRIEURES (Secteur, Domaine, Prestation, hubs, société…)
 * D'après design/Secteur, Domaine, Prestation. Réutilise le système
 * .home-section / .home-head de l'accueil ; ajoute les composants propres
 * aux pages intérieures. Sections pleines largeur alignfull dans le
 * post-content (constrained 1200).
 * ===================================================================== */

/* Sous-titre de section (h3 sous le H2) + intro de section. */
.shead-sub { margin: 14px 0 0; font-size: 19px; font-weight: 600; color: var(--wp--preset--color--muted); }
.sec-intro { max-width: 720px; margin: 16px 0 0; color: var(--wp--preset--color--muted); }
.sec-prose { max-width: 840px; }
.sec-prose p { color: var(--wp--preset--color--muted); line-height: 1.7; }
/* Le titre interne peut être un peu plus large que sur l'accueil. */
.home-section .home-head__title { max-width: 760px; }

/* Pictogramme inline (mask SVG Material Symbols, prend la couleur du texte). */
.uic {
	display: inline-block; width: 1.4em; height: 1.4em; flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: center / contain no-repeat; mask: center / contain no-repeat;
}
/* Pastille d'icône (carré arrondi rouge clair contenant un .uic rouge). */
.ic-pastille {
	width: 54px; height: 54px; border-radius: 13px; flex-shrink: 0;
	background: var(--wp--preset--color--accent-soft);
	display: flex; align-items: center; justify-content: center;
	color: var(--wp--preset--color--accent);
}
.ic-pastille .uic { width: 27px; height: 27px; }
.ic-pastille--dark { background: rgba(229, 46, 59, .16); color: #ff7a84; }

/* Pastille via le bloc kblocks/icon (style « Pastille », éditable en admin).
   Reproduit .ic-pastille autour du glyphe Material Symbols. Spécificité bumpée
   (:root) pour battre le margin par défaut de .kb-icon (style-index.css du bloc). */
:root .kb-icon.is-style-pastille { margin-block-end: 16px; }
.kb-icon.is-style-pastille .kb-icon__symbol {
	width: 54px; height: 54px; border-radius: 13px;
	background: var(--wp--preset--color--accent-soft);
	display: inline-flex; align-items: center; justify-content: center;
}
/* Dans les grilles de cartes (.pcard), pastille légèrement plus petite. */
.pcard .kb-icon.is-style-pastille .kb-icon__symbol { width: 52px; height: 52px; }
/* Cartes atouts (accueil) : l'espacement icône→titre est porté par le gap
   de .atout-card ; on neutralise le margin par défaut de la pastille. */
:root .atout-card .kb-icon.is-style-pastille { margin-block-end: 0; }

/* Pastille sombre (sur fond foncé, ex. .filiere-card). Reproduit
   .ic-pastille--dark. La couleur du glyphe est portée par la couleur perso
   du bloc (#ff7a84) ; on ne gère ici que le fond. */
:root .kb-icon.is-style-pastille-sombre { margin-block-end: 16px; }
.kb-icon.is-style-pastille-sombre .kb-icon__symbol {
	width: 54px; height: 54px; border-radius: 13px;
	background: rgba(229, 46, 59, .16);
	display: inline-flex; align-items: center; justify-content: center;
}
.filiere-card .kb-icon.is-style-pastille-sombre .kb-icon__symbol { width: 50px; height: 50px; }

/* Listes à puces « check » (core/list .check-list). Puce = check rouge. */
.check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.check-list li { margin: 0; position: relative; padding-left: 32px; font-size: 15.5px; line-height: 1.6; color: #2c324a; }
.check-list li::before {
	content: ""; position: absolute; left: 0; top: .05em; width: 21px; height: 21px;
	background-color: var(--wp--preset--color--accent);
	-webkit-mask: center / contain no-repeat; mask: center / contain no-repeat;
	-webkit-mask-image: url(../images/icons/ui/check_circle.svg); mask-image: url(../images/icons/ui/check_circle.svg);
}
/* Variante flèche marine (listes secondaires). */
.check-list--arrow li { color: var(--wp--preset--color--muted); }
.check-list--arrow li::before {
	background-color: var(--wp--preset--color--primary);
	-webkit-mask-image: url(../images/icons/ui/arrow_right_alt.svg); mask-image: url(../images/icons/ui/arrow_right_alt.svg);
}
/* Variante check simple (cartes services/instruments, plus dense). */
.check-list--tight { gap: 11px; }
.check-list--tight li { padding-left: 28px; font-size: 14.5px; }
.check-list--tight li::before { width: 19px; height: 19px; -webkit-mask-image: url(../images/icons/ui/check.svg); mask-image: url(../images/icons/ui/check.svg); }
/* Variante 2 colonnes (bloc « list » des prestations). */
.check-list--2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; }

/* Panneau doux (carte fond surface) — colonne droite des « enjeux », etc. */
.panel-soft { background: var(--wp--preset--color--surface); border: 1px solid #e9eaef; border-radius: 16px; padding: 30px; }
.panel-soft__title { margin: 0 0 16px; font-size: 15px; font-weight: 700; color: var(--wp--preset--color--primary); }
.mini-title { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--primary); margin: 0 0 18px; }

/* --- Secteur : cartes Services (picto offre PNG + titre + liste) --- */
.svc-grid { gap: 20px; align-items: start; }
.svc-card { background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border); border-radius: 16px; padding: 30px 28px; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.svc-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(34,43,83,.1); border-color: #c9ccd6; }
.svc-card__pic { margin: 0 0 18px; }
.svc-card__pic img { width: 60px; height: 60px; object-fit: contain; display: block; }
.svc-card h3 { margin: 0; font-size: 18.5px; font-weight: 700; line-height: 1.3; }

/* --- Secteur : Filières (section marine pleine largeur) --- */
.section-marine { background: var(--wp--preset--color--primary); margin-block-start: 0; padding-top: var(--wp--preset--spacing--section); padding-bottom: var(--wp--preset--spacing--section); }
.section-marine :where(h2, h3) { color: #fff; }
.section-marine .is-style-eyebrow { color: #ff7a84; }
.section-marine .shead-sub { color: #aab0cc; }
.filiere-grid { gap: 18px; }
.filiere-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 26px 24px; }
.filiere-card .ic-pastille { width: 50px; height: 50px; margin-bottom: 16px; }
.filiere-card h3 { margin: 0; font-size: 17px; font-weight: 700; color: #fff; line-height: 1.3; }
.filiere-card p { margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: #aab0cc; }

/* --- Domaine : cartes Instruments --- */
.instr-grid { gap: 20px; }
.instr-card { background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border); border-radius: 16px; padding: 28px 30px; }
.instr-card h3 { margin: 0 0 18px; font-size: 18px; font-weight: 700; }

/* --- Prestation : cartes à pastille (bloc « cards ») --- */
.pcard-grid { gap: 20px; align-items: start; }
.pcard { background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border); border-radius: 16px; padding: 28px 26px; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.pcard:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(34,43,83,.1); border-color: #c9ccd6; }
.pcard .ic-pastille { width: 52px; height: 52px; margin-bottom: 16px; }
.pcard h3 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; }
.pcard p { margin: 12px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--wp--preset--color--muted); }

/* --- Prestation : colonnes (bloc « columns ») --- */
.col-card { background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border); border-radius: 16px; padding: 30px; height: 100%; }
.col-card h3 { margin: 0 0 12px; font-size: 18px; font-weight: 700; line-height: 1.3; }
.col-card p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--wp--preset--color--muted); }

/* --- Prestation : chiffres (bloc « stats ») sur fond clair, centrés --- */
.stat-row { gap: 24px; }
.stat { text-align: center; padding: 8px; }
.stat__num { margin: 0; font-size: clamp(34px, 4.4vw, 50px); font-weight: 800; color: var(--wp--preset--color--primary); line-height: 1; letter-spacing: -.02em; }
.stat__lbl { margin: 10px 0 0; font-size: 14.5px; font-weight: 600; color: var(--wp--preset--color--muted); }

/* --- Prestation : étapes (bloc « steps ») --- */
.step-grid { gap: 20px; align-items: start; }
.step-card { background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border); border-radius: 16px; padding: 28px 26px; }
.step-card__num { width: 40px; height: 40px; border-radius: 50%; background: var(--wp--preset--color--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; margin: 0 0 16px; }
.step-card h3 { margin: 0; font-size: 17.5px; font-weight: 700; line-height: 1.3; }
.step-card p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--wp--preset--color--muted); }

/* --- Prestation : marques (bloc « brands ») --- */
.brand-row { gap: 16px; }
.brand-chip { min-width: 150px; height: 72px; border: 1px solid var(--wp--preset--color--border); border-radius: 12px; background: var(--wp--preset--color--base); display: flex; align-items: center; justify-content: center; color: #7a8092; font-weight: 800; letter-spacing: .04em; margin: 0; }
.brand-chip img { max-height: 44px; width: auto; object-fit: contain; }

/* --- Prestation : citation (bloc « quote ») --- */
.pquote { text-align: center; }
.pquote::before { content: ""; display: inline-block; width: 30px; height: 22px; background: var(--wp--preset--color--accent); clip-path: polygon(0 0, 55% 0, 100% 50%, 55% 100%, 0 100%, 45% 50%); margin-bottom: 18px; }
.pquote p { margin: 0 auto; max-width: 760px; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.35; color: var(--wp--preset--color--primary); font-weight: 800; letter-spacing: -.01em; }

/* --- Bande « explorez » (bas des domaines) --- */
.more-band { text-align: center; }
.more-band p { margin: 0 0 22px; font-size: 15px; font-weight: 700; letter-spacing: .04em; color: var(--wp--preset--color--muted); }

/* Responsive pages intérieures (breakpoints du design). */
@media (max-width: 900px) {
	.svc-grid, .pcard-grid, .step-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 760px) {
	.filiere-grid, .instr-grid, .stat-row { grid-template-columns: 1fr !important; }
	.check-list--2col { grid-template-columns: 1fr; }
}

/* === Pictogrammes Material Symbols (classes de masque) === */
.uic--arrow_forward{-webkit-mask-image:url(../images/icons/ui/arrow_forward.svg);mask-image:url(../images/icons/ui/arrow_forward.svg)}
.uic--arrow_right_alt{-webkit-mask-image:url(../images/icons/ui/arrow_right_alt.svg);mask-image:url(../images/icons/ui/arrow_right_alt.svg)}
.uic--autorenew{-webkit-mask-image:url(../images/icons/ui/autorenew.svg);mask-image:url(../images/icons/ui/autorenew.svg)}
.uic--balance{-webkit-mask-image:url(../images/icons/ui/balance.svg);mask-image:url(../images/icons/ui/balance.svg)}
.uic--biotech{-webkit-mask-image:url(../images/icons/ui/biotech.svg);mask-image:url(../images/icons/ui/biotech.svg)}
.uic--bolt{-webkit-mask-image:url(../images/icons/ui/bolt.svg);mask-image:url(../images/icons/ui/bolt.svg)}
.uic--build{-webkit-mask-image:url(../images/icons/ui/build.svg);mask-image:url(../images/icons/ui/build.svg)}
.uic--cable{-webkit-mask-image:url(../images/icons/ui/cable.svg);mask-image:url(../images/icons/ui/cable.svg)}
.uic--call{-webkit-mask-image:url(../images/icons/ui/call.svg);mask-image:url(../images/icons/ui/call.svg)}
.uic--check{-webkit-mask-image:url(../images/icons/ui/check.svg);mask-image:url(../images/icons/ui/check.svg)}
.uic--check_circle{-webkit-mask-image:url(../images/icons/ui/check_circle.svg);mask-image:url(../images/icons/ui/check_circle.svg)}
.uic--construction{-webkit-mask-image:url(../images/icons/ui/construction.svg);mask-image:url(../images/icons/ui/construction.svg)}
.uic--description{-webkit-mask-image:url(../images/icons/ui/description.svg);mask-image:url(../images/icons/ui/description.svg)}
.uic--directions_boat{-webkit-mask-image:url(../images/icons/ui/directions_boat.svg);mask-image:url(../images/icons/ui/directions_boat.svg)}
.uic--directions_car{-webkit-mask-image:url(../images/icons/ui/directions_car.svg);mask-image:url(../images/icons/ui/directions_car.svg)}
.uic--diversity_3{-webkit-mask-image:url(../images/icons/ui/diversity_3.svg);mask-image:url(../images/icons/ui/diversity_3.svg)}
.uic--download{-webkit-mask-image:url(../images/icons/ui/download.svg);mask-image:url(../images/icons/ui/download.svg)}
.uic--eco{-webkit-mask-image:url(../images/icons/ui/eco.svg);mask-image:url(../images/icons/ui/eco.svg)}
.uic--electrical_services{-webkit-mask-image:url(../images/icons/ui/electrical_services.svg);mask-image:url(../images/icons/ui/electrical_services.svg)}
.uic--engineering{-webkit-mask-image:url(../images/icons/ui/engineering.svg);mask-image:url(../images/icons/ui/engineering.svg)}
.uic--factory{-webkit-mask-image:url(../images/icons/ui/factory.svg);mask-image:url(../images/icons/ui/factory.svg)}
.uic--flight{-webkit-mask-image:url(../images/icons/ui/flight.svg);mask-image:url(../images/icons/ui/flight.svg)}
.uic--gps_fixed{-webkit-mask-image:url(../images/icons/ui/gps_fixed.svg);mask-image:url(../images/icons/ui/gps_fixed.svg)}
.uic--graphic_eq{-webkit-mask-image:url(../images/icons/ui/graphic_eq.svg);mask-image:url(../images/icons/ui/graphic_eq.svg)}
.uic--groups{-webkit-mask-image:url(../images/icons/ui/groups.svg);mask-image:url(../images/icons/ui/groups.svg)}
.uic--handshake{-webkit-mask-image:url(../images/icons/ui/handshake.svg);mask-image:url(../images/icons/ui/handshake.svg)}
.uic--home_repair_service{-webkit-mask-image:url(../images/icons/ui/home_repair_service.svg);mask-image:url(../images/icons/ui/home_repair_service.svg)}
.uic--insights{-webkit-mask-image:url(../images/icons/ui/insights.svg);mask-image:url(../images/icons/ui/insights.svg)}
.uic--inventory_2{-webkit-mask-image:url(../images/icons/ui/inventory_2.svg);mask-image:url(../images/icons/ui/inventory_2.svg)}
.uic--lan{-webkit-mask-image:url(../images/icons/ui/lan.svg);mask-image:url(../images/icons/ui/lan.svg)}
.uic--location_on{-webkit-mask-image:url(../images/icons/ui/location_on.svg);mask-image:url(../images/icons/ui/location_on.svg)}
.uic--mail{-webkit-mask-image:url(../images/icons/ui/mail.svg);mask-image:url(../images/icons/ui/mail.svg)}
.uic--memory{-webkit-mask-image:url(../images/icons/ui/memory.svg);mask-image:url(../images/icons/ui/memory.svg)}
.uic--monitor_heart{-webkit-mask-image:url(../images/icons/ui/monitor_heart.svg);mask-image:url(../images/icons/ui/monitor_heart.svg)}
.uic--pin_drop{-webkit-mask-image:url(../images/icons/ui/pin_drop.svg);mask-image:url(../images/icons/ui/pin_drop.svg)}
.uic--place{-webkit-mask-image:url(../images/icons/ui/place.svg);mask-image:url(../images/icons/ui/place.svg)}
.uic--precision_manufacturing{-webkit-mask-image:url(../images/icons/ui/precision_manufacturing.svg);mask-image:url(../images/icons/ui/precision_manufacturing.svg)}
.uic--recycling{-webkit-mask-image:url(../images/icons/ui/recycling.svg);mask-image:url(../images/icons/ui/recycling.svg)}
.uic--request_quote{-webkit-mask-image:url(../images/icons/ui/request_quote.svg);mask-image:url(../images/icons/ui/request_quote.svg)}
.uic--router{-webkit-mask-image:url(../images/icons/ui/router.svg);mask-image:url(../images/icons/ui/router.svg)}
.uic--rule{-webkit-mask-image:url(../images/icons/ui/rule.svg);mask-image:url(../images/icons/ui/rule.svg)}
.uic--sanitizer{-webkit-mask-image:url(../images/icons/ui/sanitizer.svg);mask-image:url(../images/icons/ui/sanitizer.svg)}
.uic--savings{-webkit-mask-image:url(../images/icons/ui/savings.svg);mask-image:url(../images/icons/ui/savings.svg)}
.uic--schedule{-webkit-mask-image:url(../images/icons/ui/schedule.svg);mask-image:url(../images/icons/ui/schedule.svg)}
.uic--science{-webkit-mask-image:url(../images/icons/ui/science.svg);mask-image:url(../images/icons/ui/science.svg)}
.uic--shield{-webkit-mask-image:url(../images/icons/ui/shield.svg);mask-image:url(../images/icons/ui/shield.svg)}
.uic--solar_power{-webkit-mask-image:url(../images/icons/ui/solar_power.svg);mask-image:url(../images/icons/ui/solar_power.svg)}
.uic--speed{-webkit-mask-image:url(../images/icons/ui/speed.svg);mask-image:url(../images/icons/ui/speed.svg)}
.uic--straighten{-webkit-mask-image:url(../images/icons/ui/straighten.svg);mask-image:url(../images/icons/ui/straighten.svg)}
.uic--support_agent{-webkit-mask-image:url(../images/icons/ui/support_agent.svg);mask-image:url(../images/icons/ui/support_agent.svg)}
.uic--target{-webkit-mask-image:url(../images/icons/ui/target.svg);mask-image:url(../images/icons/ui/target.svg)}
.uic--train{-webkit-mask-image:url(../images/icons/ui/train.svg);mask-image:url(../images/icons/ui/train.svg)}
.uic--troubleshoot{-webkit-mask-image:url(../images/icons/ui/troubleshoot.svg);mask-image:url(../images/icons/ui/troubleshoot.svg)}
.uic--tune{-webkit-mask-image:url(../images/icons/ui/tune.svg);mask-image:url(../images/icons/ui/tune.svg)}
.uic--verified{-webkit-mask-image:url(../images/icons/ui/verified.svg);mask-image:url(../images/icons/ui/verified.svg)}
.uic--verified_user{-webkit-mask-image:url(../images/icons/ui/verified_user.svg);mask-image:url(../images/icons/ui/verified_user.svg)}
.uic--volunteer_activism{-webkit-mask-image:url(../images/icons/ui/volunteer_activism.svg);mask-image:url(../images/icons/ui/volunteer_activism.svg)}
.uic--workspace_premium{-webkit-mask-image:url(../images/icons/ui/workspace_premium.svg);mask-image:url(../images/icons/ui/workspace_premium.svg)}

/* ---------------------------------------------------------------------------
 * ALIGNEMENT NATIF DU CONTENU — correctif GLOBAL du recentrage FSE
 *
 * Piège WordPress : en layout « constrained », le cœur recentre
 *   (margin-inline:auto !important) TOUT enfant direct plus étroit que la
 *   colonne. Un texte limité en largeur de lecture (max-width : .sec-prose,
 *   .sec-intro, titres de section…) se retrouve donc décalé vers la droite,
 *   alors que les blocs pleine largeur (grilles…) restent calés à gauche.
 *
 * Correctif UNIQUE, sans rien ajouter dans le contenu : on réaligne ces blocs
 * sur le bord gauche de la colonne via un offset qui s'auto-adapte au contexte —
 *   margin-inline-start: max(0, (100% - colonne) / 2)
 *   • enfant direct d'une section pleine largeur (containing block ≈ viewport)
 *       → offset = (viewport - colonne)/2 = bord gauche de la colonne.
 *   • enfant d'un conteneur déjà réduit à la largeur colonne (ex. groupe 880)
 *       → (880 - 1200)/2 < 0 → clampé à 0 → simple alignement à gauche.
 * Un seul calcul couvre les deux cas, INDÉPENDAMMENT de l'ancêtre et de la page.
 * Les blocs pleine largeur ne bougent pas (offset == centrage d'origine).
 *
 * La règle vise tout layout contraint DANS le contenu (.wp-block-post-content),
 * en descendant comme en racine. Spécificité (0,3,0) > règle de centrage du
 * cœur (0,1,0) → notre alignement gauche gagne sans surenchère de !important.
 *
 * --col-w : largeur de la colonne courante (défaut = contentSize global 1200).
 *   Une section PLEINE LARGEUR qui déclare un contentSize LOCAL (860, 880…)
 *   redéfinit --col-w pour que l'offset tombe sur sa vraie colonne.
 * ------------------------------------------------------------------------- */
.wp-block-post-content .is-layout-constrained > .home-head__title,
.wp-block-post-content .is-layout-constrained > .sec-prose,
.wp-block-post-content .is-layout-constrained > .sec-intro,
.wp-block-post-content .is-layout-constrained > .sec-lead,
.wp-block-post-content .is-layout-constrained > .reconnaissances__intro,
.wp-block-post-content .is-layout-constrained > .reconnaissances__text,
.wp-block-post-content .is-layout-constrained > .wp-block-details.is-style-faq,
.wp-block-post-content.is-layout-constrained > .home-head__title,
.wp-block-post-content.is-layout-constrained > .sec-prose,
.wp-block-post-content.is-layout-constrained > .sec-intro,
.wp-block-post-content.is-layout-constrained > .sec-lead,
.wp-block-post-content.is-layout-constrained > .reconnaissances__intro,
.wp-block-post-content.is-layout-constrained > .reconnaissances__text {
	margin-inline-start: max(0px, calc((100% - var(--col-w, var(--wp--style--global--content-size))) / 2)) !important;
	margin-inline-end: 0 !important;
}
/* Sections PLEINE LARGEUR à contentSize local : caler --col-w sur leur colonne. */
.reconnaissances { --col-w: 860px; }
.page-id-143 .home-section.is-layout-constrained > .sec-intro { --col-w: 880px; }
/* Exception : un texte explicitement centré reste centré (priorité spécificité). */
.wp-block-post-content .is-layout-constrained > .sec-intro.has-text-align-center,
.wp-block-post-content .is-layout-constrained > .sec-lead.has-text-align-center {
	margin-inline: auto !important;
}

/* === Classes complémentaires (pages générées : Présentation, RSE, Recrutement, etc.) === */

/* Icône info (ajout). */
.uic--info{-webkit-mask-image:url(../images/icons/ui/info.svg);mask-image:url(../images/icons/ui/info.svg)}

/* Chiffres clés en paragraphes (.chiffres marine déjà stylée). */
.chiffre { text-align: center; }
.chiffre__num { margin: 0; font-size: clamp(40px, 5vw, 56px); font-weight: 800; color: #fff; line-height: 1; letter-spacing: -.02em; }
.chiffre__lbl { margin: 10px 0 0; font-size: 14.5px; font-weight: 600; color: #aab0cc; line-height: 1.4; }

/* Colonnes « split » (enjeux secteur) : écart généreux. */
.split-2 { gap: clamp(32px, 4vw, 56px) !important; }

/* Paragraphe chapô centré accentué (sec-lead). */
.sec-lead { max-width: 760px; margin-inline: auto; font-size: 18px; font-weight: 600; line-height: 1.6; color: var(--wp--preset--color--primary); }

/* Titre à marqueur rouge (cartes labo / reconnaissances). */
.redmark { position: relative; padding-left: 16px; }
.redmark::before { content: ""; position: absolute; left: 0; top: .12em; bottom: .12em; width: 4px; border-radius: 2px; background: var(--wp--preset--color--accent); }

/* Auteur de citation (sous .pquote). */
.pquote__author { margin: 16px 0 0; font-size: 15px; font-weight: 700; color: var(--wp--preset--color--muted); text-align: center; }

/* Puces « valeurs » (Politique RSE). */
.value-chips { gap: 12px; }
.value-chip { margin: 0; padding: 10px 18px; border-radius: 999px; background: var(--wp--preset--color--accent-soft); color: var(--wp--preset--color--primary); font-size: 14.5px; font-weight: 700; }

/* Cartes d'offres d'emploi (Query Loop CPT emploi). */
.emploi-stack { display: flex; flex-direction: column; gap: 18px; }
.emploi-list .wp-block-post-template { display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 0; list-style: none; }
.emploi-card { background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border); border-radius: 16px; padding: 26px 28px; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.emploi-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(34,43,83,.1); border-color: #c9ccd6; }
.emploi-card__meta { gap: 12px; align-items: center; margin-bottom: 4px; }
.emploi-card__lieu { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--accent); display: flex; align-items: center; gap: 8px; }
.emploi-card__contrat { margin: 0; display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); font-size: 12.5px; font-weight: 700; color: var(--wp--preset--color--primary); }
.emploi-card .wp-block-post-title { margin: 6px 0 0; font-size: 20px; }
.emploi-card .wp-block-post-title a { color: var(--wp--preset--color--primary); text-decoration: none; }
.emploi-card .wp-block-post-title a:hover { color: var(--wp--preset--color--accent); }
.emploi-card__excerpt { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--wp--preset--color--muted); }
.emploi-card .wp-block-buttons { margin-top: 18px; }

/* --- Gravity Forms : espacement vertical des champs resserré --- */
.gform-theme--foundation .gform_fields { --gf-form-gap-y: 18px; }

/* ==========================================================================
   ANIMATIONS AU SCROLL — révélation progressive des sections
   --------------------------------------------------------------------------
   Apparition douce (fondu + glissé) quand un bloc entre dans le viewport.

   • Activation : la classe `reveal-on` est posée sur <html> par un script
     synchrone du <head> (cf. functions.php), UNIQUEMENT si JS est dispo et que
     l'utilisateur ne demande pas un mouvement réduit. Sans cette classe, aucun
     état caché n'est appliqué → le contenu reste visible (no-JS, lecteurs, etc.).
   • Déclenchement : assets/js/scroll-reveal.js ajoute `.is-in` (IntersectionObserver).
   • Par défaut : chaque section de premier niveau (.wp-block-post-content > *)
     apparaît en fondu + glissé vers le haut ; les colonnes (lignes de cartes)
     entrent en cascade.
   • Pilotage depuis l'ADMIN — ajouter une classe CSS au bloc (réglages avancés) :
       reveal-left / reveal-right / reveal-up / reveal-fade / reveal-scale
       reveal-stagger  → anime en cascade les enfants directs d'un conteneur
       no-reveal       → désactive l'animation pour ce bloc
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

	/* État caché (commun à toutes les cibles). */
	html.reveal-on .wp-block-post-content > *,
	html.reveal-on .reveal,
	html.reveal-on .reveal-left,
	html.reveal-on .reveal-right,
	html.reveal-on .reveal-up,
	html.reveal-on .reveal-fade,
	html.reveal-on .reveal-scale {
		opacity: 0;
		transform: translateY(28px);
		transition: opacity .7s ease, transform .8s cubic-bezier(.22, .61, .36, 1);
		will-change: opacity, transform;
	}

	/* Sens explicites (classes ajoutables depuis l'éditeur). */
	html.reveal-on .reveal-left  { transform: translateX(-44px); }
	html.reveal-on .reveal-right { transform: translateX(44px); }
	html.reveal-on .reveal-up    { transform: translateY(44px); }
	html.reveal-on .reveal-fade  { transform: none; }
	html.reveal-on .reveal-scale { transform: scale(.965); }

	/* État révélé (commun). */
	html.reveal-on .wp-block-post-content > *.is-in,
	html.reveal-on .reveal.is-in,
	html.reveal-on .reveal-left.is-in,
	html.reveal-on .reveal-right.is-in,
	html.reveal-on .reveal-up.is-in,
	html.reveal-on .reveal-fade.is-in,
	html.reveal-on .reveal-scale.is-in {
		opacity: 1;
		transform: none;
	}

	/* Conteneur "cascade" : le conteneur ne bouge pas, ses enfants s'animent. */
	html.reveal-on .reveal-stagger {
		opacity: 1;
		transform: none;
	}
	html.reveal-on .reveal-stagger > *,
	html.reveal-on .wp-block-post-content > * .wp-block-columns > .wp-block-column {
		opacity: 0;
		transform: translateY(22px);
		transition: opacity .6s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
		will-change: opacity, transform;
	}
	html.reveal-on .reveal-stagger.is-in > *,
	html.reveal-on .wp-block-post-content > .is-in .wp-block-columns > .wp-block-column {
		opacity: 1;
		transform: none;
	}

	/* Délais de cascade (enfants de .reveal-stagger ET colonnes d'une section). */
	html.reveal-on .reveal-stagger.is-in > *:nth-child(1),
	html.reveal-on .wp-block-post-content > .is-in .wp-block-columns > .wp-block-column:nth-child(1) { transition-delay: .04s; }
	html.reveal-on .reveal-stagger.is-in > *:nth-child(2),
	html.reveal-on .wp-block-post-content > .is-in .wp-block-columns > .wp-block-column:nth-child(2) { transition-delay: .12s; }
	html.reveal-on .reveal-stagger.is-in > *:nth-child(3),
	html.reveal-on .wp-block-post-content > .is-in .wp-block-columns > .wp-block-column:nth-child(3) { transition-delay: .20s; }
	html.reveal-on .reveal-stagger.is-in > *:nth-child(4),
	html.reveal-on .wp-block-post-content > .is-in .wp-block-columns > .wp-block-column:nth-child(4) { transition-delay: .28s; }
	html.reveal-on .reveal-stagger.is-in > *:nth-child(5),
	html.reveal-on .wp-block-post-content > .is-in .wp-block-columns > .wp-block-column:nth-child(5) { transition-delay: .36s; }
	html.reveal-on .reveal-stagger.is-in > *:nth-child(n + 6),
	html.reveal-on .wp-block-post-content > .is-in .wp-block-columns > .wp-block-column:nth-child(n + 6) { transition-delay: .44s; }

	/* Opt-out explicite. */
	html.reveal-on .no-reveal,
	html.reveal-on .wp-block-post-content > .no-reveal,
	html.reveal-on .no-reveal .wp-block-columns > .wp-block-column {
		opacity: 1 !important;
		transform: none !important;
		transition: none;
	}

	/* ----------------------------------------------------------------------
	   HERO DE L'ACCUEIL — apparition en cascade du contenu ("slider")
	   ----------------------------------------------------------------------
	   Le hero est au-dessus de la ligne de flottaison : on l'anime au CHARGEMENT
	   (keyframes + délais) plutôt qu'à l'IntersectionObserver, pour éviter tout
	   flash avant déclenchement. On neutralise d'abord le fondu de bloc que le
	   cover recevrait en tant que 1er enfant de .wp-block-post-content, afin de
	   n'avoir qu'un seul effet : le fond reste posé, le texte entre en cascade.
	   Toujours sous html.reveal-on → no-JS / mouvement réduit = contenu visible. */
	html.reveal-on .wp-block-post-content > .home-hero {
		opacity: 1;
		transform: none;
		transition: none;
	}

	html.reveal-on .home-head--hero > * {
		opacity: 0;
		animation: heroReveal .8s cubic-bezier(.22, .61, .36, 1) both;
		will-change: opacity, transform;
	}
	/* Cascade : sur-titre → titre → chapô → boutons. */
	html.reveal-on .home-head--hero > *:nth-child(1) { animation-delay: .15s; }
	html.reveal-on .home-head--hero > *:nth-child(2) { animation-delay: .30s; }
	html.reveal-on .home-head--hero > *:nth-child(3) { animation-delay: .46s; }
	html.reveal-on .home-head--hero > *:nth-child(4) { animation-delay: .62s; }
}

@keyframes heroReveal {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: none; }
}

/* Impression : ne jamais masquer un bloc non encore révélé. */
@media print {
	html.reveal-on .wp-block-post-content > *,
	html.reveal-on [class*="reveal"],
	html.reveal-on .wp-block-columns > .wp-block-column {
		opacity: 1 !important;
		transform: none !important;
	}
}