/* =============================================================================
   Chez MAG 56 - feuille de style unique
   -----------------------------------------------------------------------------
   Ce fichier est la concatenation de ce qui etait auparavant tokens.css,
   base.css, components.css et animations.css, dans cet ordre exact : les
   @font-face de la section BASE doivent rester avant leur premier usage, et
   la section ANIMATIONS surcharge des regles de COMPOSANTS.

   Il n'y a pas d'etape de build : ce fichier s'edite directement. Chaque
   section garde son bandeau ci-dessous pour rester navigable.

   Ordre :  1. TOKENS      variables de couleur, d'espacement, de typographie
            2. BASE        reset, @font-face, elements HTML, utilitaires
            3. COMPOSANTS  tout le vocabulaire visuel du site
            4. ANIMATIONS  etats masques (.anim), reveals, reduced-motion
   ============================================================================= */



/* =============================================================================
   1. TOKENS - variables de couleur, d espacement, de typographie
   ex-css/tokens.css
   ============================================================================= */

/* ==========================================================================
   tokens.css — variables de design « Tribune » (voir DA.md)
   ========================================================================== */
:root {
  /* Couleurs */
  /* --- Palette de l'enseigne : le site parle d'abord la langue du logo --- */
  --bordeaux: #65121e;        /* le bordeaux du panneau : aplats sur fond clair */
  --bordeaux-vif: #a8253a;    /* le même, monté d'un cran : aplats sur fond sombre */
  --bordeaux-eclat: #c02c44;   /* le survol des aplats sur fond sombre */
  --bordeaux-sombre: #4c0d16;  /* le survol des aplats sur fond clair */
  --bordeaux-clair: #d4707f;  /* l'accent quand il est du TEXTE sur fond sombre (>= 5:1) */
  --anthracite: #1d1d1b;      /* le noir du logo, qui est aussi celui du Gwenn ha Du */
  --anthracite-2: #262624;
  --nuit: #14100f;            /* noir chaud : le fond sombre par defaut du site */
  --nuit-2: #1f1917;
  --nuit-3: #0d0a09;
  --craie: #f4f1ea;
  --craie-2: #e8e3d8;
  --gris-enseigne: #868686;  /* les filets fins de la plaque de façade (mesuré sur le BAT) */
  --noir: #0b0b0b;
  --blanc: #ffffff;

  /* --- Palette RC Vannes : reservee a .theme-stade, nulle part ailleurs.
         C'est ce cloisonnement qui fait que le bar a une identite et le rugby une autre. */
  --marine: #001438;
  --marine-2: #0b2352;
  --encre: #0a1029;
  --rouge: #d51224;
  --brume: #b8bccb;

  /* Alias semantiques (fond sombre chaud par defaut) */
  --bg: var(--nuit);
  --bg-eleve: var(--nuit-2);
  --fg: var(--craie);
  --fg-2: #b3a9a4;
  --ligne: rgb(244 241 234 / 0.14);
  /* L'accent existe en deux valeurs parce qu'un aplat et un texte n'ont pas les memes
     exigences de contraste : --accent REMPLIT (bouton, pastille, badge), --accent-fg
     ECRIT (oeil-de-perdrix, icone, filet, lien). Chaque theme redefinit les deux. */
  --accent: var(--bordeaux-vif);
  --accent-fg: var(--bordeaux-clair);
  --accent-survol: var(--bordeaux-eclat);
  --accent-rgb: 168 37 58;
  --ombre-rgb: 12 9 8;
  --voile-rgb: 31 25 23;
  --focus: var(--accent-fg);

  /* Typographie */
  --font-display: "Anton", Impact, "Arial Narrow Bold", sans-serif;
  --font-text: "Barlow", system-ui, "Segoe UI", Roboto, sans-serif;
  --fs-hero: clamp(3rem, min(8vw, 13vh), 7.5rem);
  --fs-h2: clamp(2.25rem, 6vw, 5rem);
  --fs-h3: clamp(1.5rem, 3vw, 2.25rem);
  --fs-lead: clamp(1.125rem, 1.6vw, 1.375rem);
  --fs-body: clamp(1rem, 1.1vw, 1.125rem);
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;
  --lh-display: 1.08;
  --lh-text: 1.55;

  /* Espace */
  --container: 80rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  /* Bandeau d'enseigne reconstruit : hauteur de la plaque, retrait de ses filets et épaisseur
     du filet bordeaux (6,5 % de la hauteur, comme sur la façade). Les sections encadrées
     (.cadre) reprennent l'épaisseur pour prolonger le filet. */
  --enseigne-h: clamp(3.5rem, 7.2vw, 6.5rem);
  --enseigne-marge: clamp(0.75rem, 2vw, 2rem);
  --enseigne-filet: calc(var(--enseigne-h) * 0.065);
  /* Resserré le 2026-09-09 : à 9 rem de marge haute et basse, dix sections faisaient
     dix-neuf écrans. Le pas commun descend à 5,5 rem au plus ; les sections « brèves »
     (états vides) en prennent 60 %. */
  --section-y: clamp(3rem, 6vw, 5.5rem);
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;

  /* Formes */
  --radius: 4px;
  --radius-pill: 999px;

  /* Mouvement */
  --d-micro: 0.2s;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Hauteur du header pour les ancres */
  --header-h: 4.5rem;
}

/* Sections claires : on inverse les alias. L'accent y redevient le bordeaux profond,
   qui a 9:1 sur la craie -- le bordeaux eclairci, lui, n'y tiendrait pas.
   Refonte palette du 2026-09-10 (Saad) : le site adopte la craie et le bordeaux de la bande
   d'enseigne. Une seule craie pour toutes les sections claires (Le bar, Services, Galerie,
   Avis, Contact) ; seuls le hero (photo) et RC Vannes (marine) restent sombres. */
.theme-clair {
  --bg: var(--craie);
  --bg-eleve: var(--blanc);
  --fg: var(--anthracite);
  --fg-2: #5a5450;
  --ligne: rgb(var(--ombre-rgb) / 0.16);
  --accent: var(--bordeaux);
  --accent-fg: var(--bordeaux);
  --accent-survol: var(--bordeaux-sombre);
  --accent-rgb: 101 18 30;
  --focus: var(--bordeaux);
}
/* Le cran le plus sombre de la maison : l'en-tête des pages secondaires. */
.theme-encre {
  --bg: var(--nuit-3);
  --bg-eleve: var(--nuit);
}
/* Événements (Saad, vague 5) : le bordeaux du panneau en aplat, écrit en craie. Le bouton
   plein s'inverse (craie sur bordeaux) : un aplat bordeaux sur fond bordeaux disparaîtrait. */
.theme-bordeaux {
  --bg: var(--bordeaux);
  --bg-eleve: var(--bordeaux-sombre);
  --fg-2: #e6cdcd;
  --ligne: rgb(244 241 234 / 0.22);
  --accent: var(--craie);
  --accent-fg: #f2c4ca;
  --accent-survol: var(--blanc);
  --accent-rgb: 244 241 234;
  --ombre-rgb: 40 6 12;
  --voile-rgb: 76 13 22;
  --focus: var(--craie);
}
.theme-bordeaux .btn:not(.btn--contour) { --btn-fg: var(--bordeaux); }
/* Le pied de page : le même bordeaux, un cran plus sombre, pour fermer la page. */
.theme-bordeaux--sombre {
  --bg: var(--bordeaux-sombre);
  --bg-eleve: var(--bordeaux);
}
/* SEULE section a garder les couleurs du RC Vannes : marine + rouge. Le cloisonnement
   tient a ce bloc -- tout le reste du site tire ses couleurs de l'enseigne. */
.theme-stade {
  --bg: var(--marine);
  --bg-eleve: var(--marine-2);
  --fg-2: var(--brume);
  --accent: var(--rouge);
  --accent-fg: var(--rouge);
  --accent-survol: #b70f1f;
  --accent-rgb: 213 18 36;
  --ombre-rgb: 10 16 41;
  --voile-rgb: 11 35 82;
  --focus: var(--rouge);
}


/* =============================================================================
   2. BASE - reset, @font-face, elements HTML, utilitaires
   ex-css/base.css
   ============================================================================= */

/* ==========================================================================
   base.css — reset, polices, typographie, utilitaires
   ========================================================================== */

/* Polices auto-hébergées (latin), aucune requête tierce */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/anton-400.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/barlow-400.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/barlow-500.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/barlow-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/barlow-700.woff2") format("woff2");
}

/* Reset court */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  min-height: 100dvh;
  background: var(--nuit);
  color: var(--craie);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, picture, video, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accent); color: var(--blanc); }

/* Typographie */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { max-width: 65ch; text-wrap: pretty; }
.lead { font-size: var(--fs-lead); font-weight: 500; }
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.num { font-variant-numeric: tabular-nums; }

/* Structure */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}
.section {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  padding-block: var(--section-y);
  isolation: isolate;
}
/* Sections brèves : un état vide (événements à venir, premiers avis) n'a pas à occuper un
   écran. Le pas vertical descend à 60 % et l'en-tête se colle à son contenu. */
.section--bref { padding-block: calc(var(--section-y) * 0.6); }
.section--bref .section__tete { margin-bottom: clamp(1.25rem, 3vw, 2rem); }

/* Cadre (Saad, vague 5 de la refonte palette, 2026-09-10) : galerie, avis et contact sont
   encadrés à gauche et à droite par un filet bordeaux continu, qui prolonge le filet du bandeau
   d'enseigne posé juste au-dessus et plonge dans le pied de page bordeaux. Même épaisseur que
   le filet de la plaque (jeton --enseigne-filet), collés aux bords de l'écran (Saad, 2026-09-11 :
   « collées aux extrémités de l'écran », plutôt que dans la gouttière de la plaque), un seul
   pseudo-élément par section, au-dessus du contenu : la bande de photos de la galerie passe dessous. */
.cadre::after {
  content: "";
  position: absolute;
  inset: 0;
  border-left: var(--enseigne-filet) solid var(--bordeaux);
  border-right: var(--enseigne-filet) solid var(--bordeaux);
  pointer-events: none;
  z-index: 5;
}

/* Grain : tuile SVG statique, aucune animation */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* Mouchetures d'hermine en quinconce, géométrie du Gwenn ha Du. Fonds sombres seulement
   (RC Vannes, en-tête des pages secondaires) : à 7 % de blanc, elles n'existent pas sur la craie. */
.hermines::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='176' viewBox='0 0 128 176'%3E%3Cg fill='%23fff'%3E%3Cpath transform='translate(17 18) scale(.37)' d='M40.5 36 31.5 22.5 40.5 0 49.5 22.5ZM40.5 36 27 45 4.5 36 27 27ZM40.5 36 54 27 76.5 36 54 45ZM40.5 36 81 135 49.5 121.5 40.5 139.5 31.5 121.5 0 135Z'/%3E%3Cpath transform='translate(81 106) scale(.37)' d='M40.5 36 31.5 22.5 40.5 0 49.5 22.5ZM40.5 36 27 45 4.5 36 27 27ZM40.5 36 54 27 76.5 36 54 45ZM40.5 36 81 135 49.5 121.5 40.5 139.5 31.5 121.5 0 135Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 128px 176px;
}

/* Accessibilité */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute;
  top: 0; left: 0;
  z-index: 100;
  padding: var(--s-3) var(--s-5);
  background: var(--accent);
  color: var(--blanc);
  font-weight: 600;
  transform: translateY(-120%);
  transition: transform var(--d-micro);
}
.skip-link:focus { transform: none; }

/* Mentions sanitaires : toujours lisibles */
.mention-legale {
  font-size: var(--fs-small);
  line-height: 1.5;
  max-width: none;
  color: var(--fg);
  border-top: 1px solid var(--ligne);
  padding-top: var(--s-4);
}


/* =============================================================================
   3. COMPOSANTS - le vocabulaire visuel du site
   ex-css/components.css
   ============================================================================= */

/* ==========================================================================
   components.css — header, boutons, hero, rideau, curseur
   ========================================================================== */

/* ---------- Boutons ---------- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--blanc);
  --btn-bord: var(--accent);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 3.25rem;
  padding: 0.85rem 1.75rem;
  border: 2px solid var(--btn-bord);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--d-micro), color var(--d-micro), border-color var(--d-micro), transform var(--d-micro);
  will-change: transform;
}
.btn:hover { --btn-bg: var(--accent-survol); --btn-bord: var(--accent-survol); }
.btn--contour {
  --btn-bg: transparent;
  --btn-fg: var(--craie);
  --btn-bord: rgb(244 241 234 / 0.55);
}
.btn--contour:hover { --btn-bg: var(--craie); --btn-fg: var(--nuit); --btn-bord: var(--craie); }
/* 2,75 rem et non 2,5 : 44 px est le plancher WCAG 2.5.8, et ça tient toujours
   dans les 4,5 rem du header. */
