/* Design system du site public du Lions Club Floreffe.
   Partagé par toutes les pages : les styles étaient auparavant en ligne dans
   index.html, ce qui n'était plus tenable dès la deuxième page.

   Le registre visuel est celui d'un document imprimé qui rend compte : le club
   récolte et redistribue, et son site raconte d'abord des chiffres et des noms.
   D'où le serif à caractère pour les titres, les filets qui structurent la page
   comme un rapport, et les montants traités en éditorial plutôt qu'en pastilles.

   Rien à voir avec l'application des balades, volontairement : celle-ci vit une
   journée, sur un stand, au soleil — elle est sombre, condensée, pressée. Le
   club, lui, dure depuis 1996. */

/* Fraunces porte les titres : un serif ancien légèrement irrégulier, chaleureux
   sans être solennel. C'est une police variable — un seul fichier couvre toutes
   les graisses, là où Google en servait deux copies identiques. */
@font-face {
  font-family:"Fraunces"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("/fonts/fraunces-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2212;
}
@font-face {
  font-family:"Fraunces"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("/fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family:"Public Sans"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/fonts/public-sans-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2212;
}
@font-face {
  font-family:"Public Sans"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/fonts/public-sans-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family:"Public Sans"; font-style:normal; font-weight:500; font-display:swap;
  src:url("/fonts/public-sans-500-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2212;
}
@font-face {
  font-family:"Public Sans"; font-style:normal; font-weight:500; font-display:swap;
  src:url("/fonts/public-sans-500-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family:"Public Sans"; font-style:normal; font-weight:600; font-display:swap;
  src:url("/fonts/public-sans-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2212;
}
@font-face {
  font-family:"Public Sans"; font-style:normal; font-weight:600; font-display:swap;
  src:url("/fonts/public-sans-600-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family:"Public Sans"; font-style:normal; font-weight:700; font-display:swap;
  src:url("/fonts/public-sans-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2212;
}
@font-face {
  font-family:"Public Sans"; font-style:normal; font-weight:700; font-display:swap;
  src:url("/fonts/public-sans-700-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-024F,U+1E00-1EFF,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  --blue:#0b3b8c;
  --blue-deep:#072a66;
  --blue-ink:#041b42;
  --gold:#f5b81d;
  --ink:#1c1814;          /* noir chaud plutôt que noir bleuté */
  --gray:#645c53;
  --gray-light:#746b60;   /* 4,7:1 minimum : lisible même en petit corps */
  --line:#eae3d9;         /* filets crème */
  --soft:#f7f2e9;         /* fond des sections alternées */
  --page:#fdfbf7;         /* blanc cassé chaud du corps de page */
  --page-profond:#f4efe4; /* crème plus dense, pour asseoir un bloc entier */
  --or-lisible:#8a6a00;   /* l'or ne passe pas en texte sur crème : voici sa voix */
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--sans);
  color:var(--ink);
  background:var(--page);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; }
img { display:block; max-width:100%; }
.wrap { max-width:1120px; margin:0 auto; padding:0 24px; }
.eyebrow {
  display:block; font-size:11px; font-weight:800; letter-spacing:.22em;
  text-transform:uppercase; margin-bottom:14px;
}

/* ---------- Nav ---------- */
header.nav {
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
header.nav .wrap { display:flex; align-items:center; justify-content:space-between; height:74px; gap:20px; }
.brand { display:flex; align-items:center; gap:13px; text-decoration:none; flex-shrink:0; }
.brand img { height:46px; width:auto; }
.brand .brand-txt { display:flex; flex-direction:column; line-height:1.15; }
.brand .brand-name { font-weight:800; font-size:15px; letter-spacing:-.01em; }
.brand .brand-sub { font-size:10.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--gray-light); }
nav.links { display:flex; gap:20px; font-size:13.5px; font-weight:600; margin-left:auto; }
nav.links a { white-space:nowrap; }
nav.links a { text-decoration:none; color:var(--gray); transition:color .15s; }
nav.links a:hover, nav.links a.is-active { color:var(--blue); }
.nav-cta {
  background:var(--blue); color:#fff; padding:11px 20px; border-radius:999px;
  font-weight:700; font-size:13px; text-decoration:none; white-space:nowrap;
  transition:background .15s, transform .15s;
}
.nav-cta:hover { background:var(--blue-deep); transform:translateY(-1px); }
.nav-membres {
  border:1px solid var(--line); color:var(--gray); padding:10px 16px; border-radius:999px;
  font-weight:700; font-size:13px; text-decoration:none; white-space:nowrap;
  transition:border-color .15s, color .15s, background .15s;
}
.nav-membres:hover { border-color:var(--blue); color:var(--blue); background:#f5f8ff; }
.nav-actions { display:flex; align-items:center; gap:10px; }
@media (max-width:620px) { .nav-membres { display:none; } }

/* « Nos prochains rendez-vous » allonge nettement la barre. Entre 860 et
   1040 px, le nom du club à côté du logo est ce qui se sacrifie le mieux :
   sans cela les liens déborderaient du conteneur. */
/* Quatre libellés dont « Nos prochains rendez-vous », plus deux boutons :
   à la largeur maximale du conteneur, le nom du club à côté du logo ne rentre
   plus. Le logo reste, et le nom figure dans le bandeau et le pied de page. */
@media (max-width:1120px) {
  .brand .brand-txt { display:none; }
}

/* ---------- Hero ---------- */
/* Le hero n'est plus un dégradé bleu à texte centré — le traitement le plus
   générique qui soit. Il devient une composition alignée à gauche, où le titre
   occupe vraiment l'espace et où le bleu du Lions sert d'encre profonde plutôt
   que de papier peint. Le grain doré, très discret, empêche l'aplat de paraître
   plat sur un grand écran. */
.hero {
  position:relative; overflow:hidden;
  background:
    radial-gradient(120% 90% at 88% -10%, rgba(245,184,29,.22), transparent 58%),
    radial-gradient(90% 70% at -10% 110%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(168deg, var(--blue-deep) 0%, var(--blue-ink) 100%);
  color:#fff; padding:88px 0 96px; text-align:left;
}
/* Filets de la grille, comme les réglures d'un registre. */
.hero::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:clamp(90px,9vw,140px) 100%;
  mask-image:linear-gradient(105deg, rgba(0,0,0,.9), transparent 72%);
}
.hero::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(245,184,29,.6),transparent);
}
.hero .inner { position:relative; z-index:1; }
.hero-badge {
  display:inline-block; margin:0 0 30px; padding:0; background:none; border:0;
}
.hero-badge img {
  height:78px; width:auto;
  /* Pas de filtre : brightness(0) invert(1) réduisait le logo à une tache
     blanche en écrasant le lettrage et les deux lions. Le fichier n'est pas
     carré (403 x 468) : une pastille ronde en rognait donc le bas. */
  background:#fff; border-radius:14px; padding:9px 12px;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.5);
}

.hero .eyebrow { color:var(--gold); }
.hero h1 {
  font-size:clamp(40px,7.2vw,82px); line-height:.98; letter-spacing:-.035em;
  margin:0 0 20px; max-width:15ch;
}
.hero p.lede {
  color:rgba(255,255,255,.82); font-size:clamp(16px,1.7vw,19px);
  line-height:1.62; max-width:46ch; margin:0 0 4px;
}
.hero-ctas { display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-start; }

/* Variante compacte, pour les pages intérieures */
.hero.hero-sm { padding:64px 0 68px; }
.hero.hero-sm h1 { font-size:clamp(28px,4.4vw,44px); }

/* inline-block et max-width sont indispensables : sans display, ces boutons
   restent des éléments en ligne, et leurs 30 px de marge interne débordent du
   conteneur sur écran étroit au lieu de laisser le texte passer à la ligne. */
.btn-gold, .btn-ghost {
  display:inline-block; max-width:100%; text-align:center;
  font-weight:800; font-size:14px; padding:16px 30px; border-radius:12px;
  text-decoration:none; transition:transform .15s, box-shadow .15s, background .15s;
}
.btn-gold { background:var(--gold); color:var(--blue-ink); box-shadow:0 8px 22px rgba(245,184,29,.28); }
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(245,184,29,.40); }
.btn-ghost { background:rgba(255,255,255,.09); color:#fff; border:1px solid rgba(255,255,255,.34); }
.btn-ghost:hover { background:rgba(255,255,255,.18); transform:translateY(-2px); }
.btn-blue {
  display:inline-block; max-width:100%; text-align:center; background:var(--blue); color:#fff; font-weight:800; font-size:14px;
  padding:15px 28px; border-radius:12px; text-decoration:none; transition:background .15s, transform .15s;
}
.btn-blue:hover { background:var(--blue-deep); transform:translateY(-2px); }
.btn-outline {
  display:inline-block; max-width:100%; text-align:center; border:1px solid var(--line); color:var(--blue); background:#fff;
  font-weight:800; font-size:14px; padding:14px 26px; border-radius:12px; text-decoration:none;
  transition:border-color .15s, background .15s, transform .15s;
}
.btn-outline:hover { border-color:var(--blue); background:#f5f8ff; transform:translateY(-2px); }

/* ---------- Sections ---------- */
section { padding:96px 0; }
section.soft { background:var(--soft); }
.section-head { text-align:center; max-width:680px; margin:0 auto 56px; }
.section-head .eyebrow { color:var(--blue); }
.section-head h2 {
  font-size:clamp(26px,3.4vw,38px); font-weight:900;
  letter-spacing:-.025em; line-height:1.15; margin-bottom:16px;
}
.section-head h2::after {
  content:""; display:block; width:52px; height:3px; border-radius:2px;
  background:var(--gold); margin:18px auto 0;
}
.section-head p { color:var(--gray); font-size:16.5px; }

/* Citation d'ouverture */
.citation { background:var(--soft); padding:76px 0; }
.citation blockquote {
  max-width:820px; margin:0 auto; text-align:center; position:relative;
  padding-top:44px;
}
.citation blockquote::before {
  content:"\201C"; position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  font-size:88px; line-height:1; color:var(--gold); font-family:Georgia,"Times New Roman",serif;
}
.citation p {
  font-size:clamp(19px,2.6vw,26px); font-weight:600; line-height:1.5;
  letter-spacing:-.015em; color:var(--ink);
}
.citation footer {
  background:none; border:0; padding:22px 0 0;
  font-size:13px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gray-light);
}

/* Qui sommes-nous */
/* Le texte de présentation n'est plus flanqué d'une vignette : la photo est
   passée en pleine largeur. Il se lit donc comme un article — une accroche
   pleine mesure, puis le corps en deux colonnes sur grand écran, ce qui évite
   des lignes de cent caractères. */
.about { max-width:860px; margin:0 auto; }
.about .lead-line {
  font-family:var(--serif); font-variation-settings:"opsz" 30, "SOFT" 40;
  font-size:clamp(20px,2.2vw,26px); font-weight:500; line-height:1.42;
  color:var(--ink); margin:0 0 26px; letter-spacing:-.01em;
}
.about > div > p:not(.lead-line) { margin:0 0 16px; }
@media (min-width:900px) {
  .about > div { columns:2; column-gap:44px; }
  .about .lead-line { column-span:all; }
}

/* Photo : léger débord et ombre chaude, pour qu'elle respire au lieu d'être
   posée à plat dans la grille. */
.photo-cadre { position:relative; border-radius:20px; overflow:hidden;
  box-shadow:0 22px 50px rgba(28,24,20,.16); }
.photo-cadre img { width:100%; height:100%; object-fit:cover; display:block; }
.photo-legende {
  margin-top:14px; font-size:13px; color:var(--gray-light);
  font-weight:600; text-align:center;
}

/* Les chiffres passent sous le texte, la photo prenant leur colonne. */
.stats-ligne { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:14px; margin-top:44px; }

/* Galerie « La vie du club » */
.galerie { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; }
.galerie figure {
  background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden;
  transition:transform .18s, box-shadow .18s;
}
.galerie figure:hover { transform:translateY(-5px); box-shadow:0 18px 44px rgba(28,24,20,.12); }
.galerie img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.galerie figcaption { padding:20px 22px; }
.galerie .quand {
  display:block; font-size:11px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-ink,#8a6206); margin-bottom:6px;
}
.galerie .titre { display:block; font-size:16px; font-weight:800; letter-spacing:-.01em; margin-bottom:6px; }
.galerie .texte { font-size:14px; color:var(--gray); }

/* Bandeau photo pleine largeur */
.bandeau-photo { max-width:1120px; margin:0 auto; padding:0 24px; }
.bandeau-photo .photo-cadre { max-height:420px; }
.bandeau-photo img { max-height:420px; }

@media (max-width:860px) {
  .about { grid-template-columns:1fr; }
}
.about p { color:var(--gray); font-size:16.5px; margin-bottom:18px; }
.about p:last-child { margin-bottom:0; }
/* .about .lead-line est défini plus haut, en traitement d'accroche. */
.stats { display:grid; gap:14px; }
.stat {
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:22px 26px; display:flex; align-items:baseline; gap:16px;
}
.stat .num { font-size:30px; font-weight:900; color:var(--blue); letter-spacing:-.03em; line-height:1; }
.stat .label { font-size:13px; color:var(--gray); font-weight:600; }

/* Cartes */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px; }
.card {
  background:#fff; border:1px solid var(--line); border-radius:18px; padding:30px 28px;
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.card:hover { transform:translateY(-5px); box-shadow:0 16px 40px rgba(11,59,140,.10); border-color:#d3dced; }
.card .icon {
  width:48px; height:48px; border-radius:14px;
  background:linear-gradient(140deg, rgba(11,59,140,.10), rgba(245,184,29,.18));
  display:flex; align-items:center; justify-content:center; font-size:21px; margin-bottom:18px;
}
.card h3 { font-size:16.5px; font-weight:800; margin-bottom:9px; letter-spacing:-.01em; }
.card p { color:var(--gray); font-size:14.5px; }
.card .when {
  display:inline-block; margin-top:14px; font-size:12px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:var(--blue);
}

/* Agenda */
.agenda-feature {
  display:grid; grid-template-columns:300px 1fr; gap:44px; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:22px;
  padding:34px; box-shadow:0 12px 40px rgba(11,59,140,.07);
}
.agenda-feature img { border-radius:14px; width:100%; box-shadow:0 8px 26px rgba(0,0,0,.16); }
/* L'affiche s'agrandit au clic : le curseur l'annonce avant même le clic. */
.agenda-feature img[data-agrandir] { cursor:zoom-in; }
.agenda-feature img[data-agrandir]:hover { opacity:.92; }
.pill {
  display:inline-block; background:rgba(245,184,29,.18); color:#8a6206;
  font-size:11.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 13px; border-radius:999px; margin-bottom:16px;
}
.agenda-feature h3 { font-size:clamp(20px,2.5vw,27px); font-weight:900; letter-spacing:-.02em; line-height:1.2; margin-bottom:12px; }
.agenda-feature .meta { color:var(--gray); font-size:15px; margin-bottom:18px; }
.facts { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px; }
.fact {
  background:var(--soft); border:1px solid var(--line); border-radius:10px;
  padding:9px 14px; font-size:13.5px; font-weight:600; color:var(--gray);
}
.fact strong { color:var(--ink); }
.agenda-next {
  margin-top:18px; background:#fff; border:1px dashed var(--line); border-radius:16px;
  padding:24px 28px; text-align:center;
}
.agenda-next p { color:var(--gray-light); font-size:14.5px; }

/* Annonces d'événements — saisies par les administrateurs depuis l'espace membres.
   Elles reprennent la carte .agenda-feature du Rassemblement : même gabarit,
   même poids visuel, pour que la vitrine ne change pas de langage d'une édition
   à l'autre. */
.agenda-liste { display:grid; gap:22px; }
.agenda-liste[hidden], .agenda-next[hidden] { display:none; }
/* Sans annonce, la section ne garde que sa phrase d'attente. Placée sous le
   héros, elle ne doit pas y ouvrir un grand vide : on la resserre. */
#agenda:has(#agenda-vide:not([hidden])) { padding-top:52px; padding-bottom:52px; }
#agenda:has(#agenda-vide:not([hidden])) .section-head { margin-bottom:28px; }
.agenda-feature .desc {
  color:var(--gray); font-size:15px; line-height:1.65; margin-bottom:6px;
  white-space:pre-line;               /* garde les retours à la ligne saisis */
  overflow-wrap:anywhere;             /* un long lien ne doit pas déborder */
}
.agenda-feature.passe { opacity:.7; }
.pill.pill-passe { background:var(--soft); color:var(--gray); }
/* Sans affiche : une vignette qui a l'air voulue plutôt qu'un trou. */
.affiche-attente {
  aspect-ratio:4/3; width:100%; border-radius:14px;
  background:var(--soft); border:1px dashed #d9cfbe;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:20px; text-align:center;
}
.affiche-attente strong {
  font-family:var(--serif); font-size:24px; font-weight:600; color:var(--blue);
}
.affiche-attente span { font-size:13px; color:var(--gray-light); }

/* Visionneuse plein écran pour agrandir une affiche. z-index au-dessus de
   tout le reste du site (le bandeau collant culmine à 50). */
.lightbox {
  position:fixed; inset:0; z-index:999; background:rgba(15,13,10,.9);
  display:flex; align-items:center; justify-content:center; padding:28px;
  cursor:zoom-out;
  opacity:0; visibility:hidden; transition:opacity .18s ease;
}
.lightbox.ouverte { opacity:1; visibility:visible; }
.lightbox img {
  max-width:min(92vw, 900px); max-height:88vh; width:auto; height:auto;
  border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.5);
  cursor:default;
}
.lightbox-fermer {
  position:absolute; top:20px; right:20px; width:42px; height:42px;
  border-radius:50%; border:none; background:rgba(255,255,255,.12); color:#fff;
  font-size:22px; line-height:1; cursor:pointer; display:flex;
  align-items:center; justify-content:center; transition:background .15s ease;
}
.lightbox-fermer:hover { background:rgba(255,255,255,.22); }

/* ---------- Réseaux sociaux ---------- */
.reseaux { display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:760px; margin:0 auto; }
.reseau-carte {
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:38px 28px; border-radius:20px; text-decoration:none;
  background:#fff; border:1px solid var(--line); color:var(--ink);
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.reseau-carte:hover { transform:translateY(-5px); box-shadow:0 18px 44px rgba(28,24,20,.10); }
.reseau-carte .rond {
  width:62px; height:62px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.reseau-carte .rond svg { width:30px; height:30px; }
.reseau-carte .titre { font-size:17px; font-weight:800; letter-spacing:-.01em; }
.reseau-carte .quoi { font-size:14px; color:var(--gray); text-align:center; }
.reseau-carte .aller { font-size:13px; font-weight:800; letter-spacing:.04em; }

.carte-fb .rond { background:#1877f2; }
.carte-fb:hover { border-color:#1877f2; }
.carte-fb .aller { color:#1877f2; }
.carte-ig .rond { background:linear-gradient(45deg,#f09433,#dc2743 45%,#bc1888); }
.carte-ig:hover { border-color:#bc1888; }
.carte-ig .aller { color:#bc1888; }

@media (max-width:560px) { .reseaux { grid-template-columns:1fr; } }

/* ---------- Bandeau CTA ---------- */
.cta-band {
  background:
    radial-gradient(700px 340px at 50% 0%, rgba(245,184,29,.14), transparent 65%),
    linear-gradient(165deg, var(--blue-ink), #020f26);
  color:#fff; text-align:center; padding:88px 0;
}
.cta-band h2 { font-size:clamp(24px,3.2vw,34px); font-weight:900; letter-spacing:-.025em; margin-bottom:14px; }
.cta-band p { color:rgba(255,255,255,.68); margin:0 auto 30px; max-width:560px; font-size:16px; }

/* ---------- Pied de page ---------- */
footer { background:#fff; border-top:1px solid var(--line); padding:46px 0; }
footer .foot-social-label { color:var(--gray-light); }
footer .wrap { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:22px 30px; }
footer .foot-brand { font-weight:800; font-size:14.5px; }
footer .foot-sub { color:var(--gray-light); font-size:12.5px; margin-top:5px; }
footer .foot-copy { color:var(--gray-light); font-size:12px; margin-top:9px; }
footer .foot-links { display:flex; gap:24px; font-size:13.5px; font-weight:600; flex-wrap:wrap; }
footer .foot-links a { text-decoration:none; color:var(--gray); transition:color .15s; }
footer .foot-links a:hover { color:var(--blue); }


/* Sur mobile, les libellés longs — « Réserver une balade ou inscrire ma
   voiture » — ont besoin de plus de place que de rembourrage. */
@media (max-width:560px) {
  .btn-gold, .btn-ghost, .btn-blue, .btn-outline {
    padding:14px 20px; font-size:13.5px; line-height:1.35;
  }
  .hero-ctas { flex-direction:column; align-items:stretch; }
  .hero-ctas a { width:100%; }
}

/* Réseaux sociaux : un bloc identifié plutôt que deux liens noyés dans la
   liste, et les couleurs de marque au survol pour qu'on les reconnaisse. */
footer .foot-social { display:flex; align-items:center; gap:12px; }
footer .foot-social-label {
  font-size:12px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gray-light);
}
footer .social {
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--line); background:var(--soft); color:var(--gray);
  transition:color .18s, border-color .18s, background .18s, transform .18s;
}
footer .social svg { width:20px; height:20px; }
footer .social:hover { transform:translateY(-2px); color:#fff; }
footer .social-fb:hover { background:#1877f2; border-color:#1877f2; }
footer .social-ig:hover {
  background:linear-gradient(45deg,#f09433,#dc2743 45%,#bc1888);
  border-color:#bc1888;
}

@media (max-width:860px) {
  nav.links { display:none; }
  .about { grid-template-columns:1fr; gap:38px; }
  .agenda-feature { grid-template-columns:1fr; gap:28px; padding:26px; }
  .agenda-feature img { max-width:280px; margin:0 auto; }
  .affiche-attente { max-width:280px; margin:0 auto; }
  section { padding:70px 0; }
  .hero { padding:72px 0 80px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Refonte : le registre
   ═══════════════════════════════════════════════════════════════════════ */

/* Les titres passent au serif. Fraunces a un axe optique : réglé bas, ses
   empattements s'épaississent et le dessin se réchauffe — ce qu'on veut pour
   un club, pas pour un journal financier. */
h1, h2, h3, blockquote p, .chiffre-editorial .valeur {
  font-family:var(--serif);
  font-variation-settings:"opsz" 40, "SOFT" 30;
  font-weight:700;
  letter-spacing:-.015em;
  line-height:1.08;
  text-wrap:balance;
}

/* Les chiffres s'alignent partout où ils se comparent. */
.chiffres, .stat .num, .aide-chiffre .num, .chiffre .num { font-variant-numeric:tabular-nums; }

/* ---------- Le surtitre, posé sur un filet ---------- */
.eyebrow {
  display:flex; align-items:center; gap:12px;
  color:var(--or-lisible);
}
.eyebrow::before {
  content:""; flex:0 0 34px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--blue));
}
.section-head .eyebrow, .hero .eyebrow { justify-content:flex-start; }
.hero .eyebrow, .cta-band .eyebrow { color:var(--gold); }
.hero .eyebrow::before { background:linear-gradient(90deg,var(--gold),rgba(255,255,255,.35)); }

/* ---------- Le chiffre éditorial ----------
   Les montants sont le récit du club : ils étaient rendus en petit dans des
   boîtes blanches identiques. Ils deviennent des figures, posées sur un filet,
   avec l'unité en retrait. */
.chiffres-editoriaux {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:0; border-top:1px solid var(--line);
}
.chiffre-editorial {
  padding:30px 28px 26px 0; border-bottom:1px solid var(--line);
}
.chiffre-editorial + .chiffre-editorial { padding-left:28px; border-left:1px solid var(--line); }
.chiffre-editorial .valeur {
  display:block; font-size:clamp(38px,5.2vw,58px); line-height:.95;
  color:var(--blue); letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.chiffre-editorial .valeur .unite {
  font-size:.44em; letter-spacing:0; color:var(--or-lisible); margin-left:.15em;
}
.chiffre-editorial .label {
  display:block; margin-top:10px; font-size:13.5px; font-weight:600;
  color:var(--gray); line-height:1.45; max-width:24ch;
}

/* ---------- Filet de séparation, emprunté au papier ---------- */
.filet-double {
  height:3px; border:0; margin:0;
  background:linear-gradient(90deg,var(--blue) 0 22%,var(--gold) 22% 30%,var(--line) 30% 100%);
}

/* ---------- Photographie à pleine largeur ---------- */
.photo-pleine {
  position:relative; margin:64px 0 56px; overflow:hidden;
}
.photo-pleine img { width:100%; height:clamp(280px,46vw,520px); object-fit:cover; }
.photo-pleine figcaption {
  position:absolute; left:0; right:0; bottom:0; padding:26px 24px 18px;
  background:linear-gradient(to top,rgba(4,27,66,.86),transparent);
  color:#fff; font-size:13.5px; font-weight:600; letter-spacing:.01em;
}

/* Variante en colonne : les mêmes figures empilées, quand elles accompagnent
   un texte plutôt que de tenir toute la largeur. */
.chiffres-colonne { grid-template-columns:1fr; }
.chiffres-colonne .chiffre-editorial { padding:22px 0 20px; }
.chiffres-colonne .chiffre-editorial + .chiffre-editorial { padding-left:0; border-left:0; }
.chiffres-colonne .valeur { font-size:clamp(32px,3.6vw,44px); }

/* Les noms de bénéficiaires cessent d'être des pastilles blanches flottantes :
   ils deviennent une liste, parce que c'en est une. */
.beneficiaires { display:flex; flex-wrap:wrap; gap:0 18px; margin:22px 0 30px; }
.beneficiaires span {
  background:none; border:0; border-radius:0; padding:6px 0;
  font-size:15px; font-weight:500; color:var(--ink);
  display:inline-flex; align-items:center; gap:9px;
}
.beneficiaires span::before {
  content:""; width:5px; height:5px; border-radius:50%; background:var(--gold); flex:0 0 5px;
}

/* Les chiffres du réseau international sont secondaires : ils gardent le sans,
   mais reprennent le filet et l'alignement des figures principales. */
.reseau { border-top:1px solid var(--line); padding-top:26px; }
.reseau div { text-align:left; }
.reseau .num {
  font-family:var(--serif); font-variation-settings:"opsz" 30;
  font-size:27px; font-weight:700; color:var(--blue); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}

/* ---------- Pages intérieures ---------- */
/* Le hero court des pages secondaires suit le même registre que l'accueil :
   aligné à gauche, réglures discrètes, titre au serif. */
.hero-sm { padding:66px 0 62px; }
.hero-sm h1 { font-size:clamp(34px,5.4vw,58px); max-width:18ch; }
.hero-sm .lede { max-width:52ch; }

/* La liste des bénéficiaires : une vraie liste de noms, en colonnes, avec des
   filets — comme l'index d'un rapport annuel plutôt qu'une carte blanche. */
.liste-benef {
  background:none; border:0; border-radius:0; padding:0;
  border-top:1px solid var(--line);
}
.liste-benef li {
  padding:11px 0 11px 20px; border-bottom:1px solid var(--line);
  font-weight:500; font-size:15.5px; color:var(--ink);
}
.liste-benef li::before { top:19px; }

/* Les vignettes de sponsors : plaque blanche, filet discret, ombre douce. */
.sponsor { border-color:var(--line); }
.sponsor-nom { font-weight:600; letter-spacing:-.005em; }

/* Les figures ont besoin d'air avant le titre qui suit : sans cela le chiffre
   et le titre se lisent comme un seul bloc. */
.chiffres-editoriaux + .section-head { margin-top:52px; }

/* ═══════════════════════════════════════════════════════════════════════
   Le mur des bénéficiaires
   ═══════════════════════════════════════════════════════════════════════

   La preuve de ce que fait ce club, ce sont quarante-cinq noms. Ils vivaient
   sur une page annexe, résumés en sept pastilles sur l'accueil. Ils deviennent
   ici la signature visuelle de la page : un bandeau continu, comme le mur des
   donateurs d'une institution — un objet qui existe vraiment dans ce monde-là.

   Deux rangs qui glissent en sens contraire : un seul rang lirait comme un
   bandeau publicitaire, deux rangs contraires lisent comme une matière. */

.mur { position:relative; overflow:hidden; padding:26px 0; }
.mur::before, .mur::after {
  content:""; position:absolute; top:0; bottom:0; width:14%; z-index:2; pointer-events:none;
}
.mur::before { left:0;  background:linear-gradient(90deg,var(--fond-mur),transparent); }
.mur::after  { right:0; background:linear-gradient(270deg,var(--fond-mur),transparent); }

.mur-rang { display:flex; width:max-content; will-change:transform; }
.mur-rang + .mur-rang { margin-top:10px; }
.mur-piste { display:flex; flex-shrink:0; }

.mur-nom {
  display:inline-flex; align-items:center; gap:14px;
  padding:0 20px; white-space:nowrap;
  font-size:clamp(15px,1.5vw,18px); font-weight:500; letter-spacing:-.005em;
}
.mur-nom::after {
  content:""; width:5px; height:5px; border-radius:50%; background:var(--gold);
  opacity:.75; flex:0 0 5px;
}

@keyframes mur-gauche { from { transform:translate3d(0,0,0); } to { transform:translate3d(-50%,0,0); } }
@keyframes mur-droite { from { transform:translate3d(-50%,0,0); } to { transform:translate3d(0,0,0); } }
.mur-rang--1 { animation:mur-gauche 92s linear infinite; }
.mur-rang--2 { animation:mur-droite 78s linear infinite; }
.mur:hover .mur-rang { animation-play-state:paused; }

@media (prefers-reduced-motion:reduce) {
  .mur-rang { animation:none; }
  .mur { overflow-x:auto; }
}

/* Sur le bleu du hero. */
.hero .mur { --fond-mur:var(--blue-ink); }
.hero .mur-nom { color:rgba(255,255,255,.72); }
.mur-titre {
  margin:52px 0 4px; font-size:11px; font-weight:800; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(255,255,255,.5);
}

/* Les deux chiffres du hero : la durée et la preuve. Ils remplacent une phrase
   d'introduction supplémentaire — un chiffre se retient, un paragraphe non. */
.hero-preuve {
  display:flex; flex-wrap:wrap; gap:0 56px; margin:34px 0 32px;
  padding-top:26px; border-top:1px solid rgba(255,255,255,.16);
}
.hero-preuve .valeur {
  display:block; font-family:var(--serif); font-variation-settings:"opsz" 60;
  font-size:clamp(40px,5vw,60px); font-weight:700; line-height:.92;
  color:#fff; letter-spacing:-.035em; font-variant-numeric:tabular-nums;
}
.hero-preuve .unite {
  font-size:.36em; letter-spacing:0; color:var(--gold); margin-left:.18em;
}
.hero-preuve .label {
  display:block; margin-top:10px; font-size:13px; font-weight:600;
  color:rgba(255,255,255,.62); max-width:26ch; line-height:1.45;
}