/* ==========================================================================
   Pause Ménage — custom.css (desktop)
   Reprend EXACTEMENT les tokens de resources/sass/tailwind.scss du dump.
   ========================================================================== */

:root {
	/* ---- Palette réelle du site (tokens du @theme Tailwind) ---- */
	--pm-black:         #0d0a00;   /* noir légèrement ambré */
	--pm-white:         #ffffff;

	--pm-blue-50:       #f3f9fc;
	--pm-blue-100:      #e7f2f7;   /* hover boutons outline + flèches slider */
	--pm-sky-50:        #f0f9ff;   /* sky-50 du live — fond des sections claires */
	--pm-blue-200:      #cce5ef;   /* footer bg */
	--pm-blue-300:      #99cde0;
	--pm-blue-400:      #7ec5d9;
	--pm-blue-500:      #4eaecb;
	--pm-blue-600:      #1a96bd;
	--pm-blue-700:      #017faf;   /* PRIMARY */
	--pm-blue-800:      #056387;
	--pm-blue-900:      #0b526f;
	--pm-blue-950:      #07344a;

	--pm-amber-50:      #fffbeb;   /* header bg */
	--pm-amber-100:     #fef3c7;
	--pm-amber-200:     #fde78a;   /* dropdown bg */
	--pm-amber-300:     #fcd140;   /* SECONDARY */
	--pm-amber-400:     #fbc024;
	--pm-amber-500:     #f59f0b;

	--pm-alphagrey-50:  rgba(13,10,0,0.05);
	--pm-alphagrey-100: rgba(13,10,0,0.10);
	--pm-alphagrey-200: rgba(13,10,0,0.15);   /* border inputs */
	--pm-alphagrey-300: rgba(13,10,0,0.25);
	--pm-alphagrey-400: rgba(13,10,0,0.35);
	--pm-alphagrey-600: rgba(13,10,0,0.60);   /* footer border */

	/* Sémantique */
	--pm-primary:       var(--pm-blue-700);
	--pm-secondary:     var(--pm-amber-300);

	/* ---- Typographie ---- */
	/* En production le site live utilise Montserrat pour les TITRES ET le corps.
	   Poppins défini dans le SCSS source n'est pas chargé — on s'aligne sur le live. */
	--pm-font-heading:  'Montserrat', ui-sans-serif, system-ui, sans-serif;
	--pm-font-body:     'Montserrat', ui-sans-serif, system-ui, sans-serif;

	--pm-h1-d: 3.5rem;  --pm-h1-m: 2.5rem;
	--pm-h2-d: 3rem;    --pm-h2-m: 2.25rem;
	--pm-h3-d: 2.5rem;  --pm-h3-m: 2rem;
	--pm-h4-d: 2rem;    --pm-h4-m: 1.5rem;
	--pm-h5-d: 1.5rem;  --pm-h5-m: 1.25rem;
	--pm-h6-d: 1.25rem; --pm-h6-m: 1.125rem;

	/* Conteneur */
	--pm-container-max: 1536px;  /* max-w-[96rem] */
	--pm-container-px:  0;        /* aligné sur le live : pas de padding sur le
	                                container outer ; chaque section/cellule gère
	                                son propre padding interne (ex. .pm-home__hero-text).
	                                Sur mobile, voir responsive.css pour padding latéral. */

	/* Dimensions */
	--pm-header-min-h:  8rem;
	--pm-logo-h:        6.5rem;  /* h-26 */
	--pm-logo-max-w:    140px;

	/* Transitions & rayons */
	--pm-transition:    200ms ease-in-out;
	--pm-radius:        0.5rem;  /* rounded-lg */
	--pm-shadow:        0 4px 12px rgba(0,0,0,0.08);
}

/* ==========================================================================
   BASE — typo & corps
   ========================================================================== */

/* Verrou anti-scroll-horizontal à plusieurs niveaux (html, body, #wrapper, main).
   Pourquoi tant de niveaux ? Sur mobile, certains descendants débordent (offcanvas
   Bootstrap positionné off-screen via transform, slider testimonials avec
   margin-right négatif, etc.). `overflow-x: clip` sur html+body ne suffit pas
   toujours selon les ancêtres / les contextes de stacking — on l'applique aussi
   sur #wrapper et .pm-main par sécurité.
   `clip` (pas `hidden`) pour ne pas casser les éléments en `position: sticky`. */
html { overflow-x: clip; }

.pm-body {
	font-family: var(--pm-font-body);
	font-weight: 400;
	color: var(--pm-black);
	background: var(--pm-white);
	line-height: 1.625; /* 26px sur 16px — identique au live */
	text-wrap: pretty;  /* algorithme de wrapping qui évite les orphelins (ex.
	                       "souci" tout seul sur la dernière ligne d'un titre).
	                       Identique au live. Supporté Chrome 117+, Firefox 121+,
	                       Safari 17.5+. Fallback : wrap normal sur navigateurs anciens. */
	overflow-x: clip;
	max-width: 100%;
	-webkit-font-smoothing: antialiased;
	margin: 0;
}

#wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow-x: clip;
	max-width: 100%;
}

.pm-main {
	flex: 1 0 auto;
	overflow-x: clip;
	max-width: 100%;
}

/* Retire le margin-top:1rem imposé par #main dans critical.css (inline head)
   et dans build/main.css (compilé du starter) — nous gérons l'espacement via les
   paddings des sections .pm-home__* */
#main,
.pm-main {
	margin-top: 0 !important;
}

/* Titres en Poppins, font-normal — ratios identiques au live (lh 1.25, ls -0.025em) */
.pm-body h1, .pm-body h2, .pm-body h3,
.pm-body h4, .pm-body h5, .pm-body h6 {
	font-family: var(--pm-font-heading);
	font-weight: 400;
	color: var(--pm-black);
	letter-spacing: -0.025em;
	line-height: 1.25;
	margin: 0 0 0.5rem;
	max-width: 48rem;
}

.pm-body h1 { font-size: var(--pm-h1-d); }
.pm-body h2 { font-size: var(--pm-h2-d); }
.pm-body h3 { font-size: var(--pm-h3-d); }
.pm-body h4 { font-size: var(--pm-h4-d); }
.pm-body h5 { font-size: var(--pm-h5-d); }
.pm-body h6 { font-size: var(--pm-h6-d); }

a { color: var(--pm-primary); }
a:hover { color: var(--pm-blue-600); }

.skip-link {
	background: var(--pm-secondary);
	color: var(--pm-black);
	padding: 0.5rem 1rem;
	font-weight: 600;
}

/* ==========================================================================
   BOUTONS — reproduit exactement .btn-primary / .btn-outlined / .btn-transparent
   du dump (voir tailwind.scss @layer components .btn)
   ========================================================================== */

.pm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 0.5rem;
	width: auto;
	min-height: 2.75rem;             /* min-h-11 */
	padding: 0.625rem 1rem;          /* px-4 py-2.5 */
	border-radius: var(--pm-radius); /* rounded-lg */
	border: 1px solid transparent;
	font-family: var(--pm-font-body);
	font-weight: 500;                /* font-medium */
	font-size: 0.875rem;             /* text-sm */
	line-height: 1.25;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--pm-transition), color var(--pm-transition), border-color var(--pm-transition);
	white-space: nowrap;
}

/* bg-blue-700 text-white hover:bg-blue-600 */
.pm-btn--primary {
	background: var(--pm-blue-700);
	color: var(--pm-white);
	border-color: var(--pm-blue-700);
}
.pm-btn--primary:hover,
.pm-btn--primary:focus {
	background: var(--pm-blue-600);
	border-color: var(--pm-blue-600);
	color: var(--pm-white);
}

/* bg-amber-300 text-black */
.pm-btn--secondary {
	background: var(--pm-secondary);
	color: var(--pm-black);
	border-color: var(--pm-secondary);
}
.pm-btn--secondary:hover,
.pm-btn--secondary:focus {
	background: var(--pm-amber-400);
	border-color: var(--pm-amber-400);
	color: var(--pm-black);
}

/* bg-transparent text-black hover:bg-blue-100 border-1 border-blue-700 */
.pm-btn--outline {
	background: transparent;
	color: var(--pm-black);
	border: 1px solid var(--pm-blue-700);
}
.pm-btn--outline:hover,
.pm-btn--outline:focus {
	background: var(--pm-blue-100);
	color: var(--pm-black);
	border-color: var(--pm-blue-700);
}

.pm-btn--sm {
	min-height: 2.25rem;
	padding: 0.4rem 0.75rem;
	font-size: 0.8rem;
}

/* ==========================================================================
   HEADER
   <header class="bg-amber-50">
     <div class="max-w-[96rem] mx-auto">
       <div class="flex gap-4 items-center min-h-[8rem] py-3 px-5">
         [logos + slogan] [nav desktop | nav mobile]
   ========================================================================== */

.pm-header {
	background: var(--pm-amber-50);
	position: relative;
	z-index: 100;
}

.pm-header__container {
	max-width: var(--pm-container-max);
	margin: 0 auto;
	padding: 0.75rem var(--pm-container-px);   /* py-3 px-5 */
}

.pm-header__row {
	display: flex;
	align-items: center;
	gap: 1rem;                                  /* gap-4 */
	min-height: var(--pm-header-min-h);
}

/* Bloc gauche : logos + slogan */
.pm-header__brand-group {
	flex-grow: 1;                                /* grow */
	height: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1.5rem;                                 /* xl:gap-6 */
}

.pm-header__logos {
	display: flex;
	align-items: center;
	gap: 1rem;                                   /* gap-4 */
	height: 100%;
}

.pm-header__logo-link {
	display: block;
	height: var(--pm-logo-h);
	line-height: 0;
}

.pm-header__logo {
	width: auto;
	height: 100%;
	max-width: var(--pm-logo-max-w);
	object-fit: contain;
	display: block;
}

.pm-header__statement {
	font-family: var(--pm-font-body);
	font-size: 0.875rem;                         /* text-sm */
	color: var(--pm-black);
	line-height: 1.5;
}
.pm-header__statement p        { margin: 0; }
.pm-header__statement--mobile  { display: none; }
.pm-header__statement--desktop { display: block; white-space: nowrap; }