.btn--small { min-height: 2.75rem; padding: 0.5rem 1.1rem; font-size: 0.875rem; }
.btn__icone { width: 1.1em; height: 1.1em; flex: none; }

/* ---------- Header ---------- */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  color: var(--craie);
  transition: transform 0.45s var(--ease-out), background-color 0.3s, color 0.3s, height 0.3s var(--ease-out);
}
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(var(--ombre-rgb) / 0.75), transparent);
  pointer-events: none;
  transition: opacity 0.3s;
}
/* Une fois la page défilée la barre se densifie (fond, flou) et se resserre de 4,5 à 4 rem :
   moins de hauteur prise sur le contenu. Le scroll-padding, lui, garde 4,5 rem : l'ancre
   arrive un peu plus bas que la barre compacte, jamais dessous. */
.header--fond { height: 4rem; background: rgb(var(--ombre-rgb) / 0.92); backdrop-filter: blur(10px); }
.header--fond::before { opacity: 0; }
/* Refonte palette du 2026-09-10 : sur le hero (ou l'en-tête sombre d'une page secondaire) la
   barre reste sombre et translucide ; dès qu'elle en sort, elle passe en craie, écrit en
   anthracite, avec le mot-symbole « encre » et l'accent bordeaux profond, comme la plaque de
   la façade. Classe tenue par main.js. Les alias sont redéfinis ici parce que la barre est
   hors de toute section ; le menu plein écran, qui reste nuit, reprend les siens plus bas. */
.header--clair {
  background: rgb(244 241 234 / 0.94);
  color: var(--anthracite);
  box-shadow: 0 1px 0 rgb(var(--ombre-rgb) / 0.08);
  --fg: var(--anthracite);
  --ligne: rgb(var(--ombre-rgb) / 0.22);
  --accent: var(--bordeaux);
  --accent-fg: var(--bordeaux);
  --accent-survol: var(--bordeaux-sombre);
  --focus: var(--bordeaux);
}
.header--clair::before { opacity: 0; }
.header--cache { transform: translateY(-100%); }
.header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  height: 100%;
}
/* La barre porte le mot-symbole horizontal, pas le macaron : dans 4,5 rem de haut, un
   disque ne montre plus que sa couronne et le nom devient illisible. Largeur libre,
   hauteur calée -- c'est le dessin qui donne le rapport, pas nous. Le liséré clair du
   logo fait le contraste sur le noir de la barre : aucune couleur n'est touchée. */
.header__logo {
  position: relative;
  display: block;
  width: auto;
  height: 2.25rem;
  border-radius: var(--radius);
  overflow: hidden;
  flex: none;
}
.header__logo img { display: block; width: auto; height: 100%; transition: opacity 0.3s; }
/* Deux dessins du même mot-symbole superposés : liséré clair pour la barre sombre, version
   « encre » au liséré craie pour la barre craie. Fondu croisé au passage, aucune recoloration. */
.header__logo-encre { position: absolute; inset: 0; opacity: 0; }
.header--clair .header__logo-encre { opacity: 1; }
.header--clair .header__logo-nuit { opacity: 0; }
.header__logo::after {
  content: "";
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(115deg, transparent 40%, rgb(255 255 255 / 0.55) 50%, transparent 60%);
  transform: translateX(-120%);
  pointer-events: none;
}
.header__cta { display: none; }
/* Sous 900 px le macaron du hero est à 90 px du mot-symbole : deux fois la marque sur le même
   écran. La barre cède la place tant que le hero est visible (classe tenue par main.js). */
.js .header__logo { transition: opacity 0.3s, visibility 0.3s; }
@media (max-width: 899px) {
  .js .header--dans-hero .header__logo { opacity: 0; visibility: hidden; }
}

/* ---------- « Appeler » flottant, sous 1024 px ---------- */
/* L'en-tête ne porte le bouton d'appel qu'à partir de 1024 px, et il se rétracte dès qu'on
   descend : sur téléphone et tablette, le numéro n'était atteignable qu'en ouvrant le menu.
   Le bouton suit donc le lecteur, posé en bas d'écran — au-dessus du contenu, sous le menu
   plein écran (60) et la visionneuse (200). env() le tient au-dessus de la barre système. */
.appel-flottant {
  position: fixed;
  z-index: 40;
  right: var(--gutter);
  bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 8px 28px rgb(var(--ombre-rgb) / 0.5);
}
/* Piloté par main.js, qui le montre une fois le hero passé et le retire sur la section
   contact, où le numéro est écrit en toutes lettres. Sans JavaScript aucune classe n'est
   posée : le bouton reste simplement visible. */
.js .appel-flottant {
  opacity: 0;
  visibility: hidden;
  transform: translateY(150%);
  transition: opacity var(--d-micro) var(--ease-out), transform 0.35s var(--ease-out), visibility 0s 0.35s;
}
.js .appel-flottant.est-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (min-width: 1024px) { .appel-flottant { display: none; } }

/* Navigation */
.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 2.75rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav__toggle-barres { position: relative; width: 18px; height: 12px; }
.nav__toggle-barres::before, .nav__toggle-barres::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: currentColor;
  transition: transform var(--d-micro), top var(--d-micro);
}
.nav__toggle-barres::before { top: 0; }
.nav__toggle-barres::after { top: 10px; }
.nav__toggle[aria-expanded="true"] .nav__toggle-barres::before { top: 5px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-barres::after { top: 5px; transform: rotate(-45deg); }
.nav__list {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-4);
  padding: var(--gutter);
  background: var(--nuit-3);
  color: var(--craie);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 9vw, 4rem);
  text-transform: uppercase;
  line-height: 1;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.5s var(--ease-out), visibility 0s 0.5s;
}
.nav__list.est-ouvert { transform: none; visibility: visible; transition: transform 0.5s var(--ease-out); }
/* Anton à 36 px sur un écran étroit ne fait que 36 px de haut (line-height: 1) :
   le padding l'amène au-dessus de 44 sans écarter les entrées, qui ont déjà leur gap. */
.nav__list a { display: inline-block; padding-block: 0.3rem; text-decoration: none; }
.nav__list a:hover, .nav__list a[aria-current="true"] { color: var(--accent-fg); }
/* Le menu plein écran reste nuit même sous la barre craie : il reprend les alias du fond sombre. */
@media (max-width: 1023px) {
  .header--clair .nav__list { --accent-fg: var(--bordeaux-clair); --ligne: rgb(244 241 234 / 0.14); --focus: var(--bordeaux-clair); }
}
.nav__fermer {
  position: absolute;
  top: var(--s-4); right: var(--gutter);
  min-height: 2.75rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  font-family: var(--font-text);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav__list .nav__legende {
  font-family: var(--font-text);
  font-size: var(--fs-small);
  text-transform: none;
  color: var(--fg-2);
  margin-top: var(--s-6);
}

@media (min-width: 1024px) {
  .nav__toggle, .nav__fermer, .nav__list .nav__legende { display: none; }
  .nav__list {
    position: static;
    flex-direction: row;
    gap: clamp(1.25rem, 2.6vw, 2.5rem);
    padding: 0;
    background: none;
    color: inherit; /* la couleur de la barre, sombre ou craie, et non celle du menu plein ecran */
    font-family: var(--font-text);
    font-size: clamp(0.8125rem, 0.45rem + 0.5vw, 0.9375rem);
    font-weight: 600;
    letter-spacing: 0.06em;
    transform: none;
    visibility: visible;
    transition: none;
  }
  /* Le lien mesurait ~37 px. La boîte grandit symétriquement, donc le soulignement
     ::after (bottom: 0) descend de 3 px sous le texte -- invisible à l'œil. */
  .nav__list a { position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; padding-block: var(--s-2); white-space: nowrap; }
  .nav__list a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--ease-out);
  }
  .nav__list a:hover::after, .nav__list a[aria-current="true"]::after { transform: scaleX(1); }
  .nav__list a:hover, .nav__list a[aria-current="true"] { color: var(--fg); }
  .header__cta { display: inline-flex; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  /* Un écran, pas plus : svh (la hauteur avec la barre d'adresse déployée) pour que la
     première section affleure dès le premier rendu, et un plancher pour les écrans courts. */
  min-height: max(100svh, 36rem);
  display: grid;
  align-items: end;
  background: var(--nuit);
  color: var(--craie);
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: -12% 0 0 0;
  z-index: 0;
  will-change: transform;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  filter: saturate(0.85) contrast(1.05);
}
@media (max-width: 767px) { .hero__media img { object-position: 60% 45%; } }
.hero__voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 70% 20%, transparent 40%, rgb(var(--ombre-rgb) / 0.55) 100%),
    linear-gradient(to bottom, rgb(var(--ombre-rgb) / 0.35) 0%, rgb(var(--ombre-rgb) / 0.25) 35%, rgb(var(--ombre-rgb) / 0.92) 78%, var(--nuit) 100%);
}
.hero__voile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--nuit);
  opacity: 0.55;
  mix-blend-mode: multiply;
}
/* Le hero est une grille a deux colonnes : .hero__texte (pastille, titre, slogan, boutons)
   d'un cote, le macaron de l'autre. Le titre reste borne a 26ch, donc la colonne de droite
   ne le rogne jamais. */
.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding-top: calc(var(--header-h) + var(--s-6));
  padding-bottom: clamp(3rem, 7vh, 5rem);
}
/* Sous 900 px le hero est une enseigne : macaron centré en tête, puis pastille, titre, slogan
   et boutons centrés dessous (décision Saad, vague 1 du 2026-09-09 : « mobile centré »). */
.hero__macaron {
  order: -1;
  justify-self: center;
  width: clamp(6.5rem, 26vw, 8.5rem);
  height: auto;
  margin-bottom: var(--s-5);
  /* Le flottement et l'inclinaison au défilement (animations.js) partent du centre du disque */
  transform-origin: 50% 50%;
  will-change: transform;
}
/* Deux enfants, deux colonnes : le texte d'un côté, le macaron de l'autre, et
   align-items: center suffit à les mettre en face l'un de l'autre. La version précédente
   posait le macaron en grid-row: 1 / -1 pour couvrir toute la hauteur du bloc -- sans
   rangée explicite déclarée, -1 retombe sur la ligne 1 et le macaron ne couvrait que la
   rangée de la pastille : il se retrouvait plaqué en haut à droite.
   La colonne de droite est plus large que le macaron (0.62fr contre une image bornée à
   17 rem) : il respire au lieu d'être soudé au bord de l'écran. Sous 900 px la grille
   retombe sur une colonne et le macaron passe en tête, avant la pastille. */
@media (max-width: 899.98px) {
  .hero__texte { text-align: center; }
  .hero__titre, .hero__sous { margin-inline: auto; }
  .hero__actions { justify-content: center; }
}
@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.62fr);
    column-gap: clamp(2rem, 5vw, 4.5rem);
  }
  .hero__macaron {
    order: 0;
    align-self: start;
    justify-self: center;
    /* Pastille (2,3 rem) + sa marge : le disque part sur la ligne du titre, pas au milieu du vide */
    margin-top: calc(2.3rem + var(--s-5));
    width: clamp(10rem, 17vw, 15rem);
    margin-bottom: 0;
  }
}
.hero__pastille {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
  padding: 0.45rem 0.9rem 0.45rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--nuit-3);
  border: 1px solid var(--ligne);
  color: var(--blanc);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  max-width: none;
}
.hero__pastille::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--fg-2);
}
/* État par défaut (data-etat absent : JS coupé, infos.json indisponible) = pastille neutre,
   point neutre et texte de repli « Ouvert 7 j/7 », vrai quelle que soit l'heure. La couleur
   se mérite : seul rendOuverture() (data.js) pose data-etat. Le fond est un voyant plein
   (décision Saad, vague 1 du 2026-09-09) : bordeaux « ouvert » avec point blanc qui pulse,
   ambre sur texte sombre « ouvre bientôt », neutre « fermé ». */
