/* L'attribut `hidden` doit toujours masquer, même sur un élément dont une
   classe impose un display (constaté le 24/08/2026 : sur la page Expo 2026,
   masquer la grille des dossiers ne faisait rien, parce que
   `.photo-grid { display: grid }` l'emportait sur le `display: none` que le
   navigateur donne par défaut à [hidden] — une règle de classe est toujours
   plus spécifique qu'une règle d'attribut du navigateur). Beaucoup de
   sections du site sont masquées ainsi en attendant leurs données JSON. */
[hidden] {
  display: none !important;
}

:root {
  --bg: #0f172a;
  --bg-alt: #131f38;
  --surface: #1b2b4b;
  --surface-hover: #223460;
  --text: #ffffff;
  --text-muted: #c3cbe0;
  --accent: #a855f7;
  --accent-2: #ec4899;
  --accent-3: #818cf8;
  --accent-gradient: linear-gradient(90deg, var(--accent-2), var(--accent), var(--accent-3));
  --accent-soft: rgba(168, 85, 247, 0.16);
  --border: rgba(255, 255, 255, 0.1);
  --radius: 14px;
  --radius-btn: 10px;
  --shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6);
  --container: 1180px;
  --font-heading: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive, sans-serif;
  --font-body: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive, sans-serif;
}

/* Sur téléphone, la police système remplace Comic Sans MS (choix explicite
   de l'utilisateur, 22/08/2026 — Comic Sans reste la police du site sur
   ordinateur, seule la lecture sur petit écran posait problème). Redéfinir
   les variables dans :root suffit : tout le CSS les utilise déjà via
   var(--font-heading)/var(--font-body), rien d'autre à changer. */
@media (max-width: 760px) {
  :root {
    --font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--accent);
  color: #16130a;
  padding: 10px 16px;
  z-index: 200;
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(15, 15, 40, 0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  max-width: var(--container);
  margin: 0 auto;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-size: 1.85rem;
  letter-spacing: 0.03em;
}

/* Icône du vrai logo (choix explicite de l'utilisateur, 23/08/2026) :
   recadrée depuis l'image fournie par l'utilisateur (images/logo.png,
   déposée directement dans le dépôt GitHub faute d'accès aux pièces
   jointes de la conversation depuis ce sandbox) pour n'en garder que
   l'appareil photo, sans le texte qui y était intégré — le texte redevient
   du HTML (.logo-text ci-dessous, sur deux lignes comme avant), plus net
   et plus facile à agrandir qu'un texte figé dans une image. */
.logo-mark {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--border);
  flex-shrink: 0;
  display: block;
  object-fit: cover;
}

/* Titre sur deux lignes : « Focal Club » puis « Turballais » centré dessous
   (choix explicite de l'utilisateur) — un <br> fixe la coupure plutôt que de
   compter sur le retour à la ligne automatique, qui dépend de la largeur
   disponible et pourrait couper ailleurs. */
.logo-text {
  display: inline-block;
  text-align: center;
  line-height: 1.15;
}

/* align-items: center aligne tous les libellés du menu (Accueil, Galerie,
   Agenda…) sur la même ligne médiane, y compris « Nous Contacter /
   S'inscrire » sur deux lignes — sans cela, les libellés à une ligne
   restaient plaqués en haut de la barre tandis que les menus déroulants
   (.nav-dropdown, déjà centrés sur eux-mêmes) semblaient plus bas, choix
   explicite de l'utilisateur, 23/08/2026. Repris à stretch en mobile, où le
   menu devient une colonne : voir plus bas. */
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-size: 0.95rem;
  color: var(--text-muted);
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

/* Lien « Nous Contacter » du menu, sur deux lignes (« Nous Contacter » puis
   « S'inscrire ») : un <br> volontaire fixe la coupure plutôt que de
   compter sur le retour à la ligne automatique. */
.nav-deux-lignes {
  display: inline-block;
  text-align: center;
  line-height: 1.25;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--text);
  border-bottom-color: var(--accent-2);
}

/* Menu déroulant "Espace Adhérent" */
.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}
/* Connecté : le libellé « {pseudo} connecté » est un lien direct vers le
   tableau de bord, distinct du bouton (la seule à ouvrir/fermer le menu). */
.nav-dropdown-label {
  font-size: 0.95rem;
  color: var(--text-muted);
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.nav-dropdown-label:hover,
.nav-dropdown-label[aria-current="page"] {
  color: var(--text);
  border-bottom-color: var(--accent-2);
}
.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  font: inherit;
  font-size: 0.95rem;
  color: var(--text-muted);
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.nav-dropdown-trigger:hover {
  color: var(--text);
  border-bottom-color: var(--accent-2);
}
/* Modificateur : bouton réduit à la seule flèche (menu connecté, voir
   nav-dropdown-label ci-dessus) — placé après la règle de base pour la
   surcharger malgré une spécificité CSS identique. */
.nav-dropdown-trigger--icone {
  padding: 8px 4px;
}
.nav-dropdown-caret {
  transition: transform 0.2s ease;
}
.nav-dropdown.is-open .nav-dropdown-trigger {
  color: var(--text);
}
.nav-dropdown.is-open .nav-dropdown-caret {
  transform: rotate(180deg);
}
.nav-dropdown-menu {
  display: none;
  flex-direction: column;
  gap: 2px;
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px;
  list-style: none;
  margin: 0;
  z-index: 150;
}
.nav-dropdown.is-open .nav-dropdown-menu {
  display: flex;
}
.nav-dropdown-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--text-muted);
  border-bottom: none;
}
.nav-dropdown-menu a:hover,
.nav-dropdown-menu a[aria-current="page"] {
  color: var(--accent);
  background: var(--accent-soft);
}
.nav-dropdown-heading {
  padding: 8px 12px 10px;
  margin-bottom: 4px;
  font-size: 0.8rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
.nav-dropdown-heading strong {
  color: var(--text);
}
.nav-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 4px;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 42px;
  height: 42px;
  cursor: pointer;
  position: relative;
}

.nav-toggle span {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 20px;
  height: 2px;
  background: var(--text);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
/* left/right ici valent 0, pas 10px comme la barre du milieu : elles sont
   relatives au span lui-même (position:absolute en fait le bloc de
   référence de ses propres pseudo-éléments), pas au bouton. Avec 10px des
   deux côtés d'un span large d'environ 20px, la largeur calculée tombait à
   0 — les deux barres restaient posées mais invisibles, ne laissant voir
   que la barre du milieu (bug relevé par l'utilisateur, 25/08/2026). */
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--text);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle span::before {
  top: -7px;
}
.nav-toggle span::after {
  top: 7px;
}
.nav-toggle[aria-expanded="true"] span {
  background: transparent;
}
.nav-toggle[aria-expanded="true"] span::before {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--radius-btn);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.15s ease, filter 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn-primary {
  background: var(--accent-gradient);
  color: #fff;
}
.btn-primary:hover {
  filter: brightness(1.1);
}
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.35);
}
.btn-ghost:hover {
  border-color: var(--accent-3);
  color: var(--accent-3);
}