/* Liens dans le slogan d'en-tête : noir, sans soulignement */
.pm-header__statement a {
	color: var(--pm-black);
	text-decoration: none;
	transition: color var(--pm-transition);
}
.pm-header__statement a:hover,
.pm-header__statement a:focus {
	color: var(--pm-primary);
	text-decoration: none;
}

/* ---- Nav desktop ---- */

.pm-header__nav--desktop {
	display: flex;
	align-items: center;
	gap: 0.5rem;                                 /* xl:gap-2 */
}

.pm-header__menu-item { position: relative; }

/* Liens de menu (style btn-transparent du dump : pas de fond, texte noir) */
.pm-header__menu-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 2.75rem;
	padding: 0.625rem 1rem;
	background: transparent;
	color: var(--pm-black);
	border: 0;
	border-radius: var(--pm-radius);
	font-family: var(--pm-font-body);
	font-size: 0.875rem;                         /* text-sm comme les .btn */
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--pm-transition), color var(--pm-transition);
}
.pm-header__menu-link:hover,
.pm-header__menu-link:focus,
.pm-header__menu-link.show {
	background: var(--pm-amber-100);
	color: var(--pm-black);
}

.pm-header__menu-link.is-highlight {
	background: var(--pm-secondary);
	color: var(--pm-black);
}
.pm-header__menu-link.is-highlight:hover {
	background: var(--pm-amber-400);
	color: var(--pm-black);
}

/* On utilise une icône <i class="bi-chevron-down"> au lieu du caret CSS Bootstrap natif */
.pm-header__menu-link.dropdown-toggle::after,
.pm-header__menu-link--dropdown::after { display: none !important; }

/* Icône chevron du sous-menu (match le live : bi-chevron-down 16px) */
.pm-header__menu-caret {
	margin-left: 0.4rem;
	font-size: 0.9rem;
	line-height: 1;
	transition: transform var(--pm-transition);
	display: inline-flex;
	align-items: center;
}
.pm-header__menu-link[aria-expanded="true"] .pm-header__menu-caret {
	transform: rotate(180deg);
}

/* Sous-menu desktop : "bg-amber-200 hover:bg-amber-300 px-6 py-3" */
.pm-header__submenu {
	margin-top: 0.5rem !important;
	margin-left: 0.5rem !important;
	padding: 0;
	border: 0;
	border-radius: var(--pm-radius);
	box-shadow: var(--pm-shadow);
	overflow: hidden;
	min-width: 16rem;
	background: transparent;
}

.pm-header__submenu li { list-style: none; }

.pm-header__submenu-link {
	display: block;
	padding: 0.75rem 1.5rem;
	background: var(--pm-amber-200);
	color: var(--pm-black);
	font-family: var(--pm-font-body);
	font-size: 0.875rem;
	text-decoration: none;
	transition: background-color var(--pm-transition);
	white-space: nowrap;
}
.pm-header__submenu-link:hover,
.pm-header__submenu-link:focus {
	background: var(--pm-amber-300);
	color: var(--pm-black);
}

/* Switcher de langue — style btn-transparent */
.pm-header__lang {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.625rem 0.75rem;
	color: var(--pm-black);
	font-family: var(--pm-font-body);
	font-weight: 500;
	font-size: 0.875rem;
	text-decoration: none;
	border-radius: var(--pm-radius);
	transition: background-color var(--pm-transition);
}
.pm-header__lang:hover,
.pm-header__lang:focus {
	background: var(--pm-amber-100);
	color: var(--pm-black);
}

/* ---- Nav mobile (par défaut masqué, activé dans responsive.css) ---- */

.pm-header__nav--mobile {
	display: none;
	align-items: center;
	gap: 1rem;
}

.pm-header__burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	background: transparent;
	border: 0;
	border-radius: var(--pm-radius);
	color: var(--pm-black);
	padding: 0;
	cursor: pointer;
	transition: background-color var(--pm-transition);
}
.pm-header__burger:hover,
.pm-header__burger:focus { background: var(--pm-amber-100); }

.pm-header__burger-icon,
.pm-header__burger-icon::before,
.pm-header__burger-icon::after {
	display: block;
	width: 1.5rem;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	position: relative;
}
.pm-header__burger-icon::before,
.pm-header__burger-icon::after {
	content: "";
	position: absolute;
	left: 0;
}
.pm-header__burger-icon::before { top: -7px; }
.pm-header__burger-icon::after  { top:  7px; }

/* Offcanvas (menu mobile) */
.pm-header__offcanvas {
	background: var(--pm-white);
	max-width: 320px;
}
.pm-header__offcanvas .offcanvas-header {
	border-bottom: 1px solid var(--pm-alphagrey-200);
}
.pm-header__offcanvas .offcanvas-title {
	font-family: var(--pm-font-heading);
	color: var(--pm-black);
}

.pm-header__mobile-link {
	display: block;
	padding: 0.85rem 1rem;
	color: var(--pm-black);
	font-family: var(--pm-font-body);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: background-color var(--pm-transition);
}
.pm-header__mobile-link:hover,
.pm-header__mobile-link:focus {
	background: var(--pm-amber-50);
	color: var(--pm-black);
}

.pm-header__mobile-link--sub {
	padding-left: 1.75rem;
	font-size: 0.875rem;
	color: var(--pm-black);
}

.pm-header__mobile-link--lang {
	border-top: 1px solid var(--pm-alphagrey-200);
	padding-left: 1.5rem;
	font-weight: 500;
}

.pm-header__mobile-group-title {
	padding: 0.75rem 1rem 0.35rem;
	background: var(--pm-alphagrey-50);
	font-family: var(--pm-font-body);
	font-size: 0.75rem;
	color: var(--pm-alphagrey-600);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ==========================================================================
   FOOTER
   <footer class="bg-blue-200">
     [section haut : logos + about | colonnes + socials]  (py-20)
     [section bas : copyright | liens légaux]             (py-8)
   ========================================================================== */

.pm-footer {
	background: var(--pm-blue-200);
	color: var(--pm-black);
	font-family: var(--pm-font-body);
	font-size: 1rem;
	margin-top: auto;
}

.pm-footer__container {
	max-width: var(--pm-container-max);
	margin: 0 auto;
	padding-left: var(--pm-container-px);
	padding-right: var(--pm-container-px);
}

/* ---- Section haut ---- */

.pm-footer__top {
	padding: 5rem 0;                              /* py-20 */
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 2rem 3rem;                                /* row-gap / column-gap */
	border-bottom: 1px solid var(--pm-alphagrey-600);
}

/* Bloc gauche : gabarit fixe, ne pousse jamais le menu en-dessous */
.pm-footer__brand-col {
	flex: 0 0 auto;
	width: clamp(280px, 28%, 420px);
	max-width: 100%;
}

.pm-footer__logos {
	display: flex;
	align-items: center;
	gap: 1rem;                                     /* gap-4 */
}

.pm-footer__logo-link {
	display: block;
	height: var(--pm-logo-h);
	line-height: 0;
}

.pm-footer__logo {
	width: auto;
	height: 100%;
	max-width: var(--pm-logo-max-w);
	object-fit: contain;
	display: block;
}

/* Bloc about (WYSIWYG) */
.pm-footer__about {
	padding: 1.5rem 0;                             /* py-6 */
	color: var(--pm-black);
	font-family: var(--pm-font-body);
	line-height: 1.7;
	max-width: 40rem;
}
.pm-footer__about p { margin: 0 0 0.75rem; }
.pm-footer__about p:last-child { margin-bottom: 0; }
/* h4 du WYSIWYG footer — weight light (300) comme sur le site en ligne */
.pm-footer__about h4 { font-weight: 300; }
.pm-footer__about a {
	color: var(--pm-primary);
	text-decoration: underline;
}
.pm-footer__about a:hover { color: var(--pm-blue-600); }
.pm-footer__about ul { list-style: disc; padding-left: 1.25rem; }
.pm-footer__about ul li { padding-left: 0; margin-bottom: 0.25rem; }
.pm-footer__about ul li::before { display: none; } /* désactive le bullet décoratif global */
.pm-footer__about strong { font-weight: 600; }

/* ---- Colonnes + socials ---- */

.pm-footer__menus {
	flex: 1 1 0;              /* prend tout l'espace restant */
	min-width: 0;             /* autorise les colonnes à se wrapper dans ce conteneur */
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 1.5rem 2rem;          /* row-gap / column-gap */
}

.pm-footer__col {
	display: flex;
	flex-direction: column;
	flex: 0 1 auto;
}

/* Titre de colonne footer — reprend "text-base font-semibold mb-4" du dump */
.pm-footer__col-title {
	display: block;
	margin: 0 0 1rem;                              /* mb-4 */
	font-family: var(--pm-font-body);              /* Montserrat */
	font-weight: 600;                              /* font-semibold */
	font-size: 1rem;                               /* text-base */
	line-height: 1.4;
	color: var(--pm-black);
	text-decoration: none;
	transition: color var(--pm-transition);
}

/* Variante cliquable (le titre est un <a>) */
.pm-footer__col-title--link:hover,
.pm-footer__col-title--link:focus {
	color: var(--pm-primary);
}

.pm-footer__col-link {
	display: block;
	padding: 0.75rem 0;                            /* py-3 px-0 */
	color: var(--pm-black);
	font-family: var(--pm-font-body);
	text-decoration: none;
	font-size: 0.875rem;                           /* text-sm */
	line-height: 1.4;
	transition: color var(--pm-transition);
}
.pm-footer__col-link:hover,
.pm-footer__col-link:focus {
	color: var(--pm-primary);
	text-decoration: underline;
}

/* Liste horizontale d'icônes sociales (sans libellé) */
.pm-footer__socials {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}
.pm-footer__socials li { padding: 0; margin: 0; }
.pm-footer__socials li::before { display: none; } /* neutralise un éventuel bullet global */

.pm-footer__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.25rem;
	background: transparent;
	color: var(--pm-black);
	font-size: 1.25rem;
	text-decoration: none;
	transition: color var(--pm-transition);
}
.pm-footer__social:hover,
.pm-footer__social:focus {
	color: var(--pm-primary);
}

/* ==========================================================================
   FOOTER — Section bas (copyright + liens légaux)
   Valeurs extraites du live : padding 32px, pas de fond séparé, hérite du bg bleu
   ========================================================================== */

