/* =========================================================
   CMVB — Castres Massaguel Volley-Ball
   Feuille de style unique du site
   Couleurs : bleu et blanc de Castres (environ 80 %), vert de Massaguel (environ 20 %)
   Site conçu et réalisé par le Castres Massaguel Volley-Ball (CMVB)
   ========================================================= */

/* Polices hébergées sur le site (aucun appel à Google Fonts, donc aucune adresse IP transmise) */
@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/bebas-neue-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/bebas-neue-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fredoka (ronde et sympathique) : nom des équipes dans le bandeau des photos */
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/fredoka-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/fredoka-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter : une version fixe par épaisseur (400, 600, 700, 800), identique dans tous les navigateurs
   (la version à épaisseur variable n'était pas comprise par certains Safari) */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/inter-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/inter-800-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/inter-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --nuit: #0b0a1f;
  --nuit-2: #15132f;
  --nuit-3: #1f1c45;
  --bleu: #215ca8;
  --bleu-vif: #2f7de1;
  --vert: #00891f;      /* vert du blason de Massaguel */
  --vert-vif: #3cc85a;  /* le même, éclairci pour les fonds sombres */
  --vert-fonce: #00701a;
  /* Bleu et blanc (Castres) dominent, à 80 % ; le vert (Massaguel) fait les 20 % d'accents */
  --accent: #2f7de1;
  --accent-fonce: #215ca8;
  --accent-clair: #6aa9ff;
  --blanc: #ffffff;
  /* les mêmes couleurs en composantes, pour les transparences (rgba) */
  --nuit-rgb: 11, 10, 31;
  --accent-rgb: 47, 125, 225;
  --bleu-rgb: 33, 92, 168;
  --vert-rgb: 0, 137, 31;
  --vert-vif-rgb: 60, 200, 90;
  --gris-fond: #f3f5fa;
  --gris-ligne: #e1e5ef;
  --texte: #1b1a2e;
  --texte-doux: #5b5f76;

  --rayon: 18px;
  --ombre: 0 18px 45px -20px rgba(var(--nuit-rgb), .35);
  --ombre-forte: 0 30px 60px -25px rgba(var(--nuit-rgb), .55);
  --largeur: 1200px;

  --titre: "Bebas Neue", "Arial Narrow", sans-serif;
  --corps: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--corps);
  font-size: 17px;
  line-height: 1.65;
  color: var(--texte);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}

/* ce qui dépasse sur les côtés (ruban incliné, décors) est rogné ici aussi : Safari sur iPhone ne tient
   pas compte du réglage de body et laisserait glisser la page de côté ; « clip » ne gêne pas les
   éléments qui restent fixés pendant le défilement */
main { overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bleu); text-decoration: none; }
a:hover { color: var(--bleu-vif); }

h1, h2, h3, h4 {
  font-family: var(--titre);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.05;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(3rem, 8vw, 6.5rem); }
h2 { font-size: clamp(2.4rem, 5vw, 3.8rem); }
h3 { font-size: clamp(1.6rem, 2.6vw, 2rem); }
p { margin: 0 0 1em; }

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 20px;
}

.vert { color: var(--vert-vif); }
.bleu { color: var(--bleu-vif); }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .95em 1.7em;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.bouton:hover { transform: translateY(-2px); }
.bouton--principal { background: var(--accent); color: var(--blanc); box-shadow: 0 12px 30px -10px rgba(var(--accent-rgb), .7); }
.bouton--principal:hover { background: var(--accent-fonce); color: var(--blanc); }
.bouton--bleu { background: var(--bleu-vif); color: var(--blanc); box-shadow: 0 12px 30px -10px rgba(var(--accent-rgb), .7); }
.bouton--bleu:hover { background: var(--bleu); color: var(--blanc); }
.bouton--contour { border-color: rgba(255, 255, 255, .6); color: var(--blanc); }
.bouton--contour:hover { background: var(--blanc); color: var(--nuit); }
.bouton--contour-sombre { border-color: var(--nuit); color: var(--nuit); }
.bouton--contour-sombre:hover { background: var(--nuit); color: var(--blanc); }

/* ---------- En-tête ---------- */
.entete {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
  padding: 18px 0;
}
.entete.est-defile,
.entete.est-plein {
  background: rgba(var(--nuit-rgb), .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px -15px rgba(0, 0, 0, .6);
  padding: 10px 0;
}
.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.marque {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--blanc);
}
.marque:hover { color: var(--blanc); }
.marque img {
  width: 54px;
  height: 54px;
  transition: transform .4s ease;
}
.marque:hover img { transform: rotate(-12deg) scale(1.05); }
.marque img,
.marque__nom { transition: transform .4s ease, width .3s ease, height .3s ease, font-size .3s ease; }
.page-accueil .entete:not(.est-defile) .marque img { width: 72px; height: 72px; }
.page-accueil .entete:not(.est-defile) .marque__nom { font-size: 1.9rem; }
.page-accueil .entete:not(.est-defile) .marque__nom small { font-size: .78rem; }
.marque__nom {
  font-family: var(--titre);
  font-size: 1.55rem;
  line-height: 1;
  letter-spacing: .04em;
}
.marque__nom small {
  display: block;
  font-family: var(--corps);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-top: 4px;
}

.menu {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu a {
  display: block;
  padding: .55em .95em;
  color: rgba(255, 255, 255, .85);
  font-weight: 600;
  font-size: .95rem;
  border-radius: 999px;
  transition: background .2s ease, color .2s ease;
}
.menu a:hover { color: var(--blanc); background: rgba(255, 255, 255, .1); }
.menu a.actif { color: var(--accent); }
.menu .bouton { margin-left: 10px; padding: .7em 1.3em; font-size: .85rem; }
.menu .bouton:hover { background: var(--accent-fonce); }

.burger {
  display: none;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, .1);
  cursor: pointer;
  position: relative;
}
.burger span,
.burger span::before,
.burger span::after {
  position: absolute;
  left: 12px;
  width: 22px;
  height: 2px;
  background: var(--blanc);
  border-radius: 2px;
  transition: transform .3s ease, top .3s ease, opacity .2s ease;
  content: "";
}
.burger span { top: 22px; }
.burger span::before { left: 0; top: -7px; }
.burger span::after { left: 0; top: 7px; }
.menu-ouvert .burger span { background: transparent; }
.menu-ouvert .burger span::before { top: 0; transform: rotate(45deg); }
.menu-ouvert .burger span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1100px) {
  .burger { display: block; }
  .menu {
    position: fixed;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    background: var(--nuit);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    z-index: -1;
  }
  .menu a { font-size: 1.5rem; font-family: var(--titre); letter-spacing: .05em; }
  .menu .bouton { margin: 16px 0 0; font-size: 1rem; }
  .menu-ouvert .menu { opacity: 1; visibility: visible; }
  .menu-ouvert { overflow: hidden; }
}

/* ---------- Héros (accueil) ---------- */
.heros {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  color: var(--blanc);
  background: var(--nuit);
  overflow: hidden;
  padding: 140px 0 120px;
}
.heros__fond {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  transform: scale(1.08);
  animation: zoomLent 18s ease-out forwards;
}
.heros::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(var(--nuit-rgb), .96) 0%, rgba(var(--nuit-rgb), .82) 40%, rgba(var(--bleu-rgb), .35) 100%),
    linear-gradient(0deg, rgba(var(--nuit-rgb), 1) 0%, rgba(var(--nuit-rgb), 0) 35%);
}
.heros::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: -10%;
  bottom: -30%;
  width: 70vw;
  height: 70vw;
  border-radius: 50%;
  border: 2px solid rgba(var(--accent-rgb), .35);
  box-shadow: 0 0 0 40px rgba(var(--accent-rgb), .05), 0 0 0 80px rgba(var(--accent-rgb), .04);
}
@keyframes zoomLent { to { transform: scale(1); } }

.heros__grille {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 50px;
  align-items: center;
}
.heros__contenu { position: relative; }
.pastille {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .45em 1em;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), .15);
  border: 1px solid rgba(var(--accent-rgb), .5);
  color: var(--accent-clair);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.pastille::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--vert-vif);
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--vert-vif-rgb), .7); }
  70% { box-shadow: 0 0 0 10px rgba(var(--vert-vif-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--vert-vif-rgb), 0); }
}
/* Nom du club : le titre principal de la page, en très grand */
.heros__club {
  font-size: clamp(3.4rem, 8.2vw, 7.6rem);
  line-height: .9;
  letter-spacing: .015em;
  margin-bottom: .18em;
  text-shadow: 0 6px 30px rgba(0, 0, 0, .55);
}
.heros__club span {
  display: block;
  color: var(--accent-clair);
}
.heros__slogan {
  font-family: var(--titre);
  font-size: clamp(1.7rem, 3.2vw, 2.7rem);
  line-height: 1.05;
  letter-spacing: .03em;
  color: var(--blanc);
  margin: 0 0 .7em;
}
.heros__slogan .contour {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--blanc);
}
.heros__accroche {
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  color: rgba(255, 255, 255, .82);
  max-width: 600px;
  margin-bottom: 34px;
}
.heros__actions { display: flex; flex-wrap: wrap; gap: 14px; }
/* Logo du club : grand, avec un halo bleu pour bien ressortir de la photo */
.heros__embleme {
  position: relative;
  order: 2;
  display: grid;
  place-items: center;
}
.heros__embleme::before {
  content: "";
  position: absolute;
  width: 115%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .55) 0%, rgba(var(--accent-rgb), .18) 45%, transparent 70%);
}
.heros__logo {
  position: relative;
  width: 100%;
  max-width: 520px;
  height: auto;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .7));
  animation: flotte 6s ease-in-out infinite;
}
@keyframes flotte {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-12px) rotate(3deg); }
}
.heros__defiler {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .6);
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.heros__defiler::after {
  content: "";
  width: 2px;
  height: 36px;
  background: linear-gradient(var(--accent), transparent);
  animation: descend 1.8s infinite;
}
@keyframes descend {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@media (max-width: 960px) {
  .heros { padding-top: 110px; }
  .heros__grille { grid-template-columns: 1fr; gap: 14px; }
  .heros__embleme { order: 0; }
  .heros__logo { max-width: min(62vw, 300px); }
}

/* ---------- Bandeau défilant ---------- */
.ruban {
  background: linear-gradient(90deg, var(--accent-fonce), var(--accent));
  color: var(--blanc);
  overflow: hidden;
  white-space: nowrap;
  padding: 14px 0;
  transform: rotate(-1.5deg) scale(1.03);
  margin: -24px 0 0;
  position: relative;
  z-index: 3;
  box-shadow: 0 15px 35px -15px rgba(var(--accent-rgb), .8);
}
.ruban__piste {
  display: inline-flex;
  gap: 40px;
  animation: defile 30s linear infinite;
  font-family: var(--titre);
  font-size: 1.7rem;
  letter-spacing: .06em;
}
.ruban__piste span::after { content: "●"; color: var(--vert-vif); margin-left: 40px; font-size: .8rem; vertical-align: middle; }
@keyframes defile { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.section { padding: 110px 0; position: relative; }
.section--gris { background: var(--gris-fond); }
.section--nuit { background: var(--nuit); color: var(--blanc); }
.section--nuit p { color: rgba(255, 255, 255, .78); }
.section--bleu {
  background: linear-gradient(135deg, var(--bleu) 0%, var(--nuit-3) 100%);
  color: var(--blanc);
}

.surtitre {
  display: inline-block;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.surtitre::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 3px;
  background: var(--vert);
  vertical-align: middle;
  margin-right: 10px;
  border-radius: 2px;
}
.entete-section { max-width: 720px; margin-bottom: 56px; }
.entete-section--centre { margin-left: auto; margin-right: auto; text-align: center; }
.entete-section p { font-size: 1.1rem; color: var(--texte-doux); }
.section--nuit .entete-section p,
.section--bleu .entete-section p { color: rgba(255, 255, 255, .75); }

/* ---------- En-tête de page intérieure ---------- */
.bandeau-page {
  position: relative;
  padding: 190px 0 110px;
  color: var(--blanc);
  background: var(--nuit);
  overflow: hidden;
}
.bandeau-page__fond {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  opacity: .35;
  transform: scale(1.08);
  animation: zoomLent 18s ease-out forwards;
}
/* Diaporama des équipes : deux calques qui se relaient en fondu (voir main.js) */
.heros__fond,
.bandeau-page__fond { transition: opacity 1.6s ease; }
.heros__fond.est-cache,
.bandeau-page__fond.est-cache { opacity: 0; }
.bandeau-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, var(--nuit) 20%, rgba(var(--nuit-rgb), .6) 70%, rgba(var(--bleu-rgb), .5));
}
.bandeau-page::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 70px;
  background: var(--blanc);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.bandeau-page .conteneur { position: relative; z-index: 2; }
.bandeau-page h1 { font-size: clamp(3rem, 7vw, 5.5rem); }
.bandeau-page p { max-width: 640px; font-size: 1.15rem; color: rgba(255, 255, 255, .8); }
.fil-ariane { font-size: .85rem; color: rgba(255, 255, 255, .6); margin-bottom: 12px; }
.fil-ariane a { color: var(--accent); }

/* ---------- Chiffres clés ---------- */
.chiffres {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.chiffre {
  padding: 30px 26px;
  border-radius: var(--rayon);
  background: var(--blanc);
  box-shadow: var(--ombre);
  border-top: 4px solid var(--accent);
  transition: transform .3s ease;
}
.chiffre:nth-child(even) { border-top-color: var(--vert); }
.chiffre:hover { transform: translateY(-6px); }
.chiffre__valeur {
  font-family: var(--titre);
  font-size: 3.6rem;
  line-height: 1;
  color: var(--nuit);
}
.chiffre__label { color: var(--texte-doux); font-weight: 600; }
@media (max-width: 900px) { .chiffres { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Valeurs ---------- */
.valeurs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.valeur {
  position: relative;
  padding: 34px 28px;
  border-radius: var(--rayon);
  background: var(--nuit-2);
  border: 1px solid rgba(255, 255, 255, .08);
  overflow: hidden;
  transition: transform .3s ease, border-color .3s ease;
}
.valeur::after {
  content: "";
  position: absolute;
  inset: auto -40% -60% auto;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .35), transparent 70%);
  transition: transform .4s ease;
}
.valeur:hover { transform: translateY(-6px); border-color: rgba(var(--accent-rgb), .6); }
.valeur:hover::after { transform: scale(1.5); }
.valeur__icone {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid var(--accent);
  color: var(--accent-clair);
  margin-bottom: 22px;
}
.valeur__icone svg { width: 30px; height: 30px; }
.valeur h3 { color: var(--blanc); margin-bottom: .3em; }
.valeur p { margin: 0; font-size: .97rem; }
@media (max-width: 1000px) { .valeurs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .valeurs { grid-template-columns: 1fr; } }

/* ---------- Deux colonnes ---------- */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.duo--inverse > :first-child { order: 2; }
/* Une colonne de grille ne doit jamais être plus large que l'écran (tableaux, adresses e-mail…) */
:where(.duo, .contact, .cartes-infos, .chiffres, .offres, .pied__grille) > *, .champ { min-width: 0; }
a[href^="mailto:"] { overflow-wrap: break-word; }
@media (max-width: 900px) {
  .duo { grid-template-columns: 1fr; gap: 40px; }
  .duo--inverse > :first-child { order: 0; }
}
.photo-cadre { position: relative; }
.photo-cadre img {
  width: 100%;
  border-radius: var(--rayon);
  box-shadow: var(--ombre-forte);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.photo-cadre::before {
  content: "";
  position: absolute;
  inset: 24px -24px -24px 24px;
  border-radius: var(--rayon);
  border: 3px solid var(--accent);
}
.photo-cadre__badge {
  position: absolute;
  z-index: 2;
  left: -20px;
  bottom: 30px;
  background: var(--nuit);
  color: var(--blanc);
  padding: 16px 22px;
  border-radius: 14px;
  box-shadow: var(--ombre-forte);
  font-family: var(--titre);
  font-size: 1.6rem;
  line-height: 1;
}
.photo-cadre__badge small {
  display: block;
  font-family: var(--corps);
  font-size: .75rem;
  color: var(--accent);
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 6px;
}

/* ---------- Hornets ---------- */
.hornets {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 20%, rgba(var(--accent-rgb), .35), transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(var(--vert-rgb), .22), transparent 40%),
    var(--nuit);
  color: var(--blanc);
}
/* Photos de la N2 qui défilent en fond (voir main.js), sous un voile sombre pour garder le texte lisible */
.hornets__fond {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 35%;
  opacity: .3;
  transform: scale(1.08);
  animation: zoomLent 18s ease-out forwards;
  transition: opacity 1.2s ease;
}
.hornets__fond.est-cache { opacity: 0; }
.hornets::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 85% 20%, rgba(var(--accent-rgb), .35), transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(var(--vert-rgb), .22), transparent 40%),
    linear-gradient(90deg, rgba(var(--nuit-rgb), .55), rgba(var(--nuit-rgb), .8));
}
/* Diaporamas sur écran en hauteur (téléphone, tablette) : recadrée en plein écran, une photo de groupe
   ne montrerait qu'un ou deux joueurs très agrandis. Ici la photo tient en largeur, toute l'équipe est
   visible, sur un fond flouté tiré de la même photo. Aucun réglage dans le script : les deux couches
   reprennent l'image que le diaporama pose sur le calque. */
