/* ============================================================
   PARIS | Design system
   Thème : azur et gueules du blason, pierre de taille et zinc des toits
   Polices : Newsreader (titres) › Figtree (corps)
   ============================================================ */

/* ============================================================
   1. VARIABLES
   ============================================================ */
:root {
  /* Couleurs | azur et gueules du blason de Paris, pierre de taille, zinc des toits */
  --bleu:         #1E3572;   /* azur du chef, couleur principale */
  --bleu-fonce:   #14224B;
  --bleu-clair:   #47619E;
  --bleu-pale:    #E8EBF4;
  --rouge:        #A8283C;   /* gueules du blason, accent */
  --rouge-clair:  #C9435A;
  --rouge-pale:   #F7E9EC;
  --or:           #B08A2E;   /* fleurs de lys d'or */
  --or-clair:     #E8C66A;
  --or-pale:      #F6EFDD;
  --zinc:         #6F7B87;   /* zinc des toits */
  --zinc-clair:   #AFB8C1;
  --zinc-pale:    #E6E9EC;
  --pierre:       #E4D9C4;   /* pierre de taille */
  --encre:        #1C2333;   /* bleu nuit, texte fort */
  --encre-nuit:   #10141F;
  --texte:        #232A38;
  --texte-doux:   #6B7382;
  --fond:         #F7F4EE;   /* blanc pierre */
  --fond-alt:     #EDE7DB;
  --blanc:        #FFFFFF;
  --bord:         rgba(28, 35, 51, 0.13);
  --ombre:        rgba(28, 35, 51, 0.10);

  /* Typographie */
  --titre: 'Newsreader', Georgia, 'Times New Roman', serif;
  --corps: 'Figtree', system-ui, -apple-system, sans-serif;

  /* Mesures */
  --arrondi:    10px;
  --arrondi-lg: 18px;
  --largeur:    1200px;
  --ecart:      1.5rem;

  --transi: 0.25s ease;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 18px; }

body {
  font-family: var(--corps);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--texte);
  background: var(--fond);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--bleu); text-decoration: none; transition: color var(--transi); }
a:hover { color: var(--rouge); }
ul { list-style: none; }

/* ============================================================
   3. TYPOGRAPHIE
   ============================================================ */
h1, h2, h3 { font-family: var(--titre); line-height: 1.22; color: var(--encre); font-weight: 600; }
h4, h5, h6 { font-family: var(--corps); font-weight: 800; color: var(--encre); }

h1 { font-size: clamp(1.95rem, 4vw, 2.85rem); font-weight: 600; letter-spacing: -0.015em; }
h2 { font-size: clamp(1.45rem, 3vw, 2rem); font-weight: 600; margin-bottom: 1rem; }
h3 { font-size: clamp(1.12rem, 2vw, 1.38rem); font-weight: 600; margin-bottom: 0.6rem; }
h4 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.75rem; }

p { margin-bottom: 1.1rem; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; color: var(--encre); }

/* Décoration des h2 dans le corps d'article : filet bicolore azur + or */
.pa-contenu h2 {
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--bleu-pale);
  margin-top: 2.5rem;
  margin-bottom: 1.25rem;
}
.pa-contenu h2::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 0.95em;
  background: linear-gradient(180deg, var(--bleu) 50%, var(--or) 50%);
  border-radius: 3px;
  margin-right: 0.6rem;
  vertical-align: middle;
  position: relative;
  top: -2px;
}
.pa-contenu h3 { margin-top: 1.75rem; color: var(--bleu); }
.pa-contenu ul, .pa-contenu ol { margin: 0 0 1.1rem 1.4rem; }
.pa-contenu li { margin-bottom: 0.35rem; }
.pa-contenu ul { list-style: disc; }
.pa-contenu ol { list-style: decimal; }
.pa-contenu a { color: var(--bleu); text-decoration: underline; text-underline-offset: 2px; }
.pa-contenu a:hover { color: var(--rouge); }

/* ============================================================
   4. STRUCTURE
   ============================================================ */
.pa-conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.pa-section { padding: 4rem 0; }
.pa-section--claire  { background: var(--fond-alt); }
.pa-section--blanche { background: var(--blanc); }
.pa-section--bleue   { background: var(--bleu); color: var(--blanc); }

.pa-titre-section { text-align: center; margin-bottom: 2.5rem; }
.pa-titre-section h2 { display: inline-block; position: relative; }
/* Filet bicolore : moitié bleue, moitié rouge */
.pa-titre-section h2::after {
  content: '';
  display: block;
  width: 72px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--bleu) 50%, var(--rouge) 50%);
  margin: 0.55rem auto 0;
}
.pa-titre-section--gauche { text-align: left; margin-bottom: 1.75rem; }
.pa-titre-section--gauche h2::after { margin: 0.55rem 0 0; }
.pa-soustitre { color: var(--texte-doux); margin-top: 0.5rem; font-size: 0.95rem; }

/* ============================================================
   5. BANDEAU D'AVERTISSEMENT (haut de page)
   ============================================================ */
.pa-bandeau {
  position: relative;
  z-index: 1001;
  background: var(--encre-nuit);
  padding: 0.5rem 1.5rem;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
  line-height: 1.5;
  letter-spacing: 0.015em;
}
.pa-bandeau-point {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--rouge);
  margin-right: 0.5rem;
  vertical-align: middle;
}

/* ============================================================
   6. EN-TÊTE & MENU
   ============================================================ */
.pa-entete {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bord);
  transition: box-shadow var(--transi);
}
.pa-entete--fixee { box-shadow: 0 4px 24px rgba(28,35,51,0.14); }

.pa-entete-ligne {
  /* L'en-tete deborde volontairement le gabarit du contenu : dix rubriques
     demandent plus de place que les 1200 px du corps de page, et sans cette
     largeur la barre se replie sur deux lignes des 1440 px. */
  max-width: 1400px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 74px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Le logo est une image : hauteur fixe, largeur automatique.
   Les attributs width/height du <img> réservent la place et évitent le saut de page. */
.pa-logo { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; flex-shrink: 0; }
.pa-logo-img { height: 50px; width: auto; display: block; }

/* Logo typographique : pas de fichier image, le nom du site vient de SITE_NOM.
   La marque est une fleur de lys d'or sur l'azur du chef du blason. */
.pa-logo-marque {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 9px;
  background: var(--bleu);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
}
.pa-logo-marque svg { width: 24px; height: 24px; fill: var(--or-clair); display: block; }
.pa-logo-mot { display: flex; flex-direction: column; line-height: 1.05; }
.pa-logo-nom {
  font-family: var(--titre); font-size: 1.42rem; font-weight: 600;
  color: var(--encre); letter-spacing: -0.015em;
}
.pa-logo-sous {
  font-family: var(--corps); font-size: 0.6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--zinc);
  margin-top: 0.12rem;
}
.pa-pied .pa-logo-marque { background: rgba(255,255,255,0.1); }
.pa-pied .pa-logo-nom { color: var(--blanc); }
.pa-pied .pa-logo-sous { color: var(--zinc-clair); }

.pa-nav { display: flex; align-items: center; margin-left: auto; }
.pa-nav-liste {
  display: flex; align-items: center; gap: 0;
  /* Sans repli, une rubrique de plus sort de l'ecran sans que rien ne le
     signale : le menu ne deborde pas la page, il se fait couper. Le repli
     rend la onzieme rubrique visible sur les ecrans etroits. */
  flex-wrap: wrap; justify-content: flex-end;
}

.pa-nav-lien {
  display: block;
  padding: 0.45rem 0.36rem;
  font-size: 0.70rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--encre);
  border-radius: var(--arrondi);
  transition: color var(--transi), background var(--transi);
  white-space: nowrap;
}
.pa-nav-lien:hover, .pa-nav-lien.est-actif { color: var(--bleu); background: var(--bleu-pale); }
.pa-nav-fleche { font-size: 0.55rem; margin-left: 1px; opacity: 0.6; }

.pa-nav-item--deroulant { position: relative; }
.pa-sousmenu {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 244px;
  background: var(--blanc);
  border-radius: var(--arrondi);
  box-shadow: 0 12px 40px rgba(28,35,51,0.20);
  border-top: 3px solid var(--rouge);
  padding: 0.5rem 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transi), transform var(--transi);
}

/* Seize entrees en colonne unique font un sous-menu de 578 px de haut, qui
   passe sous la ligne de flottaison d'un portable. On les repartit sur deux
   colonnes. Cette regle doit venir APRES .pa-sousmenu : a specificite egale,
   c'est la derniere declaree qui l'emporte, et min-width serait sinon ramene
   a 244 px sans que rien ne le signale. */
.pa-sousmenu--large { min-width: 470px; columns: 2; column-gap: 0.5rem; }
.pa-sousmenu--large li { break-inside: avoid; }
.pa-nav-item--deroulant:hover .pa-sousmenu,
.pa-nav-item--deroulant:focus-within .pa-sousmenu {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.pa-sousmenu li a {
  display: block;
  padding: 0.45rem 1.1rem;
  font-size: 0.88rem;
  color: var(--texte);
  transition: background var(--transi), color var(--transi), padding var(--transi);
}
.pa-sousmenu li a:hover { background: var(--bleu-pale); color: var(--bleu); padding-left: 1.4rem; }

.pa-cta-entete {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: 0.85rem;
  padding: 0.55rem 0.95rem;
  background: var(--rouge);
  color: var(--blanc);
  font-size: 0.78rem;
  font-weight: 800;
  border-radius: var(--arrondi);
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(196,32,50,0.30);
  transition: background var(--transi), transform var(--transi);
  flex-shrink: 0;
}
.pa-cta-entete:hover { background: var(--bleu); color: var(--blanc); transform: translateY(-1px); }
.pa-cta-entete svg { width: 16px; height: 16px; flex-shrink: 0; }

.pa-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: none; border: none; cursor: pointer;
  padding: 0.5rem;
}
.pa-burger span {
  display: block; width: 22px; height: 2px;
  background: var(--encre); border-radius: 2px;
  transition: transform var(--transi), opacity var(--transi);
}
.pa-burger.est-ouvert span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pa-burger.est-ouvert span:nth-child(2) { opacity: 0; }
.pa-burger.est-ouvert span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   7. COUVERTURE (bandeau des pages intérieures)
   ============================================================ */
.pa-couverture {
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.pa-couverture-photo {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  background-color: var(--encre);
  transform: scale(1.03);
  transition: transform 0.6s ease;
}
.pa-couverture:hover .pa-couverture-photo { transform: scale(1); }
.pa-couverture-voile {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,22,38,0.94) 0%, rgba(28,35,51,0.68) 45%, rgba(28,35,51,0.20) 100%);
}
.pa-couverture-texte {
  position: relative; z-index: 1;
  padding: 2.5rem 1.25rem;
  width: 100%; max-width: var(--largeur);
  margin: 0 auto;
}
.pa-surtitre {
  display: inline-block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #E8C66A;
  font-weight: 800;
  margin-bottom: 0.6rem;
}
.pa-couverture h1 { color: var(--blanc); margin-bottom: 0.75rem; }
.pa-couverture-accroche {
  color: rgba(255,255,255,0.87);
  font-size: 1.05rem; max-width: 660px; line-height: 1.65; margin-bottom: 0;
}
/* Un bandeau très large et très bas écrase la photo : on lui donne de la hauteur,
   d'autant plus que l'écran est large. */