.hero__pastille[data-etat], .horaires__etat[data-etat] { --etat-rgb: 179 169 164; }
.hero__pastille[data-etat="ouvert"], .horaires__etat[data-etat="ouvert"] {
  --etat-rgb: 255 255 255;
  background: var(--accent);
  border-color: transparent;
  color: var(--blanc);
}
.hero__pastille[data-etat="bientot"], .horaires__etat[data-etat="bientot"] {
  --etat-rgb: 13 10 9;
  background: #dea034;
  border-color: transparent;
  color: var(--nuit-3);
}
.hero__pastille[data-etat]::before, .horaires__etat[data-etat]::before { background: rgb(var(--etat-rgb)); }
.hero__pastille[data-etat="ouvert"]::before, .horaires__etat[data-etat="ouvert"]::before { animation: pulse-etat 1.6s infinite; }
@keyframes pulse-etat {
  0% { box-shadow: 0 0 0 0 rgb(var(--etat-rgb) / 0.7); }
  70% { box-shadow: 0 0 0 7px rgb(var(--etat-rgb) / 0); }
  100% { box-shadow: 0 0 0 0 rgb(var(--etat-rgb) / 0); }
}
.hero__titre {
  max-width: 26ch;
  text-shadow: 0 2px 30px rgb(var(--ombre-rgb) / 0.5);
}
.hero__titre .mot { display: inline-block; white-space: nowrap; }
.hero__titre .groupe { white-space: nowrap; }
.hero__titre .lettre { display: inline-block; }
/* « RC Vannes » aux couleurs du club : seule sortie du marine hors .theme-stade, demandée par
   Saad (vague 1, 2026-09-09). Le marine sur la photo sombre ne se lit pas en lettres : il
   sert de fond, les deux mots sont surlignés d'un seul bloc (craie sur marine), insécable. */
.hero__titre .accent {
  display: inline-block;
  white-space: nowrap;
  padding: 0 0.16em;
  margin: 0 -0.04em;
  background: var(--marine);
  color: var(--craie);
  border-radius: 0.08em;
}
.hero__sous { margin-top: var(--s-5); max-width: 40ch; color: rgb(244 241 234 / 0.9); }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-6);
}
/* Trois boutons : sous 768 px le principal prend la ligne, Appeler et Horaires se partagent
   la suivante ; au-dessus ils tiennent sur une ligne, à leur largeur. */
.hero__actions .btn { flex: 1 1 8rem; }
.hero__actions .btn:first-child { flex-basis: 100%; }
@media (min-width: 768px) {
  .hero__actions .btn, .hero__actions .btn:first-child { flex: 0 0 auto; }
}
/* Pied du hero : « Descendre » et, en bureau, les réseaux à sa gauche (règles dans la section
   des boutons réseaux). Le bloc tient la place que l'indicateur occupait seul. */
.hero__pied {
  position: absolute;
  right: var(--gutter);
  bottom: var(--s-5);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.hero__scroll {
  display: none;
  align-items: center;
  gap: var(--s-3);
  color: rgb(244 241 234 / 0.75);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}
.hero__scroll:hover { color: var(--craie); }
.hero__scroll svg { width: 2rem; height: 2rem; animation: tourne 14s linear infinite; }
@media (min-width: 768px) { .hero__scroll { display: inline-flex; } }

/* ---------- Rideau Gwenn ha Du ---------- */
.rideau {
  display: grid;
  grid-template-rows: repeat(9, 1fr);
  height: clamp(4rem, 10vh, 6rem);
  background: var(--nuit);
  overflow: hidden;
}
.rideau__bande { background: var(--blanc); transform-origin: left center; }
.rideau__bande:nth-child(odd) { background: var(--noir); }
.rideau__bande:nth-child(even) { transform-origin: right center; }

/* ---------- Bandeau d'enseigne ---------- */
/* La plaque de la devanture reconstruite en HTML et SVG (refonte palette du 2026-09-10) plutôt
   que le PNG du BAT : elle se recolore avec la page, ses pièces s'animent au défilement et le
   mot-symbole reste net à toute taille. La plaque craie arrondie est posée à cheval sur la
   couture : au-dessus, la couleur de la section qui précède (--bg de la classe de thème portée
   par le bandeau), en dessous la craie de la section qui suit. Aucun logo n'est recoloré : le
   macaron est celui du BAT, le mot-symbole est la version « encre » de la façade (lettres
   anthracite, 56 bordeaux, liséré craie au lieu du gris clair prévu pour les fonds sombres). */
.enseigne {
  position: relative;
  overflow: hidden;
  background: linear-gradient(var(--bg) 50%, var(--craie) 50%);
}
.enseigne__plaque {
  position: relative;
  height: var(--enseigne-h);
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.6vw, 1.5rem);
  padding-inline: var(--enseigne-marge);
  background: var(--craie);
  border-radius: calc(var(--enseigne-h) * 0.55);
}
/* Trois filets, aux proportions mesurées sur le PNG (141 px : gris 39-43, bordeaux 71-79, gris
   106-110) : gris fin, bordeaux épais au milieu, gris fin. Le gris est celui de la façade. */
.enseigne__filets {
  flex: 1 1 0;
  align-self: stretch;
  min-width: 0;
  background: linear-gradient(to bottom,
    transparent 27.5%, var(--gris-enseigne) 27.5% 31%, transparent 31% 50%,
    var(--bordeaux) 50% 56.5%, transparent 56.5% 75%,
    var(--gris-enseigne) 75% 78.5%, transparent 78.5%);
}
.enseigne__macaron { display: block; height: 90%; width: auto; }
.enseigne__mot { display: block; height: 74%; width: auto; }
/* Sous 640 px, la plaque garde le mot-symbole et ses deux filets ; les macarons, qui ne
   feraient plus que 50 px, et les filets extérieurs s'effacent. */
@media (max-width: 639px) { .enseigne__macaron, .enseigne__filets--ext { display: none; } }

/* ---------- Curseur personnalisé ---------- */
.curseur {
  position: fixed;
  top: 0; left: 0;
  z-index: 200;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
  opacity: 0;
  transition: width 0.25s, height 0.25s, margin 0.25s, opacity 0.3s, background-color 0.25s;
  display: none;
}
.curseur.est-actif { width: 40px; height: 40px; margin: -20px 0 0 -20px; background: rgb(var(--accent-rgb) / 0.35); }
body.a-curseur .curseur { display: block; }
body.a-curseur.curseur-visible .curseur { opacity: 1; }

/* ---------- Chantier (prototype) ---------- */
/* Services : Tabac · PMU · FDJ · Services */
/* Vague 4 (Saad, 2026-09-09) : cartes compactes. Icône et titre sur la même ligne, la
   phrase dessous sur toute la largeur de la carte : deux rangées basses en bureau, quatre
   en mobile sur deux colonnes. */
.services__grille { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }
.service {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--s-3);
  row-gap: var(--s-2);
  align-items: center;
  padding: var(--s-4);
  background: var(--bg-eleve);
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), border-color 0.25s;
}
@media (hover: hover) {
  .service:hover { transform: translateY(-4px); box-shadow: 0 14px 30px -14px rgb(var(--ombre-rgb) / 0.35); border-color: rgb(var(--ombre-rgb) / 0.22); }
}
/* Anton n'existe qu'en 400 : un 700 ici était un faux gras synthétisé par le navigateur (vague transversale). */
.service h3 { font-size: 1.05rem; font-weight: 400; letter-spacing: 0.01em; line-height: 1.2; }
.service p { grid-column: 1 / -1; align-self: start; color: var(--fg-2); font-size: var(--fs-small); }
.service__icone { width: 1.75rem; height: 1.75rem; color: var(--accent-fg); }

/* Un seul cadre ferme la rubrique (Saad, vague 4) : la plaque d'agrément (totem, mention,
   logos PMU et FDJ) et les conforts sur place partagent le même bandeau blanc. */
.services__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--s-5) var(--s-6);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding: var(--s-5) var(--s-6);
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  overflow: hidden;
}
.partenaires {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
}
/* La borne est une photo posée dans la ligne, à hauteur du logo PMU : marge du
   bandeau autour, coins du site, pas de collage au bord. */
.partenaires__borne { display: block; flex: none; margin: 0; }
.partenaires__borne img {
  display: block;
  width: auto;
  height: 5.25rem;
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
}
.partenaires__titre { font-weight: 600; color: var(--fg-2); }
.partenaires__logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-6); }
.partenaires__logo { display: block; width: auto; }
.partenaires__logo--pmu { height: 4rem; }
.partenaires__logo--fdj { height: 2.25rem; }
/* Filet entre les agréments et les conforts. Masqué tant que les conforts
   passent sous la plaque : le trait du haut de .confort suffit. */
.services__filet { display: none; }
/* Les conforts : deux colonnes, sous la plaque en mobile, à sa droite en bureau. */
.confort {
  display: grid;
  flex: 1 1 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2) var(--s-4);
  align-content: center;
  padding-top: var(--s-4);
  border-top: 1px solid var(--ligne);
}
.confort li { display: flex; align-items: center; gap: var(--s-3); font-weight: 500; font-size: var(--fs-small); color: var(--fg-2); }
.confort svg { width: 1.5rem; height: 1.5rem; flex: none; color: var(--accent-fg); }
.services__mention { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
/* À 5,25 rem la photo fait passer les logos à la ligne tant que les conforts
   sont à droite. En dessous de 1100 px on revient à la hauteur du logo PMU. */
@media (max-width: 1099px) {
  .partenaires__borne img { height: 4rem; }
}
@media (max-width: 767px) {
  .service { padding: var(--s-3); column-gap: var(--s-2); }
  .service__icone { width: 1.5rem; height: 1.5rem; }
  .services__pied { gap: var(--s-4); padding: var(--s-4); }
  .partenaires { gap: var(--s-3) var(--s-4); }
  .partenaires__logos { gap: var(--s-5); }
  .partenaires__logo--pmu { height: 3rem; }
  .partenaires__logo--fdj { height: 1.75rem; }
  .confort { gap: var(--s-2) var(--s-3); }
  .confort li { gap: var(--s-2); }
}
@media (min-width: 768px) { .services__grille { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) {
  .services__grille { grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
  .service { padding: var(--s-4) var(--s-5); }
  .services__pied { flex-wrap: nowrap; align-items: center; gap: 0; }
  .partenaires { flex: 0 1 auto; }
  /* Le filet n'est plus le bord du bloc : une marge de chaque côté, et les
     conforts occupent le reste de la bande vers la gauche. */
  .services__filet {
    display: block;
    flex: none;
    align-self: stretch;
    width: 1px;
    margin-block: var(--s-2);
    margin-inline: var(--s-7);
    background: var(--ligne);
  }
  .confort {
    flex: 1 1 auto;
    grid-template-columns: max-content max-content;
    justify-content: space-between;
    gap: var(--s-2) var(--s-6);
    padding-top: 0;
    border-top: 0;
  }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .services__filet { margin-inline: var(--s-5); }
  .confort { column-gap: var(--s-5); }
}
@media (min-width: 1024px) and (max-width: 1099px) {
  .partenaires { flex-wrap: nowrap; gap: var(--s-3) var(--s-4); }
  .services__filet { margin-inline: var(--s-4); }
  .confort { column-gap: var(--s-4); }
}

/* ---------- Événements (fond encre) ---------- */
/* Une affiche par colonne ; liste sans aucune affiche = une carte texte par ligne */
.evenements__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.evenements__item { min-width: 0; }
@media (min-width: 640px) {
  .evenements__liste { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--s-5); align-items: start; }
  .evenements__liste.evenements__liste--texte { grid-template-columns: 1fr; } /* doit primer sur la règle des 1024 px */
}
@media (min-width: 1024px) {
  .evenements__liste { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
}

/* Affiche fournie par le bar : montrée en entier, jamais recadrée ; clic = plein écran */
.evenement--affiche { display: grid; gap: var(--s-3); }
.evenement__affiche {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  background: var(--bg-eleve);
  transition: border-color var(--d-micro);
}
.evenement__affiche:hover, .evenement__affiche:focus-visible { border-color: rgb(244 241 234 / 0.38); }
.evenement__affiche img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: var(--ratio-affiche, 1 / 1.414);
  object-fit: contain;
}
@media (prefers-reduced-motion: no-preference) {
  .evenement__affiche img { transition: transform 0.7s var(--ease-out); }
  .evenement__affiche:hover img, .evenement__affiche:focus-visible img { transform: scale(1.03); }
}
.evenement__bandeau {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  gap: var(--s-1);
  padding: clamp(2.5rem, 9vw, 3.5rem) var(--s-4) var(--s-4);
  background: linear-gradient(to top, rgb(5 8 20 / 0.94) 0%, rgb(5 8 20 / 0.84) 40%, rgb(5 8 20 / 0.5) 70%, rgb(5 8 20 / 0) 100%);
  pointer-events: none;
}
.evenement__quand {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--craie);
}
.evenement__heure { text-transform: none; letter-spacing: 0.04em; }
.evenement--affiche .evenement__titre { font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 1.15; color: var(--craie); text-wrap: balance; }
.evenement__loupe {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgb(5 8 20 / 0.7);
  color: var(--craie);
  opacity: 0;
  transition: opacity var(--d-micro);
}
.evenement__loupe svg { width: 1.15rem; height: 1.15rem; }
.evenement__affiche:hover .evenement__loupe, .evenement__affiche:focus-visible .evenement__loupe { opacity: 1; }
@media (hover: none) { .evenement__loupe { opacity: 0.9; } }
.evenement__lien { font-size: var(--fs-small); }

/* Sans affiche : carte texte, pastille de date à gauche */
.evenement--texte {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-5);
  padding: var(--s-5);
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  background: rgb(255 255 255 / 0.03);
  transition: border-color var(--d-micro), background-color var(--d-micro);
}
.evenement--texte:hover { border-color: rgb(244 241 234 / 0.32); background: rgb(255 255 255 / 0.05); }
.evenement__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: start;
  min-width: 4.75rem;
  padding: var(--s-3) var(--s-2);
  border-top: 3px solid var(--accent-fg);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--bg-eleve);
  text-align: center;
  line-height: 1;
}
.evenement__jour { font-family: var(--font-display); font-size: 2.5rem; letter-spacing: 0.02em; }
.evenement__mois { margin-top: var(--s-1); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.evenement__semaine { margin-top: var(--s-2); font-size: 0.75rem; color: var(--fg-2); text-transform: capitalize; }
.evenement__corps { display: grid; gap: var(--s-3); align-content: start; min-width: 0; }
.evenement__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); font-size: var(--fs-small); color: var(--fg-2); }
.evenement__cat {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--ligne);
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.evenement__titre { font-size: var(--fs-h3); }
.evenement__texte { color: var(--fg-2); max-width: 60ch; }
.evenement__corps .lien-fleche { justify-self: start; }
@media (min-width: 768px) { .evenement--texte { padding: var(--s-6); gap: var(--s-6); } }
/* Carte texte glissée entre des affiches : même format qu'une affiche, infos en bas comme le bandeau */
@media (min-width: 640px) {
  .evenements__liste:not(.evenements__liste--texte) .evenement--texte {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    aspect-ratio: var(--ratio-affiche, 1 / 1.414);
    gap: var(--s-4);
    padding: var(--s-4);
  }
  .evenements__liste:not(.evenements__liste--texte) .evenement__date { align-self: start; justify-self: start; }
  .evenements__liste:not(.evenements__liste--texte) .evenement__corps { align-content: end; }
  .evenements__liste:not(.evenements__liste--texte) .evenement--texte .evenement__titre { font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 1.15; text-wrap: balance; }
  .evenements__liste:not(.evenements__liste--texte) .evenement__texte {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
  }
}
/* État vide : une plaque courte, pas un écran. Le triskell tient la marge gauche dès 768 px ;
   ≥ 1024 px, l'en-tête de section et la plaque se partagent la largeur (voir plus bas). */