@media (max-aspect-ratio: 1/1) {
  .heros__fond::before,
  .bandeau-page__fond::before,
  .hornets__fond::before,
  .heros__fond::after,
  .bandeau-page__fond::after,
  .hornets__fond::after {
    content: "";
    position: absolute;
    background-image: inherit;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .heros__fond::before,
  .bandeau-page__fond::before,
  .hornets__fond::before {
    inset: -40px;
    background-position: center;
    filter: blur(22px) brightness(.75);
  }
  .heros__fond::after,
  .bandeau-page__fond::after,
  .hornets__fond::after {
    left: 0;
    right: 0;
    top: var(--centre-photo, 50%);
    aspect-ratio: 3 / 2;
    transform: translateY(-50%);
    background-position: center 30%;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  }
  .heros__fond { --centre-photo: 44%; }
  .bandeau-page__fond { opacity: .8; }
  /* le texte occupe toute la largeur : voile régulier de haut en bas, plutôt que sombre à gauche seulement */
  .heros::before {
    background: linear-gradient(180deg, rgba(var(--nuit-rgb), .78) 0%, rgba(var(--nuit-rgb), .62) 30%, rgba(var(--nuit-rgb), .68) 60%, rgba(var(--nuit-rgb), 1) 100%);
  }
  .bandeau-page::before {
    background: linear-gradient(180deg, rgba(var(--nuit-rgb), .8) 0%, rgba(var(--nuit-rgb), .55) 45%, rgba(var(--nuit-rgb), .75) 100%);
  }
}
.hornets > .conteneur { position: relative; z-index: 2; }
.hornets__logo {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .6));
}
.hornets h2 span { color: var(--accent); }
.hornets p { color: rgba(255, 255, 255, .8); }
.liste-coches { list-style: none; padding: 0; margin: 0 0 30px; }
.liste-coches li { padding-left: 34px; position: relative; margin-bottom: 10px; }
.liste-coches li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--vert) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ---------- Équipes ---------- */
.filtres {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 44px;
}
.filtre {
  padding: .7em 1.4em;
  border-radius: 999px;
  border: 2px solid var(--gris-ligne);
  background: var(--blanc);
  font: inherit;
  font-weight: 700;
  font-size: .9rem;
  color: var(--texte-doux);
  cursor: pointer;
  transition: all .2s ease;
}
.filtre:hover { border-color: var(--bleu-vif); color: var(--bleu-vif); }
.filtre.actif { background: var(--nuit); border-color: var(--nuit); color: var(--blanc); }

.grille-equipes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr));
  gap: 26px;
}
.equipe {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre);
  transition: transform .3s ease, box-shadow .3s ease, opacity .3s ease;
}
.equipe:hover { transform: translateY(-8px); box-shadow: var(--ombre-forte); }
.equipe.cache { display: none; }
.equipe__visuel {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(135deg, var(--bleu) 0%, var(--nuit) 100%);
}
.equipe__visuel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.equipe:hover .equipe__visuel img { transform: scale(1.07); }
.equipe__visuel--logo {
  display: grid;
  place-items: center;
}
.equipe__visuel--logo img {
  width: 42%;
  height: auto;
  object-fit: contain;
  opacity: .9;
}
.equipe__visuel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(var(--nuit-rgb), .75), transparent 55%);
}
.equipe__niveau {
  position: absolute;
  z-index: 1;
  left: 18px;
  bottom: 14px;
  font-family: var(--titre);
  font-size: 1.15rem;
  letter-spacing: .08em;
  color: var(--accent-clair);
}
.equipe__corps { padding: 24px 26px 28px; flex: 1; display: flex; flex-direction: column; }
.equipe__corps h3 { color: var(--nuit); margin-bottom: .35em; }
.equipe__info {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--texte-doux);
  font-size: .95rem;
  margin-bottom: 8px;
}
.equipe__info svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 4px; color: var(--bleu-vif); }
.equipe__info strong { color: var(--texte); }
.etiquette {
  display: inline-block;
  align-self: flex-start;
  margin-top: auto;
  padding: .3em .8em;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(var(--vert-rgb), .12);
  color: var(--vert-fonce);
}
.etiquette--bleu { background: rgba(var(--accent-rgb), .12); color: var(--bleu); }
.etiquette--nuit { background: rgba(var(--nuit-rgb), .08); color: var(--nuit); }
.equipe__corps .etiquette { margin-top: 14px; }

/* Cartes d'une même ligne alignées entre elles : chaque élément (titre, entraîneurs, créneaux,
   matchs, classement, lien, étiquette) occupe la même rangée dans toutes les cartes de la ligne,
   même quand l'une a plus de créneaux ou un texte sur deux lignes */
@supports (grid-template-rows: subgrid) {
  .grille-equipes .equipe {
    display: grid;
    grid-row: span 8;
    /* colonne bornée à la carte : un contenu insécable (pastille, horaires) ne peut pas l'élargir */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .grille-equipes .equipe__corps {
    display: grid;
    grid-row: 2 / span 7;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid;
    row-gap: 0;
    align-items: start;
  }
  .equipe__corps > h3 { grid-row: 1; justify-self: start; }
  .equipe__corps > .equipe__info:not(.equipe__matchs) { grid-row: 2; }
  .equipe__corps > .creneaux { grid-row: 3; }
  .equipe__corps > .equipe__matchs { grid-row: 4; }
  .equipe__corps > .classement { grid-row: 5; justify-self: start; }
  .equipe__corps > .equipe__resultats { grid-row: 6; justify-self: start; }
  .equipe__corps > .etiquette { grid-row: 7; justify-self: start; }
}

/* Sur téléphone, cartes plus compactes : moins de marges, et chaque créneau tient sur une ligne
   (jour, horaire, salle) tant que la largeur le permet */
@media (max-width: 600px) {
  .equipe__corps { padding: 18px 16px 20px; }
  .equipe__corps .creneaux li { grid-template-columns: 66px auto 1fr; gap: 8px; padding: 6px 10px; }
  .equipe__corps .creneau__salle { grid-column: auto; justify-self: end; text-align: right; margin-top: 0; }
  .equipe__corps .classement { gap: 10px; padding: 6px 14px 6px 6px; }
  .equipe__corps .classement__rang { width: 38px; height: 38px; font-size: 1.05rem; }
}
@media (max-width: 374px) {
  .equipe__corps .creneaux li { gap: 6px; padding: 6px 8px; }
}
@media (max-width: 359px) {
  .equipe__corps .creneaux li { grid-template-columns: 66px 1fr; }
  .equipe__corps .creneau__salle { grid-column: 1 / -1; justify-self: start; text-align: left; margin-top: -4px; }
}

/* Cartes "pôles" de l'accueil */
.poles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.pole {
  position: relative;
  min-height: 420px;
  border-radius: var(--rayon);
  overflow: hidden;
  color: var(--blanc);
  display: flex;
  align-items: flex-end;
  box-shadow: var(--ombre);
}
.pole img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s ease;
}
.pole::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(var(--nuit-rgb), .95) 0%, rgba(var(--nuit-rgb), .3) 60%, rgba(var(--nuit-rgb), .1) 100%);
  transition: background .4s ease;
}
.pole:hover img { transform: scale(1.08); }
.pole:hover::before { background: linear-gradient(0deg, rgba(var(--bleu-rgb), .95) 0%, rgba(var(--nuit-rgb), .35) 70%); }
.pole__texte { position: relative; z-index: 2; padding: 30px; }
.pole__texte h3 { font-size: 2.3rem; margin-bottom: .2em; }
.pole__texte p { color: rgba(255, 255, 255, .82); margin-bottom: 14px; font-size: .97rem; }
.pole__lien { color: var(--accent-clair); font-weight: 700; display: inline-flex; gap: .4em; align-items: center; }
.pole:hover .pole__lien { color: var(--blanc); }
@media (max-width: 960px) { .poles { grid-template-columns: 1fr; } .pole { min-height: 340px; } }

/* ---------- Actualités ---------- */
.actus {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 26px;
}
.actus__colonne { display: grid; gap: 26px; }
.actu {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre);
  color: var(--texte);
  transition: transform .3s ease;
}
.actu:hover { transform: translateY(-6px); color: var(--texte); }
.actu__visuel {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--nuit);
}
.actu__visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.actu:hover .actu__visuel img { transform: scale(1.06); }
.actu__visuel--clair { background: linear-gradient(135deg, #fff5ea, #f5e2cf); }
.actu__visuel--clair img { object-fit: contain; padding: 18px; }
.actu__corps { padding: 24px 26px 28px; }
.actu__date {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bleu-vif);
  margin-bottom: 8px;
}
.actu h3 { color: var(--nuit); }
.actu p { color: var(--texte-doux); margin: 0; }
.actu--horizontale { flex-direction: row; }
.actu--horizontale .actu__visuel { flex: 0 0 40%; aspect-ratio: auto; }
.actu--sans-image .actu__corps { padding: 30px; }
.actu--sans-image { border-left: 5px solid var(--accent); }
@media (max-width: 900px) {
  .actus { grid-template-columns: 1fr; }
  .actu--horizontale { flex-direction: column; }
  .actu--horizontale .actu__visuel { aspect-ratio: 16 / 9; }
}

/* ---------- Appel à l'action ---------- */
.appel {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  padding: 70px 60px;
  background:
    radial-gradient(circle at 90% 10%, rgba(var(--accent-rgb), .5), transparent 40%),
    linear-gradient(120deg, var(--bleu) 0%, var(--nuit-3) 100%);
  color: var(--blanc);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: center;
  box-shadow: var(--ombre-forte);
}
.appel h2 { margin-bottom: .3em; }
.appel p { color: rgba(255, 255, 255, .85); font-size: 1.1rem; margin: 0; }
.appel__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; }
.appel::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 260px;
  height: 260px;
  background: url("../img/logo-cmvb.png") center / contain no-repeat;
  opacity: .08;
}
@media (max-width: 900px) {
  .appel { grid-template-columns: 1fr; padding: 50px 30px; }
  .appel__actions { justify-content: flex-start; }
}

/* ---------- Partenaires ---------- */
.carrousel {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.carrousel__piste {
  display: flex;
  gap: 26px;
  width: max-content;
  animation: defile 55s linear infinite;
}
.carrousel:hover .carrousel__piste { animation-play-state: paused; }
.logo-partenaire {
  flex: 0 0 auto;
  width: 180px;
  height: 110px;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--blanc);
  border-radius: 14px;
  border: 1px solid var(--gris-ligne);
  transition: transform .3s ease, box-shadow .3s ease;
}
.logo-partenaire img {
  max-height: 72px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .75;
  transition: filter .3s ease, opacity .3s ease;
}
.logo-partenaire:hover { transform: translateY(-4px); box-shadow: var(--ombre); }
.logo-partenaire:hover img { filter: none; opacity: 1; }

/* Logos sur 5, 4, 3 ou 2 colonnes selon la largeur ; une ligne incomplète est centrée sous les autres */
.grille-partenaires {
  --colonnes: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.grille-partenaires .logo-partenaire { width: calc((100% - (var(--colonnes) - 1) * 20px) / var(--colonnes)); height: 130px; }
@media (max-width: 1000px) { .grille-partenaires { --colonnes: 4; } }
@media (max-width: 760px) { .grille-partenaires { --colonnes: 3; } }
@media (max-width: 520px) { .grille-partenaires { --colonnes: 2; } }
.grille-partenaires .logo-partenaire img { max-height: 85px; }

.offres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.offre {
  padding: 34px 30px;
  border-radius: var(--rayon);
  background: var(--nuit-2);
  border: 1px solid rgba(255, 255, 255, .08);
}
.offre__numero { font-family: var(--titre); font-size: 3rem; color: var(--accent); line-height: 1; margin-bottom: 10px; }
.offre h3 { color: var(--blanc); }
.offre p { margin: 0; }
@media (max-width: 900px) { .offres { grid-template-columns: 1fr; } }

/* ---------- Texte riche ---------- */
.texte-riche p { font-size: 1.07rem; color: #34374d; }
.texte-riche p:first-of-type::first-letter {
  float: left;
  font-family: var(--titre);
  font-size: 4.6rem;
  line-height: .85;
  padding: 6px 12px 0 0;
  color: var(--bleu-vif);
}
.citation {
  margin: 40px 0;
  padding: 30px 34px;
  border-radius: var(--rayon);
  background: var(--gris-fond);
  border-left: 6px solid var(--accent);
  font-family: var(--titre);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.15;
  color: var(--nuit);
}

/* Frise chronologique */
.frise { position: relative; padding-left: 40px; margin: 0; list-style: none; }
.frise::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: linear-gradient(var(--accent), var(--accent) 80%, var(--vert) 80%);
  border-radius: 3px;
}
.frise li { position: relative; padding-bottom: 34px; }
.frise li:last-child { padding-bottom: 0; }
.frise li::before {
  content: "";
  position: absolute;
  left: -38px;
  top: 6px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--nuit);
  border: 4px solid var(--accent);
}
.frise__annee { font-family: var(--titre); font-size: 2.2rem; line-height: 1; color: var(--accent-clair); }
.frise h3 { color: var(--blanc); font-size: 1.5rem; margin: 6px 0 4px; }
.frise p { margin: 0; }
/* le texte d'introduction accompagne la lecture de la frise (écrans larges) */
@media (min-width: 901px) { .frise__intro { align-self: start; position: sticky; top: 120px; } }

/* Mot du président */
.president {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 60px;
  align-items: start;
}
.president__carte {
  position: sticky;
  top: 110px;
  padding: 34px 28px;
  border-radius: var(--rayon);
  background: var(--nuit);
  color: var(--blanc);
  text-align: center;
  box-shadow: var(--ombre-forte);
}
.president__carte img { width: 140px; margin: 0 auto 20px; }
.president__carte h3 { margin-bottom: 0; }
.president__carte p { color: var(--accent); font-weight: 700; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; margin: 6px 0 0; }
.signature {
  font-family: var(--titre);
  font-size: 1.8rem;
  color: var(--bleu);
  margin-top: 30px;
}
@media (max-width: 900px) {
  .president { grid-template-columns: 1fr; gap: 30px; }
  .president__carte { position: static; }
}

/* Bureau */
/* Bureau : 6 membres, en 2 rangées de 3 (puis 2 colonnes, puis 1 sur petit écran) */
.bureau {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 920px;
  margin: 0 auto;
}
@media (max-width: 760px) { .bureau { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .bureau { grid-template-columns: 1fr; } }
.membre {
  padding: 28px 22px;
  border-radius: var(--rayon);
  background: var(--blanc);
  box-shadow: var(--ombre);
  text-align: center;
  transition: transform .3s ease;
}
.membre:hover { transform: translateY(-6px); }
.membre__initiales {
  width: 76px;
  height: 76px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--titre);
  font-size: 2rem;
  color: var(--blanc);
  background: linear-gradient(135deg, var(--bleu-vif), var(--nuit-3));
  box-shadow: 0 0 0 4px var(--blanc), 0 0 0 7px var(--accent);
}
/* Photo du membre dans le disque bleu (les initiales restent si pas de photo) */
.membre__initiales { width: 96px; height: 96px; overflow: hidden; }
.membre__initiales img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.membre h3 { font-size: 1.5rem; margin-bottom: 2px; color: var(--nuit); }
.membre p { margin: 0; font-size: .9rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .1em; }

/* Gymnases */
.salles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.salle {
  display: flex;
  gap: 22px;
  padding: 28px;
  border-radius: var(--rayon);
  background: var(--blanc);
  box-shadow: var(--ombre);
  border-left: 5px solid var(--bleu-vif);
}
.salle__icone {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--gris-fond);
  color: var(--bleu-vif);
}
.salle__icone svg { width: 28px; height: 28px; }
.salle__corps { min-width: 0; display: flex; flex-direction: column; }
.salle h3 { font-size: 1.6rem; color: var(--nuit); margin-bottom: .15em; }
.salle p { margin: 0 0 6px; color: var(--texte-doux); font-size: .95rem; }
.salle__officiel { font-size: .85rem !important; font-weight: 600; color: var(--accent-fonce) !important; }
.salle__adresse { color: var(--texte) !important; }
.salle__equipes { font-size: .88rem !important; }
.salle__equipes strong { color: var(--nuit); }
.salle__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 10px; }
.salle__actions a,
.salle__actions button {
  padding: .45em 1em;
  border-radius: 999px;
  border: 1px solid var(--gris-ligne);
  background: var(--blanc);
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  color: var(--accent-fonce);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.salle__actions a:hover,
.salle__actions button:hover { background: var(--accent); border-color: var(--accent); color: var(--blanc); }
@media (max-width: 800px) { .salles { grid-template-columns: 1fr; } }

/* Couleur de chaque gymnase, la même que sur le planning des entraînements */
.salle--travet { border-left-color: var(--salle-travet); }
.salle--ferran { border-left-color: var(--salle-ferran); }
.salle--massaguel { border-left-color: var(--salle-massaguel); }
.salle--barral { border-left-color: var(--salle-barral); }
.salle--borde { border-left-color: var(--nuit); }
.salle--travet .salle__icone { color: var(--salle-travet); }
.salle--ferran .salle__icone { color: var(--salle-ferran); }
.salle--massaguel .salle__icone { color: var(--salle-massaguel); }
.salle--barral .salle__icone { color: var(--salle-barral); }
.salle--borde .salle__icone { color: var(--nuit); }

/* Carte interactive */
.carte-gymnases { margin-bottom: 34px; }
.carte-gymnases__carte {
  height: 440px;
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre);
  border: 1px solid var(--gris-ligne);
  /* garde les boutons de la carte sous l'en-tête fixe du site */
  position: relative;
  z-index: 0;
  isolation: isolate;
}
.repere {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--salle-travet);
  border: 3px solid var(--blanc);
  box-shadow: 0 4px 10px rgba(var(--nuit-rgb), .45);
}
.repere--ferran { background: var(--salle-ferran); }
.repere--massaguel { background: var(--salle-massaguel); }
.repere--barral { background: var(--salle-barral); }
.repere--borde { background: var(--nuit); }
.leaflet-popup-content { font-family: var(--corps); font-size: .9rem; line-height: 1.45; }
.leaflet-popup-content strong { color: var(--nuit); }
@media (max-width: 600px) { .carte-gymnases__carte { height: 340px; } }

