/*
Theme Name: PANA-LOISIRS
Theme URI: https://www.pana-loisirs.fr/
Template: twentytwentyfour
Author: Oclic
Author URI: https://www.oclic.fr/
Description: Thème enfant « block » de Twenty Twenty-Four pour l'association omnisports PANA-LOISIRS (13 sections, ~1700 adhérents). Identité blanche dominante avec accents issus du logo (bleu primaire, orange secondaire, vert tertiaire, indigo Handisport), pensée pour l'édition par des bénévoles via l'éditeur de site (FSE) et conforme aux contrastes RGAA niveau AA. Présentation uniquement : toute la logique métier est portée par l'extension « pana-adhesions ».
Version: 1.5.3
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pana-loisirs
Tags: full-site-editing, block-styles, blog, education, custom-colors, accessibility-ready, translation-ready
*/

/*
 * ---------------------------------------------------------------------------
 *  PANA-LOISIRS — styles complémentaires
 * ---------------------------------------------------------------------------
 *  L'essentiel de l'apparence est déclaré dans theme.json (palette, typographie,
 *  espacements, styles d'éléments). Cette feuille ne contient QUE les quelques
 *  composants spécifiques qui ne s'expriment pas naturellement en theme.json :
 *  cartes de section, bandeau « hero » et accessoires d'accessibilité.
 *
 *  Charte « blanc dominant + accents du logo » : le blanc reste majoritaire,
 *  les couleurs (bleu #1C56E5, orange #F2701F, vert #33C13A / #1F9E3C en texte)
 *  ponctuent. Les couleurs réutilisent les variables CSS générées par theme.json
 *  (--wp--preset--color--<slug>) afin de rester cohérentes et modifiables par les
 *  bénévoles depuis l'éditeur de site, sans toucher au code.
 *  Tous les couples texte/fond respectent un ratio de contraste >= 4,5:1
 *  (texte courant) ou >= 3:1 (grands titres), conformément au RGAA AA.
 * ---------------------------------------------------------------------------
 */

/* -- Lien d'évitement (accessibilité clavier RGAA 12.7) -------------------- */
/* Cible #pana-contenu (ancre du conteneur principal). */
.pana-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 0.75rem 1.25rem;
	background-color: var( --wp--preset--color--bleu, #1c56e5 );
	color: #ffffff;
	font-weight: 700;
	text-decoration: none;
}

.pana-skip-link:focus {
	left: 0;
}

/* -- Focus visible renforcé (RGAA 10.7) ------------------------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 3px solid var( --wp--preset--color--bleu, #1c56e5 );
	outline-offset: 2px;
}

/* =========================================================================
 *  EN-TÊTE — barre sur fond crème, fine bordure basse, nav éditoriale
 * ========================================================================= */