.evenements__vide {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  max-width: 34rem;
  margin-inline: auto;
  padding: var(--s-5) var(--s-5);
  border: 1px dashed rgb(244 241 234 / 0.28);
  border-radius: var(--radius);
  text-align: center;
}
.evenements__triskell { width: 3rem; height: 3rem; color: var(--craie); opacity: 0.55; }
.evenements__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3) var(--s-4); margin-top: var(--s-2); }
@media (min-width: 768px) {
  .evenements__vide { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-5); justify-items: start; text-align: left; align-items: center; }
  .evenements__triskell { grid-row: 1 / 4; }
  .evenements__actions { justify-content: flex-start; }
}
@media (min-width: 1024px) {
  .evenements .container:has(.evenements__liste[hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
  .evenements .container:has(.evenements__liste[hidden]) .section__tete { margin-bottom: 0; }
  .evenements .container:has(.evenements__liste[hidden]) .evenements__vide { max-width: none; margin-inline: 0; }
}
.evenements__vide h3 { font-size: var(--fs-h3); }
.evenements__vide p { color: var(--fg-2); }
/* :not(.btn) : sinon cette règle, plus spécifique que .btn, écrivait le bouton en craie sur craie. */
.evenements__vide a:not(.btn) { color: var(--fg); }

/* ---------- Galerie : bande horizontale à crans, épinglée en grand écran ----------
   Base (mobile, sans JavaScript, mouvement réduit) : la bande défile nativement (overflow +
   scroll-snap), au doigt, à la molette horizontale et aux deux boutons de l'en-tête ;
   animations.js n'ajoute qu'un léger glissement. La hauteur de travée est bornée (--travee-h)
   et la largeur suit le ratio de chaque photo (--ratio, posé en HTML).
   Vague 6 (Saad, 2026-09-10) : à partir de 1024 px et avec les animations, animations.js pose
   .galerie--pin : la section tient un écran et l'en-tête + les photos glissent à l'horizontale
   au rythme du défilement vertical, sur la seule distance qui dépasse (cinq photos, plus de
   travée d'attente : la distance est celle du bandeau, pas une valeur fixe). */
.galerie { --bord: max(var(--gutter), calc((100% - var(--container)) / 2)); position: relative; overflow: hidden; }
.galerie__tete { display: grid; gap: var(--s-4); align-items: end; }
.galerie__tete .section__tete { margin-bottom: 0; }
.galerie__nav { display: none; gap: var(--s-3); justify-self: end; }
.js .galerie__nav { display: flex; }
.galerie__btn {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none;
  border: 1px solid var(--ligne); border-radius: 50%; color: var(--fg); background: transparent; cursor: pointer;
  transition: background-color var(--d-micro), color var(--d-micro), border-color var(--d-micro), opacity var(--d-micro);
}
.galerie__btn svg { width: 1.25rem; height: 1.25rem; }
.galerie__btn:hover:not([disabled]) { background: var(--bordeaux); color: var(--craie); border-color: var(--bordeaux); }
.galerie__btn[disabled] { opacity: 0.35; cursor: default; }
.galerie__prec svg { transform: scaleX(-1); }
.galerie__piste {
  --travee-h: min(34vh, 16rem);
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0 var(--bord);
  display: flex;
  gap: var(--s-4);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--bord);
  scrollbar-width: none;
  counter-reset: travee;
}
.galerie__piste::-webkit-scrollbar { display: none; }
.travee { counter-increment: travee; flex: none; scroll-snap-align: start; width: min(calc(var(--travee-h) * var(--ratio, 1.3333)), calc(100vw - 2 * var(--gutter))); }
.travee__lien { display: block; border-radius: var(--radius); outline-offset: 4px; transition: transform 0.25s var(--ease-out); }
@media (hover: hover) { .travee__lien:hover { transform: translateY(-4px); } }
.travee__media { display: block; height: var(--travee-h); overflow: hidden; border-radius: var(--radius); background: var(--bg-eleve); }
.travee__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out); }
.travee__lien:hover img, .travee__lien:focus-visible img { transform: scale(1.04); }
.travee__legende { display: flex; align-items: baseline; gap: var(--s-3); margin-top: var(--s-3); font-size: var(--fs-small); color: var(--fg-2); }
.travee__num::before {
  content: counter(travee, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  color: var(--accent-fg);
}
/* Jauge : position de la bande, tenue par main.js (défilement natif, pas GSAP) */
.galerie__progres { margin-top: var(--s-5); height: 2px; background: var(--ligne); }
.galerie__progres span { display: block; width: 100%; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform 0.15s linear; }
@media (min-width: 768px) {
  .galerie__tete { grid-template-columns: minmax(0, 1fr) auto; }
  .galerie__piste { --travee-h: min(42vh, 26rem); gap: var(--s-5); }
}
/* Épinglage (classe posée par animations.js, grand écran et animations actives seulement) :
   la section devient un écran, l'en-tête se range à gauche des photos dans .galerie__defile
   qui glisse en x ; les boutons disparaissent (le défilement fait le travail) et la jauge se
   pose au bas de l'écran, alimentée par la progression du ScrollTrigger. */
@media (min-width: 1024px) {
  .galerie--pin { display: flex; align-items: center; height: 100vh; height: 100dvh; padding-block: var(--header-h) 0; }
  .galerie--pin .galerie__defile { display: flex; align-items: center; gap: clamp(3rem, 6vw, 6rem); width: max-content; padding-inline: var(--bord); will-change: transform; }
  .galerie--pin .galerie__tete { display: block; flex: none; width: min(26rem, 28vw); max-width: none; margin: 0; padding: 0; }
  .galerie--pin .galerie__nav { display: none; }
  .galerie--pin .galerie__piste { --travee-h: min(58vh, 38rem); flex: none; margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
  .galerie--pin .travee { width: calc(var(--travee-h) * var(--ratio, 1.3333)); }
  /* .galerie.galerie--pin : la règle générique des conteneurs de section (position relative) est plus spécifique qu'un simple .galerie--pin > */
  .galerie.galerie--pin > .container { position: absolute; z-index: 2; left: 0; right: 0; bottom: var(--s-6); }
  .galerie--pin .galerie__progres { margin: 0; }
}

/* ---------- Lightbox (dialog natif) ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--craie);
}
.lightbox::backdrop { background: rgb(5 8 20 / 0.92); }
.lightbox__inner { position: relative; display: grid; place-items: center; width: 100%; height: 100%; padding: clamp(3.5rem, 8vh, 5rem) clamp(1rem, 6vw, 5rem) clamp(5rem, 12vh, 6rem); }
.lightbox__figure { display: grid; gap: var(--s-3); justify-items: center; max-width: 100%; touch-action: pan-y; }
.lightbox__img {
  max-width: 100%;
  max-height: calc(100vh - 12rem);
  max-height: calc(100dvh - 12rem);
  width: auto;
  height: auto;
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.5);
  opacity: 0;
  transition: opacity 0.35s var(--ease-out);
}
.lightbox__img.est-chargee { opacity: 1; }
.lightbox__legende { font-size: var(--fs-small); color: var(--fg-2); text-align: center; }
.lightbox__compteur {
  position: absolute;
  top: var(--s-5);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  color: var(--fg-2);
}
.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgb(244 241 234 / 0.3);
  border-radius: 50%;
  background: rgb(var(--ombre-rgb) / 0.7);
  color: var(--craie);
  cursor: pointer;
  transition: background-color var(--d-micro), border-color var(--d-micro);
}
.lightbox__btn:hover { background: var(--accent); border-color: var(--accent); }
.lightbox__btn svg { width: 1.25rem; height: 1.25rem; }
.lightbox__prec { left: calc(50% - 3.5rem); bottom: var(--s-5); }
.lightbox__prec svg { transform: scaleX(-1); }
.lightbox__suiv { left: calc(50% + 0.5rem); bottom: var(--s-5); }
.lightbox__fermer { top: var(--s-4); right: var(--s-4); }
@media (min-width: 768px) {
  .lightbox__prec { left: clamp(0.75rem, 2vw, 2rem); top: 50%; bottom: auto; transform: translateY(-50%); }
  .lightbox__suiv { left: auto; right: clamp(0.75rem, 2vw, 2rem); top: 50%; bottom: auto; transform: translateY(-50%); }
}
.lightbox-ouverte, .lightbox-ouverte body { overflow: hidden; }
.lightbox-ouverte .header, .lightbox-ouverte .curseur { visibility: hidden; }

/* ---------- Boutons sur fonds clairs ---------- */
.theme-clair .btn--contour { --btn-fg: var(--fg); --btn-bord: rgb(var(--ombre-rgb) / 0.35); }
.theme-clair .btn--contour:hover { --btn-bg: var(--nuit); --btn-fg: var(--craie); --btn-bord: var(--nuit); }
.btn--encre { --btn-bg: var(--nuit); --btn-bord: var(--nuit); --btn-fg: var(--craie); }
.btn--encre:hover { --btn-bg: var(--nuit-2); --btn-bord: var(--nuit-2); }

/* ---------- Étoiles (avis) : rangée vide + rangée pleine rognée à la note ---------- */
.etoiles { position: relative; display: inline-block; width: max-content; justify-self: start; line-height: 0; color: var(--accent-fg); }
.etoiles svg { width: 1.25rem; height: 1.25rem; flex: none; }
.etoiles__vides, .etoiles__pleines { display: flex; gap: 0.15rem; }
.etoiles__vides svg { opacity: 0.22; }
.etoiles__pleines { position: absolute; inset: 0 auto 0 0; overflow: hidden; }

/* ---------- Avis ---------- */
.avis__grille { display: grid; gap: var(--s-6); align-items: start; }
.avis__colonne { display: grid; gap: var(--s-5); justify-items: start; }
.avis__note { display: grid; gap: var(--s-2); justify-items: start; }
.avis__chiffre { font-family: var(--font-display); font-size: clamp(3.5rem, 8vw, 5.5rem); line-height: 1; letter-spacing: 0.01em; }
.avis__sur { font-size: 0.4em; color: var(--fg-2); margin-left: 0.15em; font-family: var(--font-text); font-weight: 500; }
.avis__note .etoiles svg { width: 1.6rem; height: 1.6rem; }
.avis__nombre { color: var(--fg-2); font-size: var(--fs-small); }
.avis__vide { display: grid; gap: var(--s-2); max-width: 30rem; padding: var(--s-4) var(--s-5) var(--s-4) var(--s-5); border-left: 3px solid var(--accent-fg); background: var(--bg-eleve); border-radius: 0 var(--radius) var(--radius) 0; }
.avis__vide-icone { width: 2.25rem; height: 2.25rem; color: var(--accent-fg); }
.avis__vide h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.avis__vide p { color: var(--fg-2); }
.avis__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); }
.carrousel { display: grid; gap: var(--s-4); min-width: 0; }
.carrousel__piste {
  list-style: none; margin: 0; padding: 0;
  position: relative; display: flex; gap: var(--s-5);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.carrousel__piste::-webkit-scrollbar { display: none; }
.carrousel__item { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.avis-carte {
  position: relative; display: grid; gap: var(--s-4); height: 100%;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--bg-eleve); border: 1px solid var(--ligne); border-radius: var(--radius);
}
.avis-carte__guillemet { position: absolute; top: var(--s-4); right: var(--s-5); width: 3rem; height: 3rem; color: var(--accent-fg); opacity: 0.18; }
.avis-carte__texte { margin: 0; font-size: clamp(1.125rem, 1.6vw, 1.375rem); font-weight: 500; line-height: 1.45; max-width: 36rem; }
.avis-carte__texte p::before { content: "« "; }
.avis-carte__texte p::after { content: " »"; }
.avis-carte__pied { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); font-size: var(--fs-small); color: var(--fg-2); }
.avis-carte__auteur { font-weight: 600; color: var(--fg); }
.avis-carte__pied time::before, .avis-carte__source::before { content: "·"; margin-right: var(--s-3); }
.carrousel__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.carrousel__btn {
  display: inline-grid; place-items: center; width: 3rem; height: 3rem; flex: none;
  border: 1px solid rgb(var(--ombre-rgb) / 0.3); border-radius: 50%; color: var(--fg);
  transition: background-color var(--d-micro), color var(--d-micro), border-color var(--d-micro);
}
.carrousel__btn svg { width: 1.25rem; height: 1.25rem; }
.carrousel__btn:hover { background: var(--nuit); color: var(--craie); border-color: var(--nuit); }
.carrousel__prec svg { transform: scaleX(-1); }
.carrousel__points { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-2); }
/* La pastille visible reste à 0,6 rem : c'est la zone cliquable autour qui passe à 44 px. */
.carrousel__point { display: block; width: 2.75rem; height: 2.75rem; position: relative; }
.carrousel__point::before { content: ""; position: absolute; inset: 50% auto auto 50%; width: 0.6rem; height: 0.6rem; border-radius: 50%; transform: translate(-50%, -50%); background: rgb(var(--ombre-rgb) / 0.25); transition: transform var(--d-micro), background-color var(--d-micro); }
.carrousel__point[aria-current="true"]::before { background: var(--accent); transform: translate(-50%, -50%) scale(1.35); }
@media (min-width: 1024px) {
  .avis__grille { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: clamp(3rem, 6vw, 6rem); }
  .avis__colonne { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
  /* Sans avis publié : le bloc « Vos premiers avis » et le bouton se partagent la largeur */
  .avis__grille:has(.carrousel[hidden]) { grid-template-columns: minmax(0, 1fr); }
  /* Tant qu'aucun avis n'est publié, l'en-tête de section et la plaque « Vos premiers avis »
     se partagent la largeur : la section fait la hauteur d'un paragraphe, pas d'un écran. */
  .avis .container:has(.carrousel[hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
  .avis .container:has(.carrousel[hidden]) .section__tete { margin-bottom: 0; }
  .avis__grille:has(.carrousel[hidden]) .avis__colonne { position: static; gap: var(--s-4); justify-items: stretch; }
  .avis__grille:has(.carrousel[hidden]) .avis__vide { max-width: none; }
  .avis__grille:has(.carrousel[hidden]) .avis__vide p { max-width: 58ch; }
}

/* ---------- Horaires & contact ---------- */
.contact__grille { display: grid; gap: var(--s-5); }
.horaires { display: grid; gap: var(--s-4); align-content: start; }
.horaires__etat {
  display: inline-flex; align-items: center; gap: var(--s-2); justify-self: start;
  padding: 0.45rem 0.9rem 0.45rem 0.7rem; border-radius: var(--radius-pill);
  background: var(--nuit-3); color: var(--blanc); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.04em;
}
.horaires__etat::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--fg-2); }
/* Même règle que .hero__pastille (états et couleurs du point définis avec elle, section Hero). */
.horaires__table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.horaires__table th, .horaires__table td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--ligne); text-align: left; vertical-align: baseline; }
.horaires__table th { font-weight: 600; }
.horaires__table td { text-align: right; color: var(--fg-2); font-weight: 500; }
.horaires__table tr.est-aujourdhui { background: rgb(var(--accent-rgb) / 0.07); box-shadow: inset 3px 0 0 var(--accent-fg); }
.horaires__table tr.est-aujourdhui th, .horaires__table tr.est-aujourdhui td { color: var(--fg); }
.horaires__auj { display: inline-block; margin-left: var(--s-2); padding: 0.1rem 0.5rem; border-radius: var(--radius-pill); background: var(--accent); color: var(--blanc); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle; }
.horaires__special { display: block; font-size: var(--fs-small); color: var(--accent-fg); }
/* Nuance permanente d'un horaire, ex. « (selon l'affluence) » le vendredi : plus petite que
   l'heure, jamais coupée en deux — elle passe entière à la ligne quand la place manque. */
