/* =========================================================================
   PARACHUTISME FRANCE — ACCUEIL
   Traduction du MVP gelé /Applications/MAMP/htdocs/pf-mvp-skydive-direction.html
   (contrat design MVP, 20 août 2026), chargé uniquement sur is_front_page()
   — voir functions.php. Ne redéfinit jamais les jetons ou les composants
   partagés (tokens.css, base.css, components.css) : header/footer/topbar/
   menu/boutons/container viennent du shell commun (inc/Shell.php), déjà
   vérifiés contre les six MVP gelés le 22 août 2026.

   Sélecteurs propres à cette page, préfixés `.pf-home-*`, pour ne jamais
   entrer en collision avec un composant partagé ni avec une autre page.
   ========================================================================= */

/* base.css impose une marge basse par défaut à tous les titres
   (margin:0 0 var(--pf-space-sm)) ; le MVP, lui, part d'un reset global
   h1/h2/h3{margin:0} et ajoute la marge au cas par cas. Reproduit ici pour
   toute la page : les règles ci-dessous qui redéfinissent une marge
   spécifique restent prioritaires par cascade normale. */
.pf-home h1, .pf-home h2, .pf-home h3 { margin: 0; }

/* Couleur explicite des titres — diagnostic du 22 août 2026 (contrôle réel) :
   theme.json injecte "h1,h2,h3,h4,h5,h6{color:var(--wp--preset--color--pf-ink)}"
   dans global-styles-inline-css, un sélecteur d'ÉLÉMENT (spécificité 0,0,1),
   sans :where(). Un fond blanc hérité d'une section ancêtre ne le bat jamais :
   l'héritage ne l'emporte que si AUCUNE règle ne cible l'élément lui-même, et
   cette règle le cible directement. Toute section/bloc en fond sombre doit
   donc redonner le blanc explicitement (0,1,1 bat 0,0,1). */
.pf-home-hero h1 { color: var(--pf-color-white); }
.pf-home-section--navy :is(h1, h2, h3) { color: var(--pf-color-white); }

/* Supprime l'espacement automatique de 24px que WordPress insère entre les
   enfants directs d'un bloc Groupe en layout "flow" (blockGap de theme.json,
   :root :where(.is-layout-flow) > *{margin-block-start:...}, spécificité
   0,1,0) — jamais touché ici : seul CET espacement, entre les <section> de
   l'Accueil, est neutralisé ; le blockGap global reste actif partout
   ailleurs sur le site. Sélecteur élément+classe (0,1,1) : bat la règle
   WordPress sans dépendre de l'ordre d'injection des styles. */
main.pf-home > * { margin-block-start: 0; }

/* Même mécanisme WordPress (blockGap), un niveau au-dessus : .wp-site-blocks
   espace aussi ses propres enfants directs (header, <main>, footer) de
   24px — indépendant du correctif précédent, qui ne portait que sur
   l'intérieur de <main>. Neutralisé ici uniquement pour l'Accueil : le
   sélecteur cible .pf-home explicitement (présent seulement sur cette page)
   et sa relation directe avec le footer qui la suit ; le blockGap réel
   (theme.json) n'est touché nulle part, il continue de s'appliquer partout
   ailleurs sur le site. */
.wp-site-blocks > main.pf-home,
.wp-site-blocks > main.pf-home + footer.wp-block-template-part {
	margin-block-start: 0;
}

/* -- Hero — fond vidéo ---------------------------------------------------- */

.pf-home-hero {
	position: relative;
	min-height: clamp(560px, 88vh, 820px);
	display: flex;
	align-items: flex-end;
	z-index: 2;
	color: var(--pf-color-white);
}
.pf-home-hero__media { position: absolute; inset: 0; z-index: 0; }
.pf-home-hero__media video,
.pf-home-hero__media img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover; object-position: center 35%;
}
.pf-home-hero__scrim {
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(180deg, rgba(12, 29, 61, .25) 0%, rgba(12, 29, 61, .8) 88%);
}
.pf-home-hero__inner {
	position: relative; z-index: 2;
	max-width: var(--pf-container-main);
	margin: 0 auto;
	padding: 64px var(--pf-container-padding) 56px;
	width: 100%;
}
.pf-home-hero h1 {
	font-family: var(--pf-font-heading);
	font-weight: 700;
	line-height: 1.08;
	font-size: clamp(2.6rem, 7vw, 5.2rem);
	max-width: 14ch;
	margin: 0;
	text-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}