.pm-footer__bottom {
	padding: 2rem 0;                           /* py-8 du live */
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
	/* Pas de background — hérite du bg-blue-200 du footer parent */
	/* Pas de border-top — le live n'en a pas */
}

.pm-footer__copyright {
	font-size: 0.875rem;                       /* text-sm 14px du live */
	color: var(--pm-black);
	flex-grow: 1;
	margin: 0;
}

.pm-footer__legal-links {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}
.pm-footer__legal-links li { padding: 0; margin: 0; }
.pm-footer__legal-links li::before { display: none; }

/* Liens "underline text-sm" du live */
.pm-footer__legal-link {
	color: var(--pm-black);
	text-decoration: underline;
	font-size: 0.875rem;
	transition: color var(--pm-transition);
}
.pm-footer__legal-link:hover,
.pm-footer__legal-link:focus {
	color: var(--pm-primary);
}

/* ==========================================================================
   PAGE D'ACCUEIL (template Home) — reproduit pausemenage.com/fr
   ========================================================================== */

.pm-home { font-family: var(--pm-font-body); }

/* Conteneur commun */
.pm-home__container {
	max-width: var(--pm-container-max);
	margin: 0 auto;
	padding-left: var(--pm-container-px);
	padding-right: var(--pm-container-px);
}

/* Sur-titre bleu (eyebrow) "Pause Ménage", "Services", "Blog / Astuces"... */
.pm-home__eyebrow {
	color: var(--pm-primary);
	font-family: var(--pm-font-body);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	margin-bottom: 0.75rem;
}
.pm-home__eyebrow--small { font-size: 0.8rem; margin-bottom: 0.5rem; }

/* Header d'une section */
.pm-home__section-header {
	max-width: 48rem;
	margin-bottom: 3rem;
}
/* Modificateur centré : sur l'en-tête de section (services / mini-cards). */
.pm-home__section-header--center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.pm-home__section-title {
	font-family: var(--pm-font-heading);
	font-weight: 400;
	font-size: var(--pm-h2-d);
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--pm-black);
	margin: 0 0 1rem;
}

.pm-home__section-intro {
	font-family: var(--pm-font-body);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--pm-black);
	margin: 0;
	max-width: 40rem;
}

/* Placeholder d'image visuel (en attendant vrais assets via ACF) */
.pm-home__image-placeholder {
	width: 100%;
	height: 100%;
	min-height: 12rem;
	aspect-ratio: 4 / 3;
	background: var(--pm-blue-100);
	border-radius: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--pm-primary);
	font-weight: 500;
	font-size: 0.9rem;
	position: relative;
	overflow: hidden;
}
.pm-home__image-placeholder::before {
	content: attr(data-label);
	padding: 1rem;
	text-align: center;
	position: relative;
	z-index: 1;
}
.pm-home__image-placeholder::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(135deg,
		transparent 0%, transparent 49%,
		rgba(1,127,175,0.08) 49%, rgba(1,127,175,0.08) 51%,
		transparent 51%, transparent 100%);
	background-size: 30px 30px;
	pointer-events: none;
}

/* ==========================================================================
   SECTION 1 — HERO (2 colonnes)
   ========================================================================== */

.pm-home__hero {
	background: var(--pm-amber-50);
	padding-top: 1.25rem;
	padding-bottom: 7.625rem;  /* mb-[7.625rem] du live */
}

.pm-home__hero-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: center;
}

.pm-home__hero-text {
	padding: 0 1rem;
}

/* Hero h1 — chaîne `.pm-body` pour porter la spé à 0,2,1 et battre la règle
   globale `.pm-body h1, h2, h3...`. Valeurs identiques au live (lh 1.25, ls -0.025em). */
.pm-body .pm-home__hero-title {
	font-family: var(--pm-font-heading);
	font-weight: 400;
	font-size: var(--pm-h1-d);
	line-height: 1.25;
	letter-spacing: -0.025em;
	color: var(--pm-black);
	margin: 0 0 1.5rem;
	max-width: 100%;
}

.pm-home__hero-body {
	font-size: 1.0625rem;
	line-height: 1.625;     /* aligné sur le body global */
	color: var(--pm-black);
	margin-bottom: 2rem;
}
.pm-home__hero-body p { margin: 0 0 1rem; }
.pm-home__hero-body p:last-child { margin-bottom: 0; }
/* Liens dans le texte du hero : bold, bleu primary, pas de soulignement. */
.pm-home__hero-body a:not(.pm-btn),
.pm-home__hero-text a:not(.pm-btn) {
	color: var(--pm-blue-700);
	text-decoration: none;
	font-weight: 700;                  /* bold comme le live */
}
.pm-home__hero-body a:not(.pm-btn):hover,
.pm-home__hero-text a:not(.pm-btn):hover {
	color: var(--pm-blue-600);
	text-decoration: underline;     /* underline uniquement au survol */
}

.pm-home__hero-actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	padding-top: 1rem;
}

.pm-home__hero-slider {
	padding: 0 1rem;
}

/* ==========================================================================
   SLIDERS — styles communs Slick
   ========================================================================== */

.pm-home__slider-wrapper {
	position: relative;
}

/* Avant l'init Slick : cache les slides autres que la 1ère (évite le FOUC sans
   bloquer les calculs de dimensions de Slick) */
.pm-home__slider:not(.slick-initialized) > .pm-home__slide:not(:first-child),
.pm-home__slider:not(.slick-initialized) > .pm-home__blog-slide:not(:first-child),
.pm-home__slider:not(.slick-initialized) > .pm-home__testimonial-slide:not(:first-child) {
	display: none;
}

/* ---- Contrôles du slider : sous l'image, dots à gauche / flèches à droite ---- */
.pm-slider-controls {
	margin-top: 2.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

/* Slot des dots (à gauche) */
.pm-slider-dots {
	flex: 1 1 auto;
	min-width: 0;
}

/* Slot des flèches (à droite) */
.pm-slider-nav {
	display: flex;
	gap: 1rem;
	flex: 0 0 auto;
}

/* Flèches — style btn-outlined carré du live.
   On force position static pour écraser le "position:absolute; top:50%" de slick-theme.css */
.pm-slider-arrow,
.pm-slider-arrow.slick-prev,
.pm-slider-arrow.slick-next {
	position: static !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	transform: none !important;
	width: 3rem;
	height: 3rem;
	padding: 0.625rem;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: var(--pm-black);
	border: 1px solid var(--pm-primary);
	border-radius: var(--pm-radius);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--pm-transition), color var(--pm-transition);
}
/* Slick cache le texte "Prev"/"Next" par défaut via une pseudo-classe — on garde l'icône visible */
.pm-slider-arrow::before { display: none !important; }
.pm-slider-arrow:hover,
.pm-slider-arrow:focus {
	background: var(--pm-blue-100);
	color: var(--pm-black);
}
.pm-slider-arrow.slick-disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Dots — petits ronds primary, alignés à gauche.
   On force position static pour écraser le "position:absolute; bottom:-25px" de slick-theme.css */
.pm-slider-dots .slick-dots {
	position: static !important;
	bottom: auto !important;
	width: auto !important;
	display: flex !important;
	justify-content: flex-start;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}
.pm-slider-dots .slick-dots li { margin: 0; padding: 0; width: auto; height: auto; }
.pm-slider-dots .slick-dots li::before { display: none; }
.pm-slider-dots .slick-dots li button {
	width: 0.5rem;                        /* 8px */
	height: 0.5rem;
	border-radius: 50%;
	background: var(--pm-primary);
	border: 0;
	padding: 0;
	text-indent: -9999px;
	overflow: hidden;
	cursor: pointer;
	opacity: 0.35;
	transition: opacity var(--pm-transition), transform var(--pm-transition);
}
.pm-slider-dots .slick-dots li button::before { display: none; }
.pm-slider-dots .slick-dots li button:hover { opacity: 0.6; }
.pm-slider-dots .slick-dots li.slick-active button {
	opacity: 1;
	transform: scale(1.25);
}

/* Hero slider : hauteur ~550px (valeur du slideshow dans le dump).
   `border-radius: 1rem` cohérent avec les autres photos du site (trust, blog,
   article figure). L'`overflow: hidden` clippe les slides Slick aux coins ronds.

   IMPORTANT : min-width: 0 sur le wrapper (grid child) pour empêcher
   Slick de calculer une largeur aberrante (bug classique Slick + CSS Grid).
   On laisse Slick gérer les largeurs lui-même (mode fade stacke les slides
   en absolute, la mécanique ne fonctionne que sans override width). */
.pm-home__hero-slider {
	min-width: 0;
	overflow: hidden;
	border-radius: 1rem;
}

.pm-home__hero-slider .pm-home__slider {
	height: 800px;           /* hauteur exacte du live (mesurée via getComputedStyle) */
	max-height: 85vh;
	min-width: 0;
}

/* État vide admin only : message explicite au lieu d'un rectangle vide */
.pm-home__slider--empty .pm-home__slide {
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: repeating-linear-gradient(
		45deg,
		rgba(1,127,175,0.08),
		rgba(1,127,175,0.08) 12px,
		rgba(1,127,175,0.15) 12px,
		rgba(1,127,175,0.15) 24px
	);
	text-align: center;
	color: var(--pm-primary);
}
.pm-home__slide-empty {
	padding: 2rem;
	font-family: var(--pm-font-body);
	font-size: 0.95rem;
	line-height: 1.5;
}

.pm-home__hero-slider .pm-home__slide {
	display: block;
	height: 100%;
}

/* Placeholder (dev) */
.pm-home__hero-slider .pm-home__image-placeholder {
	width: 100%;
	height: 100%;
	min-height: 0;
	aspect-ratio: auto;
	border-radius: 1rem;
}

/* Images RÉELLES dans le slider hero. Radius 1rem aussi sur l'img (en plus du
   wrapper) : ceinture+bretelles pour ne pas dépendre du contexte de stacking de
   Slick (slick-list/slick-track peuvent créer des contextes qui empêchent
   l'overflow:hidden du wrapper de bien clipper les coins). */
.pm-home__hero-slider .pm-home__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 1rem;
}

/* Slick en mode fade : slides en absolute. On force toutes les slides à 100%
   de la hauteur du slider pour qu'elles aient la même taille que sur le live,
   peu importe le ratio naturel des images. */
