/* =========================================================================
   PARACHUTISME FRANCE — COMPOSANTS pf-*
   Nomenclature BEM. Aucune dépendance aux identifiants générés par
   GenerateBlocks (gb-element-*, gb-text-*).
   ========================================================================= */

/* -- Containers -------------------------------------------------------- */

.pf-container {
	width: 100%;
	max-width: var(--pf-container-main);
	margin-inline: auto;
	padding-inline: var(--pf-container-padding);
}
.pf-container--editorial {
	max-width: var(--pf-container-editorial);
}

/* -- Sections / fonds ---------------------------------------------------- */

.pf-section {
	padding-block: var(--pf-space-section);
}
.pf-section--white   { background: var(--pf-color-white); }
.pf-section--offwhite{ background: var(--pf-color-offwhite); }
.pf-section--mist    { background: var(--pf-color-mist); }
.pf-section--ink {
	background: var(--pf-color-ink);
	color: var(--pf-color-white);
}
.pf-section--ink :where(h1, h2, h3, h4) {
	color: var(--pf-color-white);
}

/* Halos décoratifs très diffus — casser la monotonie stricte blanc/mist en
   alternance sans toucher la palette ni les fonds `.pf-section--*` eux-mêmes
   (une couche en plus, jamais un remplacement). Purement décoratif : pas de
   contenu, ignoré par les lecteurs d'écran. Réservé à quelques sections
   (jamais toutes) pour rester discret. */
.pf-section--halo {
	position: relative;
	isolation: isolate;
}
.pf-section--halo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(55% 45% at 12% 0%, rgba(96, 165, 250, 0.05), transparent 60%),
		radial-gradient(45% 40% at 100% 100%, rgba(254, 45, 123, 0.04), transparent 65%);
}
/* Panoramas : priorité émotionnelle explicite — halo un peu plus présent,
   ciel + horizon, toujours diffus, jamais un dégradé franc. */
.pf-section--halo-panorama::before {
	background:
		radial-gradient(65% 55% at 10% 0%, rgba(96, 165, 250, 0.08), transparent 62%),
		radial-gradient(55% 50% at 100% 100%, rgba(254, 45, 123, 0.06), transparent 68%);
}

/* -- Eyebrow --------------------------------------------------------------- */

.pf-eyebrow {
	/* flex, pas inline-flex : une boîte inline-level ne peut pas être
	   centrée par le margin-left/right:auto que WordPress applique à
	   chaque enfant direct d'un layout "constrained" — l'auto-centrage ne
	   s'applique qu'aux boîtes block-level (ou flex/grid item). Avec
	   inline-flex, ce margin:auto se calculait à 0, d'où l'eyebrow calé à
	   gauche du viewport malgré un max-width correct. Bug structurel
	   constaté et corrigé le 9 août 2026, voir DECISIONS.md. flex reste
	   un conteneur flex en interne (gap, align-items inchangés) mais
	   redevient un élément block-level normal pour son propre parent.
	   Pas de width:fit-content : un bloc pleine largeur (comme un <p>
	   normal) laisse margin:auto sans effet visible (0 des deux côtés)
	   tout en gardant le point + texte alignés à gauche par défaut du
	   flex (justify-content:flex-start) — un fit-content aurait au
	   contraire centré tout le badge dans son slot 800px. */
	display: flex;
	align-items: center;
	gap: var(--pf-space-3xs);
	font-size: var(--pf-fs-eyebrow);
	font-weight: var(--pf-weight-button);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	/* pf-accent-deep, pas accent-strong : contraste AA mesuré insuffisant
	   sur fond mist (4.07:1) avec la couleur d'accent partagée — voir
	   tokens.css. Le point puce ci-dessous garde l'accent d'origine. */
	color: var(--pf-color-accent-deep);
	margin-bottom: var(--pf-space-xs);
}
.pf-eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--pf-color-accent);
}

/* -- Texte utilitaire ------------------------------------------------------ */

.pf-text-muted { color: var(--pf-color-muted); }
.pf-text-slate { color: var(--pf-color-slate); }
.pf-lead {
	font-size: 1.125rem;
	color: var(--pf-color-slate);
	max-width: 62ch;
}

/* -- Boutons --------------------------------------------------------------- */

.pf-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--pf-space-2xs);
	font-family: var(--pf-font-heading);
	/* 800, pas --pf-weight-button (700) : le contrat MVP fixe le poids des
	   boutons à 800 spécifiquement (.btn{font-weight:800}), distinct du
	   poids "button" partagé par d'autres usages (badges, retour en haut)
	   qui restent à 700 et ne sont pas concernés par ce lot. */
	font-weight: 800;
	/* 1.25rem (20px), pas 0.9375rem (15px) : le contrat MVP fixe le corps du
	   bouton à .btn{padding:12px 24px;font-size:1.25rem} — taille jamais
	   reprise ici jusqu'ici (aucun commentaire ne le justifiait, contrairement
	   à la couleur ci-dessous). Corrigé le 23 août 2026 après contrôle visuel
	   direct contre le MVP (CTA "Structures"/"Explorer" du header signalés
	   trop petits). S'applique à tout .pf-button sans taille locale (ex.
	   .pf-button--sm, ou les overrides déjà posés dans home.css pour la
	   rangée CTA et la loupe du hero) — comme dans le MVP, où .btn est la
	   même base partout, sauf override contextuel explicite. */
	font-size: 1.25rem;
	letter-spacing: 0.01em;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	border-radius: var(--pf-radius-pill);
	padding: 12px 24px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.pf-button:focus-visible {
	outline: 2px solid var(--pf-color-accent-strong);
	outline-offset: 2px;
}
/* Lever au survol universel, comme .btn:hover{transform:translateY(-2px)}
   dans le MVP — posé une seule fois ici plutôt que répété (et parfois
   oublié) dans chaque variante. Corrigé le 23 août 2026 après contrôle
   visuel : .pf-button--secondary n'avait aucun lever, .pf-button--primary
   avait -1px au lieu de -2px. */