/* ---------- Inscriptions ---------- */
.etapes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  counter-reset: etape;
}
.etape {
  position: relative;
  padding: 30px 22px 26px;
  border-radius: var(--rayon);
  background: var(--blanc);
  box-shadow: var(--ombre);
  counter-increment: etape;
}
.etape::before {
  content: counter(etape);
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: 16px;
  border-radius: 50%;
  font-family: var(--titre);
  font-size: 1.8rem;
  color: var(--blanc);
  background: linear-gradient(135deg, var(--accent), var(--accent-fonce));
}
.etape h3 { font-size: 1.45rem; color: var(--nuit); }
.etape p { margin: 0; font-size: .93rem; color: var(--texte-doux); }
@media (max-width: 1100px) { .etapes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .etapes { grid-template-columns: 1fr; } }

.tarifs {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: var(--ombre);
  background: var(--blanc);
}
.tarifs th,
.tarifs td { padding: 16px 22px; text-align: left; border-bottom: 1px solid var(--gris-ligne); }
.tarifs thead th {
  background: var(--nuit);
  color: var(--blanc);
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: .05em;
}
.tarifs tbody tr:last-child td { border-bottom: 0; }
.tarifs tbody tr:hover { background: var(--gris-fond); }
.tarifs td:last-child,
.tarifs th:last-child { text-align: right; }
.tarifs td:last-child { font-family: var(--titre); font-size: 1.6rem; color: var(--bleu); white-space: nowrap; }
.tarifs td:first-child { font-weight: 700; }
.tarifs td:nth-child(2) { color: var(--texte-doux); }
.tableau-defilant { overflow-x: auto; border-radius: var(--rayon); }
.note { font-size: .88rem; color: var(--texte-doux); margin-top: 14px; }

.cartes-infos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.carte-info {
  padding: 30px 28px;
  border-radius: var(--rayon);
  background: var(--blanc);
  box-shadow: var(--ombre);
}
.carte-info h3 { color: var(--nuit); font-size: 1.6rem; }
.carte-info ul { margin: 0; padding-left: 1.1em; color: var(--texte-doux); }
.carte-info li { margin-bottom: 6px; }
.carte-info li strong { color: var(--texte); }
@media (max-width: 900px) { .cartes-infos { grid-template-columns: 1fr; } }

.liens-docs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 14px;
}
.lien-doc {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--nuit-2);
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--blanc);
  font-weight: 600;
  transition: border-color .2s ease, transform .2s ease;
}
.lien-doc:hover { color: var(--blanc); border-color: var(--accent); transform: translateX(4px); }
.lien-doc svg { flex: 0 0 26px; width: 26px; height: 26px; color: var(--accent-clair); }
.lien-doc small { display: block; font-weight: 400; color: rgba(255, 255, 255, .6); font-size: .82rem; }

/* ---------- Contact ---------- */
.contact {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 50px;
  align-items: start;
}
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }
.coordonnees {
  padding: 40px 36px;
  border-radius: var(--rayon);
  background: var(--nuit);
  color: var(--blanc);
  box-shadow: var(--ombre-forte);
}
.coordonnees h2 { font-size: 2.6rem; }
.coordonnee { display: flex; gap: 16px; margin-bottom: 22px; }
.coordonnee svg { flex: 0 0 24px; width: 24px; height: 24px; color: var(--accent-clair); margin-top: 3px; }
.coordonnee strong { display: block; color: var(--blanc); }
.coordonnee span,
.coordonnee a { color: rgba(255, 255, 255, .78); }
.coordonnee a:hover { color: var(--accent-clair); }

.formulaire {
  padding: 40px 36px;
  border-radius: var(--rayon);
  background: var(--blanc);
  box-shadow: var(--ombre);
}
.formulaire h2 { font-size: 2.6rem; color: var(--nuit); }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ--large { grid-column: 1 / -1; }
.champ label { font-weight: 700; font-size: .88rem; color: var(--nuit); }
.champ input,
.champ select,
.champ textarea {
  font: inherit;
  font-size: .98rem;
  padding: 13px 16px;
  border: 2px solid var(--gris-ligne);
  border-radius: 12px;
  background: var(--gris-fond);
  color: var(--texte);
  transition: border-color .2s ease, background .2s ease;
}
.champ input:focus,
.champ select:focus,
.champ textarea:focus { outline: none; border-color: var(--bleu-vif); background: var(--blanc); }
.champ textarea { min-height: 150px; resize: vertical; }
.formulaire .bouton { margin-top: 20px; }
@media (max-width: 600px) { .champs { grid-template-columns: 1fr; } }

.referents {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 16px;
}
.referent {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 22px;
  border-radius: 14px;
  background: var(--blanc);
  box-shadow: 0 8px 22px -16px rgba(var(--nuit-rgb), .4);
  border-left: 4px solid var(--accent);
}
.referent strong { color: var(--nuit); display: block; }
.referent__qui { color: var(--texte-doux); font-size: .92rem; }
/* signalement de violences : bien visible */
.referent--signalement { border-left-color: #d64545; background: #fff6f5; }
html.octobre-rose .referent--signalement { border-left-color: #b0005f; background: #fff0f6; }
.referent__contacts {
  display: grid;
  gap: 6px;
  margin-top: auto;
  padding-top: 12px;
}
.referent__contacts a {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--accent-fonce);
  overflow-wrap: break-word;
}
.referent__contacts a:hover { color: var(--accent); }
.referent__contacts svg {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  padding: 7px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), .1);
  color: var(--accent);
}

/* ---------- Pied de page ---------- */
.pied {
  position: relative;
  background: var(--nuit);
  color: rgba(255, 255, 255, .72);
  padding: 90px 0 30px;
  overflow: hidden;
}
.pied::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--bleu), var(--bleu-vif) 80%, var(--vert) 80%);
}
.pied__grille {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  margin-bottom: 60px;
}
.pied h4 { color: var(--blanc); font-size: 1.5rem; margin-bottom: 18px; }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin-bottom: 10px; }
.pied a { color: rgba(255, 255, 255, .72); }
.pied a:hover { color: var(--accent-clair); }
/* Colonne du logo : logo et réseaux centrés sur la largeur du texte */
.pied__marque { max-width: 320px; }
.pied__marque img { width: 90px; margin: 0 auto 18px; }
.pied__marque p { max-width: 320px; }
.reseaux { display: flex; gap: 12px; margin-top: 20px; }
.pied__marque .reseaux { justify-content: center; }
.reseaux a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .08);
  color: var(--blanc);
  transition: background .2s ease, transform .2s ease;
}
.reseaux a:hover { background: var(--accent); color: var(--blanc); transform: translateY(-3px); }
.reseaux svg { width: 20px; height: 20px; }
.pied__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: .88rem;
}
.pied__filigrane {
  position: absolute;
  right: -40px;
  bottom: -50px;
  font-family: var(--titre);
  font-size: 18rem;
  line-height: 1;
  color: rgba(255, 255, 255, .025);
  pointer-events: none;
  user-select: none;
}
@media (max-width: 960px) { .pied__grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pied__grille { grid-template-columns: 1fr; } }

/* ---------- Apparition au défilement ---------- */
.apparait {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}
.apparait.visible { opacity: 1; transform: none; }
.delai-1 { transition-delay: .1s; }
.delai-2 { transition-delay: .2s; }
.delai-3 { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .apparait { opacity: 1; transform: none; }
}

/* Utilitaires */
.centre { text-align: center; }
.mt-40 { margin-top: 40px; }
.mt-60 { margin-top: 60px; }
.a-confirmer { color: var(--texte-doux); font-style: italic; }

/* Étiquettes lisibles sur les photos des pôles */
.pole .etiquette { background: var(--accent); color: var(--blanc); margin-bottom: 12px; }

/* Le flou de l'en-tête enfermerait le menu mobile plein écran : on le coupe quand le menu est ouvert */
.menu-ouvert .entete { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* =========================================================
   Fiche équipe plein écran (page Équipes)
   ========================================================= */
.equipe[role="button"] { cursor: zoom-in; }
.equipe[role="button"]:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.equipe[role="button"] .equipe__visuel::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 14px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(var(--nuit-rgb), .65) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / 18px no-repeat;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transform: scale(.8);
  transition: opacity .25s ease, transform .25s ease;
}
.equipe[role="button"]:hover .equipe__visuel::before,
.equipe[role="button"]:focus-visible .equipe__visuel::before { opacity: 1; transform: none; }
@media (hover: none) {
  .equipe[role="button"] .equipe__visuel::before { opacity: 1; transform: none; }
}

.visionneuse-ouverte { overflow: hidden; }
.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 28px;
  opacity: 0;
  transition: opacity .25s ease;
}
.visionneuse.ouverte { opacity: 1; }
/* Fermée, la fenêtre ne doit ni s'afficher ni capter les clics de la page */
.visionneuse[hidden] { display: none; }
.visionneuse:not(.ouverte) { pointer-events: none; }
/* fond des fiches d'équipe : le décor « fond-3 » du club, fixe (rose en octobre) */
:root { --fond-fiche: url("../img/fond-fiche-club.webp"); }
html.octobre-rose { --fond-fiche: url("../img/fond-fiche-rose.webp"); }
.visionneuse__fond {
  --voile: 11, 10, 31;
  --lueur: var(--accent-rgb);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--fond-fiche) center / cover no-repeat, var(--nuit);
}
html.octobre-rose .visionneuse__fond { --voile: 30, 11, 24; --lueur: 230, 0, 126; }
/* voile : le décor reste visible, plus sombre à droite pour que les textes blancs restent lisibles */
.visionneuse__fond::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(var(--voile), .3) 0%, rgba(var(--voile), .3) 45%, rgba(var(--voile), .78) 68%, rgba(var(--voile), .84) 100%);
}
.visionneuse__boite {
  position: relative;
  width: min(1400px, 100%);
  max-height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 28px;
  align-items: center;
  transform: translateY(20px) scale(.98);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.visionneuse.ouverte .visionneuse__boite { transform: none; }

.visionneuse__photo {
  position: relative;
  margin: 0;
  padding: 4px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--bleu) 0%, var(--bleu-vif) 80%, var(--vert) 100%);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9), 0 0 60px -20px rgba(var(--accent-rgb), .6);
  justify-self: center;
  max-width: 100%;
}
.visionneuse__photo img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 56px);
  max-height: calc(100dvh - 56px);
  width: auto;
  height: auto;
  border-radius: 20px;
  background: var(--nuit);
}
.visionneuse__photo.entre img { animation: zoomPhoto .45s cubic-bezier(.2, .7, .2, 1); }
@keyframes zoomPhoto { from { opacity: 0; transform: scale(.96); } }
.visionneuse__photo--logo { background: linear-gradient(135deg, var(--bleu), var(--nuit-3)); }
.visionneuse__photo--logo img {
  width: min(60vh, 520px);
  padding: 50px;
  background: transparent;
}
.visionneuse__niveau {
  position: absolute;
  left: 22px;
  bottom: 20px;
  padding: .35em .9em;
  border-radius: 999px;
  background: rgba(var(--nuit-rgb), .75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--titre);
  font-size: 1.15rem;
  letter-spacing: .08em;
  color: var(--accent-clair);
}
.visionneuse__fleche {
  position: absolute;
  top: 50%;
  width: 52px;
  height: 52px;
  margin-top: -26px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(var(--nuit-rgb), .6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--blanc);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.visionneuse__fleche svg { width: 24px; height: 24px; }
.visionneuse__fleche:hover { background: var(--accent); color: var(--blanc); transform: scale(1.08); }
.visionneuse__fleche--prec { left: 18px; }
.visionneuse__fleche--suiv { right: 18px; }

.visionneuse__fermer {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 3;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .08);
  color: var(--blanc);
  cursor: pointer;
  transition: background .2s ease, transform .3s ease;
}
.visionneuse__fermer svg { width: 22px; height: 22px; }
.visionneuse__fermer:hover { background: var(--blanc); color: var(--nuit); transform: rotate(90deg); }

.visionneuse__infos {
  color: var(--blanc);
  max-height: calc(100vh - 56px);
  overflow-y: auto;
  padding-right: 4px;
}
.visionneuse__pole {
  display: inline-block;
  padding: .3em .8em;
  border-radius: 999px;
  background: var(--accent);
  color: var(--blanc);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.visionneuse__infos h2 { font-size: clamp(2.2rem, 3.4vw, 3.2rem); margin-bottom: .2em; }
.visionneuse__detail { color: rgba(255, 255, 255, .7); margin-bottom: 0; }
.visionneuse__sous-titre {
  font-family: var(--corps);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 26px 0 12px;
}
.coachs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.coach {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
}
.coach__avatar {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--titre);
  font-size: 1.3rem;
  background: linear-gradient(135deg, var(--bleu-vif), var(--nuit-3));
  box-shadow: 0 0 0 2px var(--accent);
}
.coach__corps { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.coach__corps strong { font-size: 1.05rem; }
.coach__bouton {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .85);
  font-size: .92rem;
  overflow-wrap: break-word;
}
.coach__bouton svg { flex: 0 0 16px; width: 16px; height: 16px; color: var(--accent-clair); }
.coach__bouton:hover { color: var(--accent-clair); }
.coach__vide { color: rgba(255, 255, 255, .5); font-size: .88rem; font-style: italic; }

.visionneuse__club {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: grid;
  gap: 6px;
  font-size: .9rem;
}
.visionneuse__club span { color: rgba(255, 255, 255, .55); font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; }
.visionneuse__club a { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .85); }
.visionneuse__club a:hover { color: var(--accent-clair); }
.visionneuse__club svg { width: 16px; height: 16px; color: var(--accent-clair); }
.visionneuse__compteur {
  margin-top: 18px;
  font-family: var(--titre);
  font-size: 1.1rem;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .45);
}

/* Fiche compacte : elle tient sur un seul écran d'ordinateur ou de tablette, sans défiler */
.visionneuse__boite { grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; }
.visionneuse__pole { margin-bottom: 6px; }
.visionneuse__detail:empty { display: none; }
.visionneuse__sous-titre { margin: 16px 0 8px; }
.visionneuse .creneaux { margin: 6px 0 4px; gap: 5px; }
.visionneuse .creneaux li { padding: 5px 10px; font-size: .86rem; }
.visionneuse__matchs { margin-top: 6px; font-size: .88rem; }
.visionneuse__resultats { margin-top: 10px; padding: .6em 1.15em; font-size: .8rem; }
.coachs { gap: 8px; }
.coach { padding: 9px 12px; gap: 10px; border-radius: 12px; align-items: center; }
.coach__avatar { flex: 0 0 34px; width: 34px; height: 34px; font-size: 1.05rem; }
.coach__corps { gap: 2px; }
.coach__corps strong { font-size: .95rem; line-height: 1.3; }
.coach__bouton { font-size: .82rem; gap: 6px; }
.coach__bouton svg { flex: 0 0 14px; width: 14px; height: 14px; }
.coach__vide { font-size: .8rem; }
/* trois entraîneurs ou plus : deux colonnes, sans les initiales */
.coachs:has(> :nth-child(3)) { grid-template-columns: 1fr 1fr; }
.coachs:has(> :nth-child(3)) .coach { padding: 8px 10px; }
.coachs:has(> :nth-child(3)) .coach__avatar { display: none; }
.coachs:has(> :nth-child(3)) .coach__corps strong { font-size: .88rem; }
.coachs:has(> :nth-child(3)) .coach__bouton { font-size: .76rem; }
.coachs:has(> :nth-child(3)) .coach__corps { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 10px; }
.coachs:has(> :nth-child(3)) .coach__corps strong { flex-basis: 100%; }
/* le mail devient une simple icône cliquable (son adresse reste lue par les lecteurs d'écran) */
.coachs:has(> :nth-child(3)) .coach__bouton[href^="mailto"] span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.coachs:has(> :nth-child(3)) .coach__bouton[href^="mailto"] svg { width: 16px; height: 16px; flex-basis: 16px; }
/* « coordonnées via le club » : inutile ici, le contact du club est juste en dessous */
.coachs:has(> :nth-child(3)) .coach__vide { display: none; }
.visionneuse__club { margin-top: 12px; padding-top: 10px; gap: 3px; font-size: .84rem; }
.visionneuse__compteur { margin-top: 10px; font-size: 1rem; }