.pm-home__hero-slider .slick-list,
.pm-home__hero-slider .slick-track { height: 100%; }
.pm-home__hero-slider .slick-slide > div { height: 100%; }
.pm-home__hero-slider .slick-slide {
	height: 100% !important;        /* override le `height: auto` injecté par Slick */
	min-height: 100%;
}

/* ==========================================================================
   SECTION 2 — SERVICES (mini-cards)
   ========================================================================== */

.pm-home__services {
	padding: 7rem 0;
	/* Le fond est appliqué via le modificateur --{background}
	   (sky/amber/white/none). Voir bloc « Modificateurs de fond » plus bas. */
}

.pm-home__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);  /* défaut : 3 colonnes */
	gap: 3rem;
}
/* Variantes nombre de colonnes via le modificateur sur la section. */
.pm-home__services--cols-2 .pm-home__cards { grid-template-columns: repeat(2, 1fr); }
.pm-home__services--cols-3 .pm-home__cards { grid-template-columns: repeat(3, 1fr); }
.pm-home__services--cols-4 .pm-home__cards { grid-template-columns: repeat(4, 1fr); }

.pm-home__card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	background: transparent;
}

/* Image de carte services — hauteur réglée par modificateur de taille.
   - md (défaut) : ~125px, pour les illustrations services classiques
   - sm : ~80px, pour les icônes simples (ex. enveloppe / téléphone page Contact)
   - lg : ~160px, pour les illustrations plus grandes
   L'image reste en object-contain (pas de crop). */
.pm-home__card-image {
	width: 100%;
	height: 7.8125rem;     /* 125px — défaut md */
	display: flex;
	align-items: center;
	justify-content: center;
}
.pm-home__services--icon-sm .pm-home__card-image { height: 3.125rem; } /* 50px — comme le live (Contact) */
.pm-home__services--icon-md .pm-home__card-image { height: 7.8125rem; } /* 125px */
.pm-home__services--icon-lg .pm-home__card-image { height: 10rem; }   /* 160px */
.pm-home__card-image .pm-home__image-placeholder {
	background: rgba(255,255,255,0.4);
	aspect-ratio: auto;
	height: 100%;
	min-height: 0;
}
.pm-home__card-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;       /* illustration -> pas de crop */
	object-position: center;
}

.pm-home__card-body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex-grow: 1;
}

.pm-home__card-title {
	font-family: var(--pm-font-heading);
	font-weight: 400;
	font-size: var(--pm-h4-d);   /* 2rem */
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--pm-black);
	margin: 0 0 1rem;
}

.pm-home__card-text {
	color: var(--pm-black);
	font-size: 1rem;
	line-height: 1.6;
	margin: 0 0 1rem;
	flex-grow: 1;
}
.pm-home__card-text p { margin: 0 0 1rem; }
.pm-home__card-text p:last-child { margin-bottom: 0; }
/* Liens inline dans le texte de carte (mailto:, tel:, etc.) — bleu primary,
   bold (comme le live), pas de soulignement par défaut. */
.pm-home__card-text a:not(.pm-btn) {
	color: var(--pm-blue-700);
	text-decoration: none;
	font-weight: 700;                  /* bold comme le live */
}
.pm-home__card-text a:not(.pm-btn):hover {
	color: var(--pm-blue-600);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pm-home__card .pm-btn {
	align-self: flex-end;
}

/* ==========================================================================
   SECTION 3 — PROPRETÉ & TRANQUILLITÉ + VIDÉO (2 colonnes)
   ========================================================================== */

.pm-home__trust {
	padding: 7rem 0;
}

.pm-home__trust-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: center;
}

/* Position du média : par défaut texte à gauche / média à droite (ordre du DOM).
   Avec --left, on inverse via grid-column pour garder le DOM intact (texte en
   premier reste utile pour l'accessibilité et le rendu mobile).
   On force grid-row: 1 sur les deux sinon l'auto-placement les staggera
   (texte ligne 1 col 2 → curseur passe à ligne 2, vidéo ligne 2 col 1). */
.pm-home__trust--left .pm-home__trust-text  { grid-column: 2; grid-row: 1; }
.pm-home__trust--left .pm-home__trust-video { grid-column: 1; grid-row: 1; }

/* Padding latéral du bloc texte uniquement sous 1024px (grid 1 colonne).
   En desktop, le grid 2 colonnes gère déjà l'espacement via `gap`. */
@media (max-width: 1023.98px) {
	.pm-home__trust-text { padding: 0 1rem; }
}

.pm-home__trust-title {
	font-family: var(--pm-font-heading);
	font-weight: 400;
	font-size: var(--pm-h2-d);
	line-height: 1.25;
	letter-spacing: -0.025em;
	color: var(--pm-black);
	margin: 0 0 1.5rem;
}

.pm-home__trust-body {
	font-size: 1.0625rem;
	line-height: 1.7;
	margin-bottom: 1.5rem;
}
.pm-home__trust-body p      { margin: 0 0 1rem; }
.pm-home__trust-body p:last-child { margin-bottom: 0; }
.pm-home__trust-body strong { font-weight: 600; }
.pm-home__trust-body a:not(.pm-btn) {
	color: var(--pm-primary);
	text-decoration: underline;
}
.pm-home__trust-body a:not(.pm-btn):hover { color: var(--pm-blue-600); }

/* Listes à puces dans le WYSIWYG text+image — style diamant gold identique à
   l'ancienne `.pm-home__trust-list`. Supporte plusieurs UL dans un même bloc. */
.pm-home__trust-body ul {
	list-style: none;
	padding: 0;
	margin: 1rem 0 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.pm-home__trust-body ul + p { margin-top: 1rem; }
.pm-home__trust-body ul li {
	position: relative;
	padding-left: 2.25rem;
	line-height: 1.5;
	color: var(--pm-black);
}
.pm-home__trust-body ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 1.25rem;
	height: 1.25rem;
	background-color: var(--pm-secondary);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 150 0 Q 135 135, 0 150 Q 135 165, 150 300 Q 165 165, 300 150 Q 165 135, 150 0 Z' fill='black'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 150 0 Q 135 135, 0 150 Q 135 165, 150 300 Q 165 165, 300 150 Q 165 135, 150 0 Z' fill='black'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	        mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
}
/* Listes numérotées (ol) */
.pm-home__trust-body ol {
	counter-reset: pm-li;
	list-style: none;
	padding: 0;
	margin: 1rem 0 1.5rem;
}
.pm-home__trust-body ol li {
	counter-increment: pm-li;
	position: relative;
	padding-left: 2.25rem;
	margin-bottom: 0.5rem;
}
.pm-home__trust-body ol li::before {
	content: counter(pm-li) ".";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--pm-primary);
	font-weight: 600;
}

.pm-home__trust-list {
	list-style: none;
	padding: 0;
	margin: 0 0 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.pm-home__trust-list li {
	position: relative;
	padding-left: 2.25rem;
	line-height: 1.5;
	color: var(--pm-black);
}
.pm-home__trust-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3em;
	width: 1.25rem;
	height: 1.25rem;
	background-color: var(--pm-secondary);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 150 0 Q 135 135, 0 150 Q 135 165, 150 300 Q 165 165, 300 150 Q 165 135, 150 0 Z' fill='black'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 150 0 Q 135 135, 0 150 Q 135 165, 150 300 Q 165 165, 300 150 Q 165 135, 150 0 Z' fill='black'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.pm-home__trust-actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

/* Vidéo / image côté droit */
.pm-home__trust-video { padding: 0 1rem; }

.pm-home__video-figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	position: relative;          /* ancrage pour le bouton play overlay */
}

/* Bouton play overlay — visible tant que la vidéo n'a pas été activée.
   Disparaît au clic (géré par video-poster.js qui retire l'élément). */
.pm-home__video-play-overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: auto;     /* couvre la zone de la vidéo (la caption en dessous reste libre) */
	bottom: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: #fff;
	transition: background-color var(--pm-transition);
	z-index: 2;
	/* Limiter l'overlay à la zone vidéo (et non à la caption en dessous) */
	aspect-ratio: 16 / 9;
}
.pm-home__video-play-overlay:hover { background: rgba(0,0,0,0.15); }
/* Bouton play style live : flèche blanche large, fond transparent, sans bordure. */
.pm-home__video-play-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 6rem;
	height: 6rem;
	border-radius: 50%;
	background: transparent;
	border: 0;
	color: #fff;
	font-size: 2.25rem;
	transition: transform var(--pm-transition), background-color var(--pm-transition);
	padding-left: 6px;       /* compense le triangle ▶ visuellement décentré */
}
.pm-home__video-play-overlay:hover .pm-home__video-play-icon {
	transform: scale(1.05);
	background: rgba(255,255,255,0.15);   /* léger fill au hover, sans changer la couleur */
}

/* Image dans la section text+image (si media_type = image au lieu de vidéo).
   Aspect ~1:1 comme sur le live (image rendue au carré, ~704x731 sur grid 2 col). */
.pm-home__trust-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center;
	border-radius: 1rem;
}

/* Vidéo HTML native dans la section text+image */
.pm-home__video-native {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 1rem;
	background: #000;
}

.pm-home__video-placeholder {
	position: relative;
	aspect-ratio: 16 / 9;
	background:
		linear-gradient(135deg, rgba(1,127,175,0.85), rgba(11,82,111,0.85)),
		radial-gradient(circle at 30% 30%, var(--pm-blue-400), var(--pm-blue-800));
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--pm-white);
	font-size: 1.25rem;
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: 0 10px 40px rgba(13,10,0,0.15);
}
.pm-home__video-placeholder::before {
	content: attr(data-label);
	position: absolute;
	bottom: 1.5rem;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0.9;
	font-weight: 500;
	font-size: 0.9rem;
}

.pm-home__video-play {
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	border: 3px solid var(--pm-white);
	background: rgba(255,255,255,0.15);
	color: var(--pm-white);
	font-size: 2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color var(--pm-transition), transform var(--pm-transition);
	backdrop-filter: blur(4px);
}
.pm-home__video-play:hover {
	background: rgba(255,255,255,0.3);
	transform: scale(1.05);
}

.pm-home__video-caption {
	font-size: 0.875rem;
	font-style: italic;
	color: var(--pm-alphagrey-600);
	margin-top: 0.5rem;
}