.pf-button:hover {
	transform: translateY(-2px);
}
/* --primary : mappe .btn-rose du contrat. Revu le 23 août 2026 (contrôle
   visuel direct contre le MVP) : accent brut (#FE2D7B) au repos, comme le
   MVP — l'arbitrage du 9 août (accent-strong #E11D5A au repos, pour le
   contraste AA) créait un écart visible avec le MVP sur toutes les pages
   (CTA "Explorer" du header, loupe du hero). Contraste mesuré le 23 août :
   blanc sur #FE2D7B = 3,57:1 (sous l'AA texte normal 4,5:1, au-dessus de
   l'AA composants d'interface 3:1) — écart assumé pour rester fidèle au
   MVP, décision Christophe. accent-strong reste utilisé, mais au survol
   seulement (4,64:1, conforme AA texte), exactement comme .btn-rose:hover
   dans le MVP. */
.pf-button--primary {
	background: var(--pf-color-accent);
	color: var(--pf-color-white);
	box-shadow: var(--pf-shadow-sm);
}
.pf-button--primary:hover {
	background: var(--pf-color-accent-strong);
	/* color redéclaré ici volontairement, pas seulement hérité de la règle de
	   base : WordPress injecte une couleur de lien au survol (theme.json,
	   styles.elements.link[":hover"]) via
	   :root :where(a:where(:not(.wp-element-button)):hover){color:ink}, de
	   même spécificité (0,1,0) que .pf-button--primary{color:white} — sans
	   ce doublon ici (0,2,0, deux classes), l'issue dépend de l'ordre
	   d'injection des styles et le texte peut repasser en encre au survol.
	   Bug réel constaté le 23 août 2026, corrigé sur toutes les variantes. */
	color: var(--pf-color-white);
	box-shadow: var(--pf-shadow-md);
}
/* --secondary : mappe .btn-outline du contrat (transparent, bordure et texte
   navy, bascule pleine navy au survol). Remplace l'ancien traitement blanc/
   mist qui ne correspondait à aucune variante des MVP gelés. */
.pf-button--secondary {
	background: transparent;
	color: var(--pf-color-navy);
	border-color: var(--pf-color-navy);
}
.pf-button--secondary:hover {
	background: var(--pf-color-navy);
	color: var(--pf-color-white);
}
/* --sky : mappe .btn-sky du contrat, absente du thème jusqu'ici. Utilisée
   dans les MVP pour les CTA d'exploration secondaires ("Voir les zones
   d'Occitanie", "Explorer tout l'annuaire"). */
.pf-button--sky {
	background: var(--pf-color-sky);
	color: var(--pf-color-white);
	box-shadow: 0 8px 20px rgba(30, 155, 224, 0.35);
}
.pf-button--sky:hover {
	background: var(--pf-color-sky-deep);
	color: var(--pf-color-white); /* même raison que --primary:hover ci-dessus */
}
/* --ghost : aucune occurrence dans les six MVP gelés (topbar, header, hero,
   cartes, CTA, footer). Conservée à l'identique, faute de preuve d'usage
   réel ou d'écart à corriger — ni supprimée ni réécrite sans base. */
.pf-button--ghost {
	background: transparent;
	color: var(--pf-color-white);
	border-color: rgba(255, 255, 255, 0.5);
}
.pf-button--ghost:hover {
	background: rgba(255, 255, 255, 0.12);
	color: var(--pf-color-white); /* même raison que --primary:hover ci-dessus */
}
.pf-button--sm { padding: 10px 20px; font-size: 0.875rem; }
/* Icône dans un bouton (ex. CTA "Explorer" du header) — règle générique,
   comme dans le contrat MVP (.btn svg), pas propre au header. */
.pf-button svg { width: 16px; height: 16px; flex: none; }

/* -- États non interactifs ("à venir") ---------------------------------
   Contrat : une page absente n'est jamais simulée par href="#" ; l'intitulé
   reste non interactif, sans navigation ni survol. Règle générale, pas
   propre aux boutons, mais absente du thème avant ce lot. */
[aria-disabled="true"] {
	pointer-events: none;
	cursor: default;
}

/* -- Badges ------------------------------------------------------------ */

.pf-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: var(--pf-weight-button);
	font-size: var(--pf-fs-small);
	padding: 6px 14px;
	border-radius: var(--pf-radius-pill);
	line-height: 1;
}
.pf-badge--accent {
	background: rgba(254, 45, 123, 0.12);
	color: var(--pf-color-accent-strong);
}
.pf-badge--neutral {
	background: var(--pf-color-mist);
	color: var(--pf-color-ink);
}
.pf-badge--verified {
	background: rgba(16, 185, 129, 0.12);
	color: #067a5a;
}
.pf-badge--sponsored {
	background: var(--pf-color-offwhite);
	color: var(--pf-color-slate);
	border: 1px solid var(--pf-color-mist);
}

/* -- Grilles -------------------------------------------------------------- */

.pf-grid {
	display: grid;
	gap: var(--pf-space-lg);
}
.pf-grid--4 { grid-template-columns: repeat(4, 1fr); }
.pf-grid--3 { grid-template-columns: repeat(3, 1fr); }
.pf-grid--2 { grid-template-columns: repeat(2, 1fr); }
/* Cause structurelle des cartes désalignées en haut de grille (constatée sur
   Panoramas, Guides, Univers) : ces grilles sont des wp:group en layout
   "flow" repris en display:grid par cette classe — mais WordPress applique
   quand même sa règle native de block-gap (`.is-layout-flow > * + * {
   margin-block-start: ... }`) à chaque enfant sauf le premier, puisque la
   classe `.is-layout-flow` reste présente même une fois le display réécrit.
   Résultat : la 1re carte de chaque ligne démarre plus haut que les
   suivantes (24px d'écart mesuré). Le carrousel PF neutralisait déjà ce cas
   sur `.pf-carousel__viewport > *` ; même correctif ici, à la source.
   Spécificité : le sélecteur WordPress réel est `:root :where(.is-layout-flow)
   > *` — `:where()` a une spécificité nulle mais `:root` porte la sienne, ce
   qui égalise exactement une seule classe et laisse l'ordre de source
   trancher (le style global de WordPress est injecté après ce fichier, donc
   il l'emportait). Classe doublée pour lever l'ambiguïté sans `!important`. */
.pf-grid.pf-grid > * {
	margin: 0;
}

@media (max-width: 1023px) {
	.pf-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.pf-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.pf-grid--4,
	.pf-grid--3,
	.pf-grid--2 { grid-template-columns: minmax(0, 1fr); }
}