.pana-header {
	background-color: var( --wp--preset--color--papier, #f5f1e8 );
	border-bottom: 1px solid var( --wp--preset--color--bordure, #e0d9c5 );
}

.pana-header__barre {
	padding-top: clamp( 0.85rem, 2vw, 1.15rem );
	padding-bottom: clamp( 0.85rem, 2vw, 1.15rem );
}

/* Nom du site : Bricolage, compact, tracking serré. */
.pana-header__nom a,
.pana-header__nom {
	font-family: var( --wp--preset--font-family--titres, "Bricolage Grotesque", sans-serif );
	letter-spacing: -0.02em;
}

/* Liens de navigation : encre, sans soulignement, bleu au survol. */
.pana-header__nav .wp-block-navigation-item__content {
	font-family: var( --wp--preset--font-family--titres, "Bricolage Grotesque", sans-serif );
	font-weight: 600;
	color: var( --wp--preset--color--encre, #15233b );
	text-decoration: none;
}

.pana-header__nav .wp-block-navigation-item__content:hover,
.pana-header__nav .wp-block-navigation-item__content:focus {
	color: var( --wp--preset--color--bleu, #1c56e5 );
}

/* Bouton « Adhérer » : pilule bleue (déjà géré par theme.json). « Mon espace » :
   lien fantôme discret en encre. */
.pana-header__espace .wp-block-button__link {
	background-color: transparent;
	color: var( --wp--preset--color--encre, #15233b );
	border: 1px solid var( --wp--preset--color--papier-3, #e0d9c5 );
}

.pana-header__espace .wp-block-button__link:hover,
.pana-header__espace .wp-block-button__link:focus {
	background-color: var( --wp--preset--color--encre, #15233b );
	color: var( --wp--preset--color--papier, #f5f1e8 );
	border-color: var( --wp--preset--color--encre, #15233b );
}

/* =========================================================================
 *  PIED DE PAGE — fond navy, multi-colonnes, liens crème atténués
 * ========================================================================= */

.pana-footer {
	padding-top: clamp( 2.5rem, 6vw, 4rem );
	padding-bottom: clamp( 1.75rem, 4vw, 2.5rem );
}

.pana-footer__colonnes {
	gap: clamp( 1.75rem, 4vw, 3rem );
	margin-bottom: clamp( 1.75rem, 4vw, 2.5rem );
}

.pana-footer__bloc {
	flex: 1 1 14rem;
	min-width: 0;
}

.pana-footer__nom,
.pana-footer__nom a {
	font-family: var( --wp--preset--font-family--titres, "Bricolage Grotesque", sans-serif );
	color: var( --wp--preset--color--papier, #f5f1e8 );
	letter-spacing: -0.02em;
	text-decoration: none;
}

.pana-footer__titre {
	font-family: var( --wp--preset--font-family--titres, "Bricolage Grotesque", sans-serif );
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --wp--preset--color--orange, #f2701f );
	margin: 0 0 1rem;
}

.pana-footer__baseline,
.pana-footer__contact {
	color: rgba( 245, 241, 232, 0.7 );
}

.pana-footer__contact a,
.pana-footer__nav .wp-block-navigation-item__content,
.pana-footer__legal-nav .wp-block-navigation-item__content {
	color: rgba( 245, 241, 232, 0.7 );
	text-decoration: none;
}

.pana-footer__contact a:hover,
.pana-footer__contact a:focus,
.pana-footer__nav .wp-block-navigation-item__content:hover,
.pana-footer__nav .wp-block-navigation-item__content:focus,
.pana-footer__legal-nav .wp-block-navigation-item__content:hover,
.pana-footer__legal-nav .wp-block-navigation-item__content:focus {
	color: var( --wp--preset--color--papier, #f5f1e8 );
	text-decoration: underline;
}

.pana-footer__separateur {
	border-color: rgba( 245, 241, 232, 0.12 );
}

.pana-footer__copyright {
	color: rgba( 245, 241, 232, 0.55 );
	margin: 0;
}

/* =========================================================================
 *  APPEL À L'ACTION « ADHÉRER » (bloc pana/cta-adherer → .pana-cta)
 *  Bandeau navy avec titre Bricolage et bouton bleu pilule.
 * ========================================================================= */

.pana-accueil__cta,
.pana-section-page__cta {
	margin-top: clamp( 3rem, 7vw, 5.5rem );
}

.pana-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp( 1rem, 3vw, 1.5rem );
	max-width: 1200px;
	margin: 0 auto;
	padding: clamp( 2.25rem, 6vw, 4rem ) clamp( 1.5rem, 5vw, 3rem );
	text-align: center;
	background-color: var( --wp--preset--color--nuit, #0a1628 );
	color: var( --wp--preset--color--papier, #f5f1e8 );
	border-radius: 24px;
}

.pana-cta__titre {
	margin: 0;
	font-family: var( --wp--preset--font-family--titres, "Bricolage Grotesque", sans-serif );
	font-weight: 700;
	font-size: clamp( 1.75rem, 5vw, 3rem );
	line-height: 1;
	letter-spacing: -0.03em;
	color: var( --wp--preset--color--papier, #f5f1e8 );
}

.pana-cta__bouton {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem 1.85rem;
	background-color: var( --wp--preset--color--bleu, #1c56e5 );
	color: #ffffff;
	font-family: var( --wp--preset--font-family--titres, "Bricolage Grotesque", sans-serif );
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	border-radius: 999px;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.pana-cta__bouton:hover,
.pana-cta__bouton:focus-visible {
	background-color: var( --wp--preset--color--bleu-deep, #1442b8 );
	transform: translateY( -2px );
	color: #ffffff;
}

@media ( prefers-reduced-motion: reduce ) {
	.pana-cta__bouton:hover,
	.pana-cta__bouton:focus-visible {
		transform: none;
	}
}

/* -- Bandeau « hero » d'accueil ------------------------------------------- */
/*
 * Maquette éditoriale : fond NAVY (#0A1628) dominant, texte crème, motif grille
 * subtil + halos floutés bleu/orange. Le titre géant (Bricolage Grotesque) wrappe
 * proprement ; le dernier segment ressort en orange. Contrastes RGAA AA :
 * crème #F5F1E8 sur navy (>= 12:1) et orange #F2701F sur navy en gros titre (>= 3:1).
 */
.pana-hero {
	position: relative;
	padding: clamp( 2.5rem, 6vw, 5rem ) clamp( 1.25rem, 5vw, 3rem );
	background-color: var( --wp--preset--color--nuit, #0a1628 );
	color: var( --wp--preset--color--papier, #f5f1e8 );
	overflow: hidden;
}

/* Motif grille décoratif (équivaut au bg-grid de la maquette). */
.pana-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient( rgba( 245, 241, 232, 0.05 ) 1px, transparent 1px ),
		linear-gradient( 90deg, rgba( 245, 241, 232, 0.05 ) 1px, transparent 1px );
	background-size: 34px 34px;
}

/* Halos d'accent flous (décor pur, derrière le contenu). */
.pana-hero__halos {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.pana-hero__halo {
	position: absolute;
	border-radius: 50%;
	filter: blur( 80px );
	opacity: 0.4;
}

.pana-hero__halo--bleu {
	top: -6%;
	right: -8%;
	width: 42vw;
	max-width: 540px;
	height: 42vw;
	max-height: 540px;
	background: radial-gradient( circle, rgba( 28, 86, 229, 0.55 ) 0%, rgba( 28, 86, 229, 0 ) 62% );
}

.pana-hero__halo--orange {
	bottom: -12%;
	left: -6%;
	width: 32vw;
	max-width: 420px;
	height: 32vw;
	max-height: 420px;
	background: radial-gradient( circle, rgba( 242, 112, 31, 0.40 ) 0%, rgba( 242, 112, 31, 0 ) 62% );
}

/* Le vert reste un accent ponctuel très discret. */
.pana-hero__halo--vert {
	top: 36%;
	right: 26%;
	width: 20vw;
	max-width: 300px;
	height: 20vw;
	max-height: 300px;
	background: radial-gradient( circle, rgba( 51, 193, 58, 0.18 ) 0%, rgba( 51, 193, 58, 0 ) 65% );
}

/* Le contenu passe au-dessus des halos et du motif. */
.pana-hero .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
}

.pana-hero__contenu {
	text-align: left;
}

/* Boutons du hero sur fond navy. Le bouton plein reste bleu (theme.json).
   Le bouton fantôme « Mot du Président » : bordure crème, texte crème. */
.pana-hero .wp-block-buttons {
	justify-content: flex-start;
}

.pana-hero__cta-ghost .wp-block-button__link,
.pana-hero .is-style-outline.pana-hero__cta-ghost .wp-block-button__link {
	background-color: rgba( 245, 241, 232, 0.06 );
	color: var( --wp--preset--color--papier, #f5f1e8 );
	border: 1px solid rgba( 245, 241, 232, 0.25 );
}

.pana-hero__cta-ghost .wp-block-button__link:hover,
.pana-hero__cta-ghost .wp-block-button__link:focus {
	background-color: rgba( 245, 241, 232, 0.14 );
	color: var( --wp--preset--color--papier, #f5f1e8 );
	border-color: rgba( 245, 241, 232, 0.4 );
}

/* Sur-titre : point orange pulsant + saison + trait + repère. */
.pana-hero .pana-hero__surtitre {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 clamp( 1.25rem, 3vw, 1.75rem );
	font-family: var( --wp--preset--font-family--titres, "Bricolage Grotesque", sans-serif );
	font-size: var( --wp--preset--font-size--small, 0.95rem );
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var( --wp--preset--color--papier, #f5f1e8 );
}

.pana-hero__point {
	display: inline-block;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 999px;
	background-color: var( --wp--preset--color--orange, #f2701f );
	animation: pana-pulse-accent 2s infinite;
}

.pana-hero__surtitre-saison {
	color: var( --wp--preset--color--orange, #f2701f );
}

.pana-hero__surtitre-trait {
	flex: 0 0 auto;
	width: clamp( 1.5rem, 6vw, 5rem );
	height: 1px;
	background-color: rgba( 245, 241, 232, 0.25 );
}

.pana-hero__surtitre-repere {
	color: rgba( 245, 241, 232, 0.6 );
	letter-spacing: 0.16em;
}

/* Titre géant Bricolage : line-height serrée, wrap maîtrisé, dernier mot orange. */
.pana-hero .pana-hero__titre {
	margin: 0 0 clamp( 1.25rem, 3vw, 2rem );
	font-family: var( --wp--preset--font-family--titres, "Bricolage Grotesque", sans-serif );
	font-weight: 700;
	font-size: clamp( 3rem, 9vw, 8.75rem );
	line-height: 0.92;
	letter-spacing: -0.04em;
	color: var( --wp--preset--color--papier, #f5f1e8 );
	overflow-wrap: break-word;
}

.pana-hero__titre-pop {
	color: var( --wp--preset--color--orange, #f2701f );
}

.pana-hero .pana-hero__sous-titre {
	max-width: 46ch;
	margin: 0;
	font-size: var( --wp--preset--font-size--medium, 1.125rem );
	line-height: 1.6;
	color: rgba( 245, 241, 232, 0.78 );
}

/* Pulsation du point d'accent (sur-titre + dot éventuels). */
@keyframes pana-pulse-accent {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba( 242, 112, 31, 0.5 );
	}

	50% {
		box-shadow: 0 0 0 8px rgba( 242, 112, 31, 0 );
	}
}

/* Respect des préférences de mouvement réduit : pas d'effet superflu, halos atténués. */
@media ( prefers-reduced-motion: reduce ) {
	.pana-hero__halo {
		opacity: 0.3;
	}

	.pana-hero__point {
		animation: none;
	}
}

/* -- Grille de cartes de section ------------------------------------------ */
/*
 * Le bloc dynamique « pana/grille-sections » génère ce balisage.
 * La grille s'adapte automatiquement (autofit) ; chaque carte expose une
 * variable --pana-section-couleur reprenant la couleur d'identité de la
 * section (meta « _pana_couleur » du CPT), avec un repli bleu primaire.
 */
.pana-grille-sections {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 16rem, 1fr ) );
	gap: clamp( 1rem, 3vw, 1.75rem );
	margin: 0;
	padding: 0;
	list-style: none;
}

.pana-carte-section {
	--pana-section-couleur: var( --wp--preset--color--bleu, #1c56e5 );
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: var( --wp--preset--color--blanc, #ffffff );
	border: 1px solid var( --wp--preset--color--bordure, #e3e9f2 );
	border-top: 4px solid var( --pana-section-couleur );
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var( --wp--preset--shadow--carte, 0 2px 12px rgba( 28, 86, 229, 0.08 ) );
	transition: transform 0.22s cubic-bezier( 0.22, 1, 0.36, 1 ),
		box-shadow 0.22s cubic-bezier( 0.22, 1, 0.36, 1 ),
		border-color 0.22s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.pana-carte-section:hover,
.pana-carte-section:focus-within {
	transform: translateY( -3px );
	border-color: var( --wp--preset--color--bleu, #1c56e5 );
	box-shadow: var( --wp--preset--shadow--carte-survol, 0 12px 28px rgba( 28, 86, 229, 0.14 ) );
}

.pana-carte-section__media img {
	display: block;
	width: 100%;
	height: 10rem;
	object-fit: cover;
}

.pana-carte-section__corps {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.25rem;
}

.pana-carte-section__titre {
	margin: 0;
	font-family: var( --wp--preset--font-family--titres, sans-serif );
	font-size: var( --wp--preset--font-size--large, 1.375rem );
	line-height: 1.2;
}

.pana-carte-section__titre a {
	color: var( --wp--preset--color--encre, #15233b );
	text-decoration: none;
}

.pana-carte-section__titre a:hover,
.pana-carte-section__titre a:focus {
	text-decoration: underline;
}

.pana-carte-section__extrait {
	flex: 1 1 auto;
	margin: 0;
	color: var( --wp--preset--color--muted, #5a6b7e );
	font-size: var( --wp--preset--font-size--small, 0.95rem );
}

/* Étiquette de couleur reprenant l'identité de la section. */
.pana-carte-section__etiquette {
	align-self: flex-start;
	padding: 0.2rem 0.65rem;
	border-radius: 999px;
	background-color: var( --pana-section-couleur );
	color: #ffffff; /* Repli ; le rendu PHP choisit noir/blanc selon le contraste. */
	font-size: 0.8rem;
	font-weight: 700;
}

/* Pastille d'accent + emoji (cartes de repli statiques : nom seul, sans prix). */
.pana-carte-section__pastille {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin: 0 0 0.25rem;
	border-radius: 999px;
	/* Aplat très clair de la couleur d'accent (~12%) sur fond blanc. */
	background-color: color-mix( in srgb, var( --pana-section-couleur ) 12%, #ffffff );
	font-size: 1.5rem;
	line-height: 1;
}

.pana-carte-section__lien {
	align-self: flex-start;
	margin-top: 0.25rem;
	font-weight: 700;
	color: var( --pana-section-couleur );
	text-decoration: none;
}

.pana-carte-section__lien::after {
	content: " \2192"; /* Flèche droite. */
	display: inline-block;
	transition: transform 0.22s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.pana-carte-section__lien:hover,
.pana-carte-section__lien:focus {
	text-decoration: underline;
}

.pana-carte-section__lien:hover::after,
.pana-carte-section__lien:focus::after {
	transform: translateX( 0.25rem );
}

/* -- Encart « mot du président » (bloc pana/mot-president) ----------------- */
/*
 * Sur la page d'accueil, le bloc est posé dans une section sombre
 * (.pana-accueil__president--sombre) : fond navy, texte crème, citation Bricolage,
 * segment surligné en orange (.pana-surligne). Hors contexte sombre, il garde un
 * rendu clair sur crème (repli).
 */
.pana-mot-president {
	display: flex;
	flex-wrap: wrap;
	gap: clamp( 1.5rem, 4vw, 3rem );
	align-items: center;
	padding: clamp( 1.5rem, 4vw, 2.5rem );
	background-color: var( --wp--preset--color--papier-2, #ece6d6 );
	border: 1px solid var( --wp--preset--color--bordure, #e0d9c5 );
	border-left: 4px solid var( --wp--preset--color--orange, #f2701f );
	border-radius: 16px;
}

.pana-mot-president__photo {
	flex: 0 0 auto;
}

.pana-mot-president__photo img {
	width: 7.5rem;
	height: 7.5rem;
	object-fit: cover;
	border-radius: 50%;
}

.pana-mot-president__corps {
	flex: 1 1 22rem;
	min-width: 0;
}

.pana-mot-president__titre {
	margin: 0 0 0.5rem;
	font-family: var( --wp--preset--font-family--titres, "Bricolage Grotesque", sans-serif );
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var( --wp--preset--color--orange-deep, #d85e12 );
}

.pana-mot-president__texte,
.pana-mot-president__texte p {
	font-family: var( --wp--preset--font-family--titres, "Bricolage Grotesque", sans-serif );
	font-weight: 500;
	font-size: clamp( 1.35rem, 3.2vw, 2rem );
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var( --wp--preset--color--encre, #15233b );
}

.pana-mot-president__texte p {
	margin: 0 0 0.75rem;
}

.pana-mot-president__texte p:last-child {
	margin-bottom: 0;
}

.pana-mot-president__signature {
	margin: 1rem 0 0;
	font-style: italic;
	font-weight: 700;
	color: var( --wp--preset--color--muted, #5a6b7e );
}

/* Segment surligné dans la citation : aplat orange, texte navy (comme la maquette). */
.pana-mot-president .pana-surligne,
.pana-mot-president__texte mark {
	background-color: var( --wp--preset--color--orange, #f2701f );
	color: var( --wp--preset--color--nuit, #0a1628 );
	padding: 0.05em 0.4em;
	border-radius: 6px;
	font-weight: 700;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* -- Section « mot du président » sombre (page d'accueil) ------------------ */
.pana-accueil__president--sombre {
	position: relative;
	background-color: var( --wp--preset--color--nuit, #0a1628 );
	color: var( --wp--preset--color--papier, #f5f1e8 );
}

/* Dans le contexte sombre, l'encart devient transparent (pas de carte crème). */
.pana-accueil__president--sombre .pana-mot-president {
	background-color: transparent;
	border: 0;
	border-left: 0;
	padding: 0;
}

.pana-accueil__president--sombre .pana-mot-president__texte,
.pana-accueil__president--sombre .pana-mot-president__texte p {
	color: var( --wp--preset--color--papier, #f5f1e8 );
}

.pana-accueil__president--sombre .pana-mot-president__titre {
	color: var( --wp--preset--color--orange, #f2701f );
}

.pana-accueil__president--sombre .pana-mot-president__signature {
	color: rgba( 245, 241, 232, 0.6 );
}

.pana-accueil__president--sombre .pana-mot-president__photo img {
	border: 2px solid rgba( 245, 241, 232, 0.15 );
}

/* =========================================================================
 *  HERO NAVY ÉDITORIAL — sur-titre (générique), compteurs, marquee
 *  (Le sur-titre/halo/titre spécifiques au hero sont définis plus haut,
 *   scopés sous .pana-hero. Le sélecteur générique ci-dessous sert AUSSI à
 *   la page d'une section, sur fond crème : orange foncé pour le contraste.)
 * ========================================================================= */

.pana-hero__surtitre {
	display: block;
	margin: 0 0 0.5rem;
	font-family: var( --wp--preset--font-family--titres, "Bricolage Grotesque", sans-serif );
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --wp--preset--color--orange-deep, #d85e12 );
}

/* Compteurs (chiffres-clés du club) : 4 stats en grille, séparées de fines lignes.
   Label au-dessus, gros chiffre Bricolage crème en dessous (comme la maquette). */
.pana-hero__compteurs {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: 1px;
	margin: clamp( 2.5rem, 6vw, 4.5rem ) 0 0;
	padding: 0;
	list-style: none;
	background-color: rgba( 245, 241, 232, 0.1 );
	border: 1px solid rgba( 245, 241, 232, 0.1 );
}

.pana-hero__compteur {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	min-width: 0;
	padding: clamp( 1rem, 2.5vw, 1.5rem );
	background-color: var( --wp--preset--color--nuit, #0a1628 );
}

.pana-hero__compteur-label {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba( 245, 241, 232, 0.55 );
	max-width: 100%;
	overflow-wrap: anywhere;
}

.pana-hero__compteur-nombre {
	font-family: var( --wp--preset--font-family--titres, "Bricolage Grotesque", sans-serif );
	font-size: clamp( 1.8rem, 5vw, 2.75rem );
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var( --wp--preset--color--papier, #f5f1e8 );
	font-variant-numeric: tabular-nums;
}

/* Marquee décoratif des 13 sports : bande plus sombre, points orange. */
.pana-marquee {
	position: relative;
	z-index: 1;
	width: 100%;
	margin-top: clamp( 2.25rem, 5vw, 3.5rem );
	padding: clamp( 0.85rem, 2vw, 1.25rem ) 0;
	background-color: rgba( 0, 0, 0, 0.25 );
	border-top: 1px solid rgba( 245, 241, 232, 0.07 );
	border-bottom: 1px solid rgba( 245, 241, 232, 0.07 );
	border-radius: 14px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient( 90deg, transparent, #000 12%, #000 88%, transparent );
	mask-image: linear-gradient( 90deg, transparent, #000 12%, #000 88%, transparent );
}

.pana-marquee__piste {
	display: inline-flex;
	gap: 0;
	white-space: nowrap;
	will-change: transform;
	animation: pana-marquee 40s linear infinite;
}

.pana-marquee__item {
	display: inline-flex;
	align-items: center;
	font-family: var( --wp--preset--font-family--titres, "Bricolage Grotesque", sans-serif );
	font-weight: 600;
	font-size: 1rem;
	color: rgba( 245, 241, 232, 0.5 );
	padding: 0 1.25rem;
}

.pana-marquee__item::after {
	content: "●";
	margin-left: 2.5rem;
	font-size: 0.6em;
	color: var( --wp--preset--color--orange, #f2701f );
}

@keyframes pana-marquee {
	from {
		transform: translateX( 0 );
	}

	to {
		transform: translateX( -50% );
	}
}

/* =========================================================================
 *  GRILLE DES SECTIONS (rendu plugin [pana_sections]) — cartes WOW
 * ========================================================================= */

.pana-sections {
	margin: 0;
}

.pana-sections__titre {
	text-align: center;
	margin: 0 0 1rem;
}

/* Barre de filtre par tranche d'âge. */
.pana-sections__filtre {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin: 0 auto clamp( 1.5rem, 3vw, 2.25rem );
}

.pana-filtre-age {
	appearance: none;
	cursor: pointer;
	padding: 0.45rem 1rem;
	border: 1px solid var( --wp--preset--color--papier-3, #e0d9c5 );
	border-radius: 999px;
	background-color: var( --wp--preset--color--blanc, #ffffff );
	color: var( --wp--preset--color--encre, #15233b );
	font-family: var( --wp--preset--font-family--titres, "Bricolage Grotesque", sans-serif );
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.2;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.pana-filtre-age:hover {
	border-color: var( --wp--preset--color--nuit, #0a1628 );
	color: var( --wp--preset--color--nuit, #0a1628 );
	transform: translateY( -1px );
}

.pana-filtre-age.is-active {
	background-color: var( --wp--preset--color--nuit, #0a1628 );
	border-color: var( --wp--preset--color--nuit, #0a1628 );
	color: var( --wp--preset--color--papier, #f5f1e8 );
}

/* Filtre Handisport : teinte indigo dédiée pour le repérer immédiatement. */
.pana-filtre-age[data-pana-age="handisport"] {
	border-color: var( --wp--preset--color--handisport, #6366f1 );
	color: #3730a3;
}

.pana-filtre-age[data-pana-age="handisport"].is-active {
	background-color: var( --wp--preset--color--handisport, #6366f1 );
	border-color: var( --wp--preset--color--handisport, #6366f1 );
	color: #ffffff;
}

.pana-sections__aucun-resultat {
	text-align: center;
	margin: 1.5rem auto 0;
	color: var( --wp--preset--color--muted, #5a6b7e );
	font-weight: 700;
}

/* Grille auto-fit (les modificateurs --2/--3/--4 plafonnent le nombre de colonnes). */
.pana-sections__grille {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 15rem, 1fr ) );
	gap: clamp( 1rem, 2.5vw, 1.75rem );
	margin: 0;
	padding: 0;
	list-style: none;
}

@media ( min-width: 60rem ) {
	.pana-sections__grille--2 {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.pana-sections__grille--3 {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}

	.pana-sections__grille--4 {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}
}

.pana-sections__grille > * {
	min-width: 0;
}

.pana-sections__item {
	--pana-section-couleur: var( --wp--preset--color--bleu, #1c56e5 );
	display: flex;
}

.pana-sections__item[hidden] {
	display: none;
}

.pana-sections__lien {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	text-decoration: none;
	background-color: var( --wp--preset--color--blanc, #ffffff );
	border: 1px solid var( --wp--preset--color--bordure, #e0d9c5 );
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var( --wp--preset--shadow--carte, 0 2px 12px rgba( 10, 22, 40, 0.06 ) );
	transition: transform 0.4s cubic-bezier( 0.22, 1, 0.36, 1 ),
		box-shadow 0.4s cubic-bezier( 0.22, 1, 0.36, 1 ),
		border-color 0.4s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.pana-sections__item:hover .pana-sections__lien,
.pana-sections__lien:focus-visible {
	transform: translateY( -4px );
	border-color: var( --wp--preset--color--nuit, #0a1628 );
	box-shadow: var( --wp--preset--shadow--carte-survol, 0 20px 40px -20px rgba( 10, 22, 40, 0.18 ) );
}

/* Flèche ↗ en coin haut-droit (équivaut à l'icône arrow-up-right de la maquette). */
.pana-sections__coin {
	position: absolute;
	top: 0.9rem;
	right: 0.9rem;
	z-index: 2;
	font-size: 1.2rem;
	line-height: 1;
	color: var( --wp--preset--color--muted, #5a6b7e );
	transition: transform 0.4s cubic-bezier( 0.22, 1, 0.36, 1 ), color 0.4s ease;
}

.pana-sections__item:hover .pana-sections__coin,
.pana-sections__lien:focus-visible .pana-sections__coin {
	transform: translate( 4px, -4px );
	color: var( --wp--preset--color--nuit, #0a1628 );
}

/* Visuel = logo de la section : contenu (jamais rogné), centré, sur fond clair. */
.pana-sections__visuel {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 1.1rem;
	background-color: var( --wp--preset--color--blanc, #ffffff );
	border-bottom: 1px solid var( --wp--preset--color--bordure, #e3e9f2 );
}

.pana-sections__visuel img {
	display: block;
	width: auto;
	max-width: 100%;
	height: 8rem;
	object-fit: contain;
	transition: transform 0.4s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.pana-sections__item:hover .pana-sections__visuel img {
	transform: scale( 1.04 );
}

/* Pastille emoji (cartes sans visuel). */
.pana-sections__pastille {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	margin: 1.25rem 1.25rem 0;
	border-radius: 999px;
	background-color: color-mix( in srgb, var( --pana-section-couleur ) 14%, #ffffff );
	font-size: 1.65rem;
	line-height: 1;
}

.pana-sections__corps {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.25rem;
}

.pana-sections__badge {
	align-self: flex-start;
	padding: 0.2rem 0.65rem;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.pana-sections__badge--handisport {
	/* Indigo Handisport sur aplat clair : contraste texte AA (>= 4,5:1). */
	background-color: color-mix( in srgb, var( --wp--preset--color--handisport, #6366f1 ) 14%, #ffffff );
	color: #3730a3;
}

.pana-sections__nom {
	font-family: var( --wp--preset--font-family--titres, "Bricolage Grotesque", sans-serif );
	font-size: clamp( 1.3rem, 2.4vw, 1.6rem );
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var( --wp--preset--color--encre, #15233b );
}

.pana-sections__extrait {
	flex: 1 1 auto;
	font-size: var( --wp--preset--font-size--small, 0.95rem );
	color: var( --wp--preset--color--muted, #5a6b7e );
	line-height: 1.5;
}

.pana-sections__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.35rem;
	font-family: var( --wp--preset--font-family--titres, "Bricolage Grotesque", sans-serif );
	font-weight: 700;
	font-size: 0.95rem;
	color: var( --pana-section-couleur );
}

.pana-sections__fleche {
	display: inline-block;
	transition: transform 0.22s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.pana-sections__item:hover .pana-sections__fleche,
.pana-sections__lien:focus-visible .pana-sections__fleche {
	transform: translateX( 0.35rem );
}

/* =========================================================================
 *  MISE EN PAGE DE L'ACCUEIL — en-têtes de section, intro, actualités, agenda
 *  Charte éditoriale : fond crème, gros titres Bricolage, sur-titres orange.
 * ========================================================================= */

/* Le conteneur principal de l'accueil est sur fond crème. */
.pana-accueil {
	background-color: var( --wp--preset--color--papier, #f5f1e8 );
}

/* Sur-titre (eyebrow) générique des sections de l'accueil. */
.pana-accueil__surtitre {
	margin: 0 0 0.75rem;
	font-family: var( --wp--preset--font-family--titres, "Bricolage Grotesque", sans-serif );
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var( --wp--preset--color--orange-deep, #d85e12 );
}

/* Grand titre de la grille des sections (Bricolage). */
.pana-accueil__titre-sections {
	max-width: 16ch;
	margin: 0 0 0.75rem;
	font-size: clamp( 2rem, 5vw, 3.25rem );
	line-height: 0.98;
}

.pana-accueil__intro {
	max-width: 52ch;
	margin: 0 auto clamp( 2rem, 4vw, 3rem ) 0;
	color: var( --wp--preset--color--muted, #5a6b7e );
}

/* Titres de section (Actualités, Agenda) : grands titres Bricolage. */
.pana-accueil__titre {
	font-size: clamp( 1.75rem, 4vw, 2.5rem );
	line-height: 1;
	margin: 0 0 clamp( 1.5rem, 3vw, 2.25rem );
}

/* Rythme vertical entre les grandes sections de l'accueil. */
.pana-accueil__actus,
.pana-accueil__agenda {
	margin-top: clamp( 3rem, 7vw, 5.5rem );
	margin-bottom: clamp( 3rem, 7vw, 5.5rem );
}

/* Actualités : cartes sur fond blanc, bord fin crème, survol discret. */
.pana-accueil__grille .wp-block-post {
	background-color: var( --wp--preset--color--blanc, #ffffff );
	border: 1px solid var( --wp--preset--color--bordure, #e0d9c5 );
	border-radius: 16px;
	overflow: hidden;
	transition: transform 0.3s cubic-bezier( 0.22, 1, 0.36, 1 ),
		box-shadow 0.3s ease, border-color 0.3s ease;
}

.pana-accueil__grille .wp-block-post:hover {
	transform: translateY( -3px );
	border-color: var( --wp--preset--color--nuit, #0a1628 );
	box-shadow: var( --wp--preset--shadow--carte-survol, 0 20px 40px -20px rgba( 10, 22, 40, 0.18 ) );
}

.pana-accueil__grille .wp-block-post-featured-image img {
	border-radius: 0;
}

.pana-accueil__grille .wp-block-post-title,
.pana-accueil__grille .wp-block-post-date,
.pana-accueil__grille .wp-block-post-excerpt {
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

.pana-accueil__grille .wp-block-post-date {
	margin-top: 1rem;
	font-family: var( --wp--preset--font-family--monospace, "JetBrains Mono", monospace );
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --wp--preset--color--bleu, #1c56e5 );
}

.pana-accueil__grille .wp-block-post-title {
	font-size: clamp( 1.2rem, 2.4vw, 1.5rem );
	line-height: 1.1;
}

.pana-accueil__grille .wp-block-post-title a {
	color: var( --wp--preset--color--encre, #15233b );
	text-decoration: none;
}

.pana-accueil__grille .wp-block-post-title a:hover,
.pana-accueil__grille .wp-block-post-title a:focus {
	text-decoration: underline;
}

.pana-accueil__grille .wp-block-post-excerpt {
	padding-bottom: 1.25rem;
	color: var( --wp--preset--color--muted, #5a6b7e );
}

/* =========================================================================
 *  AGENDA / CALENDRIER (rendu plugin [pana_calendrier])
 * ========================================================================= */

.pana-calendrier__titre {
	text-align: center;
	margin: 0 0 1.25rem;
}

.pana-calendrier__filtre {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1.5rem;
}

.pana-calendrier__filtre select {
	padding: 0.5rem 0.75rem;
	border: 1px solid var( --wp--preset--color--bordure, #e3e9f2 );
	border-radius: 10px;
	background-color: var( --wp--preset--color--blanc, #ffffff );
	color: var( --wp--preset--color--encre, #15233b );
	font: inherit;
}

.pana-calendrier__liste {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pana-calendrier__evenement article {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 1rem 1.25rem;
	background-color: var( --wp--preset--color--blanc, #ffffff );
	border: 1px solid var( --wp--preset--color--bordure, #e3e9f2 );
	border-left: 4px solid var( --wp--preset--color--bleu, #1c56e5 );
	border-radius: 12px;
}

.pana-calendrier__date {
	font-family: var( --wp--preset--font-family--monospace, "JetBrains Mono", monospace );
	font-size: 0.85rem;
	font-weight: 700;
	color: var( --wp--preset--color--bleu, #1c56e5 );
	text-transform: capitalize;
}

.pana-calendrier__nom {
	margin: 0;
	font-size: var( --wp--preset--font-size--large, 1.375rem );
}

.pana-calendrier__nom a {
	color: var( --wp--preset--color--encre, #15233b );
	text-decoration: none;
}

.pana-calendrier__nom a:hover,
.pana-calendrier__nom a:focus {
	text-decoration: underline;
}

.pana-calendrier__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin: 0;
	font-size: var( --wp--preset--font-size--small, 0.95rem );
	color: var( --wp--preset--color--muted, #5a6b7e );
}

.pana-calendrier__type {
	display: inline-block;
	padding: 0.1rem 0.55rem;
	border-radius: 999px;
	background-color: var( --wp--preset--color--surface-2, #edf1f7 );
	font-weight: 700;
	color: var( --wp--preset--color--encre, #15233b );
}

/* =========================================================================
 *  PAGE D'UNE SECTION (single-pana_section) — hiérarchie & espacements
 * ========================================================================= */

.pana-section-page__hero {
	position: relative;
	background:
		radial-gradient( 65% 130% at 50% -25%, rgba( 28, 86, 229, 0.35 ) 0%, rgba( 28, 86, 229, 0 ) 60% ),
		var( --wp--preset--color--nuit, #0a1628 );
	color: var( --wp--preset--color--papier, #f5f1e8 );
	text-align: center;
}

/* Motif grille subtil sur le hero de section (cohérence avec l'accueil). */
.pana-section-page__hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient( rgba( 245, 241, 232, 0.05 ) 1px, transparent 1px ),
		linear-gradient( 90deg, rgba( 245, 241, 232, 0.05 ) 1px, transparent 1px );
	background-size: 34px 34px;
}

.pana-section-page__hero > * {
	position: relative;
	z-index: 1;
}

/* Logo de la section dans le hero : médaillon blanc centré, logo contenu (jamais rogné). */
.pana-section-page__logo {
	position: relative;
	z-index: 1;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto 1.25rem;
	padding: clamp( 0.8rem, 2vw, 1.25rem ) clamp( 1rem, 3vw, 1.6rem );
	background-color: #ffffff;
	border: 1px solid rgba( 245, 241, 232, 0.12 );
	border-radius: 20px;
	box-shadow: 0 14px 34px -16px rgba( 0, 0, 0, 0.5 );
}

.pana-section-page__logo img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: clamp( 110px, 20vw, 160px );
	margin: 0 auto;
	object-fit: contain;
}

/* Le hero de section est sombre : titre crème, sur-titre orange. */
.pana-section-page__titre {
	margin: 0;
	font-size: clamp( 2.25rem, 6vw, 4rem );
	line-height: 0.98;
	letter-spacing: -0.03em;
	color: var( --wp--preset--color--papier, #f5f1e8 );
}

.pana-section-page__surtitre {
	display: block;
	margin: 0 0 0.5rem;
	font-family: var( --wp--preset--font-family--titres, "Bricolage Grotesque", sans-serif );
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var( --wp--preset--color--orange, #f2701f );
}

.pana-section-page__presentation {
	margin-top: clamp( 1.5rem, 4vw, 2.5rem );
}

.pana-section-page__chapo {
	max-width: 60ch;
	margin: 0 auto;
	text-align: center;
	color: var( --wp--preset--color--muted, #5a6b7e );
}

.pana-section-page__infos,
.pana-section-page__agenda {
	margin-top: clamp( 2rem, 5vw, 3.5rem );
}

/* =========================================================================
 *  ANIMATIONS D'APPARITION AU DÉFILEMENT (fade-in)
 *  Activées en JS (classe .is-visible) via IntersectionObserver.
 * ========================================================================= */

.pana-anim {
	opacity: 0;
	transform: translateY( 24px );
	transition: opacity 0.6s cubic-bezier( 0.22, 1, 0.36, 1 ),
		transform 0.6s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.pana-anim.is-visible {
	opacity: 1;
	transform: none;
}

/* Filet de sécurité : sans JS, le contenu reste visible (no-js + fallback). */
.no-js .pana-anim {
	opacity: 1;
	transform: none;
}

/* -- Respect des préférences de mouvement réduit (RGAA / WCAG 2.3.3) ------- */
@media ( prefers-reduced-motion: reduce ) {
	.pana-carte-section,
	.pana-carte-section__lien::after,
	.pana-sections__lien,
	.pana-sections__visuel img,
	.pana-sections__fleche,
	.pana-filtre-age {
		transition: none;
	}

	.pana-carte-section:hover,
	.pana-carte-section:focus-within,
	.pana-sections__item:hover .pana-sections__lien,
	.pana-sections__lien:focus-visible {
		transform: none;
	}

	.pana-carte-section__lien:hover::after,
	.pana-carte-section__lien:focus::after,
	.pana-sections__item:hover .pana-sections__visuel img,
	.pana-sections__item:hover .pana-sections__fleche {
		transform: none;
	}

	/* Pas de défilement automatique ni d'apparition animée. */
	.pana-marquee__piste {
		animation: none;
		transform: none;
	}

	.pana-anim {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* =========================================================================
 *  RESPONSIVE — anti-débordement horizontal & adaptation mobile
 *  -------------------------------------------------------------------------
 *  Objectif : 100 % mobile, AUCUN scroll horizontal de 320 px à 1920 px.
 *  Approche en 3 niveaux :
 *    1. Contraintes structurelles toujours actives (hero, marquee, grilles).
 *    2. Filet de sécurité maison au point de rupture 980 px.
 *    3. Garde-fou ultime html/body overflow-x:hidden.
 * ========================================================================= */

/* -- 1. Contraintes structurelles (toutes largeurs) ----------------------- */

/* La couverture « alignfull » : on neutralise tout dépassement horizontal.
 * En thème « root padding aware », l'alignfull s'étend via des marges négatives
 * (root padding) ; .pana-hero { overflow:hidden } borne déjà ses décors. On se
 * contente de garantir qu'elle ne dépasse jamais la largeur visible (100%,
 * jamais 100vw qui inclurait la gouttière d'ascenseur sur desktop). */
.pana-hero.wp-block-cover.alignfull {
	max-width: 100%;
}

.pana-hero .wp-block-cover__inner-container {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

/* Le groupe contraint (contentSize 820px) génère un max-width:820px via une
 * classe wp-container-* ; on le borne à la largeur réellement disponible pour
 * qu'il ne provoque jamais de dépassement horizontal sur mobile. */
.pana-hero .wp-block-cover__inner-container > .wp-block-group {
	width: 100%;
	max-width: min( 820px, 100% );
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

/* Tous les enfants directs du groupe hero restent dans la largeur. */
.pana-hero .wp-block-cover__inner-container > .wp-block-group > * {
	max-width: 100%;
}

/* Le titre, le sous-titre et les boutons ne débordent jamais. */
.pana-hero .pana-hero__titre {
	max-width: 100%;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: auto;
}

.pana-hero .pana-hero__sous-titre {
	max-width: min( 48ch, 100% );
}

/* Compteurs : grille de 4 stats sur desktop ; on garantit l'absence de
 * débordement d'un compteur isolé sur petit écran. */
.pana-hero__compteurs {
	max-width: 100%;
}

.pana-hero__compteur {
	max-width: 100%;
}

.pana-hero__compteur-label {
	max-width: 100%;
	overflow-wrap: anywhere;
}

/* Sous 640px : la grille des compteurs passe à 2 colonnes (chiffres lisibles). */
@media ( max-width: 640px ) {
	.pana-hero__compteurs {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

/* Marquee : strictement borné à la largeur du parent ; l'animation se déroule
 * DANS un conteneur overflow:hidden et ne participe jamais à la largeur de la
 * page (max-width + min-width:0). */
.pana-marquee {
	max-width: 100%;
	min-width: 0;
	overflow-x: hidden;
}

/* La piste peut être plus large que l'écran (c'est le principe du défilement),
 * mais comme le parent masque le dépassement, elle ne crée pas de scroll. */
.pana-marquee__piste {
	max-width: none;
}

/* Grilles de sections : colonnes fluides qui ne débordent jamais. La taille
 * mini de chaque colonne ne dépasse pas 100 % du conteneur (min(100%, …)). */
.pana-grille-sections,
.pana-sections__grille {
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 16rem ), 1fr ) );
}

.pana-grille-sections > *,
.pana-sections__grille > * {
	min-width: 0;
}

/* Les actualités (boucle de requête) en grille native : enfants jamais
 * plus larges que leur colonne. */
.pana-accueil__grille .wp-block-post-template > li,
.pana-accueil__grille .wp-block-post {
	min-width: 0;
}

.pana-accueil__grille img {
	max-width: 100%;
	height: auto;
}

/* En-tête : la barre peut s'enrouler ; on garde logo + actions lisibles. */
.pana-header__barre {
	gap: 0.75rem 1rem;
}

.pana-header__identite {
	min-width: 0;
}

.pana-header__nom {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* -- 2. Filet de sécurité mobile (point de rupture maison : 980 px) -------- */
/*
 * Couvre les grands mobiles et tablettes pliables (Samsung Z Fold déplié
 * ~750 px, iPad mini/Air portrait). Tout conteneur du site reste borné, aucun
 * mot insécable (SIRET, URL, e-mail) ne pousse la largeur.
 */
@media ( max-width: 980px ) {
	.pana-accueil,
	.pana-accueil *,
	.pana-header,
	.pana-header *,
	.pana-hero,
	.pana-hero *,
	.pana-sections,
	.pana-sections *,
	.pana-grille-sections,
	.pana-grille-sections *,
	.pana-calendrier,
	.pana-calendrier *,
	.pana-section-page,
	.pana-section-page *,
	.pana-mot-president,
	.pana-mot-president * {
		max-width: 100%;
		min-width: 0;
		overflow-wrap: anywhere;
	}

	/* Exceptions : la piste du marquee et ses items ne doivent PAS être bornés
	 * ni coupés mot à mot (sinon les noms de sports se chevauchent). Le
	 * conteneur .pana-marquee masque déjà le dépassement. */
	.pana-marquee__piste,
	.pana-marquee__item {
		max-width: none;
		white-space: nowrap;
		overflow-wrap: normal;
		word-break: keep-all;
	}

	/* Les médias restent fluides. */
	.pana-accueil img,
	.pana-accueil svg,
	.pana-header img,
	.pana-header svg,
	.pana-hero img,
	.pana-hero svg,
	.pana-section-page img,
	.pana-section-page svg {
		max-width: 100%;
		height: auto;
	}

	/* Le bouton burger du menu doit rester cliquable (svg taille fixe). */
	.pana-header__nav .wp-block-navigation__responsive-container-open svg,
	.pana-header__nav .wp-block-navigation__responsive-container-close svg {
		width: 24px;
		height: 24px;
	}

	/* En-tête mobile : logo + burger + actions sur une ligne, sans débordement.
	 * La barre reste en flex avec retour à la ligne maîtrisé. */
	.pana-header__barre {
		flex-wrap: wrap;
		row-gap: 0.75rem;
		column-gap: 0.75rem;
	}

	/* Actions « Adhérer / Mon espace » : compactées mais accessibles. */
	.pana-header__actions {
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.pana-header__actions .wp-block-button__link {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	/* Compteurs centrés qui passent à la ligne harmonieusement. */
	.pana-hero__compteurs {
		gap: 1.25rem 1.75rem;
	}
}

/* -- Menu overlay mobile (burger) : lisibilité & confort tactile ---------- */
/*
 * Le bloc « navigation » s'ouvre en overlay plein écran sous 600 px (réglage
 * core overlayMenu:mobile). On soigne l'alignement et le confort : items
 * alignés à gauche, espacés, jamais collés au bord, cibles tactiles >= 44 px.
 */
.pana-header__nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: clamp( 1.5rem, 8vw, 3rem ) clamp( 1.25rem, 6vw, 2.5rem );
}

.pana-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
}

/* Liste du menu overlay : pile verticale, alignée à gauche, bien aérée. */
.pana-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.pana-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list {
	align-items: flex-start;
	justify-content: flex-start;
	gap: 0.35rem;
	width: 100%;
	text-align: left;
}

.pana-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
}

.pana-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 0.6rem 0.25rem;
	font-family: var( --wp--preset--font-family--titres, "Bricolage Grotesque", sans-serif );
	font-weight: 700;
	font-size: 1.15rem;
	color: var( --wp--preset--color--encre, #15233b );
	text-decoration: none;
	overflow-wrap: anywhere;
}

.pana-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.pana-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus {
	color: var( --wp--preset--color--bleu, #1c56e5 );
	text-decoration: underline;
}

/* -- Téléphones : grille des sections en 1 colonne sous ~520 px ------------ */
@media ( max-width: 520px ) {
	.pana-grille-sections,
	.pana-sections__grille,
	.pana-sections__grille--2,
	.pana-sections__grille--3,
	.pana-sections__grille--4 {
		grid-template-columns: 1fr;
	}

	/* Le hero respire moins large sur petit écran. */
	.pana-hero {
		border-radius: 16px;
	}
}

/* -- Tablettes étroites : 2 colonnes sous ~860 px ------------------------- */
@media ( min-width: 521px ) and ( max-width: 860px ) {
	.pana-grille-sections,
	.pana-sections__grille,
	.pana-sections__grille--2,
	.pana-sections__grille--3,
	.pana-sections__grille--4 {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

/* -- 3. Garde-fou ultime : aucun scroll horizontal global ----------------- */
/*
 * Dernier recours : même si un élément tiers (intégration, contenu collé)
 * tentait de dépasser, la page ne défile jamais horizontalement.
 */
html,
body {
	overflow-x: hidden;
	max-width: 100%;
}


/* =========================================================================
 *  RE-SKIN MAQUETTE — Navy + Vert acide (#1C56E5)
 *  Aligne le rendu sur la maquette interactive OCLIC : accent primaire = vert
 *  acide sur navy + crème (l'orange/bleu d'origine devient secondaire/retiré).
 *  Bloc d'override en fin de feuille : gagne par ordre de cascade.
 *  Ajout 2026-06-19.
 * ========================================================================= */
:root {
	--pana-lime: #1C56E5;
	--pana-lime-deep: #1442B8;
	--pana-navy: #0A1628;
	--pana-navy-2: #14233A;
	--pana-cream: #F5F1E8;
	--pana-orange: #FF5A1F;
}

/* -- HERO : mot d'accent + sur-titre en vert acide, halos verts ------------ */
.pana-hero__titre-pop {
	color: var(--pana-lime) !important;
	text-shadow: 0 0 32px rgba(197, 245, 66, 0.32);
}
.pana-hero__surtitre-saison { color: var(--pana-lime) !important; }
.pana-hero__point {
	background-color: var(--pana-lime) !important;
	animation: pana-pulse-lime 2s infinite;
}
@keyframes pana-pulse-lime {
	0%, 100% { box-shadow: 0 0 0 0 rgba(197, 245, 66, 0.5); }
	50% { box-shadow: 0 0 0 8px rgba(197, 245, 66, 0); }
}
/* Halos : glow vert dominant (le hero respire en navy + vert). */
.pana-hero__halo--bleu {
	background: radial-gradient(circle, rgba(197, 245, 66, 0.22) 0%, rgba(197, 245, 66, 0) 62%) !important;
}
.pana-hero__halo--orange {
	background: radial-gradient(circle, rgba(168, 217, 36, 0.20) 0%, rgba(168, 217, 36, 0) 62%) !important;
}
.pana-hero__halo--vert {
	top: auto;
	bottom: -18%;
	right: 50%;
	transform: translateX(50%);
	width: 70vw;
	max-width: 900px;
	height: 40vw;
	max-height: 520px;
	background: radial-gradient(circle, rgba(197, 245, 66, 0.20) 0%, rgba(197, 245, 66, 0) 60%) !important;
	opacity: 0.7;
}

/* -- BOUTONS : pleins = pilule vert acide / texte navy ; survol = navy/vert - */
.wp-block-button.is-style-fill > .wp-block-button__link.wp-element-button,
.pana-header__adherer .wp-block-button__link,
.pana-hero .is-style-fill .wp-block-button__link {
	background-color: var(--pana-lime) !important;
	background-image: none !important;
	color: var(--pana-navy) !important;
	border: 1px solid var(--pana-lime-deep) !important;
	border-radius: 999px !important;
	font-family: var(--wp--preset--font-family--titres, "Bricolage Grotesque", sans-serif);
	font-weight: 700 !important;
}
.wp-block-button.is-style-fill > .wp-block-button__link.wp-element-button:hover,
.wp-block-button.is-style-fill > .wp-block-button__link.wp-element-button:focus,
.pana-header__adherer .wp-block-button__link:hover,
.pana-header__adherer .wp-block-button__link:focus,
.pana-hero .is-style-fill .wp-block-button__link:hover,
.pana-hero .is-style-fill .wp-block-button__link:focus {
	background-color: var(--pana-navy) !important;
	color: var(--pana-lime) !important;
	border-color: var(--pana-navy) !important;
	transform: translateY(-2px);
}
/* Boutons fantômes/outline : restent sobres (encre sur crème, crème sur navy). */
.pana-hero__cta-ghost .wp-block-button__link { border-radius: 999px !important; }

/* Lien d'évitement + focus : on garde le navy (lisible), pas le bleu d'origine. */
.pana-skip-link { background-color: var(--pana-navy) !important; color: var(--pana-cream) !important; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .wp-block-button__link:focus-visible {
	outline-color: var(--pana-navy) !important;
}
.pana-header__nav .wp-block-navigation-item__content:hover,
.pana-header__nav .wp-block-navigation-item__content:focus { color: var(--pana-lime-deep) !important; }

/* -- EYEBROWS (sur-titres) : gris ardoise sobre (et non orange) ------------ */
.pana-accueil__surtitre { color: var(--wp--preset--color--muted, #5A6B7E) !important; }

/* -- MARQUEE : points verts ----------------------------------------------- */
.pana-marquee__item::after { color: var(--pana-lime) !important; }

/* -- MOT DU PRÉSIDENT : surlignage vert, eyebrow crème atténué ------------- */
.pana-mot-president .pana-surligne,
.pana-mot-president__texte mark {
	background-color: var(--pana-lime) !important;
	color: var(--pana-navy) !important;
}
.pana-accueil__president--sombre .pana-mot-president__titre { color: rgba(245, 241, 232, 0.55) !important; }

/* -- CARTES SECTION : flèche ↗ verte (décor) ------------------------------ */
.pana-sections__coin { color: var(--pana-lime-deep) !important; }
.pana-sections__item:hover .pana-sections__coin,
.pana-sections__lien:focus-visible .pana-sections__coin { color: var(--pana-lime-deep) !important; }
/* La pastille emoji des cartes sans logo : aplat vert très clair. */
.pana-sections__pastille { background-color: rgba(197, 245, 66, 0.16) !important; }

/* =========================================================================
 *  CTA FINAL « Inscriptions ouvertes » : panneau VERT ACIDE, bouton navy
 * ========================================================================= */
.pana-cta {
	background-color: var(--pana-lime) !important;
	color: var(--pana-navy) !important;
	border-radius: 28px;
	overflow: hidden;
	position: relative;
}
.pana-cta::after {
	content: "";
	position: absolute;
	top: -40%;
	right: -6%;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: rgba(10, 22, 40, 0.06);
	pointer-events: none;
}
.pana-cta__titre { color: var(--pana-navy) !important; }
.pana-cta__bouton {
	background-color: var(--pana-navy) !important;
	color: var(--pana-lime) !important;
	border: 1px solid var(--pana-navy) !important;
}
.pana-cta__bouton:hover,
.pana-cta__bouton:focus-visible {
	background-color: var(--pana-navy-2) !important;
	color: var(--pana-lime) !important;
}

/* =========================================================================
 *  PIED DE PAGE : fond CRÈME (et non navy), texte encre, titres ardoise
 * ========================================================================= */
.pana-footer.has-nuit-background-color,
.pana-footer {
	background-color: var(--pana-cream) !important;
	color: var(--pana-navy) !important;
	border-top: 1px solid var(--wp--preset--color--bordure, #E0D9C5);
}
.pana-footer__nom, .pana-footer__nom a { color: var(--pana-navy) !important; }
.pana-footer__titre { color: var(--wp--preset--color--muted, #5A6B7E) !important; }
.pana-footer__baseline, .pana-footer__contact { color: var(--wp--preset--color--muted, #5A6B7E) !important; }
.pana-footer__contact a,
.pana-footer__nav .wp-block-navigation-item__content,
.pana-footer__legal-nav .wp-block-navigation-item__content { color: var(--pana-navy) !important; }
.pana-footer__contact a:hover, .pana-footer__contact a:focus,
.pana-footer__nav .wp-block-navigation-item__content:hover,
.pana-footer__nav .wp-block-navigation-item__content:focus,
.pana-footer__legal-nav .wp-block-navigation-item__content:hover,
.pana-footer__legal-nav .wp-block-navigation-item__content:focus { color: var(--pana-lime-deep) !important; }
.pana-footer__separateur { border-color: rgba(10, 22, 40, 0.12) !important; }
.pana-footer__copyright { color: var(--wp--preset--color--muted, #5A6B7E) !important; }
/* Icônes sociales : navy sur crème. */
.pana-footer__social .wp-social-link { background-color: transparent !important; }
.pana-footer__social .wp-social-link a { color: var(--pana-navy) !important; }
.pana-footer__social svg { fill: var(--pana-navy) !important; }
/* Pastille monogramme « P » du pied de page (ajoutée dans le markup). */
.pana-footer__marque {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}
.pana-footer__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	background-color: var(--pana-navy);
	color: var(--pana-lime);
	font-family: var(--wp--preset--font-family--titres, "Bricolage Grotesque", sans-serif);
	font-weight: 800;
	font-size: 1.15rem;
	flex: 0 0 auto;
}

/* =========================================================================
 *  SECTION « ATOUTS » : Tout ça, pour vous, concrètement. (fond navy)
 *  4 cartes, icônes vertes, pastilles « EXCLU OCLIC » / « RGAA AA ».
 * ========================================================================= */
.pana-atouts {
	background-color: var(--pana-navy);
	color: var(--pana-cream);
}
.pana-atouts__entete { max-width: 22ch; }
.pana-atouts__surtitre {
	margin: 0 0 0.75rem;
	font-family: var(--wp--preset--font-family--titres, "Bricolage Grotesque", sans-serif);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pana-lime);
}
.pana-atouts__titre {
	margin: 0 0 clamp(2rem, 5vw, 3.5rem);
	font-family: var(--wp--preset--font-family--titres, "Bricolage Grotesque", sans-serif);
	font-weight: 700;
	font-size: clamp(2rem, 5vw, 3.25rem);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--pana-cream);
}
.pana-atouts__grille {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.5rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem);
}
@media (max-width: 781px) { .pana-atouts__grille { grid-template-columns: minmax(0, 1fr); } }
.pana-atout { min-width: 0; border-top: 1px solid rgba(245, 241, 232, 0.12); padding-top: 1.5rem; }
.pana-atout__icone {
	display: inline-flex;
	margin-bottom: 1rem;
	color: var(--pana-lime);
}
.pana-atout__icone svg { width: 30px; height: 30px; stroke: var(--pana-lime); fill: none; }
.pana-atout__titre {
	margin: 0 0 0.6rem;
	font-family: var(--wp--preset--font-family--titres, "Bricolage Grotesque", sans-serif);
	font-weight: 700;
	font-size: clamp(1.3rem, 2.4vw, 1.6rem);
	letter-spacing: -0.02em;
	color: var(--pana-cream);
}
.pana-atout__texte {
	margin: 0 0 1rem;
	color: rgba(245, 241, 232, 0.72);
	line-height: 1.55;
}
.pana-atout__pastille {
	display: inline-flex;
	align-items: center;
	padding: 0.3rem 0.8rem;
	border-radius: 999px;
	background-color: var(--pana-lime);
	color: var(--pana-navy);
	font-family: var(--wp--preset--font-family--titres, "Bricolage Grotesque", sans-serif);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
	.pana-hero__point { animation: none; }
	.pana-cta__bouton:hover, .pana-cta__bouton:focus-visible { transform: none; }
}
/* ===== FIN RE-SKIN MAQUETTE ===== */

/* Filet anti-contenu-invisible : le contenu reste visible même si le reveal JS ne sexécute pas (defer LiteSpeed, etc.). La transition reste pour le survol. */
.pana-anim { opacity: 1 !important; transform: none !important; }


/* ===== POLISH RE-SKIN (2026-06-19 b) ===== */
/* Flèche ↗ des cartes : le glyphe U+2197 se rend en emoji bleu → on le remplace
   par une vraie flèche SVG verte (décor, aria-hidden côté plugin). */
.pana-sections__coin {
	font-size: 0 !important;
	line-height: 0 !important;
	color: transparent !important;
}
.pana-sections__coin::after {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	background: center / contain no-repeat
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8D924' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E");
}
.pana-sections__item:hover .pana-sections__coin::after {
	transform: translate(3px, -3px);
}

/* Pied de page : liens de listes (Le club / Adhérer) en encre, pas en bleu. */
.pana-footer__liens { list-style: none; margin: 0; padding: 0; }
.pana-footer__liens li { margin: 0 0 0.55rem; }
.pana-footer__liens a {
	color: var(--pana-navy) !important;
	text-decoration: none;
}
.pana-footer__liens a:hover,
.pana-footer__liens a:focus {
	color: var(--pana-lime-deep) !important;
	text-decoration: underline;
}
.pana-footer__contact a { color: var(--pana-navy) !important; }
.pana-footer__contact a:hover,
.pana-footer__contact a:focus { color: var(--pana-lime-deep) !important; }
/* ===== FIN POLISH ===== */


/* ===== LAYOUT MAQUETTE (2026-06-19 c) ===== */

/* -- HEADER pleine largeur (fin du "boxed") + marque badge ----------------- */
.pana-header__barre {
	max-width: none !important;
	width: 100%;
	padding-left: clamp(1.25rem, 4vw, 3.25rem) !important;
	padding-right: clamp(1.25rem, 4vw, 3.25rem) !important;
	gap: clamp(1rem, 2vw, 2rem);
}
.pana-brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.pana-brand__badge {
	display: inline-flex; align-items: center; justify-content: center;
	width: 3rem; height: 3rem; border-radius: 14px;
	background: var(--pana-navy, #0A1628); color: var(--pana-lime, #1C56E5);
	font-family: var(--wp--preset--font-family--titres, sans-serif);
	font-weight: 800; font-size: 1.5rem; line-height: 1; flex: 0 0 auto;
}
.pana-brand__wordmark { display: flex; flex-direction: column; line-height: 1.08; }
.pana-brand__nom { font-family: var(--wp--preset--font-family--titres, sans-serif); font-weight: 800; letter-spacing: -0.02em; font-size: 1.15rem; color: var(--pana-navy, #0A1628); }
.pana-brand__base { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--muted, #5A6B7E); }
.pana-header__nav { flex: 1 1 auto; }
.pana-header__actions { flex: 0 0 auto; align-items: center; gap: 0.6rem; }

/* -- HERO dé-"boxé" : contenu aligné à gauche, pleine largeur -------------- */
.pana-hero {
	padding-left: clamp(1.25rem, 4vw, 3.25rem) !important;
	padding-right: clamp(1.25rem, 4vw, 3.25rem) !important;
}
.pana-hero .wp-block-cover__inner-container { max-width: none !important; width: 100%; }
.pana-hero__contenu { max-width: 1180px !important; margin-left: 0 !important; margin-right: auto !important; text-align: left; }
.pana-hero__compteurs { max-width: 780px; }

/* -- CARTES SECTION compactes : logo (petit) à la place de l'emoji --------- */
.pana-sections__grille { gap: clamp(0.85rem, 1.6vw, 1.25rem); }
.pana-sections__lien { padding: 1.05rem 1.1rem 1.25rem; }
.pana-sections__visuel {
	width: 3.5rem; height: 3.5rem; padding: 0.4rem !important;
	border: 0 !important; border-radius: 12px;
	background: var(--wp--preset--color--surface-2, #ECE6D6) !important;
	align-self: flex-start; margin: 0 0 0.85rem; overflow: hidden;
}
.pana-sections__visuel img { width: auto !important; max-width: 100% !important; height: 2.5rem !important; object-fit: contain; }
.pana-sections__pastille { width: 3.5rem; height: 3.5rem; margin: 0 0 0.85rem; font-size: 1.6rem; }
.pana-sections__corps { padding: 0; gap: 0.4rem; }
.pana-sections__nom { font-size: clamp(1.1rem, 1.5vw, 1.3rem); }
.pana-sections__extrait { display: none; }
.pana-sections__cta { font-size: 0.85rem; margin-top: 0.15rem; }
.pana-sections__coin { top: 1rem; right: 1rem; }

/* -- SURVOL : fond = photo du sport + voile navy, texte crème -------------- */
.pana-sections__lien::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background-image: var(--pana-section-photo, none);
	background-size: cover; background-position: center;
	opacity: 0; transition: opacity 0.45s ease;
}
.pana-sections__lien::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(180deg, rgba(10, 22, 40, 0.32) 0%, rgba(10, 22, 40, 0.86) 100%);
	opacity: 0; transition: opacity 0.45s ease;
}
.pana-sections__item:hover .pana-sections__lien::before,
.pana-sections__item:hover .pana-sections__lien::after,
.pana-sections__lien:focus-visible::before,
.pana-sections__lien:focus-visible::after { opacity: 1; }
.pana-sections__visuel, .pana-sections__corps, .pana-sections__coin { position: relative; z-index: 2; }
.pana-sections__item:hover .pana-sections__nom,
.pana-sections__lien:focus-visible .pana-sections__nom { color: #F5F1E8 !important; }
.pana-sections__item:hover .pana-sections__cta,
.pana-sections__lien:focus-visible .pana-sections__cta { color: var(--pana-lime, #1C56E5) !important; }
.pana-sections__item:hover .pana-sections__visuel { background: #fff !important; }
@media (prefers-reduced-motion: reduce) {
	.pana-sections__lien::before, .pana-sections__lien::after { transition: none; }
}
/* ===== FIN LAYOUT MAQUETTE ===== */

/* ===== Cartes compactes : hauteur au contenu + nom ancré en bas ===== */
.pana-sections__grille { align-items: start !important; }
.pana-sections__item { align-self: start !important; }
.pana-sections__lien { height: auto !important; min-height: 11.5rem; }
.pana-sections__corps { flex: 0 0 auto !important; margin-top: auto; }


/* ===== Cartes : ceinture hauteur compacte + photos de sport au survol ===== */
.pana-sections__grille { grid-auto-rows: min-content !important; }

/* Photo de fond au survol, par section (ciblage par slug d'URL). Source : Pexels. */
.pana-sections__lien[href*="/athletisme"] { --pana-section-photo: url("https://images.pexels.com/photos/4604846/pexels-photo-4604846.jpeg?auto=compress&cs=tinysrgb&w=900"); }
.pana-sections__lien[href*="/cyclo-vtt"] { --pana-section-photo: url("https://images.pexels.com/photos/2248713/pexels-photo-2248713.jpeg?auto=compress&cs=tinysrgb&w=900"); }
.pana-sections__lien[href*="/fitness"] { --pana-section-photo: url("https://images.pexels.com/photos/1552103/pexels-photo-1552103.jpeg?auto=compress&cs=tinysrgb&w=900"); }
.pana-sections__lien[href*="/handball"] { --pana-section-photo: url("https://images.pexels.com/photos/32250680/pexels-photo-32250680.jpeg?auto=compress&cs=tinysrgb&w=900"); }
.pana-sections__lien[href*="/handisport"] { --pana-section-photo: url("https://images.pexels.com/photos/8415879/pexels-photo-8415879.jpeg?auto=compress&cs=tinysrgb&w=900"); }
.pana-sections__lien[href*="/judo"] { --pana-section-photo: url("https://images.pexels.com/photos/6253173/pexels-photo-6253173.jpeg?auto=compress&cs=tinysrgb&w=900"); }
.pana-sections__lien[href*="/modern-danse"] { --pana-section-photo: url("https://images.pexels.com/photos/209948/pexels-photo-209948.jpeg?auto=compress&cs=tinysrgb&w=900"); }
.pana-sections__lien[href*="/petanque"] { --pana-section-photo: url("https://images.pexels.com/photos/10071077/pexels-photo-10071077.jpeg?auto=compress&cs=tinysrgb&w=900"); }
.pana-sections__lien[href*="/randonnee"] { --pana-section-photo: url("https://images.pexels.com/photos/17827651/pexels-photo-17827651.jpeg?auto=compress&cs=tinysrgb&w=900"); }
.pana-sections__lien[href*="/retraite-sportive"] { --pana-section-photo: url("https://images.pexels.com/photos/5067740/pexels-photo-5067740.jpeg?auto=compress&cs=tinysrgb&w=900"); }
.pana-sections__lien[href*="/tennis-de-table"] { --pana-section-photo: url("https://images.pexels.com/photos/187329/pexels-photo-187329.jpeg?auto=compress&cs=tinysrgb&w=900"); }
.pana-sections__lien[href*="/yoga"] { --pana-section-photo: url("https://images.pexels.com/photos/8436605/pexels-photo-8436605.jpeg?auto=compress&cs=tinysrgb&w=900"); }
.pana-sections__lien[href*="/zumba"] { --pana-section-photo: url("https://images.pexels.com/photos/8041348/pexels-photo-8041348.jpeg?auto=compress&cs=tinysrgb&w=900"); }
/* ===== FIN photos ===== */

/* ===== Hauteur de carte VERROUILLÉE (compacte, uniforme) ===== */
.pana-sections__item { height: 13.5rem !important; align-self: start !important; }
.pana-sections__lien { height: 100% !important; min-height: 0 !important; }

/* ===== Logo de section : boîte ajustée (logos paysage), blanc au survol ===== */
.pana-sections__visuel {
	display: inline-flex !important; align-items: center; justify-content: center;
	width: auto !important; height: auto !important; max-width: 74% !important;
	padding: 0.35rem 0.5rem !important; border: 0 !important; border-radius: 10px;
	background: transparent !important;
	align-self: flex-start !important; margin: 0 0 0.85rem !important; overflow: hidden;
}
.pana-sections__visuel img { height: 2.1rem !important; width: auto !important; max-width: 100% !important; object-fit: contain; display: block; }
.pana-sections__item:hover .pana-sections__visuel { background: #fff !important; }

/* ===== HERO VIDEO + HEADER TRANSPARENT (home) — 2026-06-19 ===== */

/* -- Fond video plein cadre du hero -- */
.pana-hero { position: relative !important; overflow: hidden !important; background-color: var(--pana-navy, #0A1628) !important; }
.pana-hero__video { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.pana-hero__video-el { width: 100%; height: 100%; object-fit: cover; display: block; }
.pana-hero__video::after {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(90deg, rgba(10,22,40,0.82) 0%, rgba(10,22,40,0.55) 45%, rgba(10,22,40,0.28) 100%),
		linear-gradient(180deg, rgba(10,22,40,0.28) 0%, rgba(10,22,40,0.80) 100%);
}
.pana-hero .wp-block-cover__inner-container { position: relative; z-index: 2; }
.pana-hero__halos { z-index: 1 !important; }
@media (prefers-reduced-motion: reduce) {
	.pana-hero__video-el { display: none; }
	.pana-hero__video { background: var(--pana-hero-image, none) center / cover no-repeat; }
}

/* -- Header transparent superpose au hero (PAGE D'ACCUEIL uniquement) -- */
.home .pana-header { position: absolute; top: 0; left: 0; right: 0; z-index: 50; background: transparent !important; }
.home .pana-header__barre { background: transparent !important; }
.home .pana-hero { padding-top: calc(var(--wp--preset--spacing--60, 4rem) + 4.5rem) !important; }
.home .pana-brand__badge { background: var(--pana-lime, #1C56E5) !important; color: var(--pana-navy, #0A1628) !important; }
.home .pana-brand__nom { color: #FFFFFF !important; }
.home .pana-brand__base { color: rgba(255,255,255,0.78) !important; }
.home .pana-header .wp-block-navigation a { color: #FFFFFF !important; }
.home .pana-header .wp-block-navigation a:hover { color: var(--pana-lime, #1C56E5) !important; }
.home .pana-header__espace .wp-block-button__link { color: #FFFFFF !important; border-color: rgba(255,255,255,0.55) !important; background: transparent !important; }
.home .pana-header__espace .wp-block-button__link:hover { background: rgba(255,255,255,0.12) !important; }
.home .pana-header .wp-block-navigation__responsive-container-open,
.home .pana-header .wp-block-navigation__responsive-container-close { color: #FFFFFF !important; }
.home .pana-header .wp-block-navigation__responsive-container-open svg,
.home .pana-header .wp-block-navigation__responsive-container-close svg { fill: #FFFFFF !important; }
.home .pana-header .wp-block-navigation__responsive-container.is-menu-open { background-color: var(--pana-navy, #0A1628) !important; }
.home .pana-header .wp-block-navigation__responsive-container.is-menu-open a { color: #FFFFFF !important; }

/* ===== FIN HERO VIDEO + HEADER TRANSPARENT ===== */

/* ===== CARTES SECTION — look « inflected » (2026-06-19) ===== */
/* Fond derriere la grille (= section "surface") : couleur que l'encoche concave revele */
.pana-accueil__sections, .pana-sections { --pana-card-bg: var(--wp--preset--color--surface, #F5F1E8); }

.pana-sections__grille { gap: clamp(1rem, 1.8vw, 1.6rem) !important; align-items: start !important; grid-auto-rows: auto !important; }
.pana-sections__item { height: auto !important; align-self: start !important; }

.pana-sections__lien {
	display: flex !important; flex-direction: column !important;
	padding: 0 !important; height: auto !important; min-height: 0 !important;
	background: transparent !important; border: 0 !important; box-shadow: none !important;
	border-radius: 18px !important; overflow: visible !important;
}
.pana-sections__item:hover .pana-sections__lien,
.pana-sections__lien:focus-visible { transform: none !important; box-shadow: none !important; background: transparent !important; }
/* la photo de survol etait posee sur __lien::before : on la neutralise (photo desormais dans __media) */
.pana-sections__lien::before, .pana-sections__lien::after { content: none !important; display: none !important; }
/* elements de l'ancienne carte desormais inutiles */
.pana-sections__coin, .pana-sections__cta, .pana-sections__visuel, .pana-sections__pastille, .pana-sections__badge { display: none !important; }

/* MEDIA : image plein cadre + coin bas-droit "decoupe" */
.pana-sections__media {
	position: relative; width: 100%; height: clamp(11.5rem, 15vw, 14rem);
	background: var(--pana-card-bg);
	border-radius: 18px; border-bottom-right-radius: 0; overflow: hidden;
}
.pana-sections__photo {
	position: absolute; inset: 0; z-index: 0; border-radius: 18px;
	background-color: var(--pana-section-couleur, #0A1628);
	background-image: var(--pana-section-photo, none);
	background-size: cover; background-position: center;
	transition: transform .5s cubic-bezier(.22,1,.36,1); will-change: transform;
}
.pana-sections__item:hover .pana-sections__photo,
.pana-sections__lien:focus-visible .pana-sections__photo { transform: scale(1.08); }
.pana-sections__media::after {
	content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 18px; pointer-events: none;
	background: linear-gradient(180deg, rgba(10,22,40,0) 52%, rgba(10,22,40,.30) 100%);
}

/* LOGO de section en pastille (haut-gauche) */
.pana-sections__logo {
	position: absolute; top: 10px; left: 10px; z-index: 3;
	display: inline-flex; align-items: center; justify-content: center;
	height: 2.4rem; max-width: 64%; padding: .3rem .55rem;
	background: rgba(255,255,255,.94); border-radius: 11px;
	box-shadow: 0 6px 18px rgba(10,22,40,.18);
}
.pana-sections__logo img { height: 1.7rem !important; width: auto !important; max-width: 100% !important; object-fit: contain; display: block; }

/* ENCOCHE concave + bouton rond fleche */
.pana-sections__notch {
	position: absolute; bottom: 0; right: 0; z-index: 4;
	width: 5.2rem; height: 5.2rem;
	background: var(--pana-card-bg);
	border-top-left-radius: 50%;
}
.pana-sections__notch::before {
	content: ""; position: absolute; bottom: 0; left: -1.15rem;
	width: 1.15rem; height: 1.15rem; background: transparent;
	border-bottom-right-radius: 1.15rem;
	box-shadow: .3rem .3rem 0 .3rem var(--pana-card-bg);
}
.pana-sections__notch::after {
	content: ""; position: absolute; top: -1.15rem; right: 0;
	width: 1.15rem; height: 1.15rem; background: transparent;
	border-bottom-right-radius: 1.15rem;
	box-shadow: .3rem .3rem 0 .3rem var(--pana-card-bg);
}
.pana-sections__btn {
	position: absolute; inset: .6rem;
	display: flex; align-items: center; justify-content: center;
	background: var(--pana-navy, #0A1628); color: var(--pana-lime, #1C56E5);
	border-radius: 50%; transition: transform .3s ease, background .3s ease, color .3s ease;
}
.pana-sections__item:hover .pana-sections__btn,
.pana-sections__lien:focus-visible .pana-sections__btn { transform: scale(1.08); background: var(--pana-lime, #1C56E5); color: var(--pana-navy, #0A1628); }
.pana-sections__btn svg { width: 1.5rem; height: 1.5rem; display: block; }

/* CONTENU sous l'image */
.pana-sections__corps { padding: .9rem .35rem .4rem !important; display: flex !important; flex-direction: column; gap: .45rem; background: transparent !important; }
.pana-sections__nom { font-size: clamp(1.15rem, 1.5vw, 1.4rem) !important; font-weight: 800 !important; line-height: 1.15 !important; letter-spacing: -.01em; color: var(--pana-navy, #0A1628) !important; margin: 0 !important; }
.pana-sections__extrait {
	display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	font-size: .92rem !important; line-height: 1.5 !important; margin: 0 !important;
	color: var(--wp--preset--color--muted, #5A6B7E) !important;
}
.pana-sections__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: .1rem 0 0; padding: 0; list-style: none; }
.pana-sections__tag {
	font-size: .72rem; font-weight: 700; line-height: 1; letter-spacing: .01em;
	padding: .4rem .62rem; border-radius: 999px;
	background: rgba(10,22,40,.07); color: var(--pana-navy, #0A1628);
}
.pana-sections__tag--handisport { background: var(--pana-lime, #1C56E5); color: var(--pana-navy, #0A1628); }

@media (prefers-reduced-motion: reduce) {
	.pana-sections__photo, .pana-sections__btn { transition: none !important; }
	.pana-sections__item:hover .pana-sections__photo { transform: none !important; }
}
/* ===== FIN CARTES SECTION inflected ===== */

/* ===== HERO WOW + SLIDER FONDU DES SECTIONS (2026-06-19) ===== */
.pana-hero {
	min-height: 100svh !important;
	display: flex !important; flex-direction: column !important; justify-content: center !important;
	position: relative !important; overflow: hidden !important;
	background-color: var(--pana-navy, #0A1628) !important;
	padding-bottom: 0 !important;
}
.home .pana-hero { padding-top: clamp(7rem, 13vh, 9.5rem) !important; }
/* on retire l'ancien decor band + halos (remplaces par le slider photo) */
.pana-hero::before { display: none !important; }
.pana-hero__halos { display: none !important; }
.pana-hero__video { display: none !important; }

/* --- Slider de fond : fondu enchaine + leger Ken Burns --- */
.pana-hero__slider { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.pana-hero__slide {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	opacity: 0; will-change: opacity, transform;
	animation: panaHeroSlide 65s linear infinite;
	animation-delay: calc(var(--i) * -5s);
}
.pana-hero__slider::after {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(100deg, rgba(8,18,34,.94) 0%, rgba(8,18,34,.74) 36%, rgba(8,18,34,.34) 66%, rgba(8,18,34,.52) 100%),
		linear-gradient(180deg, rgba(8,18,34,.42) 0%, rgba(8,18,34,.10) 38%, rgba(8,18,34,.80) 100%);
}
@keyframes panaHeroSlide {
	0%    { opacity: 0; transform: scale(1.045); }
	1.6%  { opacity: 1; }
	7.0%  { opacity: 1; }
	9.0%  { opacity: 0; transform: scale(1.11); }
	100%  { opacity: 0; transform: scale(1.11); }
}

/* --- Conteneur : contenu centre verticalement --- */
.pana-hero .wp-block-cover__inner-container {
	position: relative; z-index: 2;
	display: flex !important; flex-direction: column; justify-content: center;
	width: 100%; max-width: 1220px; margin: 0 auto;
}
.pana-hero__contenu { margin: 0 !important; max-width: 980px !important; text-align: left !important; }

/* --- Eyebrow en pastille de verre --- */
.pana-hero .pana-hero__surtitre {
	display: inline-flex !important; align-items: center; gap: .6rem; flex-wrap: wrap;
	background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.18) !important;
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	padding: .5rem .95rem !important; border-radius: 999px !important;
	color: #fff !important; font-weight: 600; width: fit-content; max-width: 100%;
}
.pana-hero__surtitre-repere { color: rgba(255,255,255,.82) !important; }

/* --- Titre cinetique --- */
.pana-hero .pana-hero__titre {
	font-size: clamp(2.7rem, 7vw, 5.6rem) !important;
	line-height: .98 !important; letter-spacing: -.025em !important;
	color: #fff !important; margin: 1.1rem 0 0 !important;
	text-shadow: 0 8px 44px rgba(0,0,0,.5);
}
.pana-hero__titre-pop { color: var(--pana-lime, #1C56E5) !important; text-shadow: 0 0 40px rgba(197,245,66,.45); }
.pana-hero .pana-hero__sous-titre {
	font-size: clamp(1.02rem, 1.4vw, 1.22rem) !important; line-height: 1.6 !important;
	color: rgba(247,247,255,.92) !important; max-width: 60ch !important; margin-top: 1rem !important;
}

/* --- CTA : pilule lime + verre --- */
.pana-hero .wp-block-buttons { margin-top: 1.6rem !important; gap: .75rem; }
.pana-hero__cta-ghost .wp-block-button__link,
.pana-hero .is-style-outline.pana-hero__cta-ghost .wp-block-button__link {
	background: rgba(255,255,255,.10) !important; border: 1px solid rgba(255,255,255,.42) !important;
	color: #fff !important; border-radius: 999px !important;
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.pana-hero__cta-ghost .wp-block-button__link:hover { background: rgba(255,255,255,.2) !important; }

/* --- Barre de stats en verre depoli --- */
.pana-hero__compteurs {
	display: flex !important; flex-wrap: wrap; gap: clamp(1.1rem, 3vw, 2.6rem) !important;
	margin-top: 2.1rem !important; padding: 1.15rem 1.6rem !important;
	background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.14) !important;
	border-radius: 20px !important; box-shadow: 0 26px 70px rgba(0,0,0,.42);
	backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
	width: fit-content; max-width: 100%; list-style: none;
}
.pana-hero__compteur { display: flex !important; flex-direction: column; gap: .12rem; }
.pana-hero__compteur-label { color: rgba(255,255,255,.66) !important; font-size: .72rem !important; text-transform: uppercase; letter-spacing: .12em; }
.pana-hero__compteur-nombre { color: var(--pana-lime, #1C56E5) !important; font-weight: 800 !important; font-size: clamp(1.6rem, 3vw, 2.3rem) !important; line-height: 1; }

/* --- Indicateur de scroll --- */
.pana-hero__scroll { position: absolute; left: 50%; bottom: 4rem; transform: translateX(-50%); z-index: 4; }
.pana-hero__scroll-chevron {
	display: block; width: 1.35rem; height: 1.35rem;
	border-right: 2px solid rgba(255,255,255,.85); border-bottom: 2px solid rgba(255,255,255,.85);
	transform: rotate(45deg); animation: panaScrollBounce 1.8s ease-in-out infinite;
}
@keyframes panaScrollBounce {
	0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .5; }
	50%      { transform: rotate(45deg) translate(4px, 4px); opacity: 1; }
}

/* --- Marquee : bande pleine largeur en bas du hero --- */
.pana-hero .pana-marquee {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
	width: 100% !important; margin: 0 !important;
	background: rgba(8,18,34,.5); border-top: 1px solid rgba(255,255,255,.12);
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	padding: .7rem 0 !important;
}

@media (max-width: 781px) {
	.pana-hero__scroll { display: none; }
	.pana-hero .pana-marquee { padding: .55rem 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
	.pana-hero__slide { animation: none !important; }
	.pana-hero__slide:first-child { opacity: 1 !important; transform: none !important; }
	.pana-hero__scroll-chevron { animation: none !important; }
}
/* ===== FIN HERO WOW + SLIDER ===== */

/* ===== FIX full-bleed hero (2026-06-19) =====
   max-width:100% plafonnait le hero a la largeur du contenu du parent (1560)
   -> bande creme a droite. On leve le plafond : les margins -20/-20 (alignfull)
   etendent alors le hero a toute la largeur du viewport. */
.pana-hero.wp-block-cover.alignfull { max-width: none !important; width: auto !important; }
/* ===== FIN FIX full-bleed hero ===== */

/* ===== FIX hauteur hero (2026-06-19) =====
   .pana-accueil avait margin-top:32px -> bande creme au-dessus du hero, le fond
   ne demarrait pas tout en haut et le hero 100svh debordait en bas. On colle le
   contenu au sommet (le header transparent reste superpose). */
.pana-accueil { margin-top: 0 !important; }
/* Vue connectee : on retranche la barre d'admin pour un plein ecran exact */
body.admin-bar .pana-hero { min-height: calc(100svh - 32px) !important; }
@media screen and (max-width: 782px) {
	body.admin-bar .pana-hero { min-height: calc(100svh - 46px) !important; }
}
/* ===== FIN FIX hauteur hero ===== */

/* ===== CARTES SECTION v2 : panneau + compact + CTA + hover propre (2026-06-19) ===== */
/* La carte devient un vrai panneau blanc ; l'encoche revele desormais le blanc du panneau. */
.pana-accueil__sections, .pana-sections { --pana-card-bg: #FFFFFF !important; }

/* Grille : tops alignes, hauteur au contenu (fini les grands vides) */
.pana-sections__grille { align-items: start !important; grid-auto-rows: auto !important; gap: clamp(1.1rem, 2vw, 1.7rem) !important; }
.pana-sections__item { align-self: start !important; height: auto !important; }

/* PANNEAU */
.pana-sections__lien {
	display: flex !important; flex-direction: column !important;
	height: auto !important; min-height: 0 !important; padding: 0 !important;
	background: #FFFFFF !important;
	border: 1px solid rgba(10,22,40,.07) !important;
	border-radius: 20px !important;
	box-shadow: 0 12px 30px rgba(10,22,40,.08) !important;
	overflow: hidden !important;
	transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease !important;
}
/* HOVER : la carte se souleve ; le titre NE s'efface plus (on annule le creme legacy) */
.pana-sections__item:hover .pana-sections__lien,
.pana-sections__lien:focus-visible {
	transform: translateY(-6px) !important;
	box-shadow: 0 24px 52px rgba(10,22,40,.18) !important;
	background: #FFFFFF !important;
}
.pana-sections__item:hover .pana-sections__nom,
.pana-sections__lien:focus-visible .pana-sections__nom { color: var(--pana-navy, #0A1628) !important; }

/* MEDIA : image en haut du panneau (coins hauts geres par overflow du panneau) */
.pana-sections__media {
	height: clamp(10rem, 12vw, 12rem) !important;
	border-radius: 0 !important; border-bottom-right-radius: 0 !important;
	flex: 0 0 auto !important;
}
.pana-sections__photo { border-radius: 0 !important; }
.pana-sections__media::after { border-radius: 0 !important; }

/* CONTENU : compact, ancre en haut (annule min-height + margin-top:auto legacy) */
.pana-sections__corps {
	margin-top: 0 !important; flex: 0 0 auto !important;
	padding: .9rem 1.05rem 1.05rem !important;
	display: flex !important; flex-direction: column; gap: .5rem !important;
}
.pana-sections__nom { margin: 0 !important; }
.pana-sections__extrait { margin: 0 !important; }
.pana-sections__tags { margin: .15rem 0 0 !important; }

/* CTA (la carte entiere est deja un lien : ceci est un repere visuel) */
.pana-sections__corps::after {
	content: "Découvrir la section \2192";
	display: inline-flex; align-items: center;
	margin-top: .65rem; padding-top: .75rem;
	border-top: 1px solid rgba(10,22,40,.09);
	font-size: .82rem; font-weight: 800; letter-spacing: .01em;
	color: var(--pana-navy, #0A1628);
	transition: color .25s ease, letter-spacing .25s ease;
}
.pana-sections__item:hover .pana-sections__corps::after,
.pana-sections__lien:focus-visible .pana-sections__corps::after { letter-spacing: .03em; }
/* ===== FIN CARTES SECTION v2 ===== */

/* ============================================================
   PANA HEADER — logo réel + sticky animé + sans bordure
   (appended at END of style.css: source order wins over legacy)
   ============================================================ */

:root{ --pana-header-h: 5.75rem; }

/* --- Remove header bottom border (both legacy declarations, same selector) --- */
.pana-header, .pana-header__barre { border-bottom: 0 !important; }

/* --- Base header behaviour ---
   Non-home: STICKY (stays in flow → no offset needed, content never hidden).
   Home: FIXED overlay over the hero (set below).
   No backdrop-filter on the always-present base (avoids trapping the mobile
   overlay in a stacking context + needless GPU work). */
.pana-header{
  position: sticky !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 60 !important;
  transition: background-color .35s ease, padding .35s ease, box-shadow .35s ease, transform .35s ease !important;
}

/* Defeat the constrained-layout auto-margin on any direct child. */
.pana-header > * { max-width: none !important; }
.pana-header__barre { max-width: none !important; width: 100%; margin-inline: 0 !important; }

/* --- Inner pages: solid from the top, only add shadow when stuck (no bg jump) --- */
body:not(.home) .pana-header{
  background: rgba(10,22,40,.96);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body:not(.home) .pana-header.is-stuck{
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
}

/* --- Home: FIXED transparent overlay over the hero, solid+blur once stuck --- */
.home .pana-header{
  position: fixed !important; /* neutralises legacy .home .pana-header{position:absolute} */
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.home .pana-header.is-stuck{
  background: rgba(8,18,34,.93) !important;
  backdrop-filter: saturate(140%) blur(14px) !important;
  -webkit-backdrop-filter: saturate(140%) blur(14px) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.28) !important;
  animation: panaHeaderDrop .4s cubic-bezier(.22,1,.36,1);
}
@keyframes panaHeaderDrop{
  from{ transform: translateY(-8px); opacity:.85; }
  to{ transform: translateY(0); opacity:1; }
}

/* --- Compact state on scroll --- */
.pana-header.is-stuck .pana-header__barre{
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
}
.pana-header.is-stuck .pana-brand__logo{ height: 38px !important; }

/* --- Anti-FOUC: no transition/animation during the initial classification --- */
.pana-header.pana-header--no-anim,
.pana-header.pana-header--no-anim.is-stuck{
  transition: none !important;
  animation: none !important;
}

/* --- WP admin-bar offset (FIXED home header only; sticky inner header flows naturally) ---
   Mirror WordPress: bar is fixed 32px ≥783px, fixed 46px 601–782px, absolute (scrolls) ≤600px. */
@media screen and (min-width:783px){ body.admin-bar .home .pana-header{ top:32px; } }
@media screen and (min-width:601px) and (max-width:782px){ body.admin-bar .home .pana-header{ top:46px; } }
@media screen and (max-width:600px){ body.admin-bar .home .pana-header{ top:0 !important; } }

/* --- Brand chip (CLS-safe logo, context-aware elevation) --- */
.pana-brand{
  background:#fff !important;
  border-radius:14px !important;
  padding:.35rem .6rem !important;
}
.home .pana-brand{ box-shadow: 0 6px 20px rgba(0,0,0,.28); }
body:not(.home) .pana-brand{
  box-shadow: 0 4px 14px rgba(10,22,40,.10);
  border: 1px solid rgba(10,22,40,.06);
}
.pana-header.is-stuck .pana-brand{ box-shadow: 0 6px 18px rgba(0,0,0,.22); }
.pana-brand:focus-visible{ outline:2px solid var(--pana-lime,#1C56E5); outline-offset:3px; }

/* Legacy spans removed by new markup; guard kept for transition safety. */
.pana-brand__badge, .pana-brand__wordmark{ display:none !important; }

/* Logo: explicit aspect-ratio reserves the box before CSS height applies → no CLS. */
.pana-brand__logo{
  display:block;
  height:46px;
  width:auto;
  aspect-ratio: 300 / 272;
  transition: height .35s ease;
}
@media (max-width:600px){ .pana-brand__logo{ height:40px; } }

/* --- Mobile overlay menu: must clear the header stacking context + admin bar --- */
.pana-header:has(.wp-block-navigation__responsive-container.is-menu-open){
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
  animation: none !important;
}
.wp-block-navigation__responsive-container.is-menu-open{ z-index: 9999 !important; }
body.admin-bar .wp-block-navigation__responsive-container.is-menu-open{ top:32px; }
@media screen and (min-width:601px) and (max-width:782px){
  body.admin-bar .wp-block-navigation__responsive-container.is-menu-open{ top:46px; }
}
@media screen and (max-width:600px){
  body.admin-bar .wp-block-navigation__responsive-container.is-menu-open{ top:0; }
}

/* NB : header non-home en position:sticky (en flux) → AUCUN padding de contenu
   nécessaire (sticky réserve sa place). Pas de décalage main#pana-contenu. */

/* ============================================================
   HERO — rééquilibrage pour TOUTES largeurs ET hauteurs,
   sans recouvrement carte stats / marquee, contenu jamais caché
   sous le header fixe.
   ============================================================ */

/* Clear the fixed home header without double-counting; >= header height. */
.home .pana-hero{
  padding-top: max(var(--pana-header-h), clamp(6rem,11vh,8.5rem)) !important;
  padding-bottom: clamp(4.5rem,8vh,6.5rem) !important;
}
@media screen and (min-width:783px){
  body.admin-bar .home .pana-hero{
    padding-top: max(calc(var(--pana-header-h) + 32px), clamp(6rem,11vh,8.5rem)) !important;
  }
}
@media screen and (min-width:601px) and (max-width:782px){
  body.admin-bar .home .pana-hero{
    padding-top: max(calc(var(--pana-header-h) + 46px), clamp(6rem,11vh,8.5rem)) !important;
  }
}

/* Min-height tied to svh, allowed to grow on very short viewports (scroll vs clip). */
.pana-hero{ min-height: max(100svh, 640px) !important; }
body.admin-bar .pana-hero{ min-height: calc(100svh - 32px) !important; }
@media screen and (max-width:782px){
  body.admin-bar .pana-hero{ min-height: calc(100svh - 46px) !important; }
}

/* Reserve the absolute bottom marquee band so centered content never overlaps it. */
.pana-hero .wp-block-cover__inner-container{
  padding-bottom: clamp(3.2rem,4vw,4.5rem);
}
.pana-hero .pana-hero__contenu,
.pana-hero .pana-hero__compteurs,
.pana-hero .pana-hero__titre{ min-width:0; max-width:100%; }

/* Title scale + safe wrapping. */
.pana-hero .pana-hero__titre{
  font-size: clamp(2.4rem,6vw,5.2rem) !important;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

/* --- Short laptops AND short landscape phones (no min-width gate) --- */
@media (max-height:760px){
  .home .pana-hero{
    padding-top: max(var(--pana-header-h), 6rem) !important;
  }
  .pana-hero .pana-hero__titre{ font-size: clamp(2.1rem,4.6vw,3.6rem) !important; }
  .pana-hero .pana-hero__sous-titre{ font-size:1rem !important; margin-top:.6rem !important; }
  .pana-hero__compteurs{ margin-top:1.1rem !important; padding:.8rem 1.1rem !important; }
  .pana-hero__compteur-nombre{ font-size: clamp(1.4rem,2.2vw,1.9rem) !important; }
  .pana-hero .wp-block-buttons{ margin-top:1rem !important; }
  .pana-hero__scroll{ display:none !important; }
  .pana-hero .pana-marquee{ padding:.45rem 0 !important; }
  .pana-hero .wp-block-cover__inner-container{ padding-bottom:3rem; }
}

/* Very short: top-justify + marquee in-flow so it stacks under content, never overlays. */
@media (max-height:740px){
  .pana-hero{ justify-content: flex-start !important; }
  .pana-hero .wp-block-cover__inner-container{ justify-content: flex-start; padding-top:.5rem; }
  .pana-hero .pana-marquee{ position: static !important; margin-top: 1.5rem !important; }
}

/* --- Mobile width tuning --- */
@media (max-width:600px){
  .pana-hero .pana-hero__titre{ font-size: clamp(2.1rem,11vw,3rem) !important; }
  .pana-hero__compteurs{ gap:1rem !important; padding:.9rem 1rem !important; }
}

/* ============================================================
   prefers-reduced-motion : couper le MOUVEMENT, garder l'état
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .pana-header{ transition: none !important; }
  .pana-header.is-stuck,
  .home .pana-header.is-stuck{ animation: none !important; }
  .pana-brand__logo{ transition: none !important; }
}
/* ===== FIN HEADER + HERO rééquilibrage ===== */

/* ===== FIX mobile logo (2026-06-19) =====
   La regle existante @media(max-width:980px){ .pana-header img { height:auto } }
   (specificite 0,1,1) ecrasait .pana-brand__logo {height} (0,1,0) -> logo a taille
   naturelle (~272px) = enorme sous 980px, gonflant le header et decalant le hero.
   On reprend la main avec une specificite superieure + !important. */
.pana-header .pana-brand__logo{
  height: 46px !important;
  width: auto !important;
  max-width: none !important;
  aspect-ratio: 300 / 272;
}
.pana-header.is-stuck .pana-brand__logo{ height: 38px !important; }
.pana-brand{ flex: 0 0 auto !important; }

@media (max-width: 980px){
  .pana-header .pana-brand__logo{ height: 42px !important; }
  .pana-header.is-stuck .pana-brand__logo{ height: 36px !important; }
}
@media (max-width: 600px){
  .pana-header .pana-brand__logo{ height: 36px !important; }
  .pana-header.is-stuck .pana-brand__logo{ height: 32px !important; }
  /* header mobile compact : barre serree, "Mon espace" masque (Adherer + burger suffisent) */
  .pana-header__barre{ padding-top:.55rem !important; padding-bottom:.55rem !important; }
  .pana-header__espace{ display:none !important; }
  .pana-brand{ padding:.3rem .45rem !important; border-radius:12px !important; }
}

/* HERO mobile : calibrage (titre, sous-titre, stats en 2x2, marquee contenu) */
@media (max-width: 600px){
  .home .pana-hero{ padding-top: max(var(--pana-header-h), 5.5rem) !important; padding-bottom: 3.5rem !important; }
  .pana-hero .wp-block-cover__inner-container{ padding-left: 1.1rem; padding-right: 1.1rem; padding-bottom: 3rem; }
  .pana-hero .pana-hero__titre{ font-size: clamp(2rem, 9.5vw, 2.7rem) !important; line-height: 1.02 !important; }
  .pana-hero .pana-hero__sous-titre{ font-size: .98rem !important; }
  .pana-hero__surtitre{ font-size: .64rem !important; padding: .45rem .7rem !important; }
  .pana-hero__compteurs{ width: 100% !important; gap: .6rem 1rem !important; padding: .9rem 1rem !important; justify-content: space-between; }
  .pana-hero__compteur{ flex: 0 0 calc(50% - .6rem); }
  .pana-hero__compteur-nombre{ font-size: clamp(1.4rem, 7vw, 1.9rem) !important; }
  .pana-hero .wp-block-buttons{ gap: .6rem; }
  .pana-hero .wp-block-buttons .wp-block-button{ flex: 1 1 auto; }
}
/* ===== FIN FIX mobile logo + hero ===== */

/* ===== FIX mobile : hero qui déborde à droite (2026-06-20) =====
   Un enfant en width:fit-content (eyebrow / carte stats) forçait le conteneur
   plus large que le viewport -> contenu coupé par le overflow:hidden du hero.
   On force TOUT le contenu à la largeur du viewport + wrap garanti. */
@media (max-width: 600px){
  /* conteneurs : strictement la largeur dispo */
  .pana-hero .wp-block-cover__inner-container,
  .pana-hero__contenu{
    width: 100% !important; max-width: 100% !important; min-width: 0 !important;
    box-sizing: border-box;
  }
  .pana-hero__contenu > *{ max-width: 100% !important; min-width: 0 !important; }

  /* eyebrow : wrap, ne force plus la largeur, trait décoratif masqué */
  .pana-hero .pana-hero__surtitre{
    width: auto !important; max-width: 100% !important;
    flex-wrap: wrap !important; box-sizing: border-box;
  }
  .pana-hero__surtitre-trait{ display: none !important; }
  .pana-hero__surtitre-saison,
  .pana-hero__surtitre-repere{ white-space: normal !important; overflow-wrap: anywhere; }

  /* titre + sous-titre : retour à la ligne garanti */
  .pana-hero .pana-hero__titre{
    white-space: normal !important; overflow-wrap: break-word !important;
    word-break: normal !important; max-width: 100% !important;
  }
  .pana-hero .pana-hero__sous-titre{ max-width: 100% !important; overflow-wrap: anywhere; }

  /* carte stats : 2x2, jamais plus large que le viewport */
  .pana-hero__compteurs{
    width: 100% !important; max-width: 100% !important;
    flex-wrap: wrap !important; box-sizing: border-box;
  }
  .pana-hero__compteur{ flex: 1 1 calc(50% - .8rem) !important; min-width: 0 !important; }

  /* boutons pleine largeur */
  .pana-hero .wp-block-buttons{ width: 100% !important; }
}
/* ===== FIN FIX mobile hero overflow ===== */

/* ===== FIX grille sections : jamais de débordement (2026-06-20) =====
   Plusieurs regles concurrentes (dont grid 1fr SANS minmax(0,1fr)) faisaient
   deborder/couper les cartes a droite a certaines largeurs. Source unique
   robuste : minmax(min(100%,16rem),1fr) + min-width:0 sur les cartes. */
.pana-sections__grille,
.pana-sections__grille--2,
.pana-sections__grille--3,
.pana-sections__grille--4 {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)) !important;
}
.pana-sections__grille > *,
.pana-sections__item { min-width: 0 !important; }

/* Telephones : 1 colonne franche, retrecissement autorise (anti-overflow). */
@media (max-width: 600px){
  .pana-sections__grille,
  .pana-sections__grille--2,
  .pana-sections__grille--3,
  .pana-sections__grille--4 {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* Filtre par age : ne pousse pas la largeur, wrap propre */
  .pana-sections__filtre{ flex-wrap: wrap !important; max-width: 100% !important; }
  .pana-sections__filtre > *{ flex: 0 0 auto; }
}
/* Tablette etroite : 2 colonnes propres */
@media (min-width: 601px) and (max-width: 980px){
  .pana-sections__grille,
  .pana-sections__grille--2,
  .pana-sections__grille--3,
  .pana-sections__grille--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
/* ===== FIN FIX grille sections ===== */

/* ===== FIX mobile hero : boutons empilés + cap dur viewport (2026-06-20) =====
   A 430px les 2 CTA cote a cote debordaient ("Mot du President" coupe).
   On les empile (app-friendly) + on borne tout au viewport reel (100svw). */
@media (max-width: 600px){
  /* conteneurs bornés au viewport reel, padding inclus */
  .pana-hero, .pana-hero .wp-block-cover__inner-container, .pana-hero__contenu{
    max-width: 100vw !important; box-sizing: border-box !important;
  }
  /* CTA empilés, pleine largeur */
  .pana-hero .wp-block-buttons{
    flex-direction: column !important; align-items: stretch !important;
    width: 100% !important; max-width: 100% !important; gap: .6rem !important;
  }
  .pana-hero .wp-block-buttons .wp-block-button{
    width: 100% !important; max-width: 100% !important; margin: 0 !important;
  }
  .pana-hero .wp-block-buttons .wp-block-button__link{
    display: block !important; width: 100% !important; text-align: center !important;
    box-sizing: border-box !important;
  }
  /* textes : cassent toujours, jamais plus larges que le conteneur */
  .pana-hero__titre, .pana-hero__sous-titre, .pana-hero__surtitre,
  .pana-hero__surtitre-saison, .pana-hero__surtitre-repere{
    max-width: 100% !important; overflow-wrap: anywhere !important; word-break: break-word !important;
  }
}
/* ===== FIN FIX mobile hero boutons ===== */

/* ===== Hero allégé + marquee = limite basse (2026-06-20) ===== */
/* Bloc stats retiré du markup ; filet si un cache garde l'ancien rendu. */
.pana-hero__compteurs{ display: none !important; }

/* Voile un peu plus léger (photos plus présentes), texte gardé lisible à gauche. */
.pana-hero__slider::after{
  background:
    linear-gradient(100deg, rgba(8,18,34,.90) 0%, rgba(8,18,34,.64) 38%, rgba(8,18,34,.24) 70%, rgba(8,18,34,.40) 100%),
    linear-gradient(180deg, rgba(8,18,34,.32) 0%, rgba(8,18,34,.05) 42%, rgba(8,18,34,.60) 100%) !important;
}

/* Marquee : bande dégradée nette en bas = délimitation propre du hero. */
.pana-hero .pana-marquee{
  background: linear-gradient(180deg, rgba(8,18,34,0) 0%, rgba(8,18,34,.42) 55%, rgba(8,18,34,.72) 100%) !important;
  border-top: 1px solid rgba(255,255,255,.13) !important;
  backdrop-filter: blur(5px) !important; -webkit-backdrop-filter: blur(5px) !important;
  padding: 1rem 0 .85rem !important;
}
.pana-marquee__item{ opacity: .9; }
/* ===== FIN hero allégé ===== */

/* ===== Marquee toujours collé au bas du hero (2026-06-20) =====
   Le hero étant allégé (stats retirées), le contenu tient sans chevaucher le bas :
   on annule le passage du marquee en position:static sur écran court. */
.pana-hero .pana-marquee{ position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; margin: 0 !important; }
@media (max-height: 740px){
  .pana-hero .pana-marquee{ position: absolute !important; bottom: 0 !important; margin-top: 0 !important; }
  /* contenu top-aligné (déjà) pour ne pas chevaucher le marquee */
}
/* ===== FIN marquee bas ===== */

/* =====================================================================
 * PANA-LOISIRS · LIVRABLE SYNTHÈSE (alignement + WOW + retrait Oclic)
 * Appended end-of-file : source order + !important gagnent la cascade.
 *
 * RÈGLE D'ALIGNEMENT (conforme au brief) :
 *   HERO              = sous-titre + contenu calés à GAUCHE, centré VERTICALEMENT
 *   EN-TÊTES SECTION  = CENTRÉS (Nos sections, Actualités, Agenda, Atouts)
 *   GRILLES / CARTES  = texte à GAUCHE (lisibilité courante)
 *   BOUTONS "voir +"  = CENTRÉS (Toutes les actualités, CTA final)
 *
 * WOW : président (citation navy + guillemet lime), actus (cartes lift +
 *   zoom image), agenda (cartes bord lime + hover slide), plateforme/atouts
 *   (verre dépoli navy + halo lime), footer (colonnes nettes, hover lime).
 * Anti em-dash : séparateurs · / : uniquement.
 * ===================================================================== */

/* ---- Tokens locaux (réutilisent la charte de marque) ---- */
:root{
	--pana-ease: cubic-bezier(.22,1,.36,1);
	--pana-ease-bounce: cubic-bezier(.34,1.56,.64,1);
	--pana-r-lg: 20px;
	--pana-r-md: 15px;
	--pana-glass-line: rgba(197,245,66,.18);
}

/* =====================================================================
 * 1) HERO — contenu pinné à GAUCHE, centré VERTICALEMENT (inchangé).
 *    Bug corrigé : le sous-titre (max-width) est auto-centré comme bloc
 *    par le layout WP constrained (margin-inline:auto sur enfant borné).
 *    On force margin-left:0 comme l'eyebrow et le titre.
 * ================================================================== */
.pana-hero .wp-block-cover__inner-container{
	align-items: flex-start !important;
}
.pana-hero__contenu,
.pana-hero__inner{
	margin-left: 0 !important;
	margin-right: auto !important;
	align-items: flex-start !important;
	text-align: left !important;
}
.pana-hero__contenu > *{
	margin-left: 0 !important;
	margin-right: auto !important;
}
.pana-hero .pana-hero__surtitre,
.pana-hero .pana-hero__titre,
.pana-hero .pana-hero__sous-titre,
.pana-hero .pana-hero__compteurs,
.pana-hero .wp-block-buttons{
	margin-left: 0 !important;
	margin-right: auto !important;
	text-align: left !important;
}
.pana-hero .pana-hero__sous-titre{
	max-width: 60ch !important;
	margin-left: 0 !important;
	margin-right: auto !important;
	margin-inline-start: 0 !important;
}
.pana-hero .wp-block-buttons.is-content-justification-left,
.pana-hero .wp-block-buttons{
	justify-content: flex-start !important;
}

/* =====================================================================
 * 2) EN-TÊTES DE SECTION — CENTRÉS de façon homogène.
 *    Eyebrow + H2 + intro centrés ; grilles/cartes en dessous = gauche.
 * ================================================================== */

/* -- 2a. Section "Nos sections" -- */
.pana-accueil__sections .pana-accueil__surtitre,
.pana-accueil__sections .pana-accueil__titre-sections,
.pana-accueil__sections .pana-accueil__intro{
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.pana-accueil__sections .pana-accueil__titre-sections{
	max-width: 22ch !important;
}
.pana-accueil__sections .pana-accueil__intro{
	max-width: 56ch !important;
	margin-bottom: clamp(2rem, 4vw, 3rem) !important;
}

/* -- 2b. Actualités (titre H2 centré au-dessus de la grille) -- */
.pana-accueil__actus .pana-accueil__titre{
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
/* La grille d'articles reste alignée à gauche dans ses cartes. */
.pana-accueil__actus .pana-accueil__grille,
.pana-accueil__grille .wp-block-post,
.pana-accueil__grille .wp-block-post-title,
.pana-accueil__grille .wp-block-post-date,
.pana-accueil__grille .wp-block-post-excerpt{
	text-align: left !important;
}
.pana-accueil__actus .wp-block-query-no-results,
.pana-accueil__actus .wp-block-query-no-results p{
	text-align: center !important;
}

/* -- 2c. Atouts / Plateforme (eyebrow + titre centrés) -- */
.pana-atouts .pana-atouts__entete{
	max-width: 34ch !important;
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center !important;
}
.pana-atouts .pana-atouts__surtitre,
.pana-atouts .pana-atouts__titre{
	text-align: center !important;
}
.pana-atouts .pana-atouts__titre{
	max-width: 24ch !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
/* Cartes d'atouts = texte courant à gauche. */
.pana-atouts .pana-atouts__grille,
.pana-atouts .pana-atout,
.pana-atouts .pana-atout__titre,
.pana-atouts .pana-atout__texte{
	text-align: left !important;
}

/* -- 2d. Agenda : titre + filtres centrés -- */
.pana-accueil__agenda .pana-calendrier__titre{
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.pana-accueil__agenda .pana-calendrier__filtre{
	justify-content: center !important;
}

/* Liseré lime sous les grands titres centrés = signature commune. */
.pana-accueil__titre-sections::after,
.pana-accueil__actus .pana-accueil__titre::after,
.pana-atouts__titre::after{
	content: "";
	display: block;
	width: clamp(40px, 6vw, 64px);
	height: 4px;
	margin: clamp(.85rem, 1.5vw, 1.15rem) auto 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--pana-lime), var(--pana-lime-deep));
}

/* =====================================================================
 * 3) BOUTONS / CTA — centrés.
 * ================================================================== */
.pana-accueil__actus .wp-block-buttons{
	display: flex !important;
	justify-content: center !important;
	margin: clamp(1.75rem,3vw,2.5rem) auto 0 !important;
}
.pana-accueil__actus .wp-block-button{
	margin-left: auto !important;
	margin-right: auto !important;
}
.pana-accueil__cta .pana-cta{
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.pana-accueil__cta .wp-block-buttons{
	justify-content: center !important;
}

/* =====================================================================
 * 4) MOT DU PRÉSIDENT (section navy) — citation premium + accents lime.
 * ================================================================== */
.pana-accueil__president{
	position: relative;
	overflow: hidden;
}
.pana-accueil__president--sombre{
	background:
		radial-gradient(60% 120% at 12% -10%, rgba(197,245,66,.10) 0%, rgba(197,245,66,0) 58%),
		linear-gradient(180deg, var(--pana-navy) 0%, var(--pana-navy-2) 100%) !important;
	color: var(--pana-cream) !important;
}
/* Texture grille discrète, raccord avec le hero. */
.pana-accueil__president--sombre::before{
	content: "";
	position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background-image:
		linear-gradient(rgba(245,241,232,.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(245,241,232,.04) 1px, transparent 1px);
	background-size: 38px 38px;
	-webkit-mask-image: radial-gradient(80% 80% at 30% 0%, #000 0%, transparent 75%);
	        mask-image: radial-gradient(80% 80% at 30% 0%, #000 0%, transparent 75%);
}
.pana-accueil__president--sombre > *{ position: relative; z-index: 1; }

.pana-mot-president{
	position: relative;
	max-width: 60rem;
	margin-inline: auto;
	padding: clamp(.5rem, 2vw, 1rem) 0 !important;
}
/* Grand guillemet décoratif lime translucide. */
.pana-mot-president::before{
	content: "\201C";
	position: absolute;
	top: clamp(-1.6rem, -3vw, -2.4rem);
	left: -.12em;
	font-family: "Bricolage Grotesque", system-ui, Georgia, serif;
	font-weight: 800;
	font-size: clamp(5rem, 14vw, 11rem);
	line-height: .7;
	color: rgba(197,245,66,.16);
	pointer-events: none;
	z-index: 0;
}
/* Eyebrow "Édito" en pastille lime. */
.pana-mot-president__titre{
	position: relative; z-index: 1;
	display: inline-flex; align-items: center; gap: .55em;
	margin-bottom: clamp(1.1rem, 2.5vw, 1.6rem) !important;
	padding: .4rem .85rem;
	border-radius: 999px;
	background: rgba(197,245,66,.12);
	border: 1px solid rgba(197,245,66,.30);
	font-family: "Bricolage Grotesque", system-ui, sans-serif !important;
	font-weight: 700 !important;
	font-size: .74rem !important;
	letter-spacing: .16em !important;
	text-transform: uppercase !important;
	color: var(--pana-lime) !important;
}
.pana-mot-president__titre::before{
	content: ""; width: .45rem; height: .45rem; border-radius: 999px;
	background: var(--pana-lime); flex: 0 0 auto;
}
.pana-mot-president__texte,
.pana-mot-president__texte p{
	position: relative; z-index: 1;
	font-size: clamp(1.4rem, 3.2vw, 2.15rem) !important;
	line-height: 1.32 !important;
	font-weight: 400 !important;
	color: rgba(245,241,232,.92) !important;
	text-wrap: balance;
}
/* Surlignage lime "feutre". */
.pana-mot-president .pana-surligne,
.pana-mot-president__texte mark,
.pana-surligne{
	background: linear-gradient(transparent 56%, rgba(197,245,66,.40) 56%) !important;
	color: var(--pana-cream) !important;
	padding: 0 .14em !important;
	border-radius: 3px !important;
	font-weight: 600 !important;
}
.pana-mot-president__signature{
	position: relative; z-index: 1;
	display: inline-flex; align-items: center; gap: .7rem;
	margin-top: clamp(1.5rem, 3vw, 2.25rem) !important;
	font-style: normal !important;
	font-family: "Bricolage Grotesque", system-ui, sans-serif !important;
	font-weight: 700 !important;
	letter-spacing: -.01em !important;
	font-size: clamp(1rem,1.4vw,1.15rem) !important;
	color: var(--pana-cream) !important;
}
.pana-mot-president__signature::before{
	content: ""; width: 2.4rem; height: 2px; border-radius: 999px;
	background: linear-gradient(90deg, var(--pana-lime), transparent);
	flex: 0 0 auto;
}

/* =====================================================================
 * 5) ACTUALITÉS (fond clair) — cartes article modernes, lift + zoom.
 * ================================================================== */
.pana-accueil__grille{ gap: clamp(1.25rem, 2.5vw, 1.75rem) !important; }

.pana-accueil__grille .wp-block-post{
	display: flex !important;
	flex-direction: column;
	min-width: 0;
	background: #ffffff !important;
	border: 1px solid var(--wp--preset--color--bordure, #E0D9C5) !important;
	border-radius: var(--pana-r-lg) !important;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(10,22,40,.04);
	transition:
		transform .45s var(--pana-ease),
		box-shadow .45s var(--pana-ease),
		border-color .45s var(--pana-ease) !important;
}
.pana-accueil__grille .wp-block-post:hover{
	transform: translateY(-6px) !important;
	border-color: var(--pana-lime-deep) !important;
	box-shadow: 0 26px 50px -28px rgba(10,22,40,.42) !important;
}
/* Image 16/9, zoom doux au survol. */
.pana-accueil__grille .wp-block-post-featured-image{
	margin: 0 !important;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--pana-navy);
}
.pana-accueil__grille .wp-block-post-featured-image img{
	width: 100%; height: 100%;
	object-fit: cover;
	border-radius: 0 !important;
	transition: transform .7s var(--pana-ease);
}
.pana-accueil__grille .wp-block-post:hover .wp-block-post-featured-image img{
	transform: scale(1.06);
}
/* Date : pastille discrète. */
.pana-accueil__grille .wp-block-post-date{
	width: fit-content;
	margin: 1.15rem 1.25rem .4rem !important;
	padding: .25rem .6rem;
	border-radius: 999px;
	background: rgba(10,22,40,.06);
	font-family: var(--wp--preset--font-family--monospace, "JetBrains Mono", monospace) !important;
	font-size: .72rem !important;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--pana-navy) !important;
}
.pana-accueil__grille .wp-block-post-title{
	margin: 0 1.25rem !important;
	font-family: "Bricolage Grotesque", system-ui, sans-serif !important;
	font-weight: 700 !important;
	font-size: clamp(1.2rem, 2.4vw, 1.45rem) !important;
	line-height: 1.14 !important;
	letter-spacing: -.02em;
}
.pana-accueil__grille .wp-block-post-title a{
	color: var(--pana-encre, #15233b) !important;
	text-decoration: none !important;
	background-image: linear-gradient(var(--pana-lime-deep), var(--pana-lime-deep));
	background-size: 0% 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size .35s var(--pana-ease);
}
.pana-accueil__grille .wp-block-post:hover .wp-block-post-title a,
.pana-accueil__grille .wp-block-post-title a:hover,
.pana-accueil__grille .wp-block-post-title a:focus{
	background-size: 100% 2px;
}
.pana-accueil__grille .wp-block-post-excerpt{
	flex: 1 1 auto;
	margin: .6rem 1.25rem 1.4rem !important;
	color: var(--pana-muted, #5A6B7E) !important;
	line-height: 1.55;
}
.pana-accueil__grille .wp-block-post-excerpt .wp-block-post-excerpt__more-link{
	display: inline-flex; align-items: center; gap: .35rem;
	margin-top: .65rem;
	font-family: "Bricolage Grotesque", system-ui, sans-serif !important;
	font-weight: 700; font-size: .9rem; text-decoration: none;
	color: var(--pana-lime-deep) !important;
}
.pana-accueil__grille .wp-block-post-excerpt .wp-block-post-excerpt__more-link::after{
	content: "\2192"; transition: transform .25s ease;
}
.pana-accueil__grille .wp-block-post:hover .wp-block-post-excerpt__more-link::after{
	transform: translateX(.3rem);
}
/* État vide soigné. */
.pana-accueil__actus .wp-block-query-no-results{
	margin-top: .5rem;
	padding: clamp(2rem, 5vw, 3rem);
	border: 1.5px dashed rgba(10,22,40,.18);
	border-radius: var(--pana-r-lg);
	background: var(--wp--preset--color--surface-2, #ECE6D6);
}
.pana-accueil__actus .wp-block-query-no-results p{
	margin: 0; color: var(--pana-muted, #5A6B7E); font-weight: 600;
}
/* Bouton "Toutes les actualités" : pilule ligne navy → plein au hover. */
.pana-accueil__actus .is-style-outline .wp-block-button__link,
.pana-accueil__actus .wp-block-button .wp-block-button__link{
	border-radius: 999px !important;
	border: 1.5px solid var(--pana-navy) !important;
	color: var(--pana-navy) !important;
	font-family: "Bricolage Grotesque", system-ui, sans-serif !important;
	font-weight: 700 !important;
	padding: .85em 1.7em !important;
	transition: background .3s var(--pana-ease), color .3s var(--pana-ease), transform .3s var(--pana-ease-bounce) !important;
}
.pana-accueil__actus .wp-block-button .wp-block-button__link:hover,
.pana-accueil__actus .wp-block-button .wp-block-button__link:focus{
	background: var(--pana-navy) !important;
	color: var(--pana-lime) !important;
	transform: translateY(-2px);
}

/* =====================================================================
 * 6) AGENDA / CALENDRIER (plugin) — items premium, bord lime, hover slide.
 *    Couvre les 2 jeux de classes possibles : .pana-calendrier__evenement
 *    article (réel) ET .pana-calendrier__item (défensif).
 * ================================================================== */
.pana-calendrier__liste{ gap: clamp(.85rem, 1.6vw, 1.1rem) !important; }

.pana-calendrier__evenement article,
.pana-calendrier__item{
	position: relative;
	min-width: 0;
	gap: .45rem !important;
	padding: clamp(1.1rem, 2vw, 1.4rem) clamp(1.25rem, 2.2vw, 1.6rem) !important;
	background: #ffffff !important;
	border: 1px solid var(--wp--preset--color--bordure, #E0D9C5) !important;
	border-left: 4px solid var(--pana-lime-deep) !important;
	border-radius: var(--pana-r-md) !important;
	box-shadow: 0 1px 2px rgba(10,22,40,.04);
	transition:
		transform .35s var(--pana-ease),
		box-shadow .35s var(--pana-ease),
		border-left-color .35s var(--pana-ease),
		background-color .35s var(--pana-ease) !important;
}
.pana-calendrier__evenement article:hover,
.pana-calendrier__item:hover{
	transform: translateX(4px);
	border-left-color: var(--pana-lime) !important;
	background: #fffefb !important;
	box-shadow: 0 18px 36px -24px rgba(10,22,40,.34) !important;
}
.pana-calendrier__date{
	font-family: var(--wp--preset--font-family--monospace, "JetBrains Mono", monospace) !important;
	font-size: .82rem !important;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--pana-navy) !important;
	text-transform: capitalize;
}
.pana-calendrier__nom{
	font-family: "Bricolage Grotesque", system-ui, sans-serif !important;
	font-weight: 700 !important;
	font-size: clamp(1.2rem, 2.2vw, 1.45rem) !important;
	line-height: 1.15;
	letter-spacing: -.02em;
}
.pana-calendrier__nom a{ color: var(--pana-encre, #15233b) !important; text-decoration: none !important; }
.pana-calendrier__nom a:hover,
.pana-calendrier__nom a:focus{ color: var(--pana-lime-deep) !important; }

.pana-calendrier__meta{
	display: flex; flex-wrap: wrap; align-items: center;
	gap: .4rem .7rem !important;
	color: var(--pana-muted, #5A6B7E) !important;
	font-size: .82rem !important;
}
.pana-calendrier__type{
	padding: .25em .7em !important;
	border-radius: 999px !important;
	background: rgba(197,245,66,.18) !important;
	color: #2f3d12 !important;
	font-weight: 700 !important;
}
.pana-calendrier__lieu,
.pana-calendrier__section{
	display: inline-flex; align-items: center; gap: .3rem;
}
.pana-calendrier__lieu::before{
	content: ""; width: .35rem; height: .35rem; border-radius: 999px;
	background: var(--pana-lime-deep); flex: 0 0 auto;
}
.pana-calendrier__section{
	padding: .25em .7em !important;
	border-radius: 999px !important;
	background: rgba(168,217,36,.18) !important;
	color: #5e7a10 !important;
	font-weight: 600 !important;
}
/* Filtre par section : pilules cohérentes. */
.pana-calendrier__filtre select{
	border-radius: 999px !important;
	border: 1px solid var(--wp--preset--color--bordure, #E0D9C5) !important;
	font-family: "Bricolage Grotesque", system-ui, sans-serif !important;
	font-weight: 600;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.pana-calendrier__filtre select:hover,
.pana-calendrier__filtre select:focus{
	border-color: var(--pana-navy) !important;
	box-shadow: 0 0 0 3px rgba(197,245,66,.25);
	outline: none;
}
/* État vide propre. */
.pana-accueil__agenda .pana-calendrier__liste:empty::after{
	content: "Aucun evenement programme pour le moment.";
	display: block;
	padding: clamp(1.75rem, 4vw, 2.5rem);
	border: 1.5px dashed rgba(10,22,40,.18);
	border-radius: var(--pana-r-md);
	background: var(--wp--preset--color--surface-2, #ECE6D6);
	color: var(--pana-muted, #5A6B7E);
	font-weight: 600;
	text-align: center;
}

/* =====================================================================
 * 7) PLATEFORME / ATOUTS (section navy) — verre dépoli + halo lime.
 * ================================================================== */
.pana-atouts{
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(90% 120% at 12% -10%, rgba(197,245,66,.12), transparent 50%),
		radial-gradient(55% 120% at 100% 110%, rgba(20,35,58,.9), transparent 60%),
		linear-gradient(180deg, var(--pana-navy) 0%, var(--pana-navy-2) 100%) !important;
	color: var(--pana-cream) !important;
	padding-block: clamp(3.5rem, 8vw, 7rem) !important;
}
/* Ligne lumineuse haute. */
.pana-atouts::after{
	content: "";
	position: absolute; inset: 0 0 auto 0; height: 1px;
	background: linear-gradient(90deg, transparent, rgba(197,245,66,.5), transparent);
}
/* Texture grille subtile. */
.pana-atouts::before{
	content: "";
	position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background-image:
		linear-gradient(rgba(245,241,232,.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(245,241,232,.035) 1px, transparent 1px);
	background-size: 40px 40px;
	-webkit-mask-image: radial-gradient(80% 80% at 80% 0%, #000 0%, transparent 75%);
	        mask-image: radial-gradient(80% 80% at 80% 0%, #000 0%, transparent 75%);
}
.pana-atouts > *{ position: relative; z-index: 1; }
.pana-atouts__entete{ margin-bottom: clamp(2.2rem, 4vw, 3.4rem) !important; }

.pana-atouts__grille{ gap: clamp(1rem, 1.8vw, 1.5rem) !important; }

.pana-atout{
	position: relative;
	min-width: 0;
	display: flex; flex-direction: column; gap: .9rem;
	border-top: 0 !important;
	padding: clamp(1.4rem, 2vw, 1.9rem) !important;
	border-radius: var(--pana-r-lg);
	background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
	border: 1px solid rgba(255,255,255,.08);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 20px 40px -30px rgba(0,0,0,.8);
	-webkit-backdrop-filter: blur(10px);
	        backdrop-filter: blur(10px);
	overflow: hidden;
	isolation: isolate;
	transition: transform .5s var(--pana-ease), border-color .5s var(--pana-ease), box-shadow .5s var(--pana-ease);
}
/* Halo lime au survol. */
.pana-atout::before{
	content: "";
	position: absolute; z-index: -1;
	top: -40%; right: -30%;
	width: 70%; height: 70%;
	background: radial-gradient(circle, rgba(197,245,66,.28), transparent 65%);
	opacity: 0;
	transition: opacity .5s var(--pana-ease);
}
.pana-atout:hover{
	transform: translateY(-8px);
	border-color: var(--pana-glass-line);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 30px 55px -28px rgba(0,0,0,.85), 0 0 0 1px rgba(197,245,66,.12);
}
.pana-atout:hover::before{ opacity: 1; }

/* Icône : médaillon lime. */
.pana-atout__icone{
	display: inline-flex; align-items: center; justify-content: center;
	width: 52px; height: 52px;
	margin-bottom: .2rem !important;
	border-radius: 14px;
	background: linear-gradient(150deg, rgba(197,245,66,.22), rgba(168,217,36,.08));
	border: 1px solid rgba(197,245,66,.28);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
	color: var(--pana-lime) !important;
	flex: none;
	transition: transform .5s var(--pana-ease-bounce), background .5s var(--pana-ease);
}
.pana-atout:hover .pana-atout__icone{ transform: rotate(-6deg) scale(1.06); }
.pana-atout__icone svg{ width: 26px !important; height: 26px !important; stroke: currentColor; }
.pana-atout__icone svg [fill]:not([fill="none"]){ fill: currentColor; }

.pana-atout__titre{
	font-family: "Bricolage Grotesque", system-ui, sans-serif !important;
	font-weight: 700 !important;
	letter-spacing: -.015em !important;
	font-size: clamp(1.15rem, 1.5vw, 1.35rem) !important;
	line-height: 1.15 !important;
	color: var(--pana-cream) !important;
}
.pana-atout__texte{
	color: rgba(245,241,232,.74) !important;
	font-size: .95rem !important;
	line-height: 1.55 !important;
	margin: 0 !important;
}
/* Pastille verre lime (RGAA AA / Exclusif PANA-LOISIRS). */
.pana-atout__pastille{
	align-self: flex-start;
	margin-top: auto;
	display: inline-flex; align-items: center; gap: .45em;
	padding: .35em .8em !important;
	border-radius: 999px !important;
	font-family: "Bricolage Grotesque", system-ui, sans-serif !important;
	font-size: .68rem !important;
	font-weight: 700 !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
	color: var(--pana-lime) !important;
	background: rgba(197,245,66,.12) !important;
	border: 1px solid rgba(197,245,66,.3) !important;
	box-shadow: 0 8px 20px -10px rgba(197,245,66,.55);
}
.pana-atout__pastille::before{
	content: ""; width: 6px; height: 6px; border-radius: 50%;
	background: var(--pana-lime);
	box-shadow: 0 0 8px rgba(197,245,66,.9);
}

/* =====================================================================
 * 8) CTA FINAL (plugin) — bouton lime relief, cohérence.
 * ================================================================== */
.pana-accueil__cta .wp-block-button__link,
.pana-accueil__cta .pana-cta__bouton,
.pana-cta-adherer__bouton{
	background: var(--pana-lime) !important;
	color: var(--pana-navy) !important;
	font-family: "Bricolage Grotesque", system-ui, sans-serif !important;
	font-weight: 800 !important;
	letter-spacing: -.01em !important;
	border-radius: 999px !important;
	padding: 1em 2em !important;
	box-shadow: 0 16px 34px -16px rgba(197,245,66,.6) !important;
	transition: transform .4s var(--pana-ease-bounce), box-shadow .4s var(--pana-ease) !important;
}
.pana-accueil__cta .wp-block-button__link:hover,
.pana-accueil__cta .pana-cta__bouton:hover,
.pana-cta-adherer__bouton:hover{
	transform: translateY(-3px) !important;
	box-shadow: 0 22px 44px -16px rgba(197,245,66,.75) !important;
}

/* =====================================================================
 * 9) FOOTER (cream) — colonnes nettes, liens animés, colonne Contact.
 * ================================================================== */
.pana-footer{ position: relative; }
/* Liseré lime fin en haut du footer. */
.pana-footer::before{
	content: "";
	position: absolute; inset: 0 0 auto 0; height: 3px;
	background: linear-gradient(90deg, var(--pana-lime), var(--pana-lime-deep), transparent);
}
.pana-footer__colonnes{
	gap: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 5vw, 4rem) !important;
	padding-top: clamp(.5rem, 2vw, 1rem);
}
.pana-footer__bloc{ flex: 1 1 13rem; min-width: 0; }
.pana-footer__bloc--identite,
.pana-footer__bloc--marque{ flex: 1.4 1 18rem; }

/* Titres de colonne : eyebrow + trait lime. */
.pana-footer__titre{
	position: relative;
	margin-bottom: 1.1rem !important;
	padding-bottom: .55rem;
	font-family: "Bricolage Grotesque", system-ui, sans-serif !important;
	font-size: .8rem !important;
	font-weight: 800 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase;
}
.pana-footer__titre::after{
	content: ""; position: absolute; left: 0; bottom: 0;
	width: 1.75rem; height: 2px; border-radius: 999px;
	background: var(--pana-lime-deep);
}
/* Liens : soulignage lime animé + léger glissement. */
.pana-footer__liens{ list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pana-footer__liens a{
	color: var(--pana-encre, #15233b) !important;
	text-decoration: none !important;
	transition: color .2s ease, padding-left .2s ease;
}
.pana-footer__liens a:hover,
.pana-footer__liens a:focus{
	color: var(--pana-lime-deep) !important;
	padding-left: .35rem;
}
.pana-footer__badge{ box-shadow: 0 8px 20px -10px rgba(10,22,40,.5); }
.pana-footer__nom{
	font-family: "Bricolage Grotesque", system-ui, sans-serif !important;
	font-weight: 800; letter-spacing: -.01em; font-size: 1.15rem;
}
/* Nouvelle colonne Contact (remplace la colonne Oclic). */
.pana-footer__bloc--contact .pana-footer__contact{
	margin: 0 0 .65rem !important;
	color: var(--pana-muted, #5A6B7E) !important;
	line-height: 1.5;
}
.pana-footer__bloc--contact .pana-footer__contact strong{ color: var(--pana-encre, #15233b); }
.pana-footer__bloc--contact a{
	color: var(--pana-encre, #15233b) !important;
	text-decoration: none !important;
	border-bottom: 1px solid rgba(10,22,40,.18);
	transition: color .2s ease, border-color .2s ease;
}
.pana-footer__bloc--contact a:hover,
.pana-footer__bloc--contact a:focus{
	color: var(--pana-lime-deep) !important; border-color: var(--pana-lime-deep);
}
/* Icônes sociales : cercle, lime au survol. */
.pana-footer__social .wp-social-link{
	border-radius: 999px !important;
	transition: transform .25s ease, background-color .25s ease !important;
}
.pana-footer__social .wp-social-link:hover{
	transform: translateY(-2px);
	background-color: rgba(197,245,66,.18) !important;
}
.pana-footer__social .wp-social-link:hover svg{ fill: var(--pana-lime-deep) !important; }
.pana-footer__legal{ gap: .75rem 1.25rem !important; padding-top: clamp(.5rem,1.5vw,1rem); }

/* =====================================================================
 * 10) RESPONSIVE — sécurité 980px (Z Fold / iPad portrait) + 600px.
 *     Hero reste à gauche, en-têtes restent centrés.
 * ================================================================== */
@media (max-width: 980px){
	.pana-hero__contenu,
	.pana-hero .pana-hero__surtitre,
	.pana-hero .pana-hero__titre,
	.pana-hero .pana-hero__sous-titre,
	.pana-hero .wp-block-buttons{
		margin-left: 0 !important;
		text-align: left !important;
	}
	.pana-accueil__sections .pana-accueil__surtitre,
	.pana-accueil__sections .pana-accueil__titre-sections,
	.pana-accueil__sections .pana-accueil__intro,
	.pana-accueil__actus .pana-accueil__titre,
	.pana-atouts .pana-atouts__entete,
	.pana-atouts .pana-atouts__surtitre,
	.pana-atouts .pana-atouts__titre,
	.pana-accueil__agenda .pana-calendrier__titre{
		text-align: center !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.pana-accueil__grille{ grid-template-columns: minmax(0,1fr) !important; }
	.pana-footer__colonnes > *{ min-width: 0; }
}
@media (min-width: 601px) and (max-width: 980px){
	.pana-accueil__grille{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
	.pana-atouts__grille{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 600px){
	.pana-mot-president::before{ font-size: clamp(4rem, 22vw, 6rem); top: -1.1rem; }
	.pana-calendrier__evenement article:hover,
	.pana-calendrier__item:hover{ transform: none; }
}

/* Respect du mouvement réduit. */
@media (prefers-reduced-motion: reduce){
	.pana-accueil__grille .wp-block-post,
	.pana-accueil__grille .wp-block-post-featured-image img,
	.pana-calendrier__evenement article,
	.pana-calendrier__item,
	.pana-atout,
	.pana-atout__icone{ transition: none !important; }
	.pana-accueil__grille .wp-block-post:hover,
	.pana-calendrier__evenement article:hover,
	.pana-calendrier__item:hover,
	.pana-atout:hover{ transform: none !important; }
}
/* ===== FIN livrable synthèse PANA-LOISIRS ===== */

/* ===== DÉ-BOXAGE blocs constrained (2026-06-20) =====
   Actualités / Agenda / colonnes Footer étaient bornés à ~660px (contentSize
   défaut) alors que Sections/Président/Atouts sont à 1200px. On les aligne sur
   la même largeur de contenu (1200) + padding cohérent → fini le "boxed". */
.pana-accueil__actus,
.pana-accueil__agenda{
  max-width: 1200px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--wp--preset--spacing--40, clamp(1.25rem, 4vw, 2.5rem)) !important;
  padding-right: var(--wp--preset--spacing--40, clamp(1.25rem, 4vw, 2.5rem)) !important;
  box-sizing: border-box;
}
.pana-accueil__actus > *,
.pana-accueil__agenda > *{ max-width: none !important; }

/* Footer : wrapper déjà pleine largeur (cream) ; on élargit le CONTENU à 1200. */
.pana-footer{
  padding-left: var(--wp--preset--spacing--40, clamp(1.25rem, 4vw, 2.5rem)) !important;
  padding-right: var(--wp--preset--spacing--40, clamp(1.25rem, 4vw, 2.5rem)) !important;
}
.pana-footer > *,
.pana-footer__colonnes,
.pana-footer__separateur,
.pana-footer__legal{
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* ===== FIN dé-boxage ===== */

/* ===== AGENDA : cartes événement avec image (2026-06-20) ===== */
.pana-calendrier__liste{
  list-style: none !important; margin: 0 !important; padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)) !important;
  gap: clamp(1.1rem, 2vw, 1.6rem) !important;
}
.pana-evt{
  display: flex !important; flex-direction: column;
  min-width: 0;
  background: #ffffff !important;
  border: 1px solid var(--wp--preset--color--bordure, #E0D9C5) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(10,22,40,.04);
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, border-color .4s ease !important;
  padding: 0 !important;
}
.pana-evt:hover{
  transform: translateY(-6px) !important;
  border-color: var(--pana-lime-deep, #1442B8) !important;
  box-shadow: 0 26px 50px -28px rgba(10,22,40,.42) !important;
}
/* Media : image du sport / affiche */
.pana-evt__media{
  position: relative; display: block;
  height: clamp(9rem, 13vw, 11rem);
  overflow: hidden;
  background: var(--pana-navy, #0A1628);
}
.pana-evt__img{
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.pana-evt:hover .pana-evt__img{ transform: scale(1.07); }
.pana-evt__scrim{
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,22,40,.04) 0%, rgba(10,22,40,.10) 55%, rgba(10,22,40,.55) 100%);
}
/* Badge type (haut-gauche, lime) */
.pana-evt__type{
  position: absolute; top: .7rem; left: .7rem; z-index: 2;
  display: inline-flex; align-items: center;
  padding: .3em .7em; border-radius: 999px;
  background: var(--pana-lime, #1C56E5); color: var(--pana-navy, #0A1628);
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 6px 16px -6px rgba(197,245,66,.7);
}
/* Badge J-X (haut-droite, verre navy) */
.pana-evt__compte{
  position: absolute; top: .7rem; right: .7rem; z-index: 2;
  display: inline-flex; align-items: center;
  padding: .3em .7em; border-radius: 999px;
  background: rgba(8,18,34,.78); color: #ffffff;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.18);
  font-family: var(--wp--preset--font-family--monospace, "JetBrains Mono", monospace);
  font-size: .72rem; font-weight: 700; letter-spacing: .03em;
}
/* Corps */
.pana-evt__corps{
  display: flex !important; flex-direction: column; gap: .55rem;
  padding: 1rem 1.1rem 1.15rem !important;
  flex: 1 1 auto;
}
.pana-evt .pana-calendrier__date{ text-transform: capitalize; }
.pana-evt .pana-calendrier__nom{ margin: 0 !important; }
.pana-evt .pana-calendrier__meta{ margin: 0 !important; margin-top: auto !important; padding-top: .35rem; }
/* CTA */
.pana-evt__cta{
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: .55rem; padding-top: .7rem;
  border-top: 1px solid rgba(10,22,40,.08);
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 800; font-size: .85rem; text-decoration: none;
  color: var(--pana-navy, #0A1628);
  transition: color .2s ease;
}
.pana-evt__cta span{ transition: transform .25s ease; }
.pana-evt:hover .pana-evt__cta span{ transform: translateX(.3rem); }
.pana-evt__cta:hover{ color: var(--pana-lime-deep, #1442B8); }

@media (prefers-reduced-motion: reduce){
  .pana-evt, .pana-evt__img, .pana-evt__cta span{ transition: none !important; }
  .pana-evt:hover{ transform: none !important; }
  .pana-evt:hover .pana-evt__img{ transform: none !important; }
}
/* ===== FIN agenda cartes ===== */

/* ============================================================= */
/* ===== HERO « MOSAÏQUE CLAIRE BRANDÉE » (2026-06-20) ========= */
/* ============================================================= */
.pana-hero-clair{
  position: relative;
  margin-top: 0 !important;
  background: #ffffff;
  overflow: clip;
}
.pana-hc{ position: relative; }
.pana-hc__inner{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: clamp(2rem, 5vw, 4.4rem);
  align-items: center;
  max-width: 1280px;
  margin-inline: auto;
  padding: calc(var(--pana-header-h, 5.75rem) + clamp(1.6rem, 5vh, 3.4rem)) clamp(1.15rem, 4vw, 2.5rem) clamp(2rem, 5vh, 3.4rem);
}

/* --- Colonne texte --- */
.pana-hc__texte{ min-width: 0; }
.pana-hc__surtitre{
  display: inline-flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  margin: 0;
  font-family: var(--wp--preset--font-family--monospace, "JetBrains Mono", monospace);
  font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: #41506a;
}
.pana-hc__point{
  width: .5rem; height: .5rem; border-radius: 50%;
  background: #F2683C; box-shadow: 0 0 0 0 rgba(242,104,60,.55);
  animation: panaHcPulse 2.4s infinite;
}
.pana-hc__sep{ width: 1.4rem; height: 1px; background: rgba(10,22,40,.25); }
@keyframes panaHcPulse{ 0%{box-shadow:0 0 0 0 rgba(242,104,60,.5)} 70%{box-shadow:0 0 0 .6rem rgba(242,104,60,0)} 100%{box-shadow:0 0 0 0 rgba(242,104,60,0)} }

.pana-hc__titre{
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  color: var(--pana-navy, #0A1628);
  font-weight: 800; line-height: .98; letter-spacing: -.02em;
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  margin: .85rem 0 0;
}
.pana-hc__titre-pop{
  background: linear-gradient(transparent 60%, var(--pana-lime, #1C56E5) 60%);
  padding: 0 .1em; border-radius: 2px;
}
.pana-hc__sous-titre{
  margin: 1.25rem 0 0; max-width: 36ch;
  color: #3a4759; font-size: clamp(1rem, 1.1vw, 1.16rem); line-height: 1.6;
}
.pana-hc__ctas{ display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }
.pana-hc__cta{
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .95em 1.55em; border-radius: 999px;
  font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 800; font-size: 1rem;
  text-decoration: none; cursor: pointer;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, background .25s ease, border-color .25s ease;
}
.pana-hc__cta--primaire{
  background: var(--pana-lime, #1C56E5); color: var(--pana-navy, #0A1628);
  box-shadow: 0 16px 30px -14px rgba(168,217,36,.75);
}
.pana-hc__cta--primaire span{ transition: transform .25s ease; }
.pana-hc__cta--primaire:hover{ transform: translateY(-2px); box-shadow: 0 24px 42px -16px rgba(168,217,36,.85); }
.pana-hc__cta--primaire:hover span{ transform: translateX(.3rem); }
.pana-hc__cta--ghost{ background: transparent; color: var(--pana-navy, #0A1628); border: 1.5px solid rgba(10,22,40,.22); }
.pana-hc__cta--ghost:hover{ border-color: var(--pana-navy, #0A1628); background: rgba(10,22,40,.05); transform: translateY(-1px); }

.pana-hc__preuves{
  list-style: none; margin: 2.1rem 0 0; padding: 1.3rem 0 0;
  display: flex; flex-wrap: wrap; gap: clamp(1.3rem, 3vw, 2.6rem);
  border-top: 1px solid rgba(10,22,40,.1);
}
.pana-hc__preuves li{ display: flex; flex-direction: column; }
.pana-hc__preuves strong{
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 1.65rem; font-weight: 800; color: var(--pana-navy, #0A1628); line-height: 1;
}
.pana-hc__preuves span{ margin-top: .3rem; font-size: .76rem; color: #5a6678; text-transform: uppercase; letter-spacing: .04em; }

/* --- Mosaïque animée (4×4 : 1 tuile feature 2×2 + 12 tuiles = 13 sports) --- */
.pana-hc__mosaique{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(4, 1fr);
  gap: .55rem;
  aspect-ratio: 1 / 1;
  width: 100%; min-width: 0;
}
.pana-hc__tuile{
  position: relative; min-width: 0;
  border-radius: 14px;
  background-color: var(--pana-navy, #0A1628);
  background-size: cover; background-position: center;
  box-shadow: 0 12px 26px -18px rgba(10,22,40,.55);
  opacity: 1;
  transition: opacity .42s ease, transform .55s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
}
.pana-hc__tuile:hover{ transform: translateY(-3px) scale(1.015); box-shadow: 0 22px 40px -20px rgba(10,22,40,.6); }
.pana-hc__tuile--feature{ grid-column: span 2; grid-row: span 2; border-radius: 20px; box-shadow: 0 22px 46px -22px rgba(10,22,40,.6); }

/* --- Bandeau défilant des sports (clair, en bas du hero) --- */
.pana-hc__bandeau{
  overflow: hidden;
  border-top: 1px solid rgba(10,22,40,.08);
  border-bottom: 1px solid rgba(10,22,40,.08);
  background: rgba(255,255,255,.5);
}
.pana-hc__bandeau-piste{
  display: flex; gap: 2.6rem; width: max-content;
  padding: .85rem 0;
  animation: panaHcDefile 40s linear infinite;
}
.pana-hc__bandeau-item{
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 700; font-size: .95rem; color: #2a3850; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 2.6rem;
}
.pana-hc__bandeau-item::after{ content: "●"; color: var(--pana-lime-deep, #1442B8); font-size: .5rem; }
@keyframes panaHcDefile{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* --- Responsive --- */
@media (max-width: 880px){
  .pana-hc__inner{ grid-template-columns: minmax(0, 1fr); gap: clamp(1.6rem, 5vw, 2.4rem); }
  .pana-hc__texte{ order: 1; }
  .pana-hc__mosaique{ order: 2; aspect-ratio: 5 / 4; }
  .pana-hc__sous-titre{ max-width: 100%; }
}
@media (max-width: 520px){
  .pana-hc__mosaique{ aspect-ratio: 1 / 1; gap: .4rem; }
  .pana-hc__cta{ width: 100%; justify-content: center; }
  .pana-hc__preuves{ gap: 1.1rem; }
  .pana-hc__preuves strong{ font-size: 1.4rem; }
}
@media (prefers-reduced-motion: reduce){
  .pana-hc__point{ animation: none; }
  .pana-hc__bandeau-piste{ animation: none; flex-wrap: wrap; width: auto; }
  .pana-hc__tuile, .pana-hc__cta, .pana-hc__cta--primaire span{ transition: none !important; }
  .pana-hc__tuile:hover{ transform: none; }
}

/* --- Header en mode CLAIR sur le hero (texte navy au repos, blanc une fois collé) --- */
.home .pana-header:not(.is-stuck) .wp-block-navigation a{ color: var(--pana-navy, #0A1628) !important; }
.home .pana-header:not(.is-stuck) .wp-block-navigation a:hover{ color: var(--pana-lime-deep, #1442B8) !important; }
.home .pana-header:not(.is-stuck) .pana-header__espace .wp-block-button__link{
  color: var(--pana-navy, #0A1628) !important;
  border-color: rgba(10,22,40,.25) !important;
  background: transparent !important;
}
.home .pana-header:not(.is-stuck) .pana-header__espace .wp-block-button__link:hover{ background: rgba(10,22,40,.06) !important; }
.home .pana-header:not(.is-stuck) .wp-block-navigation__responsive-container-open{ color: var(--pana-navy, #0A1628) !important; }
.home .pana-header:not(.is-stuck) .wp-block-navigation__responsive-container-open svg{ fill: var(--pana-navy, #0A1628) !important; }
/* ===== FIN hero mosaïque claire ===== */

/* ============================================================= */
/* ===== PAGES LÉGALES (.pana-legal) — 2026-06-20 ============== */
/* ============================================================= */
.pana-legal{ max-width: 820px; margin-inline: auto; }
.pana-legal__intro{
  font-size: 1.08rem; color: #3a4759; line-height: 1.65;
  border-left: 4px solid var(--pana-lime, #1C56E5);
  padding: .25rem 0 .25rem 1rem; margin-bottom: 1.5rem;
}
.pana-legal h2{
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  color: var(--pana-navy, #0A1628); font-weight: 800; letter-spacing: -.01em;
  font-size: clamp(1.3rem, 2.4vw, 1.65rem);
  margin: 2.3rem 0 .6rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(10,22,40,.08);
}
.pana-legal h2:first-of-type{ border-top: 0; padding-top: 0; }
.pana-legal h3{ color: var(--pana-navy, #0A1628); font-weight: 700; font-size: 1.08rem; margin: 1.4rem 0 .4rem; }
.pana-legal p, .pana-legal li{ color: #33414f; line-height: 1.7; }
.pana-legal p{ margin: .6rem 0; }
.pana-legal ul{ padding-left: 1.25rem; margin: .5rem 0; }
.pana-legal li{ margin: .35rem 0; }
.pana-legal a{ color: #3d6b00; text-decoration: underline; text-underline-offset: 2px; }
.pana-legal a:hover{ color: var(--pana-navy, #0A1628); }
.pana-legal strong{ color: var(--pana-navy, #0A1628); }
.pana-legal__maj{ margin-top: 2.4rem; font-size: .85rem; color: #6a7686; font-style: italic; }
/* Marqueur « à compléter » — visible en back-office, à retirer avant publication */
.pana-todo{
  background: #FFF3CD; color: #7a5b00;
  padding: .05em .4em; border-radius: 4px;
  font-weight: 600; font-style: normal;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
@media (max-width: 980px){
  .pana-legal{ max-width: 100%; min-width: 0; }
  .pana-legal *{ overflow-wrap: anywhere; }
}
/* ===== FIN pages légales ===== */

/* ============================================================= */
/* ===== FORMULAIRE DE CONTACT (.pana-contact) — 2026-06-20 ==== */
/* ============================================================= */
.pana-contact{ max-width: 720px; margin-inline: auto; }
.pana-contact__alerte{
  border-radius: 12px; padding: .9rem 1.1rem; margin: 0 0 1.3rem;
  font-weight: 600; line-height: 1.5;
}
.pana-contact__alerte--ok{ background: #ECFDF3; color: #14633b; border: 1px solid #A7E8C6; }
.pana-contact__alerte--err{ background: #FEF2F2; color: #8a1c1c; border: 1px solid #F6BcbC; }
.pana-contact__form{ display: flex; flex-direction: column; gap: 1.1rem; }
.pana-contact__ligne{
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1.1rem;
}
.pana-contact__champ{ display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.pana-contact__champ label,
.pana-contact__consent label{
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-weight: 600; font-size: .92rem; color: var(--pana-navy, #0A1628);
}
.pana-contact__champ label span[aria-hidden]{ color: #c2410c; }
.pana-contact__form input[type="text"],
.pana-contact__form input[type="email"],
.pana-contact__form input[type="tel"],
.pana-contact__form select,
.pana-contact__form textarea{
  width: 100%; min-width: 0; box-sizing: border-box;
  font: inherit; color: var(--pana-navy, #0A1628);
  background: #fff;
  border: 1.5px solid rgba(10,22,40,.16); border-radius: 12px;
  padding: .7rem .85rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.pana-contact__form textarea{ resize: vertical; min-height: 7rem; }
.pana-contact__form input:focus,
.pana-contact__form select:focus,
.pana-contact__form textarea:focus{
  outline: none;
  border-color: var(--pana-lime-deep, #1442B8);
  box-shadow: 0 0 0 3px rgba(197,245,66,.35);
}
.pana-contact__consent{ display: flex; align-items: flex-start; gap: .6rem; }
.pana-contact__consent input{ margin-top: .25rem; width: 1.05rem; height: 1.05rem; flex: 0 0 auto; accent-color: var(--pana-lime-deep, #1442B8); }
.pana-contact__consent label{ font-weight: 500; color: #33414f; line-height: 1.45; }
.pana-contact__consent a{ color: #3d6b00; text-decoration: underline; }
.pana-contact__actions{ display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .3rem; }
.pana-contact__submit{
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--pana-lime, #1C56E5); color: var(--pana-navy, #0A1628);
  border: 0; border-radius: 999px; cursor: pointer;
  font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 800; font-size: 1rem;
  padding: .9em 1.6em;
  box-shadow: 0 14px 26px -14px rgba(168,217,36,.75);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, opacity .2s ease;
}
.pana-contact__submit span{ transition: transform .25s ease; }
.pana-contact__submit:hover:not(:disabled){ transform: translateY(-2px); box-shadow: 0 22px 38px -16px rgba(168,217,36,.85); }
.pana-contact__submit:hover:not(:disabled) span{ transform: translateX(.3rem); }
.pana-contact__submit:disabled{ opacity: .6; cursor: progress; }
.pana-contact__feedback{ font-size: .9rem; color: #5a6678; }
/* Honeypot : retiré du flux visuel et de l'accessibilité */
.pana-contact__hp{ position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 600px){
  .pana-contact__ligne{ grid-template-columns: minmax(0,1fr); }
  .pana-contact__submit{ width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce){
  .pana-contact__submit, .pana-contact__submit span,
  .pana-contact__form input, .pana-contact__form select, .pana-contact__form textarea{ transition: none !important; }
  .pana-contact__submit:hover:not(:disabled){ transform: none; }
}
/* ===== FIN formulaire de contact ===== */

/* ================================================================= */
/* ===== FIX CARTES SECTION — visuel masqué (2026-06-21) =========== */
/* Cause : le bloc « inflected » attendait .pana-sections__media (jamais émis  */
/* par le PHP) et masquait .pana-sections__visuel (la vraie image). On rétablit */
/* une carte photo propre en réutilisant la photo Pexels par section déjà mappée */
/* (--pana-section-photo), cohérente avec le hero et l'agenda. CSS uniquement.   */
/* ================================================================= */

/* wpautop injecte des <br> dans la sortie shortcode : on les neutralise. */
.pana-sections__item br,
.pana-sections__lien br,
.pana-sections__corps br { display: none !important; }

/* Grille : cartes de hauteur égale par rangée. */
.pana-sections__grille { align-items: stretch !important; grid-auto-rows: auto !important; }
.pana-sections__item { height: auto !important; align-self: stretch !important; }

/* Carte = conteneur blanc arrondi (annule le bloc « inflected » transparent). */
.pana-sections__lien {
	display: flex !important; flex-direction: column !important;
	height: 100% !important; min-height: 0 !important; padding: 0 !important;
	background: var(--wp--preset--color--blanc, #fff) !important;
	border: 1px solid var(--wp--preset--color--bordure, #e0d9c5) !important;
	border-radius: 16px !important; overflow: hidden !important;
	box-shadow: 0 2px 12px rgba(10,22,40,.06) !important;
	transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, border-color .4s ease !important;
}
.pana-sections__item:hover .pana-sections__lien,
.pana-sections__lien:focus-visible {
	transform: translateY(-4px) !important;
	border-color: var(--pana-lime-deep, #1442B8) !important;
	box-shadow: 0 22px 40px -22px rgba(10,22,40,.28) !important;
	background: var(--wp--preset--color--blanc, #fff) !important;
}
.pana-sections__lien::before, .pana-sections__lien::after { content: none !important; display: none !important; }

/* VISUEL = photo de la section, plein cadre en haut. On annule display:none + le */
/* traitement « logo ». Photo = variable Pexels héritée de __lien (par slug d'URL). */
.pana-sections__visuel {
	display: block !important;
	width: 100% !important; max-width: none !important;
	height: clamp(9.5rem, 13vw, 12rem) !important;
	margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
	background-color: var(--pana-navy, #0A1628) !important;
	background-image: var(--pana-section-photo, none) !important;
	background-size: cover !important; background-position: center !important;
	overflow: hidden !important;
}
/* Image uploadée (souvent un petit logo) : masquée, la photo Pexels sert de fond. */
.pana-sections__visuel img { display: none !important; }

/* Pastille (sections SANS photo mappée) : bandeau coloré + emoji, même gabarit. */
.pana-sections__pastille {
	display: flex !important; align-items: center; justify-content: center;
	width: 100% !important; height: clamp(9.5rem, 13vw, 12rem) !important;
	margin: 0 !important; border-radius: 0 !important; font-size: 3rem !important;
	background: var(--pana-section-couleur, #1C56E5) !important; color: #fff !important;
}

/* Corps = zone texte sous la photo. */
.pana-sections__corps {
	display: flex !important; flex-direction: column; gap: .5rem;
	flex: 1 1 auto !important; padding: 1rem 1.1rem 1.15rem !important; margin: 0 !important;
}
.pana-sections__badge--handisport {
	display: inline-flex !important; align-self: flex-start;
	padding: .2em .6em; border-radius: 999px;
	background: rgba(16,185,129,.12); color: #0f766e;
	font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}
.pana-sections__nom {
	font-family: "Bricolage Grotesque", system-ui, sans-serif;
	font-weight: 800; font-size: clamp(1.1rem, 1.5vw, 1.3rem);
	color: var(--pana-navy, #0A1628); line-height: 1.15;
}
/* CTA « Découvrir → » ré-affiché (annule display:none), ancré en bas. */
.pana-sections__cta {
	display: inline-flex !important; align-items: center; gap: .35rem;
	margin-top: auto !important; padding-top: .7rem;
	border-top: 1px solid rgba(10,22,40,.08);
	font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 800; font-size: .9rem;
	color: var(--pana-navy, #0A1628);
}
.pana-sections__item:hover .pana-sections__cta { color: var(--pana-lime-deep, #1442B8) !important; }
.pana-sections__fleche { transition: transform .25s ease; }
.pana-sections__item:hover .pana-sections__fleche { transform: translateX(.3rem); }

/* Flèche coin (emoji ↗) : masquée, le CTA porte l'action. */
.pana-sections__coin { display: none !important; }

@media (prefers-reduced-motion: reduce){
	.pana-sections__lien, .pana-sections__fleche { transition: none !important; }
	.pana-sections__item:hover .pana-sections__lien { transform: none !important; }
}
/* ===== FIN fix cartes section ===== */

/* Supprime le CTA pseudo redondant (legacy) : on garde le vrai .pana-sections__cta */
.pana-sections__corps::after { content: none !important; display: none !important; }

/* === FIX bandeau hero clair : ne pas retrecir/chevaucher au filet 980px (2026-06-22) ===
   La nouvelle classe .pana-hc__bandeau n etait pas couverte par l exception du filet
   @media(max-width:980px) (seule l ancienne .pana-marquee l etait), d ou le chevauchement
   des noms de sports. On restaure la piste a sa largeur de contenu et des items non compressibles. */
@media (max-width: 980px){
  .pana-hc__bandeau-piste,
  .pana-hc__bandeau-item{ max-width: none; overflow-wrap: normal; word-break: keep-all; }
  .pana-hc__bandeau-piste{ width: max-content; flex-wrap: nowrap; }
  .pana-hc__bandeau-item{ flex: 0 0 auto; white-space: nowrap; }
}

/* ===== CONTRASTE post-recolor bleu (texte blanc sur accent bleu foncé) — 2026-06-24 ===== */
.pana-hc__cta--primaire{ color:#fff !important; box-shadow:0 16px 30px -14px rgba(28,86,229,.6) !important; }
.pana-hc__cta--primaire:hover{ color:#fff !important; box-shadow:0 24px 42px -16px rgba(28,86,229,.7) !important; }
.pana-hc__titre-pop{ background:none !important; color:var(--pana-lime) !important; padding:0 !important; border-radius:0 !important; }
.pana-contact__submit{ color:#fff !important; box-shadow:0 14px 26px -14px rgba(28,86,229,.6) !important; }

/* ===== LOGO header sans cartouche blanc ni ombre (demande Kevin 2026-06-24) ===== */
.pana-brand,
.home .pana-brand,
body:not(.home) .pana-brand,
.pana-header.is-stuck .pana-brand{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* ===== Police hero modernisée : Space Grotesk (self-hosted, RGPD) — Kevin 2026-06-24 ===== */
@font-face{
  font-family:"Space Grotesk";
  font-style:normal; font-weight:500;
  font-display:swap;
  src:url("assets/fonts/space-grotesk-500.woff2") format("woff2");
}
@font-face{
  font-family:"Space Grotesk";
  font-style:normal; font-weight:700;
  font-display:swap;
  src:url("assets/fonts/space-grotesk-700.woff2") format("woff2");
}
.pana-hc__titre{
  font-family:"Space Grotesk","Bricolage Grotesque",system-ui,sans-serif !important;
  font-weight:700 !important;
  letter-spacing:-.03em !important;
}
.pana-hc__surtitre,
.pana-hc__preuves strong{
  font-family:"Space Grotesk","JetBrains Mono",monospace !important;
}

/* ════════ LOGO+HERO WOW (Kevin 2026-06-24) : logo agrandi + titre hero XL + dégradé animé ════════ */
.pana-header .pana-brand__logo{ height:68px !important; }
.pana-header.is-stuck .pana-brand__logo{ height:52px !important; }
@media (max-width:600px){
  .pana-header .pana-brand__logo{ height:54px !important; }
  .pana-header.is-stuck .pana-brand__logo{ height:44px !important; }
}
/* En-tête plus haut pour accueillir le logo agrandi */
.pana-accueil{ --pana-header-h:6.5rem; }

/* Titre hero XL + WOW */
.pana-hc__titre{
  font-size:clamp(3.3rem, 9vw, 6.6rem) !important;
  line-height:.9 !important;
  letter-spacing:-.035em !important;
  font-weight:700 !important;
}
.pana-hc__titre-pop{
  display:inline-block;
  background:linear-gradient(100deg,#1C56E5 0%,#3B82F6 45%,#1442B8 100%) !important;
  background-size:220% auto !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important; color:transparent !important;
  animation:panaHeroShine 5.5s ease-in-out infinite;
}
@keyframes panaHeroShine{ 0%,100%{ background-position:0% 50% } 50%{ background-position:100% 50% } }
.pana-hc__sous-titre{ font-size:clamp(1.05rem, 1rem + .5vw, 1.3rem) !important; }
@media (prefers-reduced-motion: reduce){ .pana-hc__titre-pop{ animation:none; } }

/* ════════ Header fond blanc partout + sticky blanc (Kevin 2026-06-24) ════════ */
/* Pages internes : header blanc (remplace le navy) */
body:not(.home) .pana-header{
  background:#ffffff !important;
  border-bottom:1px solid rgba(10,22,40,.07) !important;
}
body:not(.home) .pana-header.is-stuck{
  box-shadow:0 6px 24px rgba(10,22,40,.10) !important;
}
/* Home : header collé (sticky) en blanc au lieu du navy translucide */
.home .pana-header.is-stuck{
  background:#ffffff !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  box-shadow:0 6px 24px rgba(10,22,40,.10) !important;
  border-bottom:1px solid rgba(10,22,40,.07) !important;
}
/* Texte de nav foncé quand le header collé est blanc (home) */
.home .pana-header.is-stuck .wp-block-navigation a{ color:var(--pana-navy,#0A1628) !important; }
.home .pana-header.is-stuck .wp-block-navigation a:hover{ color:var(--pana-lime-deep,#1442B8) !important; }
.home .pana-header.is-stuck .pana-header__espace .wp-block-button__link{ color:var(--pana-navy,#0A1628) !important; border-color:rgba(10,22,40,.25) !important; background:transparent !important; }
.home .pana-header.is-stuck .pana-header__espace .wp-block-button__link:hover{ background:rgba(10,22,40,.06) !important; }
.home .pana-header.is-stuck .wp-block-navigation__responsive-container-open{ color:var(--pana-navy,#0A1628) !important; }
.home .pana-header.is-stuck .wp-block-navigation__responsive-container-open svg{ fill:var(--pana-navy,#0A1628) !important; }

/* ════════ POLICE RONDE + DEVISE + FLECHE RONDE (Kevin 2026-06-26) ════════ */
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:700; font-display:swap; src:url("assets/fonts/poppins-700.woff2") format("woff2"); }
@font-face{ font-family:"Poppins"; font-style:normal; font-weight:800; font-display:swap; src:url("assets/fonts/poppins-800.woff2") format("woff2"); }
@font-face{ font-family:"Caveat"; font-style:normal; font-weight:700; font-display:swap; src:url("assets/fonts/caveat-700.woff2") format("woff2"); }

/* Titre hero : police moderne, ronde, grasse (Poppins ExtraBold) */
.pana-hc__titre{
  font-family:"Poppins","Bricolage Grotesque",system-ui,sans-serif !important;
  font-weight:800 !important;
  letter-spacing:-.02em !important;
}
.pana-hc__titre-pop{ font-weight:800 !important; }
.pana-hc__sous-titre{ font-family:"Poppins",-apple-system,sans-serif !important; }

/* Devise « signature » de l'omnisport (manuscrit Caveat) */
.pana-hc__devise{
  margin:1.5rem 0 .25rem !important;
  font-family:"Caveat",cursive !important;
  font-weight:700;
  font-size:clamp(1.6rem, 1.25rem + 1.6vw, 2.25rem);
  line-height:1.1;
  color:var(--pana-navy,#0A1628);
  max-width:28ch;
  position:relative;
  padding-left:1.05rem;
}
.pana-hc__devise::before{
  content:""; position:absolute; left:0; top:.12em; bottom:.12em;
  width:4px; border-radius:4px;
  background:linear-gradient(180deg,#1C56E5,#1442B8);
}

/* Flèche ronde « signature » des cartes section (restaurée, bas-droite de la photo) */
.pana-sections__coin{
  display:flex !important;
  position:absolute !important;
  top:calc(clamp(9.5rem,13vw,12rem) - 24px) !important;
  right:16px !important; left:auto !important; bottom:auto !important;
  z-index:4 !important;
  align-items:center; justify-content:center;
  width:48px; height:48px;
  border-radius:999px;
  background:var(--pana-navy,#0A1628) !important;
  color:#ffffff !important;
  font-size:1.4rem !important; line-height:1 !important;
  border:3px solid #ffffff;
  box-shadow:0 8px 18px -6px rgba(10,22,40,.5);
  transition:transform .3s cubic-bezier(.22,1,.36,1), background .3s ease !important;
}
.pana-sections__item:hover .pana-sections__coin,
.pana-sections__lien:focus-visible .pana-sections__coin{
  transform:translateY(-4px) !important;
  background:#1C56E5 !important; color:#ffffff !important;
}

/* coin double-fleche fix : neutralise l'ancien SVG ::after (doublon) */
.pana-sections__coin::after,
.pana-sections__item:hover .pana-sections__coin::after{ content:none !important; display:none !important; background:none !important; }

/* titre hero reduit (Kevin 2026-06-26) : Poppins ExtraBold rend plus gras/large que l'ancienne police */
.pana-hc__titre{
  font-size:clamp(2.4rem, 5.4vw, 4.2rem) !important;
  line-height:.98 !important;
}
@media (max-width:880px){ .pana-hc__titre{ font-size:clamp(2.2rem, 8vw, 3.2rem) !important; } }

/* CTA « Adhérer » de l'en-tête : texte en BLANC. Spécificité portée AU-DESSUS de la règle
   is-style-fill (.wp-block-button.is-style-fill > .wp-block-button__link.wp-element-button,
   0,4,0) qui imposait le navy. Cible uniquement le bouton de l'en-tête. MAJ 26/06. */
.pana-header__adherer.wp-block-button.is-style-fill > .wp-block-button__link.wp-element-button,
.pana-header__adherer.wp-block-button.is-style-fill > .wp-block-button__link.wp-element-button:visited,
.pana-header__adherer.wp-block-button.is-style-fill > .wp-block-button__link.wp-element-button:hover,
.pana-header__adherer.wp-block-button.is-style-fill > .wp-block-button__link.wp-element-button:focus {
	color: #fff !important;
}