/* ==========================================================================
   SECTION 3.b — TEXT + LISTE DE CARACTÉRISTIQUES (2 colonnes, fond amber)
   --------------------------------------------------------------------
   Bloc « text_features » : titre + boutons d'un côté, liste de features
   reliées par un trait vertical de l'autre côté. Reproduit exactement le
   bloc bloc_type_features-list du live (page Nettoyage de bureaux).
   ========================================================================== */

.pm-home__features {
	padding: 7rem 0;
}

.pm-home__features-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: center;
}

/* Position de la liste : par défaut texte à gauche, liste à droite.
   Avec --left, on inverse via grid-column tout en gardant le DOM intact. */
.pm-home__features--left .pm-home__features-text { grid-column: 2; grid-row: 1; }
.pm-home__features--left .pm-home__features-list { grid-column: 1; grid-row: 1; }

.pm-home__features-text { padding: 0 1rem; }

.pm-home__features-title {
	font-family: var(--pm-font-heading);
	font-weight: 400;
	font-size: var(--pm-h2-d);
	line-height: 1.25;
	letter-spacing: -0.025em;
	color: var(--pm-black);
	margin: 0 0 1.5rem;
}

.pm-home__features-body {
	color: var(--pm-black);
	font-size: 1rem;
	line-height: 1.7;
	margin-bottom: 1.5rem;
}
.pm-home__features-body p:last-child { margin-bottom: 0; }

.pm-home__features-actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 2rem;
}

/* ---- Liste des features (colonne droite) ---- */

.pm-home__features-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pm-home__feature-item {
	position: relative;
	padding-bottom: 3.75rem;           /* 60px, comme `pb-15` xl du live */
}
.pm-home__feature-item--last { padding-bottom: 0; }

/* Trait vertical reliant chaque feature à la suivante.
   Centré verticalement sous l'icône (icône 56×56, donc x = 28px = 1.75rem).
   Reproduit `.absolute.left-7.top-7.bottom-0.w-0.5.bg-gray-300` du live. */
.pm-home__feature-line {
	position: absolute;
	left: 1.75rem;                     /* centre horizontal de l'icône (56/2) */
	top: 1.75rem;                      /* sous l'icône */
	bottom: 0;
	width: 2px;
	background: #d1d5db;               /* gray-300 du live */
	pointer-events: none;
	transform: translateX(-1px);
}

.pm-home__feature-row {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	position: relative;
	z-index: 1;                        /* passe au-dessus du trait */
}

/* Conteneur de l'icône — 56×56. Pas de bordure : c'est l'image (ou le SVG
   fallback) qui dessine le cercle. Le fond doit matcher la section pour
   masquer le trait vertical au passage de l'icône (comme `bg-amber-50` du live). */
.pm-home__feature-icon {
	flex: 0 0 auto;
	width: 3.5rem;                     /* 56px */
	height: 3.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.25rem;                  /* p-1 du live */
	box-sizing: border-box;
}
/* Fond du wrapper d'icône en fonction du fond de section (masque le trait). */
.pm-home__features--amber .pm-home__feature-icon { background: var(--pm-amber-50); }
.pm-home__features--sky   .pm-home__feature-icon { background: var(--pm-blue-100); }
.pm-home__features--white .pm-home__feature-icon { background: var(--pm-white); }
.pm-home__features--none  .pm-home__feature-icon { background: var(--pm-white); }
.pm-home__feature-icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
/* SVG fallback : cercle bleu + checkmark blanc lisible (visuel quand aucune
   icône n'est uploadée). 48×48 dans le wrapper 56×56 (p-1 = 4px). */
.pm-home__feature-icon svg {
	width: 100%;
	height: 100%;
	color: var(--pm-blue-700);
}

.pm-home__feature-content { flex: 1 1 auto; min-width: 0; }

.pm-home__feature-title {
	font-family: var(--pm-font-heading);
	font-weight: 400;
	font-size: var(--pm-h4-d);         /* 2rem = 32px, identique live */
	line-height: 1.25;                  /* 40px, identique live */
	letter-spacing: -0.02em;
	color: var(--pm-black);
	margin: 0 0 0.5rem;                 /* 8px, identique live */
}

.pm-home__feature-desc {
	color: var(--pm-black);
	font-size: 1rem;                    /* 16px, identique live */
	line-height: 1.625;                  /* 26px, identique live */
	margin: 0;
}

/* ==========================================================================
   SECTION 4 — CODE POSTAL (bande amber avec bordure bleue)
   ========================================================================== */

.pm-home__postal {
	padding: 0 0 3rem;
}

.pm-home__postal-card {
	background: var(--pm-amber-100);
	border-top: 1px solid var(--pm-alphagrey-200);
	border-right: 1px solid var(--pm-alphagrey-200);
	border-bottom: 1px solid var(--pm-alphagrey-200);
	border-left: 10px solid var(--pm-primary);
	padding: 5rem 2.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

.pm-home__postal-content { flex: 1 1 320px; }

.pm-home__postal-title {
	font-family: var(--pm-font-heading);
	font-weight: 400;
	font-size: var(--pm-h3-d);   /* 2.5rem */
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--pm-black);
	margin: 0 0 0.75rem;
}

.pm-home__postal-intro {
	margin: 0;
	color: var(--pm-black);
	line-height: 1.6;
}

/* Grid : input + bouton sur la 1ère ligne, message qui span dessous.
   `flex: 0 0 auto` au niveau du card maintient le form aligné à droite. */
.pm-home__postal-form {
	display: grid;
	grid-template-columns: auto auto;
	grid-auto-rows: auto;
	gap: 0.75rem;
	align-items: stretch;
	flex: 0 0 auto;
}

.pm-home__postal-input {
	width: 12rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--pm-alphagrey-200);
	border-radius: var(--pm-radius);
	background: var(--pm-white);
	color: var(--pm-black);
	font-family: var(--pm-font-body);
	font-size: 1rem;
	text-transform: uppercase;
}
.pm-home__postal-input::placeholder {
	text-transform: none;
	color: var(--pm-alphagrey-400);
}
.pm-home__postal-input:focus {
	outline: 2px solid var(--pm-primary);
	outline-offset: -1px;
	border-color: var(--pm-primary);
}
.pm-home__postal-form .pm-btn { min-height: auto; }

/* Zone de feedback après vérification du code postal */
/* Message de retour : juste du texte coloré (comme le live), sans box ni bordure.
   `grid-column: 1 / -1` le place sur sa propre ligne sous l'input + le bouton.
   `max-width: 0 + min-width: 100%` est un trick CSS : le grid voit "0" pour le
   calcul intrinsèque des colonnes (donc input et bouton ne bougent pas), mais
   à l'affichage le feedback occupe 100% de la largeur du form. */
.pm-home__postal-feedback {
	grid-column: 1 / -1;
	max-width: 0;
	min-width: 100%;
	margin-top: 0.25rem;
	font-size: 0.95rem;
	line-height: 1.5;
	font-weight: 500;
	overflow-wrap: anywhere;
	transition: opacity var(--pm-transition);
}
.pm-home__postal-feedback:empty { display: none; }