/* Grille dédiée aux 4 cartes photo (§ Cartes photo) : gap resserré à 20px
   (plafond demandé 20-24px) pour que chaque carte occupe réellement le
   container de 1280px, plutôt que le gap large (32px) des autres grilles —
   cartes plus denses et généreuses, langage Funbooker. Le carrousel (§ 3)
   reprend le même gap pour rester dans le même langage visuel. */
.pf-grid--photo4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
/* Même correctif de block-gap natif que .pf-grid ci-dessus (même raison de
   spécificité) — classe séparée, pas de composition avec .pf-grid, donc la
   règle doit être répétée ici. */
.pf-grid--photo4.pf-grid--photo4 > * {
	margin: 0;
}
@media (max-width: 1023px) {
	.pf-grid--photo4 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 640px) {
	.pf-grid--photo4 { grid-template-columns: minmax(0, 1fr); }
}

/* -- Carte photo ------------------------------------------------------------
   Défaut = carte "feature" façon Funbooker : photo dominante 4:3, contenu
   texte confortable dessous, radius sobre, ombre très discrète. C'est la
   version utilisée dans la grille statique de 4 cartes (§ Cartes photo).
   Modificateur .pf-card-photo--compact = photo pleine carte + overlay +
   texte en surimpression, réservé aux cartes du carrousel (§ Carrousel),
   où la densité et le défilement justifient un format plus compact.
   ---------------------------------------------------------------------- */

.pf-card-photo {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: 10px;
	overflow: hidden;
	background: var(--pf-color-white);
	border: 1px solid rgba(15, 23, 42, 0.06);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
	text-decoration: none;
	color: var(--pf-color-ink);
	transition: box-shadow 220ms ease, transform 220ms ease, border-color 220ms ease;
}
.pf-card-photo:hover {
	box-shadow: var(--pf-shadow-lg);
	transform: translateY(-4px);
	border-color: rgba(15, 23, 42, 0.1);
}
.pf-card-photo:focus-visible {
	outline: 2px solid var(--pf-color-accent-strong);
	outline-offset: 2px;
	box-shadow: var(--pf-shadow-lg);
}
.pf-card-photo__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--pf-color-mist);
}
.pf-card-photo__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 250ms ease;
}
.pf-card-photo:hover .pf-card-photo__media img {
	transform: scale(1.03);
}
.pf-card-photo__overlay {
	display: none;
}
/* Corps plus compact (padding resserré) : la densité photo + texte serré
   est ce qui donne le langage Funbooker, pas de grands vides internes. */
.pf-card-photo__body {
	padding: var(--pf-space-sm) var(--pf-space-xs) var(--pf-space-sm);
}
.pf-card-photo__title {
	font-size: 1.0625rem;
	font-weight: 700; /* Inter 700, bien présent sans être aussi lourd qu'un H3 */
	color: var(--pf-color-ink);
	margin: 0 0 2px;
}
/* Métadonnées volontairement plus légères que le titre : petites, muted,
   poids normal — un second niveau d'information, pas une répétition. */
.pf-card-photo__meta {
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--pf-color-muted);
	margin: 0 0 6px;
}
/* Badges éditoriaux : information réelle (terrain, cadre, sélection
   éditoriale) — jamais une note, un avis ou un badge commercial. */
.pf-card-photo__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
/* Pastel doux plutôt que gris plat : même information, un peu plus vivante,
   cohérente quelle que soit la catégorie (pas de code couleur par thème —
   resterait à inventer une taxonomie visuelle non demandée). */
.pf-card-photo__badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--pf-color-ink);
	background: rgba(96, 165, 250, 0.12);
	border: 1px solid rgba(96, 165, 250, 0.18);
	padding: 4px 10px;
	border-radius: var(--pf-radius-pill);
}

/* Modificateur compact (carrousel) : retrouve le format plein cadre avec
   overlay et texte en surimpression, plus dense et plus visuel au défilement. */
.pf-card-photo--compact {
	color: var(--pf-color-white);
	border: 0;
	box-shadow: var(--pf-shadow-sm);
	border-radius: var(--pf-radius-lg);
}
.pf-card-photo--compact:hover {
	box-shadow: var(--pf-shadow-lg);
}
.pf-card-photo--compact .pf-card-photo__media {
	aspect-ratio: 4 / 5;
}
.pf-card-photo--compact .pf-card-photo__overlay {
	display: block;
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15,23,42,0) 45%, rgba(15,23,42,0.78) 100%);
	pointer-events: none;
}
.pf-card-photo--compact .pf-card-photo__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: var(--pf-space-md);
}
.pf-card-photo--compact .pf-card-photo__title {
	color: var(--pf-color-white);
}
.pf-card-photo--compact .pf-card-photo__meta {
	color: rgba(255,255,255,0.85);
}

/* -- Carte Zone / Destination ---------------------------------------------- */

.pf-card-geo {
	display: flex;
	flex-direction: column;
	border-radius: var(--pf-radius-lg);
	overflow: hidden;
	background: var(--pf-color-white);
	border: 1px solid var(--pf-color-mist);
	box-shadow: var(--pf-shadow-sm);
	text-decoration: none;
	color: inherit;
	transition: box-shadow 220ms ease, transform 220ms ease;
}
/* Hover premium et discret : légère élévation + ombre renforcée + léger
   zoom de la photo. Pas de contour rose (trop appuyé) et aucune animation
   spectaculaire. */
.pf-card-geo:hover {
	box-shadow: var(--pf-shadow-lg);
	transform: translateY(-4px);
}
.pf-card-geo:hover .pf-card-geo__media img {
	transform: scale(1.03);
}
/* Focus clavier : distinct du hover, toujours visible pour l'accessibilité
   (WCAG 2.2 AA), même si le hover ne montre plus de contour. */
.pf-card-geo:focus-visible {
	outline: 2px solid var(--pf-color-accent-strong);
	outline-offset: 2px;
	box-shadow: var(--pf-shadow-lg);
}
.pf-card-geo__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
}
.pf-card-geo--portrait .pf-card-geo__media {
	aspect-ratio: 4 / 5;
}