.horaires__mention { font-size: var(--fs-small); font-weight: 400; font-variant-numeric: normal; white-space: nowrap; opacity: 0.8; }
.horaires__note { font-size: var(--fs-small); color: var(--fg-2); max-width: 36ch; }
.coordonnees { display: grid; gap: var(--s-5); align-content: start; }
.coordonnees__bloc { display: flex; gap: var(--s-3); align-items: flex-start; margin: 0; font-style: normal; line-height: 1.45; }
.coordonnees__bloc p { margin: 0; }
.coordonnees__icone { width: 1.5rem; height: 1.5rem; flex: none; color: var(--accent-fg); margin-top: 0.1em; }
/* flex-start et non center : le numéro doit rester aligné sur l'icône téléphone, qui a
   son propre margin-top. Les pixels gagnés sont pris sous le texte, où il n'y a rien. */
.coordonnees__tel { display: flex; align-items: flex-start; min-height: 2.75rem; font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1; letter-spacing: 0.02em; text-decoration: none; color: var(--fg); }
.coordonnees__tel:hover { color: var(--accent-fg); }
.coordonnees__bloc a:not(.coordonnees__tel) { color: var(--fg); }
/* Vague 7 (Saad) : boutons et icônes réseaux dans la même rangée, centrés sur la même ligne ;
   la rangée passe sur deux lignes quand la colonne est trop étroite (ou si WhatsApp s'active). */
.coordonnees__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }

/* Boutons réseaux, ronds, en couleurs du thème de la section qui les accueille */
.reseaux { display: flex; flex-wrap: wrap; gap: var(--s-3); list-style: none; margin: 0; padding: 0; }
.footer__col .reseaux { margin-bottom: var(--s-4); }
.reseau {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--ligne);
  border-radius: 50%;
  color: var(--fg);
  text-decoration: none;
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out),
              border-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.reseau:hover, .reseau:focus-visible { background: var(--fg); color: var(--bg); border-color: var(--fg); transform: translateY(-2px); }
.reseau__icone { width: 1.3125rem; height: 1.3125rem; }
/* Page pas encore ouverte : l'icône reste visible, mais c'est un <span>, pas un lien vide.
   Elle n'est donc ni cliquable, ni focusable, ni annoncée comme un lien. */
span.reseau { opacity: 0.55; cursor: default; }
span.reseau:hover { background: none; color: var(--fg); border-color: var(--ligne); transform: none; }
/* Réseaux du hero (Saad, 2026-09-13 : « les ajouter subtilement au hero ») : au trait, dans le
   craie voilé de « Descendre », sans cercle ; le cercle vient au survol. Bureau seulement : sous
   900 px la colonne est centrée, sans place libre à côté des boutons (à 768 × 600 l'indicateur
   les touche déjà), et le hero des petits téléphones dépasse déjà l'écran ; Contact et pied de
   page les portent. La liste ne s'affiche que si un <li> est visible, donc jamais un filet seul.
   Ces règles suivent .reseaux : à spécificité égale, le display: flex de la liste l'emporterait. */
.hero__reseaux { display: none; gap: 0.25rem; }
@media (min-width: 900px) {
  .hero__reseaux:has(> li:not([hidden])) {
    display: flex;
    /* Cercles de 2,75 rem sur la ligne de l'indicateur (2 rem) : ils débordent sans la décaler */
    margin-block: -0.375rem;
    padding-inline-end: var(--s-4);
    border-inline-end: 1px solid rgb(244 241 234 / 0.25);
  }
}
.hero__reseaux .reseau { border-color: transparent; color: rgb(244 241 234 / 0.75); }
.hero__reseaux .reseau:hover, .hero__reseaux .reseau:focus-visible { background: none; color: var(--craie); border-color: rgb(244 241 234 / 0.5); }
.carte { --carte-fond: var(--bg-eleve); --carte-eau: #cfd9ee; --carte-eau-2: #8fa3cf; --carte-rue: rgb(var(--ombre-rgb) / 0.16); --carte-rue-2: rgb(var(--ombre-rgb) / 0.09); --carte-bati: rgb(var(--ombre-rgb) / 0.06); --carte-texte: #5a5450; display: grid; gap: var(--s-3); align-content: start; }
.carte__vignette { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--ligne); text-align: left; }
.carte__dessin { display: block; width: 100%; height: 100%; transition: transform 0.6s var(--ease-out); }
.carte__vignette:hover .carte__dessin, .carte__vignette:focus-visible .carte__dessin { transform: scale(1.04); }
.carte__cta {
  position: absolute; left: 50%; bottom: var(--s-4); transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: var(--s-2); white-space: nowrap;
  padding: 0.7rem 1.25rem; border-radius: var(--radius-pill);
  background: var(--nuit-3); color: var(--craie); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.03em;
  box-shadow: 0 10px 30px rgb(var(--ombre-rgb) / 0.25); transition: background-color var(--d-micro);
}
.carte__cta svg { width: 1.1em; height: 1.1em; }
.carte__vignette:hover .carte__cta { background: var(--accent); }
.carte__cadre { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--ligne); background: var(--bg-eleve); }
.carte__cadre iframe { position: relative; z-index: 1; display: block; width: 100%; height: 100%; border: 0; }
/* Visible seulement si l'iframe ne se charge pas (bloqueur, bac à sable) : elle recouvre ce message */
.carte__repli { position: absolute; inset: 0; z-index: 0; display: grid; align-content: center; gap: var(--s-2); padding: var(--s-5); margin: 0; text-align: center; font-size: var(--fs-small); color: var(--fg-2); }
.carte__repli a { color: var(--fg); }
/* Le repli vit sous l'iframe (z-index 0) : son lien restait focalisable au clavier alors
   qu'il était entièrement recouvert (WCAG 2.4.11, focus non obscurci). Dès qu'une iframe
   existe, on le sort de l'ordre de tabulation ; s'il n'y en a pas, il reste atteignable. */
.carte__cadre:has(iframe) .carte__repli { visibility: hidden; }
.carte__note { font-size: var(--fs-small); color: var(--fg-2); }
.carte__note a { color: var(--fg); }
/* Mobile (Saad, vague 7) : adresse, numéro géant et boutons avant le tableau des horaires,
   pour trouver le téléphone sans défiler ; la carte reste en bas. */