.pm-home__postal-feedback--success { color: #15803d; }   /* vert (succès — disponible) */
.pm-home__postal-feedback--fail    { color: #b91c1c; }   /* rouge (non desservi)        */
.pm-home__postal-feedback--error   { color: #b45309; }   /* orange (erreur saisie/réseau) */

/* ==========================================================================
   SECTION 5 — BLOG / ASTUCES
   ========================================================================== */

.pm-home__blog {
	padding: 7rem 0;
}

.pm-home__blog-slider { margin-top: 3.75rem; }

/* Gap entre slides via padding interne + negative margin sur slick-list :
   la 1re slide part du bord gauche, la dernière touche le bord droit,
   et on conserve un espace visuel de 2rem entre chaque carte. */
.pm-home__blog-slide { padding: 0 1rem; }
.pm-home__blog-slider .slick-list { margin: 0 -1rem; }

/* Cartes blog : transparentes, sans bordure ni ombre (identique au live).
   Grid avec 3 rangées : image (auto), contenu (1fr qui s'étire), actions (auto).
   Le bouton "Lire l'article" est ainsi TOUJOURS à la ligne du bas, alignée
   horizontalement entre toutes les cartes peu importe la longueur du texte. */
.pm-home__blog-card {
	display: grid;
	grid-template-rows: auto 1fr auto;
	gap: 1rem;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	overflow: visible;
	height: 100%;
}

/* Image de carte article blog : ratio 16/10, remplit en cover (photo -> crop OK).
   `border-radius: 1rem` pour rester cohérent avec les autres photos du site
   (trust video, article figure, etc.). `overflow: hidden` clippe l'img interne. */
.pm-home__blog-card .pm-home__card-image {
	width: 100%;
	aspect-ratio: 16 / 10;
	height: auto;
	overflow: hidden;
	border-radius: 1rem;
}
.pm-home__blog-card .pm-home__image-placeholder {
	aspect-ratio: 16 / 10;
	border-radius: 1rem;
}
.pm-home__blog-card .pm-home__card-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Slick blog : stretch les slides pour qu'elles aient toutes la même hauteur */
.pm-home__blog-slider .slick-track {
	display: flex !important;
	align-items: stretch;
}
.pm-home__blog-slider .slick-slide {
	height: auto !important;
	display: flex !important;
	flex-direction: column;
}
.pm-home__blog-slider .slick-slide > div {
	display: flex !important;
	flex-direction: column;
	flex: 1 1 auto;
	height: auto;
}
.pm-home__blog-slider .pm-home__blog-slide {
	display: flex !important;
	flex-direction: column;
	flex: 1 1 auto;
	height: 100%;
}

.pm-home__blog-card .pm-home__card-body {
	padding: 0;
	margin: 0;
	display: contents;                  /* le grid de la carte gère tout — body est transparent côté layout */
}

/* Bloc contenu (eyebrow + titre + excerpt + date) — grid-row 2 (1fr) */
.pm-home__blog-content {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-height: 0;                      /* autorise le flex à se comprimer correctement */
}

/* H4 titre d'article (Montserrat 2rem weight 400 — valeurs exactes du live) */
.pm-home__blog-title {
	font-family: var(--pm-font-heading);
	font-weight: 400;
	font-size: var(--pm-h4-d);                    /* 2rem 32px */
	line-height: 1.25;                             /* 40px */
	letter-spacing: -0.025em;
	color: var(--pm-black);
	margin: 0 0 0.5rem;
}

.pm-home__blog-excerpt {
	color: var(--pm-black);
	font-size: 0.95rem;
	line-height: 1.6;
	margin: 0;
}

.pm-home__blog-date {
	color: var(--pm-alphagrey-600);
	font-size: 0.8rem;
	font-weight: 500;
	margin-top: 0.25rem;
}

/* Zone d'actions : bouton aligné à droite (flex-end) en desktop, centré en mobile.
   Grid-row 3 (auto) — toujours aligné en bas de la carte grâce au grid parent. */
.pm-home__blog-actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding-top: 0.5rem;
}

/* ==========================================================================
   SECTION 6 — TÉMOIGNAGES
   ========================================================================== */

.pm-home__testimonials {
	padding: 7rem 0;
}

.pm-home__testimonials-slider { margin-top: 3.75rem; }

/* Gap entre témoignages : chaque slide a 5rem de padding-right (défini plus bas),
   on compense avec un margin-right négatif sur le slick-list pour que la dernière
   slide visible touche le bord droit, et la première touche le bord gauche. */
.pm-home__testimonials-slider .slick-list { margin-right: -5rem; }

.pm-home__testimonial-slide {
	display: flex !important;
	flex-direction: column;
	gap: 1rem;
	padding: 0 5rem 0 0;
	margin: 0;
	max-width: 550px;
}

.pm-home__testimonial-stars {
	display: flex;
	gap: 0.15rem;
	color: var(--pm-secondary);
	font-size: 1.1rem;
}

.pm-home__testimonial-text {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--pm-black);
	font-size: 1rem;
	line-height: 1.7;
	font-style: normal;
}

.pm-home__testimonial-author {
	font-size: 0.95rem;
	color: var(--pm-black);
}

/* ==========================================================================
   MODIFICATEURS DE FOND — sections home composables
   ----------------------------------------------------
   Permettent de choisir une couleur de fond depuis l'éditeur ACF
   (champ `background`) sur les layouts :
     - services           → .pm-home__services--{bg}
     - text_image         → .pm-home__trust--{bg}
     - slider_blog        → .pm-home__blog--{bg}
     - slider_testimonials→ .pm-home__testimonials--{bg}
     - text_features      → .pm-home__features--{bg}
   Valeurs : sky / amber / white / none (transparent).
   ========================================================================== */

.pm-home__services--sky,
.pm-home__trust--sky,
.pm-home__blog--sky,
.pm-home__testimonials--sky,
.pm-home__features--sky            { background: var(--pm-blue-100); }   /* #e7f2f7 — bg-blue-100 du live (homepage) */

.pm-home__services--amber,
.pm-home__trust--amber,
.pm-home__blog--amber,
.pm-home__testimonials--amber,
.pm-home__features--amber          { background: var(--pm-amber-50); }   /* #fffbeb */

.pm-home__services--white,
.pm-home__trust--white,
.pm-home__blog--white,
.pm-home__testimonials--white,
.pm-home__features--white          { background: var(--pm-white); }

.pm-home__services--none,
.pm-home__trust--none,
.pm-home__blog--none,
.pm-home__testimonials--none,
.pm-home__features--none           { background: transparent; }

/* ==========================================================================
   SECTION 7 — CTA FINAL (bande bleue centrée)
   ========================================================================== */

.pm-home__cta {
	background: var(--pm-blue-100);       /* #e7f2f7 — bg-blue-100 du live */
	padding: 7rem 0;
	margin-top: 0;                        /* pas de marge par défaut */
}
.pm-home__cta--with-margin {
	margin-top: 7rem;                     /* activable via toggle ACF */
}

.pm-home__cta-inner {
	max-width: 48rem;
	margin: 0 auto;
	text-align: center;
}

.pm-home__cta-title {
	font-family: var(--pm-font-heading);
	font-weight: 400;
	font-size: var(--pm-h3-d);
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--pm-black);
	margin: 0 0 1rem;
}

.pm-home__cta-text {
	margin: 0 0 2rem;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--pm-black);
}

.pm-home__cta-actions {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
	padding-top: 1rem;
}

/* ==========================================================================
   LAYOUTS FLEXIBLE CONTENT SUPPLÉMENTAIRES
   page_header / text_block / faq_accordion
   ========================================================================== */

/* ---- page_header — bannière titre intro ---- */

.pm-page-header {
	padding: 4rem 0;
}
.pm-page-header--amber  { background: var(--pm-amber-50); }
.pm-page-header--blue   { background: var(--pm-blue-100); }
.pm-page-header--white  { background: var(--pm-white); }
.pm-page-header--cream  { background: var(--pm-amber-100); }

.pm-page-header__inner {
	/* Pas de max-width : on laisse le contenu prendre toute la largeur du
	   container parent (la limite est déjà imposée par `.pm-page-header__container`
	   via `--pm-container-max`). */
}
.pm-page-header--center .pm-page-header__inner {
	margin: 0 auto;
	text-align: center;
}

/* Chaîne `.pm-body` pour battre la règle globale `.pm-body h1, h2, ... { max-width: 48rem }`
   (spé 0,2,1 = identique → load order décide, ce fichier écrit le titre après). */
.pm-body .pm-page-header__title {
	font-family: var(--pm-font-heading);
	font-weight: 400;
	font-size: var(--pm-h1-d);
	line-height: 1.25;
	letter-spacing: -0.025em;
	color: var(--pm-black);
	margin: 0 0 1rem;
	max-width: 100%;
}

.pm-page-header__intro {
	font-size: 1.125rem;
	line-height: 1.65;
	color: var(--pm-black);
}
.pm-page-header__intro p { margin: 0 0 1rem; }
.pm-page-header__intro p:last-child { margin-bottom: 0; }

/* Zone boutons */
.pm-page-header__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1.5rem;
}
.pm-page-header--center .pm-page-header__actions {
	justify-content: center;
}

/* ---- page_header — variante split (2 colonnes : titre à gauche + texte à droite) ---- */
.pm-page-header--split .pm-page-header__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: center;
}

.pm-page-header__col--main { padding: 0 1rem 0 0; }
.pm-page-header__col--aside { padding: 0 0 0 1rem; }

.pm-page-header__aside-content {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--pm-black);
}
.pm-page-header__aside-content p { margin: 0 0 1rem; }
.pm-page-header__aside-content p:last-child { margin-bottom: 0; }
.pm-page-header__aside-content a:not(.pm-btn) {
	color: var(--pm-blue-700);
	text-decoration: none;
	font-weight: 700;                  /* bold comme le live */
}
.pm-page-header__aside-content a:not(.pm-btn):hover {
	color: var(--pm-blue-600);
	text-decoration: underline;
}

/* ---- text_block — contenu WYSIWYG pleine largeur ---- */

.pm-text-block {
	padding: 4rem 0;
}

.pm-text-block__inner {
	width: 100%;
}
.pm-text-block--normal .pm-text-block__inner { max-width: 48rem; }
.pm-text-block--wide   .pm-text-block__inner { max-width: 72rem; }
.pm-text-block--full   .pm-text-block__inner { max-width: none; }

.pm-text-block__title {
	font-family: var(--pm-font-heading);
	font-weight: 400;
	font-size: var(--pm-h2-d);
	line-height: 1.25;
	letter-spacing: -0.025em;
	color: var(--pm-black);
	margin: 0 0 1.5rem;
}

.pm-text-block__content {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--pm-black);
}
.pm-text-block__content p { margin: 0 0 1.25rem; }
.pm-text-block__content p:last-child { margin-bottom: 0; }
.pm-text-block__content a:not(.pm-btn) {
	color: var(--pm-primary);
	text-decoration: underline;
}
.pm-text-block__content a:not(.pm-btn):hover { color: var(--pm-blue-600); }
.pm-text-block__content h2,
.pm-text-block__content h3,
.pm-text-block__content h4 {
	font-family: var(--pm-font-heading);
	font-weight: 400;
	color: var(--pm-black);
	letter-spacing: -0.025em;
	line-height: 1.25;
	margin: 2rem 0 0.75rem;
}
.pm-text-block__content h2 { font-size: var(--pm-h2-d); }
.pm-text-block__content h3 { font-size: var(--pm-h3-d); }
.pm-text-block__content h4 { font-size: var(--pm-h4-d); }

/* ---- faq_accordion — FAQ dépliable ---- */

.pm-faq {
	padding: 4rem 0;
}

.pm-faq__header {
	max-width: 48rem;
	margin: 0 auto 2.5rem;               /* centré comme le live */
	text-align: center;
}

.pm-faq__title {
	font-family: var(--pm-font-heading);
	font-weight: 400;
	font-size: var(--pm-h2-d);
	line-height: 1.25;
	letter-spacing: -0.025em;
	color: var(--pm-black);
	margin: 0 0 1rem;
}

.pm-faq__intro {
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--pm-black);
}

/* Liste centrée avec max-width (max-w-3xl mx-auto du live) */
.pm-faq__list {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	max-width: 48rem;
}
.pm-faq__item {
	border-top: 1px solid var(--pm-alphagrey-200);
	padding: 0;
}
.pm-faq__item:last-child {
	border-bottom: 1px solid var(--pm-alphagrey-200);
}
.pm-faq__item::before { display: none; } /* neutralise bullet global */

.pm-faq__details {
	margin: 0;
	padding: 0;
}

.pm-faq__question {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 0;                     /* my-4 du live */
	font-family: var(--pm-font-body);
	font-weight: 700;                    /* font-bold du live */
	font-size: 1.125rem;                 /* text-lg du live */
	color: var(--pm-black);
	user-select: none;
	transition: color var(--pm-transition);
}
.pm-faq__question::-webkit-details-marker { display: none; }
.pm-faq__question:hover { color: var(--pm-primary); }

.pm-faq__icon {
	color: var(--pm-primary);
	font-size: 1.1rem;
	flex-shrink: 0;
	transition: transform var(--pm-transition);
}
.pm-faq__details[open] .pm-faq__icon {
	transform: rotate(180deg);
}