/* Grammaires de l'Accueil hybride : chaque territoire change de rythme. */
.pf-home-mosaic { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--pf-space-md); }
.pf-home-mosaic > :first-child { grid-row: span 2; }
.pf-panorama-moodboard { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: var(--pf-space-md); }
.pf-panorama-moodboard > :first-child { grid-row: span 2; }
.pf-reperes-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--pf-space-xl); }
.pf-reperes-list__item { display:flex; justify-content:space-between; gap:var(--pf-space-sm); padding:var(--pf-space-md) 0; border-bottom:1px solid rgba(15,23,42,.12); color:var(--pf-color-ink); font-weight:700; text-decoration:none; }
.pf-reperes-list__item:hover { color:var(--pf-color-accent-strong); }
.pf-reperes-list__item:focus-visible { outline:2px solid var(--pf-color-accent-strong); outline-offset:4px; }
.pf-guides-featured > :first-child { grid-column: span 2; }
@media (max-width: 640px) { .pf-home-mosaic, .pf-panorama-moodboard, .pf-reperes-list { grid-template-columns:minmax(0,1fr); } .pf-home-mosaic > :first-child, .pf-panorama-moodboard > :first-child, .pf-guides-featured > :first-child { grid-row:auto; grid-column:auto; } }
.pf-card-geo__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 220ms ease;
}
.pf-card-geo__body {
	padding: var(--pf-space-md);
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.pf-card-geo__title {
	font-size: 1.0625rem;
	font-weight: var(--pf-weight-heading-sm);
	margin: 0;
}
.pf-card-geo__meta {
	font-size: var(--pf-fs-small);
	color: var(--pf-color-muted);
	display: flex;
	align-items: center;
	gap: 6px;
}
.pf-card-geo__footer {
	margin-top: auto;
	padding-top: var(--pf-space-xs);
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.pf-card-geo__arrow {
	display: inline-flex;
	transition: transform 0.25s ease;
}
.pf-card-geo:hover .pf-card-geo__arrow {
	transform: translateX(4px);
}

/* -- Carte éditoriale (guide/dossier) --------------------------------------- */

.pf-card-editorial {
	display: flex;
	flex-direction: column;
	gap: var(--pf-space-sm);
	text-decoration: none;
	color: inherit;
	/* Carte volontairement sans coque visible au repos (pas de fond, pas de
	   bordure) — seule la photo et le texte portent la composition. Le survol
	   lui donne de la présence sans ajouter un panneau qui n'existait pas :
	   la carte se soulève dans son ensemble, la photo porte l'ombre. */
	transition: transform 220ms ease;
}
.pf-card-editorial:hover {
	transform: translateY(-4px);
}
.pf-card-editorial:focus-visible {
	outline: 2px solid var(--pf-color-accent-strong);
	outline-offset: 4px;
	border-radius: var(--pf-radius-md);
}
.pf-card-editorial__media {
	aspect-ratio: 3 / 2;
	border-radius: var(--pf-radius-md);
	overflow: hidden;
	background: var(--pf-color-mist);
	/* Ombre de repos extrêmement légère (token --pf-shadow-sm, déjà utilisé
	   au repos par .pf-card-geo) : la carte éditoriale reste volontairement
	   sans coque (voir plus haut), seule la photo gagne un peu de
	   profondeur pour rester cohérente avec les 2 autres familles de
	   cartes. Pas d'effet flottant permanent : le hover reste le vrai
	   moment d'élévation (--pf-shadow-lg, inchangé ci-dessous). */
	box-shadow: var(--pf-shadow-sm);
	transition: box-shadow 220ms ease;
}
.pf-card-editorial:hover .pf-card-editorial__media {
	box-shadow: var(--pf-shadow-lg);
}
.pf-card-editorial__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 250ms ease;
}
.pf-card-editorial:hover .pf-card-editorial__media img {
	transform: scale(1.03);
}
.pf-card-editorial__title {
	font-size: 1.125rem;
	font-weight: var(--pf-weight-heading-sm);
	margin: 0;
	transition: color 220ms ease;
}
.pf-card-editorial:hover .pf-card-editorial__title {
	color: var(--pf-color-accent-strong);
}
.pf-card-editorial__excerpt {
	color: var(--pf-color-slate);
	font-size: 0.9375rem;
	margin: 0;
}

/* -- Carrousel — bloc PF (pf/carousel) --------------------------------------
   Composant indépendant et réutilisable : n'importe quel bloc ajouté à
   l'intérieur (dans l'éditeur) devient une carte. Le dimensionnement cible
   donc les enfants DIRECTS de .pf-carousel__viewport par sélecteur d'enfant
   plutôt qu'une classe .pf-carousel__item — aucune classe à ajouter
   manuellement sur chaque carte, quel que soit le bloc utilisé à l'intérieur
   (Group, Image, un futur bloc Carte PF...).
   ---------------------------------------------------------------------- */

.pf-carousel {
	position: relative;
	/* Espace réservé en haut pour les flèches, sans dépendre d'un titre
	   voisin précis : le bloc reste autonome, utilisable n'importe où. */
	padding-top: 58px;
}
.pf-carousel__viewport {
	display: flex;
	/* Même gap que .pf-grid--photo4 (20px) : même langage visuel entre la
	   grille statique et le carrousel. */
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	/* Ombre au hover coupée par le rail du carrousel : `overflow-x:auto` sans
	   `overflow-y` explicite force le navigateur à calculer aussi
	   `overflow-y:auto` (règle CSS : un seul axe ne peut pas rester "visible"
	   si l'autre défile), donc tout ce qui dépasse la boîte de padding en
	   hauteur — l'élévation et l'ombre des cartes au survol — est clippé
	   verticalement. Le clipping horizontal reste nécessaire au carrousel,
	   impossible de le désactiver sans casser le défilement. Solution : de la
	   vraie place à l'intérieur de la boîte qui défile (padding-block, où le
	   clip vertical peut respirer) compensée par une marge négative égale sur
	   le même élément, pour que la position et l'espacement des cartes dans
	   la page restent strictement identiques — seule la zone de clip change. */
	padding-block: 32px 48px;
	margin-block: -32px -48px;
}
.pf-carousel__viewport::-webkit-scrollbar {
	display: none;
}
.pf-carousel__viewport > * {
	flex: 0 0 auto;
	width: calc((100% - 3 * 20px) / 4);
	scroll-snap-align: start;
	margin: 0; /* neutralise la marge par défaut d'un bloc natif (ex. Group) */
}
@media (max-width: 1023px) {
	.pf-carousel__viewport > * { width: calc((100% - 1.5 * 20px) / 2.3); }
}
@media (max-width: 640px) {
	.pf-carousel__viewport > * { width: 82%; }
}
.pf-carousel__controls {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	gap: var(--pf-space-xs);
}
/* Fort contraste par défaut (fond encre plein), pas seulement au survol :
   sur un fond de page blanc, un cercle blanc bordé restait trop discret. */
/* Esprit Funbooker : bouton de NAVIGATION, pas un CTA — blanc, bordure
   grise discrète, flèche sombre. Un fond encre ou rose plein se lisait
   comme une action commerciale, pas comme un contrôle. */
.pf-carousel__arrow {
	/* 44px : cible tactile minimale recommandée (était 42px). */
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(15, 23, 42, 0.12);
	background: var(--pf-color-white);
	color: var(--pf-color-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
	transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.pf-carousel__arrow:hover {
	background: var(--pf-color-offwhite);
	border-color: rgba(15, 23, 42, 0.22);
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.14);
	transform: translateY(-1px);
}
.pf-carousel__arrow:active {
	transform: translateY(0);
}
.pf-carousel__arrow:focus-visible {
	outline: 2px solid var(--pf-color-accent-strong);
	outline-offset: 2px;
}
.pf-carousel__arrow:disabled {
	color: var(--pf-color-slate-light);
	border-color: var(--pf-color-mist);
	background: var(--pf-color-white);
	box-shadow: none;
	cursor: default;
	opacity: 0.45;
}
.pf-carousel__arrow svg {
	width: 20px;
	height: 20px;
	stroke-width: 2.25;
	transition: transform 200ms ease;
}
/* Chevron qui se décale très légèrement dans le sens du déplacement — jamais
   au repos, seulement au survol, et neutralisé par le garde-fou global
   prefers-reduced-motion (base.css). */
.pf-carousel__arrow[data-pf-carousel-prev]:hover svg {
	transform: translateX(-2px);
}
.pf-carousel__arrow[data-pf-carousel-next]:hover svg {
	transform: translateX(2px);
}

/* -- Bandeau supérieur -------------------------------------------------- */

.pf-topbar {
	background: var(--pf-color-navy);
	color: var(--pf-color-white);
	font-family: var(--pf-font-heading);
	font-weight: 700;
	letter-spacing: .06em;
	font-size: .88rem;
	text-align: center;
	padding: 8px 12px;
}

/* -- Contrainte du wrapper wp:template-part -------------------------------
   Diagnostic du 22 août 2026 (contrôle réel) : wp:template-part
   {"slug":"header","tagName":"header"} enveloppe systématiquement la sortie
   de Shell::header() (topbar + .pf-header) dans <header
   class="wp-block-template-part">, une boîte tout juste assez haute pour
   contenir les deux. Un élément position:sticky ne peut jamais dépasser le
   cadre de son bloc englobant direct : cette boîte, à peine plus grande que
   .pf-header lui-même, ne laisse aucune marge de manœuvre — .pf-header
   défile avec la page au lieu de se fixer, sur toutes les pages du site.
   display:contents retire ce wrapper de l'arbre de boîtes : topbar et
   .pf-header deviennent des enfants directs de .wp-site-blocks, qui couvre
   toute la hauteur de la page — .pf-header retrouve la marge de manœuvre
   nécessaire à son sticky. N'affecte ni l'ordre ni le rendu visuel des deux
   éléments ; ne perd aucune sémantique : le seul <header> réellement
   significatif reste .pf-header, à l'intérieur — le wrapper n'était qu'un
   artefact du système de gabarits, pas un repère de page voulu. */
header.wp-block-template-part { display: contents; }
/* Conséquence directe : topbar et .pf-header, désormais enfants directs de
   .wp-site-blocks, sont soumis à son espacement automatique de blocs
   (blockGap WordPress, 24px) — un écart qui n'existait pas quand les deux
   étaient simplement empilés dans le même wrapper. Neutralisé uniquement
   entre les deux (la topbar, premier enfant, n'a de toute façon jamais eu
   cette marge). */
.wp-site-blocks > .pf-header { margin-block-start: 0; }

/* -- Header --------------------------------------------------------------
   Nav principale et menu compact sont deux entrées de navigation
   distinctes et coexistantes, pas un mode desktop et son repli mobile :
   sous 1024px la nav principale disparaît sans remplacement, le menu
   compact reste seul accès à la navigation, à toutes les tailles d'écran.
   Reproduit à l'identique des six MVP gelés (vérifié le 22 août 2026).
   Revue accessibilité/navigation possible ultérieurement, non rouverte ici.
   Topbar volontairement hors de ce sticky : position:static (par défaut),
   elle continue à défiler normalement — seule la barre blanche se fixe,
   comme dans le MVP. */

.pf-header {
	position: sticky;
	top: 0;
	z-index: 40;
	height: var(--pf-header-height);
	background: var(--pf-color-white);
	border-bottom: 1px solid var(--pf-color-mist);
}
.pf-header__inner {
	position: relative;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pf-space-md);
}
.pf-header__logo {
	display: flex;
	align-items: center;
	width: clamp(220px, 24vw, 292px);
	height: 52px;
	flex: 0 0 auto;
}
.pf-header__logo img {
	display: block;
	width: 100%;
	height: auto;
}
.pf-header__nav {
	display: flex;
	align-items: center;
	gap: 28px; /* littéral, comme dans le MVP : aucun jeton d'espacement ne tombe sur 28px */
}
.pf-header__nav a {
	font-weight: var(--pf-weight-nav);
	font-size: 1.02rem;
	text-decoration: none;
	color: var(--pf-color-ink);
	opacity: .8;
	transition: opacity 150ms ease;
}
.pf-header__nav a:hover {
	opacity: 1;
	color: var(--pf-color-accent);
}
.pf-header__nav a:focus-visible {
	outline: 3px solid var(--pf-color-accent-strong);
	outline-offset: 4px;
	opacity: 1;
}
@media (max-width: 1024px) {
	.pf-header__nav { display: none; }
	.pf-search-utility { display: none; }
	.pf-header__ctas .pf-button--secondary { display: none; }
}

/* -- CTA d'en-tête ------------------------------------------------------- */

.pf-header__ctas {
	display: flex;
	align-items: center;
	gap: 10px;
}
.pf-header__go {
	white-space: nowrap;
	min-height: 56px;
	padding: 12px 22px;
	font-size: 1.15rem;
	letter-spacing: .045em;
	background: var(--pf-color-accent-strong);
}
.pf-header__go:hover,
.pf-header__go:focus-visible { background: var(--pf-color-accent-deep); }
.pf-header__go-label { white-space: nowrap; }
.pf-header__go-word { display: inline-flex; }
.pf-header__go-word > span { animation: pf-go-letter-wave 1.8s ease-in-out infinite; }
.pf-header__go-word > span:nth-child(2) { animation-delay: .14s; }
.pf-header__go-word > span:nth-child(3) { animation-delay: .28s; }
.pf-header__go-word > span:nth-child(4) { animation-delay: .42s; }
.pf-header__go-word > span:nth-child(5) { animation-delay: .56s; }
.pf-header__go-word > span:nth-child(6) { animation-delay: .70s; }
@keyframes pf-go-letter-wave {
	0%, 55%, 100% { opacity: .72; text-shadow: none; }
	25% { opacity: 1; text-shadow: 0 0 7px rgba(255, 255, 255, .95); }
}
@media (prefers-reduced-motion: reduce) {
	.pf-header__go-word > span { animation: none; opacity: 1; }
}
.pf-search-utility {
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--pf-color-mist);
	background: var(--pf-color-white);
	color: var(--pf-color-navy);
	box-shadow: none;
}
.pf-search-utility:hover {
	background: var(--pf-color-offwhite);
	border-color: var(--pf-color-navy);
	color: var(--pf-color-navy);
}
.pf-search-utility svg {
	width: 20px;
	height: 20px;
}

