/* ==========================================================
   Volant des Costières (V.C 30) — feuille de style commune
   Jetons de charte + composants. Version 0.1
   Polices : Barlow Condensed (titres) + Figtree (texte)
   ========================================================== */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Figtree:wght@400;500;600;700&display=swap");

:root {
  /* Couleurs — orange prélevé sur le maillot (#FF5200), le reste en retrait */
  --orange: #FF5200;
  --orange-texte: #C63B00;      /* orange lisible en texte sur fond clair (contraste ≥ 4,5:1) */
  --orange-pale: #FFB48A;
  --orange-voile: #FFF1E9;
  --encre: #1B1D22;             /* noir des manches */
  --ardoise: #4A4E57;
  --argent: #C9BDBF;            /* gris du bas du maillot */
  --brume: #F5F5F6;
  --trait: #E4E2E3;
  --blanc: #FFFFFF;

  /* Typographie */
  --f-titre: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-texte: "Figtree", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  /* Espacement (base 8) et rayons */
  --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem; --s5: 3rem; --s6: 5rem;
  --r-s: 6px; --r-m: 14px; --r-l: 28px;
  --largeur: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--blanc); color: var(--encre);
  font-family: var(--f-texte); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--orange-texte); text-underline-offset: .18em; }
a:hover { color: var(--encre); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
.conteneur { width: min(100% - 2.5rem, var(--largeur)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Titres */
h1, h2, h3, .titre {
  font-family: var(--f-titre); font-weight: 700; line-height: 1.02;
  letter-spacing: .005em; margin: 0 0 var(--s2); text-wrap: balance;
}
h1 { font-size: clamp(3rem, 8vw, 5.75rem); }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.25rem); }
h3 { font-size: 1.65rem; font-weight: 600; }
p { margin: 0 0 var(--s2); max-width: 66ch; }
.chapeau { font-size: 1.25rem; color: var(--ardoise); max-width: 52ch; }
.petit { font-size: .9rem; color: var(--ardoise); }

/* Boutons */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  font: 600 1rem/1 var(--f-texte); padding: .95rem 1.5rem; border-radius: 999px;
  border: 2px solid transparent; text-decoration: none; transition: background .15s, color .15s, border-color .15s;
}
.btn-primaire { background: var(--orange); color: var(--encre); }
.btn-primaire:hover { background: var(--encre); color: var(--blanc); }
.btn-secondaire { background: transparent; color: var(--encre); border-color: var(--encre); }
.btn-secondaire:hover { background: var(--encre); color: var(--blanc); }
.btn-clair { background: var(--blanc); color: var(--encre); }
.btn-clair:hover { background: var(--orange); }

/* En-tête */
.entete { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--trait); }
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 72px; }
.marque { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--encre); }
.marque img { width: 60px; height: 60px; object-fit: contain; }
.marque span { font-family: var(--f-titre); font-weight: 700; font-size: 1.5rem; line-height: 1; }
.marque small { display: block; font: 500 .75rem/1.2 var(--f-texte); color: var(--ardoise); }
.nav { display: flex; align-items: center; gap: 1.5rem; }
.nav a { color: var(--encre); text-decoration: none; font-weight: 500; padding: .25rem 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--orange); }
.nav .btn { padding: .7rem 1.2rem; border-bottom: 2px solid transparent; }
.nav .btn:hover { border-bottom-color: transparent; }
.menu-toggle { display: none; }
@media (max-width: 860px) {
  .menu-toggle { display: inline-flex; background: none; border: 2px solid var(--encre); border-radius: 999px; padding: .55rem 1rem; font: 600 .95rem var(--f-texte); cursor: pointer; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 72px; background: var(--blanc); flex-direction: column; align-items: flex-start; padding: var(--s3) 1.25rem var(--s4); border-bottom: 1px solid var(--trait); }
  .nav.ouvert { display: flex; }
}

/* Section */
.section { padding-block: var(--s6); }
.section-brume { background: var(--brume); }
.section-tete { margin-bottom: var(--s4); }

