/* =========================================================================
   PARACHUTISME FRANCE — FAMILLE « DESTINATION »
   Fondations communes aux quatre gabarits territoriaux : Région (Occitanie),
   Département (Lot), Zone (Cahors–Lalbenque) et Acteur (CEP Cahors).

   Les quatre MVP HTML gelés désignent eux-mêmes ce groupe comme un « gabarit
   Destination » repris à l'identique d'une page à l'autre (voir leurs
   en-têtes CSS respectifs) : une seule feuille partagée ici, plutôt que
   quatre quasi-duplicatas, pour qu'une correction commune ne se fasse
   qu'une fois — même principe que components.css pour le shell. 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).

   Sélecteurs préfixés `pf-*`, comme le reste du thème (composants partagés
   de components.css) : noms directement dérivés de ceux des quatre MVP gelés
   (dest-hero → pf-destination-hero, diag → pf-diag, listing-card →
   pf-listing-card, acteur-card → pf-acteur-card, ref-chain → pf-ref-chain...)
   pour rester vérifiables terme à terme contre la source gelée, sans risquer
   de collision avec un plugin ou un bloc tiers portant un nom générique
   (« diag », « listing-card »...).
   ========================================================================= */

.pf-destination h1, .pf-destination h2, .pf-destination h3 { margin: 0; }
.pf-destination-hero h1 { color: var(--pf-color-white); }
.pf-destination-hero .pf-eyebrow { color: var(--pf-color-sky); }

/* Même correctif blockGap que l'Accueil et le Hub, scopé à cette famille de
   pages via le wrapper commun .pf-destination porté par chaque template.
   Bug réel trouvé le 23 août 2026 (mesure DOM, pas relecture du CSS) : sur
   une page normale (contrairement à la page d'accueil), le bloc
   "wp:post-content" insère un wrapper intermédiaire
   (div.entry-content.wp-block-post-content) entre <main> et le contenu réel
   — les sélecteurs `>` directs utilisés initialement ici (comme sur
   l'Accueil/le Hub) ne matchaient donc RIEN sur ces quatre pages,
   contrairement à l'Accueil où ce wrapper n'existe pas. Corrigé en
   descendant (espace) plutôt qu'enfant direct (`>`), qui traverse ce
   wrapper quel qu'il soit. */
.pf-destination .entry-content > * { margin-block-start: 0; }
.wp-site-blocks main.pf-destination,
.wp-site-blocks main.pf-destination + footer.wp-block-template-part {
	margin-block-start: 0;
}

/* Même correctif blockGap, variante pour le gabarit CPT pf_destination
   (Ariège et les départements suivants). Ce template place le bloc
   pf-core/destination-page directement dans <main>, sans wrapper
   .entry-content contrairement aux quatre pages gelées : le bloc rendu émet
   plusieurs <section> comme enfants directs du groupe en layout flow, qui
   reçoivent alors le blockGap WordPress (24px) entre elles — trouvé par
   mesure DOM réelle (marginBlockStart:24px sur le hero, entre le fil
   d'Ariane et le hero), pas par relecture du CSS. Sans effet sur les quatre
   pages gelées, dont le <main> n'a qu'un seul enfant direct (.entry-content). */
main.pf-destination.is-layout-flow > * + * { margin-block-start: 0; }

/* -- Fil d'Ariane ---------------------------------------------------------- */

.pf-dest-breadcrumb-wrap { background: var(--pf-color-mist); }
.pf-dest-breadcrumb {
	padding: 14px var(--pf-container-padding);
	font-family: var(--pf-font-heading); font-weight: 700; font-size: .92rem; letter-spacing: .02em;
	color: var(--pf-color-slate); display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.pf-dest-breadcrumb a { text-decoration: none; }
.pf-dest-breadcrumb a:hover { color: var(--pf-color-accent); }
.pf-dest-breadcrumb span { opacity: .5; }
.pf-dest-breadcrumb [aria-current] { color: var(--pf-color-navy); opacity: 1; }

/* -- Hero territoire — sobre par défaut, variante photo pour le Lot -------- */

/* Sélecteur .pf-destination section.pf-destination-hero (0,2,1), plus
   spécifique que la règle générique ".pf-destination section" (0,1,1,
   définie plus bas) qui lui appliquerait sinon son padding 88px uniforme —
   le hero garde son propre padding, plus haut que large. Descendant
   (espace), pas enfant direct : voir le correctif blockGap ci-dessus sur le
   même wrapper wp:post-content. */
.pf-destination section.pf-destination-hero { background: var(--pf-color-navy); color: var(--pf-color-white); padding: 72px var(--pf-container-padding) 64px; }
.pf-destination-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); max-width: 18ch; }
.pf-dest-hero-lead {
	font-family: var(--pf-font-body); font-weight: 500; font-size: clamp(1.05rem, 1.6vw, 1.2rem);
	max-width: 56ch; margin: 18px 0 0; color: rgba(255, 255, 255, .85);
}
.pf-dest-hero-cta {
	display: inline-flex; align-items: center; gap: 10px; margin-top: 26px;
	font-family: var(--pf-font-heading); font-weight: 800; font-size: 1.02rem; letter-spacing: .03em; text-transform: uppercase;
	color: var(--pf-color-white); border: 2px solid rgba(255, 255, 255, .55); border-radius: var(--pf-radius-pill);
	padding: 13px 26px; transition: background 160ms ease, border-color 160ms ease;
}
.pf-dest-hero-cta:hover { background: rgba(255, 255, 255, .14); border-color: var(--pf-color-white); }
.pf-dest-hero-cta svg { width: 16px; height: 16px; stroke: currentColor; }
.pf-hero-aircraft { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; max-width: 62ch; margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .2); }
.pf-hero-aircraft-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(255, 255, 255, .12); }
.pf-hero-aircraft-icon svg { width: 21px; height: 21px; color: var(--pf-color-sky); }
.pf-hero-aircraft-label { margin: 0 0 4px; color: var(--pf-color-sky); font-family: var(--pf-font-heading); font-weight: 800; font-size: .82rem; letter-spacing: .07em; text-transform: uppercase; }
.pf-hero-aircraft p:not(.pf-hero-aircraft-label) { margin: 0; color: rgba(255, 255, 255, .9); font-family: var(--pf-font-body); line-height: 1.5; }
/* Plusieurs appareils publiés par un même centre : un léger écart sépare chaque item (un seul item, comme à Cahors, n'est pas touché). */
.pf-hero-aircraft p:not(.pf-hero-aircraft-label) + p { margin-top: 10px; }
.pf-hero-aircraft b { color: var(--pf-color-white); }
.pf-hero-aircraft span:not(.pf-hero-aircraft-icon) { color: var(--pf-color-sky); font-weight: 700; white-space: nowrap; }

/* Variante avec photo (Département Lot uniquement) — le fond de marque reste
   le repli honnête tant qu'aucune photo vérifiée n'existe pour un territoire. */