.pf-home-eyebrow {
	font-family: var(--pf-font-heading);
	font-weight: 800;
	font-size: 1.05rem;
	letter-spacing: .02em;
	margin: 0 0 10px;
}
/* Modificateurs remplaçant les styles inline retirés du pattern : la couleur
   rose est la même valeur statique répétée sur la plupart des eyebrows de la
   page (jamais une donnée variable), une classe suffit. Les deux exceptions
   contextuelles (hero et sections navy, ci-dessous) restent des règles de
   cascade, pas des styles inline. */
.pf-home-eyebrow--accent { color: var(--pf-color-accent); }
.pf-home-heading--navy { color: var(--pf-color-navy); margin: 0; }
.pf-home-hero .pf-home-eyebrow { color: var(--pf-color-white); }
.pf-home-hero p.pf-home-lead {
	font-family: var(--pf-font-body);
	font-weight: 600;
	font-size: clamp(1.05rem, 2vw, 1.3rem);
	max-width: 44ch;
	margin: 18px 0 30px;
	color: rgba(255, 255, 255, .92);
}
.pf-home-hero-form {
	display: flex; flex-wrap: wrap; gap: 10px;
	background: rgba(255, 255, 255, .97);
	padding: 8px; border-radius: var(--pf-radius-pill);
	max-width: 620px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}
.pf-home-hero-form input {
	flex: 1 1 260px; border: none; background: transparent;
	padding: 12px 16px; font-family: var(--pf-font-body); font-weight: 600;
	font-size: 1rem; color: var(--pf-color-ink); outline: none; min-width: 0;
}
.pf-home-hero-form__submit { padding: 0; width: 52px; height: 52px; justify-content: center; flex: none; }
.pf-home-hero-form__submit svg { width: 26px; height: 26px; }
.pf-home-search-wrap { position: relative; max-width: 620px; }
.pf-home-search-suggestions {
	position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; right: 0;
	max-height: 226px; overflow-y: auto; margin: 0; padding: 6px;
	list-style: none; border-radius: 14px; background: var(--pf-color-white);
	box-shadow: 0 12px 32px rgba(0, 0, 0, .25); color: var(--pf-color-ink);
}
.pf-home-search-suggestions[hidden] { display: none; }
.pf-home-search-suggestions [role="option"] {
	padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: .95rem;
}
.pf-home-search-suggestions [role="option"]:hover,
.pf-home-search-suggestions [role="option"][aria-selected="true"] {
	background: var(--pf-color-sky); color: var(--pf-color-navy);
}
.pf-home-hero-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.pf-home-tag-pill {
	font-family: var(--pf-font-heading); font-weight: 700; font-size: .92rem;
	letter-spacing: .03em; text-transform: uppercase;
	background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .35);
	color: var(--pf-color-white); padding: 8px 16px; border-radius: var(--pf-radius-pill);
}

/* -- Sections génériques de la page ---------------------------------------
   Reproduit exactement le modèle MVP : le <section> porte le SEUL padding
   horizontal (comme section{padding:88px var(--pad)} du MVP) ; l'enveloppe
   interne (.section-inner côté MVP, .pf-container ici) ne fait que centrer
   sur 1240px, sans padding propre — c'est déjà le cas du MVP (.section-inner
   n'a jamais de padding). .pf-container, lui, est un composant partagé qui
   applique systématiquement son propre padding-inline : sans l'annuler ici,
   il s'ajoute à celui de la section et double le retrait réel (80px au lieu
   de 40px) — diagnostic du 22 août 2026 (contrôle réel), confirmé sur les 10
   sections de la page. La règle suivante neutralise ce padding uniquement
   quand .pf-container est utilisé à l'intérieur d'une section de l'Accueil,
   sans toucher au composant partagé lui-même (components.css intact, tel
   quel pour le reste du site). */