@media (max-width: 960px) {
  .visionneuse { padding: 0; place-items: stretch; }
  .visionneuse__boite {
    grid-template-columns: 1fr;
    gap: 0;
    height: 100%;
    overflow-y: auto;
    align-content: start;
    padding: 76px 16px 30px;
  }
  .visionneuse__photo img { max-height: 58vh; max-height: 58dvh; margin: 0 auto; }
  .visionneuse__photo--logo img { width: min(70vw, 320px); padding: 30px; }
  .visionneuse__infos { max-height: none; overflow: visible; padding: 24px 4px 0; }
  .visionneuse__fleche { width: 42px; height: 42px; margin-top: -21px; }
  .visionneuse__fleche--prec { left: 10px; }
  .visionneuse__fleche--suiv { right: 10px; }
  .visionneuse__fermer { top: 14px; right: 14px; }
}
@media (max-width: 960px) and (min-width: 600px) {
  .visionneuse__boite { padding: 64px 22px 20px; }
  .visionneuse .visionneuse__photo img,
  .visionneuse .visionneuse__photo .visionneuse__cadre img { max-height: 44vh; max-height: 44dvh; }
  .visionneuse__infos { display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px; align-items: start; padding-top: 16px; }
  .visionneuse__entete,
  .visionneuse__compteur { grid-column: 1 / -1; }
  .visionneuse__entete { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
  .visionneuse__entete .visionneuse__pole { margin: 0; }
}

/* Sur les blocs d'appel (fond bleu), le bouton principal passe en blanc pour ressortir */
.appel .bouton--principal { background: var(--blanc); color: var(--accent-fonce); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .5); }
.appel .bouton--principal:hover { background: var(--gris-fond); color: var(--accent-fonce); }

/* =========================================================
   Créneaux d'entraînement et planning de la semaine
   Une couleur par gymnase, comme sur le planning papier
   ========================================================= */
:root {
  --salle-travet: #2f7de1;
  --salle-ferran: #6b7085;
  --salle-massaguel: #00891f;
  --salle-barral: #e0a42a;
}

.creneaux { list-style: none; margin: 10px 0 8px; padding: 0; display: grid; gap: 6px; }
.creneaux li {
  display: grid;
  grid-template-columns: 76px auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 10px;
  background: var(--gris-fond);
  border-left: 4px solid var(--salle-travet);
  font-size: .9rem;
}
.creneaux li[data-salle="ferran"] { border-left-color: var(--salle-ferran); }
.creneaux li[data-salle="massaguel"] { border-left-color: var(--salle-massaguel); }
.creneaux li[data-salle="barral"] { border-left-color: var(--salle-barral); }
.creneau__jour { font-weight: 800; color: var(--nuit); }
.creneau__heure { font-variant-numeric: tabular-nums; color: var(--texte); white-space: nowrap; }
.creneau__salle { justify-self: end; color: var(--texte-doux); font-size: .82rem; text-align: right; }
.equipe__matchs { margin-top: 4px; }

/* Dans la fiche plein écran (fond sombre) */
.creneaux--sombre li { background: rgba(255, 255, 255, .06); }
.creneaux--sombre .creneau__jour { color: var(--blanc); }
.creneaux--sombre .creneau__heure { color: rgba(255, 255, 255, .9); }
.creneaux--sombre .creneau__salle { color: rgba(255, 255, 255, .6); }
.visionneuse__matchs { margin: 10px 0 0; color: rgba(255, 255, 255, .75); font-size: .92rem; }

.legende-salles { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 20px; font-weight: 600; font-size: .92rem; color: var(--texte-doux); }
.legende-salles__item { display: inline-flex; align-items: center; gap: 8px; }
.puce-salle { width: 14px; height: 14px; border-radius: 4px; background: var(--salle-travet); }
.puce-salle--ferran { background: var(--salle-ferran); }
.puce-salle--massaguel { background: var(--salle-massaguel); }
.puce-salle--barral { background: var(--salle-barral); }

.planning {
  overflow-x: auto;
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  background: var(--blanc);
  -webkit-overflow-scrolling: touch;
}
.planning__tableau { width: 100%; min-width: 760px; border-collapse: collapse; }
.planning__tableau th,
.planning__tableau td { padding: 10px 12px; border-bottom: 1px solid var(--gris-ligne); text-align: left; vertical-align: middle; }
.planning__tableau thead th {
  background: var(--nuit);
  color: var(--blanc);
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: .05em;
  text-transform: capitalize;
}
.planning__tableau tbody tr:hover { background: var(--gris-fond); }
.planning__tableau tbody tr:last-child th,
.planning__tableau tbody tr:last-child td { border-bottom: 0; }
.planning__tableau tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  background: inherit;
  background-color: var(--blanc);
  border-right: 1px solid var(--gris-ligne);
  border-left: 4px solid var(--accent);
  width: 230px;
}
.planning__tableau tbody tr:hover th { background-color: var(--gris-fond); }
.planning__tableau tbody tr[data-pole="jeunes"] th { border-left-color: var(--vert); }
.planning__tableau tbody tr[data-pole="pour-tous"] th { border-left-color: var(--nuit); }
.planning__tableau tbody th button {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--nuit);
  text-align: left;
  cursor: pointer;
}
.planning__tableau tbody th button:hover { color: var(--accent); text-decoration: underline; }
.creneau-puce {
  display: inline-block;
  padding: .35em .7em;
  border-radius: 8px;
  background: var(--salle-travet);
  color: var(--blanc);
  font-size: .85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.creneau-puce--ferran { background: var(--salle-ferran); }
.creneau-puce--massaguel { background: var(--salle-massaguel); }
.creneau-puce--barral { background: var(--salle-barral); color: var(--nuit); }

@media (max-width: 600px) {
  .creneaux li { grid-template-columns: 70px 1fr; }
  .creneau__salle { grid-column: 1 / -1; justify-self: start; text-align: left; margin-top: -4px; }
  .planning__tableau tbody th { width: 150px; font-size: .9rem; }
}
.planning-indice { display: none; margin: 0 0 10px; font-size: .85rem; font-weight: 600; color: var(--accent); }
@media (max-width: 800px) { .planning-indice { display: block; } }

/* Sur téléphone, l'en-tête reste compact : le grand logo et le nom sont déjà dans le héros */
@media (max-width: 600px) {
  .page-accueil .entete:not(.est-defile) .marque img { width: 54px; height: 54px; }
  .page-accueil .entete:not(.est-defile) .marque__nom { font-size: 1.45rem; }
  .page-accueil .entete:not(.est-defile) .marque__nom small { font-size: .68rem; }
  .heros__logo { max-width: min(58vw, 230px); }
}

/* =========================================================
   Page Boutique (ventes HelloAsso)
   Le rose n'est utilisé que pour l'opération Octobre rose
   ========================================================= */
:root {
  --rose: #d6246e;
  --rose-fonce: #a3195b;
  --rose-clair: #fde7ef;
}

.raccourcis-boutique { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.raccourcis-boutique a {
  padding: .55em 1.1em;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .35);
  color: var(--blanc);
  font-weight: 700;
  font-size: .9rem;
  transition: background .2s ease, color .2s ease;
}
.raccourcis-boutique a:hover { background: var(--blanc); color: var(--nuit); }

.vente {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 50px;
  align-items: center;
  padding: 44px;
  border-radius: 28px;
  background: var(--blanc);
  box-shadow: var(--ombre-forte);
}
.vente__visuel {
  display: grid;
  place-items: center;
  min-height: 340px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--accent-fonce), var(--nuit-3));
  padding: 30px;
}
.vente__visuel img { max-height: 340px; width: auto; filter: drop-shadow(0 25px 40px rgba(0, 0, 0, .35)); }
.vente__logo { width: min(100%, 300px); animation: flotte 6s ease-in-out infinite; }
.vente h2 { color: var(--nuit); margin-bottom: .25em; }
.vente__accroche { font-size: 1.15rem; font-weight: 600; color: var(--texte); }
.vente__corps > p { color: var(--texte-doux); }
.vente__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.vente__defi { padding: 14px 18px; border-radius: 14px; background: var(--gris-fond); border-left: 4px solid var(--accent); }

.badge-vente {
  display: inline-block;
  padding: .35em .85em;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), .12);
  color: var(--accent-fonce);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.badge-vente--ouvert { background: rgba(var(--vert-rgb), .12); color: var(--vert-fonce); }
.badge-vente--ouvert::before { content: "● "; }
.badge-vente--bientot { background: var(--accent); color: var(--blanc); margin-bottom: 16px; font-size: .85rem; }

/* Variante Octobre rose */
.vente--rose { background: linear-gradient(135deg, var(--blanc) 55%, var(--rose-clair)); }
.vente--rose .vente__visuel {
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .35), transparent 50%),
    linear-gradient(135deg, var(--rose), var(--rose-fonce));
}
.vente--rose h2 { color: var(--rose-fonce); }
.vente--rose .badge-vente:not(.badge-vente--ouvert) { background: var(--rose-clair); color: var(--rose-fonce); }
.bouton--rose { background: var(--rose); color: var(--blanc); box-shadow: 0 12px 30px -10px rgba(214, 36, 110, .7); }
.bouton--rose:hover { background: var(--rose-fonce); color: var(--blanc); }

/* Variante chocolats : fond clair et chaud derrière les sachets */
.vente--choco .vente__visuel { background: linear-gradient(135deg, #fff5ea, #f2dcc6); }

.produits { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; gap: 12px; }
.produit {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 12px 18px 12px 12px;
  border-radius: 16px;
  background: var(--blanc);
  border: 1px solid var(--gris-ligne);
}
.produit img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; }
.produit__texte strong { display: block; color: var(--nuit); }
.produit__texte span { font-size: .9rem; color: var(--texte-doux); }
.produit__prix { font-family: var(--titre); font-size: 1.9rem; color: var(--rose-fonce); }

.gourmandises {
  list-style: none;
  margin: 40px 0 14px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr));
  gap: 18px;
}
.gourmandises li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 22px 18px;
  border-radius: var(--rayon);
  background: var(--blanc);
  box-shadow: var(--ombre);
  transition: transform .3s ease;
}
.gourmandises li:hover { transform: translateY(-6px); }
.gourmandises img { width: 124px; height: 100px; object-fit: contain; margin-bottom: 12px; filter: drop-shadow(0 8px 10px rgba(60, 30, 10, .18)); }
.gourmandises strong { color: var(--nuit); line-height: 1.25; }
.gourmandises span { font-size: .85rem; color: var(--texte-doux); margin: 4px 0 10px; }
.gourmandises em { margin-top: auto; font-style: normal; font-family: var(--titre); font-size: 1.7rem; color: var(--accent); }
.gourmandises li { position: relative; }
.gourmandises .gourmandise__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  margin: 0;
  padding: .3em .75em;
  border-radius: 999px;
  background: #a61e22;
  color: var(--blanc);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.gourmandises .gourmandise--cadeau { background: linear-gradient(160deg, var(--blanc) 40%, #f6e6cf); }

/* Chocolats : les deux façons de commander */
.commande-choco { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 40px; }
.commande-choco__voie {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 28px;
  border-radius: var(--rayon);
  background: var(--blanc);
  box-shadow: var(--ombre);
}
.commande-choco__voie h3 { color: var(--nuit); margin: 0; }
.commande-choco__voie p { color: var(--texte-doux); margin: 0 0 6px; }
.commande-choco__voie .bouton { margin-top: auto; }
.commande-choco__docs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; }
.doc-choco {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--gris-ligne);
  color: var(--nuit);
  font-weight: 700;
  transition: border-color .2s ease, transform .2s ease;
}
.doc-choco:hover { border-color: var(--accent); transform: translateY(-2px); }
.doc-choco svg { flex: 0 0 24px; width: 24px; height: 24px; color: var(--accent); }
.doc-choco small { display: block; font-weight: 400; font-size: .8rem; color: var(--texte-doux); }
@media (max-width: 760px) {
  .commande-choco { grid-template-columns: 1fr; }
  .commande-choco__voie { padding: 22px; }
}

.offre__icone {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(var(--accent-rgb), .15);
  color: var(--accent-clair);
  margin-bottom: 18px;
}
.offre__icone svg { width: 28px; height: 28px; }
.etapes--trois { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) {
  .vente { grid-template-columns: 1fr; padding: 24px; gap: 26px; }
  .vente__visuel { min-height: 240px; }
  .vente__visuel img { max-height: 240px; }
  .etapes--trois { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .gourmandises { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .gourmandises li { padding: 16px 10px; }
  .produit { grid-template-columns: 52px 1fr auto; gap: 12px; }
  .produit img { width: 52px; height: 52px; }
}
/* Fond blanc des photos produits fondu dans la carte */
.gourmandises img,
.vente--choco .vente__visuel img { mix-blend-mode: multiply; }
.vente--choco .vente__visuel img { filter: none; }

/* =========================================================
   Choix de la messagerie (clic sur une adresse e-mail)
   ========================================================= */
.messagerie { position: fixed; inset: 0; z-index: 200; }
.messagerie__fond { position: absolute; inset: 0; background: rgba(var(--nuit-rgb), .25); }
.messagerie__boite {
  position: absolute;
  width: 300px;
  padding: 10px;
  border-radius: 18px;
  background: var(--blanc);
  box-shadow: 0 30px 70px -20px rgba(var(--nuit-rgb), .55), 0 0 0 1px var(--gris-ligne);
  animation: messagerieEntree .18s ease-out;
}
@keyframes messagerieEntree { from { opacity: 0; transform: translateY(6px); } }
.messagerie__entete { padding: 8px 12px 12px; border-bottom: 1px solid var(--gris-ligne); margin-bottom: 6px; }
.messagerie__entete span { display: block; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--texte-doux); }
.messagerie__entete strong { display: block; color: var(--nuit); overflow-wrap: anywhere; }
.messagerie__option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-radius: 12px;
  background: none;
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  color: var(--texte);
  text-align: left;
  cursor: pointer;
}
.messagerie__option:hover,
.messagerie__option:focus-visible { background: var(--gris-fond); color: var(--accent-fonce); outline: none; }
.messagerie__option svg { flex: 0 0 20px; width: 20px; height: 20px; color: var(--accent); }
.messagerie__option small { display: block; font-size: .78rem; font-weight: 400; color: var(--texte-doux); }
.messagerie__option--principale { background: rgba(var(--accent-rgb), .08); }