/* Hero */
.hero {
  position: relative;
  padding: 110px 0 90px;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(236, 72, 153, 0.22), transparent 45%),
    radial-gradient(circle at 85% 60%, rgba(129, 140, 248, 0.22), transparent 45%),
    var(--bg);
}

.hero-content {
  max-width: 680px;
}

.eyebrow {
  display: inline-block;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 18px;
}

.hero h1 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2.4rem, 5.5vw, 3.8rem);
  line-height: 1.15;
  margin: 0 0 20px;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p {
  color: var(--text-muted);
  font-size: 1.1rem;
  margin: 0 0 34px;
  max-width: 56ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 40px;
  margin-top: 64px;
}

.hero-stats div strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--accent);
}
.hero-stats div span {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* Full-bleed hero, close to focalclub.fr's homepage */
.hero-full {
  min-height: 90vh;
  display: flex;
  /* Le texte se place dans le haut du hero, l'appareil photo reste visible
     en dessous (cf. maquette validee). */
  align-items: flex-start;
  padding: 120px 0 140px;
  /* Voile sombre en degrade : dense en haut pour la lisibilite du titre,
     leger sur l'appareil, puis renforce en bas pour enchainer avec la
     section violette suivante. */
  background:
    linear-gradient(
      to bottom,
      rgba(8, 10, 22, 0.68) 0%,
      rgba(8, 10, 22, 0.42) 32%,
      rgba(8, 10, 22, 0.22) 55%,
      rgba(30, 27, 75, 0.55) 100%
    ),
    url("../images/accueil-pleine-largeur.jpg") center 55% / cover no-repeat,
    #05040c;
}
/* Sur la photo, le paragraphe passe en blanc et les textes recoivent une
   ombre portee : indispensable pour rester lisibles sur les zones claires. */
.hero-full h1,
.hero-full p {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
}
.hero-full p {
  color: #f1f5f9;
}
.hero-full .container {
  width: 100%;
}
.hero-content-center {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.hero-content-center h1 {
  font-size: clamp(2.6rem, 7vw, 4.4rem);
}
.hero-content-center p {
  margin-left: auto;
  margin-right: auto;
}
.hero-actions-center {
  justify-content: center;
}

/* Cards section ("Pourquoi nous rejoindre ?") */
.cards-section {
  background: linear-gradient(135deg, var(--bg) 0%, rgba(88, 28, 135, 0.35) 50%, var(--bg) 100%);
}
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 48px;
}
.feature-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 26px;
}
.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--accent-gradient);
  margin-bottom: 18px;
}
.feature-card h3 {
  margin: 0 0 10px;
  font-size: 1.15rem;
}
.feature-card p {
  color: var(--text-muted);
  margin: 0;
  font-size: 0.95rem;
}

/* CTA section, matches focalclub.fr's closing banner */
.cta-section {
  background: linear-gradient(90deg, #581c87, #3730a3, #1e3a8a);
}
/* Bandeau « Nous contacter S'inscrire » de contact.html : moitié moins haut
   que le CTA habituel (choix explicite de l'utilisateur, 22/08/2026 pour la
   réduction, réutilisée le 23/08/2026 pour ce bandeau après une nouvelle
   inversion des deux blocs de la page — voir « Inscription » plus bas,
   devenue un pavé .form-card). Sélecteur composé
   (.section.cta-section--reduit) pour l'emporter sur .section quelle que
   soit sa position dans la feuille de style. */
.section.cta-section--reduit {
  padding: 44px 0;
}

/* Section headers */
.section {
  padding: 88px 0;
}
.section-alt {
  background: var(--bg-alt);
}
.section-head {
  max-width: 620px;
  margin: 0 0 48px;
}
.section-head .eyebrow {
  margin-bottom: 12px;
}
.section-head h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  margin: 0 0 14px;
}
.section-head p {
  color: var(--text-muted);
  margin: 0;
}
.section-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* About */
.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}
.about-grid p {
  color: var(--text-muted);
  margin: 0 0 18px;
}
.about-list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.about-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--text-muted);
}
.about-list li::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
/* Photo fournie par l'utilisateur (choix explicite, 25/08/2026), à la
   place du dégradé de repli — même principe que .hero-full : un
   background CSS sur le bloc, pas un <img>, rien à changer dans le HTML. */
