/* =========================================================================
   PARACHUTISME FRANCE — HUB « OÙ SAUTER ? »
   Traduction du MVP gelé /Applications/MAMP/htdocs/pf-mvp-hub-ou-sauter.html
   (contrat design MVP, 20 août 2026), chargé uniquement sur la page
   /ou-sauter/ — voir functions.php. Ne redéfinit jamais les jetons ou les
   composants partagés (tokens.css, base.css, components.css) : header/
   footer/topbar/menu/boutons/container viennent du shell commun
   (inc/Shell.php).

   Sélecteurs propres à cette page, préfixés `.pf-hub-*`, pour ne jamais
   entrer en collision avec un composant partagé ni avec une autre page
   (même convention que assets/css/home.css pour l'Accueil).
   ========================================================================= */

.pf-hub h1, .pf-hub h2, .pf-hub h3 { margin: 0; }

/* Couleur explicite des titres sur fond sombre — même cause et même
   correctif que l'Accueil (diagnostic du 22 août 2026) : theme.json injecte
   "h1,h2,h3,h4,h5,h6{color:ink}" sans :where(), qui bat l'héritage. */
.pf-hub-hero h1 { color: var(--pf-color-white); }

/* Même mécanisme WordPress (blockGap) que l'Accueil, neutralisé ici
   uniquement pour cette page : le blockGap global reste actif partout
   ailleurs sur le site. */
main.pf-hub > * { margin-block-start: 0; }
.wp-site-blocks > main.pf-hub,
.wp-site-blocks > main.pf-hub + footer.wp-block-template-part {
	margin-block-start: 0;
}

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

.pf-hub-breadcrumb-wrap { background: var(--pf-color-mist); }
.pf-hub-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-hub-breadcrumb a { text-decoration: none; }
.pf-hub-breadcrumb a:hover { color: var(--pf-color-accent); }
.pf-hub-breadcrumb span { opacity: .5; }
.pf-hub-breadcrumb [aria-current] { color: var(--pf-color-navy); opacity: 1; }

/* -- Hero territoire — sobre, sans photo/vidéo (le hub n'en a pas de propre
   et vérifiée), un fond de marque suffit pour ce gabarit, comme le MVP. -- */

.pf-hub-hero { background: var(--pf-color-navy); color: var(--pf-color-white); padding: 72px var(--pf-container-padding) 64px; }
.pf-hub-hero .pf-eyebrow { color: var(--pf-color-sky); }
.pf-hub-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); max-width: 16ch; }
.pf-hub-hero-lead {
	font-family: var(--pf-font-body); font-weight: 500; font-size: clamp(1.05rem, 1.6vw, 1.2rem);
	max-width: 52ch; margin: 18px 0 0; color: rgba(255, 255, 255, .85);
}
.pf-hub-search-wrap { position: relative; max-width: 680px; }
.pf-hub-search-form {
	display: flex; gap: 10px; align-items: center;
	max-width: 680px; margin-top: 28px; padding: 8px;
	background: var(--pf-color-white); border-radius: var(--pf-radius-pill);
	box-shadow: 0 18px 42px rgba(0, 0, 0, .22);
}
.pf-hub-search-form:focus-within { box-shadow: 0 0 0 3px var(--pf-color-sky), 0 18px 42px rgba(0, 0, 0, .22); }
.pf-hub-search-form input {
	flex: 1 1 260px; min-width: 0; padding: 12px 16px;
	border: 0; outline: 0; background: transparent;
	font-family: var(--pf-font-body); font-size: 1rem; font-weight: 600; color: var(--pf-color-ink);
}
.pf-hub-search-submit { flex: none; min-height: 52px; padding-inline: 22px; gap: 9px; }
.pf-hub-search-submit svg { width: 22px; height: 22px; }
.pf-hub-search-suggestions {
	position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; right: 0;
	max-height: 226px; overflow-y: auto; margin: 0; padding: 6px;
	list-style: none; border-radius: 14px; background: var(--pf-color-white);
	box-shadow: 0 12px 32px rgba(0, 0, 0, .25); color: var(--pf-color-ink);
}
.pf-hub-search-suggestions[hidden] { display: none; }
.pf-hub-search-suggestions [role="option"] {
	padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: .95rem;
}
.pf-hub-search-suggestions [role="option"]:hover,
.pf-hub-search-suggestions [role="option"][aria-selected="true"] {
	background: var(--pf-color-sky); color: var(--pf-color-navy);
}

/* Correctif transversal (verdict visuel du 28 août 2026) : pf-hub-hero
   h1{max-width:16ch} ci-dessus laissait « ? » seul sur sa ligne pour
   « Où sauter en France ? ». Modificateur scopé à cette seule page — le Hub
   « Premier saut », déjà validé avec la règle de base ci-dessus, n'est pas
   concerné. */