/* Hero */
.hero { position: relative; overflow: hidden; background: var(--blanc); padding-block: clamp(3rem, 8vw, 6rem) clamp(4rem, 9vw, 7rem); }
.hero .conteneur { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s4); align-items: center; }
.hero h1 { margin-bottom: var(--s3); }
.hero .actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.hero-visuel { position: relative; }
.hero-visuel::before { content: ""; position: absolute; inset: 6% 0 0 8%; background: var(--orange-voile); border-radius: 40% 60% 55% 45% / 55% 45% 60% 40%; }
.plumes { position: relative; width: 100%; height: auto; }
.plume { transform-box: fill-box; transform-origin: 0% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .plume { animation: deploiement .9s cubic-bezier(.2,.8,.2,1) both; }
  .plume.p1 { animation-delay: .08s; } .plume.p2 { animation-delay: .16s; }
  .plume.p3 { animation-delay: .24s; } .plume.p4 { animation-delay: .32s; }
}
@keyframes deploiement { from { transform: scale(.05); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (max-width: 860px) {
  .hero .conteneur { grid-template-columns: 1fr; }
  .hero-visuel { max-width: 420px; margin-inline: auto; order: -1; }
}

/* Bandeau infos rapides */
.infos { margin-top: -3rem; position: relative; z-index: 2; }
.infos-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.info { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-m); padding: var(--s3); box-shadow: 0 10px 30px -18px rgba(27,29,34,.35); }
.info h3 { font-size: 1.4rem; margin-bottom: .35rem; }
.info p { margin: 0; color: var(--ardoise); font-size: 1rem; }
@media (max-width: 860px) { .infos-grille { grid-template-columns: 1fr; } .infos { margin-top: -2rem; } }

/* Cartes génériques */
.grille-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); align-items: start; }
.grille-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
@media (max-width: 860px) { .grille-2, .grille-3 { grid-template-columns: 1fr; } }
.carte { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-m); padding: var(--s3); }
.carte-actu { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.carte-actu .vignette { aspect-ratio: 16/10; background: var(--orange-voile); display: grid; place-items: center; color: var(--orange-texte); font-weight: 600; font-size: .9rem; border-bottom: 1px solid var(--trait); }
.carte-actu .corps { padding: var(--s3); }
.carte-actu time { font-size: .85rem; color: var(--ardoise); }
.carte-actu h3 { margin: .25rem 0 .5rem; }

/* Étiquettes de niveau */
.puce { display: inline-block; font: 600 .8rem/1 var(--f-texte); padding: .4rem .7rem; border-radius: 999px; background: var(--orange-voile); color: var(--orange-texte); }
.puce-encre { background: var(--encre); color: var(--blanc); }
.puce-neutre { background: var(--brume); color: var(--ardoise); border: 1px solid var(--trait); }

/* Tableau des créneaux */
.tableau-wrap { overflow-x: auto; border: 1px solid var(--trait); border-radius: var(--r-m); background: var(--blanc); }
table { width: 100%; border-collapse: collapse; min-width: 560px; }
th, td { text-align: left; padding: 1rem 1.25rem; border-bottom: 1px solid var(--trait); vertical-align: top; }
th { font-family: var(--f-titre); font-size: 1.15rem; font-weight: 600; background: var(--brume); }
tr:last-child td { border-bottom: 0; }
td strong { font-family: var(--f-titre); font-size: 1.3rem; font-weight: 600; }

/* À compléter (repère visuel pour les maquettes) */
.a-completer { border: 2px dashed var(--orange-pale); background: var(--orange-voile); border-radius: var(--r-m); padding: var(--s3); color: var(--orange-texte); font-weight: 500; }

/* Bandeau sombre (inscription) */
.bande-encre { background: var(--encre); color: var(--blanc); position: relative; overflow: hidden; }
.bande-encre h2, .bande-encre p { color: var(--blanc); }
.bande-encre .chapeau { color: #D8D8DB; }
.bande-encre::after { content: ""; position: absolute; right: -8%; top: -30%; width: 46%; height: 160%; background: var(--orange); transform: skewX(-18deg); opacity: .95; }
.bande-encre .conteneur { position: relative; z-index: 1; display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--s4); align-items: center; }
.liste-regles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.liste-regles li { background: var(--blanc); color: var(--encre); border-radius: var(--r-m); padding: var(--s2) var(--s3); font-weight: 500; }
@media (max-width: 860px) { .bande-encre .conteneur { grid-template-columns: 1fr; } .bande-encre::after { width: 30%; opacity: .35; } }

/* Équipe / bureau */
.personne { display: flex; align-items: center; gap: var(--s2); }
.avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--orange-voile); color: var(--orange-texte); display: grid; place-items: center; font: 700 1.5rem var(--f-titre); flex: none; }
.personne strong { display: block; line-height: 1.2; }