.pa-couverture--courte { min-height: 340px; }
@media (min-width: 1100px) {
  .pa-couverture { min-height: 440px; }
  .pa-couverture--courte { min-height: 380px; }
}
@media (max-width: 600px) {
  .pa-couverture { min-height: 320px; }
  .pa-couverture--courte { min-height: 260px; }
}

/* ------------------------------------------------------------------
   Illustration en cours d'article | photo + légende + crédit
   ------------------------------------------------------------------ */
.pa-illustration { margin: 2rem 0; }
.pa-illustration img {
  width: 100%; height: auto; display: block;
  border-radius: var(--arrondi);
  border: 1px solid var(--bord);
}
.pa-illustration figcaption {
  margin-top: 0.55rem;
  font-size: 0.85rem; line-height: 1.5; color: var(--texte-doux);
}
.pa-illustration figcaption b { color: var(--encre); font-weight: 700; }
.pa-illustration-credit { display: block; font-size: 0.75rem; opacity: 0.8; margin-top: 0.15rem; }

/* Mention RGE dans une liste de professionnels */
.pa-pro-rge {
  display: inline-block; margin-top: 0.25rem;
  padding: 0.12rem 0.45rem; border-radius: 3px;
  background: #E4F3EA; color: #1F7A46;
  font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em;
}

/* ------------------------------------------------------------------
   Film libre de droits, servi depuis notre serveur.
   preload="none" : rien n'est téléchargé tant que le visiteur ne lance pas
   la lecture. Aucun service tiers, donc aucun cookie.
   ------------------------------------------------------------------ */
.pa-film { margin: 2rem 0; }
.pa-film video {
  width: 100%; height: auto; display: block;
  background: #000;
  border-radius: var(--arrondi);
  border: 1px solid var(--bord);
}
.pa-film figcaption { margin-top: 0.55rem; font-size: 0.85rem; line-height: 1.5; color: var(--texte-doux); }
.pa-film figcaption b { color: var(--encre); font-weight: 700; }

/* Deux photos côte à côte (elles se remettent l'une sous l'autre sur mobile) */
.pa-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0; }
.pa-duo .pa-illustration { margin: 0; }
/* Deux photos côte à côte doivent avoir la même hauteur, sinon la ligne se tord. */
.pa-duo .pa-illustration img { aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 700px) { .pa-duo { grid-template-columns: 1fr; } }

/* ============================================================
   8. FIL D'ARIANE
   ============================================================ */
.pa-ariane-zone {
  background: var(--fond-alt);
  border-bottom: 1px solid var(--bord);
  padding: 0.6rem 0;
}
.pa-ariane ol { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; font-size: 0.8rem; }
.pa-ariane li { display: flex; align-items: center; gap: 0.25rem; color: var(--texte-doux); }
.pa-ariane li:not(:last-child)::after { content: '›'; opacity: 0.5; }
.pa-ariane li a { color: var(--texte-doux); }
.pa-ariane li a:hover { color: var(--bleu); }
.pa-ariane li:last-child { color: var(--texte); font-weight: 700; }

/* ============================================================
   9. CORPS D'ARTICLE + COLONNE LATÉRALE
   ============================================================ */
.pa-page {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 2.5rem;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 3rem 1.25rem;
  align-items: start;
}
/* Page sans colonne latérale (sujets courts : une enseigne, un service) */
.pa-page--simple { grid-template-columns: minmax(0, 820px); justify-content: center; }
.pa-contenu { min-width: 0; }
.pa-contenu > p:first-of-type { font-size: 1.08rem; }

/* Date de dernière mise à jour, en tête de contenu */
.pa-contenu > p.pa-maj {
  font-size: 0.82rem;
  color: var(--texte-doux);
  margin: 0 0 1.3rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--bord);
}
.pa-maj time { font-weight: 600; color: var(--texte); }

.pa-chapeau {
  font-size: 1.12rem !important;
  color: var(--texte);
  line-height: 1.7;
  border-left: 3px solid var(--rouge);
  padding-left: 1.1rem;
  margin-bottom: 1.6rem;
}

/* min-width: 0 sur les DEUX colonnes de la grille, pas seulement sur
   l'article. Sans lui, un enfant plus large que la colonne (un tableau,
   une image) impose sa largeur minimale a la grille entiere et pousse la
   page hors de l'ecran. C'est la cause la plus commune d'un debordement
   horizontal sur mobile, et elle ne se voit pas dans le HTML. */
.pa-colonne { position: sticky; top: 130px; min-width: 0; }
.pa-bloc {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--arrondi);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 2px 12px var(--ombre);
}
.pa-bloc:first-child { border-top: 3px solid var(--bleu); }
.pa-bloc h4 { color: var(--bleu); margin-bottom: 0.75rem; }

.pa-bloc-liens { display: flex; flex-direction: column; gap: 0.35rem; }
.pa-bloc-liens a {
  font-size: 0.88rem; color: var(--texte);
  padding: 0.25rem 0.5rem 0.25rem 1rem;
  border-radius: 4px; display: block; position: relative;
  transition: background var(--transi), color var(--transi);
}
.pa-bloc-liens a::before { content: '›'; position: absolute; left: 0.35rem; color: var(--rouge); }
.pa-bloc-liens a:hover { background: var(--fond-alt); color: var(--bleu); }