.pm-faq__answer {
	padding: 0 0 1.5rem;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--pm-black);
}
.pm-faq__answer p { margin: 0 0 1rem; }
.pm-faq__answer p:last-child { margin-bottom: 0; }
.pm-faq__answer ul,
.pm-faq__answer ol {
	padding-left: 1.5rem;
	margin: 0 0 1rem;
}
.pm-faq__answer a:not(.pm-btn) {
	color: var(--pm-primary);
	text-decoration: underline;
}

/* Clôture FAQ : titre + bouton centrés, sans fond (identique au live) */
.pm-faq__closing {
	max-width: 48rem;
	margin: 4rem auto 0;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
}
.pm-faq__closing-title {
	font-family: var(--pm-font-heading);
	font-weight: 400;
	font-size: var(--pm-h4-d);            /* h4 centré comme le live */
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--pm-black);
	margin: 0;
}

/* Cartes services sans image : supprime la zone d'image, compense avec padding
   et style le titre un peu plus gros (comme les mini-cards du live). */
.pm-home__card--no-image .pm-home__card-image { display: none; }
.pm-home__card--no-image {
	padding: 1rem 0;
}
.pm-home__card--no-image .pm-home__card-title {
	color: var(--pm-primary);             /* text-blue-600 du live */
	font-size: 1.875rem;                  /* 30px du live */
	font-weight: 400;
	margin: 0 0 0.75rem;
}

/* ==========================================================================
   SINGLE ARTICLE (template single.php)
   Grille 2 colonnes reproduisant pausemenage.com/fr/<article>
   ========================================================================== */

.pm-article {
	font-family: var(--pm-font-body);
	color: var(--pm-black);
}

.pm-article__container {
	max-width: var(--pm-container-max);
	margin: 0 auto;
	padding-left: var(--pm-container-px);
	padding-right: var(--pm-container-px);
}

/* Grille 2 colonnes avec gap responsif (comme le live : sm:gap-x-2 lg:gap-x-8 xl:gap-x-16) */
.pm-article__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 4rem;        /* xl:gap-x-16 */
	row-gap: 0;              /* espacement vertical géré via margin-top sur les cells */
	align-items: center;     /* items-center du live */
	padding: 7rem 0;
}

/* Cellule : 1 ou 2 colonnes */
.pm-article__cell {
	padding: 0 1rem;    /* px-4 du live */
	margin-top: 7rem;
}
.pm-article__cell--full { grid-column: span 2 / span 2; }
.pm-article__cell--half { grid-column: span 1 / span 1; }

/* Le premier cell (header) n'a pas de margin-top (déjà géré par le padding grille) */
.pm-article__header {
	margin-top: 0;
}

/* ---- Header d'article ---- */

.pm-article__eyebrow {
	color: var(--pm-primary);
	font-weight: 500;
	font-size: 0.95rem;
	margin-bottom: 0.75rem;
}

.pm-article__title {
	font-family: var(--pm-font-heading);
	font-weight: 400;                  /* --font-weight-normal */
	font-size: var(--pm-h1-d);         /* 3.5rem */
	line-height: 1.25;                 /* --leading-tight */
	letter-spacing: -0.025em;          /* --tracking-tight (Tailwind default) */
	color: var(--pm-black);
	margin: 0 0 0.5rem;                /* calc(var(--spacing)*2) du live */
	max-width: 48rem;                  /* --container-3xl */
}

.pm-article__intro {
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--pm-black);
	max-width: 52rem;
}
.pm-article__intro p { margin: 0 0 1rem; }
.pm-article__intro p:last-child { margin-bottom: 0; }

.pm-article__meta {
	margin-top: 1.25rem;
	color: #7e8c8d;                    /* gris du live */
	font-size: 0.95rem;
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
}
.pm-article__sep { opacity: 0.6; }

/* ---- Contenu texte ---- */

.pm-article__text {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--pm-black);
	max-width: 52rem;
}
.pm-article__text p        { margin: 0 0 1.25rem; }
.pm-article__text p:last-child { margin-bottom: 0; }

.pm-article__text strong   { font-weight: 600; }

/* Liens inline dans le texte (bleus soulignés) — exclut les boutons */
.pm-article__text a:not(.pm-btn) {
	color: var(--pm-primary);
	text-decoration: underline;
}
.pm-article__text a:not(.pm-btn):hover { color: var(--pm-blue-600); }

.pm-article__text h2,
.pm-article__text h3,
.pm-article__text h4 {
	font-family: var(--pm-font-heading);
	font-weight: 400;                  /* --font-weight-normal */
	color: var(--pm-black);
	margin: 2rem 0 0.5rem;             /* mb-2 comme le live */
	letter-spacing: -0.025em;          /* --tracking-tight */
	line-height: 1.25;                 /* --leading-tight */
	max-width: 48rem;                  /* --container-3xl */
}
.pm-article__text h2 { font-size: var(--pm-h2-d); }
.pm-article__text h3 { font-size: var(--pm-h3-d); }
.pm-article__text h4 { font-size: var(--pm-h4-d); }

.pm-article__text ul,
.pm-article__text ol {
	list-style: none;
	padding: 0;
	margin: 1rem 0 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.pm-article__text ol { counter-reset: li; }
.pm-article__text ul li,
.pm-article__text ol li {
	position: relative;
	padding-left: 2.25rem;
	line-height: 1.6;
}
/* Puce or (même motif que la home) pour les ul */
.pm-article__text ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.4em;
	width: 1.25rem;
	height: 1.25rem;
	background-color: var(--pm-secondary);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 150 0 Q 135 135, 0 150 Q 135 165, 150 300 Q 165 165, 300 150 Q 165 135, 150 0 Z' fill='black'/%3E%3C/svg%3E");
	        mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 150 0 Q 135 135, 0 150 Q 135 165, 150 300 Q 165 165, 300 150 Q 165 135, 150 0 Z' fill='black'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	        mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
}
/* Numéros or pour les ol */
.pm-article__text ol li::before {
	counter-increment: li;
	content: counter(li) ".";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--pm-primary);
	font-weight: 600;
	font-size: 1.1rem;
}

/* Zone d'actions sous un paragraphe (bouton optionnel) — reproduit
   "flex gap-4 pt-4" du live */
.pm-article__text-actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	padding-top: 1rem;
	margin-top: 1rem;
}

/* ---- Images ---- */

.pm-article__figure {
	margin: 0;
}
.pm-article__figure img {
	width: 100%;
	height: auto;
	max-width: 100%;
	display: block;
	border-radius: 1rem;          /* aligné sur les autres photos du site */
}

/* Images insérées dans le contenu WP (corps d'article + text_block) :
   on rend tout cohérent avec le radius 1rem du reste du site. */
.pm-article__text img,
.pm-text-block__content img {
	max-width: 100%;
	height: auto;
	border-radius: 1rem;
}
.pm-article__figcaption {
	font-size: 0.875rem;
	font-style: italic;
	color: var(--pm-alphagrey-600);
	margin-top: 0.5rem;
	text-align: center;
}

/* ---- Bloc CTA dans l'article ---- */

.pm-article__cta-block {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.pm-article__cta-text {
	font-size: 1.0625rem;
	line-height: 1.7;
}
.pm-article__cta-actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	padding-top: 0.5rem;
}

/* ---- Edit link admin ---- */

.pm-article__edit-link {
	text-align: center;
	padding: 1rem;
}

/* ==========================================================================
   FORMULAIRES WPFORMS — layout `form_wpforms`
   --------------------------------------------------------------------------
   Reproduit le visuel du formulaire de candidature live :
   2 colonnes responsive, inputs amples, bouton primary, accents bleus.
   ========================================================================== */

.pm-form {
	padding: 5rem 0;
}
.pm-form--sky   { background: var(--pm-sky-50); }
.pm-form--amber { background: var(--pm-amber-50); }
.pm-form--white { background: var(--pm-white); }
.pm-form--none  { background: transparent; }

.pm-form__header {
	max-width: 48rem;
	margin: 0 0 3rem;
}

/* Layout principal : par défaut, juste le form. Avec FAQ activée → 2 colonnes. */
.pm-form__layout {
	display: block;
}
.pm-form--with-faq .pm-form__layout {
	display: grid;
	grid-template-columns: minmax(0, 48rem) minmax(0, 1fr);
	gap: 3rem;
	align-items: start;
}

/* Bloc FAQ inline (à droite du formulaire) — réutilise .pm-faq existant.
   On retire le padding vertical de .pm-faq (qui sert pour la version standalone)
   et on aligne la liste à gauche (au lieu du centrage par défaut).
   Le titre garde le style identique au bloc faq_accordion (h2 grand, font heading)
   avec le même espace dessous (2.5rem comme `.pm-faq__header`). */
.pm-form__faq.pm-faq {
	padding: 0;                           /* retire le padding-top/bottom du bloc standalone */
	min-width: 0;
}
.pm-form__faq .pm-faq__title {
	margin-bottom: 2.5rem;                /* identique au .pm-faq__header standalone */
}
.pm-form__faq .pm-faq__list {
	max-width: none;                      /* utilise toute la largeur du grid */
	margin: 0;
	padding: 0;
}

.pm-form__title {
	font-family: var(--pm-font-heading);
	font-weight: 400;
	font-size: var(--pm-h2-d);
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--pm-black);
	margin: 0 0 1rem;
}

.pm-form__intro {
	color: var(--pm-black);
	font-size: 1.0625rem;
	line-height: 1.7;
}

.pm-form__error {
	padding: 2rem;
	background: var(--pm-amber-100);
	border-left: 4px solid var(--pm-amber-500);
	color: var(--pm-black);
}

/* ----- Container du formulaire WPForms : grille 2 colonnes responsive -----
   WPForms Modern Markup ajoute une classe `.wpforms-container-full` avec une
   règle `div.wpforms-container-full:not(:empty)` (spé 0,2,2) qui applique
   padding/bg via CSS vars. On la bat avec une chaîne plus spécifique et on
   neutralise le padding interne et l'arrière-plan. On laisse WPForms gérer
   l'alignement horizontal (margin: 24px auto par défaut). */