/* Sur téléphone : panneau qui monte du bas de l'écran */
@media (max-width: 600px) {
  .messagerie__fond { background: rgba(var(--nuit-rgb), .5); }
  .messagerie__boite {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    padding: 14px 14px calc(18px + env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0;
    animation-name: messagerieMonte;
  }
  .messagerie__option { padding: 14px 12px; font-size: 1rem; }
}
@keyframes messagerieMonte { from { transform: translateY(100%); } }
@media (max-width: 500px) {
  .salle { padding: 22px 20px; }
  .salle__icone { display: none; }
}

/* En-tête : marges intérieures de la barre de menu */
.entete { padding: 0; }
.entete.est-defile,
.entete.est-plein { padding: 0; }
.entete__barre { padding: 18px 20px; transition: padding .3s ease; }
.entete.est-defile .entete__barre,
.entete.est-plein .entete__barre { padding-top: 10px; padding-bottom: 10px; }

/* =========================================================
   Page Mentions légales
   ========================================================= */
.legal {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  max-width: 1100px;
}
.legal__sommaire {
  position: sticky;
  top: 110px;
  padding: 24px 22px;
  border-radius: var(--rayon);
  background: var(--gris-fond);
  border-left: 4px solid var(--accent);
}
.legal__sommaire strong {
  display: block;
  margin-bottom: 10px;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-fonce);
}
.legal__sommaire ol { margin: 0; padding-left: 1.2em; font-size: .92rem; }
.legal__sommaire li { margin-bottom: 6px; }
.legal__sommaire a { color: var(--texte); }
.legal__sommaire a:hover { color: var(--accent); }
.legal__texte { min-width: 0; }
.legal__intro { font-size: 1.05rem; color: var(--texte); margin-bottom: 36px; }
.legal article { scroll-margin-top: 110px; padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid var(--gris-ligne); }
.legal article:last-child { border-bottom: 0; }
.legal h2 { font-size: clamp(1.8rem, 3vw, 2.3rem); color: var(--nuit); }
.legal h3 { font-family: var(--corps); font-size: 1rem; font-weight: 800; color: var(--accent-fonce); margin: 22px 0 6px; letter-spacing: 0; }
.legal p, .legal li { color: #34374d; }
.legal ul { margin: 0 0 1em; padding-left: 1.3em; }
.legal__maj { font-size: .9rem; color: var(--texte-doux) !important; font-style: italic; }
@media (max-width: 900px) {
  .legal { grid-template-columns: 1fr; gap: 30px; }
  .legal__sommaire { position: static; }
}

/* =========================================================
   Bandeau des communes en bas de page, au-dessus du pied de page
   Castres est volontairement plus grand que Massaguel
   ========================================================= */
.communes {
  background: var(--blanc);
  border-top: 1px solid var(--gris-ligne);
  padding: 26px 0;
}
.communes__barre {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px 50px;
}
.communes__texte {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.communes__logo { display: block; transition: transform .25s ease; }
.communes__logo:hover { transform: translateY(-3px); }
.communes__logo img { display: block; width: auto; height: auto; }
.communes__logo--castres img { height: 76px; }
.communes__logo--massaguel img { height: 60px; }
@media (max-width: 600px) {
  .communes__barre { gap: 14px 26px; }
  .communes__texte { flex-basis: 100%; text-align: center; }
  .communes__logo--castres img { height: 54px; }
  .communes__logo--massaguel img { height: 44px; }
}

/* =========================================================
   Contrat d'engagement républicain
   ========================================================= */
.cer { max-width: 1000px; }
.cer__intro p { color: #34374d; font-size: 1.02rem; }
.engagements {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.engagement {
  position: relative;
  padding: 30px 28px 24px 30px;
  border-radius: var(--rayon);
  background: var(--blanc);
  box-shadow: var(--ombre);
  border-top: 4px solid var(--accent);
}
.engagement:last-child { grid-column: 1 / -1; }
.engagement__numero {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-fonce));
  color: var(--blanc);
  font-family: var(--titre);
  font-size: 1.6rem;
}
.engagement h3 { color: var(--nuit); font-size: 1.6rem; }
.engagement p { color: var(--texte-doux); font-size: .95rem; margin-bottom: .7em; }
.cer__signature {
  margin-top: 34px;
  padding: 22px 26px;
  border-radius: var(--rayon);
  background: var(--gris-fond);
  border-left: 5px solid var(--accent);
  text-align: right;
}
.cer__signature p { margin: 0; color: var(--texte); }
@media (max-width: 800px) {
  .engagements { grid-template-columns: 1fr; }
  .cer__signature { text-align: left; }
}

/* Encart « Nos engagements » de la page Le club */
.engagements-club {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.engagement-club {
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  border-radius: var(--rayon);
  background: var(--blanc);
  box-shadow: var(--ombre);
  color: var(--texte);
  transition: transform .3s ease, box-shadow .3s ease;
}
a.engagement-club:hover { transform: translateY(-6px); box-shadow: var(--ombre-forte); color: var(--texte); }
.engagement-club--principal { background: linear-gradient(135deg, var(--accent-fonce), var(--nuit-3)); color: var(--blanc); }
a.engagement-club--principal:hover { color: var(--blanc); }
.engagement-club h3 { font-size: 1.7rem; color: inherit; }
.engagement-club p { font-size: .95rem; margin-bottom: 14px; opacity: .85; }
.engagement-club__lien { margin-top: auto; font-weight: 700; color: var(--accent); }
.engagement-club--principal .engagement-club__lien { color: var(--accent-clair); }
@media (max-width: 900px) { .engagements-club { grid-template-columns: 1fr; } }
.section--nuit .engagement-club { border: 1px solid rgba(255, 255, 255, .08); }
.section--nuit .engagement-club--principal { background: linear-gradient(135deg, var(--accent), var(--accent-fonce)); }
.section--nuit .engagement-club--principal .engagement-club__lien { color: var(--blanc); }
/* Cartes blanches sur fond sombre : texte foncé (le fond sombre met les paragraphes en blanc) */
.section--nuit .engagement-club:not(.engagement-club--principal) { color: var(--texte); }
.section--nuit .engagement-club:not(.engagement-club--principal) h3 { color: var(--nuit); }
.section--nuit .engagement-club:not(.engagement-club--principal) p { color: var(--texte-doux); opacity: 1; }
.section--nuit .engagement-club--principal p { color: rgba(255, 255, 255, .9); }

/* Lien « Calendrier et résultats » (poule sur le site de la FFvolley) */
.equipe__resultats {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 10px;
  padding: .5em 1em;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--blanc);
  color: var(--accent-fonce);
  font-size: .85rem;
  font-weight: 700;
  transition: background .2s ease, color .2s ease;
}
.equipe__resultats svg { width: 16px; height: 16px; }

/* Place actuelle au classement de la poule (ajoutée par equipes.js) */
.classement {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 8px 18px 8px 8px;
  border-radius: 14px;
  background: rgba(var(--accent-rgb), .07);
  border: 1px solid rgba(var(--accent-rgb), .18);
}
.classement__rang {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-fonce));
  color: var(--blanc);
  font-family: var(--titre);
  font-size: 1.45rem;
  line-height: 1;
  box-shadow: 0 6px 14px -6px rgba(var(--accent-rgb), .8);
}
.classement__rang sup { font-size: .5em; vertical-align: super; line-height: 0; }
.classement--or .classement__rang { background: linear-gradient(135deg, #f6d36b, #c99a1e); color: #4a3500; box-shadow: 0 6px 14px -6px rgba(201, 154, 30, .9); }
.classement--argent .classement__rang { background: linear-gradient(135deg, #e9edf2, #a9b2bd); color: #2f3a46; box-shadow: 0 6px 14px -6px rgba(110, 120, 135, .9); }
.classement--bronze .classement__rang { background: linear-gradient(135deg, #e8a971, #b06a35); color: #3d1f08; box-shadow: 0 6px 14px -6px rgba(176, 106, 53, .9); }
.classement__texte { font-size: .95rem; line-height: 1.3; color: var(--texte); white-space: nowrap; }
.classement__texte strong { color: var(--nuit); }
.classement__texte sup { font-size: .7em; line-height: 0; }
.classement + .equipe__resultats { margin-top: 10px; }
.equipe__resultats:hover { background: var(--accent); color: var(--blanc); }
.equipe__corps .equipe__resultats + .etiquette { margin-top: 14px; }
.visionneuse__resultats { margin-top: 16px; padding: .75em 1.3em; font-size: .85rem; }
.visionneuse__resultats[hidden] { display: none; }

/* Bandeau partenaires commun à toutes les pages */
.bandeau-partenaires { padding-top: 80px; padding-bottom: 80px; border-top: 1px solid var(--gris-ligne); }

/* Filet aux couleurs des deux communes en bas des bandeaux : 80 % bleu (Castres), 20 % vert (Massaguel) */
.heros__contenu::after,
.bandeau-page .conteneur::after {
  content: "";
  display: block;
  width: 150px;
  height: 4px;
  margin-top: 28px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--bleu-vif) 80%, var(--vert-vif) 80%);
}

/* ---------- Navigation au clavier ---------- */
/* Contour bien visible sur l'élément sélectionné avec la touche Tab */
:focus-visible { outline: 3px solid var(--accent-clair); outline-offset: 3px; }
#contenu:focus { outline: none; }
/* Lien « Aller au contenu » : invisible tant qu'on ne navigue pas au clavier */
.lien-evitement {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--blanc);
  color: var(--nuit);
  font-weight: 800;
  box-shadow: var(--ombre-forte);
  transform: translateY(-160%);
  transition: transform .2s ease;
}
.lien-evitement:focus { transform: none; }

/* ---------- Protection et intégrité (page Le club) ---------- */
#integrite .carte-info p { color: var(--texte-doux); }
#integrite .liste-coches { margin-bottom: 0; }
#integrite .liste-coches li { color: var(--texte); }
.engagement-integrite {
  padding: 30px 32px;
  border-radius: var(--rayon);
  background: var(--blanc);
  border-left: 5px solid var(--vert);
  box-shadow: var(--ombre);
}
.engagement-integrite h3 { color: var(--nuit); margin-bottom: 16px; }

/* ---------- Page Documents ---------- */
.carte-info .etiquette { margin-bottom: 14px; }
.carte-info p { color: var(--texte-doux); }
.lien-fleche { font-weight: 800; color: var(--bleu); }
.lien-fleche:hover { color: var(--vert-fonce); }

/* ---------- Questions fréquentes (page Inscriptions) ---------- */
.faq { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.faq__question {
  border-radius: 14px;
  background: var(--blanc);
  border: 1px solid var(--gris-ligne);
  box-shadow: 0 10px 30px -22px rgba(var(--nuit-rgb), .4);
}
.faq__question summary {
  position: relative;
  padding: 20px 56px 20px 24px;
  font-weight: 800;
  color: var(--nuit);
  cursor: pointer;
  list-style: none;
}
.faq__question summary::-webkit-details-marker { display: none; }
.faq__question summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 28px;
  height: 28px;
  margin-top: -14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(var(--vert-rgb), .12);
  color: var(--vert-fonce);
  font-size: 1.3rem;
  line-height: 1;
  transition: transform .25s ease;
}
.faq__question[open] summary::after { transform: rotate(45deg); }
.faq__question[open] { border-color: var(--accent-clair); }
.faq__question p { margin: 0; padding: 0 24px 22px; color: var(--texte-doux); }

/* ---------- Page Calendrier (matchs à domicile) ---------- */
.calendrier__filtres { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-bottom: 14px; }
.calendrier .filtres { margin-bottom: 0; }
.calendrier__legende { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px; font-size: .9rem; color: var(--texte-doux); }
.calendrier__mois {
  margin: 34px 0 14px;
  font-size: 1.7rem;
  color: var(--nuit);
  text-transform: capitalize;
}
.calendrier__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.match {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 16px 22px 16px 16px;
  border-radius: 16px;
  background: var(--blanc);
  border: 1px solid var(--gris-ligne);
  border-left: 5px solid var(--accent);
  box-shadow: 0 10px 30px -22px rgba(var(--nuit-rgb), .4);
}
.match__date {
  display: grid;
  justify-items: center;
  padding: 8px 4px;
  border-radius: 12px;
  background: var(--gris-fond);
  color: var(--texte-doux);
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
}
.match__date strong { font-family: var(--titre); font-size: 2.1rem; font-weight: 400; color: var(--nuit); line-height: 1; }
.match__infos { display: grid; gap: 3px; }
.match__tete { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.match__equipe { font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.match__affiche { font-weight: 800; color: var(--nuit); font-size: 1.05rem; }
.match__affiche em { font-style: normal; font-weight: 600; color: var(--texte-doux); }
.match__salle { font-size: .9rem; color: var(--texte-doux); }
.match__droite { display: grid; justify-items: end; gap: 6px; text-align: right; }
.match__heure, .match__score { font-family: var(--titre); font-size: 1.7rem; color: var(--nuit); line-height: 1; }
.match__score { color: var(--vert-fonce); }
.match__droite a { font-size: .85rem; font-weight: 700; }
.calendrier__vide { padding: 30px; border-radius: 16px; background: var(--gris-fond); color: var(--texte-doux); text-align: center; }
.calendrier__resultats { margin-top: 46px; }
.calendrier__resultats summary {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 999px;
  border: 2px solid var(--nuit);
  font-weight: 800;
  color: var(--nuit);
  cursor: pointer;
  list-style: none;
  margin-bottom: 18px;
}
.calendrier__resultats summary::-webkit-details-marker { display: none; }
.calendrier__resultats[open] summary { background: var(--nuit); color: var(--blanc); }
@media (max-width: 600px) {
  .match { grid-template-columns: 60px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .match__droite { grid-column: 2; justify-items: start; text-align: left; grid-auto-flow: column; align-items: center; gap: 14px; }
  .match__heure, .match__score { font-size: 1.4rem; }
}

/* Les champs du formulaire suivent la largeur de leur colonne, même sur les plus petits écrans */
.champ input, .champ select, .champ textarea { min-width: 0; width: 100%; }

/* =========================================================
   Octobre rose — thème appliqué automatiquement du 1er au 31 octobre
   (classe « octobre-rose » posée sur <html> par assets/js/octobre-rose.js)
   Le rose remplace le bleu et le vert ; le blanc et les fonds sombres restent.
   ========================================================= */
html.octobre-rose {
  --nuit: #1e0b18;
  --nuit-2: #2b1023;
  --nuit-3: #3f1533;
  --bleu: #c2185b;
  --bleu-vif: #e6007e;
  --accent: #e6007e;
  --accent-fonce: #b0005f;
  --accent-clair: #ff8cc6;
  --vert: #f06292;
  --vert-vif: #ffb3d6;
  --vert-fonce: #ad1457;
  --texte: #2a1424;
  --gris-fond: #fbf2f6;
  --gris-ligne: #f1dbe6;
  --nuit-rgb: 30, 11, 24;
  --accent-rgb: 230, 0, 126;
  --bleu-rgb: 194, 24, 91;
  --vert-rgb: 240, 98, 146;
  --vert-vif-rgb: 255, 179, 214;
}
.octobre-rose .appel::after { background-image: url("../img/logo-cmvb-octobre-rose-hd.png"); }

.octobre-rose__bandeau {
  padding: 34px 0;
  background: linear-gradient(100deg, #b0005f, #e6007e 60%, #ff5fa8);
  color: var(--blanc);
}
.octobre-rose__barre { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.octobre-rose__barre img { width: 90px; height: 90px; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .3)); }
.octobre-rose__barre div { flex: 1 1 320px; }
.octobre-rose__barre strong { display: block; font-family: var(--titre); font-weight: 400; font-size: 1.8rem; letter-spacing: .02em; line-height: 1.1; }
.octobre-rose__barre p { margin: 6px 0 0; color: rgba(255, 255, 255, .88); }
.octobre-rose__bandeau .bouton--principal { background: var(--blanc); color: #b0005f; box-shadow: none; }
.octobre-rose__bandeau .bouton--principal:hover { background: #ffe3f0; color: #8a004a; }

/* ---------- Quatre types de matchs, bien distincts ----------
   1. championnat à domicile : carte blanche, liseré de couleur (style de base de .match)
   2. championnat à l'extérieur : fond gris, discret
   3. Coupe de France à domicile : carte dorée, bien visible
   4. Coupe de France à l'extérieur : fond doré très pâle, contour en pointillés */
:root {
  --or: #c98a00;
  --or-fonce: #7a5300;
  --or-pale: #fff6df;
  --or-ligne: #ecd59a;
}
.match__type,
.match__coupe { font-weight: 800; text-transform: uppercase; }
.match__type {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), .12);
  color: var(--accent-fonce);
  font-size: .68rem;
  letter-spacing: .06em;
}
.match__coupe {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--or-ligne);
  color: var(--or-fonce);
  font-size: .68rem;
  letter-spacing: .04em;
}
.match__affiche strong, .match__plateau strong { font-weight: 800; color: var(--nuit); }
.match__forfait { font-size: .75rem; color: var(--texte-doux); }

/* 2. championnat à l'extérieur */
.match--championnat-exterieur {
  background: var(--gris-fond);
  border-color: transparent;
  border-left-color: var(--gris-ligne);
  box-shadow: none;
}
.match--championnat-exterieur .match__date { background: var(--blanc); }
.match--championnat-exterieur .match__equipe { color: var(--texte-doux); }
.match--championnat-exterieur .match__type { background: rgba(var(--nuit-rgb), .07); color: var(--texte-doux); }
.match--championnat-exterieur .match__affiche { font-weight: 600; color: var(--texte); }
.match--championnat-exterieur .match__heure,
.match--championnat-exterieur .match__score,
.match--championnat-exterieur .match__date strong { color: var(--texte-doux); }

/* 3. Coupe de France à domicile */
.match--coupe-domicile {
  background: linear-gradient(100deg, var(--or-pale), var(--blanc) 70%);
  border-color: var(--or-ligne);
  border-left-color: var(--or);
  box-shadow: 0 12px 30px -20px rgba(201, 138, 0, .55);
}
.match--coupe-domicile .match__date { background: var(--blanc); border: 1px solid var(--or-ligne); }
.match--coupe-domicile .match__equipe { color: var(--or-fonce); }
.match--coupe-domicile .match__type { background: var(--or); color: var(--blanc); }
.match--coupe-domicile .match__coupe { background: var(--blanc); }

/* 4. Coupe de France à l'extérieur */
.match--coupe-exterieur {
  background: #fdfaf2;
  border: 1px dashed var(--or-ligne);
  border-left: 5px dashed var(--or-ligne);
  box-shadow: none;
}
.match--coupe-exterieur .match__date { background: var(--blanc); }
.match--coupe-exterieur .match__equipe { color: var(--texte-doux); }
.match--coupe-exterieur .match__type { background: transparent; border: 1px solid var(--or-ligne); color: var(--or-fonce); }
.match--coupe-exterieur .match__affiche,
.match--coupe-exterieur .match__plateau { font-weight: 600; color: var(--texte); }
.match--coupe-exterieur .match__heure,
.match--coupe-exterieur .match__score,
.match--coupe-exterieur .match__date strong { color: var(--texte-doux); }

/* Tour de coupe en plateau : les matchs de la journée réunis dans le même bloc */
.match__plateau { list-style: none; margin: 4px 0 2px; padding: 0; display: grid; gap: 4px; }
.match__plateau li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .75);
}
.match__plateau .match__heure,
.match__plateau .match__score { font-size: 1.15rem; flex: 0 0 auto; }
.match__plateau .match__forfait { margin-left: 6px; }
.match__plateau li { flex-wrap: wrap; }
.match__plateau li > span:first-child { flex: 1 1 140px; min-width: 0; }
.match__infos, .match__infos > * { min-width: 0; }
.match--plateau .match__droite { align-self: start; }

/* Légende des quatre types */
.calendrier__legende { gap: 8px 18px; }
.calendrier__legende span { display: inline-flex; align-items: center; gap: 8px; }
.calendrier__pastille { flex: 0 0 22px; width: 22px; height: 14px; border-radius: 4px; }
.calendrier__pastille--championnat-domicile { background: var(--blanc); border: 1px solid var(--gris-ligne); border-left: 4px solid var(--accent); }
.calendrier__pastille--championnat-exterieur { background: var(--gris-fond); border: 1px solid transparent; border-left: 4px solid var(--gris-ligne); }
.calendrier__pastille--coupe-domicile { background: var(--or-pale); border: 1px solid var(--or-ligne); border-left: 4px solid var(--or); }
.calendrier__pastille--coupe-exterieur { background: #fdfaf2; border: 1px dashed var(--or-ligne); border-left: 4px dashed var(--or-ligne); }
@media (max-width: 360px) {
  .match { grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 12px 10px; }
  .match__plateau li { padding: 6px 8px; }
}

/* ---------- Les matchs à domicile, les plus visibles ----------
   Championnat (couleur du club) comme Coupe de France (or) : fond teinté, liseré épais,
   date en pastille pleine, ombre marquée. Les matchs à l'extérieur restent en retrait. */
.match--championnat-domicile,
.match--coupe-domicile { border-left-width: 7px; padding-top: 18px; padding-bottom: 18px; }
.match--championnat-domicile {
  background: linear-gradient(100deg, rgba(var(--accent-rgb), .10), var(--blanc) 60%);
  border-color: rgba(var(--accent-rgb), .30);
  border-left-color: var(--accent);
  box-shadow: 0 18px 36px -22px rgba(var(--accent-rgb), .7);
}
.match--championnat-domicile .match__date { background: var(--accent); color: rgba(255, 255, 255, .85); }
.match--championnat-domicile .match__date strong { color: var(--blanc); }
.match--championnat-domicile .match__type { background: var(--accent); color: var(--blanc); }
.match--championnat-domicile .match__heure { color: var(--accent-fonce); }
.match--coupe-domicile {
  background: linear-gradient(100deg, #ffefc4, var(--blanc) 60%);
  border-color: var(--or-ligne);
  border-left-color: var(--or);
  box-shadow: 0 18px 36px -22px rgba(201, 138, 0, .75);
}
.match--coupe-domicile .match__date { background: var(--or); border: 0; color: rgba(255, 255, 255, .9); }
.match--coupe-domicile .match__date strong { color: var(--blanc); }
.match--coupe-domicile .match__heure { color: var(--or-fonce); }
.match--championnat-domicile .match__affiche,
.match--coupe-domicile .match__plateau { font-size: 1.1rem; }

/* À l'extérieur : en retrait */
.match--championnat-exterieur,
.match--coupe-exterieur { padding-top: 12px; padding-bottom: 12px; }
.match--championnat-exterieur .match__date,
.match--coupe-exterieur .match__date { background: transparent; }
.match--championnat-exterieur .match__affiche,
.match--coupe-exterieur .match__plateau { font-size: .95rem; }
.match--championnat-exterieur .match__heure,
.match--championnat-exterieur .match__score,
.match--coupe-exterieur .match__heure,
.match--coupe-exterieur .match__score { font-size: 1.35rem; }

/* légende assortie */
.calendrier__pastille--championnat-domicile { background: rgba(var(--accent-rgb), .15); border: 1px solid rgba(var(--accent-rgb), .3); border-left: 5px solid var(--accent); }
.calendrier__pastille--coupe-domicile { background: #ffefc4; border-left-width: 5px; }

/* Coupe à l'extérieur : bloc plus sobre, pour ne pas concurrencer les matchs à domicile */
.match--coupe-exterieur { background: #fcfbf8; }
.match--coupe-exterieur .match__plateau li { background: transparent; padding: 3px 0; }
.match--coupe-exterieur .match__plateau .match__heure,
.match--coupe-exterieur .match__plateau .match__score { font-size: 1rem; color: var(--texte-doux); }
.match--coupe-exterieur .match__equipe,
.match--coupe-exterieur .match__salle { font-size: .85rem; }

/* ---------- Visionneuse : partenaires de l'équipe sous la photo agrandie ---------- */
.visionneuse__cadre { position: relative; }
.visionneuse__photo .visionneuse__cadre img {
  max-height: calc(100vh - 56px - var(--hauteur-sponsors, 0px));
  max-height: calc(100dvh - 56px - var(--hauteur-sponsors, 0px));
}
.visionneuse__sponsors {
  /* ne doit jamais élargir le cadre au-delà de la photo */
  width: 0;
  min-width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
  padding: 8px 14px 10px;
  border-radius: 0 0 20px 20px;
  background: var(--blanc);
  text-align: center;
}
.visionneuse__sponsors[hidden] { display: none; }
.visionneuse__sponsors-titre {
  display: block;
  margin-bottom: 6px;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.visionneuse__sponsors-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 20px; }
.visionneuse .visionneuse__sponsors img {
  display: block;
  width: auto;
  height: 30px;
  max-width: 96px;
  max-height: 30px;
  padding: 0;
  border-radius: 0;
  background: none;
  object-fit: contain;
  transition: transform .2s ease;
}
.visionneuse .visionneuse__sponsors a:hover img { transform: scale(1.08); }
/* la photo garde ses coins arrondis en haut, le bandeau prend ceux du bas */
.visionneuse__photo:has(.visionneuse__sponsors:not([hidden])) .visionneuse__cadre img { border-radius: 20px 20px 0 0; }
@media (max-width: 900px) {
  .visionneuse__photo .visionneuse__cadre img { max-height: 58vh; max-height: 58dvh; }
}
/* logos des partenaires plus petits sur tablette, encore plus sur téléphone */
@media (max-width: 1180px) {
  .visionneuse__sponsors { padding: 6px 10px 8px; }
  .visionneuse__sponsors-titre { font-size: .6rem; margin-bottom: 4px; }
  .visionneuse .visionneuse__sponsors img { height: 20px; max-height: 20px; max-width: 64px; }
  .visionneuse__sponsors-logos { gap: 5px 12px; }
}
@media (max-width: 600px) {
  .visionneuse__sponsors { padding: 5px 8px 7px; }
  .visionneuse__sponsors-titre { font-size: .55rem; letter-spacing: .1em; }
  .visionneuse .visionneuse__sponsors img { height: 15px; max-height: 15px; max-width: 48px; }
  .visionneuse__sponsors-logos { gap: 4px 9px; }
}

/* ---------- Photos d'équipes détourées ----------
   Les joueurs sont posés sur le décor « volley » du club (traînées lumineuses, filet, ballon),
   centré ; pendant Octobre rose, le décor passe au rose. Le nom de l'équipe (et ses années de
   naissance) s'affiche dans une bande étroite, centrée en bas de la photo. */
:root { --fond-equipes: url("../img/fond-equipes-club.webp?v=2"); }
html.octobre-rose { --fond-equipes: url("../img/fond-equipes-rose.webp?v=2"); }
.equipe__visuel,
.visionneuse__photo .visionneuse__cadre img,
.plein-ecran__photo img,
.photo-cadre img {
  background: var(--fond-equipes) center / cover no-repeat, var(--nuit);
}
.equipe__visuel,
.photo-cadre { container-type: inline-size; }
/* pastille légèrement inclinée : petit logo du club dans un rond blanc, nom de l'équipe,
   années de naissance dans une gélule verte (rose en octobre) */
/* logo recadré sur son cercle, sans marge transparente : rien de blanc autour dans la pastille */
:root { --logo-bande: url("../img/logo-cmvb-pastille.png"); }
html.octobre-rose { --logo-bande: url("../img/logo-cmvb-pastille-rose.png"); }
.bande-nom {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%) rotate(-2deg);
  display: inline-flex;
  align-items: center;
  gap: .4em;
  /* la pastille épouse toujours tout son contenu (logo, nom, années) */
  width: max-content;
  /* à droite, une marge plus grande que le rayon de l'arrondi : la dernière lettre ne touche jamais le bord */
  padding: .38em 1.15em .36em .2em;
  border-radius: 999px;
  /* couleur foncée sur toute la longueur + liseré clair : le bord de la pastille reste
     toujours visible, même sur la partie claire ou colorée du décor */
  background: linear-gradient(120deg, #0f3570 0%, var(--bleu) 100%);
  border: .09em solid rgba(255, 255, 255, .6);
  font-family: "Fredoka", var(--corps);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--blanc);
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
  pointer-events: none;
}
.bande-nom::before {
  content: "";
  /* largeur donnée explicitement : Firefox l'utilise pour mesurer la pastille (avec « flex » seul,
     il comptait le logo pour zéro et le texte débordait d'autant à droite) */
  flex: none;
  width: 1.6em;
  height: 1.6em;
  /* le logo, plus haut que le texte, prend presque toute la hauteur de la pastille sans l'agrandir */
  margin: -.24em 0;
  border-radius: 50%;
  background: var(--logo-bande) center / 100% no-repeat;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
/* avec les années, la gélule (arrondie elle aussi) se loge dans l'arrondi de la pastille,
   avec le même espace en haut, en bas et à droite */
.bande-nom:has(.bande-nom__annees) { padding-right: .43em; }
.bande-nom__annees {
  flex: none;
  padding: .28em .55em .24em;
  border-radius: 999px;
  background: var(--vert);
  font-family: var(--corps);
  font-weight: 700;
  font-size: .74em;
  letter-spacing: .04em;
}
/* Octobre rose : même contraste que la version bleue (pastille plus foncée que le décor,
   gélule claire bien lisible) */
html.octobre-rose .bande-nom { background: linear-gradient(120deg, #4f062d 0%, #8a0a4f 100%); }
html.octobre-rose .bande-nom__annees { background: var(--vert-vif); color: #8a004a; }
/* taille de départ ; le script la recalcule ensuite d'après la largeur de la photo */
.equipe__visuel .bande-nom { font-size: .58rem; }
.photo-cadre .bande-nom { font-size: .62rem; }
/* bandeau titre (fiche d'équipe et cartes) : le même bandeau, à l'horizontale, à sa place dans le texte ;
   s'il ne tient pas en entier, le script le réduit juste ce qu'il faut */
.bande-nom--titre {
  position: static;
  transform: none;
  max-width: none;
  line-height: 1.15;
  color: var(--blanc);
  text-transform: uppercase;
}
.visionneuse__infos .bande-nom--titre { font-size: clamp(1rem, 1.4vw, 1.2rem); margin: .3em 0 .2em; }
.equipe__corps .bande-nom--carte { font-size: 1.02rem; margin: 0 0 .7em; color: var(--blanc); }
/* l'étiquette du haut et le voile sombre du bas ne servent plus : tout est dans la bande */
.equipe__visuel::after,
.equipe__niveau,
.visionneuse__niveau,
.photo-cadre__badge { display: none; }
/* loupe « agrandir » : au centre, au survol seulement */
.equipe[role="button"] .equipe__visuel::before { top: 50%; left: 50%; margin: -21px 0 0 -21px; }
@media (hover: none) {
  .equipe[role="button"] .equipe__visuel::before { display: none; }
}

/* ---------- Photo d'équipe seule en plein écran, avec zoom ---------- */
.visionneuse__cadre img { cursor: zoom-in; }
.visionneuse__agrandir {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 12px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(var(--nuit-rgb), .65);
  color: var(--blanc);
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .2s ease, transform .2s ease;
}
.visionneuse__agrandir:hover { background: var(--accent); transform: scale(1.08); }
.visionneuse__agrandir svg { width: 20px; height: 20px; }
.visionneuse__photo--logo .visionneuse__agrandir { display: none; }

.plein-ecran {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: #05040f;
  opacity: 0;
  transition: opacity .2s ease;
  touch-action: none;
}
.plein-ecran.ouvert { opacity: 1; }
.plein-ecran[hidden] { display: none; }
.plein-ecran__scene {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: zoom-in;
  user-select: none;
}
.plein-ecran.zoome .plein-ecran__scene { cursor: grab; }
.plein-ecran.zoome .plein-ecran__scene:active { cursor: grabbing; }
.plein-ecran__photo { position: relative; transform-origin: center; will-change: transform; }
.plein-ecran__photo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100vw;
  max-height: 100vh;
  max-height: 100dvh;
  pointer-events: none;
}
.plein-ecran__photo--logo img { width: min(100vw, 160vh); padding: 12vh 0; object-fit: contain; }
.plein-ecran__bande { font-size: clamp(.62rem, 1.1vw, 1.2rem); }
.plein-ecran__outils {
  position: absolute;
  z-index: 2;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(var(--nuit-rgb), .7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.plein-ecran__outils button {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: var(--blanc);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.plein-ecran__outils button:hover { background: var(--accent); }
.plein-ecran__fermer { margin-left: 6px; }
.plein-ecran__niveau { min-width: 56px; text-align: center; font-weight: 700; font-size: .9rem; color: var(--blanc); }
.plein-ecran__aide {
  position: absolute;
  z-index: 2;
  left: 16px;
  top: 22px;
  margin: 0;
  padding: .45em 1em;
  border-radius: 999px;
  background: rgba(var(--nuit-rgb), .65);
  color: rgba(255, 255, 255, .8);
  font-size: .82rem;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .3s ease;
}
.plein-ecran.zoome .plein-ecran__aide { opacity: 0; }
@media (max-width: 600px) {
  .plein-ecran__aide { top: 74px; right: 16px; white-space: normal; text-align: center; font-size: .75rem; }
  .plein-ecran__outils button { width: 38px; height: 38px; }
}

/* ---------- Accueil : le week-end du CMVB ----------
   Résultats du dernier week-end et matchs du suivant, côte à côte ; les matchs à domicile sont mis en avant */
.wk { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 24px; align-items: start; }
.wk__colonne { min-width: 0; padding: 24px 24px 20px; border-radius: var(--rayon); background: var(--blanc); box-shadow: var(--ombre); }
.wk__titre { margin: 0; color: var(--nuit); }
.wk__periode { margin: 2px 0 16px; color: var(--texte-doux); font-size: .92rem; }
.wk__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wk__match {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--gris-fond);
  border-left: 4px solid transparent;
}
.wk__match--domicile { border-left-color: var(--accent); background: rgba(var(--accent-rgb), .08); }
/* Coupes et Challenges : le doré du calendrier, plein à domicile, plus discret à l'extérieur */
.wk__match--coupe-domicile { border-left-color: #c98a00; background: linear-gradient(100deg, #fff6df, #fff 70%); }
.wk__match--coupe-exterieur { border-left-color: #ecd59a; background: #fcfbf8; }
.wk__match--plateau { grid-template-columns: 48px minmax(0, 1fr); }
.wk__tete { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.wk__match--coupe .wk__equipe { color: #7a5300; }
.wk__match--coupe .wk__lieu { border: 1px solid #ecd59a; background: transparent; color: #7a5300; }
.wk__match--coupe-domicile .wk__lieu { border-color: #c98a00; background: #c98a00; color: var(--blanc); }
.wk__match--coupe .wk__jour strong { color: #7a5300; }
.wk__plateau { list-style: none; margin: 5px 0 3px; padding: 0; display: grid; gap: 4px; }
.wk__plateau li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 9px; border: 1px solid #ecd59a; border-radius: 9px; background: rgba(255, 255, 255, .8); }
.wk__plateau .wk__heure { color: #7a5300; }
.wk__jour { display: grid; justify-items: center; line-height: 1.05; color: var(--texte-doux); font-size: .7rem; font-weight: 700; text-transform: uppercase; }
.wk__jour strong { font-family: var(--titre); font-size: 1.7rem; font-weight: 400; color: var(--nuit); }
.wk__infos { display: grid; gap: 2px; min-width: 0; }
.wk__equipe { font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.wk__coupe { display: inline-block; margin-left: 4px; padding: .1em .55em; border: 1px solid #ecd59a; border-radius: 999px; background: var(--blanc); color: #7a5300; font-size: .9em; letter-spacing: .03em; text-transform: none; }
.wk__tete .wk__coupe { margin-left: 0; }
.wk__coupe { padding: 2px 8px; font-size: .68rem; font-weight: 800; letter-spacing: .02em; line-height: 1.35; text-transform: uppercase; }
.wk__match--coupe .wk__lieu { padding: 2px 8px; font-size: .68rem; line-height: 1.35; }
.wk__plateau .wk__heure--attente { text-align: right; }
.wk__adversaire { font-weight: 700; color: var(--nuit); overflow-wrap: break-word; }
.wk__adversaire em { font-style: normal; font-weight: 500; color: var(--texte-doux); }
.wk__salle { font-size: .82rem; color: var(--texte-doux); }
.wk__fin { display: grid; justify-items: end; gap: 3px; text-align: right; }
.wk__score { font-family: var(--titre); font-size: 1.45rem; line-height: 1; padding: .18em .5em; border-radius: 10px; color: var(--blanc); white-space: nowrap; }
.wk__score--victoire { background: var(--vert); }
.wk__score--defaite { background: var(--texte-doux); }
.wk__score--nul { background: var(--bleu); }
.wk__issue { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-doux); }
.wk__attente { font-size: .8rem; font-style: italic; color: var(--texte-doux); }
.wk__lieu { padding: .2em .6em; border-radius: 999px; background: var(--blanc); color: var(--texte-doux); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.wk__match--domicile .wk__lieu { background: var(--accent); color: var(--blanc); }
.wk__heure { font-weight: 800; color: var(--nuit); white-space: nowrap; }
.wk__heure--attente { font-size: .78rem; font-weight: 600; font-style: italic; color: var(--texte-doux); white-space: normal; max-width: 9em; }
.wk__vide { margin: 0; padding: 22px; border-radius: 14px; background: var(--gris-fond); color: var(--texte-doux); text-align: center; }
.wk__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 26px; }
.wk__maj { margin: 0; font-size: .85rem; color: var(--texte-doux); }
@media (max-width: 520px) {
  .wk__colonne { padding: 18px 14px 14px; }
  .wk__match { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px; padding: 9px 10px; }
  .wk__score { font-size: 1.25rem; }
  .wk__coupe { display: block; width: fit-content; margin: 3px 0 1px; white-space: nowrap; font-size: .82em; }
}

/* =========================================================
   ORGANIGRAMME (page Le club, section #bureau)
   Données et construction : assets/js/organigramme.js
   Toutes les classes commencent par « orga- ».
   ========================================================= */
/* ================= COULEURS ================= */
.orga {
  --orga-bleu: var(--bleu, #215ca8);
  --orga-vert: var(--vert, #00891f);
  --orga-vert-clair: #b8ffc5;
  --orga-bleu-clair: #b8cfff;
  --orga-vert-vif: var(--vert-vif, #3cc85a);
  --orga-nuit: var(--nuit, #0b0a1f);
  --orga-texte: var(--texte, #1b1a2e);
  --orga-doux: var(--texte-doux, #5b5f76);
  --orga-trait: rgba(255, 255, 255, .78);
  /* Fonds du site : sur le site, --fond-equipes et --fond-fiche existent déjà
     (et passent en rose pendant Octobre rose) ; ici, les copies du dossier img/ */
  --orga-fond: var(--fond-equipes, url("../img/fond-equipes-club.webp?v=2"));
  --orga-fond-fiche: var(--fond-fiche, url("../img/fond-fiche-club.webp"));

  position: relative;
  padding: 56px 24px 64px;
  /* le décor du site (ballons, vagues, rayons), avec deux halos et un léger voile pour la lisibilité */
  background:
    radial-gradient(ellipse 60% 40% at 15% 0%, rgba(var(--vert-vif-rgb, 60, 200, 90), .28), transparent 70%),
    radial-gradient(ellipse 55% 45% at 90% 100%, rgba(var(--vert-vif-rgb, 60, 200, 90), .22), transparent 70%),
    linear-gradient(180deg, rgba(11, 10, 31, .10), rgba(11, 10, 31, .35)),
    var(--orga-fond) center / cover no-repeat,
    var(--orga-bleu);
  color: var(--orga-texte);
  overflow: hidden;
}
/* Sur ordinateur, le décor reste en place pendant le défilement */
@media (hover: hover) and (min-width: 1024px) {
  .orga { background-attachment: scroll, scroll, scroll, fixed, scroll; }
}
.orga *, .orga *::before, .orga *::after { box-sizing: border-box; }

.orga-contenu {
  position: relative;
  z-index: 2;
  max-width: 1480px;
  margin: 0 auto;
}

/* ================= TITRES ================= */
.orga-titre {
  margin: 0 0 6px;
  text-align: center;
  font-family: var(--titre, inherit);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.05;
  color: #fff;
  text-shadow: 0 3px 18px rgba(11, 10, 31, .45);
}
.orga-titre span { color: var(--orga-vert-vif); }
.orga-sous-titre {
  margin: 0 0 44px;
  text-align: center;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
}
.orga-etiquette {
  display: table;
  margin: 0 auto 14px;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  text-align: center;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orga-bleu);
}

/* ================= NIVEAUX ================= */
.orga-niveau {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 28px;
  margin: 0 auto 52px;
}
.orga-niveau--direction { gap: 18px 72px; }
/* Bureau : 4 cartes sur une ligne, puis 2 × 2 (jamais 3 + 1), puis 1 colonne */
.orga-niveau--bureau {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1120px;
}
.orga-niveau--bureau .orga-carte { min-width: 0; }
@media (max-width: 1060px) { .orga-niveau--bureau { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 620px; } }
.orga-niveau--admin .orga-carte { width: auto; max-width: 340px; }

/* ================= CARTES (aspect d'origine) ================= */
.orga-carte {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 230px;
  padding: 12px 16px;
  font: inherit;
  line-height: 1.35;
  text-align: left;
  color: var(--orga-bleu);
  background: #fff;
  border: 2px solid var(--orga-bleu);
  border-radius: 16px;
  box-shadow: 0 10px 24px -18px rgba(11, 10, 31, .45);
  cursor: pointer;
  transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.orga-carte:hover,
.orga-carte:focus-visible {
  background: var(--orga-bleu);
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 16px 30px -16px rgba(11, 10, 31, .6);
  outline: none;
}
.orga-carte:focus-visible { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--orga-vert); }

.orga-carte__texte { display: flex; flex-direction: column; min-width: 0; }
.orga-carte__role { font-weight: 800; line-height: 1.2; }
.orga-carte__nom {
  display: block;
  margin-top: 2px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--orga-vert);
  transition: color .25s ease;
}
.orga-carte:hover .orga-carte__nom,
.orga-carte:focus-visible .orga-carte__nom { color: var(--orga-vert-clair); }

.orga-carte--direction { min-width: 270px; padding: 16px 22px; }
.orga-carte--direction .orga-carte__role { font-size: 1.15rem; }
.orga-carte--direction .orga-photo { width: 64px; height: 64px; }

/* ================= PHOTOS ================= */
.orga-photos { display: flex; flex-shrink: 0; }
.orga-photos .orga-photo + .orga-photo { margin-left: -12px; }
.orga-photo {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid var(--orga-bleu);
  background: linear-gradient(135deg, var(--orga-bleu), var(--orga-vert));
  color: #fff;
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .02em;
  transition: transform .3s ease, box-shadow .3s ease;
}
.orga-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.orga-carte:hover .orga-photo,
.orga-carte:focus-visible .orga-photo {
  border-color: #fff;
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(11, 10, 31, .35);
}

/* ================= POLES ================= */
.orga-poles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 28px 18px;
  align-items: start;
}
.orga-pole { display: flex; flex-direction: column; }

.orga-carte--pole {
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
  width: 100%;
  padding: 16px 14px 14px;
}
.orga-carte--pole .orga-carte__texte { align-items: center; }
.orga-carte__nom + .orga-carte__nom { margin-top: 0; }
.orga-carte--pole .orga-carte__role { font-size: 1.05rem; }
.orga-missions {
  margin: 10px 0 0;
  padding: 10px 0 0;
  width: 100%;
  list-style: none;
  border-top: 1px dashed currentColor;
  font-size: .82rem;
  line-height: 1.35;
  text-align: left;
  color: var(--orga-doux);
  transition: color .25s ease;
}
.orga-missions li { position: relative; padding-left: 14px; }
.orga-missions li + li { margin-top: 4px; }
.orga-missions li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orga-vert);
}
.orga-carte:hover .orga-missions,
.orga-carte:focus-visible .orga-missions { color: rgba(255, 255, 255, .9); }

/* Sous-responsables : petite branche à gauche, comme un arbre */
.orga-branches {
  position: relative;
  margin: 0;
  padding: 14px 0 0 22px;
  list-style: none;
}
.orga-branches::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 0;
  bottom: 26px;
  width: 2px;
  background: var(--orga-trait);
  border-radius: 2px;
}
.orga-branches li { position: relative; }
.orga-branches li + li { margin-top: 10px; }
.orga-branches li::before {
  content: "";
  position: absolute;
  left: -13px;
  top: 50%;
  width: 13px;
  height: 2px;
  background: var(--orga-trait);
}
.orga-branches .orga-carte { width: 100%; min-width: 0; padding: 9px 12px; gap: 10px; }
.orga-branches .orga-photo { width: 42px; height: 42px; font-size: .8rem; }
.orga-branches .orga-carte__role { font-size: .92rem; }
.orga-branches .orga-carte__nom { font-size: .82rem; }
/* Carte à plusieurs personnes : photos au-dessus, un nom par ligne en dessous */
.orga-carte--multi { flex-direction: column; text-align: center; }
.orga-carte--multi .orga-carte__texte { align-items: center; }
.orga-carte--multi .orga-carte__nom { white-space: nowrap; }
/* au-delà de 3 personnes, les photos se chevauchent davantage pour tenir dans la carte */
.orga-carte--multi .orga-photos .orga-photo + .orga-photo { margin-left: -14px; }
.orga-branches .orga-carte__role { overflow-wrap: anywhere; }

/* ================= CONSEIL D'ADMINISTRATION ================= */
.orga-ca {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 22px 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .12);
  border: 1.5px solid rgba(255, 255, 255, .35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  text-align: center;
}
.orga-ca p { margin: 0 0 14px; font-size: .9rem; color: rgba(255, 255, 255, .85); }
.orga-ca ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.orga-ca li {
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid var(--orga-bleu);
  font-size: .86rem;
  font-weight: 700;
  color: var(--orga-bleu);
}
.orga-ca li.orga-ca__bureau { background: var(--orga-bleu); border-color: #fff; color: #fff; }

/* ================= ASSEMBLEE GENERALE ================= */
.orga-ag {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 28px;
  border-radius: 999px;
  background: #fff;
  border: 2px solid var(--orga-vert);
  box-shadow: 0 10px 24px -18px rgba(11, 10, 31, .45);
  text-align: center;
}
.orga-ag strong { font-size: 1.05rem; font-weight: 800; color: var(--orga-bleu); }
.orga-ag span { font-size: .85rem; font-weight: 600; color: var(--orga-doux); }

/* ================= CADRE DU BUREAU ================= */
.orga-cadre {
  max-width: 1180px;
  margin: 0 auto 52px;
  padding: 18px 24px 26px;
  border-radius: 26px;
  background: rgba(255, 255, 255, .08);
  border: 1.5px solid rgba(255, 255, 255, .28);
}
.orga-cadre .orga-etiquette { margin-top: -32px; }
.orga-cadre .orga-niveau:last-child { margin-bottom: 0; }
.orga-cadre .orga-niveau--direction { margin-bottom: 40px; }

/* ================= REFERENTS (transversaux) ================= */
.orga-referents {
  max-width: 1100px;
  margin: 56px auto 0;
  padding: 22px 24px 24px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .12);
  border: 1.5px dashed rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  text-align: center;
}
.orga-referents p { margin: 0 0 16px; font-size: .9rem; color: rgba(255, 255, 255, .85); }
.orga-referents__cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.orga-referents__cartes .orga-carte { min-width: 0; }

.orga-aide {
  margin: 26px 0 0;
  text-align: center;
  font-size: .85rem;
  color: rgba(255, 255, 255, .8);
}

/* ================= TRAITS DE L'ARBRE (SVG) ================= */
.orga-traits {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
.orga-traits path {
  fill: none;
  stroke: var(--orga-trait);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ================= FENETRE (modale) ================= */
.orga-modale {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(11, 10, 31, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.orga-modale.est-ouverte { display: flex; }
.orga-fiche {
  position: relative;
  width: 100%;
  max-width: 600px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 40px 32px 34px;
  border-radius: 32px;
  text-align: center;
  color: #fff;
  /* même décor que les fiches agrandies du site, avec un voile pour la lisibilité */
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255, 255, 255, .16), transparent 70%),
    linear-gradient(165deg, rgba(11, 10, 31, .05) 0%, rgba(11, 10, 31, .45) 100%),
    var(--orga-fond-fiche) center / cover no-repeat,
    linear-gradient(135deg, var(--orga-bleu), var(--orga-vert));
  border: 1.5px solid rgba(255, 255, 255, .25);
  box-shadow: 0 35px 80px rgba(0, 0, 0, .45);
  animation: orga-zoom .25s ease-out;
}
@keyframes orga-zoom {
  from { transform: scale(.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.orga-fiche__logo {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 72px;
  height: 72px;
  object-fit: contain;
}
.orga-fiche__fermer {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  opacity: .85;
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
}
.orga-fiche__fermer:hover,
.orga-fiche__fermer:focus-visible { opacity: 1; transform: scale(1.1); background: rgba(255, 255, 255, .15); outline: none; }
.orga-fiche__role {
  margin: 34px 0 20px;
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
}
.orga-fiche__personnes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px 34px;
}
.orga-fiche__personne { flex: 1 1 200px; max-width: 260px; }
.orga-fiche__photo {
  width: 128px;
  height: 128px;
  margin: 8px auto 20px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orga-bleu), var(--orga-vert));
  box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--orga-vert-vif), 0 18px 40px -12px rgba(11, 10, 31, .6);
  font-size: 2.2rem;
  font-weight: 800;
  transition: transform .3s ease, box-shadow .3s ease;
}
.orga-fiche__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.orga-fiche__photo:hover { transform: scale(1.04); }
.orga-fiche h2 { margin: 0 0 8px; font-size: 2rem; line-height: 1.1; color: #fff; }
.orga-fiche__contact {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  margin: 6px 0 0;
  font-size: .95rem;
  word-break: break-word;
}
.orga-icone { width: 16px; height: 16px; flex-shrink: 0; margin-top: .2em; opacity: .9; }
.orga-fiche__contact a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.orga-fiche__missions {
  display: inline-block;
  margin: 24px 0 0;
  padding: 16px 20px 16px 36px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .12);
  text-align: left;
  font-size: .92rem;
  line-height: 1.45;
}
.orga-fiche__missions li + li { margin-top: 4px; }
/* Fiche à plus de deux personnes : bulles plus petites, sur trois colonnes */
.orga-fiche--groupe { max-width: 680px; }
.orga-fiche--groupe .orga-fiche__personnes { gap: 18px 22px; }
.orga-fiche--groupe .orga-fiche__personne { flex: 0 1 180px; }
.orga-fiche--groupe .orga-fiche__photo { width: 92px; height: 92px; margin: 6px auto 14px; font-size: 1.6rem; }
.orga-fiche--groupe h2 { font-size: 1.35rem; }
.orga-fiche--groupe .orga-fiche__contact { font-size: .85rem; }
.orga-fiche__general { margin: 22px 0 0; font-size: .85rem; color: rgba(255, 255, 255, .85); }

/* ================= PETITS ECRANS ================= */
@media (max-width: 640px) {
  .orga { padding: 36px 14px 44px; }
  .orga-niveau { margin-bottom: 40px; }
  .orga-carte,
  .orga-carte--direction { min-width: 0; width: 100%; max-width: 360px; }
  .orga-niveau--bureau { grid-template-columns: 1fr; max-width: 360px; }
  .orga-poles { max-width: 360px; margin: 0 auto; }
  .orga-cadre { padding: 18px 12px 20px; }
  .orga-ag { border-radius: 20px; padding: 12px 18px; }
  .orga-referents { padding: 20px 14px; }
  .orga-fiche { padding: 36px 20px 28px; border-radius: 24px; }
  .orga-fiche__logo { width: 52px; height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .orga *, .orga-fiche { animation: none !important; transition: none !important; }
}

/* ---------- Calendrier sur téléphone ----------
   Une seule colonne : la date passe sur une ligne au-dessus et laisse toute la largeur aux textes ;
   l'horaire et le lien FFvolley ferment la carte. Dans le bloc du week-end, le lieu et l'heure passent
   sous les textes : quelle que soit la longueur d'un nom, ils ne peuvent plus le chevaucher. */
@media (max-width: 600px) {
  .match,
  .match--championnat-domicile,
  .match--coupe-domicile,
  .match--championnat-exterieur,
  .match--coupe-exterieur { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 14px 12px 13px; }
  .match__date {
    display: inline-flex;
    justify-self: start;
    align-items: baseline;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 9px;
    font-size: .78rem;
  }
  .match__date strong { font-size: 1.3rem; }
  .match--championnat-exterieur .match__date,
  .match--coupe-exterieur .match__date { padding-left: 0; }
  .match--coupe-exterieur { border-left-style: solid; border-left-width: 4px; }
  .match__infos { gap: 5px; }
  .match__tete--coupe .match__equipe { flex-basis: 100%; }
  .match__type, .match__coupe { padding: 2px 8px; font-size: .66rem; letter-spacing: .02em; line-height: 1.35; }
  .match__affiche,
  .match--championnat-domicile .match__affiche,
  .match--championnat-exterieur .match__affiche { font-size: 1rem; line-height: 1.35; }
  .match__salle,
  .match--coupe-exterieur .match__salle { font-size: .8rem; line-height: 1.35; }
  /* matchs d'un même tour : un par ligne, le texte à gauche, l'horaire ou le score à droite */
  .match__plateau,
  .match--coupe-domicile .match__plateau,
  .match--coupe-exterieur .match__plateau { margin: 3px 0; gap: 4px; font-size: .95rem; line-height: 1.35; }
  .match__plateau li,
  .match--coupe-exterieur .match__plateau li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 7px 9px;
    background: rgba(255, 255, 255, .8);
    border: 1px solid var(--or-ligne);
    border-radius: 9px;
  }
  .match__plateau .match__forfait { grid-column: 1 / -1; margin: 0; }
  .match__plateau .match__heure,
  .match__plateau .match__score,
  .match--coupe-exterieur .match__plateau .match__heure,
  .match--coupe-exterieur .match__plateau .match__score { font-size: 1.15rem; }
  /* pied de la carte : horaire à gauche, lien FFvolley à droite */
  .match__droite { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 14px; padding-top: 7px; border-top: 1px solid rgba(var(--nuit-rgb), .08); text-align: left; }
  .match__droite a { margin-left: auto; }
  .match .match__heure--attente,
  .match .match__plateau .match__heure--attente,
  .match--coupe-exterieur .match__plateau .match__heure--attente {
    font-family: var(--corps);
    font-size: .78rem;
    font-style: italic;
    font-weight: 600;
    line-height: 1.25;
  }
  .match .match__plateau .match__heure--attente { max-width: 5.5em; text-align: right; }

  /* bloc du week-end : même présentation que le calendrier */
  .wk__match,
  .wk__match--plateau { grid-template-columns: minmax(0, 1fr); gap: 6px; align-items: start; padding: 11px 13px 11px 12px; }
  .wk__jour { display: inline-flex; justify-self: start; align-items: baseline; gap: 5px; font-size: .74rem; }
  .wk__jour strong { font-size: 1.25rem; line-height: 1; }
  .wk__fin { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; padding-top: 6px; border-top: 1px solid rgba(var(--nuit-rgb), .08); text-align: left; }
  .wk__tete .wk__equipe { flex-basis: 100%; }
  .wk__tete .wk__coupe { display: inline-block; margin: 0; font-size: .66rem; }
  .wk__match--coupe .wk__lieu { font-size: .66rem; }
  .wk__plateau { font-size: .95rem; line-height: 1.35; }
  .wk__plateau .wk__heure--attente { max-width: 5.5em; font-size: .76rem; text-align: right; }
  .wk__heure--attente { max-width: none; }
  .wk__score { font-size: 1.15rem; }
  .wk__coupe { max-width: 100%; white-space: normal; }
  .match__plateau li > span:first-child, .wk__adversaire { overflow-wrap: anywhere; }
}

/* ---------- Page Bilan de la saison (remplie par bilan.js) ---------- */
.wk__liens { display: flex; flex-wrap: wrap; gap: 10px; }
.bilan__introduction { font-weight: 600; color: var(--texte); }
.bilan__total { margin-bottom: 26px; }
.bilan__podiums { margin-bottom: 26px; padding: 18px 22px; border: 1px solid #ecd59a; border-left: 5px solid #c98a00; border-radius: var(--rayon); background: linear-gradient(100deg, #fff6df, #fff 75%); }
.bilan__podiums h3 { margin: 0 0 8px; color: #7a5300; font-size: 1.5rem; }
.bilan__podiums ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 24px; }
.bilan__podiums strong { color: #7a5300; }
.bilan__podiums sup, .bilan__etat sup { font-size: .7em; line-height: 0; }
.bilan__grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 26px; align-items: start; }
.bilan__carte { overflow: hidden; border-radius: var(--rayon); background: var(--blanc); box-shadow: var(--ombre); }
.bilan__carte .equipe__visuel img { display: block; }
.bilan__corps { display: grid; gap: 12px; padding: 20px 22px 22px; }
.bilan__corps h3 { margin: 0; color: var(--nuit); font-size: 1.55rem; }
.bilan__mention { justify-self: start; padding: .25em .9em; border-radius: 999px; background: #c98a00; color: var(--blanc); font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.bilan__liste, .bilan__coupes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bilan__ligne { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--gris-fond); }
.bilan__ligne:not(:has(.classement__rang)) { grid-template-columns: minmax(0, 1fr); }
.bilan__ligne--final { background: rgba(var(--accent-rgb), .08); }
.classement__rang--or { background: linear-gradient(135deg, #f6d36b, #c99a1e); color: #4a3500; }
.classement__rang--argent { background: linear-gradient(135deg, #e9edf2, #a9b2bd); color: #2f3a46; }
.classement__rang--bronze { background: linear-gradient(135deg, #e8a971, #b06a35); color: #3d1f08; }
.bilan__texte { display: grid; gap: 1px; min-width: 0; }
.bilan__nom { font-weight: 700; color: var(--nuit); }
.bilan__nom small { display: block; font-size: .78rem; font-weight: 500; color: var(--texte-doux); }
.bilan__etat { font-size: .92rem; color: var(--texte); }
.bilan__chiffres { font-size: .82rem; color: var(--texte-doux); }
.bilan__coupe { display: grid; gap: 1px; padding: 8px 12px; border: 1px solid #ecd59a; border-radius: 12px; background: #fff6df; }
.bilan__coupe strong { color: #7a5300; font-size: .92rem; }
.bilan__coupe span { color: var(--texte); font-size: .84rem; }
.bilan__note { margin: 0; font-size: .95rem; color: var(--texte-doux); }
.bilan__corps .equipe__resultats { justify-self: start; }
@media (max-width: 600px) {
  .bilan__corps { padding: 16px; }
  .bilan__total .chiffre { padding: 18px 16px; }
  .bilan__total .chiffre__valeur { font-size: 2.6rem; }
}

/* ---------- Pas de mot coupé en fin de ligne ----------
   Les mots composés (Volley-Ball, 2026-2027...) sont protégés par main.js ;
   sur téléphone, les textes un peu plus petits tiennent sur la ligne. */
.insecable { white-space: nowrap; }
@media (max-width: 480px) {
  body { font-size: 16px; }
  h3 { overflow-wrap: break-word; }
  .bandeau-page h1 { font-size: 2.55rem; }
  a[href^="mailto:"] { font-size: .84em; white-space: nowrap; }
  .bouton[href^="mailto:"] { padding-inline: 1.1em; font-size: .76rem; letter-spacing: 0; }
  .wk__adversaire, .match__affiche { font-size: .92rem; }
  .wk__salle, .match__salle { font-size: .78rem; }
}
@media (max-width: 350px) {
  body { font-size: 15px; }
  .bandeau-page h1 { font-size: 2.3rem; }
  a[href^="mailto:"] { font-size: .72em; white-space: normal; }
  /* très petit écran : seule une adresse vraiment trop longue peut encore passer à la ligne */
  .visionneuse a[href^="mailto:"] { font-size: .78rem; overflow-wrap: anywhere; }
  .visionneuse__club { max-width: calc(100vw - 40px); min-width: 0; }
}

/* =========================================================
   Thèmes — appliqués automatiquement selon la date (assets/js/themes.js) : tout le mois pour
   Nouvel an, Octobre rose et Noël, quelques jours autour de l'évènement pour les autres.
   Décor posé par assets/js/decor-theme.js, images dans assets/img/themes/.
   Le bleu, le blanc et le vert du club restent dominants : aucune couleur du site n'est
   remplacée, seul le décor change (Octobre rose a ses couleurs, dans sa propre section).
   ========================================================= */
html.noel {
  --fond-equipes: url("../img/fond-equipes-noel.webp");
  --fond-fiche: url("../img/fond-fiche-noel.webp");
}
html.nouvelle-annee {
  --fond-equipes: url("../img/fond-equipes-nouvelle-annee.webp");
  --fond-fiche: url("../img/fond-fiche-nouvelle-annee.webp");
}
.noel .appel::after { background-image: url("../img/logo-cmvb-noel.png"); }

/* Bandeau du mois, en bas des pages */
.voeux {
  position: relative;
  overflow: hidden;
  padding: 34px 0;
  background: linear-gradient(100deg, #123a70, var(--bleu) 62%, var(--vert));
  border-top: 3px solid #f2c14e;
  color: var(--blanc);
}
.voeux__barre { position: relative; z-index: 2; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.voeux__barre img { width: 90px; height: 90px; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .3)); }
.voeux__barre div { flex: 1 1 320px; }
.voeux__barre strong {
  display: block;
  font-family: var(--titre);
  font-weight: 400;
  font-size: 1.8rem;
  letter-spacing: .02em;
  line-height: 1.1;
  background: linear-gradient(100deg, #fff 35%, #ffe39a 50%, #fff 65%) 0 0 / 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: reflet 6s linear infinite;
}
@keyframes reflet {
  from { background-position: 125% 0; }
  to { background-position: -125% 0; }
}
.voeux__barre p { margin: 6px 0 0; color: rgba(255, 255, 255, .9); }
.voeux .bouton--principal { background: var(--blanc); color: var(--accent-fonce); box-shadow: none; }
.voeux .bouton--principal:hover { background: #e8f1fd; color: #123a70; }
.voeux__decor {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: -2px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  opacity: .5;
  pointer-events: none;
}
.voeux__decor .objet { transform-origin: 50% 100%; animation: oscille 4s ease-in-out infinite alternate; }
.objet.flute--g { animation: trinqueG 5s ease-in-out infinite; }
.objet.flute--d { animation: trinqueD 5s ease-in-out infinite; }
@keyframes trinqueG {
  0%, 70%, 100% { transform: rotate(-8deg); }
  80%, 86% { transform: rotate(12deg); }
}
@keyframes trinqueD {
  0%, 70%, 100% { transform: rotate(8deg); }
  80%, 86% { transform: rotate(-12deg); }
}

/* Toiles des effets animés : neige, feuilles, confettis, feux d'artifice... */
.effet {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.effet--devant { z-index: 2; }
/* au-dessus de tout, fiches d'équipes et plein écran compris ; ne gêne aucun clic */
.effet--page { position: fixed; z-index: 4000; }

/* Frise sous le menu */
html[data-decor] .entete::before,
html[data-decor] .entete::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 44px;
  background-repeat: repeat-x;
  background-size: auto 44px;
  pointer-events: none;
}
html[data-decor] .entete::before { background-image: var(--frise); }
html.noel .entete::after {
  background-image: var(--frise-halos);
  mix-blend-mode: screen;
  animation: halos 2.2s ease-in-out infinite;
}
@keyframes halos {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

/* Petit dessin à côté des surtitres */
html[data-decor] .surtitre::after {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 9px;
  vertical-align: -4px;
  background: var(--picto) center / contain no-repeat;
  animation: picto 3.6s ease-in-out infinite;
}
html.noel .surtitre::after { filter: drop-shadow(0 0 1px #215ca8) drop-shadow(0 0 1px #215ca8); }
@keyframes picto {
  0%, 100% { transform: rotate(-12deg); }
  50% { transform: rotate(12deg); }
}

/* Objets suspendus sous le menu, qui se balancent */
.boules {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.heros { --haut-boules: 118px; }
.bandeau-page { --haut-boules: 86px; }
.boule {
  position: absolute;
  top: var(--haut-boules);
  left: var(--x);
  width: 50px;
  height: calc(var(--fil) + 72px);
  transform-origin: 50% 0;
  animation: balance var(--d) ease-in-out var(--retard) infinite alternate;
}
.boule::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1.5px;
  height: calc(var(--fil) + 8px);
  background: linear-gradient(90deg, #d9b35a, #fff0c0, #a87e22);
}
.boule img {
  position: absolute;
  left: 50%;
  top: var(--fil);
  width: 100%;
  max-height: 72px;
  object-fit: contain;
  object-position: top;
  transform: translateX(-50%);
  filter: drop-shadow(0 9px 8px rgba(0, 0, 0, .42));
}
.boule--accroche img { width: 72px; max-height: none; top: calc(var(--fil) + 26px); transform: translateX(-50%) rotate(90deg); }
.boule--tel { display: none; }
@keyframes balance {
  from { transform: rotate(-5deg); }
  to { transform: rotate(5deg); }
}

/* Objets posés en bas des grands bandeaux */
.poses {
  position: absolute;
  z-index: 1;
  right: 2%;
  bottom: 34px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}
.objet { display: block; flex: none; width: var(--t); }
.objet img { display: block; width: 100%; height: auto; }
.poses .objet img { filter: drop-shadow(0 9px 9px rgba(0, 0, 0, .45)); }
.poses .objet:nth-child(2n) img { transform-origin: 50% 100%; animation: oscille 5s ease-in-out infinite alternate; }
@keyframes oscille {
  from { transform: rotate(-1.800deg); }
  to { transform: rotate(1.800deg); }
}

/* Ce qui traverse le ciel, environ toutes les 30 secondes */
.survol {
  position: absolute;
  z-index: 1;
  top: 17%;
  left: 0;
  width: var(--l);
  pointer-events: none;
  transform: translate3d(-120%, 0, 0);
  animation: survolVol 30s linear infinite;
}
.survol img { display: block; width: 100%; }
.survol--vol img { filter: drop-shadow(0 0 7px rgba(255, 240, 200, .55)); }
@keyframes survolVol {
  0% { transform: translate3d(-130%, 34px, 0) rotate(-4deg); }
  14% { transform: translate3d(32vw, 0, 0) rotate(-2deg); }
  28% { transform: translate3d(66vw, 26px, 0) rotate(-5deg); }
  42%, 100% { transform: translate3d(108vw, -24px, 0) rotate(-6deg); }
}
.survol--nage { animation-name: survolNage; }
.survol--nage img { animation: frisson .34s ease-in-out infinite alternate; transform-origin: 80% 50%; }
@keyframes survolNage {
  0% { transform: translate3d(-130%, 40px, 0); }
  8% { transform: translate3d(14vw, 10px, 0) rotate(-3deg); }
  16% { transform: translate3d(36vw, 46px, 0) rotate(3deg); }
  24% { transform: translate3d(56vw, 8px, 0) rotate(-3deg); }
  32% { transform: translate3d(78vw, 40px, 0) rotate(3deg); }
  42%, 100% { transform: translate3d(108vw, 8px, 0); }
}
@keyframes frisson { to { transform: skewY(2.500deg) scaleX(.97); } }
.survol--monte { top: auto; bottom: -140px; animation-name: survolMonte; }
@keyframes survolMonte {
  0% { transform: translate3d(58vw, 0, 0) rotate(-4deg); }
  14% { transform: translate3d(61vw, -35vh, 0) rotate(4deg); }
  28% { transform: translate3d(57vw, -70vh, 0) rotate(-4deg); }
  44%, 100% { transform: translate3d(62vw, -120vh, 0) rotate(3deg); }
}
.survol--rebond { filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .42)); animation-name: survolRebond; animation-timing-function: linear; }
@keyframes survolRebond {
  0% { transform: translate3d(-130%, 240px, 0) rotate(0); animation-timing-function: cubic-bezier(.2, .7, .5, 1); }
  7% { transform: translate3d(14vw, -20px, 0) rotate(130deg); animation-timing-function: cubic-bezier(.5, 0, .8, .3); }
  14% { transform: translate3d(32vw, 240px, 0) rotate(260deg); animation-timing-function: cubic-bezier(.2, .7, .5, 1); }
  21% { transform: translate3d(50vw, 20px, 0) rotate(390deg); animation-timing-function: cubic-bezier(.5, 0, .8, .3); }
  28% { transform: translate3d(68vw, 240px, 0) rotate(520deg); animation-timing-function: cubic-bezier(.2, .7, .5, 1); }
  35% { transform: translate3d(86vw, 60px, 0) rotate(650deg); animation-timing-function: cubic-bezier(.5, 0, .8, .3); }
  42%, 100% { transform: translate3d(108vw, 240px, 0) rotate(780deg); }
}
/* Neige au sol, en bas de l'accueil */
.congere {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 22px;
  height: clamp(60px, 7vw, 110px);
  background: center bottom / auto 100% repeat-x;
  pointer-events: none;
}
/* Flûtes de la nouvelle année et objets suspendus plus grands */
.boule--grand { width: 64px; height: calc(var(--fil) + 92px); }
.boule--grand img { max-height: 92px; }
.poses .objet.flute--g img,
.poses .objet.flute--d img { animation: none; }
/* Décor du bandeau d'Octobre rose */
.octobre-rose__bandeau { position: relative; overflow: hidden; }
.octobre-rose__barre { position: relative; z-index: 2; }
html.octobre-rose .boule::before { background: linear-gradient(90deg, #ffb3d6, #fff, #e0267f); }

/* Paysage au-dessus du pied de page */
.paysage {
  position: relative;
  height: clamp(110px, 17.2vw, 300px);
  margin-bottom: -1px;
  overflow: hidden;
  background: #fff;
}
.paysage img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.paysage .effet { z-index: 2; }

/* Sur téléphone : décor allégé */
@media (max-width: 760px) {
  .heros { --haut-boules: 92px; }
  .bandeau-page { --haut-boules: 70px; }
  .boule--pc { display: none; }
  .boule--tel { display: block; }
  .boule { width: 36px; height: calc(var(--fil) + 54px); }
  .boule img { max-height: 54px; }
  .boule--accroche img { width: 52px; top: calc(var(--fil) + 20px); }
  .boule--grand { width: 44px; height: calc(var(--fil) + 64px); }
  .boule--grand img { max-height: 64px; }
  html[data-decor] .entete::before,
  html[data-decor] .entete::after { height: 34px; background-size: auto 34px; }
  .objet { width: calc(var(--t) * .62); }
  .poses { right: 1%; }
  .voeux__decor { opacity: .32; }
  .survol { width: calc(var(--l) * .72); }
}
/* Animations réduites demandées : décor fixe, sans ce qui n'a de sens qu'en mouvement */
@media (prefers-reduced-motion: reduce) {
  .survol, .effet { display: none; }
}