/* -- Menu compact : point d'accès permanent à la navigation, pas une
   variante du hamburger mobile classique. Présent à toutes les tailles. */

.pf-header__compact {
	position: relative;
}
.pf-menu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1.5px solid var(--pf-color-mist);
	border-radius: var(--pf-radius-pill);
	background: transparent;
	color: var(--pf-color-navy);
	cursor: pointer;
	transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.pf-menu-toggle svg { width: 20px; height: 20px; }
.pf-menu-toggle:hover {
	background: var(--pf-color-navy);
	color: var(--pf-color-white);
	border-color: var(--pf-color-navy);
}
.pf-menu-toggle:focus-visible {
	outline: 3px solid var(--pf-color-accent-strong);
	outline-offset: 4px;
}
.pf-menu-dropdown {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	display: none;
	flex-direction: column;
	min-width: 220px;
	padding: 10px;
	background: var(--pf-color-white);
	border-radius: var(--pf-radius-lg);
	box-shadow: var(--pf-shadow-lg);
}
.pf-menu-dropdown.is-open { display: flex; }
.pf-menu-dropdown a {
	padding: 12px 16px;
	border-radius: var(--pf-radius-md);
	font-weight: var(--pf-weight-nav);
	color: var(--pf-color-navy);
	text-decoration: none;
}
.pf-menu-dropdown a:hover {
	background: var(--pf-color-mist);
	color: var(--pf-color-accent);
}
.pf-menu-dropdown a:focus-visible {
	outline: 3px solid var(--pf-color-accent-strong);
	outline-offset: -3px;
}
@media (max-width: 700px) {
	.pf-header__logo {
		width: min(150px, calc(100vw - 243px));
		height: auto;
	}
	/* Le libellé « JE VEUX SAUTER » reste entier à 320 px : le logo prend
	   l'espace restant, et la recherche reste dans le menu compact. */
	.pf-header__ctas .pf-header__go {
		min-height: 48px;
		padding: 9px;
		font-size: .82rem;
		gap: 4px;
	}
	.pf-header__go-label { white-space: nowrap; }
}