.about-visual {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  background: url("../images/communaute.jpg") center / cover no-repeat;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

/* Grille de photos : cartes toutes de la même taille (une vraie grille, pas
   un « masonry » à hauteurs variables), légende en incrustation sur l'image
   plutôt qu'un bloc de texte à hauteur variable en dessous — c'est ce qui
   garantit des vignettes uniformes quel que soit le titre (choix explicite
   de l'utilisateur, 21/08/2026 : les vignettes paraissaient de tailles
   inégales avec l'ancienne disposition). Le titre est tronqué avec des
   points de suspension s'il est trop long ; le texte complet reste
   disponible dans l'agrandissement (lightbox), lu depuis les mêmes données. */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 20px;
}
.photo-card {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  /* Effet de relief : ombre portée à deux niveaux, accentuée au survol. */
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.35);
}
.photo-card:hover,
.photo-card:focus-visible {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 20px 38px -14px rgba(0, 0, 0, 0.7), 0 4px 10px rgba(0, 0, 0, 0.4);
}
.photo-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.photo-card:hover .photo-frame {
  transform: scale(1.05);
}
.photo-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px 14px 12px;
  background: linear-gradient(180deg, transparent, rgba(10, 9, 16, 0.92) 70%);
  pointer-events: none;
}
.photo-caption .title {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.photo-caption .meta {
  display: block;
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Bouton Supprimer en incrustation : ne doit jamais agrandir la carte. */
.photo-supprimer {
  position: absolute;
  top: 10px;
  right: 10px;
  pointer-events: auto;
}
.photo-supprimer-bouton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(10, 9, 16, 0.65);
  color: #fff;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.photo-supprimer-bouton:hover {
  background: #e0365c;
  border-color: transparent;
}

/* Member cards */
.members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}
.member-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
}
.member-card:hover,
.member-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--accent);
}
.member-cover {
  aspect-ratio: 16 / 10;
}
.member-body {
  padding: 20px 22px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.member-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  color: #16130a;
  margin-top: -46px;
  border: 3px solid var(--surface);
  flex-shrink: 0;
}
.member-body h3 {
  margin: 14px 0 2px;
  font-size: 1.1rem;
}
.member-role {
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 600;
  margin: 0 0 12px;
}
.member-bio {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0 0 18px;
  flex: 1;
}
.member-link {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.member-link::after {
  content: "→";
  transition: transform 0.2s ease;
}
.member-card:hover .member-link::after {
  transform: translateX(4px);
}

/* Gallery page header */
.gallery-header {
  padding: 64px 0 40px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
/* Bandeau de titre moitié moins haut que l'habituel (choix explicite de
   l'utilisateur) : posé par titre_page($reduit = true) — actuellement
   Agenda des sorties et Le Club, 23/08/2026. Sélecteur composé pour
   l'emporter sur .gallery-header quelle que soit sa position dans la
   feuille de style. */
.gallery-header.gallery-header--reduit {
  padding: 32px 0 20px;
}

/* Gallery hero (page "Notre Galerie") — réduit de moitié une troisième
   fois (choix explicite de l'utilisateur, 25/08/2026, second changement
   de la journée : 29px/18px devient 15px/9px), après deux réductions d'un
   tiers les 23/08/2026 et 25/08/2026 (64px/40px → 43px/27px → 29px/18px). */
.gallery-hero {
  padding: 15px 0 9px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
  text-align: center;
}
.gallery-hero h1 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 3rem);
  margin: 0 0 12px;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gallery-hero > .container > p {
  color: var(--text-muted);
  max-width: 56ch;
  margin: 0 auto;
}

/* Theme filter chips */
.theme-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 10px 0 0;
}
.theme-filter {
  padding: 9px 18px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.theme-filter:hover {
  color: var(--text);
  border-color: var(--accent-3);
}
.theme-filter.is-active {
  background: var(--accent-gradient);
  border-color: transparent;
  color: #fff;
}

/* Diaporama trigger */
.diaporama-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  background: none;
  border: none;
  padding: 6px 4px;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s ease;
}
.diaporama-trigger:hover {
  color: var(--accent-3);
}
/* Bandeau du bouton Diaporama, posé juste au-dessus de la grille de photos
   (choix explicite de l'utilisateur, 26/08/2026 — auparavant le bouton
   vivait dans .gallery-hero, loin au-dessus de la grille). .diaporama-bar
   remet à zéro le margin-top pensé pour cet ancien emplacement, sous les
   pastilles de filtre du bandeau. */
.diaporama-bar {
  text-align: center;
  margin: 0 0 24px;
}
.diaporama-bar .diaporama-trigger {
  margin-top: 0;
}

.gallery-empty {
  color: var(--text-muted);
  text-align: center;
  padding: 40px 0;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(8, 8, 10, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 300;
  padding: 24px;
}
.lightbox.is-open {
  display: flex;
}
/* Plafond de l'agrandissement : 1920px dans la plus grande dimension
   (choix explicite de l'utilisateur, 24/08/2026 — avant, 900px bridaient
   la photo bien en deçà sur un grand écran). Voir aussi .lightbox-image
   pour le plafond en hauteur, et infos-expo-2026.php, qui demande à Google
   une image de 1920px de large pour l'agrandissement : sans ça, on
   étirerait une image de 1000px et la photo paraîtrait floue. */
.lightbox-content {
  max-width: 1920px;
  width: 100%;
  text-align: center;
}
/* À partir de la tablette, laisse la place aux flèches précédente/suivante
   sur les côtés : sans cette marge, une photo large passerait dessous. */
@media (min-width: 761px) {
  .lightbox {
    padding: 24px 80px;
  }
}
/* Le cadre n'impose plus de format : il se contente de centrer la photo,
   qui s'affiche en entier (24/08/2026 — avant, un fond « cover » en 4/3
   coupait toute photo d'un autre format, les verticales notamment). C'est
   l'image elle-même qui porte bordure, arrondi et ombre, sinon celles-ci
   dessineraient un rectangle 4/3 avec des bandes vides autour d'une photo
   verticale. */
.lightbox-frame {
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-image {
  display: block;
  max-width: 100%;
  /* 70vh laisse la place à la légende sous la photo quelle que soit la
     hauteur de l'écran ; 1920px est le plafond demandé, qui ne joue que
     sur un écran très haut (au-delà de ~2740px). */
  max-height: min(70vh, 1920px);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.75), 0 8px 20px rgba(0, 0, 0, 0.5);
}
/* Repli quand une photo n'a pas de fichier image : un dégradé, qui a besoin
   qu'on lui donne une taille puisqu'il n'y a pas d'image pour la déduire. */
.lightbox-frame--degrade {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.75), 0 8px 20px rgba(0, 0, 0, 0.5);
}
.lightbox-caption {
  margin-top: 18px;
  color: var(--text-muted);
}
.lightbox-caption strong {
  color: var(--text);
  display: block;
  font-size: 1.1rem;
  margin-bottom: 4px;
}
.lightbox-description {
  margin: 10px auto 0;
  max-width: 60ch;
  font-size: 0.9rem;
  line-height: 1.5;
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  background: rgba(28, 28, 36, 0.85);
  border: 1px solid var(--border);
  color: var(--text);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-close {
  top: 24px;
  right: 24px;
}
.lightbox-prev {
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
}
.lightbox-next {
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Bouton de diaporama à l'intérieur de la lightbox (choix explicite de
   l'utilisateur, 24/08/2026 : lancer le diaporama depuis la photo déjà
   agrandie, pas seulement depuis un bouton en haut de la page Galerie).
   Repris du bouton .diaporama-trigger (même icône, même texte "Diaporama")
   et centré juste au-dessus de la photo — choix explicite de l'utilisateur,
   26/08/2026, capture d'écran à l'appui : une simple flèche ronde en haut à
   droite, à côté de Fermer, ne rappelait pas assez le bouton "Diaporama" de
   la page elle-même. `.lightbox-diaporama` est donc désormais un enfant de
   `.lightbox-content` (avant `.lightbox-frame`, voir le HTML), pas de
   `.lightbox` — `text-align:center` de `.lightbox-content` centre le
   bouton, `inline-flex` (hérité de `.diaporama-trigger`) le laisse à sa
   largeur naturelle. Générique : présent sur toute page dont la lightbox
   porte ce bouton, ignoré par js/main.js sur les pages qui ne l'ont pas. */
.lightbox-diaporama {
  margin: 0 0 16px;
}
/* Diaporama en cours : même mise en valeur que les pastilles de filtre
   actives (.theme-filter.is-active), pour rester cohérent. */
.lightbox-diaporama.is-playing {
  background: var(--accent-gradient);
  border-color: transparent;
  color: #fff;
  border-radius: var(--radius-btn);
  padding: 9px 18px;
}

/* Page « Expo 2026 » : barre au-dessus des photos d'un adhérent, une fois
   son dossier ouvert (retour aux dossiers + nom de l'adhérent). */
.expo-barre {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}
/* Lien « Déposer des photos », affiché par js/main.js seulement sur un album
   hébergé sur ce site (type=local) — poussé à droite du bouton retour. */
.expo-barre [data-expo-deposer] {
  margin-left: auto;
}
/* .lien-retour est écrit pour un <a> ; ici c'est un <button>, il faut donc
   effacer le fond et la bordure que le navigateur lui donne par défaut. */
button.lien-retour {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  margin-bottom: 0;
}
.expo-titre-adherent {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.35rem;
}

.social-row {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}
.social-row a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
}
.social-row a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
}
.field {
  margin-bottom: 20px;
  /* Support l'avertissement de taille en surimpression (.form-avertissement,
     voir plus bas) — sans effet sur les champs qui n'en ont pas. */
  position: relative;
}
.field label {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 8px;
  color: var(--text-muted);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.form-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 14px;
}
/* Repère visuel pendant un glissé-déposé de fichier (choix explicite de
   l'utilisateur, 26/08/2026) : la zone de dépôt couvre tout le .field, pas
   seulement le petit bouton natif "Choisir des fichiers" — voir js/main.js,
   bloc "Dépôt de fichiers". */