/* Partenaires */
.partenaires { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); }
.partenaire { display: grid; place-items: center; text-align: center; min-height: 96px; padding: var(--s2); border: 1px solid var(--trait); border-radius: var(--r-m); background: var(--blanc); font-weight: 600; color: var(--ardoise); }
.partenaire.vide { border-style: dashed; color: var(--argent); font-weight: 500; }
@media (max-width: 860px) { .partenaires { grid-template-columns: repeat(2, 1fr); } }

/* Pied de page */
.pied { background: var(--encre); color: #D8D8DB; padding-block: var(--s5) var(--s3); }
.pied a { color: var(--blanc); }
.pied a:hover { color: var(--orange); }
.pied-grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s4); }
.pied h3 { color: var(--blanc); font-size: 1.25rem; }
.pied img { width: 84px; margin-bottom: var(--s2); }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.pied .mentions { margin-top: var(--s4); padding-top: var(--s2); border-top: 1px solid #33363d; font-size: .85rem; }
@media (max-width: 860px) { .pied-grille { grid-template-columns: 1fr; } }

/* Formulaires */
.champ { display: grid; gap: .4rem; margin-bottom: var(--s2); }
.champ label { font-weight: 600; font-size: .95rem; }
.champ input, .champ select, .champ textarea {
  font: inherit; padding: .85rem 1rem; border: 2px solid var(--argent); border-radius: var(--r-s); background: var(--blanc); color: var(--encre);
}
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px var(--orange-voile); }

@media print { .entete, .menu-toggle { display: none; } }