/* -- Barre de recherche partagée (pf-search-pill) --------------------------
   "Pilule dans la pilule" : le conteneur fixe la hauteur (~60-64px), input
   et bouton remplissent cet espace. Base = bordée, pour un fond clair
   (Variantes A et C). Modificateur --shadow = flottante sur une photo
   (Variante B), sans bordure, ombre marquée pour la lisibilité.
   ------------------------------------------------------------------------- */
.pf-search-pill {
	background: var(--pf-color-white);
	border: 1px solid var(--pf-color-mist);
	border-radius: var(--pf-radius-pill);
	min-height: 62px;
	padding: 6px;
	display: flex;
	align-items: center;
	gap: 6px;
	max-width: 600px;
	width: 100%;
	box-shadow: var(--pf-shadow-sm);
}
.pf-search-pill--shadow {
	border-color: transparent;
	box-shadow: 0 18px 44px rgba(15, 23, 42, 0.3);
}
.pf-search-pill input {
	flex: 1;
	/* min-width:0 impératif : sans lui, un input flex:1 refuse de rétrécir
	   sous la largeur de son placeholder et pousse le bouton hors du
	   conteneur — bug constaté sur mobile (375px) le 8 août 2026. */
	min-width: 0;
	height: 100%;
	border: 0;
	background: transparent;
	/* 16px plutôt que 20px : marge de respiration en plus pour le
	   placeholder dans les colonnes étroites (ex. Hero A, ~314px dispo
	   pour l'input à 1280px) sans toucher à la taille de police. */
	padding: 0 16px;
	font-family: var(--pf-font-body);
	font-size: 1.0625rem;
	color: var(--pf-color-ink);
}
.pf-search-pill input::placeholder {
	color: var(--pf-color-muted);
}
.pf-search-pill input:focus {
	outline: none;
}
.pf-search-pill .pf-button {
	flex: none;
	height: 100%;
	white-space: nowrap;
	padding-inline: 26px;
	font-size: 1rem;
}
@media (max-width: 480px) {
	.pf-search-pill { min-height: 56px; }
	.pf-search-pill .pf-button {
		padding-inline: 16px;
		font-size: 0.9375rem;
	}
	.pf-search-pill input {
		padding: 0 12px;
		font-size: 1rem;
	}
}

/* -- Hero — 3 variantes de composition (2e passe QA, 8 août 2026) ----------
   Toujours en comparaison sur /design-system/, aucune choisie. Un seul point
   commun imposé : Inter 800, palette PF, blanc dominant, rose en accent,
   photos réelles. Au-delà, trois architectures réellement différentes.
   ------------------------------------------------------------------------- */

.pf-hero-quicklinks {
	margin-top: var(--pf-space-sm);
	display: flex;
	flex-wrap: wrap;
	gap: var(--pf-space-2xs);
}
/* Accès rapides construits avec le bloc natif Buttons/Button : on habille
   .wp-block-button__link directement (fond clair, façon pf-button--secondary)
   plutôt que de forcer une classe pf-button sur un bloc natif — évite tout
   risque de message de récupération de bloc dans l'éditeur. */