.field--survole {
  outline: 2px dashed var(--accent-3);
  outline-offset: 4px;
  border-radius: var(--radius-btn);
}
/* Avertissement immédiat si un fichier dépasse la taille maximale (choix
   explicite de l'utilisateur, 26/08/2026), avant même l'envoi au serveur.
   En surimpression sur le champ entier — pas un simple texte en dessous
   (choix explicite de l'utilisateur, second changement le même jour) :
   position:absolute couvre tout .field (label et input compris), là où
   l'adhérent a tenté de charger le fichier. pointer-events:none laisse les
   clics et le glissé-déposé passer à travers jusqu'au champ en dessous,
   pour réessayer aussitôt avec un autre fichier sans avoir à faire
   disparaître l'avertissement au préalable. */
.form-avertissement {
  position: absolute;
  inset: 0;
  /* Sans ce reset, la marge par défaut du navigateur sur <p> (~1em, en
     haut et en bas) réduit la boîte vers l'intérieur malgré inset:0,
     laissant l'étiquette et le texte d'aide visibles sous les bords du
     champ au lieu d'être couverts. */
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 14px;
  background: rgba(127, 29, 29, 0.94);
  color: #fecaca;
  border-radius: var(--radius-btn);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
  pointer-events: none;
  z-index: 5;
}
/* Croix de fermeture (choix explicite de l'utilisateur, 26/08/2026) : seul
   élément de l'avertissement à reprendre pointer-events:auto, pour rester
   cliquable malgré le pointer-events:none du calque parent — le clic ferme
   l'avertissement (avertissement.hidden = true, dans js/main.js) sans
   déclencher le champ de fichier en dessous. */
.form-avertissement-fermer {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fecaca;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
}
.form-avertissement-fermer:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Œil pour afficher/masquer un mot de passe (posé par js/main.js sur
   chaque input[type="password"], quel que soit le formulaire). */
.champ-mot-de-passe {
  position: relative;
}
.champ-mot-de-passe input {
  padding-right: 44px;
}
.bouton-oeil {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
}
.bouton-oeil:hover {
  color: var(--text);
}

/* Flèche « page précédente », en tête des pages de connexion/inscription. */
.lien-retour {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 18px;
  cursor: pointer;
}
.lien-retour:hover {
  color: var(--text);
}

/* Footer — hauteur réduite de moitié (choix explicite de l'utilisateur,
   25/08/2026 : 48px/32px devient 24px/16px, et .footer-bottom suit la même
   réduction plus bas). Sur toutes les pages : le pied de page est du HTML
   dupliqué par page, mais ces règles vivent dans le CSS partagé — rien à
   changer ailleurs. */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 24px 0 16px;
  background: linear-gradient(90deg, var(--bg), rgba(88, 28, 135, 0.35), var(--bg));
}
.footer-grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
}
.footer-grid-3 {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 32px;
}
.footer-grid .logo {
  margin-bottom: 12px;
}
.footer-grid p {
  color: var(--text-muted);
  max-width: 34ch;
  font-size: 0.9rem;
}
.footer-contact h4,
.footer-links h4 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0 0 14px;
}
.footer-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.footer-links {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
}
/* Sur deux colonnes (choix explicite de l'utilisateur, 25/08/2026) : la
   liste (8 liens) rendait « Liens rapides » nettement plus haute que les
   colonnes Contact/logo à côté. `columns` plutôt qu'une grille à nombre de
   lignes fixé en dur : la liste se répartit sur deux colonnes équilibrées
   quel que soit son nombre d'éléments, sans recalcul si un lien s'ajoute. */