@media (max-width: 767px) {
  .coordonnees { order: -1; }
}
@media (min-width: 768px) {
  .contact__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carte { grid-column: 1 / -1; }
  .carte__vignette, .carte__cadre { aspect-ratio: 21 / 9; }
}
@media (min-width: 1024px) {
  .contact__grille { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 4vw, 4rem); }
  .carte { grid-column: auto; }
  /* La carte prend la hauteur de la colonne des horaires au lieu d'un ratio fixe (vague 7) :
     la vignette occupe ce qui reste au-dessus de la note, le dessin (en « slice ») couvre. */
  .carte { grid-template-rows: minmax(0, 1fr) auto; }
  .carte__vignette, .carte__cadre { aspect-ratio: auto; min-height: 14rem; }
  .carte__dessin { position: absolute; inset: 0; height: 100%; }
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgb(255 255 255 / 0.6); }
  70% { box-shadow: 0 0 0 8px rgb(255 255 255 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(255 255 255 / 0); }
}
@keyframes tourne { to { transform: rotate(360deg); } }

/* ==========================================================================
   Sections : en-tête commune, liens
   ========================================================================== */
.section__tete { max-width: 52rem; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.section__tete .eyebrow { margin-bottom: var(--s-4); }
/* Filet bordeaux sous chaque titre de section : plein d'emblée, il se trace de gauche à droite
   quand la pile d'animation est là (variable --trait glissée de 0 à 1 par animations.js au fil
   du défilement, dans les deux sens). */
.section__tete h2::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 3px;
  margin-top: var(--s-3);
  background: var(--accent);
  transform-origin: left center;
  /* Positionné pour passer au-dessus des descentes de lettres (la cédille de « Ça se passe »)
     dans tous les modes, transform ou pas. */
  position: relative;
}
.anim .section__tete h2::after { transform: scaleX(var(--trait, 0)); }
.section__tete .lead { margin-top: var(--s-5); color: var(--fg-2); }
.section .container { position: relative; z-index: 2; }

/* flex-end plutôt que du padding-bottom : la hauteur passe à 44 px, mais le trait rouge
   reste collé sous le texte au lieu de flotter 8 px plus bas. */
.lien-fleche {
  display: inline-flex;
  align-items: flex-end;
  min-height: 2.75rem;
  gap: var(--s-2);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--accent-fg);
  padding-bottom: 2px;
  transition: gap var(--d-micro), color var(--d-micro);
}
.lien-fleche svg { width: 1.1em; height: 1.1em; }
.lien-fleche:hover { gap: var(--s-3); }

/* ==========================================================================
   Le bar
   ========================================================================== */
/* Trois travées empilées, image puis texte, faisaient la longueur de la section. La première
   passe en pleine largeur et déborde jusqu'au bord de l'écran, les deux autres se rangent côte
   à côte : les photos triplent de surface pendant que la section raccourcit. */
/* Trois travées, un seul motif à toutes les largeurs : le texte se pose dans le bas de sa photo.
   La travée fait la hauteur de son image, et la section perd les mille pixels qu'empilaient
   photo puis texte puis photo. En portrait sur téléphone (4/5), la moitié haute de la photo
   reste libre de texte ; en carré dès 1024 px, les trois se rangent sur une ligne. Si un texte
   dépasse malgré tout, la grille l'emporte : la rangée grandit et l'image couvre. */
/* Vague 2 (Saad, 2026-09-09) : la photo n'est plus le fond du texte. Chaque bloc est une
   carte : photo nette en 4/3 en haut, surtitre + titre + une phrase sur fond uni dessous.
   Sous 768 px les trois cartes défilent au doigt sur une seule rangée (scroll-snap, la
   suivante dépasse du bord pour inviter à glisser) : la rubrique perd deux écrans. */
.bar__blocs { display: grid; gap: var(--s-4); }
.bloc {
  display: flex;
  flex-direction: column;
  background: var(--bg-eleve);
  border: 1px solid var(--ligne);
  /* Angle vif plutôt qu'arrondi : c'est le trait des panneaux de la façade. */
  border-radius: 0;
}
.bloc__texte { padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.bloc__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--anthracite);
}
.bloc__media picture, .bloc__media img { width: 100%; height: 100%; }
.bloc__media img { object-fit: cover; will-change: transform; }
/* Filet craie d'un pixel entre la photo et le texte : la photo ne coule pas dans la carte */
.bloc__media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--ligne); pointer-events: none; }
.bloc__texte .eyebrow { margin-bottom: var(--s-2); }
.bloc__texte h3 { max-width: 18ch; }
.bloc__texte p:not(.eyebrow) { margin-top: var(--s-3); color: var(--fg-2); max-width: 46ch; }

@media (max-width: 767px) {
  .bar__blocs {
    display: flex;
    gap: var(--s-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .bar__blocs::-webkit-scrollbar { display: none; }
  .bloc { flex: 0 0 min(78vw, 19rem); scroll-snap-align: start; }
}
@media (min-width: 768px) {
  .bar__blocs { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
  /* La carte d'ouverture prend les deux colonnes, en paysage. */
  .bloc--large { grid-column: 1 / -1; }
  .bloc--large .bloc__media { aspect-ratio: 21 / 9; }
}
@media (min-width: 1024px) {
  .bar__blocs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bloc--large { grid-column: auto; }
  .bloc--large .bloc__media { aspect-ratio: 4 / 3; }
}

.compteurs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--ligne);
}
/* Autant d'air sous les légendes qu'au-dessus des chiffres : la bande est centrée entre son
   filet haut et celui de la mention, comme le bloc « Fierté bretonne » (Saad, vague 2). Anton
   déborde de sa boîte de ligne (line-height 0.9) : le haut reçoit un peu plus. Le sélecteur est
   doublé exprès : le reset ul[role="list"] { padding: 0 } l'emporterait sur .compteurs seul. */
.bar .compteurs, ul.compteurs {
  padding-top: clamp(2.5rem, 4.2vw, 3.75rem);
  /* La mention qui suit apporte déjà sa marge haute (≈ 40 px) : le bas reste court. */
  padding-bottom: clamp(1rem, 1.5vw, 1.25rem);
}
/* Chiffre et légende centrés dans leur colonne. Alignés à gauche, cinq colonnes de 237 px
   portant des textes de 130 à 190 px laissaient un bord droit en dents de scie sous une rangée
   de très gros chiffres : la ligne de compteurs se lisait comme un tableau mal calé. */
.compteurs__item { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); text-align: center; }
.compteurs__valeur {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  line-height: 0.9;
  letter-spacing: 0.01em;
}
.compteurs__suffixe { font-size: 0.4em; margin-left: 0.15em; color: var(--fg-2); }
.compteurs__label { font-weight: 500; color: var(--fg-2); max-width: 18ch; }
@media (min-width: 768px) { .compteurs { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .compteurs { grid-template-columns: repeat(5, 1fr); } .compteurs__label { font-size: var(--fs-small); } }
/* Le bar en craie (refonte palette du 2026-09-10) : titres et gras en anthracite, le noir du
   logo ; œils-de-perdrix et chiffres des compteurs en bordeaux. Le rythme vertical est celui du
   jeton commun, resserré en 2026-09 ; la section enchaîne cinq blocs, ses marges internes sont
   donc plus courtes que le pas. */
.bar { overflow: hidden; }
.bar__fierte, .bar .compteurs, .bar__mention { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.bar .eyebrow { color: var(--accent-fg); }
.bar .bloc__texte h3 { color: var(--anthracite); }
.bar .compteurs__valeur { color: var(--bordeaux); }
.bar .lien-fleche { border-color: var(--accent-fg); }
.bar .lead em, .bar .bloc__texte em { font-style: normal; font-weight: 600; color: var(--anthracite); }
/* « Fierté bretonne » : le Gwenn ha Du en objet, unique endroit du site où il apparaît.
   Ramené à ses proportions (3/2) et posé à côté du texte, il redevient identifiable, et plus
   aucun mot ne chevauche une bande. Le filet gris et l'angle vif sont ceux des photos : le
   drapeau est la quatrième image de la section, pas un ornement de fond.

   Le bloc reprend mot pour mot la grammaire des deux articles au-dessus -- oeil-de-perdrix,
   puis h3 en display capitales, puis paragraphe -- au lieu de la phrase en bas-de-casse qui
   n'appartenait à aucune échelle du site. Deux colonnes, comme un .bloc : l'image, le texte. */
.bar__fierte {
  display: grid;
  gap: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--ligne);
}
.drapeau {
  position: relative;
  aspect-ratio: 3 / 2;
  /* Sur téléphone le drapeau passe au-dessus du texte, dans le flux : à pleine largeur il
     coûtait 250 px de hauteur à la section et redevenait une bande. Borné, il reste un objet
     posé en haut du bloc, comme un fanion au mur. */
  max-width: 12rem;
  /* Le drapeau ne porte aucun texte : il peut donc être contrasté pour de bon, là où le fond
     étalé devait rester à 5 % pour ne pas gêner la lecture. */
  opacity: 0.92;
}
.drapeau svg { display: block; width: 100%; height: 100%; }
.drapeau__hermines { color: var(--anthracite); }
.drapeau::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgb(var(--ombre-rgb) / 0.18);
}
.bar__fierte-texte h3 { color: var(--anthracite); max-width: 16ch; }
.bar__fierte-texte .eyebrow { margin-bottom: var(--s-3); }
.bar__fierte-texte h3 + p { margin-top: var(--s-4); }
.bar__fierte-texte p:not(.eyebrow) { color: var(--fg-2); max-width: 46ch; }
.bar__fierte-texte em { font-style: normal; font-weight: 600; color: var(--anthracite); }
@media (min-width: 768px) {
  /* Deux colonnes réglées : le drapeau, puis le texte. En colonne, c'est la grille qui borne
     le drapeau : la limite mobile n'a plus lieu d'être. */
  .bar__fierte { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
  .drapeau { max-width: none; }
}
@media (min-width: 1024px) {
  /* Une ligne, trois temps : le fanion (8 rem), le titre, le paragraphe. Le bloc fait la
     hauteur d'un paragraphe au lieu d'un drapeau de 15 rem. La colonne fait la mesure, pas
     le compte de caractères. */
  .bar__fierte { grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); align-items: center; }
  .bar__fierte-texte { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); column-gap: var(--s-6); align-items: center; }
  .bar__fierte-texte .eyebrow { grid-column: 1 / -1; }
  .bar__fierte-texte h3 + p { margin-top: 0; }
  .bar__fierte-texte h3, .bar__fierte-texte p:not(.eyebrow) { max-width: none; }
}

/* ==========================================================================
   RC Vannes & jour de match (« stade »)
   ========================================================================== */
/* Le bas de la rubrique (rituels + « Et aussi ») est resserré à la demande de Saad (vague 3) :
   marges internes plus courtes et retombée de section aux trois quarts du pas commun. */
.stade { padding-top: 0; padding-bottom: calc(var(--section-y) * 0.75); overflow: hidden; }
.stade .container { padding-top: var(--section-y); }

/* Lignes de terrain : filets craie discrets, comme les 22 m */
.stade__lignes {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, var(--ligne), var(--ligne)) 22% 0 / 1px 100% no-repeat,
    linear-gradient(to right, var(--ligne), var(--ligne)) 50% 0 / 1px 100% no-repeat,
    linear-gradient(to right, var(--ligne), var(--ligne)) 78% 0 / 1px 100% no-repeat;
  opacity: 0.6;
}