.pf-home-section { padding: 88px var(--pf-container-padding); }
.pf-home-section > .pf-container { padding-inline: 0; }
.pf-home-section--navy { background: var(--pf-color-navy); color: var(--pf-color-white); }
/* :not() plutôt qu'un doublon de spécificité à négocier avec
   .pf-home-eyebrow--accent (l'« annuaire complet », en navy, doit rester
   rose comme dans le MVP) : cette règle ne s'applique tout simplement pas à
   un eyebrow qui porte déjà le modificateur accent, quel que soit l'ordre
   des règles dans ce fichier. */
.pf-home-section--navy .pf-home-eyebrow:not(.pf-home-eyebrow--accent) { color: var(--pf-color-sky); }
.pf-home-section--mist { background: var(--pf-color-mist); }
.pf-home-section-head {
	display: flex; justify-content: space-between; align-items: flex-end;
	gap: 24px; flex-wrap: wrap; margin-bottom: 44px;
}
.pf-home-section-head h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); max-width: 16ch; margin: 0; }

/* -- Bienvenue chez les paras ---------------------------------------------- */

.pf-home-section-welcome { padding-top: 100px; padding-bottom: 100px; }
.pf-home-welcome-block { max-width: 760px; margin: 0 auto; text-align: center; }
.pf-home-welcome-block .pf-home-eyebrow { justify-content: center; display: flex; }
.pf-home-welcome-block h2 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); margin-bottom: 28px; }
.pf-home-welcome-lead {
	font-family: var(--pf-font-body); font-weight: 500;
	font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.65;
	color: rgba(255, 255, 255, .88); margin: 0 0 20px;
}
.pf-home-welcome-close {
	font-family: var(--pf-font-body); font-weight: 600; font-style: italic;
	font-size: 1.05rem; color: var(--pf-color-sky); margin: 0;
}

/* -- Avant de sauter / réassurance ------------------------------------------ */

.pf-home-reassure-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.pf-home-reassure-card {
	background: var(--pf-color-white); border-radius: var(--pf-radius-lg);
	padding: 28px 24px; box-shadow: var(--pf-shadow-md);
	border-top: 5px solid var(--pf-color-accent);
}
.pf-home-reassure-card h3 { font-size: 1.15rem; color: var(--pf-color-navy); margin-bottom: 10px; }
.pf-home-reassure-card p { font-family: var(--pf-font-body); font-size: 1rem; color: var(--pf-color-slate); margin: 0; }

/* -- Explorer près de chez vous -------------------------------------------- */