.pa-bloc-cta {
  background: var(--encre);
  color: var(--blanc);
  border-radius: var(--arrondi);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.pa-bloc-cta h4 { color: var(--blanc); margin-bottom: 0.5rem; }
.pa-bloc-cta p { font-size: 0.88rem; opacity: 0.85; margin-bottom: 1rem; }
.pa-bloc-cta a {
  display: inline-block; background: var(--rouge); color: var(--blanc);
  padding: 0.5rem 1rem; border-radius: var(--arrondi);
  font-size: 0.85rem; font-weight: 800; transition: background var(--transi);
}
.pa-bloc-cta a:hover { background: var(--rouge-clair); color: var(--blanc); }

/* ============================================================
   10. COMPOSANTS ÉDITORIAUX
   ============================================================ */
.pa-note {
  background: var(--bleu-pale);
  border-left: 4px solid var(--bleu);
  border-radius: 0 var(--arrondi) var(--arrondi) 0;
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
}
.pa-note h3 { color: var(--bleu); margin: 0 0 0.5rem; }

.pa-apercu {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-top: 4px solid var(--rouge);
  border-radius: var(--arrondi);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
}
.pa-apercu h3 { color: var(--rouge); margin: 0 0 0.5rem; }

.pa-avertissement {
  background: #FFF6E5;
  border-left: 4px solid #D99400;
  border-radius: 0 var(--arrondi) var(--arrondi) 0;
  padding: 1rem 1.25rem;
  margin: 0 0 2rem;
  font-size: 0.88rem;
  color: var(--texte);
}
.pa-avertissement strong { color: #8A5E00; }

/* Fiche établissement */
.pa-fiche {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-left: 4px solid var(--bleu);
  border-radius: var(--arrondi);
  padding: 1.25rem 1.5rem;
  margin: 1.25rem 0;
  box-shadow: 0 2px 8px var(--ombre);
}
.pa-fiche h3 { color: var(--encre); margin: 0 0 0.5rem; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.pa-fiche-rang {
  font-family: var(--titre);
  font-size: 0.95rem; font-weight: 700;
  color: var(--blanc); background: var(--bleu);
  width: 1.7em; height: 1.7em; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.pa-fiche p { margin-bottom: 0.4rem; font-size: 0.92rem; }
.pa-fiche p:last-child { margin-bottom: 0; }
.pa-fiche-meta { color: var(--texte-doux); font-size: 0.85rem; }
.pa-fiche-etiquette {
  display: inline-block; font-size: 0.7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--rouge); background: var(--rouge-pale);
  padding: 0.1rem 0.55rem; border-radius: 20px; margin-left: 0.35rem;
}

/* Cartes chiffres */
.pa-nombres { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.75rem 0; }
.pa-nombre {
  flex: 1; min-width: 140px;
  background: var(--bleu-pale);
  border: 1px solid var(--bord);
  border-radius: var(--arrondi-lg);
  padding: 1.15rem 1rem; text-align: center;
}
.pa-nombre-val { display: block; font-family: var(--titre); font-size: 2rem; font-weight: 700; color: var(--bleu); line-height: 1.05; overflow-wrap: break-word; word-break: break-word; hyphens: auto; }
.pa-nombre-lib { display: block; font-size: 0.8rem; color: var(--texte-doux); margin-top: 0.3rem; line-height: 1.3; }
.pa-nombre--rouge { background: var(--rouge-pale); }
.pa-nombre--rouge .pa-nombre-val { color: var(--rouge); }
.pa-nombre--neutre { background: var(--fond-alt); }
.pa-nombre--neutre .pa-nombre-val { color: var(--encre); }
/* Sur mobile, un nombre a sept chiffres (2 103 778) ou un telephone se coupait en deux lignes
   dans une carte de 140 px : une carte par ligne, et le chiffre ne se coupe plus. */
@media (max-width: 520px) { .pa-nombre { flex: 1 1 100%; } .pa-nombre-val { white-space: nowrap; } }

/* Prochaine prière | bandeau du jour, /heures-de-priere-a-paris/ */
.pa-prochaine {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.9rem;
  background: var(--bleu-pale); border: 1px solid var(--bord);
  border-left: 4px solid var(--bleu); border-radius: var(--arrondi-lg);
  padding: 0.9rem 1.15rem; margin: 1.5rem 0;
}
.pa-prochaine-lib {
  width: 100%; font-size: 0.78rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--texte-doux);
}
.pa-prochaine-nom { font-family: var(--titre); font-size: 1.45rem; font-weight: 700; color: var(--bleu); }
.pa-prochaine-h { font-family: var(--titre); font-size: 1.45rem; font-weight: 700; color: var(--rouge); }
.pa-prochaine-reste { font-size: 0.95rem; color: var(--texte-doux); }

/* FAQ statique */
.pa-faq {
  border: 1px solid var(--bord);
  border-radius: var(--arrondi);
  padding: 1.1rem 1.4rem;
  margin: 1.25rem 0;
  background: var(--blanc);
}
.pa-faq h3 { color: var(--bleu); margin: 0 0 0.6rem; font-size: 1.02rem; }
.pa-faq p { margin: 0; }

/* Tableaux */
.pa-tableau-zone { overflow-x: auto; margin: 1.5rem 0; }
.pa-tableau { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.pa-tableau th {
  background: var(--bleu); color: var(--blanc);
  text-align: left; padding: 0.7rem 1rem; font-weight: 700;
}
.pa-tableau td { padding: 0.6rem 1rem; border-bottom: 1px solid var(--bord); vertical-align: top; }
.pa-tableau tr:last-child td { border-bottom: none; }
.pa-tableau tr:nth-child(even) td { background: var(--fond-alt); }

/* Carte Leaflet */
.pa-carte {
  height: 420px; width: 100%;
  border-radius: var(--arrondi-lg);
  border: 1px solid var(--bord);
  box-shadow: 0 4px 18px var(--ombre);
  margin: 1.5rem 0;
  z-index: 0;
}
.pa-carte-legende { font-size: 0.82rem; color: var(--texte-doux); margin: -0.5rem 0 1.5rem; }
/* La meme legende sert de <caption> de tableau : le navigateur la place en haut et
   la centre par defaut, il faut donc la ramener sous le tableau et a gauche. */
caption.pa-carte-legende { caption-side: bottom; text-align: left; margin: 0.6rem 0 0; }

/* Cartes qui demandent plus de hauteur : reseau de metro, pharmacies, plan de ville. */
.pa-carte--haute { height: 520px; }

/* Utilitaires de mise en page, en remplacement d'attributs style dans le HTML. */
.pa-titre-espace { margin-bottom: 1.2rem; }
.pa-para-espace { margin-top: 2rem; }
.pa-mention { font-size: 0.85rem; color: var(--texte-doux); }
.pa-courriel-ligne { font-size: 1.15rem; }
.pa-champ-court { max-width: 120px; }
.pa-calc-verdict--colle { margin-top: 0; }
.pa-calc-option-nom-large { font-size: 1.05rem; line-height: 1.3; }

/* ------------------------------------------------------------------
   Pastilles de legende : la couleur porte l'information, elle doit donc
   correspondre exactement a celle du point sur la carte. On la nomme ici
   plutot que de la repeter en attribut style dans chaque page.
   ------------------------------------------------------------------ */
.pa-puce-rouge  { color: #A8283C; }
.pa-puce-bleue  { color: #1E3572; }
.pa-puce-verte  { color: #1A7A3C; }
.pa-puce-orange { color: #D99400; }
/* Pharmacies : vert de garde et rouge des officines ouvertes en continu. */
.pa-puce-pharma { color: #1F7A46; }
/* Couleurs officielles des quatre lignes du metro lyonnais. */
.pa-ligne-a { color: #A8283C; }
.pa-ligne-b { color: #2C4A8E; }
.pa-ligne-c { color: #E88C00; }
.pa-ligne-d { color: #0F8A4D; }

/* Verdicts colores : le liseré gauche resume la conclusion d'un calculateur. */
.pa-calc-verdict--rouge  { border-left-color: #A8283C; }
.pa-calc-verdict--orange { border-left-color: #D99400; }
.pa-calc-verdict--bleu   { border-left-color: #1E3572; }
.pa-calc-verdict--vert   { border-left-color: #1F7A46; }

/* Fiabilite d'une prevision meteo, de la plus sure a la plus incertaine. */
.pa-fiab-1 { color: #1F7A46; }
.pa-fiab-2 { color: #1E3572; }
.pa-fiab-3 { color: #D99400; }
.pa-fiab-4 { color: #A8283C; }

/* ------------------------------------------------------------------
   Pastilles numerotees posees sur les cartes Leaflet. Elles sont creees
   en JavaScript : sans ces classes, tout leur habillage se retrouverait
   ecrit en clair dans un attribut style.
   ------------------------------------------------------------------ */
.pa-pin {
  color: #fff; border: 2px solid #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.pa-pin--num { background: #1E3572; min-width: 30px; height: 30px; padding: 0 5px; border-radius: 15px; font: 800 12px Figtree, sans-serif; }
.pa-pin--cp { background: #1E3572; padding: 3px 7px; border-radius: 12px; white-space: nowrap; font: 800 11px Figtree, sans-serif; }
.pa-pin--etape { background: #A8283C; width: 26px; height: 26px; border-radius: 50%; font: 700 13px Figtree, sans-serif; }

/* ------------------------------------------------------------------
   PASTILLES DE LIGNE (metro, RER, tramway)
   La couleur vient du referentiel d'Ile-de-France Mobilites et arrive
   en attribut style depuis inc/lignes.php : elle porte l'information,
   elle ne se decide pas ici. Ce bloc ne gere que la forme.
   ------------------------------------------------------------------ */
.pa-lig {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--corps); font-weight: 800; letter-spacing: -0.01em;
  line-height: 1; vertical-align: middle;
  border: 1px solid rgba(0,0,0,0.12);
}
.pa-lig--metro { min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; font-size: 0.8rem; }
.pa-lig--rer   { min-width: 26px; height: 26px; padding: 0 6px; border-radius: 6px;  font-size: 0.84rem; }
.pa-lig--tram  { min-width: 26px; height: 26px; padding: 0 7px; border-radius: 4px;  font-size: 0.74rem; }
.pa-lig-lien { display: inline-block; text-decoration: none; margin: 0 3px 3px 0; }
.pa-lig-lien:hover .pa-lig { box-shadow: 0 0 0 2px var(--blanc), 0 0 0 4px var(--bleu); }
.pa-contenu .pa-lig-lien { text-decoration: none; }
.pa-lig-serie { display: inline-flex; flex-wrap: wrap; gap: 3px; vertical-align: middle; }

/* Grille des seize lignes : une carte par ligne, pastille + terminus. */
.pa-reseau {
  display: grid; gap: 0.7rem;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  margin: 1.6rem 0;
}
.pa-reseau-ligne {
  display: flex; align-items: center; gap: 0.7rem;
  background: var(--blanc); border: 1px solid var(--bord);
  border-radius: var(--arrondi); padding: 0.7rem 0.85rem;
  text-decoration: none; transition: transform var(--transi), box-shadow var(--transi);
}
.pa-reseau-ligne:hover { transform: translateY(-2px); box-shadow: 0 6px 18px var(--ombre); }
.pa-reseau-ligne .pa-lig { flex-shrink: 0; }
.pa-reseau-corps { display: flex; flex-direction: column; min-width: 0; }
.pa-reseau-terminus {
  font-size: 0.78rem; color: var(--texte-doux); line-height: 1.35;
  overflow-wrap: anywhere;
}
.pa-reseau-nb { font-size: 0.72rem; font-weight: 700; color: var(--zinc); text-transform: uppercase; letter-spacing: 0.05em; }
.pa-contenu .pa-reseau-ligne { text-decoration: none; }


/* Ligne de prevision sur 15 jours : jour, temperatures, pluie, fiabilite. */
.pa-prev-ligne { align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.pa-prev-jour { flex: 1 1 150px; text-transform: capitalize; }
.pa-prev-emoji { font-size: 1.2rem; margin-right: 0.4rem; }
.pa-prev-temp { flex: 0 0 auto; color: var(--texte); font-weight: 700; }
.pa-prev-pluie { flex: 0 0 70px; text-align: right; font-size: 0.85rem; }
.pa-prev-fiab { flex: 0 0 110px; text-align: right; font-size: 0.75rem; font-weight: 800; }
.pa-prev-liste { margin: 0; }

/* Graphiques */
.pa-graphe {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--arrondi-lg);
  padding: 1.25rem 1.35rem;
  margin: 1.5rem 0;
  box-shadow: 0 2px 12px var(--ombre);
}
.pa-graphe h3 { margin: 0 0 0.9rem; font-size: 1.05rem; color: var(--bleu); }
/* Chart.js en maintainAspectRatio:false prend la hauteur de son parent :
   le canvas DOIT être enveloppé dans .pa-graphe-toile, sinon il s'étire à l'infini. */
.pa-graphe-toile { position: relative; height: 340px; width: 100%; }
@media (max-width: 768px) { .pa-graphe-toile { height: 280px; } }

/* Barres comparatives (CSS pur) */
.pa-barres { display: flex; flex-direction: column; gap: 0.7rem; margin: 1.5rem 0; }
.pa-barre-ligne { display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 0.75rem; font-size: 0.85rem; }
.pa-barre-piste { background: var(--fond-alt); border-radius: 20px; height: 22px; overflow: hidden; }
.pa-barre-jauge { display: block; min-width: 3px; height: 100%; border-radius: 20px; background: linear-gradient(90deg, var(--bleu-fonce), var(--bleu-clair)); }
.pa-barre-jauge--rouge { background: linear-gradient(90deg, var(--rouge), var(--rouge-clair)); }
.pa-barre-val { font-weight: 800; color: var(--encre); white-space: nowrap; }

/* Liste à coches */
.pa-coches { list-style: none !important; margin-left: 0 !important; }
.pa-coches li { position: relative; padding-left: 1.9rem; margin-bottom: 0.6rem; }
.pa-coches li::before {
  content: ''; position: absolute; left: 0.15rem; top: 0.42em;
  width: 15px; height: 8px;
  border-left: 2px solid var(--rouge); border-bottom: 2px solid var(--rouge);
  transform: rotate(-45deg);
}

/* ---- Calculateur / simulateur interactif (réutilisable) ---- */
.pa-calc {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-top: 4px solid var(--rouge);
  border-radius: var(--arrondi-lg);
  padding: 1.5rem;
  margin: 1.75rem 0;
  box-shadow: 0 4px 18px var(--ombre);
}
.pa-calc h3 { margin: 0 0 0.35rem; color: var(--encre); }
.pa-calc-intro { font-size: 0.88rem; color: var(--texte-doux); margin-bottom: 1.25rem; }
.pa-calc-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin-bottom: 1.4rem; }
.pa-calc-champ label { display: block; font-weight: 700; font-size: 0.85rem; color: var(--encre); margin-bottom: 0.4rem; }
.pa-calc-champ select,
.pa-calc-champ input[type="number"],
.pa-calc-champ input[type="search"],
.pa-calc-champ input[type="date"],
.pa-calc-champ input[type="text"] {
  width: 100%; font-family: var(--corps); font-size: 0.95rem; color: var(--texte);
  background: var(--fond); border: 1px solid var(--bord); border-radius: var(--arrondi);
  padding: 0.6rem 0.75rem; cursor: pointer;
}
/* Safari et iOS ignorent la hauteur d'un champ date et le laissent depasser sa boite. */
.pa-calc-champ input[type="date"] {
  -webkit-appearance: none; appearance: none;
  min-height: 2.6rem; line-height: 1.35;
}
.pa-calc-champ select:focus, .pa-calc-champ input:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px var(--bleu-pale); }
/* Un champ texte n'est pas un menu deroulant : curseur de saisie, pas de main. */
.pa-calc-champ input[type="search"], .pa-calc-champ input[type="text"] { cursor: text; -webkit-appearance: none; appearance: none; }
.pa-calc-champ input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
.pa-calc-curseur { display: flex; align-items: center; gap: 0.75rem; }
.pa-calc-curseur input[type="range"] { flex: 1; accent-color: var(--rouge); cursor: pointer; }
.pa-calc-valeur {
  font-family: var(--titre); font-weight: 700; font-size: 1.3rem; color: var(--bleu);
  min-width: 2.4em; text-align: center;
}

.pa-calc-sortie { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; }
.pa-calc-option {
  border: 1px solid var(--bord); border-radius: var(--arrondi);
  padding: 0.9rem 1rem; text-align: center; background: var(--fond);
  transition: background var(--transi), border-color var(--transi), transform var(--transi);
}
.pa-calc-option.est-conseille {
  background: var(--rouge-pale); border-color: var(--rouge); border-width: 2px;
  transform: translateY(-3px);
}
/* Variante cliquable : l'option est un bouton, elle doit inviter au clic. */
.pa-calc-option.est-clic { cursor: pointer; text-align: left; }
.pa-calc-option.est-clic:hover { border-color: var(--bleu); background: var(--blanc); transform: translateY(-2px); }
.pa-calc-option.est-clic:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }
/* Chaque élément d'une option occupe sa propre ligne : sans cela, le libellé
   et sa description se collent l'un à l'autre ("En trainJ'arrive à la gare"). */
.pa-calc-option > strong,
.pa-calc-option > span { display: block; }
.pa-calc-option-nom { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--texte-doux); }
.pa-calc-option.est-conseille .pa-calc-option-nom { color: var(--rouge); }
.pa-calc-option-prix { font-family: var(--titre); font-size: 1.7rem; font-weight: 700; color: var(--encre); line-height: 1.2; margin: 0.25rem 0 0.1rem; }
.pa-calc-option-detail { font-size: 0.78rem; color: var(--texte-doux); }
.pa-calc-verdict {
  margin-top: 1.25rem; padding: 0.9rem 1.1rem;
  background: var(--bleu-pale); border-left: 4px solid var(--bleu);
  border-radius: 0 var(--arrondi) var(--arrondi) 0;
  font-size: 0.92rem;
}
.pa-calc-verdict strong { color: var(--bleu); }
.pa-calc-note { font-size: 0.78rem; color: var(--texte-doux); margin-top: 1rem; font-style: italic; }

/* Liste a cocher dans un bloc outil : une ligne cliquable par item. */
.pa-calc-coches { list-style: none; margin: 0 0 1.3rem; padding: 0; display: grid; gap: 0.55rem; }
.pa-calc-coches li { margin: 0; }
.pa-calc-coches label {
  display: flex; align-items: flex-start; gap: 0.7rem; cursor: pointer;
  background: var(--fond); border: 1px solid var(--bord); border-radius: var(--arrondi);
  padding: 0.7rem 0.85rem; font-size: 0.94rem; line-height: 1.45;
  transition: background var(--transi), border-color var(--transi);
}
.pa-calc-coches label:hover { border-color: var(--bleu); }
.pa-calc-coches input[type="checkbox"] {
  flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin-top: 0.15rem;
  accent-color: var(--rouge); cursor: pointer;
}
.pa-calc-coches input[type="checkbox"]:checked + span { font-weight: 700; color: var(--encre); }
.pa-calc-coches label:has(input:checked) { background: var(--rouge-pale); border-color: var(--rouge); }
.pa-calc-verdict--alerte { background: var(--rouge-pale); border-left-color: var(--rouge); }
.pa-calc-verdict--alerte strong { color: var(--rouge); }

/* Pastilles lettrees sur une carte : la lettre du pavillon se lit sans cliquer. */
.pa-pav {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--bleu); color: #fff; border: 2px solid #fff;
  font-family: var(--titre); font-weight: 700; font-size: 0.82rem; line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.pa-pav--urgence { background: var(--rouge); width: 30px; height: 30px; font-size: 0.9rem; }
.pa-pav--repere { background: var(--encre); }

/* ---- Frise chronologique (réutilisable) ---- */
.pa-frise { position: relative; margin: 1.75rem 0 2rem; padding-left: 1.9rem; }
.pa-frise::before {
  content: ''; position: absolute; left: 6px; top: 0.5rem; bottom: 0.5rem;
  width: 2px; background: linear-gradient(180deg, var(--bleu), var(--rouge));
  border-radius: 2px;
}
.pa-frise-etape { position: relative; padding-bottom: 1.35rem; }
.pa-frise-etape:last-child { padding-bottom: 0; }
.pa-frise-etape::before {
  content: ''; position: absolute; left: -1.9rem; top: 0.45rem;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--blanc); border: 3px solid var(--bleu);
  box-shadow: 0 0 0 3px var(--fond);
}
.pa-frise-etape--fort::before { border-color: var(--rouge); background: var(--rouge); }
.pa-frise-date {
  display: inline-block; font-family: var(--titre); font-weight: 700;
  font-size: 1.05rem; color: var(--bleu); margin-right: 0.5rem;
}
.pa-frise-etape--fort .pa-frise-date { color: var(--rouge); }
.pa-frise-texte { font-size: 0.93rem; line-height: 1.6; }
.pa-frise-texte strong { color: var(--encre); }

/* ---- Test interactif à cocher (réutilisable) ---- */
.pa-test-liste { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 1.4rem; }
.pa-test-item {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  background: var(--fond); border: 1px solid var(--bord);
  border-radius: var(--arrondi); cursor: pointer;
  transition: background var(--transi), border-color var(--transi);
}
.pa-test-item:hover { background: var(--bleu-pale); border-color: var(--bleu-clair); }
.pa-test-item input { margin-top: 0.28rem; width: 17px; height: 17px; accent-color: var(--bleu); cursor: pointer; flex-shrink: 0; }
.pa-test-item.est-coche { background: var(--bleu-pale); border-color: var(--bleu); }
.pa-test-item.est-coche.est-rouge { background: var(--rouge-pale); border-color: var(--rouge); }
.pa-test-texte { font-size: 0.92rem; line-height: 1.5; }
.pa-test-texte strong { display: block; }
.pa-test-texte small { color: var(--texte-doux); font-size: 0.82rem; }
.pa-test-score {
  text-align: center; padding: 1.1rem;
  border-radius: var(--arrondi); background: var(--fond-alt);
  transition: background var(--transi);
}
.pa-test-jauge { height: 10px; border-radius: 20px; background: var(--bord); overflow: hidden; margin: 0.75rem 0 1rem; }
.pa-test-jauge span { display: block; height: 100%; border-radius: 20px; background: var(--bleu); transition: width 0.35s ease, background 0.35s ease; }
.pa-test-verdict { font-family: var(--titre); font-size: 1.25rem; font-weight: 600; color: var(--encre); }
.pa-test-detail { font-size: 0.9rem; color: var(--texte-doux); margin-top: 0.35rem; }

/* ---- Bulletin météo en direct (Open-Meteo) ---- */
.pa-meteo {
  background: linear-gradient(135deg, var(--bleu-fonce), var(--bleu-clair));
  border-radius: var(--arrondi-lg);
  padding: 1.5rem;
  margin: 1.75rem 0;
  color: var(--blanc);
  box-shadow: 0 10px 30px rgba(28,35,51,0.22);
}
.pa-meteo-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.pa-meteo-tete h2 { color: var(--blanc); font-size: 1.25rem; margin: 0; padding: 0; border: none; }
.pa-meteo-tete h2::before { display: none; }
.pa-meteo-maj { font-size: 0.78rem; opacity: 0.8; }

.pa-meteo-maintenant { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(255,255,255,0.22); margin-bottom: 1.1rem; }
.pa-meteo-emoji { font-size: 3.4rem; line-height: 1; }
.pa-meteo-temp { font-family: var(--titre); font-size: 3.2rem; font-weight: 700; line-height: 1; }
.pa-meteo-desc { font-size: 1rem; font-weight: 700; margin-bottom: 0.15rem; }
.pa-meteo-detail { font-size: 0.85rem; opacity: 0.85; }
.pa-meteo-bloc { min-width: 0; }

.pa-meteo-jours { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem; }
.pa-meteo-jour {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--arrondi);
  padding: 0.75rem 0.35rem;
  text-align: center;
}
.pa-meteo-jour-nom { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; opacity: 0.85; }
.pa-meteo-jour-ico { font-size: 1.5rem; margin: 0.3rem 0; line-height: 1; }
.pa-meteo-jour-max { font-weight: 800; font-size: 0.95rem; }
.pa-meteo-jour-min { font-size: 0.8rem; opacity: 0.75; }
.pa-meteo-note { font-size: 0.78rem; opacity: 0.8; margin: 1rem 0 0; }
.pa-meteo-note a { color: var(--blanc); text-decoration: underline; }
/* Le message d'erreur remplace la grille entiere des jours : il doit donc
   occuper toute la largeur de la grille, sinon il se loge dans une colonne. */
.pa-meteo-erreur { font-size: 0.9rem; opacity: 0.9; grid-column: 1 / -1; }
/* Les jours se partagent la largeur a parts egales. */
.pa-meteo-jour--souple { flex: 1; }

@media (max-width: 768px) {
  .pa-meteo-jours { grid-template-columns: repeat(4, 1fr); }
  .pa-meteo-temp { font-size: 2.6rem; }
  .pa-meteo-emoji { font-size: 2.8rem; }
}
@media (max-width: 420px) {
  .pa-meteo-jours { grid-template-columns: repeat(3, 1fr); }
}

/* Encadré horaires / infos pratiques */
.pa-horaires {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-radius: var(--arrondi);
  overflow: hidden;
  margin: 1.5rem 0;
}
.pa-horaires-ligne { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 1.1rem; font-size: 0.9rem; }
.pa-horaires-ligne:nth-child(even) { background: var(--fond-alt); }
.pa-horaires-ligne strong { color: var(--encre); }
.pa-horaires-ligne span { color: var(--texte-doux); }

/* ============================================================
   11. BOUTONS
   ============================================================ */
.pa-bouton {
  display: inline-block;
  padding: 0.72rem 1.5rem;
  border-radius: var(--arrondi);
  font-weight: 800; font-size: 0.92rem;
  transition: background var(--transi), color var(--transi), transform var(--transi);
  cursor: pointer; border: none;
}
.pa-bouton--bleu { background: var(--bleu); color: var(--blanc); }
.pa-bouton--bleu:hover { background: var(--bleu-fonce); color: var(--blanc); transform: translateY(-1px); }
.pa-bouton--rouge { background: var(--rouge); color: var(--blanc); }
.pa-bouton--rouge:hover { background: var(--bleu); color: var(--blanc); transform: translateY(-1px); }
.pa-bouton--transparent { background: rgba(255,255,255,0.12); border: 1.5px solid rgba(255,255,255,0.6); color: var(--blanc); backdrop-filter: blur(4px); }
.pa-bouton--transparent:hover { background: var(--blanc); border-color: var(--blanc); color: var(--encre); transform: translateY(-1px); }
.pa-bouton--grand { padding: 0.95rem 2rem; font-size: 1rem; }

/* Boutons dans le corps d'article : neutraliser le style de lien souligné */
.pa-contenu a.pa-bouton { color: var(--blanc); text-decoration: none; }
.pa-contenu a.pa-bouton:hover { color: var(--blanc); text-decoration: none; }
.pa-contenu a.pa-bouton--transparent { color: var(--blanc); }
.pa-contenu a.pa-bouton--transparent:hover { color: var(--encre); }

/* ============================================================
   12. APPARITION AU SCROLL
   ============================================================ */
.pa-apparait { opacity: 0; transform: translateY(24px); transition: opacity 0.55s ease, transform 0.55s ease; }
.pa-apparait.est-visible { opacity: 1; transform: translateY(0); }
.pa-apparait--d1 { transition-delay: 0.1s; }
.pa-apparait--d2 { transition-delay: 0.2s; }
.pa-apparait--d3 { transition-delay: 0.3s; }

/* ============================================================
   13. ACCUEIL
   ============================================================ */
.pa-ouverture {
  position: relative;
  min-height: 580px;
  display: flex; align-items: center; overflow: hidden;
}
.pa-ouverture-photo { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: var(--encre); }
.pa-ouverture-voile { position: absolute; inset: 0; background: linear-gradient(102deg, rgba(12,22,38,0.90) 0%, rgba(28,35,51,0.62) 46%, rgba(28,35,51,0.14) 100%); }
.pa-ouverture-ligne {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2.5rem; width: 100%;
  padding-top: 3.5rem; padding-bottom: 3.5rem;
}
.pa-ouverture-texte { max-width: 610px; }
.pa-ouverture-surtitre {
  display: inline-block; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.2em;
  color: #E8C66A; font-weight: 800; margin-bottom: 1rem;
}
.pa-ouverture-titre { color: var(--blanc); font-size: clamp(2.5rem, 6vw, 4.6rem); font-weight: 600; line-height: 1.03; margin-bottom: 1.25rem; }
.pa-ouverture-titre b { color: #F2D68F; font-weight: 600; }
.pa-ouverture-accroche { color: rgba(255,255,255,0.9); font-size: 1.08rem; line-height: 1.7; margin-bottom: 1.75rem; max-width: 540px; }
.pa-ouverture-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

.pa-chiffres {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(6px);
  border-radius: var(--arrondi-lg);
  box-shadow: 0 24px 60px rgba(12,22,38,0.42);
  padding: 1.75rem 2rem;
  display: flex; flex-direction: column; gap: 1.25rem;
  min-width: 258px; flex-shrink: 0;
  border-top: 4px solid var(--rouge);
}
.pa-chiffre { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: center; }
.pa-chiffre-ico {
  grid-row: span 2; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: var(--bleu); background: var(--bleu-pale); border-radius: 50%;
}
.pa-chiffre-ico svg { width: 22px; height: 22px; }
.pa-chiffre-val { font-family: var(--titre); font-size: 1.55rem; font-weight: 700; color: var(--encre); line-height: 1.1; }
.pa-chiffre-val a { color: var(--encre); }
.pa-chiffre-val a:hover { color: var(--rouge); }
.pa-chiffre-lib { font-size: 0.8rem; color: var(--texte-doux); }
.pa-chiffre + .pa-chiffre { border-top: 1px solid var(--bord); padding-top: 1.25rem; }

/* Barre d'accès rapides : icônes en pastilles rondes */
.pa-acces { background: var(--blanc); border-bottom: 1px solid var(--bord); }
.pa-acces-ligne { display: grid; grid-template-columns: repeat(4, 1fr); }
.pa-acces-item { display: flex; align-items: center; gap: 0.9rem; padding: 1.4rem 1rem; color: var(--texte); transition: background var(--transi), color var(--transi); }
.pa-acces-item + .pa-acces-item { border-left: 1px solid var(--bord); }
.pa-acces-item:hover { background: var(--fond); color: var(--bleu); }
.pa-acces-ico {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--bleu); background: var(--bleu-pale); flex-shrink: 0;
  transition: color var(--transi), background var(--transi), transform var(--transi);
}
.pa-acces-item:hover .pa-acces-ico { color: var(--blanc); background: var(--rouge); transform: translateY(-2px); }
.pa-acces-ico svg { width: 24px; height: 24px; }
.pa-acces-texte { display: flex; flex-direction: column; line-height: 1.25; }
.pa-acces-texte strong { font-size: 1rem; color: var(--encre); font-family: var(--titre); font-weight: 600; }
.pa-acces-item:hover .pa-acces-texte strong { color: var(--bleu); }
.pa-acces-texte small { font-size: 0.78rem; color: var(--texte-doux); }

/* Cartes à la une : liseré rouge qui apparaît en haut au survol */
.pa-vedettes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ecart); }
.pa-vedette {
  position: relative;
  background: var(--blanc); border-radius: var(--arrondi-lg); overflow: hidden;
  box-shadow: 0 4px 18px var(--ombre);
  transition: transform var(--transi), box-shadow var(--transi);
  display: flex; flex-direction: column;
}
.pa-vedette::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 2;
  background: var(--rouge);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s ease;
}
.pa-vedette:hover { transform: translateY(-5px); box-shadow: 0 16px 38px var(--ombre); }
.pa-vedette:hover::before { transform: scaleX(1); }
.pa-vedette-photo { aspect-ratio: 4/3; overflow: hidden; background: var(--fond-alt); }
.pa-vedette-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.pa-vedette:hover .pa-vedette-photo img { transform: scale(1.06); }
.pa-vedette-corps { padding: 1.25rem 1.35rem 1.4rem; flex: 1; display: flex; flex-direction: column; }
.pa-vedette-etiquette {
  align-self: flex-start; font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.1em; font-weight: 800; color: var(--bleu);
  background: var(--bleu-pale); padding: 0.25rem 0.6rem; border-radius: 100px; margin-bottom: 0.7rem;
}
.pa-vedette-titre { font-family: var(--titre); font-size: 1.18rem; font-weight: 600; margin-bottom: 0.5rem; line-height: 1.3; }
.pa-vedette-desc { font-size: 0.86rem; color: var(--texte-doux); line-height: 1.6; flex: 1; }
.pa-vedette-suite { margin-top: 0.9rem; font-size: 0.84rem; font-weight: 800; color: var(--rouge); transition: color var(--transi); }
.pa-vedette:hover .pa-vedette-suite { color: var(--bleu); }

/* Bloc pratique (tuiles + encart pro) */
.pa-pratique { display: grid; grid-template-columns: 1.55fr 1fr; gap: 2.5rem; align-items: stretch; }
.pa-tuiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.pa-tuile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.6rem; text-align: center;
  background: var(--fond); border: 1px solid var(--bord); border-radius: var(--arrondi);
  padding: 1.25rem 0.5rem; color: var(--texte);
  transition: transform var(--transi), box-shadow var(--transi), border-color var(--transi), background var(--transi), color var(--transi);
}
.pa-tuile:hover { transform: translateY(-3px); box-shadow: 0 10px 24px var(--ombre); border-color: var(--bleu); background: var(--blanc); color: var(--bleu); }
.pa-tuile-ico { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; color: var(--bleu); }
.pa-tuile-ico svg { width: 30px; height: 30px; }
.pa-tuile:hover .pa-tuile-ico { color: var(--rouge); }
.pa-tuile-lib { font-size: 0.82rem; font-weight: 700; }

.pa-encart-pro {
  position: relative; border-radius: var(--arrondi-lg); overflow: hidden;
  background-size: cover; background-position: center;
  display: flex; align-items: flex-end; min-height: 260px; color: var(--blanc);
}
.pa-encart-pro::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,22,38,0.94) 0%, rgba(12,22,38,0.48) 60%, rgba(12,22,38,0.15) 100%); }
.pa-encart-pro-corps { position: relative; z-index: 1; padding: 1.75rem; }
.pa-encart-pro-corps h3 { color: var(--blanc); margin-bottom: 0.5rem; }
.pa-encart-pro-corps p { font-size: 0.9rem; color: rgba(255,255,255,0.85); margin-bottom: 0.9rem; }
.pa-encart-pro-suite { font-weight: 800; color: #E8C66A; }
.pa-encart-pro:hover .pa-encart-pro-suite { color: var(--blanc); }

/* Bandeau "vivre à Lyon" */
.pa-vivre { background: var(--bleu); color: var(--blanc); padding: 3.5rem 0; }
.pa-vivre-ligne { display: grid; grid-template-columns: 1fr 1.4fr; gap: 3rem; align-items: center; }
.pa-vivre-intro h2 { color: var(--blanc); }
.pa-vivre-intro h2::after { display: none; }
.pa-vivre-intro p { color: rgba(255,255,255,0.85); margin-bottom: 1.5rem; }
.pa-vivre-cartes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.pa-vivre-carte {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.75rem; text-align: center;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--arrondi); padding: 1.4rem 0.5rem;
  color: var(--blanc); font-size: 0.85rem; font-weight: 700;
  transition: background var(--transi), transform var(--transi), color var(--transi);
}
.pa-vivre-carte:hover { background: var(--blanc); color: var(--bleu); transform: translateY(-3px); }
.pa-vivre-carte-ico { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; color: #E8C66A; }
.pa-vivre-carte-ico svg { width: 30px; height: 30px; }
.pa-vivre-carte:hover .pa-vivre-carte-ico { color: var(--rouge); }

/* Puces de liens rapides */
.pa-puces { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 0.75rem; }
.pa-puce {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--arrondi);
  padding: 0.75rem 1rem; font-size: 0.88rem; font-weight: 700; color: var(--texte);
  transition: background var(--transi), color var(--transi), border-color var(--transi);
  box-shadow: 0 1px 4px var(--ombre);
}
.pa-puce:hover { background: var(--bleu-pale); border-color: var(--bleu); color: var(--bleu); }
.pa-puce::before { content: '→'; color: var(--rouge); font-weight: 900; align-self: flex-start; }

/* Puce d'arrondissement : « Paris 18e » ne doit jamais se couper entre le
   nombre et son exposant, sinon le « e » part a la ligne suivante a cote du
   nom du quartier et la puce devient illisible. Le nom passe donc en dessous,
   aligne sur le libelle, ce qui donne les vingt puces au meme gabarit. */
.pa-puces--arr { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
.pa-puce--arr { flex-wrap: wrap; row-gap: 0.15rem; }
.pa-puce--arr .pa-puce-lib { white-space: nowrap; }
.pa-puce--arr .pa-mention { flex: 1 0 100%; margin-left: 1.35rem; line-height: 1.35; }

/* Bloc alentours (Beaujolais, Alpes) */
.pa-alentours { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.pa-alentours-photo { background-size: cover; background-position: center; min-height: 440px; }
.pa-alentours-corps { position: relative; background: var(--fond-alt); padding: 4rem clamp(1.5rem, 5vw, 4.5rem); display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.pa-alentours-deco { position: absolute; top: -10px; right: -10px; width: 170px; height: 170px; color: var(--bleu-clair); opacity: 0.25; }
.pa-alentours-corps h2 { max-width: 400px; }
.pa-alentours-corps > p { color: var(--texte-doux); max-width: 460px; margin-bottom: 1.5rem; }
.pa-alentours-liens { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1.5rem; }
.pa-alentours-liens a { font-size: 0.9rem; font-weight: 700; color: var(--bleu); }
.pa-alentours-liens a:hover { color: var(--rouge); }

/* Bandeau d'appel (partenaire) */
.pa-appel { background: var(--encre); color: var(--blanc); padding: 3rem 0; }
.pa-appel-ligne { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.pa-appel-texte { max-width: 640px; }
.pa-appel-texte h2 { color: var(--blanc); margin-bottom: 0.6rem; }
.pa-appel-texte h2::after { display: none; }
.pa-appel-texte p { color: rgba(255,255,255,0.82); margin-bottom: 0; }

/* Bloc agenda sur l'accueil */
.pa-agenda-accueil { padding: 2.8rem 0 0.5rem; }
.pa-agenda-accueil-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.pa-agenda-accueil-tete h2 { margin: 0; }
.pa-agenda-accueil-tout { font-size: 0.9rem; font-weight: 800; color: var(--bleu); white-space: nowrap; }
.pa-agenda-accueil-tout:hover { color: var(--rouge); }

/* Agenda : liste d'événements */
.pa-agenda-liste { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
.pa-evenement {
  display: flex; gap: 1rem; background: var(--blanc);
  border: 1px solid var(--bord); border-radius: var(--arrondi);
  padding: 0.9rem 1rem; box-shadow: 0 4px 18px var(--ombre);
  transition: box-shadow var(--transi), transform var(--transi);
}
.pa-evenement:hover { box-shadow: 0 8px 28px rgba(28,35,51,0.16); transform: translateY(-2px); }
.pa-evenement-date {
  flex: 0 0 58px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--bleu-fonce), var(--bleu-clair)); color: var(--blanc);
  border-radius: var(--arrondi); height: 58px; align-self: center;
}
.pa-evenement-jour { font-family: var(--titre); font-size: 1.5rem; font-weight: 700; line-height: 1; }
.pa-evenement-mois { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.9; margin-top: 2px; }
.pa-evenement-corps { flex: 1; min-width: 0; }
.pa-evenement-etiquette { display: inline-block; font-size: 0.68rem; font-weight: 800; color: var(--rouge); background: var(--rouge-pale); padding: 0.1rem 0.6rem; border-radius: 20px; margin-bottom: 0.3rem; }
.pa-evenement-titre { font-size: 1rem; margin: 0 0 0.3rem; line-height: 1.3; font-family: var(--corps); font-weight: 800; }
.pa-contenu .pa-evenement-titre a, .pa-evenement-titre a { color: var(--encre); text-decoration: none; }
.pa-contenu .pa-evenement-titre a:hover, .pa-evenement-titre a:hover { color: var(--rouge); text-decoration: underline; }
.pa-evenement-meta { font-size: 0.85rem; color: var(--texte-doux); margin: 0; display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; align-items: center; }
.pa-evenement-quand { font-weight: 800; color: var(--bleu); }
.pa-evenement-prix { color: #1F7A46; font-weight: 800; background: #E5F3EA; padding: 0 0.5rem; border-radius: 12px; }

/* Agenda dynamique (DATAtourisme) */
.pa-agenda-live { margin: 0 0 2rem; }
.pa-agenda-live-tete { margin-bottom: 1rem; }
.pa-agenda-live-tete h2 { margin-bottom: 0.2rem; }
.pa-agenda-maj { font-size: 0.82rem; color: var(--texte-doux); margin: 0; }
.pa-agenda-maj a { color: var(--texte-doux); text-decoration: underline; }
.pa-agenda-mois {
  font-family: var(--titre); font-size: 1.2rem; color: var(--encre);
  margin: 1.6rem 0 0.75rem; padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--rouge); display: inline-block;
}
.pa-agenda-note {
  font-size: 0.8rem; color: var(--texte-doux); font-style: italic;
  margin-top: 1.2rem; padding-top: 0.9rem; border-top: 1px solid var(--bord);
}

/* ============================================================
   14. PIED DE PAGE
   ============================================================ */
.pa-pied { background: var(--encre-nuit); color: rgba(255,255,255,0.75); }
.pa-pied-haut { padding: 3.5rem 0 2.5rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.pa-pied-grille {
  display: grid;
  /* Le premier bloc porte le logo et la presentation, les cinq suivants une
     rubrique chacun : la grille compte donc six colonnes, pas cinq, sinon la
     derniere rubrique retombe sous le logo et laisse un vide a droite. */
  grid-template-columns: 1.6fr repeat(5, 1fr);
  gap: 2rem 1.5rem; align-items: start;
}
/* Neuf colonnes ne tiennent pas sur une ligne : le pied se lit en deux rangees,
   la premiere portant le logo et la presentation. */
@media (min-width: 1280px) { .pa-pied-grille { grid-template-columns: 1.6fr repeat(5, 1fr); } }
.pa-pied-logo { display: inline-block; margin-bottom: 0.9rem; }
.pa-pied-logo img { height: 38px; width: auto; display: block; }
.pa-pied-desc { font-size: 0.85rem; line-height: 1.7; opacity: 0.75; margin-bottom: 1rem; }
.pa-pied-cta { display: inline-block; background: var(--rouge); color: var(--blanc); font-size: 0.82rem; font-weight: 800; padding: 0.45rem 0.9rem; border-radius: var(--arrondi); transition: background var(--transi); }
.pa-pied-cta:hover { background: var(--rouge-clair); color: var(--blanc); }
.pa-pied-titre { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #E8C66A; margin-bottom: 1rem; }
.pa-pied-liens { display: flex; flex-direction: column; gap: 0.4rem; }
.pa-pied-liens a { font-size: 0.85rem; color: rgba(255,255,255,0.65); transition: color var(--transi), padding-left var(--transi); }
.pa-pied-liens a:hover { color: var(--blanc); padding-left: 4px; }
.pa-pied-bas { padding: 1.25rem 0; }
.pa-pied-bas-ligne { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.pa-pied-copy { font-size: 0.78rem; opacity: 0.5; }
.pa-pied-credit { font-size: 0.78rem; opacity: 0.65; }
.pa-pied-credit a { color: #E8C66A; }
.pa-pied-credit a:hover { color: var(--blanc); }

/* Adresse e-mail protégée du copier-coller */
.pa-courriel { unicode-bidi: bidi-override; direction: rtl; white-space: nowrap; }

/* ============================================================
   15. FORMULAIRE
   ============================================================ */
.pa-form { margin: 1.5rem 0; }
.pa-champ { margin-bottom: 1.1rem; }
.pa-champ label { display: block; font-weight: 700; font-size: 0.9rem; color: var(--encre); margin-bottom: 0.35rem; }
.pa-champ input, .pa-champ textarea {
  width: 100%; font-family: var(--corps); font-size: 1rem; color: var(--texte);
  background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--arrondi);
  padding: 0.65rem 0.85rem; transition: border-color var(--transi), box-shadow var(--transi);
}
.pa-champ input:focus, .pa-champ textarea:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px var(--bleu-pale); }
.pa-champ textarea { min-height: 150px; resize: vertical; }
.pa-champ--piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pa-form-note { font-size: 0.82rem; color: var(--texte-doux); margin-top: 0.5rem; }
.pa-form-msg { border-radius: var(--arrondi); padding: 0.9rem 1.1rem; margin: 1.25rem 0; font-size: 0.92rem; }
.pa-form-msg--ok { background: #E5F3EA; border-left: 4px solid #1F7A46; color: #1B5C36; }
.pa-form-msg--ko { background: #FFF6E5; border-left: 4px solid #D99400; color: #8A5E00; }

/* ============================================================
   16. RESPONSIVE
   ============================================================ */
/* Le bouton de l'en-tete reste une pastille ronde a toute largeur. Son
   libelle tenait quand la barre comptait huit rubriques ; avec dix, il faisait
   repasser le menu sur deux lignes des 1500 px, la ou il tenait en dessous.
   Une barre qui se replie seulement sur les grands ecrans est le genre de
   defaut qu'aucun controle de debordement ne signale. */
.pa-cta-entete { padding: 0.55rem; border-radius: 50%; margin-left: 0.5rem; }
.pa-cta-entete-texte { display: none; }
.pa-cta-entete svg { width: 18px; height: 18px; }

@media (max-width: 1024px) {
  .pa-page { grid-template-columns: 1fr; }
  .pa-colonne { position: static; }
  .pa-pied-grille { grid-template-columns: repeat(3, 1fr); }
  .pa-ouverture-ligne { flex-direction: column; align-items: stretch; }
  .pa-ouverture-texte { width: 100%; max-width: 100%; }
  .pa-ouverture-accroche { max-width: 100%; }
  .pa-chiffres { flex-direction: row; flex-wrap: wrap; align-self: stretch; min-width: 0; gap: 1.25rem 2rem; }
  .pa-chiffre { flex: 1; min-width: 140px; }
  .pa-chiffre + .pa-chiffre { border-top: none; padding-top: 0; }
  .pa-vedettes { grid-template-columns: repeat(2, 1fr); }
  .pa-pratique { grid-template-columns: 1fr; }
  .pa-vivre-ligne { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* Menu en burger jusqu'a 1279 px. Le seuil est mesure, pas choisi : les dix
   rubriques demandent 903 px, et la barre n'en dispose que de 880 a 1200 px de
   fenetre. Au-dessus de 1280 px, elle tient sur une seule ligne jusqu'en 2560. */
@media (max-width: 1279px) {
  .pa-burger { display: flex; }
  .pa-cta-entete { margin-left: auto; margin-right: 0.25rem; }
  .pa-logo-img { height: 40px; }
  .pa-logo-marque { width: 36px; height: 36px; border-radius: 8px; }
  .pa-logo-marque svg { width: 20px; height: 20px; }
  .pa-logo-nom { font-size: 1.18rem; }
  .pa-logo-sous { font-size: 0.54rem; letter-spacing: 0.12em; }
  .pa-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--encre); border-top: 1px solid rgba(255,255,255,0.1);
    padding: 1rem 0; flex-direction: column;
    max-height: calc(100vh - 90px); overflow-y: auto;
  }
  .pa-nav.est-ouvert { display: flex; }
  .pa-nav-liste { flex-direction: column; width: 100%; gap: 0; }
  .pa-nav-item { width: 100%; }
  .pa-nav-lien { padding: 0.75rem 1.25rem; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.9); }
  .pa-nav-lien:hover, .pa-nav-lien.est-actif { background: rgba(255,255,255,0.1); color: #E8C66A; }
  .pa-sousmenu {
    position: static !important; transform: none !important; left: auto !important; top: auto !important;
    opacity: 0; pointer-events: none; max-height: 0; overflow: hidden;
    box-shadow: none; border: none; border-radius: 0;
    background: rgba(255,255,255,0.07);
    transition: max-height 0.3s ease, opacity 0.3s ease; min-width: 0; width: 100%;
  }
  .pa-nav-item--deroulant:hover .pa-sousmenu,
  .pa-nav-item--deroulant:focus-within .pa-sousmenu { opacity: 0; pointer-events: none; transform: none !important; }
  .pa-nav-item--deroulant.est-ouvert .pa-sousmenu { opacity: 1 !important; pointer-events: auto; max-height: 900px; transform: none !important; }
  /* Le sous-menu des transports repasse en colonne unique : ses deux colonnes
     n'ont de sens que dans un panneau flottant, pas dans un menu deroulant
     mobile ou chaque entree occupe toute la largeur. */
  .pa-sousmenu--large { columns: 1; min-width: 0; width: 100%; }
  .pa-sousmenu li a { padding: 0.6rem 1.25rem 0.6rem 2rem; color: rgba(255,255,255,0.85) !important; font-size: 0.9rem; }
  .pa-sousmenu li a:hover { background: rgba(255,255,255,0.1); padding-left: 2.25rem; color: var(--blanc) !important; }
}

@media (max-width: 768px) {
  html { font-size: 16px; }
  .pa-bandeau { position: static; padding: 0.5rem 1rem; font-size: 0.8rem; }

  .pa-puces { grid-template-columns: repeat(2, 1fr); }
  .pa-pied-grille { grid-template-columns: 1fr; gap: 1.5rem; }
  .pa-pied-bas-ligne { flex-direction: column; text-align: center; }
  .pa-ouverture { min-height: 0; }
  .pa-ouverture-ligne { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .pa-acces-ligne { grid-template-columns: repeat(2, 1fr); }
  .pa-acces-item:nth-child(odd) { border-left: none; }
  .pa-acces-item:nth-child(n+3) { border-top: 1px solid var(--bord); }
  .pa-vedettes { grid-template-columns: 1fr; }
  .pa-tuiles { grid-template-columns: repeat(3, 1fr); }
  .pa-vivre-cartes { grid-template-columns: repeat(2, 1fr); }
  .pa-alentours { grid-template-columns: 1fr; }
  .pa-alentours-photo { min-height: 240px; }
  .pa-alentours-corps { padding: 2.5rem 1.5rem; }
  .pa-alentours-liens { grid-template-columns: 1fr; }
  .pa-appel-ligne { flex-direction: column; align-items: flex-start; }
  .pa-couverture { min-height: 300px; }
  .pa-section { padding: 2.5rem 0; }
  .pa-agenda-liste { grid-template-columns: 1fr; }
  .pa-barre-ligne { grid-template-columns: 90px 1fr auto; }
}

@media (min-width: 481px) and (max-width: 768px) {
  .pa-pied-grille { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}

/* Chiffres clés : empilés sur petit écran (sinon débordement horizontal) */
@media (max-width: 600px) {
  .pa-chiffres { flex-direction: column; padding: 1.5rem; min-width: 0; width: 100%; }
  .pa-chiffre { flex: none; min-width: 0; width: 100%; }
  .pa-chiffre + .pa-chiffre { border-top: 1px solid var(--bord); padding-top: 1rem; }
}

@media (max-width: 480px) {
  .pa-puces { grid-template-columns: 1fr; }
  .pa-tuiles { grid-template-columns: repeat(2, 1fr); }
  .pa-vivre-cartes { grid-template-columns: 1fr 1fr; }
  .pa-ouverture-titre { font-size: 2.4rem; }
}

/* Très petits écrans : les accès rapides passent sur une seule colonne */
@media (max-width: 420px) {
  .pa-acces-ligne { grid-template-columns: 1fr; }
  .pa-acces-item + .pa-acces-item { border-left: none; border-top: 1px solid var(--bord); }
  .pa-acces-item:nth-child(n+3) { border-top: 1px solid var(--bord); }
  .pa-acces-texte { min-width: 0; }
}

/* ------------------------------------------------------------------
   Sélecteur de mois | comparateur des saisons
   ------------------------------------------------------------------ */
.pa-mois-grille {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem;
}
.pa-mois-bouton {
  cursor: pointer; padding: 0.65rem 0.2rem;
  border: 1px solid var(--bord); border-radius: var(--arrondi);
  background: var(--fond); color: var(--encre);
  font-family: var(--corps); font-size: 0.86rem; font-weight: 600;
  transition: background var(--transi), border-color var(--transi), transform var(--transi);
}
.pa-mois-bouton:hover { background: var(--blanc); border-color: var(--bleu); transform: translateY(-2px); }
.pa-mois-bouton.est-top { border-color: var(--rouge); color: var(--rouge); font-weight: 800; }
.pa-mois-bouton.est-choisi {
  background: var(--bleu); border-color: var(--bleu); color: #fff;
}
.pa-mois-bouton.est-top.est-choisi { background: var(--rouge); border-color: var(--rouge); color: #fff; }
@media (max-width: 560px) { .pa-mois-grille { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 360px) { .pa-mois-grille { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------------------------
   Vérificateur d'artisan | interroge l'annuaire officiel des entreprises
   ------------------------------------------------------------------ */
.pa-verif {
  background: var(--blanc);
  border: 1px solid var(--bord);
  border-top: 4px solid var(--bleu);
  border-radius: var(--arrondi);
  padding: 1.4rem 1.5rem;
  margin: 2rem 0;
}
.pa-verif h3 { margin: 0 0 0.4rem; color: var(--bleu); }
.pa-verif-intro { font-size: 0.94rem; color: var(--texte-doux); margin: 0 0 1rem; }
.pa-verif-ligne { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.pa-verif-saisie {
  flex: 1 1 240px; min-width: 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--bord); border-radius: var(--arrondi);
  font-family: var(--corps); font-size: 1rem; color: var(--encre); background: var(--fond);
}
.pa-verif-saisie:focus { outline: 3px solid var(--bleu); outline-offset: 1px; background: var(--blanc); }
.pa-verif-bouton {
  flex: 0 0 auto; cursor: pointer;
  padding: 0.7rem 1.4rem; border: 0; border-radius: var(--arrondi);
  background: var(--bleu); color: #fff;
  font-family: var(--corps); font-size: 0.95rem; font-weight: 700;
  transition: background var(--transi), transform var(--transi);
}
.pa-verif-bouton:hover { background: var(--rouge); transform: translateY(-2px); }
.pa-verif-sortie { margin-top: 1.1rem; }
.pa-verif-carte {
  border: 1px solid var(--bord); border-left: 4px solid #1F7A46;
  border-radius: 0 var(--arrondi) var(--arrondi) 0;
  padding: 0.9rem 1.1rem; margin-bottom: 0.8rem; background: var(--fond);
}
.pa-verif-carte.est-ferme { border-left-color: var(--rouge); }
.pa-verif-carte h4 { margin: 0 0 0.6rem; font-size: 1.05rem; }
.pa-verif-champs { list-style: none; margin: 0; padding: 0; font-size: 0.92rem; }
.pa-verif-champs li { padding: 0.22rem 0; border-bottom: 1px dashed var(--bord); }
.pa-verif-champs li:last-child { border-bottom: 0; }
.pa-verif-champs span {
  display: inline-block; min-width: 130px;
  font-size: 0.76rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--texte-doux);
}
.pa-verif-alerte {
  margin: 0.7rem 0 0; padding: 0.7rem 0.9rem;
  background: var(--rouge-pale); border-left: 4px solid var(--rouge);
  border-radius: 0 var(--arrondi) var(--arrondi) 0; font-size: 0.9rem;
}
.pa-verif-prudence {
  margin: 0.7rem 0 0; padding: 0.7rem 0.9rem;
  background: #FFF6E5; border-left: 4px solid #D99400;
  border-radius: 0 var(--arrondi) var(--arrondi) 0; font-size: 0.9rem;
}
.pa-verif-vide { font-size: 0.9rem; color: var(--texte-doux); margin: 0.5rem 0 0; }
.pa-verif-source { margin: 1rem 0 0; font-size: 0.8rem; color: var(--texte-doux); }
/* Les selecteurs des outils pa-verif (urgences, medecins, PMI, marches, hopitaux) :
   libelle au-dessus, menu pleine largeur, comme les champs des calculateurs. */
div.pa-verif-champs { display: grid; grid-template-columns: 1fr; gap: 0.35rem; font-size: 1rem; }
div.pa-verif-champs > label.pa-champ {
  display: block; margin: 0.5rem 0 0; font-weight: 700; font-size: 0.85rem; color: var(--encre);
}
div.pa-verif-champs > label.pa-champ:first-child { margin-top: 0; }
div.pa-verif-champs > select {
  width: 100%; max-width: 480px; font-family: var(--corps); font-size: 0.95rem; color: var(--texte);
  background: var(--fond); border: 1px solid var(--bord); border-radius: var(--arrondi);
  padding: 0.6rem 0.75rem; cursor: pointer;
}
div.pa-verif-champs > select:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px var(--bleu-pale); }
@media (max-width: 520px) {
  .pa-verif-bouton { flex: 1 1 100%; }
  .pa-verif-champs span { min-width: 100%; }
}

/* ------------------------------------------------------------------
   Vidéo | façade cliquable
   L'iframe YouTube n'est chargée qu'au clic (elle pèse très lourd) et
   pointe sur youtube-nocookie.com : aucun cookie avant l'action du visiteur.
   ------------------------------------------------------------------ */
.pa-video {
  position: relative; margin: 2rem 0;
  border-radius: var(--arrondi); overflow: hidden;
  border: 1px solid var(--bord);
}
.pa-video-cadre {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: var(--encre); border: 0; padding: 0; display: block;
  cursor: pointer; overflow: hidden;
}
.pa-video-cadre img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--transi); }
.pa-video-cadre:hover img { transform: scale(1.03); }
.pa-video-cadre iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pa-video-voile {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,35,51,0.12) 0%, rgba(28,35,51,0.62) 100%);
}
.pa-video-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 74px; height: 74px; border-radius: 50%;
  background: var(--rouge); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  transition: transform var(--transi), background var(--transi);
}
.pa-video-play::after {
  content: ''; display: block;
  border-style: solid; border-width: 13px 0 13px 21px;
  border-color: transparent transparent transparent #fff;
  margin-left: 5px;
}
.pa-video-cadre:hover .pa-video-play { transform: translate(-50%, -50%) scale(1.08); background: var(--bleu); }
.pa-video-titre {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1rem 1.2rem; color: #fff; text-align: left;
  font-family: var(--titre); font-size: 1.15rem; font-weight: 600; line-height: 1.3;
}
.pa-video-legende {
  margin: -1.4rem 0 2rem; font-size: 0.85rem; color: var(--texte-doux);
}
@media (max-width: 600px) {
  .pa-video-play { width: 58px; height: 58px; }
  .pa-video-titre { font-size: 0.98rem; padding: 0.8rem 1rem; }
}

/* ------------------------------------------------------------------
   Cibles tactiles | sur écran tactile, un lien de liste doit être
   assez haut pour être touché sans viser (minimum 24 px, WCAG 2.5.8).
   Les liens au fil du texte en sont exemptés : les espacer casserait
   la lecture du paragraphe.
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .pa-pied-liens a,
  .pa-bloc-liens a,
  .pa-evenement-titre a,
  .pa-coches > li > a:only-child {
    display: inline-block;
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .pa-pied-liens li + li,
  .pa-bloc-liens li + li { margin-top: 0.15rem; }
  .pa-ariane a { display: inline-block; padding-top: 3px; padding-bottom: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .pa-apparait { opacity: 1; transform: none; }
  .pa-couverture-photo { transition: none; transform: none; }
}

:focus-visible { outline: 3px solid var(--rouge); outline-offset: 3px; border-radius: 3px; }
.pa-nav-lien:focus-visible { outline-color: var(--bleu); }
a:focus-visible { outline-color: var(--rouge); }

/* Vignette de la page des credits : la photo doit rester lisible sans peser
   sur la hauteur de la ligne du tableau. */
.pa-credit-vignette {
  width: 150px; height: 100px; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--bord); margin-bottom: 0.4rem;
}
@media (max-width: 620px) { .pa-credit-vignette { width: 110px; height: 74px; } }

/* Une adresse de fichier n'a pas d'espace : sans cela elle elargit le tableau. */
.pa-coupe-mot { overflow-wrap: anywhere; word-break: break-word; }

/* ------------------------------------------------------------------
   CARTE CHOROPLETHE : boutons de vue, legende, etiquettes
   La couleur porte la donnee. Aucun palier n'est estompe : pour mettre
   un element en avant on utilise un contour, jamais une opacite.
   ------------------------------------------------------------------ */
.pa-carte-outils { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.4rem 0 0.9rem; }
.pa-carte-bouton {
  font-family: var(--corps); font-size: 0.85rem; font-weight: 700;
  padding: 0.45rem 0.9rem; border-radius: 20px; cursor: pointer;
  background: var(--blanc); color: var(--bleu);
  border: 1.5px solid var(--bord); transition: all var(--transi);
}
.pa-carte-bouton:hover { border-color: var(--bleu-clair); }
.pa-carte-bouton.est-actif { background: var(--bleu); color: var(--blanc); border-color: var(--bleu); }

/* Compteur discret dans un bouton de jour : le nombre de marches ouverts. */
.pa-jour-n {
  display: inline-block; margin-left: 0.35rem; padding: 0 0.35rem;
  border-radius: 8px; font-size: 0.72rem; font-weight: 800;
  background: var(--bord); color: var(--texte-doux);
}
.pa-carte-bouton.est-actif .pa-jour-n { background: rgba(255,255,255,0.22); color: var(--blanc); }

.pa-legende { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; margin: 0.7rem 0 0.4rem; font-size: 0.8rem; color: var(--texte-doux); }
.pa-legende-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.pa-legende-pastille { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--bord); display: inline-block; }

.pa-carte-etiquette {
  background: transparent; border: none; box-shadow: none; padding: 0;
  font-family: var(--corps); font-weight: 800; font-size: 0.78rem;
  color: var(--blanc); text-shadow: 0 1px 3px rgba(0,0,0,0.55);
}
.pa-carte-etiquette::before { display: none; }

/* Tri du tableau : l'en-tete devient un bouton, sans changer son allure. */
.pa-tri-bouton {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: inherit; display: inline-flex; align-items: center; gap: 0.35rem;
}
/* La fleche de tri est dessinee en CSS, pas ecrite en caractere Unicode :
   les fleches ne sont pas dans le sous-ensemble des polices embarquees et
   sortaient en carre vide. */
.pa-tri-fleche {
  display: inline-block; width: 0; height: 0; margin-left: 0.15rem;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; border-bottom: 0;
  opacity: 0.5; transform: translateY(1px);
}
th[aria-sort="ascending"] .pa-tri-fleche {
  border-top: 0; border-bottom: 5px solid currentColor; opacity: 1;
}
th[aria-sort="descending"] .pa-tri-fleche { opacity: 1; }
.pa-tableau tfoot td { background: var(--bleu-pale); border-top: 2px solid var(--bleu); }

/* Liste des vingt arrondissements, en bas de la page pilier. */
.pa-arr-liste { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); margin: 1.6rem 0; }
.pa-arr-carte {
  display: flex; gap: 0.9rem; align-items: flex-start;
  background: var(--blanc); border: 1px solid var(--bord); border-radius: var(--arrondi);
  padding: 0.9rem 1rem; text-decoration: none; transition: transform var(--transi), box-shadow var(--transi);
}
.pa-arr-carte:hover { transform: translateY(-2px); box-shadow: 0 6px 18px var(--ombre); }
.pa-contenu .pa-arr-carte { text-decoration: none; }
.pa-arr-num {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px;
  background: var(--bleu); color: var(--blanc);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--titre); font-weight: 700; font-size: 1.05rem;
}
.pa-arr-corps { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.pa-arr-corps strong { color: var(--encre); font-size: 0.98rem; }
.pa-arr-phrase { font-size: 0.84rem; color: var(--texte); line-height: 1.5; }
.pa-arr-meta { font-size: 0.76rem; color: var(--texte-doux); }

/* ------------------------------------------------------------------
   FIGURE, TELECHARGEMENT, RECHERCHE DANS UN TABLEAU
   ------------------------------------------------------------------ */
.pa-figure { margin: 1.6rem 0; }
.pa-figure img {
  width: 100%; height: auto; display: block;
  border-radius: var(--arrondi-lg); border: 1px solid var(--bord);
  background: var(--blanc);
}
.pa-figure figcaption { margin-top: 0.6rem; font-size: 0.85rem; line-height: 1.5; color: var(--texte-doux); }
.pa-tableau .pa-nowrap { white-space: nowrap; }

.pa-telecharge { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.2rem 0 2rem; }

.pa-recherche { margin: 1.4rem 0 0.6rem; }
.pa-recherche label {
  display: block; font-size: 0.85rem; font-weight: 700;
  color: var(--encre); margin-bottom: 0.4rem;
}
.pa-recherche input {
  width: 100%; max-width: 480px;
  font-family: var(--corps); font-size: 1rem;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--bord); border-radius: var(--arrondi);
  background: var(--blanc); color: var(--texte);
}
.pa-recherche input:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px var(--bleu-pale); }
.pa-recherche-etat { font-size: 0.8rem; color: var(--texte-doux); margin: 0.45rem 0 0; }

/* ------------------------------------------------------------------
   OUTIL DE RECHERCHE D'ADRESSE
   ------------------------------------------------------------------ */
.pa-outil {
  background: var(--blanc); border: 1px solid var(--bord);
  border-left: 4px solid var(--bleu);
  border-radius: var(--arrondi-lg); padding: 1.3rem 1.4rem; margin: 1.6rem 0;
}
.pa-outil label { display: block; font-size: 0.85rem; font-weight: 700; color: var(--encre); margin-bottom: 0.5rem; }
.pa-outil-ligne { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pa-outil-ligne input {
  flex: 1 1 260px; min-width: 0;
  font-family: var(--corps); font-size: 1rem; padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--bord); border-radius: var(--arrondi);
  background: var(--fond); color: var(--texte);
}
.pa-outil-ligne input:focus { outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px var(--bleu-pale); }
.pa-outil-ligne .pa-bouton { flex: 0 0 auto; }
.pa-outil-aide { font-size: 0.8rem; color: var(--texte-doux); margin: 0.7rem 0 0; }
.pa-outil-resultat { margin-top: 1rem; font-size: 0.92rem; }
.pa-outil-resultat:empty { margin-top: 0; }
.pa-outil-resultat.est-trouve { border-top: 1px solid var(--bord); padding-top: 1rem; }
.pa-outil-resultat.est-vide { color: var(--rouge); font-weight: 600; }
.pa-outil-resultat.est-neutre { color: var(--texte-doux); }
.pa-outil-adresse { font-size: 1.02rem; margin-bottom: 0.5rem; }
.pa-outil-titre { font-weight: 700; color: var(--encre); margin: 0.9rem 0 0.35rem; font-size: 0.88rem; }
.pa-outil-stations { list-style: none; margin: 0 0 0.6rem; padding: 0; }
.pa-outil-stations li {
  padding: 0.45rem 0; border-bottom: 1px solid var(--bord); font-size: 0.92rem;
}
.pa-outil-stations li:last-child { border-bottom: none; }
.pa-contenu .pa-outil-stations { margin-left: 0; }
.pa-contenu .pa-outil-stations li { margin-bottom: 0; }

/* ------------------------------------------------------------------
   GRAPHIQUES SVG rendus par le serveur (inc/graphe.php)
   La couleur porte la donnee ; les styles sont ici pour que le SVG
   reste leger et suive le theme du site.
   ------------------------------------------------------------------ */
.pa-graphe-svg { margin: 1.7rem 0; }
.pa-svg {
  width: 100%; height: auto; display: block;
  background: var(--blanc); border: 1px solid var(--bord);
  border-radius: var(--arrondi-lg);
  font-family: var(--corps);
}
.pa-svg-grille { stroke: var(--bord); stroke-width: 1; }
.pa-svg-axe-ligne { stroke: var(--zinc); stroke-width: 1.4; }
.pa-svg-axe { font-size: 12px; fill: var(--texte-doux); }
.pa-svg-titre-axe { font-size: 12px; font-weight: 700; fill: var(--zinc); }
.pa-svg-zone { font-size: 11px; fill: var(--zinc); font-weight: 700; }
.pa-svg-aire { fill: var(--bleu); fill-opacity: 0.12; }
.pa-svg-courbe { fill: none; stroke: var(--bleu); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.pa-svg-point { fill: var(--rouge); stroke: var(--blanc); stroke-width: 2; }
.pa-svg-marque { font-size: 12px; font-weight: 800; fill: var(--rouge); }
.pa-svg-barre { fill: var(--bleu); }
.pa-svg-barre--neg { fill: var(--rouge); }
.pa-svg-valeur { font-size: 12px; font-weight: 700; fill: var(--encre); }

.pa-graphe-donnees { margin-top: 0.7rem; }
.pa-graphe-donnees summary {
  cursor: pointer; font-size: 0.85rem; font-weight: 700; color: var(--bleu);
  padding: 0.4rem 0;
}
.pa-graphe-donnees summary:hover { color: var(--rouge); }
.pa-graphe-donnees[open] summary { margin-bottom: 0.6rem; }

/* Variation dans un tableau : la couleur double le signe, elle ne le remplace pas. */
.pa-hausse { color: #1B5C36; font-weight: 700; white-space: nowrap; }
.pa-baisse { color: var(--rouge); font-weight: 700; white-space: nowrap; }

/* Ligne mise en avant dans un tableau de comparaison : un fond et un filet,
   pas une opacite sur les autres. */
.pa-tableau tr.pa-ligne-vedette td { background: var(--bleu-pale); border-top: 2px solid var(--bleu); border-bottom: 2px solid var(--bleu); }

/* Etiquette de rive : la couleur double le mot, elle ne le remplace pas. */
.pa-etiq {
  display: inline-block; padding: 0.18rem 0.55rem; border-radius: 14px;
  font-size: 0.76rem; font-weight: 800; white-space: nowrap;
}
.pa-etiq--gauche { background: var(--bleu-pale); color: var(--bleu); }
.pa-etiq--droite { background: var(--or-pale); color: #7A5E15; }

/* ============================================================
   HABITER PARIS : trois familles, sans photo
   Les cartes a vignette de la home pesent deja 640 Ko ; ce bloc
   oriente vers vingt-six pages sans ajouter un octet d'image.
   ============================================================ */
.pa-section--bleue { background: var(--bleu); color: var(--blanc); }
.pa-titre-section--clair h2 { color: var(--blanc); }
.pa-titre-section--clair .pa-soustitre { color: rgba(255, 255, 255, 0.78); }
.pa-titre-section--clair h2::after { background: var(--or-clair); }

.pa-familles {
  display: grid;
  /* Quatre familles : se loger, demarches, depannage et les services du
     quotidien. Avec trois colonnes, la quatrieme partait seule sur une
     deuxieme ligne et cassait l'equilibre du bloc. */
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ecart);
}
@media (max-width: 1240px) { .pa-familles { grid-template-columns: repeat(2, 1fr); } }
.pa-famille {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--arrondi-lg);
  padding: 1.75rem 1.6rem;
}
.pa-famille-etiquette {
  display: inline-block; font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 700;
  /* --or (#B08A2E) ne donne que 3,61:1 sur le bleu du bloc : suffisant pour
     du gros texte, pas pour une etiquette de 0,72 rem. --or-clair monte a
     7,04:1, mesure sur les deux teintes reelles. */
  color: var(--or-clair);
  margin-bottom: 0.6rem;
}
.pa-famille-titre { font-size: 1.35rem; margin: 0 0 0.7rem; line-height: 1.2; }
.pa-famille-titre a { color: var(--blanc); text-decoration: none; }
.pa-famille-titre a:hover { color: var(--or-clair); text-decoration: underline; }
.pa-famille-desc { color: rgba(255, 255, 255, 0.8); font-size: 0.95rem; margin: 0 0 1.1rem; }
.pa-famille-liens { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pa-famille-liens li { margin: 0; }
.pa-famille-liens a {
  display: inline-block; padding: 0.35rem 0.75rem;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px; color: var(--blanc);
  font-size: 0.85rem; text-decoration: none; transition: background 0.2s ease;
}
.pa-famille-liens a:hover { background: var(--or-clair); color: var(--bleu); border-color: var(--or-clair); }

@media (max-width: 1024px) { .pa-familles { grid-template-columns: 1fr; } }