/* ============================================================================
   PANA-LOISIRS · Design system VITRINE (refonte 2026)
   Feuille dédiée aux 3 pages publiques (accueil, annuaire sections, fiche section).
   Additive : chargée APRÈS style.css, elle habille les composants de la refonte
   sans toucher au reste. Palette = charte du club (theme.json) + maquettes.
   Tout est préfixé .pv- (pana vitrine) pour éviter toute collision.
   ========================================================================== */

:root {
  /* --- Couleurs (charte PANA-LOISIRS + maquettes) --- */
  --pv-bleu:        #1C56E5;   /* bleu royal · primaire (CTA, liens, accents) */
  --pv-bleu-deep:   #1442B8;   /* survol / dégradés */
  --pv-bleu-soft:   #EAF0FE;   /* fonds bleutés très clairs (pastilles) */
  --pv-navy:        #0A1628;   /* bleu nuit · bandeaux sombres, footer, titres hero */
  --pv-navy-2:      #14233A;
  --pv-encre:       #15233B;   /* texte titres */
  --pv-texte:       #24354D;   /* texte courant */
  --pv-muted:       #5A6B7E;   /* texte secondaire */
  --pv-papier:      #F5F1E8;   /* crème · fonds de section */
  --pv-papier-2:    #FAF8F3;   /* crème très clair */
  --pv-blanc:       #FFFFFF;
  --pv-orange:      #F2701F;   /* accent secondaire (logo) */
  --pv-vert:        #33C13A;   /* accent secondaire (logo) */
  --pv-bord:        rgba(10, 22, 40, 0.10);
  --pv-bord-soft:   rgba(10, 22, 40, 0.06);

  /* --- Rayons --- */
  --pv-r-xs: 8px;
  --pv-r-sm: 12px;
  --pv-r-md: 18px;
  --pv-r-lg: 24px;
  --pv-r-xl: 32px;
  --pv-r-pill: 999px;

  /* --- Ombres douces (maquettes) --- */
  --pv-ombre-sm:   0 6px 18px rgba(10, 22, 40, 0.06);
  --pv-ombre:      0 14px 36px -14px rgba(10, 22, 40, 0.14);
  --pv-ombre-md:   0 20px 48px -18px rgba(10, 22, 40, 0.18);
  --pv-ombre-bleu: 0 18px 40px -16px rgba(28, 86, 229, 0.40);

  /* --- Rythme --- */
  /* Maquette : .container{max-width:1240px;padding:0 28px} → CONTENU utile = 1184px.
     --pv-max = largeur de contenu ; les wrappers font calc(--pv-max + 56px) + padding 28. */
  --pv-max: 1184px;
  --pv-gap: clamp(1rem, 2vw, 1.5rem);
  --pv-section-y: clamp(3.5rem, 6vw, 6rem);

  /* --- Typo (héritée du thème : Bricolage Grotesque + Manrope) --- */
  --pv-font-titres: "Bricolage Grotesque", "Manrope", system-ui, sans-serif;
  --pv-font-corps:  "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------------------------------------------------------------------------
   Pages vitrine : PLEIN BORD réel (maquette : ni gouttières latérales, ni
   bandes entre les sections). On neutralise, UNIQUEMENT sur ces pages, le
   padding racine (spacing|30) et le blockGap global (spacing|40) du theme.json.
   Les variables root--padding sont mises à 0 pour que les marges négatives
   des alignfull restent cohérentes (pas de débordement horizontal).
   ------------------------------------------------------------------------- */
body:is(.home, .blog, .post-type-archive-pana_section, .single-pana_section) {
  --wp--style--root--padding-left: 0px;
  --wp--style--root--padding-right: 0px;
  padding-left: 0 !important; padding-right: 0 !important;
}
body:is(.home, .blog, .post-type-archive-pana_section, .single-pana_section) .wp-site-blocks { padding-left: 0; padding-right: 0; }
body:is(.home, .blog, .post-type-archive-pana_section, .single-pana_section) .wp-site-blocks > * { margin-block-start: 0 !important; }
body:is(.home, .blog) .pana-accueil > * { margin-block-start: 0 !important; }
body.post-type-archive-pana_section .pana-sections-archive > * { margin-block-start: 0 !important; }
body.single-pana_section .pana-section-page > * { margin-block-start: 0 !important; }

/* Le header de l'accueil est ABSOLU par-dessus le hero (style.css) : le hero
   doit le dégager + respirer (maquette : contenu à ~156px du haut de page).
   Le header repose donc sur le BLANC du hero ; un filet bas le sépare (maquette). */
.home .pv-hero { padding-top: clamp(8.5rem, 6rem + 6vw, 10.75rem); }
.home .pana-header { border-bottom: 1px solid rgba(7, 26, 61, .08); }

/* ---------------------------------------------------------------------------
   Conteneur & rythme de section
   ------------------------------------------------------------------------- */
.pv-wrap { max-width: calc(var(--pv-max) + 56px); margin-inline: auto; padding-inline: 28px; }
.pv-section { padding-block: var(--pv-section-y); }
.pv-section--papier { background: var(--pv-papier); }
.pv-section--papier2 { background: var(--pv-papier-2); }

/* ---------------------------------------------------------------------------
   Eyebrow (surtitre à filets colorés) — ex. « ▬▬ NOS SECTIONS SPORTIVES »
   ------------------------------------------------------------------------- */
.pv-eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--pv-font-corps);
  font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--pv-muted); margin: 0 0 1rem;
}
.pv-eyebrow::before {
  content: ""; width: 26px; height: 8px; border-radius: 2px; flex: 0 0 auto;
  background: linear-gradient(90deg, var(--pv-bleu) 0 40%, var(--pv-orange) 40% 70%, var(--pv-vert) 70% 100%);
}
.pv-eyebrow--center { justify-content: center; }

/* ---------------------------------------------------------------------------
   Titres de section
   ------------------------------------------------------------------------- */
.pv-h2 {
  font-family: var(--pv-font-titres);
  font-weight: 800; line-height: 1.08; letter-spacing: -.02em;
  color: var(--pv-encre); font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.9rem);
  margin: 0 0 .6rem; text-wrap: balance;
}
.pv-lead { color: var(--pv-muted); font-size: clamp(1rem, .96rem + .3vw, 1.15rem); line-height: 1.6; max-width: 62ch; }
.pv-center { text-align: center; }
.pv-center .pv-lead { margin-inline: auto; }

/* ---------------------------------------------------------------------------
   Boutons
   ------------------------------------------------------------------------- */
.pv-btn {
  --_bg: var(--pv-bleu); --_fg: #fff; --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--pv-font-corps); font-weight: 800; font-size: .875rem; line-height: 1;
  min-height: 46px; padding: 0 24px; border-radius: var(--pv-r-pill);
  background: var(--_bg); color: var(--_fg); border: 1.5px solid var(--_bd);
  text-decoration: none; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  box-shadow: var(--pv-ombre-bleu);
}
.pv-btn:hover { transform: translateY(-2px); background: var(--pv-bleu-deep); }
.pv-btn:focus-visible { outline: 3px solid var(--pv-bleu); outline-offset: 2px; }
.pv-btn .pv-arrow { transition: transform .18s ease; }
.pv-btn:hover .pv-arrow { transform: translateX(3px); }