/* Filigranes du logo officiel du RC Vannes, jamais recoloré */
.stade__filigranes { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* Assez présents pour habiller le fond, assez discrets pour ne pas passer devant la liste
   « Et ensuite » : le filigrane haut est repoussé hors cadre à droite et fortement atténué. */
.stade__filigranes img { position: absolute; height: auto; opacity: 0.075; }
.stade__filigranes img:first-child { width: clamp(17rem, 34vw, 32rem); top: 4%; right: -12%; transform: rotate(-8deg); }
.stade__filigranes img:last-child { width: clamp(11rem, 23vw, 21rem); bottom: 2%; left: -7%; transform: rotate(7deg); opacity: 0.055; }
.stade .marquee { position: relative; z-index: 2; }

/* Marquee craie et marine */
.marquee {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: var(--craie);
  color: var(--marine);
  border-block: 1px solid rgb(var(--ombre-rgb) / 0.15);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
  padding-block: 0.85rem;
  white-space: nowrap;
}
.marquee__piste { display: flex; align-items: center; width: max-content; will-change: transform; }
.marquee__piste:not(:empty) { animation: defile 70s linear infinite; }
.marquee:hover .marquee__piste { animation-play-state: paused; }
.marquee__item { padding-inline: var(--s-5); }
.marquee__sep { width: 1.1em; height: 1.1em; color: var(--accent-fg); flex: none; }
@keyframes defile { to { transform: translateX(-50%); } }

/* Ballon « RC VANNES » (repli SVG puis canvas Three.js). Sous 1024 px il tient dans le flux,
   centré entre le titre et la grille ; à partir de 1024 px il se pose en haut à droite du
   conteneur, sur la ligne du titre (le chapeau, limité à 52 rem, lui laisse la place), sans
   ajouter un pixel à la hauteur de la section. Le canvas ne prend la place du SVG qu'après
   un premier rendu réussi (ballon--3d) : jamais de trou à l'écran. */
/* GSAP déplace la boîte au défilement (js/ballon.js) : sous 1024 px elle passe au-dessus de ce
   qui suit dans le flux ; dès 1024 px elle reste collée à mi-écran pendant tout le défilement
   de la section, en zigzag entre la carte du match et le bord droit (10 septembre 2026), et
   passe derrière le titre, le chapeau, la grille des matchs, les rituels et la ligne « Et aussi »,
   qui remontent d'un cran (z-index 2) : le ballon reste visible sans jamais masquer une date.
   Le navigateur est prévenu que sa transformation va changer. */
.ballon { position: relative; z-index: 1; width: min(46vw, 12rem); aspect-ratio: 1; margin: calc(-1 * var(--s-4)) auto var(--s-5); will-change: transform; }
.ballon__repli, .ballon canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ballon canvas { display: none; }
.ballon--3d canvas { display: block; }
.ballon--3d .ballon__repli { display: none; }
@media (min-width: 1024px) {
  .ballon { position: absolute; top: calc(var(--section-y) - var(--s-4)); right: 0; width: clamp(15rem, 21vw, 20rem); margin: 0; }
  .stade .section__tete { position: relative; z-index: 2; max-width: min(52rem, calc(100% - clamp(15rem, 21vw, 20rem) - var(--s-6))); }
  .stade__grille, .rituels, .stade__aussi { position: relative; z-index: 2; }
  /* Le ballon est clair : une ombre marine très serrée, invisible sur le fond marine, détache
     le texte craie quand le ballon passe derrière lui (chapeau, liste « Et ensuite », rituels, « Et aussi »). */
  .stade .section__tete, .stade__grille, .rituels, .stade__aussi { text-shadow: 0 0 2px var(--marine), 0 1px 4px rgb(0 20 56 / 0.9); }
}

.stade__grille { display: grid; gap: var(--s-6); align-items: start; }
/* min-width: 0 : sans lui la bande des matchs (overflow-x) élargirait la colonne au lieu de défiler */
.stade__grille > * { min-width: 0; }
/* Deux colonnes dès 1024 px : la liste « Et ensuite » y a 40 % de la largeur, ses affiches
   passent à la ligne sous 1200 px (voir .match-liste__item sous 480 px, même repli). */
@media (min-width: 1024px) {
  .stade__grille { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 4rem); }
}

/* Carte du prochain match. Fond plus sombre que la section, pas plus clair : sur le marine
   du stade c'est le creux qui détache la carte, pas l'élévation. Le filet rouge en tête lui
   donne son statut d'affiche. */
.match-carte {
  position: relative;
  padding: clamp(1.75rem, 3.4vw, 2.75rem);
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  background: linear-gradient(to bottom, rgb(var(--voile-rgb) / 0.55), var(--encre) 62%);
  box-shadow: 6px 6px 0 rgb(var(--ombre-rgb) / 0.55);
  overflow: hidden;
}
.match-carte::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(to right, var(--accent), var(--bordeaux) 70%, transparent);
}
.match-carte__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.point-live {
  width: 0.6rem; height: 0.6rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / 0.6);
  animation: pulse-rouge 2.4s infinite;
}
.match-carte__attente { margin-top: var(--s-4); color: var(--fg-2); }
.match-carte__affiche {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: var(--s-3);
  margin-top: var(--s-6);
}
.equipe { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); text-align: center; }
/* Aucun cadre autour du logo : ni fond plein, ni bordure, ni arrondi. Une lueur ronde et
   diffuse, sans bord net, rend le contraste que les blasons sombres (Ospreys, Black Lion) et
   les signatures noires (Harlequins, Edinburgh, Racing 92) perdraient sur le marine. */
.equipe__logo {
  display: grid;
  place-items: center;
  width: clamp(4.75rem, 10.5vw, 6.75rem);
  height: clamp(4.75rem, 10.5vw, 6.75rem);
  color: var(--marine);
  background: radial-gradient(closest-side,
    rgb(244 241 234 / 0.95),
    rgb(244 241 234 / 0.9) 52%,
    rgb(244 241 234 / 0.42) 72%,
    rgb(244 241 234 / 0) 88%);
}
.equipe__logo img { width: 72%; height: 72%; object-fit: contain; }
.equipe__logo--sigle {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 3.2vw, 2rem);
  letter-spacing: 0.02em;
  color: var(--marine);
}
.equipe__nom {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3.2vw, 2rem);
  text-transform: uppercase;
  line-height: 1;
}
/* Le tiret de l'affiche se cale à mi-hauteur des blasons, pas au milieu du bloc entier.
   Tracé en CSS plutôt qu'avec le glyphe d'Anton, trop maigre pour tenir entre deux blasons. */
.match-carte__sep {
  align-self: start;
  margin-top: calc(clamp(4.75rem, 10.5vw, 6.75rem) / 2 - 2px);
  width: clamp(1.5rem, 2.8vw, 2.5rem);
  height: 4px;
  font-size: 0;
  background: var(--accent);
}
.match-carte__infos {
  display: grid;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--ligne);
}
.match-carte__infos div { display: flex; flex-direction: column; gap: 0.15rem; }
.match-carte__infos dt { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); }
.match-carte__infos dd { font-weight: 600; }
.match-carte__infos dd::first-letter { text-transform: uppercase; }
@media (min-width: 480px) { .match-carte__infos { grid-template-columns: repeat(3, auto); justify-content: start; } }
.compte {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-6);
}
.compte__valeur {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 7vw, 4.5rem);
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--craie);
}
.compte[data-etat="direct"] .compte__valeur { color: var(--accent-fg); }
.compte__label { font-weight: 500; color: var(--fg-2); }
.match-carte__note { margin-top: var(--s-4); font-size: var(--fs-small); color: var(--fg-2); }
.match-carte__diffusion { margin-top: var(--s-4); font-weight: 500; }

/* Liste des matchs suivants */
.match-suite__titre { margin-bottom: var(--s-4); }
.match-liste { display: grid; }
.match-liste__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 var(--s-4);
  padding-block: var(--s-4);
  border-top: 1px solid var(--ligne);
}
.match-liste__item:last-child { border-bottom: 1px solid var(--ligne); }
.match-liste__date { grid-row: 1 / 3; align-self: start; min-width: 7ch; font-weight: 600; color: var(--craie); }
.match-liste__date::first-letter { text-transform: uppercase; }

/* Même principe que sur la carte : une lueur ronde, jamais un cadre. */
.match-liste__logo {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  object-fit: contain;
  background: radial-gradient(closest-side,
    rgb(244 241 234 / 0.92),
    rgb(244 241 234 / 0.82) 55%,
    rgb(244 241 234 / 0) 86%);
}
.match-liste__logo--sigle {
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--marine);
}
/* Sous 768 px la liste « Et ensuite » devient une bande horizontale à crans, une carte par
   match (elle empilait 1 000 px de page en 390 px). Défilement natif au doigt, Lenis la laisse
   passer (data-lenis-prevent-horizontal) ; le lien « Calendrier complet » suit. */
@media (max-width: 767px) {
  .match-liste {
    display: flex;
    gap: var(--s-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .match-liste::-webkit-scrollbar { display: none; }
  .match-liste:empty { display: none; }
  .match-liste__item {
    flex: 0 0 min(76vw, 17rem);
    grid-template-columns: 1fr;
    scroll-snap-align: start;
    padding: var(--s-4);
    border: 1px solid var(--ligne);
    border-top-color: var(--accent);
    border-top-width: 2px;
    background: rgb(0 0 0 / 0.18);
  }
  .match-liste__item:last-child { border-bottom: 1px solid var(--ligne); }
  .match-liste__date { grid-row: auto; margin-bottom: var(--s-3); }
  .match-liste__affiche { font-size: 1.125rem; }
}
/* L'affiche reprend l'ordre du match : chaque blason reste collé à son club, le RC Vannes
   à gauche quand il reçoit, à droite quand il se déplace. */
.match-liste__affiche {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  text-transform: uppercase;
  line-height: 1;
}
.match-liste__equipe { display: inline-flex; align-items: center; gap: var(--s-2); }
/* Même tiret tracé que sur la carte : le glyphe d'Anton est trop maigre entre deux blasons. */
.match-liste__tiret {
  flex: none;
  width: 1.5rem;
  height: 3px;
  font-size: 0;
  background: var(--accent);
}
.match-liste__item--domicile .match-liste__affiche::after {
  content: "Rabine";
  font-family: var(--font-text);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  vertical-align: middle;
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-pill);
  background: var(--craie);
  color: var(--marine);
}
.match-liste__meta { margin-top: var(--s-1); font-size: var(--fs-small); color: var(--fg-2); }
.match-suite .lien-fleche { margin-top: var(--s-5); }
.match-suite__source { margin-top: var(--s-4); font-size: var(--fs-small); color: var(--fg-2); max-width: 46ch; }
.match-suite__source a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
.match-suite__source a:hover { color: var(--fg); }

/* Rituels */
/* Trois rituels en ligne : l'icône tient la marge gauche sur deux rangées, titre et texte
   à sa droite. Un item fait la hauteur de son paragraphe, pas celle d'une carte. */
.rituels { margin-top: clamp(1.5rem, 2.5vw, 2rem); }
.rituels > .eyebrow { margin-bottom: var(--s-3); }
.rituels__liste { display: grid; gap: var(--s-3); }
.rituel {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  column-gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--ligne);
}
.rituel__icone { grid-row: 1 / 3; width: 1.5rem; height: 1.5rem; color: var(--accent-fg); margin-top: 0.15em; }
.rituel h3 { font-size: clamp(1.125rem, 1.6vw, 1.375rem); }
.rituel p { margin-top: var(--s-1); color: var(--fg-2); font-size: var(--fs-small); }
@media (min-width: 768px) { .rituels__liste { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }

.stade__aussi {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-small);
  border: 1px solid var(--ligne);
  border-radius: var(--radius);
  max-width: none;
  color: var(--fg-2);
}
.stade__aussi-icone { width: 1.75rem; height: 1.75rem; flex: none; color: var(--craie); }

@keyframes pulse-rouge {
  0% { box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / 0.6); }
  70% { box-shadow: 0 0 0 8px rgb(var(--accent-rgb) / 0); }
  100% { box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / 0); }
}

/* ==========================================================================
   Footer : bordeaux sombre (refonte palette 2026-09-10), macaron couleurs, mentions sanitaires, crédit
   ========================================================================== */
/* Vague 8 (Saad, 2026-09-10) : pied de page resserré. Marges réduites, plan du site sur deux
   colonnes, listes sans interligne (chaque lien fait déjà 44 px), mentions en un bloc discret. */
.footer {
  position: relative;
  background: var(--bg);
  color: var(--fg);
  padding-block: clamp(2rem, 4vw, 3rem) var(--s-4);
  isolation: isolate;
  overflow: hidden;
}
.footer .container { position: relative; z-index: 2; }
.footer__haut { display: grid; gap: var(--s-5); }
/* Deux colonnes dès 360 px : sur téléphone, quatre colonnes empilées faisaient 1 700 px de
   pied de page. La marque et le plan du site gardent toute la largeur (les liens du plan
   s'enchaînent en rangée) ; l'adresse électronique peut se couper. */