.pm-form div.wpforms-container,
.pm-form div.wpforms-container-full,
.pm-form div.wpforms-container-full:not(:empty) {
	max-width: 48rem;                     /* 768px du live */
	margin: 0;                             /* annule le `margin: 24px auto` du Modern */
	padding: 0;                            /* annule le --wpforms-container-padding */
	background: transparent;
	width: 100%;
}
/* Annule aussi les variables WPForms qui peuvent réintroduire du padding/bg. */
.pm-form .wpforms-container-full {
	--wpforms-container-padding: 0;
	--wpforms-background-color: transparent;
	--wpforms-background-image-url: none;
}

.pm-form form.wpforms-form,
.pm-form .wpforms-container .wpforms-form,
.pm-form .wpforms-container-full form.wpforms-form {
	max-width: 48rem;
	width: 100%;
	margin: 0;                             /* pas de centrage auto */
}

/* Le mode Modern de WPForms applique souvent une `max-width` sur le wrapper
   d'input via `--wpforms-field-size-medium-max-width` (≈ 400px). Ça écrase nos
   colonnes — on reset à 100% du wrapper de cellule. */
.pm-form .wpforms-form .wpforms-field input,
.pm-form .wpforms-form .wpforms-field select,
.pm-form .wpforms-form .wpforms-field textarea {
	max-width: 100%;
}

/* Espacement entre champs — on prend le contrôle du layout via .wpforms-field-container.
   On en fait une grille 2 colonnes avec gap : les .wpforms-field span sur les 2 colonnes
   par défaut (= pleine largeur), les .wpforms-half span sur 1 (= moitié).
   Le gap gère l'espacement vertical ET horizontal de manière uniforme — ce qui
   évite la galère du margin-bottom qui ne fonctionne pas avec les half-half de WPForms. */
.pm-form .wpforms-form .wpforms-field-container {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 1.5rem 1rem !important;          /* row-gap 24px, column-gap 16px */
}
.pm-form .wpforms-form .wpforms-field-container > .wpforms-field {
	grid-column: 1 / -1 !important;       /* pleine largeur par défaut */
	margin: 0 !important;                  /* annule les marges WPForms */
	padding: 0 !important;
}
.pm-form .wpforms-form .wpforms-field-container > .wpforms-field.wpforms-half {
	grid-column: span 1 !important;       /* moitié de largeur */
}

/* Submit dans le grid : pleine largeur */
.pm-form .wpforms-form .wpforms-field-container ~ .wpforms-submit-container,
.pm-form .wpforms-form .wpforms-submit-container {
	grid-column: 1 / -1;
}

/* Mobile : tout en pleine largeur */
@media (max-width: 600px) {
	.pm-form .wpforms-form .wpforms-field-container {
		grid-template-columns: 1fr !important;
	}
	.pm-form .wpforms-form .wpforms-field-container > .wpforms-field.wpforms-half {
		grid-column: 1 / -1 !important;
	}
}

/* Champs cachés (CSRF, page_url, etc.) : retirer pour ne pas créer
   d'espace vide qui décale la mise en page. */
.pm-form .wpforms-form .wpforms-field-hidden,
.pm-form .wpforms-form .wpforms-field:has(> input[type="hidden"]:only-child),
.pm-form .wpforms-form .wpforms-field-pagebreak { display: none; }

/* ----- Labels (spécificité forte pour battre le CSS WPForms) ----- */
.pm-form .wpforms-form .wpforms-field-label,
.pm-form .wpforms-container .wpforms-field > .wpforms-field-label {
	display: block;
	font-family: var(--pm-font-body);
	font-weight: 400;                     /* identique au live */
	font-size: 1rem;                       /* 16px identique au live */
	line-height: 1.4;
	color: var(--pm-black);
	margin: 0 0 0.5rem;
}
.pm-form .wpforms-form .wpforms-required-label,
.pm-form .wpforms-form .wpforms-field-required > .wpforms-field-label::after {
	color: var(--pm-blue-700);
	font-weight: 600;
}
.pm-form .wpforms-field-sublabel {
	font-size: 0.8125rem;
	color: var(--pm-alphagrey-600);
	margin-top: 0.25rem;
}

/* ----- Inputs (text, email, phone, number, url) + select + textarea -----
   Spécificité poussée à 4 classes pour gagner sur le CSS WPForms par défaut. */
.pm-form .wpforms-form .wpforms-field input[type="text"],
.pm-form .wpforms-form .wpforms-field input[type="email"],
.pm-form .wpforms-form .wpforms-field input[type="tel"],
.pm-form .wpforms-form .wpforms-field input[type="number"],
.pm-form .wpforms-form .wpforms-field input[type="url"],
.pm-form .wpforms-form .wpforms-field input[type="password"],
.pm-form .wpforms-form .wpforms-field input[type="date"],
.pm-form .wpforms-form .wpforms-field select,
.pm-form .wpforms-form .wpforms-field textarea {
	width: 100%;
	display: block;
	box-sizing: border-box;
	padding: 0.5rem 1rem;                 /* aligné sur le live (10px x 16px ≈) */
	height: 2.625rem;                      /* 42px comme le live */
	font-family: var(--pm-font-body);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--pm-black);
	background: var(--pm-white);
	border: 1px solid var(--pm-alphagrey-200);
	border-radius: 0.5rem;                /* 8px comme le submit */
	box-shadow: none;
	transition: border-color var(--pm-transition), box-shadow var(--pm-transition);
}
.pm-form .wpforms-form .wpforms-field input[type="text"]:focus,
.pm-form .wpforms-form .wpforms-field input[type="email"]:focus,
.pm-form .wpforms-form .wpforms-field input[type="tel"]:focus,
.pm-form .wpforms-form .wpforms-field input[type="number"]:focus,
.pm-form .wpforms-form .wpforms-field input[type="url"]:focus,
.pm-form .wpforms-form .wpforms-field select:focus,
.pm-form .wpforms-form .wpforms-field textarea:focus {
	outline: none;
	border-color: var(--pm-blue-700);
	box-shadow: 0 0 0 3px rgba(1,127,175,0.15);
}

.pm-form .wpforms-form .wpforms-field textarea {
	min-height: 7rem;
	height: auto;                          /* laisse le rows de WPForms gérer */
	resize: vertical;
}
.pm-form .wpforms-form .wpforms-field select { appearance: auto; cursor: pointer; }

/* ----- Checkboxes & Radios ----- */
.pm-form .wpforms-form .wpforms-field-checkbox ul,
.pm-form .wpforms-form .wpforms-field-radio ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.5rem 1rem;
}
.pm-form .wpforms-form .wpforms-field-checkbox ul li,
.pm-form .wpforms-form .wpforms-field-radio ul li {
	margin: 0;
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}
.pm-form .wpforms-form .wpforms-field-checkbox input[type="checkbox"],
.pm-form .wpforms-form .wpforms-field-radio input[type="radio"] {
	margin: 0.2rem 0 0;
	accent-color: var(--pm-blue-700);
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
}
.pm-form .wpforms-form .wpforms-field-checkbox ul li label,
.pm-form .wpforms-form .wpforms-field-radio ul li label {
	font-size: 0.95rem;
	font-weight: 400;
	color: var(--pm-black);
	cursor: pointer;
	margin: 0;
	line-height: 1.4;
}

/* ----- File upload ----- */
.pm-form .wpforms-field-file-upload input[type="file"] {
	display: block;
	width: 100%;
	padding: 0.5rem;
	background: var(--pm-white);
	border: 1px dashed var(--pm-alphagrey-200);
	border-radius: 0.5rem;
	cursor: pointer;
	font-size: 0.9rem;
}
.pm-form .wpforms-field-file-upload input[type="file"]:hover {
	border-color: var(--pm-blue-700);
}

/* Cas WPForms Modern File Upload (drag-drop) */
.pm-form .wpforms-uploader {
	border: 2px dashed var(--pm-alphagrey-200);
	border-radius: 0.5rem;
	padding: 1.5rem;
	background: var(--pm-white);
}
.pm-form .wpforms-uploader.modern-active,
.pm-form .wpforms-uploader:hover {
	border-color: var(--pm-blue-700);
}

/* ----- Submit button (spécificité forte pour battre le CSS WPForms) ----- */
.pm-form .wpforms-form .wpforms-submit-container,
.pm-form .wpforms-container .wpforms-submit-container {
	grid-column: 1 / -1;
	margin: 1rem 0 0;
	padding: 0;
}
.pm-form .wpforms-form .wpforms-submit,
.pm-form .wpforms-container button.wpforms-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.625rem 1rem;               /* 10px 16px du live */
	font-family: var(--pm-font-body);
	font-weight: 500;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--pm-white);
	background-color: var(--pm-blue-700); /* #017faf — bleu primary du live */
	border: 0;
	border-radius: 0.5rem;                /* 8px du live */
	cursor: pointer;
	transition: background-color var(--pm-transition);
	box-shadow: none;
	text-shadow: none;
}
.pm-form .wpforms-form .wpforms-submit:hover,
.pm-form .wpforms-form .wpforms-submit:focus,
.pm-form .wpforms-container button.wpforms-submit:hover {
	background-color: var(--pm-blue-800);
	outline: none;
	box-shadow: none;
}

/* ----- Messages d'erreur / succès ----- */
.pm-form .wpforms-error {
	color: #b91c1c;
	font-size: 0.85rem;
	margin-top: 0.25rem;
	display: block;
}
.pm-form .wpforms-field input.wpforms-error,
.pm-form .wpforms-field textarea.wpforms-error,
.pm-form .wpforms-field select.wpforms-error {
	border-color: #b91c1c;
}
.pm-form .wpforms-confirmation-container,
.pm-form .wpforms-confirmation-container-full {
	padding: 1.5rem;
	background: var(--pm-sky-50);
	border-left: 4px solid var(--pm-blue-700);
	color: var(--pm-black);
	border-radius: 0.5rem;
}

/* ----- Responsive ----- */
@media (max-width: 767.98px) {
	.pm-form { padding: 3rem 0; }
	.pm-form__title { font-size: var(--pm-h2-m); }
	/* Checkboxes/radios : 1 colonne en mobile */
	.pm-form .wpforms-field-checkbox ul,
	.pm-form .wpforms-field-radio ul {
		grid-template-columns: 1fr;
	}
	/* Marge un peu plus serrée en mobile */
	.pm-form .wpforms-form .wpforms-field { margin-bottom: 1.25rem; }
}