.pf-hero-quicklinks .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	font-family: var(--pf-font-body);
	font-weight: 700;
	font-size: 0.875rem;
	padding: 10px 20px;
	border-radius: var(--pf-radius-pill);
	background: var(--pf-color-white);
	color: var(--pf-color-ink);
	border: 1px solid var(--pf-color-mist);
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.pf-hero-quicklinks .wp-block-button__link:hover {
	border-color: var(--pf-color-accent-strong);
	color: var(--pf-color-accent-strong);
}
.pf-hero-eyebrow {
	margin-bottom: var(--pf-space-xs);
}

/* Variante A — Split premium : texte à gauche sur fond clair, grande photo
   cadrée à droite, sans aucun texte superposé à l'image. Porté depuis le lab
   sur le bloc natif Columns (proportions 47/53 via flex-basis sur chaque
   Column) plutôt qu'une grille custom : display/align hérités du bloc natif,
   on ne fait qu'habiller. */
.pf-hero-a {
	align-items: center;
	gap: var(--pf-space-xl);
	padding: var(--pf-space-2xl) var(--pf-space-xl);
	background: var(--pf-color-offwhite);
	border-radius: var(--pf-radius-lg);
}
.pf-hero-a__text {
	max-width: 480px;
}
.pf-hero-a__title {
	font-size: var(--pf-fs-h1);
	line-height: 1.08;
	color: var(--pf-color-ink);
	max-width: 12ch;
}
.pf-hero-a__subtitle {
	margin-top: var(--pf-space-sm);
	max-width: 38ch;
	color: var(--pf-color-slate);
	font-size: 1.125rem;
}
.pf-hero-a__search {
	margin-top: var(--pf-space-lg);
}
/* Colonne image : le radius/l'habillage viennent du bloc Image natif
   (attribut de bordure, réglable dans l'éditeur) — ici seulement le
   cadrage en hauteur fixe façon photo de Hero. */
.pf-hero-a__media {
	align-self: stretch;
}
.pf-hero-a__media .wp-block-image {
	height: 100%;
	min-height: 380px;
	max-height: 460px;
	margin: 0;
}
.pf-hero-a__media .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (max-width: 1023px) {
	.pf-hero-a {
		padding: var(--pf-space-xl) var(--pf-space-md);
	}
	/* Pas de order:-1 ici : le mobile doit suivre texte → recherche → accès
	   rapides → photo (ordre explicitement demandé), donc l'ordre naturel
	   du DOM suffit — ne pas remettre la photo en premier. Le bloc Columns
	   natif empile déjà ses colonnes sous 782px par défaut. */
	.pf-hero-a__media .wp-block-image {
		min-height: 240px;
		max-height: 300px;
		margin-top: var(--pf-space-lg);
	}
	.pf-hero-a__text { max-width: none; }
}

/* Variante B — Immersive : photo plein cadre, très peu d'overlay, texte
   logé dans une zone de ciel dégagée choisie pour l'accueillir. */
.pf-hero-b {
	position: relative;
	/* min-height, pas height : si un H1 plus long (production) dépasse le
	   budget, le hero grandit plutôt que de rogner du contenu sous
	   overflow:hidden — bug constaté et corrigé le 8 août 2026, voir
	   DECISIONS.md §6. */
	min-height: var(--pf-hero-height);
	display: flex;
	color: var(--pf-color-white);
	overflow: hidden;
}
.pf-hero-b--align-center { align-items: center; }
.pf-hero-b--align-start { align-items: flex-start; }
.pf-hero-b__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.pf-hero-b__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Scrim très léger et directionnel, encore allégé après retour du 8 août :
   max ~32% d'opacité au plus fort, dégressif vers 0 — jamais de voile noir
   sur l'ensemble de la photo. */
.pf-hero-b__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
}
.pf-hero-b__scrim--left {
	background: linear-gradient(100deg, rgba(15,23,42,0.32) 0%, rgba(15,23,42,0.12) 30%, rgba(15,23,42,0) 55%);
}
.pf-hero-b__scrim--top {
	background: linear-gradient(180deg, rgba(15,23,42,0.30) 0%, rgba(15,23,42,0.08) 36%, rgba(15,23,42,0) 60%);
}
.pf-hero-b__content {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-block: var(--pf-space-xl);
}
.pf-hero-b__text {
	max-width: 660px;
}
.pf-hero-b__title {
	max-width: 640px;
	color: var(--pf-color-white);
	font-size: var(--pf-fs-h1);
	line-height: 1.08;
	text-shadow: 0 2px 20px rgba(15, 23, 42, 0.3);
}
.pf-hero-b__subtitle {
	max-width: 40ch;
	margin-top: var(--pf-space-xs);
	color: rgba(255,255,255,0.94);
	font-size: 1.125rem;
	text-shadow: 0 1px 12px rgba(15, 23, 42, 0.25);
}
.pf-hero-b__search {
	margin-top: var(--pf-space-lg);
}
.pf-hero-b .pf-hero-quicklinks { margin-top: var(--pf-space-sm); }

/* Variante C — Éditoriale / image-carte : grand bloc clair, H1 fort à
   gauche, recherche intégrée, photo traitée comme une carte indépendante
   avec un léger chevauchement sobre. Accent rose très limité. */
.pf-hero-c {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 56%) minmax(0, 44%);
	align-items: start;
	gap: var(--pf-space-xl);
	padding: var(--pf-space-2xl) 0 var(--pf-space-2xl);
	background: var(--pf-color-white);
}
.pf-hero-c__text {
	max-width: 560px;
	padding-top: var(--pf-space-lg);
}
.pf-hero-c__title {
	font-size: var(--pf-fs-h1);
	line-height: 1.08;
	color: var(--pf-color-ink);
	max-width: 13ch;
}
.pf-hero-c__subtitle {
	margin-top: var(--pf-space-sm);
	max-width: 42ch;
	color: var(--pf-color-slate);
	font-size: 1.125rem;
}
.pf-hero-c__search {
	margin-top: var(--pf-space-lg);
}
.pf-hero-c__media {
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: var(--pf-shadow-lg);
	height: 420px;
	/* Léger chevauchement sobre sur le bloc de texte, façon "grande carte
	   photographique" posée sur la page plutôt qu'un simple visuel aligné. */
	margin-top: var(--pf-space-2xl);
	margin-left: -56px;
}
.pf-hero-c__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (max-width: 1023px) {
	.pf-hero-c {
		grid-template-columns: minmax(0, 1fr);
	}
	.pf-hero-c__media {
		margin-left: 0;
		margin-top: var(--pf-space-lg);
		height: 280px;
	}
	.pf-hero-c__text { max-width: none; padding-top: 0; }
}