/* Volant du logo en grand (accueil) */
.hero-volant::before { inset: 0 -4% -4% 10%; }
.hero-volant img { position: relative; width: 100%; height: auto; max-width: none; margin-left: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hero-volant img { animation: arrivee .8s cubic-bezier(.2,.8,.2,1) both; }
}
@keyframes arrivee { from { transform: translate(40px,-30px) rotate(6deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 860px) { .hero-volant img { width: 100%; margin-left: 0; } }

/* ---- Rappels du logo ---- */
/* 1. Petit volant devant chaque titre de section */
.section h2::before, .bande-encre h2::before {
  content: ""; display: inline-block; width: .72em; height: .6em; margin-right: .3em; vertical-align: -.02em;
  background: url("../img/volant-orange-petit.png") center / contain no-repeat;
}
/* 2. Raquette du logo à la place du « o » dans le titre d'accueil */
.mot { white-space: nowrap; }
.o-raquette { display: inline-block; position: relative; width: .58em; height: .69em; margin-inline: .02em; vertical-align: -.02em; }
.o-raquette img { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; }
/* 3. Volants comme puces de liste */
.liste-regles li { position: relative; padding-left: 3.1rem; }
.liste-regles li::before {
  content: ""; position: absolute; left: 1.1rem; top: 1.15rem; width: 1.1rem; height: .9rem;
  background: url("../img/volant-orange-petit.png") center / contain no-repeat;
}
/* 4. Grand volant en filigrane dans le pied de page */
.pied { position: relative; overflow: hidden; }
.pied::after {
  content: ""; position: absolute; right: -40px; bottom: -60px; width: 340px; height: 276px; opacity: .06; pointer-events: none;
  background: url("../img/volant-blanc.png") center / contain no-repeat;
}
.pied .conteneur { position: relative; z-index: 1; }
/* Titres de la page charte : pas d'icône sur le titre principal */
h1::before { content: none; }

/* ---- Pages intérieures ---- */
.page-tete { position: relative; overflow: hidden; background: var(--brume); padding-block: clamp(2.5rem, 6vw, 4.5rem); border-bottom: 1px solid var(--trait); }
.page-tete .conteneur { position: relative; z-index: 1; }
.page-tete h1 { font-size: clamp(2.75rem, 7vw, 4.5rem); margin-bottom: .5rem; }
.page-tete p { margin-bottom: 0; }
/* rappel du logo : volant très pâle à droite de l'en-tête */
.page-tete::after {
  content: ""; position: absolute; right: 4%; top: 50%; width: 230px; height: 187px; transform: translateY(-50%);
  opacity: .07; pointer-events: none; background: url("../img/volant-encre.png") center / contain no-repeat;
}
@media (max-width: 860px) { .page-tete::after { width: 140px; height: 114px; right: -14px; } }

/* Cartes d'infos cliquables (accueil) */
.info-lien { display: block; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.info-lien:hover { border-color: var(--orange); color: inherit; }
.info-lien h3 { color: var(--encre); }
.lien-suite { margin: var(--s3) 0 0; }

/* Étapes d'inscription (vraie séquence : numérotation justifiée) */
.etapes { counter-reset: etape; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.etapes li { counter-increment: etape; display: grid; grid-template-columns: 3rem 1fr; gap: var(--s2); align-items: start; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-m); padding: var(--s3); }
.etapes li::before { content: counter(etape); font-family: var(--f-titre); font-weight: 700; font-size: 2.6rem; line-height: 1; color: var(--orange-texte); }
.etapes strong { display: block; font-family: var(--f-titre); font-size: 1.55rem; font-weight: 600; line-height: 1.1; margin-bottom: .25rem; }

/* Partenaires : grille large et logos */
.partenaires-grand { grid-template-columns: repeat(3, 1fr); }
.partenaires-grand .partenaire { min-height: 140px; font-size: 1.15rem; }
.partenaire img { max-height: 72px; width: auto; }
a.partenaire { text-decoration: none; }
a.partenaire:hover { border-color: var(--orange); color: var(--encre); }
@media (max-width: 860px) { .partenaires-grand { grid-template-columns: repeat(2, 1fr); } }

/* En-tête sur petit écran : on masque le sous-titre pour éviter le débordement */
@media (max-width: 480px) { .marque small { display: none; } .marque span { font-size: 1.35rem; } }

/* ---- Réseaux sociaux ---- */
.ico { width: 28px; height: 28px; flex: none; display: block; }
.btn-reseau { display: inline-flex; align-items: center; gap: .6rem; padding: .45rem 1.15rem .45rem .45rem; border: 2px solid var(--trait); border-radius: 999px; background: var(--blanc); color: var(--encre); text-decoration: none; font-weight: 600; transition: border-color .15s, transform .15s; }
.btn-reseau:hover { border-color: var(--orange); color: var(--encre); transform: translateY(-1px); }
.btn-reseau .ico { width: 32px; height: 32px; }
.reseaux-bloc { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: var(--s3); }
.reseaux-bloc > .petit { font-weight: 600; margin-right: .25rem; }
/* icônes seules dans le menu */
.reseaux-nav { display: flex; align-items: center; gap: .6rem; }
.nav .lien-ico { padding: 0; border-bottom: 0; display: block; line-height: 0; transition: transform .15s; }
.nav .lien-ico:hover { border-bottom: 0; transform: scale(1.12); }
.nav .lien-ico .ico { width: 32px; height: 32px; }
/* liens du pied de page */
.pied .lien-reseau { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.pied .lien-reseau:hover { text-decoration: underline; }
.pied .lien-reseau .ico { width: 24px; height: 24px; }
.pied img.ico { margin: 0; }

/* ---- Horaires des cartes (accueil) ---- */
.horaire { display: flex; align-items: baseline; gap: .9rem; margin: .75rem 0 0; }
.horaire span { min-width: 4.5rem; color: var(--ardoise); font-weight: 500; }
.horaire strong { font-family: var(--f-titre); font-size: 1.7rem; font-weight: 600; line-height: 1.1; }

/* ---- Photos ---- */
.photo { border-radius: var(--r-m); overflow: hidden; aspect-ratio: 4 / 3; background: var(--brume); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo-vide { display: grid; place-items: center; text-align: center; padding: var(--s3); border: 2px dashed var(--orange-pale); background: var(--orange-voile); color: var(--orange-texte); font-weight: 500; }
.photo-vide small { display: block; margin-top: .5rem; opacity: .8; font-weight: 400; word-break: break-all; }

/* ---- Créneaux par jour (accueil) ---- */
.creneau-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin: .75rem 0 0; }
.creneau-ligne strong { font-family: var(--f-titre); font-size: 1.7rem; font-weight: 600; line-height: 1.1; }

/* ---- Menu : resserrer un peu quand la place manque ---- */
@media (max-width: 1100px) and (min-width: 861px) { .nav { gap: 1rem; } .reseaux-nav { gap: .4rem; } }

/* ---- Galerie ---- */
.album + .album { margin-top: var(--s5); }
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; }
.galerie-item { padding: 0; border: 0; background: var(--brume); border-radius: var(--r-m); overflow: hidden; cursor: zoom-in; aspect-ratio: 4 / 3; display: block; }
.galerie-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.galerie-item:hover img, .galerie-item:focus-visible img { transform: scale(1.04); }
dialog.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; }
dialog.lightbox::backdrop { background: rgba(27,29,34,.93); }
.lb-cadre { width: 100%; height: 100%; display: grid; grid-template-rows: 1fr auto; place-items: center; padding: 1rem; gap: .75rem; }
.lb-cadre img { max-width: min(94vw, 1400px); max-height: calc(100vh - 7rem); width: auto; height: auto; object-fit: contain; border-radius: var(--r-s); }
.lb-barre { display: flex; align-items: center; gap: .75rem; color: #fff; }
.lb-barre button { font: 600 1rem var(--f-texte); color: var(--encre); background: var(--blanc); border: 0; border-radius: 999px; padding: .65rem 1.2rem; cursor: pointer; }
.lb-barre button:hover { background: var(--orange); }
.lb-compteur { min-width: 5rem; text-align: center; font-size: .95rem; }

/* ---- Habillage saisonnier ---- */
/* Chaque thème = une couleur (logo png + nom du club), une police pour le nom, et un petit dessin à droite du titre */
:root { --rose: #D62477; }
.marque-nom { display: inline-block; }
.badge-theme { display: inline-block; width: 30px; height: 30px; margin-left: .45rem; vertical-align: top; margin-top: -7px; color: var(--tc, currentColor); }
.badge-theme.badge-ruban { width: 21px; height: 32px; }
.badge-theme.badge-moustache { width: 42px; height: 24px; margin-top: -2px; }
.theme-octobre-rose { --tc: var(--rose); }
.theme-halloween    { --tc: #C63B00; }
.theme-rentree      { --tc: #C63B00; }
.theme-movember     { --tc: #6B4226; }
.theme-noel         { --tc: #B3202A; }
.theme-chandeleur   { --tc: #A8620A; }
.theme-carnaval     { --tc: #3B4FC4; }
.theme-printemps    { --tc: #2E7D32; }
.theme-paques       { --tc: #8A3FB0; }
.theme-muguet       { --tc: #1E6B52; }
.theme-ete          { --tc: #00798C; }
[class*="theme-"] .marque { color: var(--tc); }
[class*="theme-"] .marque small { color: var(--ardoise); }
/* le bonnet de Noël réduit un peu le logo : on l'agrandit */
.theme-noel .marque img { width: 72px; height: 72px; }

/* Polices du nom du club (fichiers dans assets/fonts, chargés seulement pendant le thème) */
@font-face { font-family: "T-halloween";  src: url("../fonts/titre-halloween.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "T-movember";   src: url("../fonts/titre-movember.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "T-noel";       src: url("../fonts/titre-noel.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "T-chandeleur"; src: url("../fonts/titre-chandeleur.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "T-carnaval";   src: url("../fonts/titre-carnaval.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "T-printemps";  src: url("../fonts/titre-printemps.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "T-paques";     src: url("../fonts/titre-paques.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "T-muguet";     src: url("../fonts/titre-muguet.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "T-ete";        src: url("../fonts/titre-ete.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "T-rentree";    src: url("../fonts/titre-rentree.woff2") format("woff2"); font-display: swap; }
.theme-halloween  .marque-nom { font-family: "T-halloween", var(--f-titre);  font-weight: 400; letter-spacing: .02em; }
.theme-movember   .marque-nom { font-family: "T-movember", var(--f-titre);   font-weight: 400; font-size: .9em; }
.theme-noel       .marque-nom { font-family: "T-noel", var(--f-titre);       font-weight: 700; font-size: 1.1em; }
.theme-chandeleur .marque-nom { font-family: "T-chandeleur", var(--f-titre); font-weight: 400; font-size: .9em; }
.theme-carnaval   .marque-nom { font-family: "T-carnaval", var(--f-titre);   font-weight: 700; font-size: .95em; }
.theme-printemps  .marque-nom { font-family: "T-printemps", var(--f-titre);  font-weight: 700; font-size: .9em; }
.theme-paques     .marque-nom { font-family: "T-paques", var(--f-titre);     font-weight: 400; font-size: .95em; }
.theme-muguet     .marque-nom { font-family: "T-muguet", var(--f-titre);     font-weight: 700; font-size: 1.15em; }
.theme-ete        .marque-nom { font-family: "T-ete", var(--f-titre);        font-weight: 400; font-size: .95em; }
.theme-rentree    .marque-nom { font-family: "T-rentree", var(--f-titre);    font-weight: 400; font-size: 1.1em; }

/* Halloween : des chauves-souris traversent le haut de l'en-tête */
.vol-chauves { position: absolute; left: 0; right: 0; top: 3px; height: 26px; overflow: hidden; pointer-events: none; }
.chauve { position: absolute; top: 4px; left: 0; fill: #1B1D22; animation: traverse 16s linear infinite; }
.chauve path { transform-box: fill-box; transform-origin: center; animation: battement .4s ease-in-out infinite alternate; }
.chauve.c1 { width: 40px; }
.chauve.c2 { width: 28px; top: 8px; animation-duration: 22s; animation-delay: -9s; }
.chauve.c3 { width: 20px; top: 1px; animation-duration: 12s; animation-delay: -4s; }
.chauve.c2 path { animation-duration: .32s; }
.chauve.c3 path { animation-duration: .26s; }
@keyframes traverse {
  0%   { transform: translate(-60px, 2px); }
  20%  { transform: translate(calc(20vw - 20px), -3px); }
  45%  { transform: translate(calc(45vw - 20px), 3px); }
  70%  { transform: translate(calc(70vw - 20px), -2px); }
  100% { transform: translate(calc(100vw + 20px), 2px); }
}
@keyframes battement { from { transform: scaleY(1); } to { transform: scaleY(.4); } }
@media (prefers-reduced-motion: reduce) {
  .chauve, .chauve path { animation: none; }
  .chauve.c1 { left: 12%; } .chauve.c2 { left: 48%; } .chauve.c3 { left: 80%; }
}
@media (max-width: 480px) { .marque img { width: 52px; height: 52px; } .theme-noel .marque img { width: 62px; height: 62px; } }

/* en-tête : pas de retour à la ligne dans le menu ni dans le nom du club */
.marque-nom { white-space: nowrap; }
.entete nav a { white-space: nowrap; }
@media (min-width: 861px) and (max-width: 1180px) { .entete .nav { gap: .85rem; } .entete .nav a:not(.btn) { font-size: .95rem; } .marque small { display: none; } }
/* écran étroit avec menu déployé : on cache le petit dessin pour ne pas chevaucher le menu */
@media (min-width: 861px) and (max-width: 1060px) { .badge-theme { display: none; } }

/* ---- Thèmes animés ---- */
.decor { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.decor .p { position: absolute; left: var(--x, 0); }
.decor .p svg { display: block; width: 100%; height: 100%; }
/* flocons, confettis, pétales : ils tombent */
.decor .chute { top: -14px; width: var(--s); height: var(--s); animation: chute var(--d) linear var(--t) infinite; }
@keyframes chute {
  0%   { transform: translate(0, 0) rotate(0); opacity: 0; }
  10%  { opacity: .95; }
  90%  { opacity: .95; }
  100% { transform: translate(var(--dx), 92px) rotate(var(--rot)); opacity: 0; }
}
.decor-carnaval .chute { height: calc(var(--s) * .55); border-radius: 1px; background: #E5367F; }
.decor-carnaval .chute:nth-child(4n+2) { background: #FFC83D; }
.decor-carnaval .chute:nth-child(4n+3) { background: #19B3A6; }
.decor-carnaval .chute:nth-child(4n)   { background: #6C4CE0; border-radius: 50%; height: var(--s); }
.decor-printemps .petale { height: calc(var(--s) * .7); background: #F6A5C4; border-radius: 80% 0 80% 0; }
/* papillon, œufs, volant : ils traversent */
.decor .papillon { top: 14px; left: 0; width: 26px; height: 18px; animation: traverse 20s linear infinite; }
.decor .papillon .ailes { transform-box: fill-box; transform-origin: center; animation: battement .35s ease-in-out infinite alternate; }
.decor .oeuf { bottom: 3px; left: 0; width: 15px; height: 20px; animation: traverse-x var(--d) linear var(--t) infinite; }
.decor .oeuf svg { animation: rebond .8s ease-in infinite alternate; }
.decor .oeuf svg path:first-child { fill: var(--c); stroke: #1B1D22; stroke-width: 1.2; }
.decor .volant-lob { bottom: 6px; left: 0; width: 40px; height: 23px; animation: traverse-x 9s linear infinite; }
.decor .volant-lob svg { animation: lob 1.8s ease-in-out infinite; }
@keyframes traverse-x { from { transform: translateX(-40px); } to { transform: translateX(calc(100vw + 20px)); } }
@keyframes rebond { from { transform: translateY(0); } to { transform: translateY(-16px); } }
@keyframes lob { 0%, 100% { transform: translateY(0) rotate(-12deg); } 50% { transform: translateY(-22px) rotate(12deg); } }

/* petits dessins à droite du titre : ils bougent */
.badge-theme { transform-origin: 50% 50%; }
.theme-octobre-rose .badge-theme { transform-origin: 50% 0; animation: balance 3s ease-in-out infinite; }
.theme-movember     .badge-theme { animation: fretille 1.6s ease-in-out infinite; }
.theme-chandeleur   .badge-theme { animation: saute 3s ease-in-out infinite; }
.theme-ete          .badge-theme { animation: tourne 18s linear infinite; }
.theme-muguet       .badge-theme { transform-origin: 20% 90%; animation: balance 3.4s ease-in-out infinite; }
.theme-noel         .badge-theme { animation: tourne 14s linear infinite; }
@keyframes balance { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
@keyframes fretille { 0%, 100% { transform: rotate(0) translateY(0); } 25% { transform: rotate(-5deg) translateY(-2px); } 75% { transform: rotate(5deg) translateY(1px); } }
@keyframes saute { 0%, 55% { transform: translateY(0) rotate(0); } 75% { transform: translateY(-12px) rotate(360deg); } 90%, 100% { transform: translateY(0) rotate(360deg); } }
@keyframes tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .decor, .badge-theme { animation: none !important; }
  .decor .p, .decor .p svg, .decor .ailes { animation: none !important; }
  .decor .chute, .decor .papillon, .decor .oeuf, .decor .volant-lob { display: none; }
  .theme-octobre-rose .badge-theme, .theme-movember .badge-theme, .theme-chandeleur .badge-theme, .theme-ete .badge-theme, .theme-muguet .badge-theme, .theme-noel .badge-theme { animation: none; }
}

.carte-actu .vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carte-actu .petit { white-space: normal; }

/* lien « Espace admin » : petit, discret, en haut à droite de l'en-tête (dans le menu sur mobile) */
.lien-admin { font: 600 .74rem/1 var(--f-texte); color: var(--ardoise); text-decoration: none; letter-spacing: .02em; display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .5rem; border-radius: 999px; }
.lien-admin:hover { color: var(--encre); background: var(--brume); }
@media (min-width: 861px) { .lien-admin { position: absolute; top: 3px; right: 1rem; } }
@media (max-width: 860px) { .lien-admin { font-size: .9rem; margin-top: .5rem; } }
.entete .nav a.lien-admin { font-size: .72rem; color: var(--ardoise); border-bottom: 0; }
.entete .nav a.lien-admin:hover { color: var(--encre); }
@media (min-width: 861px) { .entete .nav a.lien-admin { top: 1px; padding: .15rem .45rem; } }
@media (max-width: 860px) { .entete .nav a.lien-admin { font-size: .9rem; } }
@media (max-width: 560px) { .marque-nom { white-space: normal; } }