.pf-hub-hero.pf-hub-hero--wide-title h1 { max-width: 24ch; }

/* -- Sections génériques de la page ----------------------------------------- */

.pf-hub-section { padding: 88px var(--pf-container-padding); }
.pf-hub-section > .pf-container { padding-inline: 0; }
.pf-hub-section--mist { background: var(--pf-color-mist); }
.pf-hub-section-head { margin-bottom: 44px; }
.pf-hub-section-head h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); max-width: 16ch; margin: 0; }
.pf-hub-eyebrow--accent { color: var(--pf-color-accent); }
.pf-hub-heading--navy { color: var(--pf-color-navy); margin: 0; }

/* -- Carte de France interactive --------------------------------------------
   Composant identique à celui de l'Accueil (assets/css/home.css), dupliqué
   ici sous le préfixe `.pf-hub-*` — convention du projet : chaque page
   MVP porte sa propre feuille de style autonome, pas de composant partagé
   extrait à ce stade (voir CONTRAT-DESIGN-MVP.md, "règle de construction"). */

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

/* -- Pages déjà disponibles — fiches "annuaire" sans photo -------------------
   Pictogramme générique (jamais une photo), catégorie courte, titre, adresse,
   puis un lien terminal — modèle repris du MVP (.listing-card). Les quatre
   cartes sont aria-disabled tant que leur page WordPress n'existe pas (voir
   en-tête de patterns/hub-ou-sauter.php) : texte et faits inchangés, seule
   l'interactivité est retirée. */

.pf-hub-listing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; align-items: stretch; }
.pf-hub-listing-card {
	background: var(--pf-color-white); border: 1px solid rgba(12, 29, 61, .1); border-radius: var(--pf-radius-lg);
	padding: 26px; min-height: 280px; box-shadow: var(--pf-shadow-sm); display: flex; flex-direction: column;
	transition: box-shadow 150ms ease, transform 150ms ease;
}
a.pf-hub-listing-card:not([aria-disabled="true"]):hover { box-shadow: var(--pf-shadow-md); transform: translateY(-2px); }
.pf-hub-listing-head { display: flex; flex: 1 1 auto; gap: 16px; align-items: flex-start; }
.pf-hub-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-hub-listing-icon svg { width: 26px; height: 26px; stroke: var(--pf-color-navy); }
.pf-hub-listing-icon.tone-rose { background: rgba(254, 45, 123, .12); }
.pf-hub-listing-icon.tone-rose svg { stroke: var(--pf-color-accent-strong); }
.pf-hub-listing-category { font-family: var(--pf-font-heading); font-weight: 700; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: var(--pf-color-slate); margin: 0 0 4px; }
.pf-hub-listing-title { font-size: 1.3rem; color: var(--pf-color-navy); margin: 0 0 8px; }
.pf-hub-listing-address { font-family: var(--pf-font-body); font-weight: 500; font-size: .95rem; color: var(--pf-color-ink); margin: 0; }
.pf-hub-listing-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; }
a.pf-hub-listing-card:not([aria-disabled="true"]):hover .pf-hub-listing-link { color: var(--pf-color-accent); }
.pf-hub-directory-explainer { margin-top: 48px; }

/* Le Hub « Premier saut » réemploie la grille de guides de la famille
   Destination. Ici seulement, une bordure et une ombre plus présentes
   détachent ses quatre points de départ du fond sans changer les cartes des
   fiches territoriales. */
.pf-hub .pf-guides-grid .pf-guide-card {
	border: 1px solid rgba(12, 29, 61, .14); border-top: 5px solid var(--pf-color-sky);
	box-shadow: 0 8px 20px rgba(12, 29, 61, .10);
}
.pf-hub .pf-guides-grid .pf-guide-card.tone-rose { border-top-color: var(--pf-color-accent); }
.pf-first-jump__directory-cta { margin: 32px 0 0; }

@media (max-width: 1024px) {
	.pf-hub-france-map-layout { grid-template-columns: 1fr; }
	.pf-hub-map-region-name { display: none; }
	.pf-hub-region-links { display: block; }
	.pf-hub-listing-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
	.pf-hub-hero { padding-block: 56px; }
	.pf-hub-search-form { align-items: stretch; border-radius: var(--pf-radius-lg); }
	.pf-hub-search-form input { flex-basis: 0; width: 0; }
	.pf-hub-search-submit { width: 52px; min-height: 52px; padding: 0; justify-content: center; }
	.pf-hub-search-submit span { display: none; }
	.pf-hub-region-links ul { grid-template-columns: 1fr; }
	.pf-hub-listing-grid { grid-template-columns: 1fr; }
}

.pf-hub .entry-content > .pf-hub-hero { margin-block-start: 0; }