/* Bug réel trouvé (retour de Christophe, 23 août 2026, capture à l'appui) :
   le raccourci "background: var(--pf-color-navy)" de la règle de base du
   hero (.pf-destination section.pf-destination-hero, spécificité 0,2,1)
   réinitialise implicitement TOUTES les sous-propriétés background-*, y
   compris background-size et background-repeat, à leurs valeurs initiales
   (auto / repeat) — et cette règle est plus spécifique que celle-ci
   (.pf-destination-hero.has-photo, 0,2,0), qui perdait donc la bataille sur
   background-size malgré la cascade normale (déclarée après). L'image
   d'arrière-plan (posée en style inline par le pattern, donc toujours
   visible) s'affichait alors à sa taille réelle et se répétait. Corrigé en
   remontant la spécificité au niveau du sélecteur du hero lui-même. */
.pf-destination section.pf-destination-hero.has-photo { background-size: cover; background-repeat: no-repeat; background-position: center 38%; position: relative; }
.pf-destination-hero.has-photo::before {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(100deg, rgba(12, 29, 61, .92) 0%, rgba(12, 29, 61, .72) 42%, rgba(12, 29, 61, .35) 100%);
}
.pf-destination-hero.has-photo > .pf-container { position: relative; z-index: 1; }

/* -- Introduction / réponse immédiate --------------------------------------- */

.pf-dest-answer { max-width: 800px; }
.pf-dest-answer p { font-family: var(--pf-font-body); font-weight: 500; font-size: 1.08rem; color: var(--pf-color-slate); max-width: 70ch; margin: 0 0 16px; }
.pf-dest-answer p:last-child { margin-bottom: 0; }

.pf-dest-answer.has-photo { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: stretch; max-width: none; }
.pf-dest-answer-text-card { background: var(--pf-color-white); border: 1px solid rgba(12, 29, 61, .1); border-radius: var(--pf-radius-lg); padding: 32px; display: flex; flex-direction: column; justify-content: center; }
.pf-dest-editorial-photo { border-radius: var(--pf-radius-lg); overflow: hidden; aspect-ratio: 3 / 2; align-self: center; }
.pf-dest-editorial-photo img { width: 100%; height: 100%; display: block; object-fit: cover; }

/* -- Diagnostic territorial (le chiffre porte l'info, ton constatif) -------- */

.pf-diag {
	display: grid; grid-template-columns: auto 1fr; gap: 34px; align-items: start;
	background: var(--pf-color-white); border: 1px solid rgba(12, 29, 61, .1); border-left: 6px solid var(--pf-color-sky);
	border-radius: var(--pf-radius-lg); padding: 34px 36px; box-shadow: var(--pf-shadow-sm);
}
.pf-diag-count { text-align: center; flex: none; }
.pf-diag-num { font-family: var(--pf-font-heading); font-weight: 900; font-size: clamp(3.4rem, 7vw, 4.8rem); line-height: .86; color: var(--pf-color-navy); display: block; }
.pf-diag-unit { font-family: var(--pf-font-heading); font-weight: 700; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--pf-color-muted); display: block; margin-top: 8px; max-width: 11ch; }
.pf-diag-lead { font-size: 1.18rem !important; color: var(--pf-color-ink) !important; line-height: 1.5; }
.pf-diag-body p { font-family: var(--pf-font-body); font-weight: 500; font-size: 1.04rem; color: var(--pf-color-slate); margin: 0 0 12px; max-width: 64ch; }
.pf-diag-body p:last-of-type { margin-bottom: 0; }
.pf-diag-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(12, 29, 61, .08); font-family: var(--pf-font-heading); font-weight: 700; font-size: .86rem; letter-spacing: .02em; color: var(--pf-color-muted); }
.pf-diag-meta strong { color: var(--pf-color-navy); font-weight: 700; }

/* -- Fiche « annuaire » (zone/acteur, sans photo) ---------------------------- */

.pf-listing-card { background: var(--pf-color-white); border: 1px solid rgba(12, 29, 61, .1); border-radius: var(--pf-radius-lg); padding: 26px; box-shadow: var(--pf-shadow-sm); display: block; transition: box-shadow 150ms ease, transform 150ms ease; }
a.pf-listing-card:hover { box-shadow: var(--pf-shadow-md); transform: translateY(-2px); }
article.pf-listing-card.pf-zone-card:hover { box-shadow: var(--pf-shadow-md); transform: translateY(-2px); }
.pf-listing-head { display: flex; gap: 16px; align-items: flex-start; }
.pf-listing-icon { flex: none; width: 52px; height: 52px; border-radius: 14px; background: var(--pf-color-mist); display: flex; align-items: center; justify-content: center; }
.pf-listing-icon svg { width: 26px; height: 26px; color: var(--pf-color-navy); }
.pf-listing-icon.tone-rose { background: rgba(254, 45, 123, .12); }
.pf-listing-icon.tone-rose svg { color: var(--pf-color-accent-strong); }
.pf-listing-category { font-family: var(--pf-font-heading); font-weight: 700; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--pf-color-muted); margin: 0 0 4px; }
.pf-listing-title { font-size: 1.4rem; color: var(--pf-color-navy); margin: 0 0 8px; }
.pf-listing-address { display: flex; align-items: flex-start; gap: 6px; font-family: var(--pf-font-body); font-weight: 500; font-size: 1rem; line-height: 1.45; color: var(--pf-color-ink); margin: 0; }
.pf-listing-address svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--pf-color-muted); }
.pf-listing-meta { font-family: var(--pf-font-body); font-weight: 600; font-size: .9rem; line-height: 1.4; color: var(--pf-color-slate); margin: 8px 0 0; }
.pf-listing-divider { border-top: 1px solid rgba(12, 29, 61, .08); margin: 20px 0 18px; }
/* pages.css styles photo cards too; keep that legacy padding off the compact
   annuaire card header and its one-pixel divider. */
.pf-listing-card.pf-zone-card > .pf-listing-head,
.pf-listing-card.pf-zone-card > .pf-listing-divider { padding: 0; }
.pf-listing-card.pf-zone-card .pf-listing-title a { color: var(--pf-color-navy); text-decoration: none; }
.pf-listing-card.pf-zone-card .pf-listing-acteurs a { color: var(--pf-color-navy); text-decoration: none; }
.pf-listing-card .pf-listing-link { font-family: var(--pf-font-heading); font-weight: 700; font-size: 1rem; text-transform: none; color: var(--pf-color-accent-strong); display: inline-block; margin-top: 16px; text-decoration: none; }
a.pf-listing-card:hover .pf-listing-title { color: var(--pf-color-accent-strong); }
a.pf-listing-card:hover .pf-listing-link { color: var(--pf-color-accent); text-decoration: underline; text-underline-offset: 3px; }
article.pf-listing-card.pf-zone-card:hover .pf-listing-title a { color: var(--pf-color-accent-strong); }
article.pf-listing-card.pf-zone-card:hover .pf-listing-link { color: var(--pf-color-accent); text-decoration: underline; text-underline-offset: 3px; }
.pf-listing-status { display: inline-block; font-family: var(--pf-font-heading); font-weight: 700; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--pf-color-navy); background: var(--pf-color-mist); padding: 4px 10px; border-radius: var(--pf-radius-pill); margin: 14px 0 0; }
.pf-listing-acteurs { font-family: var(--pf-font-body); font-weight: 500; font-size: 1rem; line-height: 1.5; color: var(--pf-color-slate); margin: 10px 0 0; }
.pf-listing-acteurs strong { color: var(--pf-color-navy); font-weight: 600; }