.pf-home-region-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pf-home-region-pill {
	font-family: var(--pf-font-heading); font-weight: 700; font-size: 1.02rem;
	background: var(--pf-color-white); border: 1px solid rgba(12, 29, 61, .15);
	color: var(--pf-color-navy); padding: 10px 18px; border-radius: var(--pf-radius-pill);
	transition: background 150ms, color 150ms, border-color 150ms;
}
a.pf-home-region-pill:hover { background: var(--pf-color-navy); border-color: var(--pf-color-navy); color: #fff; }

/* -- Choisir son parcours — rail horizontal --------------------------------- */

.pf-home-rail-controls { display: flex; gap: 10px; flex: none; }
.pf-home-rail-arrow {
	display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%;
	border: 1.5px solid rgba(12, 29, 61, .18); background: var(--pf-color-white);
	color: var(--pf-color-navy); cursor: pointer;
	transition: background 150ms, color 150ms, border-color 150ms, transform 150ms;
}
.pf-home-rail-arrow svg { width: 20px; height: 20px; }
.pf-home-rail-arrow:hover { background: var(--pf-color-navy); border-color: var(--pf-color-navy); color: #fff; transform: translateY(-2px); }

/* Plein cadre réel, exactement comme le MVP : .parcours-rail n'a aucun
   padding horizontal, le bord à bord vient de .parcours-rail-wrap qui
   annule par marge négative le padding de la section (margin:0
   calc(var(--pad)*-1)). .pf-home-section ayant de nouveau un padding
   horizontal propre (correctif du 22 août 2026, gouttière unique), le rail
   a besoin de la même marge négative pour rester plein cadre — reproduite
   ici directement sur le rail, faute d'un ".pf-home-parcours-rail-wrap"
   séparé dans ce pattern. */
.pf-home-parcours-rail {
	display: flex; gap: 18px; overflow-x: auto; cursor: grab;
	scrollbar-width: none; -ms-overflow-style: none;
	padding: 60px 0 90px;
	margin-inline: calc(var(--pf-container-padding) * -1);
}
.pf-home-parcours-rail:active { cursor: grabbing; }
.pf-home-parcours-rail::-webkit-scrollbar { display: none; }
.pf-home-parcours-card {
	position: relative; z-index: 1; flex: 0 0 auto; width: 290px; height: 290px;
	border-radius: var(--pf-radius-lg); overflow: hidden;
	background-size: cover; background-position: center; color: #fff;
	display: flex; align-items: flex-end; padding: 18px;
	box-shadow: 0 14px 28px rgba(12, 29, 61, .16);
	transition: transform 220ms ease, box-shadow 220ms ease;
}
.pf-home-parcours-card:hover,
.pf-home-parcours-card:focus-visible {
	z-index: 5;
	transform: translateY(-10px) rotate(-1.5deg) scale(1.03);
	box-shadow: 0 26px 44px rgba(12, 29, 61, .28);
}
.pf-home-parcours-card:focus-visible { outline: 3px solid var(--pf-color-accent); outline-offset: 4px; }
.pf-home-parcours-card::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(12, 29, 61, 0) 45%, rgba(12, 29, 61, .82) 100%);
}
.pf-home-parcours-card > * { position: relative; z-index: 1; }
.pf-home-parcours-card .pf-home-kicker {
	position: absolute; top: 14px; left: 14px; z-index: 1;
	font-family: var(--pf-font-heading); font-weight: 800; font-size: .8rem;
	letter-spacing: .06em; text-transform: uppercase;
	background: rgba(255, 255, 255, .92); color: var(--pf-color-navy);
	padding: 5px 10px; border-radius: var(--pf-radius-pill);
}
.pf-home-parcours-card h3 {
	font-family: var(--pf-font-heading); font-weight: 900;
	width: calc(100% - 12px); max-width: 100%;
	font-size: 2.6rem; line-height: .88; letter-spacing: -.015em; margin: 0 6px 3px; color: #fff;
	-webkit-text-stroke: .6px #fff;
	transform: rotate(var(--tilt, -2deg)); transform-origin: left bottom;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
/* Inclinaison "posée à la main" de chaque titre — reprise du MVP, portée ici
   par position plutôt qu'en style inline : la séquence des 5 parcours est
   fixe (tandem, PAC, disciplines, militaire, professionnel), jamais une
   liste variable. Le rail répète ce jeu de 5 cartes pour boucler à l'infini
   (home.js) : :nth-child(5n+k) retombe juste sur le même titre à chaque
   passage, sans rien dupliquer ici. */
.pf-home-parcours-card:nth-child(5n+1) h3 { --tilt: -2.5deg; } /* Tandem */
.pf-home-parcours-card:nth-child(5n+2) h3 { --tilt: 1.5deg; }  /* PAC */
.pf-home-parcours-card:nth-child(5n+3) h3 { --tilt: -1deg; }   /* Disciplines */
.pf-home-parcours-card:nth-child(5n+4) h3 { --tilt: 2deg; }    /* Militaire */
.pf-home-parcours-card:nth-child(5n) h3   { --tilt: -1.6deg; } /* Professionnel */
@media (prefers-reduced-motion: reduce) {
	.pf-home-parcours-card { transition: none; }
}

/* -- Trois façons de répondre ------------------------------------------------ */

.pf-home-reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.pf-home-reason-card {
	background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--pf-radius-lg); padding: 32px 28px;
}
.pf-home-reason-num { font-family: var(--pf-font-heading); font-weight: 900; font-size: 2.6rem; color: var(--pf-color-accent); line-height: 1; margin-bottom: 14px; }
.pf-home-reason-card h3 { font-size: 1.3rem; margin-bottom: 12px; }
.pf-home-reason-card p { font-family: var(--pf-font-body); font-weight: 500; font-size: 1.05rem; color: rgba(255, 255, 255, .82); margin: 0; }