.footer-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 32px;
  font-size: 0.9rem;
}
.footer-links ul li {
  break-inside: avoid;
  margin-bottom: 10px;
}
.site-footer .social-row a {
  width: 34px;
  height: 34px;
  border: none;
}
.social-fb { background: #1877f2; }
.social-ig { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.social-tw { background: #1da1f2; }
.footer-bottom {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.82rem;
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

/* Responsive */
@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr;
  }
  .about-visual {
    order: -1;
    aspect-ratio: 16 / 9;
  }
  .footer-grid-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .nav-links {
    position: fixed;
    top: 73px;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: stretch;
    padding: 20px 24px 28px;
    gap: 18px;
    transform: translateY(-130%);
    transition: transform 0.25s ease;
  }
  .nav-links.is-open {
    transform: translateY(0);
  }
  .nav-toggle {
    display: block;
  }
  .nav-dropdown-menu {
    position: static;
    display: none;
    background: none;
    border: none;
    box-shadow: none;
    padding: 6px 0 0 16px;
    margin-top: 10px;
    border-left: 2px solid var(--border);
  }
  .nav-dropdown.is-open .nav-dropdown-menu {
    display: flex;
  }
  .nav-dropdown-heading {
    padding: 0 0 10px;
  }
  .hero {
    padding: 70px 0 60px;
  }
  .hero-full {
    padding: 90px 0;
    min-height: 80vh;
  }
  .hero-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .section {
    padding: 64px 0;
  }
  .lightbox-prev,
  .lightbox-next {
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 480px) {
  .photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
  }
  .hero-stats {
    grid-template-columns: 1fr;
  }
}

/* ===========================================================================
   ESPACE ADHÉRENTS (pages PHP du dossier espace/)
   Réutilise les mêmes variables de couleur et la même police que le site
   public : l'espace réservé doit ressembler au reste du site.
   ========================================================================= */

/* Pastilles */
.badge-admin,
.badge-editeur,
.badge-inactif {
  display: inline-block;
  font-size: 0.68rem;
  padding: 3px 9px;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 6px;
}
.badge-admin {
  background: var(--accent-soft);
  color: #e9d5ff;
  border: 1px solid rgba(168, 85, 247, 0.45);
}
/* Éditeur : même traitement que responsable, teinte bleue pour rester
   distinguable au premier coup d'œil (choix explicite de l'utilisateur,
   23/08/2026). */
.badge-editeur {
  background: rgba(56, 189, 248, 0.14);
  color: #7dd3fc;
  border: 1px solid rgba(56, 189, 248, 0.4);
}
.badge-inactif {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.badge-attente {
  display: inline-block;
  font-size: 0.68rem;
  padding: 3px 9px;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 6px;
  background: rgba(245, 158, 11, 0.16);
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, 0.45);
}

/* Case à cocher stylée en carré avec une croix, pour activer/désactiver un
   rôle (responsable ou éditeur) directement depuis le tableau des adhérents
   — remplace les anciens liens texte « Nommer/Retirer responsable » (choix
   explicite de l'utilisateur, 23/08/2026). */
.case-role-ligne {
  display: flex;
  align-items: center;
  gap: 8px;
}
.case-role {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-alt);
  color: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.case-role svg {
  width: 13px;
  height: 13px;
}
.case-role:hover {
  border-color: var(--accent);
}
.case-role-actif {
  background: var(--accent-gradient);
  border-color: transparent;
  color: #fff;
}
.case-role-label {
  color: var(--text-muted);
  font-size: 0.82rem;
}

/* Messages de confirmation / d'erreur */
.alerte {
  padding: 14px 16px;
  border-radius: var(--radius-btn);
  margin-bottom: 22px;
  font-size: 0.92rem;
  border: 1px solid;
}
.alerte-succes {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.45);
  color: #bbf7d0;
}
.alerte-erreur {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.45);
  color: #fecaca;
}

/* Bloc dépliant « Ajouter … » */
.depot-bloc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 28px;
}
.depot-bloc > summary {
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 1.02rem;
}
.depot-bloc .form-card {
  background: var(--bg-alt);
}

.titre-section {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  margin: 0 0 18px;
}