/* Variantes labellisées pour comparaison sur /design-system/ uniquement. */
.pf-ds-hero-variant {
	margin-bottom: var(--pf-space-xl);
}
.pf-ds-hero-variant__label {
	display: flex;
	align-items: center;
	gap: var(--pf-space-2xs);
	margin-bottom: var(--pf-space-sm);
	font-size: var(--pf-fs-small);
	font-weight: var(--pf-weight-button);
	color: var(--pf-color-muted);
}
/* Coins arrondis uniquement dans le lab pour séparer les variantes photo
   plein cadre — sur une vraie page, la Variante B est plein cadre (radius 0). */
.pf-ds-hero-variant .pf-hero-b {
	border-radius: var(--pf-radius-lg);
}
.pf-ds-hero-variant .pf-hero-a,
.pf-ds-hero-variant .pf-hero-c {
	border-radius: var(--pf-radius-lg);
	padding-inline: var(--pf-space-xl);
}

/* -- CTA ------------------------------------------------------------------- */

.pf-cta {
	border-radius: var(--pf-radius-lg);
	padding: var(--pf-space-xl);
	background: var(--pf-color-ink);
	color: var(--pf-color-white);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pf-space-lg);
	flex-wrap: wrap;
}
.pf-cta__title {
	color: var(--pf-color-white);
	margin: 0 0 4px;
}
.pf-cta__text {
	color: rgba(255,255,255,0.75);
	margin: 0;
}

/* -- FAQ (CSS natif, sans dépendance GenerateBlocks Pro) -------------------- */

.pf-faq-item {
	border-bottom: 1px solid var(--pf-color-mist);
}
.pf-faq-item__q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pf-space-md);
	padding-block: var(--pf-space-sm);
	background: transparent;
	border: 0;
	text-align: left;
	font-weight: var(--pf-weight-heading-sm);
	font-size: 1rem;
	color: var(--pf-color-ink);
	cursor: pointer;
}
.pf-faq-item__icon {
	flex: none;
	transition: transform 0.2s ease;
}
.pf-faq-item[open] .pf-faq-item__icon {
	transform: rotate(45deg);
}
.pf-faq-item__a {
	padding-bottom: var(--pf-space-md);
	color: var(--pf-color-slate);
}

/* -- Swatches palette (page laboratoire) ------------------------------------ */

.pf-swatch {
	border-radius: var(--pf-radius-md);
	overflow: hidden;
	border: 1px solid var(--pf-color-mist);
}
.pf-swatch__fill {
	height: 72px;
}
.pf-swatch__label {
	padding: var(--pf-space-2xs) var(--pf-space-sm);
	font-size: var(--pf-fs-small);
	background: var(--pf-color-white);
}
.pf-swatch__label strong {
	display: block;
	font-weight: var(--pf-weight-button);
}

/* Footer commun : trois groupes courts et une ligne légale distincte. */
.pf-footer {
	background: var(--pf-color-navy);
	color: rgba(255, 255, 255, 0.75);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-block: clamp(40px, 5vw, 64px) var(--pf-space-lg);
}
.pf-footer__top {
	display: grid;
	grid-template-columns: minmax(230px, 1.35fr) repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 4vw, 64px);
	padding-bottom: clamp(32px, 4vw, 48px);
}
.pf-footer__brand { max-width: 320px; }
.pf-footer__logo { display: inline-flex; align-items: center; }
.pf-footer__brand img { width: min(100%, 280px); height: auto; }
.pf-footer__tagline {
	margin: var(--pf-space-sm) 0 0;
	color: rgba(255, 255, 255, 0.6);
	font-size: 1.02rem;
	line-height: 1.5;
}
.pf-footer__col h4 {
	margin: 0 0 var(--pf-space-sm);
	color: var(--pf-color-white);
	font-weight: 800;
	font-size: 0.92rem;
	text-transform: uppercase;
	letter-spacing: .06em;
}
.pf-footer__col a {
	display: block;
	padding-block: 5px;
	color: var(--pf-color-white);
	font-size: 1rem;
	text-decoration: none;
	opacity: .8;
}
.pf-footer__col a:hover,
.pf-footer__legal a:hover { opacity: 1; color: var(--pf-color-sky); }
.pf-footer__col a:focus-visible,
.pf-footer__legal a:focus-visible { outline: 3px solid var(--pf-color-sky); outline-offset: 4px; opacity: 1; }
.pf-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	padding-block: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.pf-footer__legal a {
	color: rgba(255, 255, 255, 0.72);
	font-size: .88rem;
	text-decoration: none;
}
.pf-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--pf-space-md);
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: .9rem;
}
.pf-footer__copyright { margin: 0; opacity: .6; }
.pf-footer__back-to-top {
	font-family: var(--pf-font-heading);
	color: rgba(255, 255, 255, 0.7);
	font-weight: var(--pf-weight-button);
	font-size: .9rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 150ms ease;
}
.pf-footer__back-to-top:hover { color: var(--pf-color-sky); }
.pf-footer__back-to-top:focus-visible { outline: 3px solid var(--pf-color-sky); outline-offset: 4px; }
@media (max-width: 1024px) {
	.pf-footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 700px) {
	.pf-footer__top { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
	.pf-footer__brand { grid-column: 1 / -1; }
	.pf-footer__col:last-child { grid-column: 1 / -1; }
	.pf-footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* A long action label must use a second line on a phone, never widen the page. */
@media (max-width: 480px) {
	.pf-button {
		max-width: 100%;
		white-space: normal;
		text-align: center;
		line-height: 1.25;
	}
}

@media (max-width: 700px) { .pf-header__inner { padding-inline: 12px; gap: 6px; } .pf-header__logo { width: min(190px, calc(100vw - 200px)); } .pf-header__ctas .pf-header__go { padding-inline: 6px; } }

.pf-article-byline { font-size: .9rem; line-height: 1.5; font-weight: 400; }