@media (min-width: 360px) {
  .footer__haut { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__marque, .footer__col--site { grid-column: 1 / -1; }
}
.footer__col--site .footer__liste { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }
/* Le macaron était à 5,5 rem, plus petit que celui du RC Vannes affiché deux fois plus haut
   dans la page. C'est le logo du bar : il passe devant. */
.footer__logo { display: inline-block; width: 7rem; }
.footer__logo img { width: 100%; height: auto; }
.footer__accroche { margin-top: var(--s-4); max-width: 22rem; font-weight: 500; }
.footer__breton { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--fg-2); }
.footer__titre,
.legal__sommaire-titre {
  font-family: var(--font-text);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--fg-2);
  margin-bottom: var(--s-2);
}
.footer__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; font-size: var(--fs-small); }
.footer__adresse { font-style: normal; line-height: 1.75; overflow-wrap: anywhere; }
/* inline-flex et non inline-block : min-height garantit les 44 px quelle que soit la
   taille de police (le bas de page descend à 0,875 rem), et le texte reste centré.
   Comme inline-block, la boîte se rétrécit à la place disponible : les libellés longs
   passent toujours à la ligne sur mobile. */
.footer__liste a,
.footer__adresse a,
.footer__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  text-decoration: none;
  transition: color var(--d-micro);
}
.footer__liste a:hover,
.footer__adresse a:hover,
.footer__legal a:hover { text-decoration: underline; text-decoration-color: var(--accent-fg); text-decoration-thickness: 2px; }
/* Les trois mentions (alcool, jeux, non-affiliation) forment un seul bloc, en petit et en
   gris, sans filet entre elles ; le seul filet du bas de page précède le copyright. */
.footer__mentions { margin-top: clamp(1.5rem, 3vw, 2.5rem); display: grid; gap: var(--s-2); }
.footer__mentions .mention-legale { border-top: 0; padding-top: 0; font-size: var(--fs-eyebrow); color: var(--fg-2); }
.footer__mentions .mention-legale strong { color: var(--fg); }
.footer__bas {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--ligne);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-small);
  color: var(--fg-2);
}
.footer__bas p { max-width: none; }
.footer__legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.footer__credit a { color: var(--fg); font-weight: 600; border-bottom: 1px solid var(--accent-fg); }
.footer__credit a:hover { text-decoration: none; color: var(--blanc); border-bottom-color: var(--blanc); }
@media (min-width: 1024px) {
  .footer__haut { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
  .footer__marque, .footer__col--site { grid-column: auto; }
  /* Plan du site sur deux colonnes remplies de haut en bas : quatre liens, puis trois. */
  .footer__col--site .footer__liste {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(4, auto);
    grid-template-columns: repeat(2, auto);
    justify-content: start;
    column-gap: var(--s-5);
  }
}

/* ==========================================================================
   Pages secondaires : en-tête compact et mentions légales
   ========================================================================== */
/* Vague 9 (Saad, 2026-09-10) : en-tête compact. Marges réduites de moitié et titre un cran
   plus petit : le bandeau tient sous 350 px en bureau et le contenu arrive plus vite. */
.page-tete {
  --bg: var(--nuit);
  position: relative;
  background: var(--bg);
  color: var(--fg);
  padding: calc(var(--header-h) + clamp(2rem, 4vw, 3rem)) 0 clamp(2rem, 4vw, 3rem);
  isolation: isolate;
}
.page-tete .container { position: relative; z-index: 2; max-width: 52rem; margin-inline: auto; }
.page-tete h1 { font-size: clamp(2.5rem, 5vw, 4rem); margin-top: var(--s-3); }
.page-tete .lead { margin-top: var(--s-4); color: var(--fg-2); }
.page-tete__maj { margin-top: var(--s-4); font-size: var(--fs-small); color: var(--fg-2); }
.page-tete__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }

/* Page 404 : les destinations utiles. Vague 10 (Saad, 2026-09-10) : section brève, titre
   réduit, deux colonnes de liens en mobile comme en bureau, bornées à 40 rem. */
.pistes-section .section__tete { margin-bottom: var(--s-5); }
.pistes-section .section__tete h2 { font-size: clamp(1.5rem, 2.4vw, 1.875rem); }
.pistes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-5); max-width: 40rem; }

/* Vague 9 : rythme resserré (écarts entre blocs, titres de bloc, fiche) et colonne de texte
   élargie à 52 rem. Sous 1024 px le sommaire est une rangée de liens, comme le plan du site
   du pied de page ; à partir de 1024 px il redevient une liste collante, filet bordeaux. */
.legal__grille { display: grid; gap: var(--s-6); align-items: start; }
.legal__sommaire ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-5);
}
/* Sommaire = navigation, pas de la prose : il a droit à ses 44 px. */
.legal__sommaire a { display: flex; align-items: center; min-height: 2.75rem; text-decoration: none; color: var(--fg-2); }
.legal__sommaire a:hover { color: var(--fg); text-decoration: underline; text-decoration-color: var(--accent-fg); }
.legal__corps { display: grid; gap: clamp(2rem, 4vw, 2.75rem); max-width: 52rem; }
.legal__bloc { scroll-margin-top: calc(var(--header-h) + var(--s-5)); }
.legal__bloc h2 { font-size: clamp(1.5rem, 2.4vw, 1.875rem); margin-bottom: var(--s-3); }
.legal__bloc h3 {
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.4;
  font-weight: 700;
  margin: var(--s-4) 0 var(--s-1);
}
.legal__bloc p + p,
.legal__bloc p + ul,
.legal__bloc ul + p,
.legal__bloc dl + p { margin-top: var(--s-4); }
.legal__bloc ul { margin: 0; padding-left: 1.2rem; display: grid; gap: var(--s-2); }
.legal__bloc ul li::marker { color: var(--accent-fg); }
.legal__bloc .mention-legale { border-top: 0; padding-top: 0; }
.legal__fiche { margin: var(--s-4) 0 0; border-top: 1px solid var(--ligne); }
.legal__fiche dt,
.legal__fiche dd { margin: 0; border-bottom: 1px solid var(--ligne); }
.legal__fiche dt {
  padding-top: 0.45rem;
  border-bottom: 0;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.legal__fiche dd { padding: 0.1rem 0 0.45rem; }
.legal__retour { margin-top: var(--s-4); }
@media (min-width: 640px) {
  .legal__fiche { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); column-gap: var(--s-5); }
  .legal__fiche dt { padding: 0.45rem 0; border-bottom: 1px solid var(--ligne); }
  .legal__fiche dd { padding: 0.45rem 0; }
}
@media (min-width: 1024px) {
  .legal__grille { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: var(--s-8); }
  .legal__sommaire { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
  .legal__sommaire ol { display: grid; gap: var(--s-2); padding-left: var(--s-4); border-left: 3px solid var(--accent-fg); }
}


/* =============================================================================
   4. ANIMATIONS - etats masques, reveals, prefers-reduced-motion
   ex-css/animations.css
   ============================================================================= */

/* ==========================================================================
   animations.css — entrée du hero (CSS pur) et états initiaux des animations
   au scroll, appliqués uniquement quand html.js est présent.
   Sans JavaScript, tout est visible d'emblée.
   ========================================================================== */

/* --- Hero : entrée de 2,5 s, une seule fois, pilotée en CSS pour être visible
   dès le premier rendu sans attendre le JavaScript (LCP). Les délais reproduisent
   la timeline validée : logo 0,1 s, menu 0,4 s, lettres 0,3 s + 16 ms chacune,
   bandeau de marque 0,7 s, sous-titre 1,5 s, boutons 1,7 s, pastille 1,9 s, flèche 2 s. --- */
.js .hero__titre .lettre {
  animation: hero-lettre 0.9s var(--ease-out) backwards;
  animation-delay: calc(0.3s + var(--i, 0) * 16ms);
}
/* Titre remplacé par du texte simple (sans lettres) : fondu montant */
.js .hero__titre:not(:has(.lettre)) { animation: hero-monte 0.9s var(--ease-out) 0.3s backwards; }
.js .hero__macaron { animation: hero-monte 0.6s var(--ease-out) 0.7s backwards; }
.js .hero__sous { animation: hero-monte 0.7s var(--ease-out) 1.5s backwards; }
.js .hero__actions { animation: hero-monte 0.7s var(--ease-out) 1.7s backwards; }
.js .hero__pastille { animation: hero-pastille 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.9s backwards; }
.js .hero__pied { animation: fondu 0.5s var(--ease-out) 2s backwards; }

/* Header de la page d'accueil : logo, entrées du menu en cascade, bouton Appeler, balayage lumineux */
.js body:not(.page-secondaire) .header__logo { animation: fondu 0.7s var(--ease-out) 0.1s backwards; }
.js body:not(.page-secondaire) .nav__list > li,
.js body:not(.page-secondaire) .header__cta { animation: fondu 0.5s var(--ease-out) 0.4s backwards; }
.js body:not(.page-secondaire) .nav__list > li:nth-child(2) { animation-delay: 0.45s; }
.js body:not(.page-secondaire) .nav__list > li:nth-child(3) { animation-delay: 0.50s; }
.js body:not(.page-secondaire) .nav__list > li:nth-child(4) { animation-delay: 0.55s; }
.js body:not(.page-secondaire) .nav__list > li:nth-child(5) { animation-delay: 0.60s; }
.js body:not(.page-secondaire) .nav__list > li:nth-child(6) { animation-delay: 0.65s; }
.js body:not(.page-secondaire) .nav__list > li:nth-child(7) { animation-delay: 0.70s; }
.js body:not(.page-secondaire) .nav__list > li:nth-child(8) { animation-delay: 0.75s; }
.js body:not(.page-secondaire) .nav__list > li:nth-child(9) { animation-delay: 0.80s; }
.js body:not(.page-secondaire) .header__cta { animation-delay: 0.85s; }
.js body:not(.page-secondaire) .header__logo::after { animation: balayage 1.2s var(--ease-out) 0.9s forwards; }

.anim .rideau__bande { transform: scaleX(0); }
/* Bandeau d'enseigne : les pièces attendent hors champ à gauche et à droite, le mot-symbole
   au-dessus de la plaque ; animations.js les ramène au fil du défilement. */
.anim .enseigne__g { transform: translateX(-60vw); }
.anim .enseigne__d { transform: translateX(60vw); }
.anim .enseigne__mot { opacity: 0; transform: translateY(-120%); }

/* États de départ pilotés par GSAP : actifs seulement quand main.js a chargé la pile d'animation
   (classe « anim » sur <html>) ; sans elle, tout reste visible. */
.anim [data-reveal] { opacity: 0; transform: translateY(24px); }

/* Images révélées par masque horizontal, léger zoom arrière */
.anim [data-masque] { clip-path: inset(0 100% 0 0); }
.anim [data-masque] img { transform: scale(1.12); }

/* Cases de services (Saad, 2026-09-11 : « on anime aussi l'apparition des cases ») : chaque
   case attend un peu plus bas et légèrement réduite ; animations.js les pose en cascade dans
   l'ordre de lecture au fil du défilement, et fait glisser stroke-dashoffset de l'icône vers 0
   quand sa case est posée. */
.anim .service { opacity: 0; transform: translateY(40px) scale(0.92); }
.anim .service__icone { stroke-dasharray: 90; stroke-dashoffset: 90; }

@keyframes fondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-lettre { from { opacity: 0; transform: translateY(110%); } to { opacity: 1; transform: none; } }
@keyframes hero-monte { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes hero-pastille { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } }
@keyframes balayage {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}

/* Mouvement réduit : tout visible, aucune animation (seul bloc de la feuille sur ce media) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .hero__titre,
  .js .hero__titre .lettre,
  .js .hero__macaron,
  .js .hero__sous,
  .js .hero__actions,
  .js .hero__pastille,
  .js .hero__pied,
  .js .header__logo,
  .js .header__logo::after,
  .js .nav__list > li,
  .js .header__cta { animation: none !important; }
  .anim [data-reveal] { opacity: 1; transform: none; }
  .anim [data-masque] { clip-path: none; }
  .anim [data-masque] img { transform: none; }
  .anim .rideau__bande { transform: none; }
  .anim .enseigne__g, .anim .enseigne__d, .anim .enseigne__mot { transform: none; opacity: 1; }
  .anim .service__icone { stroke-dashoffset: 0; transition: none; }
  .galerie__piste, .galerie__defile { transform: none !important; scroll-behavior: auto !important; }
  .travee__media img, .lightbox__img, .travee__lien, .service { transition: none !important; }
  .service:hover, .travee__lien:hover { transform: none; }
  .anim .section__tete h2::after { transform: none; transition: none; }
  .carrousel__piste { scroll-behavior: auto !important; }
  .carte__dessin { transition: none !important; }
  .hero__scroll svg, .hero__pastille::before, .horaires__etat::before, .point-live { animation: none !important; }
  .marquee__piste { animation: none !important; }
  .hero__media { inset: 0; }
  /* Le bouton flottant garde son apparition/disparition, mais sans glissement. */
  .js .appel-flottant { transform: none; transition: opacity 0.01ms, visibility 0s; }
}