.case-a-cocher {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.case-a-cocher input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

/* Encart « prochaine sortie » du tableau de bord */
.encart-sortie {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 24px;
}

/* Bouton discret d'action destructrice */
.lien-danger,
.lien-action {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.82rem;
  text-decoration: underline;
}
.lien-danger {
  color: #fca5a5;
}
.lien-action {
  color: var(--text-muted);
}
.lien-danger:hover {
  color: #fecaca;
}
.lien-action:hover {
  color: var(--text);
}

/* Documents */
.documents-recherche {
  max-width: 420px;
  margin: 0 0 32px;
}
/* Sommaire cliquable des rubriques/catégories, remplace l'ancien texte
   d'introduction (choix explicite de l'utilisateur, 23/08/2026) : chaque
   catégorie renvoie vers sa section plus bas via une ancre #categorie-{id}. */
.documents-index {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 0 0 36px;
}
.documents-index-rubrique {
  margin-bottom: 18px;
}
.documents-index-rubrique:last-child {
  margin-bottom: 0;
}
.documents-index-rubrique h2 {
  font-family: var(--font-heading);
  font-size: 1.02rem;
  margin: 0 0 10px;
}
.documents-index-categories {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.documents-index-categories a {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.86rem;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.documents-index-categories a:hover {
  border-color: var(--accent-3);
  color: var(--text);
}
.categorie-vide {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin: 0;
}
.rubrique-documents,
.groupe-galerie {
  margin: 0 0 36px;
}
.rubrique-documents h2,
.groupe-galerie h2 {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.sous-categorie-documents {
  margin: 22px 0 0;
}
.sous-categorie-documents h3 {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: normal;
  color: var(--text-muted);
  margin: 0 0 10px;
}
/* Réglages du site : les sections de gestion (rubriques/catégories) passent
   sur deux colonnes dès que la largeur le permet, une seule sinon.
   minmax(min(400px, 100%), 1fr) plutôt que minmax(400px, 1fr) : sur un
   téléphone étroit (moins de 400px de large, une fois le padding du
   conteneur retiré), le minimum de 400px forçait la grille à déborder de
   l'écran (page défilable horizontalement, boutons "Renommer" coupés) —
   min(400px, 100%) plafonne la piste à la largeur réellement disponible. */
.reglages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  align-items: start;
  gap: 32px;
  margin-top: 32px;
}
.reglages-grid .reglage-rubriques {
  margin: 0;
}
/* « Catégories du blog » doit rester juste sous « Catégories des
   galeries » (choix explicite de l'utilisateur), pas à une hauteur
   dictée par « Rubriques des documents » (le plus grand des trois pavés)
   comme le ferait le placement en grille par défaut. Les deux pavés sont
   donc regroupés dans une colonne indépendante (.reglages-col-droite,
   empilée en flex avec le même espacement que la grille), que
   .reglages-grid traite comme un seul bloc — pas besoin de media query
   dédiée, ce bloc suit la même bascule 1/2 colonnes que Rubriques des
   documents et reste toujours dans le bon ordre en dessous de 880px. */
.reglages-col-droite {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Gestion des rubriques de documents (Réglages du site). */
.rubrique-reglage {
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.rubrique-reglage:first-of-type {
  padding-top: 0;
}
.reglage-categories {
  list-style: none;
  margin: 10px 0 0;
  padding: 0 0 0 20px;
  display: grid;
  gap: 8px;
}
.reglage-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  /* .reglage-categories (parent) est en display:grid : un item de grille a
     un min-width automatique basé sur le contenu de ses enfants, qui peut
     dépasser la largeur de sa piste — sans ce 0, .reglage-ligne débordait
     de la colonne de .reglage-categories dès que la largeur se resserrait. */
  min-width: 0;
}
/* Sur petit téléphone, le bouton "Renommer" (largeur fixée par son texte,
   ne rétrécit pas dans une ligne flex) débordait sur le lien "Supprimer"
   juste à côté, les deux textes se chevauchant (constaté jusqu'à 480px de
   large). Passer .reglage-ligne en colonne évite tout calcul de largeur :
   chaque formulaire prend sa propre ligne, sans risque de collision. */
@media (max-width: 520px) {
  .reglage-ligne {
    flex-direction: column;
    align-items: stretch;
  }
  /* .reglage-forme-nom est lui-même une ligne flex (champ + bouton) : en
     colonne, align-items:stretch ne suffit pas à l'empêcher de déborder,
     car son min-width:200px et le contenu de ses propres enfants
     l'emportent sur la largeur "étirée". width:100% + min-width:0 le
     forcent à respecter la largeur de .reglage-ligne quoi qu'il arrive. */
  .reglage-forme-nom {
    width: 100%;
    min-width: 0;
  }
}
.reglage-ligne--rubrique .reglage-forme-nom input {
  font-family: var(--font-heading);
  font-size: 1.05rem;
}
.reglage-forme-nom {
  display: flex;
  flex: 1;
  min-width: 200px;
  gap: 8px;
}
.reglage-forme-nom input[type="text"] {
  flex: 1;
  /* Un champ texte dans une ligne flex a un min-width implicite = sa
     taille de contenu, qui ignore flex:1 et refuse de rétrécir en dessous
     — sur mobile, ça poussait le bouton "Renommer" hors de l'écran au
     lieu de laisser le champ céder la place. */
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
}
.reglage-forme-nom input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
}
.reglage-forme-rubrique {
  margin-top: 20px;
}

/* Albums de « Nos Sorties » (parametres.php, 27/08/2026) : contrairement aux
   catégories qui n'ont qu'un nom, un album porte deux champs (nom + dossier
   Google Drive). Une ligne flex champ+bouton comme .reglage-forme-nom serait
   trop serrée : chaque album est donc un petit bloc empilé, avec ses deux
   champs étiquetés puis ses boutons. */
.reglage-album {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}
.reglage-album--nouveau {
  border-top-style: dashed;
}
.reglage-album-champs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
.reglage-album-champs label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 200px;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.reglage-album-champs input[type="text"] {
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 12px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
}
.reglage-album-champs input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
}
/* Sélecteur Drive/Hébergé (27/08/2026) : deux options radio sur une ligne,
   plutôt qu'un des champs .reglage-album-champs (ni une étiquette de texte,
   ni un input) — largeur pleine pour ne pas se retrouver coincé entre le nom
   et le dossier Drive dans la ligne flex parente. */
.reglage-album-type {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  flex-basis: 100%;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.reglage-album-type label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex: none;
  min-width: 0;
}
@media (max-width: 520px) {
  .reglage-album,
  .reglage-album-champs {
    flex-direction: column;
    align-items: stretch;
  }
  .reglage-album-champs label {
    min-width: 0;
  }
}

.liste-documents {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.document-ligne {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.document-titre {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  text-decoration: underline;
}
.document-description {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.document-meta {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 0.78rem;
}
.document-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Agenda */
.liste-sorties {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.sortie-carte {
  display: flex;
  gap: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
}
.sortie-inscrite {
  border-color: rgba(168, 85, 247, 0.5);
}
.sortie-carte--sortie {
  border-left: 4px solid var(--accent-2);
}
.sortie-carte--cours {
  border-left: 4px solid #0e7490;
}
.sortie-carte--reunion {
  border-left: 4px solid var(--accent-3);
}
.categorie-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
  color: #fff;
}
.categorie-badge--sortie {
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
}
.categorie-badge--cours {
  background: #0e7490;
}
.categorie-badge--reunion {
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
}
.sortie-date {
  flex: 0 0 62px;
  text-align: center;
  background: var(--bg-alt);
  border-radius: var(--radius-btn);
  padding: 10px 0;
  height: fit-content;
}
.sortie-jour {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  line-height: 1;
}
.sortie-mois {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.sortie-photo {
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  border-radius: var(--radius-btn);
  object-fit: cover;
}
.sortie-corps h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  margin: 0 0 6px;
}
.sortie-quand {
  margin: 0 0 10px;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.sortie-detail {
  margin: 4px 0;
  font-size: 0.88rem;
  color: var(--text-muted);
}
.sortie-description {
  margin: 12px 0;
  font-size: 0.92rem;
}
.sortie-description a {
  color: var(--accent-3);
  text-decoration: underline;
}
.sortie-description a:hover {
  color: var(--accent);
}
.sortie-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.liste-sorties-passees .sortie-carte {
  opacity: 0.62;
  padding: 14px 20px;
}

/* Bouton « Modifier » d'une sortie : bouton normal replié, formulaire sur
   toute la largeur de la ligne d'actions une fois déplié. */
.sortie-modifier {
  flex: 0 1 auto;
}
.sortie-modifier[open] {
  flex-basis: 100%;
}
.sortie-modifier summary.btn {
  list-style: none;
}
.sortie-modifier summary.btn::-webkit-details-marker {
  display: none;
}

/* Onglets Mois/Semaine au-dessus du calendrier */
.agenda-cal-onglets {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.agenda-cal-onglet {
  padding: 9px 20px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.9rem;
}
.agenda-cal-onglet:hover {
  border-color: var(--accent-3);
  color: var(--text);
}
.agenda-cal-onglet--actif {
  background: var(--accent-gradient);
  border-color: transparent;
  color: #fff;
}

/* Bandeau récapitulatif des vacances scolaires qui chevauchent la période
   affichée (mois ou semaine). */
.agenda-cal-vacances-bandeau {
  background: rgba(250, 204, 21, 0.1);
  border: 1px solid rgba(250, 204, 21, 0.35);
  border-radius: var(--radius);
  padding: 12px 18px;
  margin: 0 0 16px;
  font-size: 0.86rem;
  color: var(--text-muted);
}
.agenda-cal-vacances-bandeau strong {
  color: var(--text);
}
.agenda-cal-vacances-pastille {
  background: rgba(250, 204, 21, 0.35);
  border: 1px solid rgba(250, 204, 21, 0.6);
  border-radius: 3px;
}

/* Calendrier de l'agenda, connecté aux mêmes sorties que les listes */
.agenda-calendrier {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 40px;
}
.agenda-cal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 22px 20px;
}
.agenda-cal-titre {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  margin: 0;
  min-width: 220px;
  text-align: center;
}
.agenda-cal-nav-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.agenda-cal-nav-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.agenda-cal-grille-entetes {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.agenda-cal-grille-entetes span {
  padding: 10px 8px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.agenda-cal-grille {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.agenda-cal-jour {
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  min-height: 100px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.agenda-cal-jour:nth-child(7n) {
  border-right: 1px solid var(--border);
}
.agenda-cal-jour.hors-mois {
  opacity: 0.35;
}
.agenda-cal-jour.vacances {
  background: rgba(250, 204, 21, 0.08);
}
.agenda-cal-grille--semaine .agenda-cal-jour {
  min-height: 200px;
}
.agenda-cal-jour-numero {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
}
.agenda-cal-jour.aujourdhui .agenda-cal-jour-numero {
  color: #fff;
  background: var(--accent-gradient);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.agenda-cal-pastille {
  display: block;
  font-size: 0.7rem;
  line-height: 1.35;
  padding: 3px 7px;
  border-radius: 6px;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agenda-cal-pastille--sortie {
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
}
.agenda-cal-pastille--cours {
  background: #0e7490;
}
.agenda-cal-pastille--reunion {
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
}
.agenda-cal-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  padding: 16px 20px;
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}
.agenda-cal-legende span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Vue Année : douze mini-mois, un point sous les jours qui ont un événement */
.agenda-cal-annee-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
  padding: 20px;
}
.agenda-cal-mini-mois {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  padding: 12px;
}
.agenda-cal-mini-mois-titre {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  text-align: center;
  margin: 0 0 8px;
  color: var(--text);
}
.agenda-cal-mini-mois-titre:hover {
  color: var(--accent-3);
}
.agenda-cal-mini-entetes,
.agenda-cal-mini-jours {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.agenda-cal-mini-entetes span {
  text-align: center;
  font-size: 0.6rem;
  color: var(--text-muted);
  padding-bottom: 4px;
}
.agenda-cal-mini-jour {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  font-size: 0.72rem;
  color: var(--text-muted);
  border-radius: 4px;
}
.agenda-cal-mini-jour.vacances {
  background: rgba(250, 204, 21, 0.14);
}
.agenda-cal-mini-jour.aujourdhui {
  background: var(--accent-gradient);
  color: #fff;
  font-weight: 700;
}
.agenda-cal-mini-jour.a-un-evenement::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-3);
}
.agenda-cal-mini-jour.aujourdhui.a-un-evenement::after {
  background: #fff;
}
.agenda-cal-mini-point {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-3);
}

@media (max-width: 760px) {
  .agenda-cal-grille-entetes span {
    font-size: 0.6rem;
    padding: 8px 2px;
  }
  .agenda-cal-jour {
    min-height: 64px;
    padding: 5px;
  }
  .agenda-cal-jour-numero {
    font-size: 0.72rem;
  }
  .agenda-cal-pastille {
    font-size: 0;
    padding: 0;
    height: 6px;
    border-radius: 3px;
  }
  .agenda-cal-nav {
    gap: 12px;
  }
  .agenda-cal-titre {
    min-width: 0;
    font-size: 1.05rem;
  }
}

/* Annuaire */
.annuaire-carte .member-body {
  padding: 20px;
}
.annuaire-carte h3 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  margin: 0 0 10px;
}
.annuaire-contacts {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
}
.annuaire-contacts li {
  margin-bottom: 6px;
}
.annuaire-contacts a {
  color: var(--text-muted);
  text-decoration: underline;
}
.annuaire-contacts a:hover {
  color: var(--text);
}
.annuaire-vide {
  color: var(--text-muted);
}

.grille-deux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

/* Tableau de gestion des adhérents */
.tableau-defilant {
  overflow-x: auto;
}
.tableau-adherents {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  /* Assez large pour que six colonnes tiennent sans se tasser ; en dessous,
     .tableau-defilant fait défiler horizontalement plutôt que d'écraser. */
  min-width: 940px;
}
/* Chaque valeur dans sa case, bordure complète : c'est ce qui rend un tableau
   lisible quand on balaie une colonne du regard. */
.tableau-adherents th,
.tableau-adherents td {
  text-align: left;
  padding: 13px 16px;
  border: 1px solid var(--border);
  vertical-align: middle;
}
.tableau-adherents th {
  color: var(--text-muted);
  font-weight: normal;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--bg-alt);
  white-space: nowrap;
}
/* Une ligne sur deux légèrement teintée : l'œil ne saute pas de ligne. */
.tableau-adherents tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.025);
}
.tableau-adherents tbody tr:hover {
  background: var(--surface-hover);
}
.colonne-date {
  white-space: nowrap;
}
.heure-secondaire {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-left: 4px;
}
.jamais-connecte {
  color: var(--text-muted);
}
.compte-inactif {
  opacity: 0.55;
}
.cellule-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

@media (max-width: 640px) {
  .sortie-carte {
    flex-direction: column;
    gap: 12px;
  }
  .sortie-date {
    flex: 0 0 auto;
    width: 62px;
  }
  .document-ligne {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Colonne « Connecté » du tableau des adhérents */
.pastille-en-ligne,
.pastille-hors-ligne {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: middle;
}
.pastille-en-ligne {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.22);
}
.pastille-hors-ligne {
  background: var(--text-muted);
  opacity: 0.45;
}
.etat-en-ligne {
  color: #bbf7d0;
}
.etat-hors-ligne {
  color: var(--text-muted);
}
.contact-secondaire {
  color: var(--text-muted);
  font-size: 0.8rem;
}
.lien-deconnecter {
  color: #fca5a5;
}
.lien-deconnecter:hover {
  color: #fecaca;
}

/* Conteneur élargi pour les pages à tableau (onglet Adhérents). La largeur de
   lecture habituelle vaut pour du texte, pas pour six colonnes de données. */
.container-large {
  max-width: 1460px;
}

/* ===========================================================================
   PAGE CONTACT — mise en page inspirée de focalclub.fr (formulaire à gauche,
   informations pratiques + FAQ à droite/en dessous), gardant la palette bleu
   nuit et Comic Sans déjà en place sur tout le site.
   ========================================================================= */

.contact-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: start;
}
.contact-layout .form-card h2,
.contact-info-panel h2 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  margin: 0 0 22px;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.info-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.info-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.info-card .feature-icon {
  flex: none;
  width: 42px;
  height: 42px;
  margin-bottom: 0;
}
.info-card .feature-icon svg {
  width: 20px;
  height: 20px;
}
.info-card h3 {
  margin: 0 0 4px;
  font-size: 1rem;
}
.info-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
}
.info-card a {
  text-decoration: underline;
}

/* Carte de localisation : lien vers Google Maps plutôt qu'un plan intégré.
   Un iframe embarqué se serait chargé silencieusement en arrière-plan sur
   une page consultée par tous — un simple lien évite ce chargement externe
   tant que le visiteur ne l'a pas demandé. */
.map-card {
  display: block;
  /* En dehors de .info-cards (qui espace ses propres cartes via gap), ce lien
     n'héritait d'aucun écart avec la dernière carte au-dessus : même valeur
     que .info-cards { gap: 16px } pour un rythme vertical cohérent. */
  margin-top: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  text-align: center;
  color: var(--text-muted);
}
.map-card:hover {
  border-color: var(--accent);
  color: var(--text);
}
.map-card .feature-icon {
  margin: 0 auto 12px;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.faq-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 26px;
}
.faq-card h3 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  margin: 0 0 10px;
}
.faq-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
}

@media (max-width: 860px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
  .field-row {
    grid-template-columns: 1fr;
  }
}

/* Bandeau dépliant « Prochaine sortie / réunion » sur l'accueil (choix
   explicite de l'utilisateur, 23/08/2026). <details> natif pour le
   dépliant (pas de JS de bascule dédié) : main.js ne fait qu'en remplir le
   texte, depuis infos-prochaine-sortie.php. Reste masqué (hidden en dur
   dans index.html) tant qu'aucune sortie à venir n'est chargée. */
.bandeau-sortie {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
}
.bandeau-sortie-resume {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  cursor: pointer;
  list-style: none;
  font-size: 0.92rem;
}
.bandeau-sortie-resume::-webkit-details-marker {
  display: none;
}
.bandeau-sortie-resume strong {
  color: var(--accent-3);
}
.bandeau-sortie-resume .nav-dropdown-caret {
  flex-shrink: 0;
}
.bandeau-sortie[open] .bandeau-sortie-resume .nav-dropdown-caret {
  transform: rotate(180deg);
}
.bandeau-sortie-detail {
  padding: 0 20px 18px;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.bandeau-sortie-detail p {
  margin: 4px 0;
}
.bandeau-sortie-detail a {
  text-decoration: underline;
}
/* Posé en haut du hero, sur la photo (choix explicite de l'utilisateur,
   23/08/2026) : fond semi-transparent avec flou, comme l'en-tête collant,
   pour rester lisible sur l'image plutôt que sur le fond uni utilisé
   ailleurs (tableau de bord, autres pages). */
.bandeau-sortie--sur-photo {
  max-width: 560px;
  margin: 0 auto 28px;
  background: rgba(15, 15, 40, 0.72);
  backdrop-filter: blur(8px);
  border-color: rgba(255, 255, 255, 0.18);
}

/* Boutons flottants « page précédente » / « section précédente » / « retour
   en haut », posés par main.js sur toute page ayant au moins une section —
   génériques, aucune page (présente ou future) n'a besoin de les déclarer
   elle-même. Toujours visibles dès le chargement (choix explicite de
   l'utilisateur, 23/08/2026 — auparavant masqués tant qu'on n'avait pas
   défilé 60% de l'écran). */
.retour-nav {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.retour-bouton {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(15, 15, 40, 0.85);
  backdrop-filter: blur(6px);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.retour-bouton:hover {
  background: var(--accent-gradient);
  border-color: transparent;
  transform: translateY(-2px);
}
.retour-bouton svg {
  width: 18px;
  height: 18px;
}
@media (max-width: 640px) {
  .retour-nav {
    right: 14px;
    bottom: 14px;
  }
  /* Les messages "aucun résultat" (centrés, presque toute la largeur du
     conteneur) se retrouvaient sous les boutons flottants sur mobile,
     quand ils tombent en bas de l'écran visible — .empty-state (Sorties
     à venir, Galerie privée/du Club, Documents, Blog) et .gallery-empty
     (Galerie publique, Expo 2026) réservent donc une marge à droite le
     temps de rester sous ce seuil, où .retour-nav passe en bas-droite. */
  .empty-state,
  .gallery-empty {
    padding-right: 64px;
  }
}

/* ===========================================================================
   BLOG DU CLUB (espace/blog.php, espace/blog-article.php) — mise en page
   calquée sur la maquette fournie par l'utilisateur (24/08/2026) : liste
   d'articles à gauche (titre, méta, extrait + vignette), colonne latérale
   « Articles récents » / « Catégories » à droite. ========================= */

.blog-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items: start;
  margin-top: 8px;
}
@media (max-width: 900px) {
  .blog-layout {
    grid-template-columns: 1fr;
  }
}

.blog-filtre-actif {
  color: var(--text-muted);
  margin: 0 0 20px;
}
.blog-filtre-actif a {
  color: var(--accent-3);
}

.blog-article-ligne {
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
}
.blog-article-ligne:first-child {
  padding-top: 0;
}
.blog-article-ligne h2 {
  margin: 0 0 6px;
  font-size: 1.25rem;
}
.blog-article-ligne h2 a {
  color: var(--text);
}
.blog-article-ligne h2 a:hover {
  color: var(--accent-3);
}
.blog-meta {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 0 0 14px;
}
.blog-meta a {
  color: var(--accent-3);
}

/* Extrait et vignette côte à côte, comme sur la page de référence — la
   vignette garde une taille fixe (object-fit: cover), l'extrait occupe le
   reste de la largeur. */
.blog-article-corps {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.blog-extrait {
  flex: 1;
  margin: 0;
  color: var(--text-muted);
  line-height: 1.6;
}
.blog-vignette {
  width: 140px;
  height: 105px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
@media (max-width: 560px) {
  .blog-article-corps {
    flex-direction: column-reverse;
  }
  .blog-vignette {
    width: 100%;
    height: 180px;
  }
}
.blog-lire {
  display: inline-block;
  margin-top: 12px;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--accent-3);
}
.blog-lire:hover {
  color: var(--accent);
}

.blog-pagination {
  display: flex;
  justify-content: space-between;
  margin-top: 28px;
}
.blog-pagination a {
  color: var(--accent-3);
  font-weight: 600;
}
.blog-pagination a:hover {
  color: var(--accent);
}

/* Colonne latérale : deux pavés, même habillage que .form-card mais plus
   compacts (pas de formulaire à l'intérieur). */
.blog-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.blog-widget {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.blog-widget h2 {
  font-family: var(--font-heading);
  font-size: 1rem;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.blog-widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.blog-widget li a {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.4;
}
.blog-widget li a:hover,
.blog-widget li a[aria-current="page"] {
  color: var(--accent-3);
}

/* Article complet (blog-article.php) */
.blog-article-complet .blog-meta {
  margin-bottom: 20px;
}
.blog-image-article {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 24px;
}
.blog-contenu {
  color: var(--text);
  line-height: 1.7;
}
.blog-contenu p {
  margin: 0 0 18px;
}
.blog-contenu p:last-child {
  margin-bottom: 0;
}
.blog-contenu a {
  color: var(--accent-3);
  text-decoration: underline;
}
.blog-contenu a:hover {
  color: var(--accent);
}
.blog-actions-gestion {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}