/* -- Carte de France interactive -------------------------------------------- */

.pf-home-map-intro { font-family: var(--pf-font-body); font-weight: 500; font-size: 1.05rem; color: var(--pf-color-slate); max-width: 64ch; margin: 0 0 8px; }
.pf-home-map-region-name { font-family: var(--pf-font-heading); font-weight: 800; font-size: 1rem; color: var(--pf-color-accent-strong); margin: 16px 0 0; }
.pf-home-france-map-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; align-items: stretch; }
.pf-home-france-map-wrap { background: transparent; border-radius: var(--pf-radius-lg); padding: clamp(16px, 3vw, 32px); }
.pf-home-france-map { width: 100%; height: auto; display: block; transform: rotate(-1.1deg); }
.pf-home-dept { fill: var(--pf-color-sky); opacity: .5; stroke: var(--pf-color-white); stroke-width: 5; stroke-linejoin: round; cursor: default; }
.pf-home-dept:focus { outline: none; }
.pf-home-map-link .pf-home-dept { cursor: pointer; }
.pf-home-map-link:hover > .pf-home-dept { fill: var(--pf-color-navy); opacity: .85; }
.pf-home-map-link:focus-visible > .pf-home-dept { stroke: var(--pf-color-accent); stroke-width: 3; }
.pf-home-map-legend { display: flex; flex-wrap: wrap; gap: 20px; margin: 0 0 32px; font-family: var(--pf-font-body); font-size: .92rem; color: var(--pf-color-slate); }
.pf-home-map-side-col { display: flex; flex-direction: column; justify-content: center; height: 100%; }
.pf-home-om-panel { background: var(--pf-color-mist); border-radius: var(--pf-radius-lg); padding: 22px 24px; display: flex; flex-direction: column; }
.pf-home-om-panel h3 { font-family: var(--pf-font-heading); font-weight: 800; font-size: 1.22rem; letter-spacing: .03em; color: var(--pf-color-navy); margin: 0 0 14px; }
.pf-home-om-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pf-home-om-list li { display: flex; }
.pf-home-om-list-btn {
	display: flex; align-items: center; width: 100%; text-align: left;
	font-family: var(--pf-font-heading); font-weight: 700; font-size: 1.26rem;
	background: var(--pf-color-white); border: 1px solid rgba(12, 29, 61, .15); color: var(--pf-color-navy);
	padding: 14px 16px; border-radius: var(--pf-radius-md); cursor: pointer;
	transition: background 150ms, color 150ms, border-color 150ms;
}
.pf-home-om-list-btn:hover { background: var(--pf-color-white); border-color: var(--pf-color-sky); }
.pf-home-region-links { display: none; margin-top: 28px; }
.pf-home-region-links-title { font-family: var(--pf-font-heading); font-weight: 800; font-size: 1.15rem; color: var(--pf-color-navy); margin: 0 0 14px; }
.pf-home-region-links ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pf-home-region-links li { display: flex; min-width: 0; }
.pf-home-region-link {
	display: flex; align-items: center; width: 100%; min-height: 48px; padding: 11px 14px;
	border: 1px solid rgba(12, 29, 61, .14); border-radius: var(--pf-radius-md);
	background: var(--pf-color-white); color: var(--pf-color-navy);
	font-family: var(--pf-font-heading); font-weight: 700; line-height: 1.25;
}
a.pf-home-region-link:hover { border-color: var(--pf-color-sky); color: var(--pf-color-accent-strong); }
a.pf-home-region-link:focus-visible { outline: 3px solid var(--pf-color-accent); outline-offset: 2px; }
span.pf-home-region-link { color: var(--pf-color-slate); background: var(--pf-color-mist); }

/* -- Zones — cartes bloc-couleur --------------------------------------------- */