.pv-btn--ghost { --_bg: #fff; --_fg: var(--pv-bleu); --_bd: rgba(28,86,229,.30); box-shadow: none; }
.pv-btn--ghost:hover { --_bg: var(--pv-bleu-soft); --_fg: var(--pv-bleu-deep); background: var(--pv-bleu-soft); }
.pv-btn--navy { --_bg: var(--pv-navy); --_fg: #fff; box-shadow: var(--pv-ombre-md); }
.pv-btn--navy:hover { background: #000; }
.pv-btn--sur-bleu { --_bg: #fff; --_fg: var(--pv-bleu); box-shadow: var(--pv-ombre-md); }
.pv-btn--sur-bleu:hover { --_bg: #fff; background: #fff; transform: translateY(-2px); }

/* Lien fléché discret « Découvrir → » / « Lire la suite → » */
.pv-lien {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; color: var(--pv-bleu); text-decoration: none; font-size: .95rem;
}
.pv-lien .pv-arrow { transition: transform .18s ease; }
.pv-lien:hover .pv-arrow { transform: translateX(4px); }

/* ---------------------------------------------------------------------------
   Cartes
   ------------------------------------------------------------------------- */
.pv-card {
  background: var(--pv-blanc); border: 1px solid var(--pv-bord-soft);
  border-radius: var(--pv-r-lg); box-shadow: var(--pv-ombre-sm);
  overflow: hidden; transition: transform .2s ease, box-shadow .2s ease;
}
.pv-card:hover { transform: translateY(-4px); box-shadow: var(--pv-ombre-md); }

/* Pastille d'icône ronde bleue (sur cartes) */
.pv-ico {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--pv-blanc); box-shadow: var(--pv-ombre-sm);
  display: grid; place-items: center; color: var(--pv-bleu);
  border: 1px solid var(--pv-bord-soft);
}
.pv-ico svg { width: 22px; height: 22px; }

/* ---------------------------------------------------------------------------
   Bandeau CTA bleu (pleine largeur)
   ------------------------------------------------------------------------- */
.pv-cta {
  border-radius: var(--pv-r-xl);
  background: linear-gradient(120deg, var(--pv-bleu), var(--pv-bleu-deep));
  color: #fff; padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1.4rem, 4vw, 3rem);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  box-shadow: var(--pv-ombre-bleu);
}
.pv-cta__titre { font-family: var(--pv-font-titres); font-weight: 800; font-size: clamp(1.3rem, 1rem + 1.5vw, 2rem); margin: 0; line-height: 1.15; }
.pv-cta__texte { color: rgba(255,255,255,.86); margin: .35rem 0 0; max-width: 52ch; }

/* ---------------------------------------------------------------------------
   Utilitaires images (object-fit, pas de déformation)
   ------------------------------------------------------------------------- */
.pv-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pv-media { overflow: hidden; background: var(--pv-papier-2); }

/* ---------------------------------------------------------------------------
   Accessibilité : focus visible homogène sur les composants vitrine
   ------------------------------------------------------------------------- */
.pv-lien:focus-visible, .pv-card a:focus-visible { outline: 3px solid var(--pv-bleu); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  .pv-btn, .pv-card, .pv-arrow { transition: none !important; }
}

/* ============================================================================
   ACCUEIL · HERO (2 colonnes, fond clair, mosaïque de photos)
   ========================================================================== */
/* Neutralise l'habillage de l'ancien hero sombre qui enveloppait le bloc. */
.pana-hero-clair { padding: 0 !important; background: transparent !important; margin: 0 !important; }

.pv-hero {
  background: #fff; /* maquette : header + hero sur BLANC (validé client 08/07) */
  padding-block: clamp(2.6rem, 5vw, 4.5rem) clamp(2rem, 3.75vw, 3.375rem); /* 72 / 54 maquette */
}
.pv-hero__inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 620px); /* maquette : mosaïque 620px */
  gap: clamp(1.8rem, 6vw, 86px); align-items: start;
}
.pv-hero__texte { min-width: 0; display: flex; flex-direction: column; align-self: stretch; }
.pv-hero__titre {
  font-family: var(--pv-font-titres); font-weight: 800; line-height: .94; letter-spacing: -.055em;
  color: var(--pv-navy); font-size: clamp(2.75rem, 1rem + 5.4vw, 4.875rem); /* 78px maquette */
  margin: 0 0 17px; text-wrap: balance;
}
.pv-hero__accent { color: var(--pv-bleu); }
.pv-hero__lead {
  color: #2C3850; font-size: 1.125rem; /* 18px maquette */
  line-height: 1.5; max-width: 510px; margin: 0 0 20px;
}
.pv-hero__ctas { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: 22px; }
/* Devise : décalée à droite de la colonne texte (sous les CTA, dans l'espace vide),
   agrandie et en bleu (validé 09/07). */
.pv-hero__devise { display: flex; gap: 12px; align-items: flex-start; margin: auto 0 0 auto; max-width: 390px; }
.pv-hero__devise .pv-hero__quote { color: var(--pv-bleu); opacity: .9; flex: 0 0 auto; margin-top: .12rem; }
.pv-hero__devise blockquote {
  margin: 0; color: var(--pv-bleu); font-style: normal; font-weight: 700;
  font-family: "Bradley Hand", "Segoe Print", "Lucida Handwriting", cursive;
  font-size: 1.4rem; line-height: 1.34; /* agrandie (~22px) + bleu, ancrée en bas de la colonne */
}

/* Mosaïque : 3 colonnes 1.15fr .75fr .75fr, 2 tuiles hautes (nth 1 et 5).
   13 tuiles + 2 hautes = 15 cellules = 5 rangées pleines ; rangées 88px pour
   garder la hauteur de hero de la maquette (5×88 + 4×12 ≈ 488px). */
.pv-hero__mosaique { display: grid; grid-template-columns: 1.15fr .75fr .75fr; grid-auto-rows: 88px; gap: 12px; margin-top: -4px; }
.pv-hero__tuile { border-radius: 16px; overflow: hidden; box-shadow: 0 4px 10px rgba(7, 26, 61, .10); background: var(--pv-papier); }
.pv-hero__tuile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-hero__tuile:nth-child(1) { grid-row: span 2; }
.pv-hero__tuile:nth-child(5) { grid-row: span 2; }

@media (max-width: 900px) {
  .pv-hero__inner { grid-template-columns: 1fr; gap: 2rem; }
  .pv-hero__mosaique { grid-auto-rows: 78px; }
  .pv-hero__devise { margin: 22px 0 0 0; } /* colonne unique : la devise reste alignée à gauche, sans ancrage bas */
}
@media (max-width: 520px) {
  .pv-hero__mosaique { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 84px; }
}

/* ============================================================================
   ACCUEIL · Mission centrée + en-tête « Nos sections sportives »
   ========================================================================== */
.pv-eyebrow--center { display: flex; justify-content: center; }
/* Maquette : intro padding-bottom 42 + sports padding-top 24 = 66px avant l'en-tête de grille. */
.pv-mission { text-align: center; max-width: 760px; margin: 0 auto clamp(2.6rem, 4.6vw, 66px); }
.pv-mission .pv-eyebrow { margin-bottom: 7px; }
.pv-mission__titre {
  font-family: var(--pv-font-titres); font-weight: 800; letter-spacing: -.04em;
  font-size: clamp(1.55rem, 1.1rem + 1.55vw, 2.125rem); /* 34px maquette */
  line-height: 1.08; color: var(--pv-navy);
  margin: 0 auto .5rem; /* une seule ligne comme la maquette (pas de borne 720px) */
}
.pv-mission__lead { color: #5D687C; font-size: .9rem; line-height: 1.45; margin: 0 auto; max-width: 760px; }
.pv-sections-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 16px; }
.pv-sections-head .pv-eyebrow { margin: 0; }
.pv-sections-head__lien {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 15px;
  border: 1px solid rgba(7, 26, 61, .16); background: #fff; border-radius: var(--pv-r-pill);
  font-family: var(--pv-font-corps); font-weight: 800; font-size: .75rem; color: #1A2945;
}
.pv-sections-head__lien:hover { color: var(--pv-bleu); border-color: rgba(28, 86, 229, .35); }

/* ============================================================================
   CARTES DE SECTION — classes DÉDIÉES .pv-scard* (grille accueil + annuaire).
   Découplées à dessein des anciennes .pana-sections__* : le style.css du thème
   porte plusieurs couches héritées de cartes en !important (générations
   successives) qui écrasaient tout restyle. Ici, aucune collision possible.
   Le shortcode conserve la <section class="pana-sections"> (filtre + a11y) ;
   seules les cartes et la grille passent en .pv-scard* / .pv-scards.
   ========================================================================== */
/* Grille responsive (auto-fill), plafonnée par modificateur --3/--4. */
.pv-scards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 22px; margin: 0; padding: 0; list-style: none; /* gap maquette */
}
.pv-scards > * { min-width: 0; }
@media (min-width: 60rem) {
  .pv-scards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pv-scards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Accueil : 5 colonnes sur grand écran (13 sections = 5 + 5 + 3). */
@media (min-width: 75rem) {
  .pana-accueil__sections .pv-scards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* Le shortcode pose aussi son propre titre : superflu sur l'accueil. */
.pana-accueil__sections .pana-sections__titre { display: none; }
/* Maquette : le blanc du hero se prolonge derrière l'intro puis retombe sur le crème
   des cartes (transition douce, pas de bande). */
.pana-accueil .pana-accueil__sections { background: linear-gradient(180deg, #fff 0, #F8F4EC 190px, var(--pv-papier) 340px) !important; }

/* Carte = lien vertical, blanc, ombre douce, coin arrondi. */
.pv-scard { display: flex; }
.pv-scard[hidden] { display: none; }
.pv-scard__lien {
  position: relative; display: flex; flex-direction: column; width: 100%; height: 218px; /* hauteur fixe maquette */
  text-decoration: none; background: var(--pv-blanc);
  border: 1px solid rgba(7, 26, 61, .06); border-radius: 16px; overflow: hidden;
  box-shadow: 0 8px 24px rgba(7, 26, 61, .08);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1), border-color .35s;
}
.pv-scard__lien:hover, .pv-scard__lien:focus-visible {
  transform: translateY(-4px); border-color: var(--pv-bord); box-shadow: var(--pv-ombre-md);
}
.pv-scard__lien:focus-visible { outline: 3px solid var(--pv-bleu); outline-offset: 2px; }

/* Média : bandeau 112px fixe en tête de carte (maquette). */
.pv-scard__media {
  position: relative; display: block; height: 112px; flex: 0 0 auto; overflow: hidden;
  background: color-mix(in srgb, var(--pana-section-couleur) 9%, #fff);
}
.pv-scard__visuel {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 0; overflow: hidden;
}
.pv-scard__visuel img { transition: transform .5s cubic-bezier(.22,1,.36,1); }
.pv-scard__lien:hover .pv-scard__visuel img { transform: scale(1.05); }

/* Photo d'action dédiée : plein cadre recadré. */
.pv-scard--photo .pv-scard__visuel img { width: 100%; height: 100%; max-width: none; object-fit: cover; }

/* Logo (cas actuel) : présenté cadré sur fond crème très clair, sans rognage. */
.pv-scard--logo .pv-scard__media { background: var(--pv-papier-2); }
.pv-scard--logo .pv-scard__visuel { padding: 1rem 1.2rem; }
.pv-scard--logo .pv-scard__visuel img { width: auto; height: auto; max-height: 74%; max-width: 80%; object-fit: contain; }
/* Un logo se suffit à lui-même : pas de pastille emoji redondante. */
.pv-scard--logo .pv-scard__pastille { display: none; }

/* Sans visuel : dégradé doux de la couleur de section + pictogramme centré. */
.pv-scard--vide .pv-scard__media {
  background: linear-gradient(135deg, color-mix(in srgb, var(--pana-section-couleur) 24%, #fff), color-mix(in srgb, var(--pana-section-couleur) 8%, #fff));
}
.pv-scard--vide .pv-scard__pastille {
  left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%);
  width: 3.6rem; height: 3.6rem; font-size: 1.8rem;
}

/* Pastille ronde (icône du sport), chevauchant le bas-gauche du média (maquette : 48px, left 12, top 92). */
.pv-scard__pastille {
  position: absolute; left: 12px; bottom: -28px; z-index: 2; margin: 0;
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--pv-blanc); border: 0;
  box-shadow: 0 6px 14px rgba(7, 26, 61, .14); font-size: 1.25rem; line-height: 1;
}
/* Chip Handisport, coin haut-gauche du média. */
.pv-scard__badge {
  position: absolute; top: .8rem; left: .8rem; z-index: 2;
  background: rgba(255, 255, 255, .94); color: #3730a3;
  padding: .24rem .6rem; border-radius: var(--pv-r-pill); font-size: .72rem; font-weight: 800;
  box-shadow: 0 4px 12px rgba(10, 22, 40, .14);
}

/* Corps : nom + extrait (maquette : padding 32/18/14, titre 17px, extrait 13px). */
.pv-scard__corps {
  position: relative; display: flex; flex: 1 1 auto; flex-direction: column; gap: 4px;
  padding: 30px 18px 14px; min-height: 0;
}
.pv-scard--logo .pv-scard__corps, .pv-scard--vide .pv-scard__corps { padding-top: 30px; }
.pv-scard__nom {
  font-family: var(--pv-font-titres); font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
  color: var(--pv-navy); font-size: 1.0625rem; /* 17px maquette */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pv-scard__extrait {
  flex: 0 0 auto; color: #6B7484; font-size: .8125rem; line-height: 1.3; /* 13px maquette */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Flèche nue bleue en bas à droite (maquette : mini-arrow, sans pastille). */
.pv-scard__fleche {
  position: absolute; right: 11px; bottom: 10px;
  width: auto; height: auto; border-radius: 0; background: transparent;
  display: flex; align-items: center; justify-content: center;
  color: var(--pana-section-couleur); font-size: 1rem; font-weight: 900;
  transition: transform .25s ease, color .25s ease;
}
.pv-scard__lien:hover .pv-scard__fleche { transform: translateX(3px); }

/* ============================================================================
   CTA d'accueil — bandeau bleu horizontal (maquette).
   Override CIBLÉ et scopé à :is(.pana-accueil__cta, .pana-sections-archive__cta) : le style.css du thème pose
   plusieurs règles héritées en !important sur .pana-cta* (titre navy, centrage).
   Le !important ici neutralise précisément ces règles, sans toucher aux CTA des
   pages de section (qui gardent leur style).
   ========================================================================== */
/* Maquette : .cta{padding:8px 0 19px} → barre collée à la rangée actus/agenda. */
:is(.pana-accueil__cta, .pana-sections-archive__cta) { padding: 8px 28px 19px !important; }
:is(.pana-accueil__cta, .pana-sections-archive__cta) .pana-cta {
  display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between;
  gap: 1.4rem; flex-wrap: wrap; text-align: left !important; min-height: 65px !important; /* barre fine maquette */
  max-width: var(--pv-max); margin: 0 auto !important;
  padding: .7rem 35px .7rem 38px !important;
  background: linear-gradient(90deg, #1458F0, #0C59FF) !important;
  border: 0 !important; border-radius: 8px !important;
  box-shadow: 0 12px 30px rgba(33, 91, 238, .20) !important; color: #fff !important;
}
:is(.pana-accueil__cta, .pana-sections-archive__cta) .pana-cta__titre {
  margin: 0 !important; flex: 1 1 320px; text-align: left !important;
  font-family: var(--pv-font-titres); font-weight: 800 !important; color: #fff !important;
  font-size: 1.375rem !important; letter-spacing: -.04em; line-height: 1.15; /* 22px maquette */
}
:is(.pana-accueil__cta, .pana-sections-archive__cta) .pana-cta__bouton {
  flex: 0 0 auto; display: inline-flex !important; align-items: center; gap: .5rem;
  background: rgba(255, 255, 255, .14) !important; color: #fff !important; font-weight: 800 !important;
  text-decoration: none; padding: .55rem 1.1rem !important; border: 1px solid rgba(255, 255, 255, .2) !important;
  border-radius: var(--pv-r-pill) !important; font-family: var(--pv-font-corps); font-size: .8rem;
  box-shadow: none !important; transition: transform .2s, background .2s;
}
:is(.pana-accueil__cta, .pana-sections-archive__cta) .pana-cta__bouton::after { content: " \2192"; }
:is(.pana-accueil__cta, .pana-sections-archive__cta) .pana-cta__bouton:hover,
:is(.pana-accueil__cta, .pana-sections-archive__cta) .pana-cta__bouton:focus-visible { transform: translateY(-2px) !important; }

/* ============================================================================
   RAPPORT MORAL — bandeau navy 2 colonnes (maquette). Classes dédiées .pv-rapport*.
   On neutralise le wrapper legacy .pana-accueil__president (fond/padding/photo en
   !important d'anciennes versions) : le bloc .pv-rapport porte tout lui-même.
   ========================================================================== */
.pana-accueil__president { padding: 0 !important; background: transparent !important; overflow: visible !important; }
.pana-accueil__president::before, .pana-accueil__president::after { content: none !important; display: none !important; }

/* Maquette : bandeau pleine largeur, photo BIEN visible sous un voile navy 90°,
   contenu centré 1240px en 2 colonnes (380px / 1fr), hauteur mini 220px. */
.pv-rapport {
  position: relative; overflow: hidden; color: #fff; min-height: 220px;
  display: flex; align-items: center; padding-block: clamp(1.8rem, 3vw, 2.6rem);
  background: linear-gradient(90deg, rgba(7, 26, 61, .92), rgba(7, 26, 61, .78)), var(--pv-navy);
}
.pv-rapport--photo {
  background: linear-gradient(90deg, rgba(7, 26, 61, .92), rgba(7, 26, 61, .78)),
    var(--pv-rapport-img) center / cover no-repeat;
}
.pv-rapport__grid {
  position: relative; z-index: 1; display: grid; width: 100%;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(2rem, 6vw, 80px); align-items: center;
  max-width: calc(var(--pv-max) + 56px); margin-inline: auto; padding-inline: 28px;
}
.pv-eyebrow--clair { color: #DCE7FF; }
.pv-rapport__titre {
  font-family: var(--pv-font-titres); font-weight: 800; letter-spacing: -.04em; text-wrap: balance;
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem); /* 40px maquette */
  line-height: 1.08; margin: 0; color: #fff;
}
.pv-rapport__sign { margin: 1.1rem 0 0; font-weight: 700; font-size: .8rem; color: rgba(255, 255, 255, .82); }
.pv-rapport__corps { color: #F2F7FF; font-size: 1.0625rem; line-height: 1.5; /* 17px maquette */ }
.pv-rapport__corps p { margin: 0 0 .9rem; }
.pv-rapport__corps p:last-child { margin-bottom: 0; }
.pv-rapport__corps mark, .pv-rapport__corps .pana-surligne { background: transparent; color: var(--pv-vert); font-weight: 700; }
@media (max-width: 820px) { .pv-rapport__grid { grid-template-columns: 1fr; } }

/* ============================================================================
   ACTUALITÉS (3 cartes) + AGENDA côte à côte (maquette). Classes .pv-*.
   ========================================================================== */
/* En-tête de bloc réutilisable : eyebrow à gauche, lien à droite (maquette : 13px sous). */
.pv-bloc-tete { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 13px; }
.pv-bloc-tete .pv-eyebrow { margin: 0; }

/* Rangée accueil : actualités / agenda 50-50 (maquette two-col 1fr 1fr, gap 32). */
.pv-home-2col {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px; align-items: start; max-width: var(--pv-max); margin-inline: auto;
}
@media (max-width: 960px) { .pv-home-2col { grid-template-columns: 1fr; } }

/* Grille de 3 cartes d'actualité (maquette : gap 20, carte 248px min, image 124). */
.pv-actus-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 620px) { .pv-actus-grid { grid-template-columns: 1fr; } }
.pv-actu {
  display: flex; flex-direction: column; background: var(--pv-blanc); min-height: 248px;
  border: 1px solid rgba(7, 26, 61, .06); border-radius: 9px; overflow: hidden;
  box-shadow: var(--pv-ombre-sm); transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
}
.pv-actu:hover { transform: translateY(-4px); box-shadow: var(--pv-ombre-md); }
.pv-actu__media { position: relative; display: block; height: 124px; flex: 0 0 auto; overflow: hidden; background: linear-gradient(135deg, var(--pv-bleu), var(--pv-navy)); }
.pv-actu__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.pv-actu:hover .pv-actu__media img { transform: scale(1.05); }
.pv-actu__media .pana-actu__ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: rgba(255,255,255,.85); }
.pv-actu__media .pana-actu__ph svg { width: 40px; height: 40px; }
.pv-actu__badge { display: none; } /* maquette : la date vit dans le corps, pas en pastille */
.pv-actu__date { margin: 0; font-size: .72rem; font-weight: 900; letter-spacing: .04em; color: var(--pv-bleu); text-transform: uppercase; }
.pv-actu__body { display: flex; flex-direction: column; gap: 5px; padding: 10px 11px 12px; flex: 1 1 auto; }
.pv-actu__tag { display: none; } /* maquette : pas d'étiquette de section sur l'accueil */
.pv-actu__title { font-family: var(--pv-font-titres); font-weight: 800; font-size: .875rem; line-height: 1.18; letter-spacing: -.02em; margin: 0; }
.pv-actu__title a { color: var(--pv-navy); text-decoration: none; }
.pv-actu__title a:hover { color: var(--pv-bleu); }
.pv-actu__excerpt { flex: 1 1 auto; margin: 0; color: #667085; font-size: .75rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pv-actu__more { display: inline-flex; align-items: center; gap: .3rem; font-family: var(--pv-font-corps); font-weight: 900; font-size: .75rem; color: var(--pv-bleu); text-decoration: none; margin-top: .2rem; }
.pv-actu__more span { transition: transform .25s; }
.pv-actu__more:hover span { transform: translateX(3px); }

/* Agenda dans la colonne de droite : carte événement (148px) + calendrier CÔTE À CÔTE
   (maquette agenda-wrap 148px/1fr gap 12) ; typographie resserrée à l'échelle maquette. */
.pv-col-agenda .pana-ag-wrap { margin: 0 !important; padding: 0 !important; max-width: none !important; }
.pv-col-agenda .pana-ag__filterbar { display: none; } /* maquette home : pas de filtre par section */
.pv-col-agenda .pana-ag { grid-template-columns: minmax(148px, .44fr) minmax(0, 1fr) !important; gap: 12px !important; }
@media (max-width: 620px) { .pv-col-agenda .pana-ag { grid-template-columns: minmax(0, 1fr) !important; } }
.pv-col-agenda .pana-ag__next { padding: 1.05rem .95rem; border-radius: 10px; background: var(--pv-bleu); box-shadow: var(--pv-ombre-sm); }
/* État « aucun évènement » : on rétablit la carte claire (le bleu compact ci-dessus
   l'écrasait → texte encre illisible sur bleu · correction 15/07). */
.pv-col-agenda .pana-ag__next--empty { background: rgba(10, 22, 40, .045); box-shadow: none; border: 1px dashed rgba(10, 22, 40, .16); }
.pv-col-agenda .pana-ag__eyebrow { font-size: .6rem; }
.pv-col-agenda .pana-ag__next-d { font-size: 2.125rem; }
.pv-col-agenda .pana-ag__next-my { font-size: .8rem; }
.pv-col-agenda .pana-ag__next-dow { font-size: .68rem; }
.pv-col-agenda .pana-ag__next-title { font-size: .9rem; color: #fff; } /* lisible sur la carte bleue (correction 15/07) */
.pv-col-agenda .pana-ag__next-lieu { font-size: .76rem; }
.pv-col-agenda .pana-ag__next-lieu svg { width: 14px; height: 14px; flex-basis: 14px; }
.pv-col-agenda .pana-ag__badge { font-size: .6rem; padding: .14rem .5rem; }
.pv-col-agenda .pana-ag__next-count { font-size: .68rem; padding: .28rem .65rem; margin-top: .55rem; }
.pv-col-agenda .pana-ag__cal { padding: .85rem .85rem .95rem; border-radius: 10px; gap: .6rem; }
.pv-col-agenda .pana-ag__cal-head { padding: .3rem .55rem; border-radius: 8px; }
.pv-col-agenda .pana-ag__cal-title { font-size: .85rem; }
.pv-col-agenda .pana-ag__nav { width: 26px; height: 26px; flex: 0 0 26px; font-size: .9rem; border-radius: 7px; }
.pv-col-agenda .pana-ag__cal-grid { gap: .22rem; }
.pv-col-agenda .pana-ag__dow { font-size: .56rem; padding-bottom: .15rem; }
.pv-col-agenda .pana-ag__cell { aspect-ratio: auto; height: 27px; border-radius: 7px; }
.pv-col-agenda .pana-ag__cell-n { font-size: .72rem; }
.pv-col-agenda .pana-ag__dot { width: 4px; height: 4px; }
.pv-col-agenda .pana-ag__detail { padding-top: .6rem; gap: .4rem; min-height: 0; }
.pv-col-agenda .pana-ag__detail-h { font-size: .8rem; }
.pv-col-agenda .pana-ag__ev-title { font-size: .8rem; }
.pv-col-agenda .pana-ag__ev-time { font-size: .68rem; }
.pv-col-agenda .pana-ag__ev-lieu { font-size: .7rem; }

/* ============================================================================
   CONTACT bas d'accueil — carte BLANCHE 300px / 1fr (maquette contact-card).
   Overrides à spécificité supérieure (.pana-accueil ...) : les styles du bloc
   pana-fc sont imprimés inline dans le body et gagneraient à égalité.
   ========================================================================== */
.pana-accueil .pana-fc { padding-block: 0 28px; } /* maquette : .contact{padding:0 0 28px} */
.pana-accueil .pana-fc__in { max-width: calc(var(--pv-max) + 56px); padding: 0 28px; }
.pana-accueil .pana-fc__h {
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; text-align: left;
  color: #14213D; margin: 0 0 1rem;
}
.pana-accueil .pana-fc__h::after {
  width: 30px; height: 2px; margin: .5rem 0 0; border-radius: 999px;
  background: linear-gradient(90deg, #FF6B1A 0 35%, #22C55E 36% 65%, var(--pv-bleu) 66%);
}
.pana-accueil .pana-fc__grid {
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 2.1rem;
  background: #fff; border: 1px solid rgba(7, 26, 61, .06); border-radius: 8px;
  box-shadow: var(--pv-ombre-sm); padding: 25px 34px;
}
/* Colonne gauche (maquette contact-info) : label + filet, puis LOGO À CÔTÉ de la liste. */
.pana-accueil .pana-fc__coords {
  border-right: 1px solid rgba(7, 26, 61, .08); padding-right: 1.9rem;
  display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 4px 18px; align-items: center;
}
.pana-accueil .pana-fc__coords .pana-fc__h { grid-column: 1 / -1; }
@media (max-width: 860px) {
  .pana-accueil .pana-fc__grid { grid-template-columns: 1fr; padding: 20px 22px; }
  .pana-accueil .pana-fc__coords { border-right: 0; border-bottom: 1px solid rgba(7, 26, 61, .08); padding: 0 0 1.2rem; }
}
.pana-accueil .pana-fc__logo { width: 84px; margin: 0; }
.pana-accueil .pana-fc__list { gap: .6rem; }
.pana-accueil .pana-fc__l { font-size: .62rem; }
.pana-accueil .pana-fc__v { font-size: .8rem; line-height: 1.4; }
.pana-accueil .pana-fc__list svg { width: 16px; height: 16px; flex-basis: 16px; margin-top: .1rem; }

/* ============================================================================
   ANNUAIRE DES SECTIONS (archive-pana_section) — bandeau d'intro + grille.
   ========================================================================== */
.pv-annuaire-hero { background: linear-gradient(180deg, var(--pv-papier-2), var(--pv-papier)); padding-block: clamp(2.6rem, 5vw, 4.5rem); }
.pv-annuaire-hero__inner { max-width: 780px; }
.pv-annuaire-hero__titre {
  font-family: var(--pv-font-titres); font-weight: 700; letter-spacing: -.02em; text-wrap: balance;
  font-size: clamp(2.1rem, 5vw, 3.5rem); line-height: 1.02; color: var(--pv-encre); margin: 0 0 1rem;
}
.pv-annuaire-hero__accent { color: var(--pv-bleu); }
.pv-annuaire-hero__lead { color: var(--pv-muted); font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.6; max-width: 60ch; margin: 0 0 1.5rem; }
.pv-annuaire-hero__points { list-style: none; margin: 0; padding: 0; display: flex; gap: .9rem 2rem; flex-wrap: wrap; }
.pv-annuaire-hero__points li { display: flex; align-items: center; gap: .55rem; font-weight: 600; color: var(--pv-encre); font-size: .98rem; }
.pv-annuaire-hero__points svg { flex: 0 0 auto; width: 24px; height: 24px; color: var(--pv-bleu); }

/* Grille annuaire : 5 colonnes sur grand écran (comme l'accueil). */
@media (min-width: 75rem) { .pana-sections-archive__grille .pv-scards { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* Le shortcode pose son propre titre : superflu (l'intro porte déjà le H1). */
.pana-sections-archive__grille .pana-sections__titre { display: none; }

/* ============================================================================
   FICHE SECTION · Hero sombre (bloc pana/section-hero). Classes .pv-shero*.
   On neutralise l'ancien hero cream (.pana-section-page__hero legacy).
   ========================================================================== */
/* text-align:left : le legacy centre tout le hero (style.css) ; la maquette veut
   badge, titre, sous-titre et CTA alignés à GAUCHE à côté du logo (correction 15/07). */
.pana-section-page__hero { padding: 0 !important; background: none !important; text-align: left; }
/* Maquette single : hero 505px mini, logo carte 170px radius 24, H1 58px, gros
   padding bas (132px) pour laisser les cartes stats chevaucher le bandeau. */
.pv-shero {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(120deg, var(--pv-navy) 0%, color-mix(in srgb, var(--pana-section-couleur) 52%, var(--pv-navy)) 100%);
  padding-block: clamp(3rem, 6vw, 5.125rem) clamp(6.5rem, 10vw, 8.25rem); /* 82 / 132 maquette */
}
.pv-shero--photo::before { content: ""; position: absolute; inset: 0; background-image: var(--pv-shero-img); background-size: cover; background-position: center; }
.pv-shero--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,26,61,.96) 0%, rgba(7,26,61,.82) 35%, rgba(7,26,61,.25) 66%, rgba(7,26,61,.15) 100%); }
.pv-shero__inner { position: relative; z-index: 1; display: flex; align-items: center; gap: clamp(1.4rem, 3vw, 30px); }
/* Le hero suit le conteneur fluide de la fiche. */
.pana-section-page .pv-shero .pv-wrap { max-width: calc(var(--spw, 1184px) + 56px); }
.pv-shero__logo {
  flex: 0 0 auto; width: clamp(110px, 14vw, 170px); height: clamp(110px, 14vw, 170px);
  border-radius: 24px; background: #fff; display: flex; align-items: center; justify-content: center;
  padding: 18px; box-shadow: 0 22px 55px rgba(0, 0, 0, .24);
}
.pv-shero__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.pv-shero__texte { min-width: 0; }
.pv-shero__eyebrow {
  display: inline-block; font-family: var(--pv-font-corps); font-size: .72rem; font-weight: 900;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.16); padding: .35rem .85rem; border-radius: var(--pv-r-pill); margin: 0 0 10px;
}
.pv-shero__titre { font-family: var(--pv-font-titres); font-weight: 800; letter-spacing: -.05em; text-wrap: balance; font-size: clamp(2.4rem, 5vw, 3.625rem); line-height: 1; margin: 0 0 14px; color: #fff; }
.pv-shero__tagline { color: rgba(255,255,255,.9); font-size: 1.125rem; line-height: 1.55; max-width: 520px; margin: 0 0 28px; }
.pv-shero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.pv-shero__btn { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--pv-font-corps); font-weight: 900; font-size: .875rem; text-decoration: none; min-height: 50px; padding: 0 26px; border-radius: var(--pv-r-pill); transition: transform .2s, box-shadow .2s, background .2s; }
.pv-shero__btn--primaire { background: var(--pv-bleu); color: #fff; box-shadow: var(--pv-ombre-bleu); }
.pv-shero__btn--primaire:hover { transform: translateY(-2px); background: var(--pv-bleu-deep); }
.pv-shero__btn--ghost { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.38); }
.pv-shero__btn--ghost:hover { background: rgba(255,255,255,.2); }
@media (max-width: 620px) { .pv-shero__inner { flex-direction: column; align-items: flex-start; } }

/* Valeurs (maquette .values) : carte BLANCHE, 4 colonnes, icône AU-DESSUS du libellé. */
.pana-section-page .pana-sp__valeurs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 36px 0 0;
  padding: 18px; background: #fff; border: 1px solid rgba(7, 26, 61, .10); border-radius: 18px;
  box-shadow: 0 8px 24px rgba(7, 26, 61, .08);
}
@media (max-width: 560px) { .pana-section-page .pana-sp__valeurs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 8px; } }
.pana-section-page .pana-sp__valeur {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  font-weight: 800; font-size: .75rem; color: #334155;
}
.pana-section-page .pana-sp__valeur svg { width: 26px; height: 26px; color: var(--pana-section-couleur, var(--pv-bleu)); flex: 0 0 auto; }

/* Icône en tête des 4 cartes infos (maquette). */
.pana-section-page .pana-sp__card-ic {
  display: inline-flex; width: 2.6rem; height: 2.6rem; margin: 0 0 .7rem;
  align-items: center; justify-content: center; border-radius: 12px;
  background: var(--pv-bleu-soft); color: var(--pv-bleu);
}
.pana-section-page .pana-sp__card-ic svg { width: 1.4rem; height: 1.4rem; }

/* Conteneur FLUIDE de la fiche : ~86% de l'écran (plafonné 1600px). À 1440 cela
   donne ~1238px = le conteneur du modèle ; sur écran large, le contenu s'étale
   au lieu de laisser de grandes marges. */
.pana-section-page { --spw: min(1600px, 86vw); }

/* Paires 2 colonnes aux PROPORTIONS du modèle (514/610 → 1fr/1.19fr ; 554/560 → 1fr/1fr). */
.pana-section-page .pana-sp__row2 {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.19fr); gap: clamp(1.8rem, 4vw, 60px);
  width: 100%; /* enfant flex : sans width, les marges auto le font rétrécir à son contenu */
  max-width: calc(var(--spw, 1184px) + 2.5rem); padding-inline: 1.25rem; margin-inline: auto; align-items: start;
}
.pana-section-page .pana-sp__row2--et { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.8rem, 4.5vw, 70px); }
.pana-section-page .pana-sp__row2--td { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.8rem, 4.5vw, 70px); align-items: start; }
/* Correction 15/07 : « Tarifs » (gauche) + « Agenda des événements » (droite)
   alignés sur la MÊME ligne. L'agenda réutilise la présentation compacte de
   l'accueil (.pv-col-agenda). La table des tarifs remplit sa colonne (maquette). */
.pana-section-page .pana-sp__row2--ta { grid-template-columns: minmax(0, 1fr) minmax(0, 1.19fr); gap: clamp(1.8rem, 4vw, 60px); align-items: start; }
.pana-section-page .pana-sp__row2--ta .pana-sp__list { margin: 0; max-width: none; }
.pana-section-page .pana-sp__row2--ta .pana-sp__vide { text-align: left; }
.pana-section-page .pana-sp__row2--ta .pana-ag-wrap .pana-sp__h { margin-bottom: 24px; }
/* Qui sommes-nous : la carte Contact est centrée en hauteur par rapport au texte de gauche. */
.pana-section-page .pana-sp__row2--qsn { align-items: center; }
.pana-section-page .pana-sp__row2 > .pana-sp__sec { padding: 0; }
.pana-section-page .pana-sp__row2 .pana-sp__in { max-width: 100%; margin: 0; padding-inline: 0; }
@media (max-width: 980px) { .pana-section-page .pana-sp__row2 { grid-template-columns: 1fr !important; gap: clamp(2.5rem, 5vw, 3.5rem); } }
/* Encadrement en colonne étroite : cartes compactes, plusieurs par ligne (photo 78px maquette). */
.pana-section-page .pana-sp__row2--et .pana-sp__team { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 18px; }
.pana-section-page .pana-sp__row2--et .pana-sp__member img,
.pana-section-page .pana-sp__row2--et .pana-sp__avatar { width: 78px !important; height: 78px !important; }
/* Encadrement pleine largeur (sa propre ligne) : cartes de largeur fixe, CENTRÉES et qui s'enroulent
   proprement quel que soit le nombre d'encadrants (flex + justify-content:center, jamais d'étirement). */
.pana-section-page .pana-sp__sec--enc .pana-sp__team { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.pana-section-page .pana-sp__sec--enc .pana-sp__member { flex: 0 1 190px; }
@media (max-width: 430px) { .pv-shero__ctas { width: 100%; } .pv-shero__btn { flex: 1 1 100%; justify-content: center; } }

/* ============================================================================
   FICHE SECTION · CTA final (maquette single) : box dégradée bleue arrondie,
   titre blanc + bouton NAVY. Overrides !important : le style.css legacy pose
   des règles !important sur .pana-cta*.
   ========================================================================== */
.pana-section-page__cta { padding: 8px 28px 72px !important; }
.pana-section-page__cta .pana-cta {
  display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center;
  gap: clamp(2rem, 5vw, 70px); flex-wrap: wrap; text-align: center !important; min-height: 140px !important;
  max-width: var(--spw, 1184px); margin: 0 auto !important; padding: 30px 28px !important;
  background: linear-gradient(135deg, #215BEE, #084AE5) !important;
  border: 0 !important; border-radius: 22px !important;
  box-shadow: 0 18px 45px rgba(33, 91, 238, .22) !important; color: #fff !important;
  position: relative; overflow: hidden;
}
.pana-section-page__cta .pana-cta::after { content: ""; position: absolute; right: -65px; top: -70px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.pana-section-page__cta .pana-cta__titre {
  margin: 0 !important; font-family: var(--pv-font-titres); font-weight: 800 !important; color: #fff !important;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem) !important; letter-spacing: -.04em; line-height: 1.05;
  position: relative; z-index: 1;
}
.pana-section-page__cta .pana-cta__bouton {
  position: relative; z-index: 1; display: inline-flex !important; align-items: center; gap: .5rem;
  background: #071A3D !important; color: #fff !important; font-weight: 800 !important;
  text-decoration: none; padding: .85rem 1.6rem !important; border: 0 !important;
  border-radius: var(--pv-r-pill) !important; font-family: var(--pv-font-corps);
  box-shadow: none !important; transition: transform .2s;
}
.pana-section-page__cta .pana-cta__bouton::after { content: " \2192"; }
.pana-section-page__cta .pana-cta__bouton:hover,
.pana-section-page__cta .pana-cta__bouton:focus-visible { transform: translateY(-2px) !important; }

/* Header BLANC sur l'annuaire et la fiche section (maquettes : header blanc + filet). */
body:is(.post-type-archive-pana_section, .single-pana_section) .pana-header {
  background-color: #fff; border-bottom-color: rgba(7, 26, 61, .075);
}

/* ============================================================================
   PAGES CONTACT / ACTUALITÉS / CALENDRIER (maquettes « modern »).
   Même système que les pages validées : plein bord, header blanc, conteneur
   fluide min(1600px, 86vw), cartes blanches, titres à gauche.
   Pages : #39 /contact/, #38 /actualites/, #22 /calendrier/.
   ========================================================================== */
body:is(.page-id-39, .page-id-38, .page-id-22) {
  --wp--style--root--padding-left: 0px;
  --wp--style--root--padding-right: 0px;
  padding-left: 0 !important; padding-right: 0 !important;
}
body:is(.page-id-39, .page-id-38, .page-id-22) .wp-site-blocks { padding-left: 0; padding-right: 0; }
body:is(.page-id-39, .page-id-38, .page-id-22) .wp-site-blocks > * { margin-block-start: 0 !important; }
body:is(.page-id-39, .page-id-38, .page-id-22) .pana-header { background-color: #fff; border-bottom-color: rgba(7, 26, 61, .075); }

/* ---------------------------------------------------------------------------
   Header vitrine (hors accueil) : COLLÉ EN HAUT + visible au défilement.
   `display:flow-root` établit un contexte de formatage de bloc qui STOPPE la
   remontée du block-gap interne du header (sinon = bande crème de 32px au-dessus).
   `position:sticky` garde le header visible au scroll. L'accueil est exclu (son
   header est en absolute au-dessus du hero). Décalage sous la barre d'admin WP.
   ------------------------------------------------------------------------- */
body:is(.page-id-39, .page-id-38, .page-id-22, .post-type-archive-pana_section, .single-pana_section) .wp-site-blocks > header.wp-block-template-part {
  display: flow-root; position: -webkit-sticky; position: sticky; top: 0; z-index: 100; background: #fff;
}
/* Le header intérieur ne doit pas garder de marge de block-gap (sinon un liseré
   crème apparaît entre le wrapper collant et le header). */
body:is(.page-id-39, .page-id-38, .page-id-22, .post-type-archive-pana_section, .single-pana_section) .wp-site-blocks > header.wp-block-template-part > * { margin-block-start: 0 !important; }
body:is(.page-id-39, .page-id-38, .page-id-22, .post-type-archive-pana_section, .single-pana_section) .pana-header {
  box-shadow: 0 8px 24px -18px rgba(7, 26, 61, .55);
}
/* NB : top:0 volontaire (un `top` non nul rouvre une bande crème au repos à cause
   de l'interaction sticky × html{margin-top} de la barre d'admin). Le visiteur
   (sans barre) a un header parfaitement collé ; l'admin connecté a un léger
   recouvrement sous sa barre au défilement uniquement. */

/* ---------------------------------------------------------------------------
   Correction 15/07 · plus JAMAIS de bande de 32px au-dessus de la barre du
   header. Cause : block-gap WP appliqué à .pana-header__barre (2e enfant du
   groupe header, après le lien d'évitement). Neutralisé sur TOUTES les pages
   de l'app sauf l'accueil (header absolu sur hero blanc, déjà validé tel quel).
   Le flow-root empêche par ailleurs toute remontée de marge hors du header.
   ------------------------------------------------------------------------- */
body:not(.home) .wp-site-blocks > header.wp-block-template-part { display: flow-root; }
body:not(.home) .pana-header > * { margin-block-start: 0 !important; }

/* Lien de navigation ACTIF : souligné bleu (maquettes). */
.pana-header__nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.pana-header__nav .wp-block-navigation-item[aria-current] > .wp-block-navigation-item__content,
.pana-header__nav .wp-block-navigation-item__content[aria-current] {
  color: var(--pv-bleu) !important;
  text-decoration: underline; text-decoration-thickness: 2.5px; text-underline-offset: 10px;
  text-decoration-color: var(--pv-bleu);
}

/* Socle commun des 3 pages. */
.pana-ct, .pana-na, .pana-cal {
  --pvw: min(1600px, 86vw);
  font-family: var(--pv-font-corps); color: var(--pv-texte);
  padding-bottom: 56px;
}
.pana-ct__wrap, .pana-na__wrap, .pana-cal__wrap { max-width: var(--pvw); margin-inline: auto; padding-inline: 1.25rem; }
.pana-ct__h2, .pana-na__t, .pana-cal__h2 { font-family: var(--pv-font-titres); color: var(--pv-navy); text-align: left; }

/* --------------------------------------------------------------------------
   CONTACT (.pana-ct)
   ------------------------------------------------------------------------ */
.pana-ct__hero { background: linear-gradient(180deg, #fff 0, #F8F4EC 72%, var(--pv-papier) 100%); padding: 48px 0 38px; margin-bottom: 30px; }
.pana-ct__hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: clamp(1.5rem, 4vw, 48px); align-items: center; }
.pana-ct__hero-txt { min-width: 0; }
.pana-ct__titre { font-family: var(--pv-font-titres); font-weight: 800; font-size: clamp(2.5rem, 2rem + 2.4vw, 4rem); letter-spacing: -.045em; line-height: 1; color: var(--pv-navy); margin: 0 0 14px; }
.pana-ct__trait { display: block; width: 36px; height: 4px; border-radius: 999px; background: var(--pv-bleu); margin: 0 0 18px; }
.pana-ct__intro { color: var(--pv-texte); font-size: 1rem; line-height: 1.6; max-width: 520px; margin: 0; }
.pana-ct__hero-visuel img { width: 100%; height: auto; max-height: 280px; object-fit: cover; border-radius: 18px; box-shadow: var(--pv-ombre-sm); }
@media (max-width: 860px) { .pana-ct__hero-in { grid-template-columns: 1fr; } }

.pana-ct__cols { display: grid; grid-template-columns: minmax(280px, .62fr) minmax(0, 1fr); gap: 26px; align-items: start; }
@media (max-width: 980px) { .pana-ct__cols { grid-template-columns: 1fr; } }
.pana-ct__card { background: #fff; border: 1px solid rgba(7, 26, 61, .08); border-radius: 18px; box-shadow: var(--pv-ombre-sm); padding: 28px; }
.pana-ct__h2 { font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; margin: 0 0 18px; }
.pana-ct__logo { width: 96px; height: auto; margin: 0 0 18px; }
.pana-ct__list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 16px; }
.pana-ct__list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; }
.pana-ct__list svg { width: 22px; height: 22px; color: var(--pv-bleu); margin-top: 2px; }
.pana-ct__l { display: block; font-weight: 800; font-size: .88rem; color: var(--pv-navy); margin-bottom: 2px; }
.pana-ct__v { display: block; color: var(--pv-muted); font-size: .85rem; line-height: 1.5; text-decoration: none; overflow-wrap: anywhere; }
a.pana-ct__v:hover { color: var(--pv-bleu); }
.pana-ct__fast { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; background: var(--pv-bleu-soft); border-radius: 12px; padding: 14px; margin: 4px 0 22px; }
.pana-ct__fast-ic { width: 34px; height: 34px; border-radius: 50%; background: var(--pv-bleu); color: #fff; display: grid; place-items: center; }
.pana-ct__fast-ic svg { width: 18px; height: 18px; }
.pana-ct__fast strong { display: block; font-size: .9rem; color: var(--pv-navy); }
.pana-ct__fast p { margin: 4px 0 0; font-size: .82rem; color: var(--pv-muted); line-height: 1.5; }
.pana-ct__h3 { font-family: var(--pv-font-titres); font-weight: 800; font-size: 1.05rem; color: var(--pv-navy); margin: 0 0 12px; }
.pana-ct__raisons { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pana-ct__raisons li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: center; }
.pana-ct__raisons svg { width: 20px; height: 20px; color: var(--pv-bleu); }
.pana-ct__raisons span { font-size: .85rem; color: var(--pv-texte); }

/* Formulaire (bloc pana/contact) habillé aux couleurs des maquettes. */
.pana-ct .pana-contact__champ { margin-bottom: 14px; }
.pana-ct .pana-contact__ligne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 560px) { .pana-ct .pana-contact__ligne { grid-template-columns: 1fr; } }
.pana-ct .pana-contact label { display: block; font-weight: 800; font-size: .85rem; color: var(--pv-navy); margin-bottom: 6px; }
.pana-ct .pana-contact input[type="text"], .pana-ct .pana-contact input[type="email"], .pana-ct .pana-contact input[type="tel"],
.pana-ct .pana-contact select, .pana-ct .pana-contact textarea {
  width: 100%; box-sizing: border-box; font: inherit; color: var(--pv-encre); background: #fff;
  border: 1px solid rgba(7, 26, 61, .14); border-radius: 10px; padding: 11px 13px;
}
.pana-ct .pana-contact :is(input, select, textarea):focus { outline: none; border-color: var(--pv-bleu); box-shadow: 0 0 0 4px rgba(28, 86, 229, .10); }
.pana-ct .pana-contact textarea { min-height: 150px; resize: vertical; }
.pana-ct .pana-contact__consent { display: flex; gap: 9px; align-items: flex-start; font-size: .8rem; color: var(--pv-muted); margin: 4px 0 16px; }
.pana-ct .pana-contact__consent input { width: 16px; height: 16px; margin-top: 2px; flex: 0 0 auto; }
.pana-ct .pana-contact__consent label { font-weight: 500; margin: 0; color: var(--pv-muted); }
.pana-ct .pana-contact__consent a { color: var(--pv-bleu); }
.pana-ct .pana-contact__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.pana-ct .pana-contact__submit {
  appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: .6rem;
  min-height: 46px; padding: 0 24px; border-radius: var(--pv-r-pill);
  background: var(--pv-bleu); color: #fff; font-family: var(--pv-font-corps); font-weight: 800; font-size: .875rem;
  box-shadow: var(--pv-ombre-bleu); transition: transform .18s ease, background .18s ease;
}
.pana-ct .pana-contact__submit:hover { transform: translateY(-2px); background: var(--pv-bleu-deep); }
.pana-ct .pana-contact__alerte { border-radius: 12px; padding: 14px 16px; font-weight: 700; font-size: .9rem; }
.pana-ct .pana-contact__alerte--ok { background: rgba(51, 193, 58, .12); color: #1E7B24; }
.pana-ct .pana-contact__alerte--err { background: rgba(220, 38, 38, .10); color: #B91C1C; }
.pana-ct .pana-contact__feedback { font-size: .85rem; color: var(--pv-muted); margin-left: 12px; }

.pana-ct__avant { margin-top: 26px; }
.pana-ct__avant-liste { display: grid; gap: 4px; }
.pana-ct__avant-lien {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) 22px; gap: 16px; align-items: center;
  padding: 13px 10px; border-radius: 12px; text-decoration: none; transition: background .15s ease;
}
.pana-ct__avant-lien:hover { background: rgba(28, 86, 229, .05); }
.pana-ct__avant-ic { width: 48px; height: 48px; border-radius: 50%; background: var(--pv-bleu-soft); color: var(--pv-bleu); display: grid; place-items: center; }
.pana-ct__avant-ic svg { width: 24px; height: 24px; }
.pana-ct__avant-txt strong { display: block; font-family: var(--pv-font-titres); font-weight: 800; font-size: .98rem; color: var(--pv-navy); margin-bottom: 2px; }
.pana-ct__avant-txt > span { display: block; font-size: .82rem; color: var(--pv-muted); line-height: 1.45; }
.pana-ct__avant-fleche { color: var(--pv-bleu); font-size: 1.5rem; line-height: 1; font-weight: 800; }

/* --------------------------------------------------------------------------
   ACTUALITÉS (.pana-na)
   ------------------------------------------------------------------------ */
.pana-na__hero { padding: 52px 0 6px; }
.pana-na__titre { font-family: var(--pv-font-titres); font-weight: 800; font-size: clamp(2.5rem, 2rem + 2.4vw, 4rem); letter-spacing: -.045em; line-height: 1; color: var(--pv-navy); margin: 0 0 16px; }
.pana-na__intro { color: var(--pv-muted); font-size: 1rem; line-height: 1.55; max-width: 560px; margin: 0 0 24px; }
.pana-na__pills { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 28px; }
.pana-na__pill {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: var(--pv-r-pill);
  background: #fff; border: 1px solid rgba(7, 26, 61, .10); box-shadow: 0 4px 12px rgba(7, 26, 61, .04);
  font-weight: 800; font-size: .85rem; color: var(--pv-navy); text-decoration: none; transition: background .15s, color .15s;
}
.pana-na__pill:hover { color: var(--pv-bleu); border-color: rgba(28, 86, 229, .3); }
.pana-na__pill.is-active { background: var(--pv-bleu); border-color: var(--pv-bleu); color: #fff; box-shadow: 0 10px 24px rgba(28, 86, 229, .22); }
.pana-na__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
@media (max-width: 820px) { .pana-na__grid { grid-template-columns: 1fr; } }
.pana-na__card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(7, 26, 61, .08);
  border-radius: 16px; overflow: hidden; box-shadow: var(--pv-ombre-sm);
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
}
.pana-na__card:hover { transform: translateY(-4px); box-shadow: var(--pv-ombre-md); }
.pana-na__media { display: block; height: 235px; overflow: hidden; background: linear-gradient(135deg, var(--pv-bleu), var(--pv-navy)); }
.pana-na__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.pana-na__card:hover .pana-na__media img { transform: scale(1.05); }
.pana-na__media .pana-actu__ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: rgba(255,255,255,.85); }
.pana-na__media .pana-actu__ph svg { width: 46px; height: 46px; }
.pana-na__body { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; padding: 18px 22px 20px; flex: 1 1 auto; }
.pana-na__badge { background: rgba(51, 193, 58, .14); color: #1E7B24; font-size: .66rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 6px; }
.pana-na__date { margin: 0; color: var(--pv-muted); font-size: .74rem; font-weight: 800; letter-spacing: .05em; }
.pana-na__t { font-weight: 800; font-size: 1.3rem; letter-spacing: -.025em; line-height: 1.15; margin: 0; }
.pana-na__t a { color: var(--pv-navy); text-decoration: none; }
.pana-na__t a:hover { color: var(--pv-bleu); }
.pana-na__extrait { margin: 0; color: var(--pv-muted); font-size: .9rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pana-na__lire { margin-top: 4px; font-weight: 800; font-size: .85rem; color: var(--pv-bleu); text-decoration: none; }
.pana-na__lire span { transition: transform .2s; display: inline-block; }
.pana-na__lire:hover span { transform: translateX(3px); }
.pana-na__pagination { display: flex; gap: 8px; justify-content: center; align-items: center; padding: 32px 0 6px; flex-wrap: wrap; }
.pana-na__num {
  min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: 0 14px; border-radius: 10px; background: #fff; border: 1px solid rgba(7, 26, 61, .10);
  font-weight: 800; font-size: .85rem; color: var(--pv-navy); text-decoration: none;
}
.pana-na__num:hover { color: var(--pv-bleu); border-color: rgba(28, 86, 229, .3); }
.pana-na__num.is-active { background: var(--pv-bleu); border-color: var(--pv-bleu); color: #fff; }
.pana-na__vide { background: #fff; border-radius: 16px; box-shadow: var(--pv-ombre-sm); padding: 44px 30px; text-align: center; color: var(--pv-muted); }
.pana-na__vide strong { color: var(--pv-navy); font-family: var(--pv-font-titres); font-size: 1.1rem; }

/* --------------------------------------------------------------------------
   CALENDRIER (.pana-cal)
   ------------------------------------------------------------------------ */
.pana-cal__hero { padding: 52px 0 0; }
.pana-cal__hero .pana-cal__wrap { border-bottom: 1px solid rgba(7, 26, 61, .08); padding-bottom: 26px; }
.pana-cal__titre { font-family: var(--pv-font-titres); font-weight: 800; font-size: clamp(2.5rem, 2rem + 2.4vw, 4rem); letter-spacing: -.045em; line-height: 1; color: var(--pv-navy); margin: 0 0 8px; }
.pana-cal__sous { font-family: var(--pv-font-titres); font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; color: var(--pv-navy); margin: 0 0 10px; }
.pana-cal__intro { color: var(--pv-muted); font-size: 1rem; line-height: 1.55; max-width: 620px; margin: 0; }
.pana-cal__filtres { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 26px 0 28px; }
.pana-cal__filtre {
  background: #fff; border: 1px solid rgba(7, 26, 61, .08); border-radius: 14px; box-shadow: 0 4px 12px rgba(7, 26, 61, .04);
  padding: 9px 16px; display: flex; flex-direction: column; gap: 1px; min-width: 210px;
}
.pana-cal__filtre-l { font-size: .66rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--pv-muted); }
.pana-cal__filtre select { border: 0; font: inherit; font-weight: 800; font-size: .9rem; color: var(--pv-navy); background: #fff; padding: 2px 0; outline: none; max-width: 240px; }
.pana-cal__reset {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px;
  border-radius: var(--pv-r-pill); background: #fff; border: 1px solid rgba(7, 26, 61, .12);
  font-weight: 800; font-size: .85rem; color: var(--pv-navy); text-decoration: none; cursor: pointer;
}
.pana-cal__reset svg { width: 17px; height: 17px; }
.pana-cal__reset:hover { color: var(--pv-bleu); border-color: rgba(28, 86, 229, .3); }
@media (max-width: 860px) { .pana-cal__reset { margin-left: 0; } }
.pana-cal__layout { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 30px; align-items: start; }
@media (max-width: 980px) { .pana-cal__layout { grid-template-columns: 1fr; } }
.pana-cal__h2 { font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; margin: 0 0 14px; }
.pana-cal__ev {
  display: grid; grid-template-columns: 86px 220px minmax(0, 1fr); background: #fff;
  border: 1px solid rgba(7, 26, 61, .08); border-radius: 16px; box-shadow: var(--pv-ombre-sm);
  overflow: hidden; margin-bottom: 18px;
}
@media (max-width: 760px) { .pana-cal__ev { grid-template-columns: 72px minmax(0, 1fr); } .pana-cal__ev-media { display: none !important; } }
.pana-cal__ev-date { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 12px 6px; }
.pana-cal__ev-date span, .pana-cal__ev-date i { font-style: normal; font-size: .66rem; font-weight: 900; letter-spacing: .05em; color: var(--pv-muted); }
.pana-cal__ev-date b { font-family: var(--pv-font-titres); font-weight: 800; font-size: 2.1rem; line-height: 1; color: var(--pv-bleu); }
.pana-cal__ev-media { position: relative; min-height: 156px; background: var(--pv-bleu-soft); display: grid; place-items: center; color: var(--pv-bleu); }
.pana-cal__ev-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pana-cal__ev-media svg { width: 38px; height: 38px; }
.pana-cal__ev-corps { padding: 16px 20px; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; min-width: 0; }
.pana-cal__ev-horaire { margin: 0; color: var(--pv-bleu); font-weight: 900; font-size: .8rem; letter-spacing: .02em; }
.pana-cal__ev-t { margin: 0; font-family: var(--pv-font-titres); font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; line-height: 1.15; }
.pana-cal__ev-t a { color: var(--pv-navy); text-decoration: none; }
.pana-cal__ev-t a:hover { color: var(--pv-bleu); }
.pana-cal__ev-x { margin: 0; color: var(--pv-muted); font-size: .85rem; line-height: 1.45; }
.pana-cal__ev-lieu { margin: 2px 0 0; display: flex; gap: 6px; align-items: center; color: var(--pv-muted); font-size: .8rem; }
.pana-cal__ev-lieu svg { width: 15px; height: 15px; color: var(--pv-bleu); flex: 0 0 auto; }
.pana-cal__ev-badges { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 7px 0 0; width: 100%; }
.pana-cal__badge { background: rgba(51, 193, 58, .14); color: #1E7B24; font-size: .66rem; font-weight: 900; letter-spacing: .04em; padding: 4px 10px; border-radius: var(--pv-r-pill); width: fit-content; }
.pana-cal__badge--type { background: var(--pv-bleu-soft); color: var(--pv-bleu); }
.pana-cal__ev-plus { margin-left: auto; font-weight: 800; font-size: .82rem; color: var(--pv-bleu); text-decoration: none; white-space: nowrap; }
.pana-cal__plus { text-align: center; margin: 22px 0 0; }
.pana-cal__plus-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 24px; border-radius: var(--pv-r-pill);
  background: #fff; border: 1px solid rgba(7, 26, 61, .12); font-weight: 800; font-size: .85rem; color: var(--pv-navy); text-decoration: none;
}
.pana-cal__plus-btn:hover { color: var(--pv-bleu); border-color: rgba(28, 86, 229, .3); }
.pana-cal__vide { background: #fff; border-radius: 16px; box-shadow: var(--pv-ombre-sm); padding: 40px 28px; text-align: center; color: var(--pv-muted); }
.pana-cal__vide strong { color: var(--pv-navy); font-family: var(--pv-font-titres); }
.pana-cal__card { background: #fff; border: 1px solid rgba(7, 26, 61, .08); border-radius: 16px; box-shadow: var(--pv-ombre-sm); padding: 20px; }
.pana-cal__mini-tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 12px; font-weight: 900; color: var(--pv-navy); }
.pana-cal__mini-tete a { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--pv-navy); background: rgba(7, 26, 61, .05); text-decoration: none; font-size: 1.15rem; }
.pana-cal__mini-tete a:hover { background: var(--pv-bleu-soft); color: var(--pv-bleu); }
.pana-cal__mini-grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; }
.pana-cal__mini-dow { font-size: .56rem; font-weight: 900; letter-spacing: .04em; color: var(--pv-muted); padding: 4px 0; }
.pana-cal__mini-jour { position: relative; height: 35px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 9px; font-size: .78rem; font-weight: 700; color: var(--pv-texte); }
.pana-cal__mini-jour--vide { visibility: hidden; }
.pana-cal__mini-jour.is-auj { outline: 1.5px solid var(--pv-bleu); outline-offset: -1.5px; }
.pana-cal__mini-jour.is-sel { background: var(--pv-bleu); color: #fff; font-weight: 800; box-shadow: 0 8px 18px -8px var(--pv-bleu); }
.pana-cal__mini-pts { display: flex; gap: 2px; margin-top: 1px; }
.pana-cal__mini-pts i { width: 5px; height: 5px; border-radius: 50%; display: block; }
.pana-cal__mini-jour.is-sel .pana-cal__mini-pts i { background: #fff !important; }
.pana-cal__legende { display: flex; gap: 10px 14px; flex-wrap: wrap; margin: 14px 0 0; font-size: .66rem; font-weight: 800; color: var(--pv-muted); }
.pana-cal__legende span { display: inline-flex; gap: 5px; align-items: center; }
.pana-cal__legende i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.pana-cal__avenir { margin-top: 22px; }
.pana-cal__avenir-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 15px; }
.pana-cal__avenir-liste li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: start; }
.pana-cal__avenir-date { display: flex; flex-direction: column; align-items: center; }
.pana-cal__avenir-date b { font-family: var(--pv-font-titres); font-weight: 800; font-size: 1.3rem; line-height: 1; color: var(--pv-bleu); }
.pana-cal__avenir-date i { font-style: normal; font-size: .58rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; color: var(--pv-muted); }
.pana-cal__avenir-txt { display: grid; gap: 3px; justify-items: start; }
.pana-cal__avenir-txt em { font-style: normal; font-size: .68rem; font-weight: 900; color: var(--pv-muted); }
.pana-cal__avenir-txt a { font-weight: 800; font-size: .88rem; line-height: 1.25; color: var(--pv-navy); text-decoration: none; }
.pana-cal__avenir-txt a:hover { color: var(--pv-bleu); }
.pana-cal__toutlien { display: inline-flex; align-items: center; gap: .4rem; margin-top: 16px; font-weight: 800; font-size: .85rem; color: var(--pv-bleu); text-decoration: none; }
.pana-cal__cta {
  margin-top: 36px; background: linear-gradient(90deg, #1458F0, #0C59FF); border-radius: 18px; color: #fff;
  display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 34px; flex-wrap: wrap;
  box-shadow: 0 18px 45px rgba(33, 91, 238, .22); position: relative; overflow: hidden;
}
.pana-cal__cta::after { content: ""; position: absolute; right: -55px; top: -62px; width: 190px; height: 190px; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.pana-cal__cta h2 { margin: 0; font-family: var(--pv-font-titres); font-weight: 800; font-size: 1.5rem; letter-spacing: -.03em; color: #fff; position: relative; z-index: 1; }
.pana-cal__cta p { margin: 6px 0 0; font-size: .9rem; color: rgba(255, 255, 255, .85); position: relative; z-index: 1; }
.pana-cal__cta-btn {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 24px;
  border-radius: var(--pv-r-pill); background: #fff; color: var(--pv-bleu); font-weight: 800; font-size: .875rem; text-decoration: none;
  transition: transform .18s ease;
}
.pana-cal__cta-btn:hover { transform: translateY(-2px); }
.pana-cal__cta-btn svg { width: 18px; height: 18px; }

/* Filet de sécurité mobile des 3 pages (comme le reste de la vitrine) :
   conteneur plein écran (le padding du wrap fait les marges), zéro débordement. */
@media (max-width: 980px) {
  .pana-ct, .pana-na, .pana-cal { --pvw: 100%; overflow-x: clip; }
  .pana-ct__hero-in, .pana-ct__cols, .pana-na__grid, .pana-cal__layout, .pana-cal__filtres,
  .pana-ct__wrap, .pana-na__wrap, .pana-cal__wrap { max-width: 100%; min-width: 0; }
  .pana-ct :is(img, svg), .pana-na :is(img, svg), .pana-cal :is(img, svg) { max-width: 100%; }
  .pana-cal__filtre { min-width: 0; width: 100%; }
  .pana-cal__filtre select { max-width: 100%; }
  .pana-cal__reset { margin-left: 0; }
  .pana-cal__cta { padding: 24px 22px; }
  .pana-cal__ev-corps { padding: 14px 16px; }
}

/* ============================================================================
   Filet de sécurité mobile (charte) : aucun débordement horizontal sur la vitrine.
   ========================================================================== */
@media (max-width: 980px) {
  .pana-accueil, .pana-sections-archive, .pana-section-page { overflow-x: clip; }
  .pv-wrap, .pv-hero__inner, .pv-mission, .pv-sections-head, .pv-rapport__grid,
  .pv-home-2col, .pv-annuaire-hero__inner, .pv-shero__inner { max-width: 100%; min-width: 0; }
  /* Conteneurs du corps de la fiche section : marge latérale + largeur bornée. */
  .pana-section-page .pana-sp__in,
  .pana-section-page .pana-sp__in--full,
  .pana-section-page .pana-sp__in--wide { max-width: 100%; box-sizing: border-box; padding-inline: clamp(1rem, 4vw, 1.4rem); }
  .pana-section-page .pana-sp__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pana-accueil img, .pana-sections-archive img { max-width: 100%; height: auto; }
}
@media (max-width: 520px) { .pana-section-page .pana-sp__cards { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================================
   ANNUAIRE DES SECTIONS (archive) — maquette « directory » portee au pixel.
   Bloc pana/annuaire (Frontend\Blocks::render_annuaire). Classes .pana-dir-*
   scopees : ne percutent ni l'accueil (.pv-*), ni l'admin, ni l'espace.
   Cartes 338px dont la description se revele au survol ; hero photo + voile.
   ========================================================================== */
.pana-dir {
  --dir-primary: #215BEE; --dir-navy: #071A3D; --dir-text: #13213A; --dir-muted: #667085;
  --dir-bg: #F5F0E8; --dir-border: rgba(7,26,61,.10); --dir-border-soft: rgba(7,26,61,.075);
  --dir-shadow-soft: 0 8px 24px rgba(7,26,61,.08); --dir-shadow-strong: 0 22px 60px rgba(7,26,61,.14);
  --dir-container: 1320px;
  background: var(--dir-bg); color: var(--dir-text);
  font-family: var(--pv-font-corps, Inter, system-ui, sans-serif);
}
.pana-dir * { box-sizing: border-box; }
.pana-dir-container { width: min(100% - 96px, var(--dir-container)); margin-inline: auto; }

/* HERO image plein cadre + voile degrade (texte lisible a gauche, photo a droite). */
.pana-dir-hero { position: relative; overflow: hidden; min-height: 560px; padding: 96px 0 122px; background: #fff; isolation: isolate; }
.pana-dir-hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #fff; }
.pana-dir-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center right; filter: saturate(.92) contrast(.98); }
.pana-dir-hero__bg::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.97) 30%, rgba(255,255,255,.78) 48%, rgba(255,255,255,.32) 68%, rgba(255,255,255,.08) 100%),
    linear-gradient(180deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.10) 42%, rgba(245,240,232,.98) 100%);
}
.pana-dir-hero__bg::after { content: ""; position: absolute; left: -12%; top: 5%; width: 640px; height: 640px; border-radius: 999px; background: radial-gradient(circle, rgba(33,91,238,.075), transparent 68%); z-index: 2; pointer-events: none; }
.pana-dir-hero__inner { position: relative; z-index: 3; width: min(100% - 96px, var(--dir-container)); margin-inline: auto; }
.pana-dir-hero__content { max-width: 610px; }
.pana-dir-eyebrow { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 18px; border-radius: 999px; background: rgba(255,255,255,.94); box-shadow: var(--dir-shadow-soft); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 950; color: var(--dir-navy); margin: 0 0 26px; }
.pana-dir-slashes { width: 28px; height: 9px; border-radius: 999px; background: linear-gradient(90deg, #FF7A18 0 33%, transparent 33% 48%, #215BEE 48% 100%); flex: 0 0 auto; }
.pana-dir-hero h1 { margin: 0 0 20px; color: var(--dir-navy); font-family: var(--pv-font-titres, inherit); font-size: clamp(42px, 4.6vw, 64px); line-height: .93; letter-spacing: -.062em; font-weight: 950; }
.pana-dir-hero h1 span { display: block; color: var(--dir-primary); }
.pana-dir-hero__lead { max-width: 570px; margin: 0; color: #243653; font-size: 18px; line-height: 1.55; font-weight: 500; }
.pana-dir-benefits { display: flex; align-items: center; gap: 34px; margin-top: 30px; flex-wrap: wrap; }
.pana-dir-benefit { display: inline-flex; align-items: center; gap: 12px; color: #243653; font-size: 15px; font-weight: 850; }
.pana-dir-benefit i { width: 24px; height: 24px; border-radius: 999px; background: var(--dir-primary); color: #fff; display: grid; place-items: center; font-style: normal; font-size: 13px; box-shadow: 0 8px 18px rgba(33,91,238,.20); flex: 0 0 auto; }

/* BARRE DE FILTRES flottante (chevauche le bas du hero). */
.pana-dir-filterwrap { position: relative; z-index: 8; margin-top: -42px; }
.pana-dir-filterbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px; background: rgba(255,255,255,.94); backdrop-filter: blur(16px); border: 1px solid var(--dir-border-soft); border-radius: 999px; box-shadow: 0 18px 55px rgba(7,26,61,.10); }
.pana-dir-filterbar__filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pana-dir-pill { height: 48px; display: inline-flex; align-items: center; gap: 10px; padding: 0 22px; border-radius: 999px; border: 0; background: transparent; color: #13213A; font-size: 14px; font-weight: 900; cursor: pointer; transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.pana-dir-pill:hover { background: rgba(33,91,238,.08); color: var(--dir-primary); }
.pana-dir-pill.is-active { background: var(--dir-primary); color: #fff; box-shadow: 0 10px 24px rgba(33,91,238,.22); }
.pana-dir-pill__icon { font-size: 17px; line-height: 1; }
.pana-dir-sort { height: 54px; min-width: 142px; padding: 0 20px; border: 1px solid var(--dir-border); border-radius: 999px; background: #fff; color: #667085; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 16px rgba(7,26,61,.035); white-space: nowrap; }
.pana-dir-sort strong { color: var(--dir-navy); font-size: 16px; font-weight: 950; letter-spacing: .04em; }

/* GRILLE + CARTES (description revelee au survol, CTA « Decouvrir »). */
.pana-dir-list { padding: 86px 0 72px; }
.pana-dir-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 34px; }
/* Cartes de section « inflected » : image cover 100% + bouton rond en creux (notch)
   bas-droite. Image dominante, contenu (titre/description/tag) sous la photo, posé
   sur le crème de la page. Le bouton reprend la couleur d'identité de la section. */
.pana-dir-card { position: relative; }
.pana-dir-card[hidden] { display: none; }
.pana-if { display: block; --if-bg: #F5F0E8; --if-round: 20px; --if-btn: var(--pana-section-couleur, #1C56E5); }
/* Accueil : le notch doit se fondre dans le crème de la grille (--pv-papier). */
.pana-accueil__sections .pana-if { --if-bg: #F5F1E8; }
.pana-accueil__sections .pv-scards { align-items: start; }
.pana-if__link { display: block; color: inherit; text-decoration: none; }
.pana-if__link:focus-visible { outline: 3px solid var(--dir-primary); outline-offset: 4px; border-radius: 20px; }
/* Correction 15/07 (maquette) : PAS de bouton « en creux » (notch) ni de fond
   lumineux autour de la bulle. L'image garde ses 4 coins arrondis ; la bulle
   flèche (couleur d'identité de la section) est simplement POSÉE sur l'image,
   en retrait du coin bas-droit. Le logo de la section vit en haut à gauche. */
.pana-if__inner { position: relative; width: 100%; height: 260px; background: var(--if-bg); border-radius: var(--if-round); overflow: hidden; }
.pana-if__img { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; border-radius: var(--if-round); background: linear-gradient(135deg, color-mix(in srgb, var(--if-btn) 26%, #fff), color-mix(in srgb, var(--if-btn) 8%, #fff)); }
.pana-if__img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform .4s cubic-bezier(.22,1,.36,1); }
.pana-if:hover .pana-if__img img { transform: scale(1.08); }
.pana-if__emoji { position: absolute; inset: 0; display: grid; place-items: center; font-size: 72px; }
/* Chip Handisport déplacée en haut à DROITE (le logo occupe le haut-gauche). */
.pana-if__badge { position: absolute; top: 12px; right: 12px; left: auto; z-index: 3; background: rgba(255,255,255,.94); color: #3730a3; padding: .26rem .66rem; border-radius: 999px; font-size: .72rem; font-weight: 800; box-shadow: 0 4px 12px rgba(10,22,40,.14); }
/* Logo de section : pastille blanche arrondie en haut à gauche de la photo. */
.pana-if__logo { position: absolute; top: 12px; left: 12px; z-index: 3; width: 3.5rem; height: 3.1rem; padding: .45rem; background: #fff; border-radius: 14px; box-shadow: 0 8px 20px rgba(7,26,61,.18); display: flex; align-items: center; justify-content: center; }
.pana-if__logo img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
/* Bulle flèche : cercle plein (couleur de la section), sans halo ni découpe. */
/* Décroché signature : encoche au coin bas-droit (le fond réapparaît autour du rond). */
.pana-if__notch { position: absolute; right: 0; bottom: 0; width: 4.9rem; height: 4.9rem; background: var(--if-bg); border-radius: 0; border-top-left-radius: 52%; z-index: 2; }
/* Raccords concaves (fillets) là où l'encoche rejoint les bords de la photo. */
.pana-if__notch::before, .pana-if__notch::after { content: ""; position: absolute; width: 22px; height: 22px; background: radial-gradient(circle 22px at 0 0, transparent 21px, var(--if-bg) 21.8px); }
.pana-if__notch::before { bottom: 100%; right: 0; }
.pana-if__notch::after { right: 100%; bottom: 0; }
/* Rond navy + flèche blanche en diagonale (design capsule validé). */
.pana-if__btn { position: absolute; inset: 10px 6px 6px 10px; background: var(--pana-navy, #0A1628); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 10px 24px -10px rgba(10, 22, 40, .55); transition: transform .3s ease, background .3s ease; }
.pana-if__btn svg { width: 22px; height: 22px; transform: rotate(-45deg); transition: transform .3s ease; }
.pana-if:hover .pana-if__btn { transform: scale(1.06); background: var(--pana-bleu, #1C56E5); }
.pana-if:hover .pana-if__btn svg { transform: rotate(0deg); }
.pana-if__content { padding: 15px 6px 0; }
.pana-if__title { margin: 0; font-family: var(--pv-font-titres, inherit); font-weight: 800; font-size: 1.3rem; line-height: 1.05; letter-spacing: -.03em; color: var(--dir-navy); }
.pana-if__desc { margin: 6px 0 0; color: #667085; font-size: .9rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pana-if__tags { margin: 11px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.pana-if__tags li { background: color-mix(in srgb, var(--if-btn) 12%, #fff); color: color-mix(in srgb, var(--if-btn) 72%, #000); font-weight: 700; font-size: .74rem; padding: .3rem .7rem; border-radius: 999px; }
.pana-dir-empty { margin: 20px 0 0; text-align: center; color: var(--dir-muted); font-weight: 700; }

/* CTA box (« Pret a vous inscrire ? »). */
.pana-dir-cta { padding: 10px 0 70px; }
.pana-dir-cta__box { min-height: 150px; border-radius: 24px; background: linear-gradient(135deg, #215BEE 0%, #0B4FE8 100%); color: #fff; display: flex; align-items: center; justify-content: center; gap: clamp(28px, 6vw, 95px); padding: 28px 40px; position: relative; overflow: hidden; box-shadow: 0 18px 45px rgba(33,91,238,.22); text-align: center; flex-wrap: wrap; }
.pana-dir-cta__box::before { content: ""; position: absolute; left: 0; bottom: -90px; width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,.08); }
.pana-dir-cta__box::after { content: ""; position: absolute; right: -68px; top: -76px; width: 230px; height: 230px; border-radius: 50%; background: rgba(255,255,255,.08); }
.pana-dir-cta__content { position: relative; z-index: 1; }
.pana-dir-cta__content h2 { margin: 0; font-family: var(--pv-font-titres, inherit); font-size: clamp(28px, 3.4vw, 43px); letter-spacing: -.045em; line-height: 1.05; color: #fff; }
.pana-dir-cta__content p { margin: 8px 0 0; font-size: 18px; line-height: 1.45; opacity: .90; }
.pana-dir-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 28px; border-radius: 999px; background: #fff; color: var(--dir-primary); font-size: 14px; font-weight: 900; white-space: nowrap; transition: transform .2s ease, background .2s ease; }
.pana-dir-btn:hover { transform: translateY(-2px); background: #F4F8FF; }

@media (max-width: 1280px) { .pana-dir-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; } }
@media (max-width: 1080px) {
  .pana-dir-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pana-dir-filterbar { border-radius: 28px; align-items: stretch; flex-direction: column; }
  .pana-dir-filterbar__filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .pana-dir-pill { white-space: nowrap; }
}
@media (max-width: 820px) {
  .pana-dir-container, .pana-dir-hero__inner { width: min(100% - 40px, 680px); }
  .pana-dir-hero { min-height: unset; padding: 56px 0 82px; }
  .pana-dir-hero__bg img { object-position: center center; }
  .pana-dir-hero__bg::before { background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.78) 44%, rgba(245,240,232,.96) 100%); }
  .pana-dir-hero h1 { font-size: 42px; letter-spacing: -.055em; }
  .pana-dir-hero__lead { font-size: 17px; }
  .pana-dir-benefits { gap: 14px; align-items: flex-start; flex-direction: column; }
  .pana-dir-filterwrap { margin-top: -32px; }
  .pana-dir-list { padding-top: 58px; }
  .pana-dir-grid { grid-template-columns: 1fr; gap: 24px; }
  .pana-if__inner { height: 300px; }
  .pana-if__title { font-size: 1.5rem; }
  .pana-dir-cta__box { padding: 34px 28px; flex-direction: column; gap: 22px; }
}
@media (max-width: 520px) { .pana-if__inner { height: 260px; } }
@media (max-width: 520px) {
  .pana-dir-pill { height: 44px; padding: 0 16px; }
  .pana-dir-sort { width: 100%; }
}

/* ============================================================================
   ÉCHELLE TYPOGRAPHIQUE AFFINÉE (correction 15/07) : toutes les tailles de
   titres et de textes de la vitrine réduites d'environ 12 à 18 %, de façon
   homogène, pour un rendu plus fin (hiérarchie inchangée). Bloc UNIQUE en fin
   de feuille : mêmes sélecteurs que les règles d'origine (ou spécificité
   supérieure quand la règle d'origine est imprimée inline dans le body).
   ========================================================================== */
/* Accueil */
.pv-hero__titre { font-size: clamp(2.4rem, 1rem + 4.5vw, 4rem); }
.pv-hero__lead { font-size: 1rem; }
.pv-hero__devise blockquote { font-size: 1.32rem; } /* citation legerement agrandie (2026-07-16) */
.pv-mission__titre { font-size: clamp(1.4rem, 1.05rem + 1.2vw, 1.75rem); }
.pv-mission__lead { font-size: .875rem; }
.pv-h2 { font-size: clamp(1.55rem, 1.1rem + 1.9vw, 2.35rem); }
.pv-cta__titre { font-size: clamp(1.2rem, 1rem + 1.2vw, 1.7rem); }
.pv-rapport__titre { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.1rem); }
.pv-rapport__corps { font-size: .95rem; }
:is(.pana-accueil__cta, .pana-sections-archive__cta) .pana-cta__titre { font-size: 1.25rem !important; }
/* Annuaire des sections */
.pana-dir-hero h1 { font-size: clamp(34px, 3.6vw, 52px); }
.pana-dir-hero__lead { font-size: 16px; }
.pana-dir-cta__content h2 { font-size: clamp(23px, 2.7vw, 34px); }
.pana-dir-cta__content p { font-size: 15px; }
/* Cartes de section (accueil + annuaire) */
.pana-if__title { font-size: 1.15rem; }
.pana-if__desc { font-size: .84rem; }
@media (max-width: 820px) { .pana-if__title { font-size: 1.3rem; } }
/* Fiche section */
.pv-shero__titre { font-size: clamp(2rem, 4vw, 3rem); }
.pv-shero__tagline { font-size: 1rem; }
.pana-section-page .pana-sp__h { font-size: clamp(1.35rem, 1.15rem + .7vw, 1.7rem); }
.pana-section-page .pana-sp__h--banner { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.5rem); }
.pana-section-page .pana-sp__card-v { font-size: 1.3rem; }
.pana-section-page .pana-sp__lead { font-size: clamp(.95rem, .9rem + .2vw, 1.05rem); }
.pana-section-page .pana-section-page__agenda .pana-calendrier__titre { font-size: clamp(1.35rem, 1.15rem + .7vw, 1.7rem); }
.pana-section-page__cta .pana-cta__titre { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem) !important; }
/* Pages Contact / Actualités / Calendrier */
.pana-ct__titre, .pana-na__titre, .pana-cal__titre { font-size: clamp(2rem, 1.7rem + 1.6vw, 3.1rem); }
.pana-na__t { font-size: 1.15rem; }
.pana-cal__ev-t { font-size: 1.05rem; }


/* ── Clic logo / cartes section : aucun anneau de focus au clic (2026-07-16) ──
   Le rond navy qui passe en bleu sert d'indicateur clavier (focus-visible). */
.pana-brand, .pana-if__link { -webkit-tap-highlight-color: transparent; }
.pana-brand:focus, .pana-brand:focus-visible,
.pana-if__link:focus, .pana-if__link:focus-visible { outline: none !important; }
.pana-if__link:focus-visible .pana-if__btn { background: var(--pana-bleu, #1C56E5); }

/* ══════════════════ TYPO ROBOTO + NUNITO (spec Kevin 2026-07-16) ══════════════════
   Roboto = titres/boutons · Nunito = corps. Auto-hébergées (RGPD).
   Technique : @font-face « alias » — les anciennes familles (Bricolage Grotesque,
   Manrope, Poppins, Space Grotesk) pointent désormais vers les fichiers Roboto/Nunito.
   Aucune règle existante à réécrire : tout le site bascule d'un coup. */
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/roboto-400.woff2") format("woff2");}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/roboto-500.woff2") format("woff2");}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/roboto-700.woff2") format("woff2");}
@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-display:swap;src:url("../fonts/roboto-900.woff2") format("woff2");}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/nunito-400.woff2") format("woff2");}
@font-face{font-family:'Nunito';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/nunito-600.woff2") format("woff2");}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/nunito-700.woff2") format("woff2");}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/nunito-800.woff2") format("woff2");}
/* Alias titres → Roboto */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/roboto-400.woff2") format("woff2");}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/roboto-500.woff2") format("woff2");}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/roboto-700.woff2") format("woff2");}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/roboto-700.woff2") format("woff2");}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/roboto-900.woff2") format("woff2");}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/roboto-700.woff2") format("woff2");}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/roboto-900.woff2") format("woff2");}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/roboto-500.woff2") format("woff2");}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/roboto-700.woff2") format("woff2");}
/* Alias corps → Nunito */
@font-face{font-family:'Manrope';font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/nunito-400.woff2") format("woff2");}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/nunito-400.woff2") format("woff2");}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/nunito-600.woff2") format("woff2");}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/nunito-600.woff2") format("woff2");}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/nunito-700.woff2") format("woff2");}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/nunito-800.woff2") format("woff2");}

/* ══════════════════ HERO · MOSAÏQUE MASONRY ANIMÉE (2026-07-16) ══════════════════
   Grande photo en haut à gauche (2 col × 3 rangs) + masonry calibrée 3×8 (13 tuiles,
   rectangle plein), entrée en cascade + zoom doux au survol. */
.pv-hero__mosaique{
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 66px;
	gap: 10px;
	grid-auto-flow: dense;
}
.pv-hero__tuile{ border-radius: 16px; position: relative; }
.pv-hero__tuile:nth-child(1){ grid-column: 1 / span 2; grid-row: 1 / span 3; border-radius: 22px; }
.pv-hero__tuile:nth-child(2){ grid-column: 3; grid-row: 1 / span 2; }
.pv-hero__tuile:nth-child(3){ grid-column: 3; grid-row: 3; }
.pv-hero__tuile:nth-child(4){ grid-column: 1; grid-row: 4 / span 2; }
.pv-hero__tuile:nth-child(5){ grid-column: 2; grid-row: 4; }
.pv-hero__tuile:nth-child(6){ grid-column: 2; grid-row: 5; }
.pv-hero__tuile:nth-child(7){ grid-column: 3; grid-row: 4 / span 2; }
.pv-hero__tuile:nth-child(8){ grid-column: 1; grid-row: 6; }
.pv-hero__tuile:nth-child(9){ grid-column: 1; grid-row: 7 / span 2; }
.pv-hero__tuile:nth-child(10){ grid-column: 2; grid-row: 6 / span 2; }
.pv-hero__tuile:nth-child(11){ grid-column: 2; grid-row: 8; }
.pv-hero__tuile:nth-child(12){ grid-column: 3; grid-row: 6; }
.pv-hero__tuile:nth-child(13){ grid-column: 3; grid-row: 7 / span 2; }
/* Entrée en cascade (une fois, au chargement — aucune dépendance JS) */
@keyframes pvTuileIn{ from{ opacity:0; transform: translateY(16px) scale(.96); } to{ opacity:1; transform:none; } }
.pv-hero__tuile{ animation: pvTuileIn .65s cubic-bezier(.22,1,.36,1) backwards; }
.pv-hero__tuile:nth-child(1){ animation-delay:.05s; } .pv-hero__tuile:nth-child(2){ animation-delay:.11s; }
.pv-hero__tuile:nth-child(3){ animation-delay:.17s; } .pv-hero__tuile:nth-child(4){ animation-delay:.23s; }
.pv-hero__tuile:nth-child(5){ animation-delay:.29s; } .pv-hero__tuile:nth-child(6){ animation-delay:.35s; }
.pv-hero__tuile:nth-child(7){ animation-delay:.41s; } .pv-hero__tuile:nth-child(8){ animation-delay:.47s; }
.pv-hero__tuile:nth-child(9){ animation-delay:.53s; } .pv-hero__tuile:nth-child(10){ animation-delay:.59s; }
.pv-hero__tuile:nth-child(11){ animation-delay:.65s; } .pv-hero__tuile:nth-child(12){ animation-delay:.71s; }
.pv-hero__tuile:nth-child(13){ animation-delay:.77s; }
/* Vie de la mosaïque : fondu lors des échanges (JS) + zoom doux au survol */
.pv-hero__tuile img{ transition: opacity .42s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.pv-hero__tuile:hover img{ transform: scale(1.06); }
@media (max-width: 560px){
	.pv-hero__mosaique{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 74px; }
	.pv-hero__tuile{ grid-column: auto !important; grid-row: auto !important; }
	.pv-hero__tuile:nth-child(1){ grid-column: 1 / span 2 !important; grid-row: 1 / span 2 !important; }
}
@media (prefers-reduced-motion: reduce){
	.pv-hero__tuile{ animation: none; }
	.pv-hero__tuile img{ transition: none; }
	.pv-hero__tuile:hover img{ transform: none; }
}

/* ══════════════════ HEADER FLOTTANT « PILL » (2026-07-16) ══════════════════
   Barre compacte arrondie, flottante et centrée (verre dépoli), style navbar pill.
   ⚠ PAS de transform ici (créerait un containing block qui casserait le menu mobile
   position:fixed) : centrage par left/right + margin auto. */
.pana-header{
	position: fixed !important;
	top: 14px; left: 0; right: 0;
	margin-inline: auto;
	width: min(var(--pv-max), calc(100% - 56px)); /* = largeur contenu (1184px), bords alignés à toutes tailles */
	background: rgba(255,255,255,.88) !important;
	-webkit-backdrop-filter: blur(14px) saturate(1.5);
	backdrop-filter: blur(14px) saturate(1.5);
	border: 1px solid rgba(7,26,61,.08) !important;
	border-radius: 999px;
	box-shadow: 0 10px 34px -14px rgba(7,26,61,.28);
	z-index: 990;
	transform: none !important;
	animation: none !important;
}
.pana-header.is-stuck{
	background: rgba(255,255,255,.96) !important;
	box-shadow: 0 14px 40px -14px rgba(7,26,61,.32);
}
.pana-header__barre{ padding: .45rem 1.15rem !important; border-bottom: 0 !important; }
.pana-header .pana-brand__logo{ height: 44px !important; }
.pana-header.is-stuck .pana-brand__logo{ height: 40px !important; }
.pana-header__nav .wp-block-navigation-item__content{ font-size: .95rem; }
body.admin-bar .pana-header{ top: 46px; }
@media (max-width: 782px){ body.admin-bar .pana-header{ top: 60px; } }
/* Le header sort du flux : compenser sur les pages intérieures (le hero de la home a déjà son padding). */
body:not(.home) .wp-site-blocks{ padding-top: 92px; }
@media (max-width: 600px){
	.pana-header{ top: 10px; width: calc(100% - 16px); }
	.pana-header__barre{ padding: .4rem .8rem !important; }
	.pana-header .pana-brand__logo{ height: 36px !important; }
	body:not(.home) .wp-site-blocks{ padding-top: 78px; }
}

/* ══════ EQUILIBRAGE 2026-07-16 bis : header centré/compact · hero texte centré · bande actus blanche ══════ */
/* 1. Pill : le block-gap WP (32px) poussait la barre vers le bas SUR LA HOME → neutralisé partout.
      Contenu centré verticalement, hauteur ramenée à ~61px. */
.pana-header > * { margin-block-start: 0 !important; }
.pana-header__barre{ padding: .35rem 1.1rem !important; align-items: center !important; }

/* 2. Hero : la colonne gauche (titres, texte, boutons) est centrée verticalement face à la mosaïque.
      La devise suit le groupe (fini le poussoir margin-top:auto qui collait tout en haut). */
.pv-hero__texte{ justify-content: center; }
.pv-hero__devise{ margin: 2.2rem 0 0 auto; }
@media (max-width: 1040px){ .pv-hero__devise{ margin: 22px 0 0 0; } }

/* 3. Bande « Actualités de l'association · Agenda des événements » : fond blanc pleine largeur. */
.pana-accueil__actus-agenda{ background: #ffffff; }

/* ══════ CTA blanc + hero section full-bleed (2026-07-16 ter) ══════ */
/* Bande « Inscriptions ouvertes · Démarrer mon inscription » : fond blanc
   (le bandeau bleu arrondi ressort dessus, comme la bande actus/agenda). */
.pana-accueil__cta{ background: #ffffff; }

/* Fiche section (ex. /sections/yoga/) : la photo du hero monte JUSQU'EN HAUT
   de l'écran, plein cadre derrière la pilule flottante (effet verre). */
body.single-pana_section .wp-site-blocks{ padding-top: 0; }
body.single-pana_section main.pana-section-page,
body.single-pana_section .pana-section-page__hero{ margin-block-start: 0 !important; }
body.single-pana_section .pv-shero{
	padding-top: calc(clamp(3rem, 6vw, 5.125rem) + 84px); /* le contenu (logo/titre) passe sous la pill */
}
@media (max-width: 600px){
	body.single-pana_section .pv-shero{ padding-top: calc(2.4rem + 64px); }
}

/* ══════ HERO EN TOP derriere la pill — toutes les pages a hero (2026-07-16 quater) ══════
   Meme logique que la fiche section : le hero de chaque gabarit monte jusqu'en haut
   de l'ecran, la pilule flottante (verre) passe par-dessus ; le contenu du hero recoit
   +84px (desktop) / +64px (mobile) pour passer dessous. */
body:is(.post-type-archive-pana_section, .page-id-39, .page-id-38, .page-id-22) .wp-site-blocks{ padding-top: 0; }
body:is(.post-type-archive-pana_section, .page-id-39, .page-id-38, .page-id-22) main{ margin-block-start: 0 !important; }

/* Annuaire /sections/ (hero photo) : base 96px 0 122px · 56px 0 82px sous 820px. */
.pana-dir-hero{ padding-top: 180px; }
@media (max-width: 820px){ .pana-dir-hero{ padding-top: 120px; } }

/* Contact (hero degrade clair) : base 48px 0 38px. */
.pana-ct__hero{ padding-top: 132px; }
/* Actualites : base 52px 0 6px. */
.pana-na__hero{ padding-top: 136px; }
/* Calendrier : base 52px 0 0. */
.pana-cal__hero{ padding-top: 136px; }
@media (max-width: 600px){
	.pana-ct__hero{ padding-top: 112px; }
	.pana-na__hero, .pana-cal__hero{ padding-top: 116px; }
}

/* ════════════════════════ GABARITS ACTUS WOW (2026-07-16) ════════════════════════
   Page Actualités (pna-blog) + article seul (pna-post), d'après les maquettes Kevin.
   Tokens du site : bleu #1C56E5, navy #0A1628, fond crème, Roboto/Nunito. */
.pna-blog, .pna-post{
	--pnaB: var(--pv-bleu, #1C56E5);
	--pnaBd: var(--pv-bleu-deep, #1442B8);
	--pnaN: var(--pv-navy, #0A1628);
	--pnaMut: #667085;
	--pnaBord: rgba(7,26,61,.10);
	--pnaSh: 0 16px 48px rgba(7,26,61,.10);
	--pnaShL: 0 26px 80px rgba(7,26,61,.16);
}

/* ── En-tête (hero) de la page Actualités ── */
.pna-blog__hero{ position: relative; overflow: hidden; padding: 172px 0 92px; }
.pna-blog__hero::before{ content:""; position:absolute; inset:0; pointer-events:none;
	background: radial-gradient(circle at 72% 18%, rgba(28,86,229,.13), transparent 30%),
	            radial-gradient(circle at 14% 90%, rgba(255,107,26,.12), transparent 34%); }
.pna-blog__hero-in{ position:relative; z-index:2; display:grid; grid-template-columns:1fr 440px; gap:60px; align-items:center; }
.pna-eyebrow{ display:inline-flex; align-items:center; gap:10px; padding:9px 16px; border-radius:999px; background:#fff;
	box-shadow:0 12px 34px rgba(7,26,61,.08); color:var(--pnaN); font-size:13px; font-weight:900; text-transform:uppercase; letter-spacing:.12em; }
.pna-eyebrow::before{ content:""; width:9px; height:9px; border-radius:999px; background:#ff6b1a; box-shadow:14px 0 0 var(--pnaB); margin-right:12px; }
.pna-blog__titre{ margin:26px 0 20px; color:var(--pnaN); font-size:clamp(52px,6vw,88px); line-height:.92; letter-spacing:-.05em; font-weight:800; }
.pna-blog__lead{ max-width:640px; color:#25324D; font-size:19px; line-height:1.6; margin:0; }
.pna-blog__une{ display:block; background:#fff; border:1px solid var(--pnaBord); border-radius:30px; box-shadow:var(--pnaShL); padding:22px; transition:transform .22s ease, box-shadow .22s ease; }
.pna-blog__une:hover{ transform:translateY(-6px); }
.pna-blog__une img{ height:250px; width:100%; object-fit:cover; border-radius:20px; }
.pna-blog__une-tag{ display:inline-flex; margin-top:18px; padding:6px 12px; border-radius:999px; background:var(--pv-bleu-soft,#EAF0FE); color:var(--pnaB); font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.pna-blog__une h3{ margin:12px 0 8px; color:var(--pnaN); font-size:24px; letter-spacing:-.03em; }
.pna-blog__une p{ font-size:15px; line-height:1.5; color:var(--pnaMut); margin:0; }

/* ── Barre de filtres flottante ── */
.pna-blog__filters{ width:min(100% - 56px, 1140px); margin:-36px auto 52px; position:relative; z-index:3;
	background:rgba(255,255,255,.93); backdrop-filter:blur(16px); border:1px solid var(--pnaBord); border-radius:999px;
	box-shadow:0 18px 55px rgba(7,26,61,.10); padding:12px; display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.pna-pill{ display:inline-flex; align-items:center; height:44px; padding:0 20px; border-radius:999px; color:var(--pnaN); font-weight:800; font-size:15px; transition:.2s; }
.pna-pill:hover{ background:var(--pv-bleu-soft,#EAF0FE); }
.pna-pill.is-active{ background:var(--pnaB); color:#fff; box-shadow:0 10px 24px rgba(28,86,229,.22); }

/* ── Grille + colonne latérale ── */
.pna-blog__layout{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:34px; margin-bottom:64px; }
.pna-blog__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.pna-card{ background:#fff; border:1px solid var(--pnaBord); border-radius:26px; overflow:hidden; box-shadow:var(--pnaSh); transition:.22s; }
.pna-card:hover{ transform:translateY(-8px); box-shadow:0 24px 70px rgba(7,26,61,.15); }
.pna-card a{ display:block; }
.pna-card__img{ height:235px; overflow:hidden; background:var(--pv-bleu-soft,#EAF0FE); }
.pna-card__img img{ width:100%; height:100%; object-fit:cover; transition:.35s; }
.pna-card:hover .pna-card__img img{ transform:scale(1.05); }
.pna-card__ph, .pna-recent__ph{ display:block; width:100%; height:100%; background:linear-gradient(135deg,var(--pv-bleu-soft,#EAF0FE),#fff); }
.pna-card__body{ padding:26px; }
.pna-badge{ display:inline-flex; padding:7px 11px; border-radius:999px; background:var(--pv-bleu-soft,#EAF0FE); color:var(--pnaBd); font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.04em; }
.pna-card__date{ margin:13px 0 8px; color:var(--pnaMut); font-size:13px; font-weight:800; }
.pna-card h2{ margin:0 0 10px; color:var(--pnaN); font-size:27px; line-height:1.08; letter-spacing:-.035em; }
.pna-card p{ margin:0 0 20px; color:var(--pnaMut); font-size:15.5px; line-height:1.55; }
.pna-read{ color:var(--pnaB); font-weight:900; }
.pna-vide{ background:#fff; border:1px solid var(--pnaBord); border-radius:26px; padding:44px; text-align:center; color:var(--pnaMut); }

.pna-blog__pagination{ display:flex; justify-content:center; gap:10px; margin-top:30px; }
.pna-num{ min-width:44px; height:44px; padding:0 12px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--pnaBord); font-weight:900; color:var(--pnaN); }
.pna-num.is-active{ background:var(--pnaB); color:#fff; border-color:var(--pnaB); }

.pna-blog__side{ display:flex; flex-direction:column; gap:22px; position:sticky; top:110px; align-self:start; }
.pna-side-card{ background:#fff; border:1px solid var(--pnaBord); border-radius:26px; padding:26px; box-shadow:var(--pnaSh); }
.pna-side-title{ margin:0 0 18px; color:var(--pnaN); font-size:21px; letter-spacing:-.03em; }
.pna-side-title::after{ content:""; display:block; width:38px; height:4px; background:var(--pnaB); border-radius:999px; margin-top:9px; }
.pna-search{ display:flex; height:48px; border:1px solid var(--pnaBord); border-radius:16px; overflow:hidden; }
.pna-search input{ flex:1; min-width:0; border:0; padding:0 14px; font:inherit; outline:0; background:#fff; color:var(--pnaN); }
.pna-search input:focus{ box-shadow:inset 0 0 0 2px rgba(28,86,229,.25); }
.pna-search button{ border:0; background:var(--pnaB); color:#fff; padding:0 15px; cursor:pointer; display:grid; place-items:center; }
.pna-cat-row{ display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid rgba(7,26,61,.06); padding:11px 0; font-weight:800; color:var(--pnaN); }
.pna-cat-row:last-child{ border-bottom:0; }
.pna-cat-row span{ color:var(--pnaMut); font-weight:800; }
.pna-recents{ display:flex; flex-direction:column; gap:14px; }
.pna-recent{ display:grid; grid-template-columns:74px 1fr; gap:12px; align-items:center; }
.pna-recent img, .pna-recent .pna-recent__ph{ width:74px; height:58px; border-radius:12px; object-fit:cover; }
.pna-recent b{ display:block; color:var(--pnaN); font-size:14px; line-height:1.25; }
.pna-recent span span{ color:var(--pnaMut); font-size:12px; }

/* ── Bandeau CTA ── */
.pna-cta{ background:linear-gradient(135deg,var(--pnaB),var(--pnaBd)); color:#fff; border-radius:28px; padding:34px 46px; margin-bottom:70px;
	display:flex; align-items:center; justify-content:space-between; gap:22px; box-shadow:0 22px 70px rgba(28,86,229,.25); position:relative; overflow:hidden; }
.pna-cta::after{ content:""; position:absolute; right:-60px; top:-70px; width:240px; height:240px; border-radius:50%; background:rgba(255,255,255,.08); }
.pna-cta h2{ margin:0; font-size:31px; letter-spacing:-.03em; color:#fff; }
.pna-cta p{ margin:7px 0 0; color:rgba(255,255,255,.85); }
.pna-btn{ display:inline-flex; align-items:center; gap:9px; height:48px; padding:0 22px; border-radius:999px; font-weight:900; font-size:15px;
	background:var(--pnaB); color:#fff; border:0; cursor:pointer; transition:.2s; }
.pna-btn:hover{ transform:translateY(-2px); }
.pna-btn--blanc{ background:#fff; color:var(--pnaB); position:relative; z-index:2; }

/* ── Article seul : hero carte ── */
.pna-post-hero{ position:relative; overflow:hidden; padding:132px 0 36px; }
.pna-post-hero::before{ content:""; position:absolute; inset:0; pointer-events:none;
	background: radial-gradient(circle at 78% 12%, rgba(28,86,229,.12), transparent 36%),
	            radial-gradient(circle at 15% 88%, rgba(255,107,26,.10), transparent 30%); }
.pna-post-hero__card{ position:relative; z-index:2; min-height:430px; border-radius:32px; overflow:hidden; background:#fff;
	box-shadow:var(--pnaShL); border:1px solid rgba(7,26,61,.08); display:grid; grid-template-columns:1fr 1.05fr; }
.pna-post-hero__card--sans{ grid-template-columns:1fr; min-height:0; }
.pna-post-hero__content{ padding:60px 52px; display:flex; flex-direction:column; justify-content:center; position:relative; z-index:2;
	background:linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.92) 82%,rgba(255,255,255,.65) 100%); }
.pna-crumb{ display:flex; flex-wrap:wrap; gap:9px; align-items:center; font-size:13px; font-weight:800; color:var(--pnaMut); margin-bottom:28px; }
.pna-crumb a{ color:var(--pnaB); }
.pna-cat-pill{ display:inline-flex; width:max-content; align-items:center; padding:8px 14px; border-radius:999px; background:var(--pv-bleu-soft,#EAF0FE);
	color:var(--pnaB); font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.pna-cat-pill::before{ content:""; width:8px; height:8px; border-radius:999px; background:#FF6B1A; box-shadow:12px 0 0 var(--pnaB); margin-right:16px; }
.pna-post__titre{ margin:22px 0 20px; font-size:clamp(44px,4.8vw,76px); line-height:.94; letter-spacing:-.05em; color:var(--pnaN); font-weight:800; }
.pna-post-meta{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; color:var(--pnaMut); font-size:14px; font-weight:800; }
.pna-post-meta span{ display:inline-flex; align-items:center; gap:8px; }
.pna-post-meta svg{ color:var(--pnaB); }
.pna-post-meta b{ color:var(--pv-navy,#0A1628); font-weight:800; }
.pna-post-hero__media{ position:relative; min-height:430px; }
.pna-post-hero__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pna-post-hero__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.1) 22%,transparent 52%); }

/* ── Article seul : rail + contenu + commentaires ── */
.pna-post__layout{ display:grid; grid-template-columns:64px minmax(0,1fr) 320px; gap:30px; align-items:start; margin:30px auto 72px; }
.pna-share{ position:sticky; top:110px; display:flex; flex-direction:column; gap:12px; }
.pna-share a, .pna-share__copy{ width:48px; height:48px; border-radius:999px; background:#fff; border:1px solid var(--pnaBord); display:grid; place-items:center;
	color:var(--pnaN); box-shadow:0 10px 28px rgba(7,26,61,.07); transition:.2s; cursor:pointer; }
.pna-share a:hover, .pna-share__copy:hover{ background:var(--pnaB); color:#fff; transform:translateY(-2px); }
.pna-share__copy.is-copie{ background:#12934c; color:#fff; border-color:#12934c; }
.pna-post__article, .pna-post__comments{ background:#fff; border:1px solid var(--pnaBord); border-radius:26px; box-shadow:var(--pnaSh); padding:40px; }
.pna-post__content{ font-size:17.5px; line-height:1.78; color:#23314D; }
.pna-post__content p{ margin:0 0 22px; }
.pna-post__content p:first-child{ font-size:19.5px; color:var(--pnaN); font-weight:650; }
.pna-post__content img{ border-radius:20px; box-shadow:0 14px 40px rgba(7,26,61,.12); height:auto; }
.pna-post__content h2, .pna-post__content h3{ color:var(--pnaN); letter-spacing:-.03em; margin:30px 0 14px; }
.pna-post__content a{ color:var(--pnaB); font-weight:700; }
.pna-post__content ul, .pna-post__content ol{ margin:0 0 22px; padding-left:22px; }
.pna-post__content blockquote{ margin:0 0 22px; padding:14px 22px; border-left:4px solid var(--pnaB); background:var(--pv-bleu-soft,#EAF0FE); border-radius:0 14px 14px 0; }
.pna-post__nav{ margin-top:30px; padding-top:24px; border-top:1px solid var(--pnaBord); display:flex; justify-content:space-between; gap:18px; }
.pna-post__nav a{ font-size:14.5px; color:var(--pnaB); font-weight:900; max-width:46%; }
.pna-post__nav a span{ display:block; color:var(--pnaMut); font-size:12px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px; font-weight:800; }
.pna-post__nav-suiv{ text-align:right; margin-left:auto; }
.pna-post__comments{ margin-top:26px; }
.pna-comments{ list-style:none; margin:0 0 26px; padding:0; display:flex; flex-direction:column; gap:16px; }
.pna-comment{ border:1px solid rgba(7,26,61,.08); border-radius:16px; padding:16px 18px; }
.pna-comment__tete{ display:flex; gap:12px; align-items:baseline; margin-bottom:6px; }
.pna-comment__tete b{ color:var(--pnaN); }
.pna-comment__tete time{ color:var(--pnaMut); font-size:12.5px; font-weight:700; }
.pna-comment__texte p{ margin:0; color:#23314D; font-size:15px; line-height:1.6; }
.pna-post__comments .comment-form{ display:flex; flex-direction:column; gap:6px; }
.pna-post__comments .comment-notes, .pna-post__comments .logged-in-as{ color:var(--pnaMut); font-size:14px; margin:0 0 10px; }
.pna-post__comments .logged-in-as a, .pna-post__comments .comment-form a{ color:var(--pnaB); font-weight:800; }
.pna-post__comments label{ font-weight:800; color:var(--pnaN); display:block; margin-bottom:8px; font-size:14px; }
.pna-post__comments textarea, .pna-post__comments input[type="text"], .pna-post__comments input[type="email"], .pna-post__comments input[type="url"]{
	width:100%; border:1px solid var(--pnaBord); border-radius:16px; padding:13px 16px; font:inherit; outline:none; background:#fff; box-sizing:border-box; }
.pna-post__comments textarea{ min-height:150px; resize:vertical; }
.pna-post__comments textarea:focus, .pna-post__comments input:focus{ border-color:var(--pnaB); box-shadow:0 0 0 4px rgba(28,86,229,.12); }
.pna-post__comments .form-submit{ margin:14px 0 0; }
.pna-post__comments .pna-btn{ height:50px; padding:0 26px; }
.pna-auteur{ display:grid; grid-template-columns:74px 1fr; gap:16px; align-items:center; }
.pna-auteur__avatar{ width:74px; height:74px; border-radius:999px; background:linear-gradient(135deg,var(--pv-bleu-soft,#EAF0FE),#fff); display:grid; place-items:center; color:var(--pnaB); }
.pna-auteur__avatar svg{ width:30px; height:30px; }
.pna-auteur h3{ margin:0 0 5px; color:var(--pnaN); font-size:17px; }
.pna-auteur p{ margin:0; font-size:13px; line-height:1.5; color:var(--pnaMut); }

/* ── Heros en top derriere la pill (meme logique que le reste du site) ── */
body.page-id-38 .pna-blog__hero{ padding-top: 172px; }
body.single-post .wp-site-blocks{ padding-top: 0; }
body.single-post main.pna-post-page{ margin-block-start: 0 !important; }

/* ── Responsive ── */
@media (max-width: 1100px){
	.pna-blog__hero-in{ grid-template-columns:1fr; gap:34px; }
	.pna-blog__une{ display:none; }
	.pna-blog__layout{ grid-template-columns:1fr; }
	.pna-blog__side{ position:static; display:grid; grid-template-columns:repeat(2,1fr); align-items:start; }
	.pna-post-hero__card{ grid-template-columns:1fr; }
	.pna-post-hero__media{ min-height:300px; order:-1; }
	.pna-post-hero__content{ background:#fff; }
	.pna-post__layout{ grid-template-columns:minmax(0,1fr); }
	.pna-share{ position:static; flex-direction:row; }
}
@media (max-width: 760px){
	.pna-blog__hero{ padding:132px 0 60px; }
	body.page-id-38 .pna-blog__hero{ padding-top:116px; }
	.pna-post-hero{ padding-top:96px; }
	.pna-blog__filters{ border-radius:24px; justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; width:calc(100% - 40px); }
	.pna-blog__grid{ grid-template-columns:1fr; }
	.pna-blog__side{ grid-template-columns:1fr; }
	.pna-post-hero__content{ padding:32px 24px; }
	.pna-post__article, .pna-post__comments{ padding:26px; }
	.pna-cta{ flex-direction:column; align-items:flex-start; padding:28px; }
	.pna-post__nav{ flex-direction:column; }
	.pna-post__nav a{ max-width:none; }
}

/* pna sans soulignement (le thème parent souligne les <a> par défaut) — le contenu d'article garde les siens. */
.pna-blog a, .pna-post a{ text-decoration: none; }
.pna-post__content a{ text-decoration: underline; text-underline-offset: 3px; }

/* Cartes section : pills type + barre de filtres retirées (Kevin 2026-07-16).
   Les tags « Sport individuel / Bien-être / … » sous les titres de cartes et la barre
   de filtres-tri de l'annuaire /sections/ sont masqués (DOM conservé : réversible). */
.pana-if__tags{ display: none !important; }
.pana-dir-filterbar{ display: none !important; }

/* ══════ HEROS PHOTO COHERENTS + defile annuaire + AJAX actus (2026-07-16) ══════ */
/* Fond photo « principe /sections/ » : photo plein cadre + double voile blanc. */
.pna-hero-photo{ position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.pna-hero-photo img{ width: 100%; height: 100%; object-fit: cover; object-position: center right; filter: saturate(.92) contrast(.98); }
.pna-hero-photo::after{
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.96) 30%, rgba(255,255,255,.72) 52%, rgba(255,255,255,.26) 72%, rgba(255,255,255,.08) 100%),
		linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.12) 42%, rgba(245,240,232,.98) 100%);
}
.pna-blog__hero, .pana-ct__hero, .pana-cal__hero{ position: relative; overflow: hidden; }
.pna-blog__hero::before{ z-index: 1; }
.pna-blog__hero .pv-wrap, .pana-ct__hero .pana-ct__wrap, .pana-cal__hero .pana-cal__wrap{ position: relative; z-index: 2; }

/* Titre Actualités réduit (demande Kevin). */
.pna-blog__titre{ font-size: clamp(38px, 4.2vw, 60px); margin: 22px 0 16px; }

/* Annuaire /sections/ : défilé en fondu enchaîné de TOUTES les photos de sections
   (5 s par photo · cycle 65 s pour 13 · délais négatifs inline par image). */
@keyframes panaDirDefile{
	0%{ opacity: 0; }
	2.4%{ opacity: 1; }
	7.7%{ opacity: 1; }
	10.2%{ opacity: 0; }
	100%{ opacity: 0; }
}
.pana-dir-hero__bg img{
	position: absolute; inset: 0;
	opacity: 0;
	animation: panaDirDefile 65s linear infinite;
	will-change: opacity;
}
@media (prefers-reduced-motion: reduce){
	.pana-dir-hero__bg img{ animation: none; }
	.pana-dir-hero__bg img:first-child{ opacity: 1; }
}

/* AJAX actus : voile pendant le chargement. */
.pna-blog.is-chargement .pna-blog__grid,
.pna-blog.is-chargement .pna-blog__pagination{ opacity: .4; pointer-events: none; transition: opacity .2s ease; }

/* ══════ FONDU BAS DES HEROS (2026-07-16) — plus de ligne de démarcation ══════
   Les voiles se terminaient à ~98 % d'opacité : la photo restait perceptible sur le
   dernier pixel → arête visible entre le hero et le contenu. Les dégradés atteignent
   désormais la couleur PLEINE de la page bien avant le bord (fondu type hero home). */
.pana-dir-hero__bg::before{
	background:
		linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.97) 30%, rgba(255,255,255,.78) 48%, rgba(255,255,255,.32) 68%, rgba(255,255,255,.08) 100%),
		linear-gradient(180deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.10) 40%, rgba(245,240,232,.65) 70%, #F5F0E8 92%, #F5F0E8 100%);
}
.pna-hero-photo::after{
	background:
		linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.96) 30%, rgba(255,255,255,.72) 52%, rgba(255,255,255,.26) 72%, rgba(255,255,255,.08) 100%),
		linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.12) 40%, rgba(245,240,232,.65) 72%, #F5F0E8 93%, #F5F0E8 100%);
}

/* ══════ HEROS UNIFORMES + SLIDER HOME (2026-07-16 bis) ══════ */
/* Défilé partagé : mêmes photos/rythme que l'annuaire sur les heros actus/contact/calendrier. */
.pna-hero-photo--defile img{
	position: absolute; inset: 0;
	opacity: 0;
	animation: panaDirDefile 65s linear infinite;
	will-change: opacity;
}
@media (prefers-reduced-motion: reduce){
	.pna-hero-photo--defile img{ animation: none; }
	.pna-hero-photo--defile img:first-child{ opacity: 1; }
}

/* Même hauteur pour tous les heros de pages (annuaire = référence visuelle). */
.pana-dir-hero, .pna-blog__hero, .pana-ct__hero, .pana-cal__hero{ min-height: 540px; }
.pna-blog__hero, .pana-ct__hero, .pana-cal__hero{ display: flex; flex-direction: column; justify-content: center; }
.pana-ct__hero{ margin-bottom: 0; }
@media (max-width: 820px){
	.pana-dir-hero, .pna-blog__hero, .pana-ct__hero, .pana-cal__hero{ min-height: 420px; }
}

/* HOME · capsules de sections en slider : 1 ligne, 5 visibles, avance de 1 en 1. */
.pana-accueil__sections .pv-scards{
	display: flex !important;
	flex-wrap: nowrap;
	gap: 18px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 6px;
}
.pana-accueil__sections .pv-scards::-webkit-scrollbar{ display: none; }
.pana-accueil__sections .pv-scards > li{
	flex: 0 0 calc((100% - 4 * 18px) / 5);
	min-width: 0;
	scroll-snap-align: start;
}
@media (max-width: 1040px){ .pana-accueil__sections .pv-scards > li{ flex-basis: calc((100% - 2 * 18px) / 3); } }
@media (max-width: 760px){ .pana-accueil__sections .pv-scards > li{ flex-basis: calc((100% - 18px) / 2); } }
@media (max-width: 520px){ .pana-accueil__sections .pv-scards > li{ flex-basis: 80%; } }

/* ── HAUTEUR COMMUNE 596 des heros (calage fin, 2026-07-16) ── */
.pana-dir-hero, .pna-blog__hero, .pana-ct__hero, .pana-cal__hero{ min-height: 596px; }
/* Actus : compactage pour revenir à la hauteur commune (était ~800px). */
.pna-blog__hero{ padding: 150px 0 48px; }
body.page-id-38 .pna-blog__hero{ padding-top: 150px; }
.pna-blog__titre{ font-size: clamp(34px, 3.6vw, 52px); margin: 18px 0 12px; }
.pna-blog__lead{ font-size: 17px; max-width: 560px; }
.pna-blog__une{ padding: 16px; border-radius: 24px; }
.pna-blog__une img{ height: 170px; border-radius: 16px; }
.pna-blog__une-tag{ margin-top: 12px; }
.pna-blog__une h3{ font-size: 20px; margin: 10px 0 6px; }
.pna-blog__une p{ font-size: 14px; }
@media (max-width: 820px){
	.pana-dir-hero, .pna-blog__hero, .pana-ct__hero, .pana-cal__hero{ min-height: 430px; }
	.pna-blog__hero{ padding: 122px 0 44px; }
	body.page-id-38 .pna-blog__hero{ padding-top: 122px; }
}

/* box-sizing des heros : sans border-box, min-height (596) s'AJOUTE aux paddings (+198 = 794px). */
.pana-dir-hero, .pna-blog__hero, .pana-ct__hero, .pana-cal__hero{ box-sizing: border-box; }

/* ══════ HOME DEFILE HERO (2026-07-16) : mêmes photos animées en fond, fondu + opacité légère ══════ */
.pv-hero{ position: relative; overflow: hidden; }
.pv-hero .pv-wrap{ position: relative; z-index: 2; }
/* Voile calé sur la capture validée : centre-gauche très blanc (texte), photo perceptible
   à droite/haut, fondu bas vers la couleur « surface » de la section suivante. */
.pv-hero .pna-hero-photo::after{
	background:
		linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 34%, rgba(255,255,255,.66) 55%, rgba(255,255,255,.30) 78%, rgba(255,255,255,.14) 100%),
		linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.34) 40%, rgba(255,255,255,.30) 68%, var(--wp--preset--color--surface, #F5F1E8) 94%, var(--wp--preset--color--surface, #F5F1E8) 100%);
}

/* ══════ MASK ANTI-LIGNE (2026-07-16) — fin définitive de la ligne de séparation ══════
   Principe : le fond photo (et son voile) s'évanouit au MASK avant le bord bas, et les
   heros deviennent transparents → au bord, c'est le fond de page des DEUX côtés :
   une ligne est physiquement impossible, quelle que soit la nuance de crème. */
.pna-hero-photo, .pana-dir-hero__bg{
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 97%);
	        mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 97%);
}
.pv-hero, .pana-dir-hero, .pana-ct__hero, .pana-cal__hero, .pna-blog__hero, .pna-post-hero{ background: transparent !important; }
/* Les halos décoratifs suivent le même évanouissement. */
.pna-blog__hero::before, .pna-post-hero::before{
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 95%);
	        mask-image: linear-gradient(180deg, #000 0%, #000 60%, transparent 95%);
}

/* Single post : photo à la une en fond STATIQUE (même voile, sans animation). */
.pna-post-hero{ position: relative; overflow: hidden; }
.pna-post-hero .pv-wrap{ position: relative; z-index: 2; }

/* ══════ COHERENCE LARGEURS + TITRES + HOME (2026-07-16) ══════ */
/* 1. Largeur de contenu UNIQUE (1240px = pv-wrap) sur toutes les pages.
      Avant : contact/actus/calendrier = min(1600px,86vw) ≈ 1483px · annuaire = 1320px. */
.pana-ct__wrap, .pana-na__wrap, .pana-cal__wrap{
	max-width: calc(var(--pv-max) + 56px);
	padding-inline: 28px;
}
.pana-dir-container, .pana-dir-hero__inner{
	width: auto;
	max-width: calc(var(--pv-max) + 56px);
	padding-inline: 28px;
	margin-inline: auto;
}

/* 2. Titre de hero UNIQUE sur les pages de liste (même clamp que sections/actualités). */
.pana-ct__titre, .pana-na__titre, .pana-cal__titre{
	font-size: clamp(34px, 3.6vw, 52px);
	letter-spacing: -.05em;
}

/* 3. HOME : la bande « sections » démarre en BLANC (gradient) → le hero doit finir BLANC.
      (Le mask évanouit la photo vers le fond du hero : on lui rend le blanc de la maquette.) */
.pv-hero{ background: #ffffff !important; }

/* wraps pleine largeur dans les heros flex (2026-07-16) : en flex-column, margin-inline:auto
   absorbe l'espace libre → le wrap rétrécissait à son contenu (calendrier mesuré 676px !). */
.pna-blog__hero > .pv-wrap,
.pana-ct__hero > .pana-ct__wrap,
.pana-cal__hero > .pana-cal__wrap{ width: 100%; }

/* parite box-sizing annuaire : meme boite que pv-wrap (content-box) pour une largeur strictement identique. */
.pana-dir-container, .pana-dir-hero__inner{ box-sizing: content-box; }

/* ══════ TITRES MODELE SECTIONS + trait Calendrier (2026-07-16) ══════ */
/* Trait bleu sous le titre Calendrier (parité avec Contact). */
.pana-cal__titre::after{ content: ""; display: block; width: 36px; height: 4px; border-radius: 999px; background: var(--pv-bleu); margin-top: 14px; }
/* Titres de pages calibrés sur le hero de /sections/ (graisse, chasse, interligne). */
.pana-ct__titre, .pana-na__titre, .pana-cal__titre, .pna-blog__titre{
	font-weight: 950;
	letter-spacing: -.062em;
	line-height: .93;
}

/* ══════ BLOC TELECHARGEMENT APP (PWA · home, 2026-07-16) ══════ */
.pana-accueil__app{
	background: linear-gradient(120deg, var(--pv-navy, #0A1628) 0%, #12233F 58%, #0E2A55 100%);
	position: relative; overflow: hidden;
}
.pana-accueil__app::before{ /* halos décoratifs */
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(circle at 82% 20%, rgba(28,86,229,.28), transparent 42%),
	            radial-gradient(circle at 8% 90%, rgba(255,107,26,.14), transparent 38%);
}
.pna-app-dl{
	position: relative; z-index: 1;
	display: grid; grid-template-columns: minmax(0, 1fr) 250px;
	gap: clamp(1.6rem, 4vw, 64px); align-items: center;
}
.pna-app-dl__eyebrow{ margin: 0 0 10px; color: #8FB0FF; font-size: 12.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .14em; }
.pna-app-dl__titre{ margin: 0 0 12px; color: #fff; font-size: clamp(24px, 2.4vw, 36px); letter-spacing: -.045em; line-height: .98; font-weight: 900; }
.pna-app-dl__lead{ margin: 0 0 16px; color: rgba(255,255,255,.82); font-size: 15.5px; line-height: 1.6; max-width: 560px; }
.pna-app-dl__points{ list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pna-app-dl__points li{ position: relative; padding-left: 30px; color: rgba(255,255,255,.9); font-size: 15px; font-weight: 600; }
.pna-app-dl__points li::before{
	content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 999px;
	background: var(--pv-bleu, #1C56E5);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat, linear-gradient(#000,#000);
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat, linear-gradient(#000,#000);
	-webkit-mask-composite: xor; mask-composite: exclude;
}
.pna-app-dl__actions{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pna-app-dl__btn{
	display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px;
	border: 0; border-radius: 999px; cursor: pointer;
	background: #fff; color: var(--pv-navy, #0A1628);
	font: inherit; font-weight: 900; font-size: 15.5px;
	box-shadow: 0 14px 34px -12px rgba(0,0,0,.45);
	transition: transform .2s ease, box-shadow .2s ease;
}
.pna-app-dl__btn:hover{ transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(0,0,0,.5); }
.pna-app-dl__hint{ color: rgba(255,255,255,.6); font-size: 12.5px; max-width: 300px; }
.pna-app-dl__qrzone{ text-align: center; justify-self: center; }
.pna-app-dl__cadre{
	position: relative; display: inline-block; padding: 14px; background: #fff; border-radius: 24px;
	box-shadow: 0 26px 70px -20px rgba(0,0,0,.55);
}
.pna-app-dl__cadre::before, .pna-app-dl__cadre::after{ /* coins bleus stylisés */
	content: ""; position: absolute; width: 28px; height: 28px; border: 4px solid var(--pv-bleu, #1C56E5); border-radius: 10px;
}
.pna-app-dl__cadre::before{ top: -10px; left: -10px; border-right: 0; border-bottom: 0; }
.pna-app-dl__cadre::after{ bottom: -10px; right: -10px; border-left: 0; border-top: 0; }
.pna-app-dl__cadre img{ display: block; width: 172px; height: 172px; border-radius: 10px; }
.pna-app-dl__scan{ margin: 14px 0 0; color: rgba(255,255,255,.75); font-size: 13.5px; font-weight: 700; letter-spacing: .02em; }
@media (max-width: 880px){
	.pna-app-dl{ grid-template-columns: 1fr; text-align: left; }
	.pna-app-dl__qrzone{ justify-self: start; }
}
@media (max-width: 560px){
	.pna-app-dl__qrzone{ display: none; } /* sur téléphone : on installe directement, le QR est inutile */
}

/* ══ ALIGNEMENT HERO = CONTENU (2026-07-16) ══
   .pv-wrap est content-box par héritage → le padding 28 s ajoutait au max-width 1240
   et le hero débordait de 56px vs les sections (1184). border-box = contenu utile 1184,
   bords alignés avec le header pill et les bandes actus/app à toutes les tailles. */
.pv-hero .pv-wrap.pv-hero__inner { box-sizing: border-box; }

/* ══ ALIGNEMENT GLOBAL 1184 (2026-07-16) ══
   La maquette (.container 1240 + padding 28, border-box) donne un CONTENU de 1184px.
   Les wraps du site etaient en content-box (defaut) → contenu 1240, soit 56px plus
   large que le header pill (1184). Border-box partout : contenu = 1184 = header,
   titres et grilles alignes au pixel avec le pill sur TOUTES les pages. */
.pv-wrap,
.pana-ct__wrap, .pana-na__wrap, .pana-cal__wrap,
.pana-dir-container, .pana-dir-hero__inner{ box-sizing: border-box; }

/* Citation hero agrandie : un peu plus de largeur pour garder ~2 lignes. */
.pv-hero__devise{ max-width: 430px; }

/* ============================================================================
   BANDEAU « NOS PARTENAIRES » · accueil (15/07) : bloc BLANC entre le bloc
   Application (QR code) et l'appel à l'action Inscriptions. Logos en niveaux
   de gris, couleur au survol (même traitement que les partenaires des fiches
   sections). Sans partenaire, le bloc dynamique rend vide et la section
   blanche du gabarit se masque toute seule.
   ========================================================================== */
.pana-accueil__partenaires:not(:has(.pv-partners)) { display: none; }
.pv-partners__titre { margin-bottom: 26px; }
.pv-partners__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 18px 26px; align-items: center;
}
.pv-partners__item {
  display: flex; align-items: center; justify-content: center;
  min-height: 96px; padding: 10px 14px; border-radius: 12px;
}
.pv-partners__item img {
  max-width: 100%; max-height: 76px; width: auto; height: auto; object-fit: contain;
  filter: grayscale(1); opacity: .78;
  transition: filter .2s ease, opacity .2s ease, transform .2s ease;
}
.pv-partners__item:hover img, .pv-partners__item:focus-visible img {
  filter: none; opacity: 1; transform: translateY(-2px);
}
a.pv-partners__item:focus-visible { outline: 3px solid var(--pv-bleu); outline-offset: 2px; }
@media (max-width: 620px) { .pv-partners__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .pv-partners__item img { transition: none; } }