/* Les distances des propositions limitrophes sont des repères pratiques :
   elles restent en badge, mais dans une police et une casse lisibles. */
.pf-territory-fallback .pf-listing-status,
.pf-region-missing-departments .pf-listing-status {
	font-family: var(--pf-font-body); font-size: .9rem; letter-spacing: .01em;
	line-height: 1.35; text-transform: none; padding: 6px 12px;
}
.pf-territory-fallback .pf-listing-link,
.pf-region-missing-departments .pf-listing-link {
	margin-top: 0; margin-left: 12px; vertical-align: middle;
}

/* -- Fiche acteur/zone neutre (dl de champs factuels) ------------------------ */

.pf-acteur-card { background: var(--pf-color-white); border: 1px solid rgba(12, 29, 61, .1); border-radius: var(--pf-radius-lg); padding: 28px 26px; box-shadow: var(--pf-shadow-sm); }
.pf-acteur-badge { display: inline-block; background: var(--pf-color-mist); color: var(--pf-color-navy); font-family: var(--pf-font-heading); font-weight: 800; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--pf-radius-pill); margin-bottom: 14px; }
.pf-acteur-card h3 { font-size: 1.3rem; margin-bottom: 18px; }
.pf-acteur-summary { font-family: var(--pf-font-body); font-weight: 500; font-size: 1rem; line-height: 1.5; color: var(--pf-color-slate); margin: 0 0 18px; }
.pf-acteur-fields { display: grid; gap: 12px; margin: 0; }
.pf-acteur-fields > div { display: grid; grid-template-columns: 130px 1fr; gap: 10px; font-size: .96rem; }
.pf-acteur-fields dt { font-family: var(--pf-font-heading); font-weight: 700; letter-spacing: .02em; color: var(--pf-color-muted); }
.pf-acteur-fields dd { margin: 0; color: var(--pf-color-ink); }
.pf-acteur-note { font-family: var(--pf-font-body); font-weight: 500; font-size: .9rem; color: var(--pf-color-muted); margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(12, 29, 61, .08); }
.pf-acteur-link { font-family: var(--pf-font-heading); font-weight: 700; font-size: .94rem; text-transform: uppercase; color: var(--pf-color-accent-strong); display: inline-block; margin-top: 16px; text-decoration: none; }
.pf-acteur-link:hover { color: var(--pf-color-accent); }

.pf-dest-referentiel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }

/* -- Variante Zone multi-structures (DECISIONS.md §17, 27 août 2026) --------
   La carte Zone reste seule, pleine largeur, au-dessus (.pf-acteur-card
   ordinaire, sans grille). Les fiches acteur se déploient dans CETTE grille,
   seule classe nouvelle de la variante : même motif à deux colonnes que
   .pf-dest-referentiel-grid, mais sans jamais partager sa ligne avec la
   carte Zone — valable de 2 à 7+ acteurs, aucun traitement spécial par
   palier de densité. Seuil de bascule propre à cette grille (780px, dans sa
   media query plus bas) : le prototype pf-mvp-zone-saint-girons-antichan.html
   bascule à 780px, pas à 1024px comme .pf-dest-referentiel-grid — vérifié
   par mesure indépendante à 1440/800/375px après un premier écart trouvé le
   27 août (grille encore à 1 colonne à 800px, alors que le prototype est à
   2). Ne pas aligner ce seuil sur celui des autres grilles Destination. */
.pf-acteurs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 22px; }

/* -- Cartes-guide (mêmes classes que la famille Destination dans les quatre
   MVP gelés) ---------------------------------------------------------- */

.pf-guides-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.pf-guide-card { display: block; background: var(--pf-color-white); border-radius: var(--pf-radius-lg); padding: 28px 24px; box-shadow: var(--pf-shadow-sm); border-top: 5px solid var(--pf-color-sky); transition: transform 180ms ease, box-shadow 180ms ease; }
.pf-guide-card.tone-rose { border-top-color: var(--pf-color-accent); }
a.pf-guide-card:hover { transform: translateY(-4px); box-shadow: var(--pf-shadow-md); }
.pf-guide-card h3 { font-size: 1.35rem; color: var(--pf-color-navy); margin-bottom: 10px; }
.pf-guide-card p { font-family: var(--pf-font-body); font-size: 1.02rem; color: var(--pf-color-slate); margin: 0 0 14px; }
.pf-guide-card.is-soon { cursor: default; }
@media (max-width: 1024px) { .pf-guides-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .pf-guides-grid { grid-template-columns: 1fr; } }

/* -- Page Centre : « Sur place » / « À proximité » (pilote CEPS Ariège,
   16 septembre 2026). Réutilise l'icône ronde déjà validée sur
   .pf-listing-icon, à une échelle plus discrète pour une liste de faits. -- */