.pf-home-zones-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.pf-home-zone-card {
	position: relative; border-radius: var(--pf-radius-lg); overflow: hidden; aspect-ratio: 3 / 4;
	display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; color: var(--pf-color-white);
	background-size: cover; background-position: center;
	box-shadow: 0 16px 34px rgba(12, 29, 61, .18);
}
.pf-home-zone-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 29, 61, 0) 35%, rgba(12, 29, 61, .88) 100%); }
.pf-home-zone-card > * { position: relative; z-index: 1; }
.pf-home-zone-region {
	align-self: flex-start; font-family: var(--pf-font-heading); font-weight: 800; font-size: .85rem;
	letter-spacing: .06em; text-transform: uppercase; background: var(--pf-color-sky);
	padding: 6px 12px; border-radius: var(--pf-radius-pill); margin-bottom: auto;
}
/* Couleur explicite, même cause que le hero/les sections navy (diagnostic du
   22 août) : h1..h6{color:ink} de theme.json cible directement ce h3. */
.pf-home-zone-card h3 { font-size: 1.5rem; margin-top: 14px; color: var(--pf-color-white); }
.pf-home-zone-place { font-size: .9rem; line-height: 1.25; color: var(--pf-color-white); }
.pf-home-zone-card .pf-home-zone-link { font-family: var(--pf-font-heading); font-weight: 700; font-size: .98rem; text-transform: uppercase; color: var(--pf-color-white); opacity: .85; margin-top: 8px; display: inline-block; }
a.pf-home-zone-card:hover .pf-home-zone-link { opacity: 1; }
.pf-home-zone-card.tone-rose .pf-home-zone-region { background: var(--pf-color-accent); }
.pf-home-cta-row { text-align: center; margin-top: 40px; }
.pf-home-cta-row .pf-button { padding: 16px 34px; font-size: 1.05rem; }

/* -- Bandeau structures ------------------------------------------------------ */

.pf-home-band-structures {
	background: linear-gradient(120deg, var(--pf-color-sky) 0%, var(--pf-color-blue) 100%);
	color: var(--pf-color-white); border-radius: 28px; padding: 56px var(--pf-container-padding);
	display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap;
	max-width: var(--pf-container-main); margin: 0 auto;
}
/* Même cause que le hero/les sections navy (diagnostic du 22 août) :
   h1..h6{color:ink} de theme.json cible ce h2 directement, sur un fond en
   dégradé bleu/navy où le blanc hérité de .pf-home-band-structures ne
   suffit pas à le battre. */
.pf-home-band-structures h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); max-width: 20ch; margin: 0; color: var(--pf-color-white); }
.pf-home-band-structures p { font-family: var(--pf-font-body); font-weight: 500; max-width: 40ch; color: rgba(255, 255, 255, .88); margin: 12px 0 0; }
/* Variante blanche du bouton contour — la bande est colorée (dégradé ciel/
   bleu), le contour navy par défaut de .pf-button--secondary n'y est pas
   lisible. Remplace le style inline retiré du pattern. */