.pf-practical-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
.pf-access-grid { max-width: 760px; }
.pf-practical-grid--split { grid-template-columns: 1fr 1fr; }
.pf-practical-panel { background: var(--pf-color-white); border: 1px solid rgba(12, 29, 61, .1); border-radius: var(--pf-radius-lg); padding: 28px 26px; box-shadow: var(--pf-shadow-sm); }
.pf-practical-panel h3 { font-family: var(--pf-font-heading); font-weight: 800; font-size: 1.5rem; color: var(--pf-color-navy); margin: 0 0 18px; }
.pf-practical-item { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(12, 29, 61, .08); }
.pf-practical-item:first-child { border-top: 0; padding-top: 0; }
.pf-practical-icon { flex: none; width: 42px; height: 42px; border-radius: 14px; background: linear-gradient(145deg, #f5faff, #e2f0f8); border: 1px solid rgba(12, 29, 61, .08); display: flex; align-items: center; justify-content: center; }
.pf-practical-icon svg { width: 23px; height: 23px; color: var(--pf-color-navy); }
.pf-practical-item b { display: block; font-family: var(--pf-font-body); font-weight: 700; font-size: 1rem; color: var(--pf-color-navy); margin-bottom: 4px; }
.pf-practical-item p { margin: 0; font-family: var(--pf-font-body); font-size: 1.05rem; line-height: 1.55; color: var(--pf-color-slate); }
.pf-practical-distance { color: var(--pf-color-muted); font-weight: 600; }
@media (max-width: 700px) { .pf-practical-grid--split { grid-template-columns: 1fr; } }

/* -- Regroupement par département (Région uniquement) ------------------------ */

.pf-dept-group { margin-bottom: 56px; }
.pf-dept-group:last-child { margin-bottom: 0; }
.pf-dept-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.pf-dept-head h3 { font-size: 1.5rem; color: var(--pf-color-navy); }
.pf-dept-head h3 a { text-decoration: none; }
.pf-dept-head h3 a:hover { color: var(--pf-color-accent); }
.pf-dept-count { font-family: var(--pf-font-heading); font-weight: 700; font-size: .9rem; letter-spacing: .04em; text-transform: uppercase; color: var(--pf-color-muted); }
.pf-zone-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; align-items: stretch; }
.pf-zone-grid.is-single { grid-template-columns: 1fr; max-width: 620px; }
.pf-dept-empty { background: var(--pf-color-white); border: 1px dashed rgba(12, 29, 61, .2); border-radius: var(--pf-radius-lg); padding: 24px 26px; }
.pf-dept-empty p { font-family: var(--pf-font-body); font-weight: 500; font-size: 1rem; color: var(--pf-color-slate); margin: 0; }

/* -- Chaîne Destination → Zone → Acteur (Département uniquement) ------------ */

.pf-ref-chain { display: grid; gap: 0; }
.pf-ref-step { display: grid; grid-template-columns: 132px 1fr; gap: 26px; align-items: start; }
.pf-ref-rail { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding-top: 4px; }
.pf-ref-level { font-family: var(--pf-font-heading); font-weight: 800; font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--pf-color-muted); }
.pf-ref-step.is-current .pf-ref-level { color: var(--pf-color-accent-strong); }
.pf-ref-rail::before { content: ""; position: absolute; left: -19px; top: 9px; width: 11px; height: 11px; border-radius: 50%; background: var(--pf-color-mist); border: 2px solid #b9c6d6; }
.pf-ref-step.is-current .pf-ref-rail::before { background: var(--pf-color-accent); border-color: var(--pf-color-accent); }
.pf-ref-chain-inner { border-left: 2px solid rgba(12, 29, 61, .12); padding-left: 20px; display: grid; gap: 26px; }
.pf-ref-note { font-family: var(--pf-font-body); font-weight: 500; font-size: .98rem; color: var(--pf-color-slate); margin: 6px 0 0; max-width: 60ch; }
.pf-ref-current-label { background: var(--pf-color-mist); border-radius: var(--pf-radius-lg); padding: 18px 22px; }
.pf-ref-current-label h3 { font-size: 1.15rem; color: var(--pf-color-navy); margin: 0 0 4px; }
.pf-ref-current-label p { font-family: var(--pf-font-body); font-weight: 500; font-size: .96rem; color: var(--pf-color-slate); margin: 0; }

/* -- FAQ ---------------------------------------------------------------- */

.pf-faq-list { display: grid; gap: 0; max-width: 860px; border-top: 1px solid rgba(12, 29, 61, .12); }
.pf-faq-item { border-bottom: 1px solid rgba(12, 29, 61, .12); padding: 26px 0; }
.pf-faq-item h3 { font-size: clamp(1.1rem, 2vw, 1.32rem); color: var(--pf-color-navy); margin: 0 0 10px; }
.pf-faq-item p { font-family: var(--pf-font-body); font-weight: 500; font-size: 1.04rem; color: var(--pf-color-slate); margin: 0; max-width: 70ch; }

/* -- Sections et badges génériques de la famille ----------------------------- */

.pf-destination section { padding: 88px var(--pf-container-padding); }
.pf-destination section > .pf-container { padding-inline: 0; }
.pf-destination-section--mist { background: var(--pf-color-mist); }
.pf-dest-section-head { margin-bottom: 44px; }
.pf-destination section.pf-actor-section--compact { padding-block: 64px; }
.pf-actor-section--compact .pf-dest-section-head { margin-bottom: 30px; }
.pf-dest-section-head h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); max-width: 16ch; margin: 0; }
.pf-dest-eyebrow--accent { color: var(--pf-color-accent); }
.pf-dest-heading--navy { color: var(--pf-color-navy); margin: 0; }
.pf-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;
}
.pf-soon-tag { display: inline-block; font-family: var(--pf-font-heading); font-weight: 800; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--pf-color-muted); background: var(--pf-color-mist); border-radius: var(--pf-radius-pill); padding: 2px 8px; margin-left: 7px; vertical-align: middle; }
.pf-guides-soon-note { font-family: var(--pf-font-body); font-weight: 500; font-size: .95rem; color: var(--pf-color-muted); margin: 18px 0 0; }
.pf-dest-guides-grid { grid-template-columns: repeat(2, 1fr); max-width: 880px; }
.pf-region-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pf-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;
}
.pf-region-pill:hover { background: var(--pf-color-navy); border-color: var(--pf-color-navy); color: #fff; }
.pf-region-pill.is-soon { background: transparent; border-style: dashed; color: var(--pf-color-muted); cursor: default; }
.pf-region-pill.is-soon:hover { background: transparent; color: var(--pf-color-muted); }

/* -- Composition rail — même composant que le Hub/l'Accueil pour les blocs
   de fin de page comparables (guides, maillage). -------------------------- */

.pf-compo { display: grid; gap: var(--pf-space-xl); align-items: start; }
.pf-compo--rail { grid-template-columns: 260px minmax(0, 1fr); }
.pf-compo-rail-col { min-width: 0; }
.pf-compo-rail-col .pf-eyebrow { margin: 0 0 12px; }
.pf-compo-rail-col h2 { margin: 0; max-width: none; font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.06; }
.pf-compo-prose { min-width: 0; }
.pf-compo-prose > p { max-width: 31rem; }
.pf-compo--rail > .pf-region-pills { align-content: start; }

@media (max-width: 1024px) {
	.pf-dest-referentiel-grid { grid-template-columns: 1fr; }
	.pf-zone-grid { grid-template-columns: 1fr; }
	.pf-dest-guides-grid { grid-template-columns: 1fr; }
	.pf-destination section.pf-destination-hero.has-photo { background-position: 62% 42%; }
}
@media (max-width: 980px) {
	.pf-diag { grid-template-columns: 1fr; gap: 20px; padding: 28px 26px; }
	.pf-diag-count { text-align: left; display: flex; align-items: baseline; gap: 14px; }
	.pf-diag-unit { margin-top: 0; max-width: none; }
}
@media (max-width: 860px) {
	.pf-compo--rail { grid-template-columns: 1fr; gap: 20px; }
	.pf-compo-rail-col h2 { font-size: clamp(1.6rem, 5vw, 2rem); }
	.pf-dest-answer.has-photo { grid-template-columns: 1fr; }
	.pf-dest-editorial-photo img { min-height: 220px; }
}
@media (max-width: 780px) {
	.pf-dest-hero-cta { width: 100%; justify-content: center; }
	.pf-dest-breadcrumb { padding-top: 6px; padding-bottom: 6px; gap: 4px; }
	.pf-dest-breadcrumb a, .pf-dest-breadcrumb > span { display: inline-flex; align-items: center; min-height: 40px; }
	.pf-faq-item { padding: 22px 0; }
	.pf-ref-step { grid-template-columns: 1fr; gap: 10px; }
	.pf-ref-chain-inner { padding-left: 16px; }
	.pf-ref-rail::before { left: -22px; }
	.pf-destination-section { padding-top: 60px; padding-bottom: 60px; }
	.pf-acteurs-grid { grid-template-columns: 1fr; }
}

/* Sous-titres internes d'une section de prose longue : la fiche
   encyclopédique est le premier modèle assez long pour en avoir besoin.
   Scopé à .pf-compo-prose h3 — aucune page déjà validée n'en contient. */
.pf-compo-prose h3 { font-size: 1.18rem; color: var(--pf-color-navy); margin: 30px 0 10px; }
.pf-compo-prose > :first-child { margin-top: 0; }
.pf-compo-prose ul { max-width: 31rem; color: var(--pf-color-slate); font-family: var(--pf-font-body); font-weight: 500; line-height: 1.55; }
.pf-compo-prose ul li { margin-bottom: 8px; }

/* Note de sources en fin de page éditoriale : détachée du bloc de maillage
   qui la précède, sinon elle vient se coller sous le titre « Continuer ».
   Même traitement discret que .pf-acteur-note, déjà validé. */
.pf-source-note {
	margin: 44px 0 0; padding-top: 20px; border-top: 1px solid rgba(12, 29, 61, .12);
	font-family: var(--pf-font-body); font-weight: 500; font-size: .92rem; line-height: 1.5;
	color: var(--pf-color-muted); max-width: 78ch;
}
.pf-source-note a { color: var(--pf-color-accent-strong); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pf-source-note a:hover { color: var(--pf-color-accent); }

@media (max-width: 700px) {
	.pf-territory-fallback .pf-listing-link,
	.pf-region-missing-departments .pf-listing-link { display: block; margin: 12px 0 0; }

}

/* Zone : fond blanc, identifié par le bleu ciel déjà employé dans la charte. */
.pf-listing-card.pf-zone-card,
.pf-acteur-card.pf-zone-card {
	background: var(--pf-color-white);
	border: 2px solid var(--pf-color-sky);
}

.pf-region-missing-departments { margin-top: 48px; padding-top: 36px; border-top: 1px solid rgba(12, 29, 61, .12); }
.pf-region-missing-departments .pf-dest-section-head { margin-bottom: 24px; }
.pf-region-missing-department + .pf-region-missing-department { margin-top: 36px; padding-top: 32px; border-top: 1px solid rgba(12, 29, 61, .12); }
.pf-region-missing-department .pf-dept-head { margin-bottom: 10px; }
.pf-region-missing-copy { max-width: 76ch; margin: 0 0 20px; color: var(--pf-color-muted); line-height: 1.55; }

/* Le lieu d'un centre unique reste une colonne lisible sur ordinateur. */
.pf-location-card { width: 100%; max-width: 800px; }

/* -- Parcours réglementaire (Guide/Dossier long) -----------------------------
   Ajouté le 17 septembre 2026 pour le guide-pilier « Devenir parachutiste
   professionnel » : une séquence d'étapes réglementées (aptitude, examens,
   titres, qualifications) lue comme un enchaînement numéroté et aéré plutôt
   qu'une liste ordonnée nue. Composant générique de la famille Guide/Dossier
   (classes pf-parcours*, DOM produit par tools/lib/guide-parcours.php),
   réutilisable par tout Guide, jamais lié à une URL ou à un slug.

   Construit avec le seul vocabulaire déjà validé dans cette feuille : filet
   vertical et pastille, tuile arrondie de .pf-practical-icon
   (même dégradé, même filet), catégorie capitale de .pf-listing-category,
   liens soulignés de .pf-source-note. Aucun jeton nouveau, aucune couleur en
   dur hors des rgba(navy) et du dégradé déjà employés ici, aucune image : les
   glyphes sont les Phosphor Duotone déjà embarqués (.pf-phosphor-duotone),
   purement décoratifs (aria-hidden) ; la sémantique reste celle d'une liste
   ordonnée d'étapes titrées, chaque lien étant un <a> ordinaire. */

.pf-parcours { display: grid; gap: 0; margin: 26px 0 0; padding: 0; list-style: none; max-width: 42rem; }
.pf-parcours-step { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; padding: 0 0 34px; position: relative; }
.pf-parcours-step::before { content: ""; position: absolute; left: 23px; top: 54px; bottom: 6px; width: 2px; background: rgba(12, 29, 61, .12); }
.pf-parcours-step:last-child { padding-bottom: 0; }
.pf-parcours-step:last-child::before { display: none; }
.pf-parcours-marker { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(145deg, #f5faff, #e2f0f8); border: 1px solid rgba(12, 29, 61, .08); display: flex; align-items: center; justify-content: center; }
.pf-parcours-num { font-family: var(--pf-font-heading); font-weight: 800; font-size: 1.35rem; line-height: 1; color: var(--pf-color-navy); }
.pf-parcours-body { min-width: 0; padding-top: 7px; }
.pf-parcours-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-family: var(--pf-font-heading); font-weight: 700; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--pf-color-muted); }
.pf-parcours-kicker .pf-phosphor-duotone { width: 20px; height: 20px; flex: none; color: var(--pf-color-sky-deep); }
.pf-parcours-body .pf-parcours-title { margin: 0 0 8px; font-size: 1.22rem; line-height: 1.2; color: var(--pf-color-navy); }
.pf-parcours-body p { max-width: 34rem; margin: 0 0 10px; font-family: var(--pf-font-body); font-weight: 500; font-size: 1.02rem; line-height: 1.55; color: var(--pf-color-slate); }
.pf-parcours-body p:last-child { margin-bottom: 0; }
.pf-parcours-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pf-parcours-link { font-family: var(--pf-font-body); font-weight: 700; font-size: .95rem; color: var(--pf-color-accent-strong); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pf-parcours-link:hover { color: var(--pf-color-accent); }
.pf-parcours-link:focus-visible { outline: 2px solid var(--pf-color-accent-strong); outline-offset: 3px; border-radius: 3px; }

@media (max-width: 700px) {
	.pf-parcours-step { grid-template-columns: 38px minmax(0, 1fr); gap: 14px; padding-bottom: 28px; }
	.pf-parcours-step::before { left: 18px; top: 44px; }
	.pf-parcours-marker { width: 38px; height: 38px; border-radius: 11px; }
	.pf-parcours-num { font-size: 1.1rem; }
	.pf-parcours-body { padding-top: 4px; }
}

/* Hub Guides : bibliothèque éditoriale commune, jamais une feuille par page. */
.pf-guides-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--pf-color-navy); color: var(--pf-color-white); }
.pf-guides-hero-background, .pf-guides-hero-scrim { position: absolute; inset: 0; }
.pf-guides-hero-background { z-index: -2; }
.pf-guides-hero-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.pf-guides-hero-scrim { z-index: -1; background: linear-gradient(90deg, rgba(12, 29, 61, .98) 0%, rgba(12, 29, 61, .92) 34%, rgba(12, 29, 61, .46) 59%, rgba(12, 29, 61, .08) 82%); }
.pf-guides-hero-inner { display: flex; align-items: stretch; min-height: 490px; }
.pf-guides-hero-copy { display: flex; flex-direction: column; justify-content: center; width: min(100%, 680px); padding: 78px 0; }
.pf-guides-hero .pf-eyebrow { color: var(--pf-color-sky); }
.pf-guides-hero h1 { max-width: 12ch; margin: 0; color: var(--pf-color-white); font-size: clamp(3rem, 5.6vw, 5.9rem); line-height: .91; }
.pf-guides-hero-lead { max-width: 58ch; margin: 28px 0 0; font-family: var(--pf-font-body); font-size: 1.08rem; font-weight: 500; line-height: 1.62; color: rgba(255, 255, 255, .88); }
.pf-guides-hero-note { margin: 22px 0 0; font-family: var(--pf-font-heading); font-size: .76rem; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; color: var(--pf-color-sky); }
.pf-guides-section { padding: 88px 0; }
.pf-guides-section--mist { background: #f5f8fb; }
.pf-guides-section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 360px); gap: 32px; align-items: end; margin-bottom: 34px; }
.pf-guides-section-head h2 { margin: 0; color: var(--pf-color-navy); font-size: clamp(2rem, 3.3vw, 3.45rem); line-height: .98; }
.pf-guides-section-head > p { margin: 0 0 4px; font-family: var(--pf-font-body); font-size: 1rem; font-weight: 500; line-height: 1.55; color: var(--pf-color-muted); }
.pf-guides-profiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.pf-guides-profile { min-height: 158px; padding: 23px 20px; border: 1px solid rgba(12, 29, 61, .13); border-radius: 16px; background: var(--pf-color-white); color: var(--pf-color-navy); text-decoration: none; box-shadow: 0 1px 2px rgba(12, 29, 61, .04); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.pf-guides-profile:not(.is-pending):hover { transform: translateY(-4px); border-color: var(--pf-color-sky-deep); box-shadow: 0 12px 26px rgba(12, 29, 61, .1); }
.pf-guides-profile:focus-visible, .pf-guides-featured-card a:focus-visible, .pf-guides-domain:focus-visible, .pf-guides-library-card a:focus-visible { outline: 3px solid var(--pf-color-accent-strong); outline-offset: 4px; }
.pf-guides-profile-title, .pf-guides-profile-text, .pf-guides-profile-state { display: block; }
.pf-guides-profile-title { margin-bottom: 12px; font-family: var(--pf-font-heading); font-size: 1.3rem; font-weight: 800; line-height: 1; }
.pf-guides-profile-text { font-family: var(--pf-font-body); font-size: .95rem; font-weight: 500; line-height: 1.42; color: var(--pf-color-slate); }
.pf-guides-profile.is-pending { background: #f8fafc; opacity: .82; }
.pf-guides-profile-state { margin-top: 15px; font-family: var(--pf-font-heading); font-size: .72rem; font-weight: 700; letter-spacing: .065em; text-transform: uppercase; color: var(--pf-color-muted); }
.pf-guides-featured-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.pf-guides-featured-card { overflow: hidden; border: 1px solid rgba(12, 29, 61, .11); border-radius: 16px; background: var(--pf-color-white); box-shadow: 0 2px 4px rgba(12, 29, 61, .04); }
.pf-guides-featured-card > a, .pf-guides-featured-card > div { display: block; height: 100%; color: inherit; text-decoration: none; }
.pf-guides-featured-card > a { transition: box-shadow .18s ease; }
.pf-guides-featured-card > a:hover { box-shadow: inset 0 -4px 0 var(--pf-color-accent-strong); }
.pf-guides-featured-image { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #dce7ef; }
.pf-guides-featured-copy { padding: 21px 20px 23px; }
.pf-guides-card-kicker, .pf-guides-domain-kicker { margin: 0 0 10px; font-family: var(--pf-font-heading); font-size: .73rem; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; color: var(--pf-color-accent-strong); }
.pf-guides-featured-copy h3, .pf-guides-domain h3 { margin: 0; color: var(--pf-color-navy); font-size: 1.36rem; line-height: 1.02; }
.pf-guides-featured-copy h3 + p, .pf-guides-domain h3 + p { margin: 12px 0 0; font-family: var(--pf-font-body); font-size: .96rem; font-weight: 500; line-height: 1.48; color: var(--pf-color-slate); }
.pf-guides-visual-note { margin: 23px 0 0; font-family: var(--pf-font-body); font-size: .84rem; font-style: italic; color: var(--pf-color-muted); }
.pf-guides-domains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pf-guides-domain { min-height: 205px; padding: 28px; border: 1px solid rgba(12, 29, 61, .12); border-radius: 15px; color: inherit; text-decoration: none; transition: background .18s ease, transform .18s ease; }
.pf-guides-domain:not(.is-pending):hover { background: #f4faff; transform: translateY(-3px); }
.pf-guides-domain.is-pending { background: #f8fafc; }
.pf-guides-domain-state { display: block; margin-top: 18px; font-family: var(--pf-font-heading); font-size: .72rem; font-weight: 700; letter-spacing: .065em; text-transform: uppercase; color: var(--pf-color-muted); }
.pf-guides-library-card { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(250px, .85fr); gap: clamp(32px, 6vw, 92px); align-items: center; padding: clamp(36px, 5vw, 68px); border: 1px solid rgba(12, 29, 61, .09); border-radius: 18px; background: var(--pf-color-white); box-shadow: 0 7px 20px rgba(12, 29, 61, .07); }
.pf-guides-library-card h2 { max-width: 17ch; margin: 0; color: var(--pf-color-navy); font-size: clamp(1.9rem, 3vw, 3rem); line-height: .98; }
.pf-guides-library-card > div > p:not(.pf-eyebrow) { max-width: 48ch; margin: 18px 0 0; font-family: var(--pf-font-body); font-size: 1rem; font-weight: 500; line-height: 1.55; color: var(--pf-color-slate); }
.pf-guides-glossary-state { font-family: var(--pf-font-heading) !important; font-size: .76rem !important; font-weight: 800 !important; letter-spacing: .07em; text-transform: uppercase; color: var(--pf-color-sky-deep) !important; }
.pf-guides-library-card-side { padding-left: clamp(0px, 4vw, 56px); border-left: 1px solid rgba(12, 29, 61, .13); }
.pf-guides-library-links { display: flex; flex-wrap: wrap; gap: 12px 23px; }
.pf-guides-library-card a { color: var(--pf-color-accent-strong); font-family: var(--pf-font-body); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

@media (max-width: 1024px) {
	.pf-guides-profiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.pf-guides-featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
	.pf-guides-section-head, .pf-guides-library-card { grid-template-columns: 1fr; }
	.pf-guides-hero-inner { min-height: 460px; }
	.pf-guides-hero-copy { padding: 58px 0; }
	.pf-guides-hero-image { object-position: 68% center; }
	.pf-guides-hero-scrim { background: linear-gradient(90deg, rgba(12, 29, 61, .96) 0%, rgba(12, 29, 61, .83) 62%, rgba(12, 29, 61, .42) 100%); }
	.pf-guides-section { padding: 62px 0; }
	.pf-guides-section-head { gap: 18px; margin-bottom: 27px; }
	.pf-guides-profiles, .pf-guides-featured-grid, .pf-guides-domains { grid-template-columns: 1fr; }
	.pf-guides-profile { min-height: 0; }
	.pf-guides-domain { min-height: 0; }
	.pf-guides-library-card { gap: 26px; padding: 36px 28px; }
	.pf-guides-library-card-side { padding: 26px 0 0; border-top: 1px solid rgba(12, 29, 61, .13); border-left: 0; }
}

/* -- Formulaires Fluent Forms des pages Contact et « Projet de saut » (27 septembre 2026, repris).
   Une carte blanche délimite le formulaire ; à l'intérieur, la hiérarchie suit le site : intertitres
   Barlow Condensed, libellés en gras, champs arrondis, boutons du shell (.pf-button). Portée limitée
   par la classe de corps .pf-page--form (functions.php). Les variables --fluentform-* sont celles
   que la feuille de l'extension consomme. Le parcours à étapes (pf-form-steps.js) n'existe que sur
   « Projet de saut » ; sans JavaScript, ses étapes restent empilées dans la même carte. ------ */
.pf-page--form .fluentform {
	--fluentform-primary: var(--pf-color-sky-deep);
	--fluentform-secondary: var(--pf-color-slate);
	--fluentform-danger: var(--pf-color-accent-deep);
	--fluentform-border-color: #cbd8e5;
	--fluentform-border-radius: 14px;
	max-width: 720px; margin-top: 32px; padding: clamp(24px, 4vw, 44px);
	background: var(--pf-color-white); border: 1px solid rgba(12, 29, 61, .12); border-radius: var(--pf-radius-lg);
	box-shadow: 0 18px 40px -28px rgba(12, 29, 61, .45); font-family: var(--pf-font-body);
}
.pf-page--form .fluentform .ff-el-group { margin-bottom: 36px; }
.pf-page--form .fluentform .ff-el-input--label { margin-bottom: 8px; }
.pf-page--form .fluentform .ff-el-input--label label { font-weight: 700; color: var(--pf-color-ink); line-height: 1.4; }
.pf-page--form .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after { color: var(--pf-color-accent-deep); }
.pf-page--form .fluentform .ff-el-form-control {
	min-height: 52px; padding: 12px 16px; border: 1px solid #cbd8e5; border-radius: 14px;
	background-color: var(--pf-color-offwhite); color: var(--pf-color-ink);
	font-family: var(--pf-font-body); font-size: inherit; font-weight: inherit; line-height: 1.5; box-shadow: none;
	transition: border-color 150ms ease, background-color 150ms ease;
}
.pf-page--form .fluentform .ff-el-form-control:hover { border-color: #9fb3c8; }
.pf-page--form .fluentform textarea.ff-el-form-control { min-height: 140px; resize: vertical; }
.pf-page--form .fluentform select.ff-el-form-control {
	appearance: none; -webkit-appearance: none; padding-right: 48px; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230C1D3D' stroke-width='2'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 20px center;
}
.pf-page--form .fluentform .ff-el-form-control::placeholder { color: var(--pf-color-muted); }
.pf-page--form .fluentform .ff-el-form-control:focus { border-color: var(--pf-color-sky-deep); background-color: var(--pf-color-white); }
.pf-page--form .fluentform .ff-el-form-control:focus-visible { outline: 3px solid rgba(30, 155, 224, .35); outline-offset: 1px; }
.pf-page--form .fluentform .ff-el-help-message { margin-top: 8px; font-size: .9375rem; font-style: normal; color: var(--pf-color-slate); }
/* Cases à cocher : cible d'au moins 44 px, présentées en grille sur deux colonnes quand la place le permet. */
.pf-page--form .fluentform .ff-el-form-check { margin: 0; }
.pf-page--form .fluentform .ff-el-form-check label.ff-el-form-check-label {
	display: flex; align-items: center; gap: 12px; min-height: 48px; margin: 0; padding: 0 14px;
	border: 1px solid #cbd8e5; border-radius: 14px; background: var(--pf-color-offwhite);
	font-weight: 500; color: var(--pf-color-ink); cursor: pointer;
}
.pf-page--form .fluentform .ff-el-form-check label.ff-el-form-check-label:has(input:checked) { border-color: var(--pf-color-navy); background: var(--pf-color-white); box-shadow: inset 0 0 0 1px var(--pf-color-navy); }
.pf-page--form .fluentform .ff-el-input--content:has(> .ff-el-form-check) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pf-page--form .fluentform .ff-el-form-check-input { width: 20px; height: 20px; margin: 0; top: 0; flex: none; accent-color: var(--pf-color-navy); }
.pf-page--form .fluentform .ff-el-form-check-input:focus-visible { outline: 3px solid rgba(30, 155, 224, .35); outline-offset: 2px; }
/* Intertitres et textes insérés dans le formulaire. */
.pf-page--form .fluentform .ff-custom_html h3 {
	margin: 0 0 10px; padding-top: 32px; border-top: 1px solid rgba(12, 29, 61, .12);
	font-family: var(--pf-font-heading); font-weight: 700; font-size: 1.75rem; line-height: 1.15; color: var(--pf-color-navy);
}
.pf-page--form .fluentform .ff-custom_html:first-of-type h3,
.pf-page--form .fluentform .pf-form-step .ff-custom_html h3 { padding-top: 0; border-top: 0; }
.pf-page--form .fluentform .pf-form-step-title:focus { outline: none; }
.pf-page--form .fluentform .ff-custom_html p { margin: 8px 0 0; color: var(--pf-color-slate); line-height: 1.6; }
.pf-page--form .fluentform .ff-custom_html a { color: var(--pf-color-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pf-page--form .fluentform .ff-custom_html a:hover { color: var(--pf-color-accent-deep); }
/* Information sur les données, juste avant l'envoi : encadré discret. */
.pf-page--form .fluentform .ff-custom_html:has(a[href*="confidentialite"]) {
	padding: 16px 20px; border-radius: 14px; background: var(--pf-color-mist); font-size: .9375rem;
}
.pf-page--form .fluentform .ff-custom_html:has(a[href*="confidentialite"]) p { margin: 0; color: var(--pf-color-ink); }
/* Bouton d'envoi : reprise de .pf-button.pf-button--primary (components.css). */
.pf-page--form .fluentform .ff-btn-submit.ff_btn_style {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 12px 28px; border: 2px solid transparent; border-radius: var(--pf-radius-pill);
	background: var(--pf-color-accent); color: var(--pf-color-white); box-shadow: var(--pf-shadow-sm);
	font-family: var(--pf-font-heading); font-weight: 800; font-size: 1.25rem; line-height: 1;
	opacity: 1; transition: background-color 150ms ease, transform 150ms ease;
}
.pf-page--form .fluentform .ff-btn-submit.ff_btn_style:hover { background: var(--pf-color-accent-strong); color: var(--pf-color-white); opacity: 1; transform: translateY(-2px); }
.pf-page--form .fluentform .ff-btn-submit.ff_btn_style:focus-visible { outline: 2px solid var(--pf-color-accent-strong); outline-offset: 2px; opacity: 1; }
.pf-page--form .fluentform .ff-btn-submit.ff_btn_style:disabled { opacity: .6; cursor: progress; transform: none; }
.pf-page--form .fluentform .ff_submit_btn_wrapper { margin: 8px 0 0; }
/* Erreurs : le message se loge dans la marge réservée sous le champ, sans déplacer le bouton d'envoi. */
.pf-page--form .fluentform .ff-el-input--content { position: relative; }
.pf-page--form .fluentform .ff-el-is-error .ff-el-form-control { border-color: var(--pf-color-accent-deep); box-shadow: inset 0 0 0 1px var(--pf-color-accent-deep); background-color: var(--pf-color-white); }
.pf-page--form .fluentform .ff-el-input--content > .error.text-danger {
	position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px;
	font-size: .875rem; line-height: 1.3; font-weight: 700; color: var(--pf-color-accent-deep);
}
.pf-page--form .fluentform .error.text-danger { font-size: .875rem; font-weight: 700; color: var(--pf-color-accent-deep); }
/* Confirmation : même bandeau que .pf-form-banner--ok, à la place de la carte. */
.pf-page--form .ff-message-success {
	max-width: 720px; margin-top: 32px; padding: 24px 28px; border: 0; border-left: 4px solid var(--pf-color-sky-deep);
	border-radius: var(--pf-radius-lg); box-shadow: none;
	background: rgba(30, 155, 224, .12); color: var(--pf-color-navy); font-weight: 700; line-height: 1.5;
}
.pf-page--form .ff-errors-in-stack { max-width: 720px; color: var(--pf-color-accent-deep); font-weight: 700; }

/* Parcours à étapes (« Projet de saut ») : progression, étape visible, navigation. */
.pf-page--form .pf-form-progress { margin: 0 0 32px; padding-bottom: 24px; border-bottom: 1px solid rgba(12, 29, 61, .12); scroll-margin-top: 120px; }
.pf-page--form .pf-form-progress__count {
	margin: 0 0 12px; font-family: var(--pf-font-heading); font-weight: 800; font-size: .875rem;
	letter-spacing: .08em; text-transform: uppercase; color: var(--pf-color-accent-deep);
}
.pf-page--form .pf-form-progress__bar { height: 6px; border-radius: var(--pf-radius-pill); background: var(--pf-color-mist); overflow: hidden; }
.pf-page--form .pf-form-progress__bar span { display: block; height: 100%; width: 25%; border-radius: inherit; background: var(--pf-color-navy); transition: width 250ms ease; }
.pf-page--form .pf-form-progress__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; counter-reset: pf-step; }
.pf-page--form .pf-form-progress__steps li { counter-increment: pf-step; font-size: .875rem; line-height: 1.3; color: var(--pf-color-muted); }
.pf-page--form .pf-form-progress__steps li::before { content: counter(pf-step) ". "; font-weight: 700; }
.pf-page--form .pf-form-progress__steps li.is-done { color: var(--pf-color-slate); }
.pf-page--form .pf-form-progress__steps li.is-current { color: var(--pf-color-navy); font-weight: 700; }
.pf-page--form .pf-form-step[hidden] { display: none; }
.pf-page--form .pf-form-step__nav {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
	margin-top: 8px; padding-top: 24px; border-top: 1px solid rgba(12, 29, 61, .12);
}
.pf-page--form .pf-form-step__nav .pf-form-step__next,
.pf-page--form .pf-form-step__nav .ff-btn-submit { margin-left: auto; }
.pf-page--form .pf-form-step__nav .pf-button { font-size: 1.125rem; padding: 12px 24px; }
@media (prefers-reduced-motion: reduce) {
	.pf-page--form .fluentform .ff-btn-submit.ff_btn_style,
	.pf-page--form .pf-form-progress__bar span { transition: none; }
	.pf-page--form .fluentform .ff-btn-submit.ff_btn_style:hover { transform: none; }
}
@media (max-width: 700px) {
	.pf-page--form .fluentform { margin-top: 24px; border-radius: 16px; }
	.pf-page--form .fluentform .ff-el-input--content:has(> .ff-el-form-check) { grid-template-columns: 1fr; }
	.pf-page--form .pf-form-progress__steps { display: none; }
	.pf-page--form .pf-form-step__nav { flex-direction: column-reverse; align-items: stretch; }
	.pf-page--form .pf-form-step__nav .pf-button,
	.pf-page--form .pf-form-step__nav .ff-btn-submit.ff_btn_style,
	.pf-page--form .fluentform .ff-btn-submit.ff_btn_style { width: 100%; margin-left: 0; }
}

/* -- Pages légales (Mentions légales, Confidentialité, CGU), 27 septembre 2026 : lecture
   plus aérée, sans toucher aux autres pages de la matrice (classe .pf-page--legal). ------ */
.pf-page--legal .pf-compo--rail { row-gap: 20px; }
.pf-page--legal .pf-compo-rail-col .pf-eyebrow { margin-bottom: 12px; }
.pf-page--legal .pf-compo-prose { max-width: 680px; }
.pf-page--legal .pf-compo-prose p,
.pf-page--legal .pf-compo-prose li { max-width: 680px; line-height: 1.75; }
.pf-page--legal .pf-compo-prose p { margin: 0 0 1.25em; }
.pf-page--legal .pf-compo-prose p:last-child { margin-bottom: 0; }
.pf-page--legal .pf-compo-prose ul,
.pf-page--legal .pf-compo-prose ol { margin: 0 0 1.25em; padding-left: 1.25em; }
.pf-page--legal .pf-compo-prose li + li { margin-top: .5em; }
.pf-page--legal .pf-compo-prose a { color: var(--pf-color-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pf-page--legal .pf-compo-prose .pf-acteur-note { margin-top: 28px; padding-top: 20px; }
/* Deux sections brume consécutives (Confidentialité) : une seule bande, séparée par un filet. */
.pf-page--legal .pf-destination-section--mist + .pf-destination-section--mist { padding-top: 0; }
.pf-page--legal .pf-destination-section--mist + .pf-destination-section--mist > .pf-container { padding-top: 72px; border-top: 1px solid rgba(12, 29, 61, .1); }
/* Respiration avant le pied de page, la dernière section n'étant plus suivie d'un bloc de liens. */
.pf-page--legal .wp-block-post-content > section:last-child { padding-bottom: 128px; }
@media (max-width: 700px) {
	.pf-page--legal .wp-block-post-content > section:last-child { padding-bottom: 88px; }
}