.pf-home-band-structures__cta { border-color: #fff; color: #fff; }
.pf-home-badge-note {
	display: inline-block; background: var(--pf-color-accent); color: #fff; font-family: var(--pf-font-heading);
	font-weight: 800; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px;
	border-radius: var(--pf-radius-pill); margin-bottom: 16px;
}

/* -- Composition rail — reprise du gabarit déjà validé (MVP Zone) ------------ */

.pf-home-compo { display: grid; gap: 48px; align-items: start; grid-template-columns: 300px minmax(0, 1fr); }
.pf-home-compo .pf-home-rail-col .pf-home-eyebrow { margin: 0 0 12px; }
.pf-home-compo .pf-home-rail-col h2 { margin: 0; max-width: none; font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.06; }

/* -- Guides éditoriaux -------------------------------------------------------- */

.pf-home-guides-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.pf-home-guide-card {
	display: block; background: var(--pf-color-white); border-radius: var(--pf-radius-lg);
	padding: 28px 24px; box-shadow: var(--pf-shadow-md); border-top: 5px solid var(--pf-color-sky);
	transition: transform 180ms ease, box-shadow 180ms ease;
}
.pf-home-guide-card.tone-rose { border-top-color: var(--pf-color-accent); }
a.pf-home-guide-card:hover { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(12, 29, 61, .14); }
.pf-home-guide-card h3 { font-size: 1.35rem; color: var(--pf-color-navy); margin-bottom: 10px; }
.pf-home-guide-card p { font-family: var(--pf-font-body); font-size: 1.02rem; color: var(--pf-color-slate); margin: 0 0 14px; }
.pf-home-guide-status { font-family: var(--pf-font-heading); font-weight: 700; font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; color: #5b6878; }
.pf-home-guide-card.is-soon { cursor: default; }

/* -- Annuaire complet (bandeau navy de fin de page) -------------------------- */

.pf-home-directory { display: grid; grid-template-columns: max-content max-content; justify-content: space-between; column-gap: 80px; row-gap: 56px; margin-top: 56px; }
.pf-home-directory-col h4 { font-family: var(--pf-font-heading); font-weight: 800; font-size: .98rem; letter-spacing: .06em; text-transform: uppercase; color: var(--pf-color-accent); margin: 0 0 24px; }
.pf-home-directory-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 36px; }
.pf-home-directory-list li { break-inside: avoid; width: 230px; }
.pf-home-directory-list a {
	display: flex; align-items: center; min-height: 46px; padding-block: 10px;
	font-family: var(--pf-font-body); font-weight: 600; font-size: 1.05rem; color: rgba(255, 255, 255, .85);
	border-bottom: 1px solid rgba(255, 255, 255, .14); text-decoration: none;
}
.pf-home-directory-list a:hover { color: var(--pf-color-accent); }
.pf-home-directory-cta { margin: 40px 0 0; }
.pf-home-directory-cta a { font-family: var(--pf-font-heading); font-weight: 700; font-size: 1.05rem; letter-spacing: .02em; text-transform: uppercase; color: var(--pf-color-accent); text-decoration: none; }
.pf-home-directory-cta a:hover { color: var(--pf-color-white); }

/* -- Responsive — seuils repris à l'identique du MVP ------------------------- */

@media (max-width: 1180px) {
	.pf-home-compo { grid-template-columns: 260px minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 1024px) {
	.pf-home-france-map-layout { grid-template-columns: 1fr; }
	.pf-home-map-region-name { display: none; }
	.pf-home-region-links { display: block; }
	.pf-home-reasons { grid-template-columns: 1fr 1fr; }
	.pf-home-zones-grid { grid-template-columns: 1fr 1fr; }
	.pf-home-guides-grid { grid-template-columns: 1fr 1fr; }
	.pf-home-reassure-grid { grid-template-columns: 1fr 1fr; }
	.pf-home-directory { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 860px) {
	.pf-home-compo { grid-template-columns: 1fr; gap: 20px; }
	.pf-home-compo .pf-home-rail-col h2 { font-size: clamp(1.6rem, 5vw, 2rem); }
}
@media (max-width: 700px) {
	.pf-home-region-links ul { grid-template-columns: 1fr; }
	.pf-home-reasons { grid-template-columns: 1fr; }
	.pf-home-zones-grid { grid-template-columns: 1fr; }
	.pf-home-guides-grid { grid-template-columns: 1fr; }
	.pf-home-reassure-grid { grid-template-columns: 1fr; }
	.pf-home-hero { min-height: 560px; }
	.pf-home-band-structures { flex-direction: column; align-items: flex-start; }
	.pf-home-directory-list { columns: 1; }
}
@media (max-width: 480px) {
	.pf-home-hero-form { flex-wrap: nowrap; }
	.pf-home-hero-form input { flex-basis: auto; width: 0; }
}

/* Real lazy images retain the approved card crop; the heading supplies the link name. */
.pf-home-parcours-card > .pf-home-card-photo,
.pf-home-zone-card > .pf-home-card-photo {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%; object-fit: cover;
}
.pf-home-hero .pf-home-eyebrow { display: inline-block; color: var(--pf-color-white); background: var(--pf-color-navy); padding: .3rem .6rem; border-radius: 4px; }
.pf-article-byline { font-size: .9rem; line-height: 1.5; font-weight: 400; }

/* Overlay must stay above the real photo and below the card text. */
.pf-home-zone-card::before { z-index: 1; }
.pf-home-zone-card > :not(.pf-home-card-photo) { position: relative; z-index: 2; }