/* ==========================================================================
   KravMaga Paris IDF Academy — feuille de style
   Identité reprise du site existant : thème clair, accents orange,
   sections sombres, titres Bebas Neue, texte Roboto.
   ========================================================================== */

:root {
  /* Couleurs de marque */
  --primary-color: #ff6b35;
  --primary-dark: #e55a2b;
  --accent-color: #f39c12;
  --secondary-color: #2c3e50;
  --secondary-dark: #1f2c38;
  --bg-dark: #1a1a1a;
  --bg-light: #f8f9fa;
  --gradient-primary: linear-gradient(135deg, #ff6b35 0%, #f39c12 100%);
  --gradient-secondary: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  --gradient-dark: linear-gradient(160deg, rgba(26, 26, 26, .82), rgba(26, 26, 26, .94));

  /* Thème clair */
  --bg: var(--bg-light);
  --surface: #ffffff;
  --surface-2: #f1f3f5;
  --line: #e6e8eb;
  --line-soft: #eef0f3;
  --text: var(--secondary-color);
  --muted: #666666;
  --on-dark: #ecf0f1;
  --on-dark-muted: rgba(236, 240, 241, .78);

  /* États */
  --ok: #2f9e44;
  --warn: #e8590c;
  --danger: #d32f2f;

  /* Formes */
  --radius: 12px;
  --radius-lg: 20px;
  --radius-sm: 8px;
  --shadow-light: 0 2px 10px rgba(0, 0, 0, .1);
  --shadow-medium: 0 5px 20px rgba(0, 0, 0, .15);
  --shadow-heavy: 0 10px 40px rgba(0, 0, 0, .2);
  --transition: all .3s cubic-bezier(.4, 0, .2, 1);

  --container: 1200px;
  --font-title: 'Bebas Neue', 'Arial Narrow', Impact, sans-serif;
  --font-gothic: 'UnifrakturMaguntia', Georgia, 'Times New Roman', serif;
  --font-didone: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: var(--transition); }

h1, h2, h3, h4 {
  font-family: var(--font-title);
  font-weight: 400;
  line-height: 1.08;
  margin: 0 0 .75rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--secondary-color);
}
h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.7rem); }
h4 { font-size: 1.15rem; }
p { margin: 0 0 1rem; color: var(--muted); }
p strong, li strong { color: var(--text); }
sup { font-size: .5em; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.section { padding: 84px 0; }
.section--tight { padding: 48px 0; }
.section--soft { background: #fff; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
/* Section sur fond noir (ex. Mur d'images) : textes clairs, dégradés assortis. */
.section--black { background: #000000; }
.section--black h1, .section--black h2, .section--black h3, .section--black h4 { color: #ffffff; }
.section--black p, .section--black .muted, .section--black .small { color: var(--on-dark-muted); }
.section--black .section-head::after { background: var(--gradient-primary); }
.section--black .gallery-marquee::before { background: linear-gradient(90deg, #000000, transparent); }
.section--black .gallery-marquee::after { background: linear-gradient(270deg, #000000, transparent); }
.section--dark { background: var(--bg-dark); color: var(--on-dark); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark p { color: var(--on-dark-muted); }
.section--gradient { background: var(--gradient-secondary); color: var(--on-dark); }
.section--gradient h2, .section--gradient h3 { color: #fff; }
.section--gradient p { color: var(--on-dark-muted); }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; }
.hidden { display: none !important; }

.eyebrow {
  display: inline-block; font-family: var(--font-body); font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em; font-size: .74rem;
  color: var(--primary-color); margin-bottom: .6rem;
}
.section-head { max-width: 780px; margin: 0 auto 46px; text-align: center; }
.section-head p { font-size: 1.05rem; }
.section-head::after {
  content: ""; display: block; width: 70px; height: 4px; margin: 18px auto 0;
  background: var(--gradient-primary); border-radius: 3px;
}
.section--dark .section-head p, .section--gradient .section-head p { color: var(--on-dark-muted); }

/* ── En-tête ───────────────────────────────────────────────── */

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-light);
}
.site-header__inner { display: flex; align-items: center; gap: 20px; min-height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark {
  width: 48px; height: 48px; flex: 0 0 48px; border-radius: 13px; padding: 4px;
  background: #fff; border: 1px solid var(--line);
  display: grid; place-items: center; overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}
.brand__mark img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }
.site-footer .brand__mark { background: #fff; border-color: rgba(255, 255, 255, .25); }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__text > span:first-child { font-family: var(--font-title); font-size: 1.22rem; letter-spacing: .4px; white-space: nowrap; }
.brand__text small { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.nav { margin-left: auto; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.nav a {
  padding: 9px 9px; border-radius: var(--radius-sm); font-size: .87rem; font-weight: 500; color: var(--secondary-color);
  white-space: nowrap;
}
.nav a:hover { color: var(--primary-color); background: rgba(255, 107, 53, .08); }
.nav a.is-active { color: var(--primary-color); box-shadow: inset 0 -2px 0 var(--primary-color); }
.nav__cta { margin-left: 8px; }
.burger {
  margin-left: auto; display: none; width: 44px; height: 44px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line); color: var(--secondary-color);
  font-size: 1.25rem; cursor: pointer;
}

@media (max-width: 1080px) {
  .burger { display: block; }
  .nav {
    position: absolute; top: 76px; left: 0; right: 0; flex-direction: column; align-items: stretch;
    background: #fff; border-bottom: 1px solid var(--line); padding: 14px; gap: 4px; display: none;
    box-shadow: var(--shadow-medium); max-height: 76vh; overflow: auto;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 12px 14px; }
  .nav__cta { margin-left: 0; }
  .site-header { position: relative; }
}

/* ── Boutons ───────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: var(--radius); border: 2px solid transparent;
  font-family: var(--font-body); font-size: .95rem; font-weight: 600; cursor: pointer;
  transition: var(--transition); text-align: center;
}
.btn--primary { background: var(--gradient-primary); color: #fff; box-shadow: 0 6px 18px rgba(255, 107, 53, .3); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(255, 107, 53, .42); }
.btn--outline { border-color: var(--secondary-color); color: var(--secondary-color); background: transparent; }
.btn--outline:hover { background: var(--secondary-color); color: #fff; }
.btn--ghost { background: var(--surface-2); color: var(--secondary-color); }
.btn--ghost:hover { background: #e6e9ed; }
.btn--light { background: #fff; color: var(--secondary-color); border-color: #fff; }
.btn--light:hover { background: transparent; color: #fff; }
.btn--small { padding: 8px 15px; font-size: .84rem; border-radius: var(--radius-sm); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* ── Hero (diaporama) ──────────────────────────────────────── */

.hero { position: relative; overflow: hidden; background: var(--bg-dark); color: #fff; }
.hero__slides { position: absolute; inset: 0; overflow: hidden; }
.hero__slide {
  position: absolute; inset: 0; opacity: 0; transform: scale(1.08);
  transition: opacity 1.1s ease-in-out, transform 8s linear;
  background-size: cover; background-position: center;
}
.hero__slide.is-active { opacity: 1; transform: scale(1); }
/* Voile dégradé : sombre à gauche (lisibilité du texte), clair à droite (photos visibles) */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(20,20,20,.92) 0%, rgba(20,20,20,.72) 42%, rgba(20,20,20,.28) 100%);
}
/* Flèches du diaporama */
.hero__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.4); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: var(--transition);
}
.hero__nav:hover { background: var(--primary-color); border-color: var(--primary-color); }
.hero__nav--prev { left: 18px; }
.hero__nav--next { right: 18px; }
@media (max-width: 700px) { .hero__nav { width: 40px; height: 40px; font-size: 1.1rem; } .hero__nav--prev { left: 8px; } .hero__nav--next { right: 8px; } }
/* Compteur et légende */
.hero__caption {
  position: absolute; z-index: 3; right: 28px; bottom: 96px; text-align: right;
  color: #fff; max-width: 320px;
}
.hero__caption b { display: block; font-family: var(--font-title); font-size: 1.4rem; letter-spacing: .5px; }
.hero__caption span { font-size: .82rem; color: rgba(255,255,255,.7); }
.hero__caption .hero__count { font-family: var(--font-body); font-size: .78rem; letter-spacing: .14em; color: var(--primary-color); }
@media (max-width: 900px) { .hero__caption { display: none; } }
.hero__inner {
  position: relative; z-index: 2; padding: 120px 0 96px; max-width: 900px;
}
/* Diaporama allongé vers le bas : 96 px → 230 px (+20 %), puis 230 px → 270 px (+5 %).
   Soit +25 % au total par rapport à la hauteur d'origine. */
@media (min-width: 900px) {
  .hero__inner { padding-bottom: 270px; }
  .hero__caption { bottom: 174px; }
  .hero__dots { padding-bottom: 38px; }
}
.hero h1 { color: #fff; margin-bottom: 1rem; text-shadow: 0 4px 24px rgba(0, 0, 0, .5); }
.hero h1 span { color: var(--primary-color); }
.hero__lead { font-size: 1.15rem; color: var(--on-dark-muted); max-width: 40rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero__bullets { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.hero__bullets span {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
  padding: 6px 12px; border-radius: 999px; background: rgba(255, 107, 53, .18);
  border: 1px solid rgba(255, 107, 53, .5); color: #ffd9c9;
}
.hero__art { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-heavy); }
.hero__stats { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 44px; }
.hero__stats b { display: block; font-family: var(--font-title); font-size: 2.4rem; color: var(--primary-color); }
.hero__stats span { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--on-dark-muted); }
.hero__dots { position: relative; z-index: 2; display: flex; gap: 8px; padding-bottom: 26px; }
.hero__dots button {
  width: 34px; height: 4px; border: 0; border-radius: 3px; background: rgba(255, 255, 255, .32); cursor: pointer;
}
.hero__dots button.is-active { background: var(--primary-color); }

@media (max-width: 900px) {
  .hero__inner { padding: 76px 0 60px; }
  .hero__stats { gap: 24px; }
}

/* ── Bandeau de chiffres ───────────────────────────────────── */

.stats-band { background: var(--gradient-secondary); color: #fff; padding: 40px 0; }
.stats-band__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; }
@media (max-width: 700px) { .stats-band__grid { grid-template-columns: 1fr; gap: 18px; } }
.stats-band b { display: block; font-family: var(--font-title); font-size: 3rem; color: var(--primary-color); }
.stats-band span { text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; color: var(--on-dark-muted); }

.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 980px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-light); }
.stat b { display: block; font-family: var(--font-title); font-size: 2.1rem; color: var(--primary-color); line-height: 1.1; }
.stat span { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }

/* ── Grilles & cartes ──────────────────────────────────────── */

.grid { display: grid; gap: 26px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Section « Cours / Tarifs » : les 5 formules tiennent sur une seule ligne. */
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
/* Cartes plus étroites : on resserre les marges intérieures et le prix
   pour que les 5 formules restent lisibles côte à côte. */
.grid--5 .card--pricing .card__body { padding: 26px 15px; }
.grid--5 .card--pricing .card__title { font-size: 1.08rem; }
.grid--5 .card--pricing .price { font-size: 2.05rem; }
.grid--5 .card--pricing .card__features li { font-size: .82rem; padding-left: 20px; }
.grid--5 .card--pricing .btn { font-size: .86rem; padding: 10px 12px; }
@media (max-width: 1200px) { .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } }
@media (max-width: 1050px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .grid--3, .grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-light);
  transition: var(--transition);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-medium); border-color: rgba(255, 107, 53, .35); }
.card__media { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; background: var(--surface-2); }
.card__body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card__title { margin: 0; font-size: 1.3rem; }
.card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.card--pricing { text-align: center; }
/* Les cartes de tarifs ont une image en haut (comme les cartes d'instructeurs)
   et leur bouton est collé en bas : les 5 boutons sont ainsi alignés au même
   niveau, quel que soit le nombre de lignes de la description. */
.card--pricing .card__media { aspect-ratio: 4 / 3; }
.card--pricing .btn { margin-top: auto; }
/* Étiquettes de la carte (niveau, « Le plus choisi », « Mixte ») : toujours
   empilées sur deux lignes (niveau puis mention) pour que les 5 cartes aient
   exactement la même présentation. */
.card--pricing .card__badges { display: flex; flex-direction: column; align-items: center; gap: 6px; }
/* Mention « Mixte » : formules ouvertes aux hommes et aux femmes. */
.pill--mention { background: var(--secondary-color); color: #ffffff; border-color: var(--secondary-color); }
/* Carte « Krav Maga 100 % Féminin » : fond rose demandé par le club. */
.card--pricing.card--rose { background: #ffe3ef; border-color: #ffb0d0; }
.card--pricing.card--rose:hover { border-color: #ff8bbd; }
.card--pricing.card--rose .pill--muted { background: rgba(214, 51, 108, .12); color: #b0154c; border-color: rgba(214, 51, 108, .3); }
/* Au survol, le bouton de chaque carte de tarif passe en orange (comme la
   formule mise en avant), quel que soit son style au repos. */
.card--pricing .btn--outline:hover,
.card--pricing .btn--light:hover,
.card--pricing .btn--ghost:hover {
  background: var(--gradient-primary); border-color: transparent; color: #ffffff;
  transform: translateY(-2px); box-shadow: 0 10px 26px rgba(255, 107, 53, .42);
}
.card--pricing .card__body { gap: 8px; padding: 30px 24px; }
.card--featured { border: 2px solid var(--primary-color); box-shadow: var(--shadow-medium); }
.card--pricing .price { font-family: var(--font-title); font-size: 2.6rem; color: var(--primary-color); line-height: 1; }
.card--pricing .price small { display: block; font-family: var(--font-body); font-size: .78rem; font-weight: 500; color: var(--muted); margin-top: 4px; }
.card__features { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; text-align: left; }
.card__features li { color: var(--muted); font-size: .9rem; padding-left: 24px; position: relative; }
.card__features li::before { content: "✓"; position: absolute; left: 0; color: var(--primary-color); font-weight: 700; }

.instructor { text-align: center; }
.instructor img { aspect-ratio: 1 / 1; object-fit: cover; }
.instructor .card__body { align-items: center; text-align: center; }
.instructor__socials { display: flex; gap: 8px; justify-content: center; margin-top: 6px; }
.instructor__socials a {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); color: var(--secondary-color); font-size: .78rem; font-weight: 700;
}
.instructor__socials a:hover { background: var(--gradient-primary); color: #fff; }

.pill {
  display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; background: rgba(255, 107, 53, .12);
  color: var(--primary-dark); border: 1px solid rgba(255, 107, 53, .3);
}
.pill--muted { background: var(--surface-2); color: var(--muted); border-color: var(--line); }
.pill--ok { background: rgba(47, 158, 68, .12); color: #1f7a33; border-color: rgba(47, 158, 68, .3); }
.pill--warn { background: rgba(232, 89, 12, .12); color: #b34700; border-color: rgba(232, 89, 12, .3); }
.badge { display: inline-block; padding: 4px 10px; border-radius: var(--radius-sm); background: var(--secondary-color); color: #fff; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.rating { color: var(--accent-color); letter-spacing: 2px; }

/* ── Listes de points forts ────────────────────────────────── */

.feature-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.feature-list li { display: flex; gap: 14px; align-items: flex-start; }
.feature-list b { display: block; color: var(--secondary-color); font-weight: 700; }
.feature-list i {
  flex: 0 0 40px; height: 40px; border-radius: var(--radius); background: rgba(255, 107, 53, .12);
  border: 1px solid rgba(255, 107, 53, .25); display: grid; place-items: center; font-style: normal; color: var(--primary-color); font-weight: 700;
}
.section--dark .feature-list b { color: #fff; }
.section--dark .feature-list i { background: rgba(255, 107, 53, .2); }

/* ── Tableaux (planning, admin) ────────────────────────────── */

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-light); }
table { width: 100%; border-collapse: collapse; min-width: 560px; }
th, td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line-soft); font-size: .93rem; }
th { font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; color: var(--secondary-color); background: var(--surface-2); font-weight: 700; }
tbody tr:hover { background: rgba(255, 107, 53, .04); }
tbody tr:last-child td { border-bottom: none; }
td .muted { font-size: .84rem; }

/* ── Formulaires ───────────────────────────────────────────── */

.form { display: grid; gap: 18px; }
.form--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form--2col .field--full { grid-column: 1 / -1; }
@media (max-width: 680px) { .form--2col { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: .84rem; font-weight: 600; color: var(--secondary-color); }
.field input, .field select, .field textarea {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--text); padding: 12px 14px; font-family: inherit; font-size: .95rem; width: 100%;
  transition: var(--transition);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(255, 107, 53, .15);
}
.field small { color: var(--muted); font-size: .78rem; }
.field code { background: var(--surface-2); padding: 2px 6px; border-radius: 5px; }

.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 30px; box-shadow: var(--shadow-light);
}
.panel--soft { background: var(--surface-2); }
.section--dark .panel { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); color: var(--on-dark); }

.alert { padding: 13px 16px; border-radius: var(--radius-sm); font-size: .9rem; border: 1px solid; display: none; }
.alert.is-visible { display: block; }
.alert--ok { background: rgba(47, 158, 68, .1); border-color: rgba(47, 158, 68, .35); color: #1f7a33; }
.alert--err { background: rgba(211, 47, 47, .08); border-color: rgba(211, 47, 47, .35); color: #b32020; }
.alert--info { background: var(--surface-2); border-color: var(--line); color: var(--muted); }

.checkbox-line { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); font-size: .9rem; }
.checkbox-line input { width: auto; margin-top: 4px; }

/* ── Onglets ───────────────────────────────────────────────── */

.tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 26px; }
/* Boutons des lieux (section « Horaires des cours ») : même design que les
   boutons du site (.btn--primary) et même couleur orange.
   Les onglets « À venir » / « Passés » des sections « Nos évènements » et
   « Nos stages et compétitions » utilisent EXACTEMENT ces mêmes règles. */
.tabs { border-bottom: 0; }
.tabs button,
.event-tab {
  background: var(--gradient-primary); color: #ffffff; border: 2px solid transparent;
  border-radius: var(--radius); font-family: var(--font-body); font-size: .92rem; font-weight: 600;
  padding: 12px 22px; cursor: pointer; box-shadow: 0 6px 18px rgba(255, 107, 53, .28);
  opacity: .82; transition: var(--transition);
}
.tabs button:hover,
.event-tab:hover { color: #ffffff; opacity: 1; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(255, 107, 53, .4); }
.tabs button.is-active,
.event-tab.is-active {
  color: #ffffff; opacity: 1; border-color: rgba(255, 255, 255, .85);
  box-shadow: 0 10px 26px rgba(255, 107, 53, .5);
}

/* ── Murs d'images et de vidéos : bandeaux pleine largeur ────
   Le titre reste aligné sur le reste de la page, mais la bande qui défile
   occupe toute la largeur de l'écran : on voit donc plus de photos et de
   vidéos en même temps (moins d'espace perdu sur les côtés). */
.section--edge { overflow-x: hidden; }
.section--edge .gallery-marquee {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: auto;
}
.section--edge .gallery-marquee::before,
.section--edge .gallery-marquee::after { width: 42px; }

/* ── Bandeau « Krav Maga 100 % Féminin » (sous les instructeurs) ──
   Bande rose, texte blanc en gras et centré, comme la maquette du club.
   Texte et affichage réglables dans l'espace membre (Paramètres du site). */
.feminine-band { background: #c2185b; padding: 46px 0; }
.feminine-band__title {
  max-width: 820px; margin: 0 auto 12px; color: #ffffff; text-align: center;
  font-family: var(--font-title); font-size: 2.5rem; font-weight: 400; letter-spacing: .04em; line-height: 1.1;
}
.feminine-band__text {
  max-width: 820px; margin: 0 auto; color: #ffffff; text-align: center;
  font-family: var(--font-body); font-size: 1.5rem; font-weight: 700; line-height: 1.45;
}
@media (max-width: 900px) { .feminine-band__title { font-size: 2.1rem; } .feminine-band__text { font-size: 1.28rem; } }
@media (max-width: 700px) { .feminine-band { padding: 34px 0; } .feminine-band__title { font-size: 1.8rem; } .feminine-band__text { font-size: 1.1rem; } }

/* ── Évènements et stages : onglets + grande carte + flèches ──
   Présentation reprise du site du club.
   Les onglets « À venir » / « Passés » reprennent EXACTEMENT les boutons des
   lieux de la section « Horaires des cours » (mêmes règles, mêmes couleurs) :
   voir le bloc « Onglets » ci-dessus (.tabs button, .event-tab). */
.events-tabs { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.event-card-wrapper {
  position: relative; width: fit-content; margin: 40px auto 0;
  display: flex; align-items: center; justify-content: center;
}
.event-gallery-card {
  background: #ffffff; border-radius: 12px; overflow: hidden; position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
  width: 485px; max-width: 100%; height: 722px; max-height: 78vh;
  margin: 0 auto; display: flex; flex-direction: column; cursor: zoom-in;
}
.event-gallery-image { flex: 1; position: relative; overflow: hidden; background: #ffffff; display: flex; align-items: center; justify-content: center; }
.event-gallery-image img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s ease; }
.event-gallery-card:hover .event-gallery-image img { transform: scale(1.02); }
.event-gallery-overlay {
  position: absolute; bottom: 0; left: 0; width: 100%; padding: 1rem 1.1rem;
  background: linear-gradient(to top, rgba(0, 0, 0, .82), transparent); color: #ffffff; z-index: 2;
}
.event-gallery-overlay strong { display: block; font-size: 1rem; }
.event-gallery-overlay span { display: block; font-size: .84rem; color: rgba(255, 255, 255, .85); margin-top: 2px; }
.event-gallery-overlay em { display: block; font-size: .74rem; letter-spacing: .12em; color: var(--primary-color); font-style: normal; margin-top: 4px; }
.event-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  width: 50px; height: 50px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .9); color: var(--primary-color); font-size: 1.4rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .15); transition: var(--transition);
}
.event-nav:hover { background: var(--primary-color); color: #ffffff; transform: translateY(-50%) scale(1.1); }
.event-nav--prev { left: -68px; }
.event-nav--next { right: -68px; }
@media (max-width: 1100px) { .event-nav--prev { left: -12px; } .event-nav--next { right: -12px; } }
.events-empty { text-align: center; color: var(--muted); margin: 18px 0 0; }
/* « Nos stages et compétitions » : même galerie sur fond noir, seul le message
   d'onglet vide a besoin d'une couleur claire (les boutons sont déjà orangés). */
.section--black .events-empty { color: var(--on-dark-muted); }
@media (max-width: 700px) {
  .event-gallery-card { height: 520px; }
  .event-nav { width: 40px; height: 40px; font-size: 1.1rem; }
}

/* ── Galerie / vidéos / presse / partenaires ───────────────── */

.gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1000px) { .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gallery-item {
  position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3;
  background: var(--surface-2); cursor: zoom-in; box-shadow: var(--shadow-light);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item__caption {
  position: absolute; inset: auto 0 0 0; padding: 26px 12px 10px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .78)); color: #fff; font-size: .84rem; font-weight: 500;
}
.gallery-item__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(0, 0, 0, .28);
}
.gallery-item--video { cursor: pointer; }
.gallery-item--video .gallery-item__play { background: rgba(0, 0, 0, .34); }
.gallery-item--video:hover .gallery-item__play span { transform: scale(1.08); }
.gallery-item__play span {
  width: 58px; height: 58px; border-radius: 50%; background: var(--gradient-primary); color: #fff;
  display: grid; place-items: center; font-size: 1.1rem; box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
  transition: var(--transition);
}
.events-grid { display: grid; gap: 22px; }
.event-card { display: grid; grid-template-columns: 300px 1fr; gap: 0; overflow: hidden; }
@media (max-width: 780px) { .event-card { grid-template-columns: 1fr; } }
.event-card img { height: 100%; min-height: 220px; object-fit: cover; }
.event-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 12px; }
.event-thumbs img { aspect-ratio: 1/1; object-fit: cover; border-radius: var(--radius-sm); }

.press-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .press-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.press-grid img { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }

.partner-logos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .partner-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .partner-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.partner-logo {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px;
  display: grid; place-items: center; min-height: 110px; transition: var(--transition);
}
.partner-logo img { max-height: 52px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .75; transition: var(--transition); }
.partner-logo:hover { box-shadow: var(--shadow-medium); transform: translateY(-4px); }
.partner-logo:hover img { filter: none; opacity: 1; }

.testimonial { text-align: left; }
.testimonial__head { display: flex; align-items: center; gap: 14px; }
.testimonial__head img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.testimonial__head b { display: block; }
.testimonial__head span { font-size: .8rem; color: var(--muted); }

/* ── Salles / cartes de contact ────────────────────────────── */

.club-card img { aspect-ratio: 16 / 9; object-fit: cover; }
.map-embed { width: 100%; border: 0; border-radius: var(--radius); min-height: 240px; background: var(--surface-2); }
.location-list { display: grid; gap: 10px; }
.location-pill {
  display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--surface-2); font-size: .88rem; color: var(--secondary-color); cursor: pointer; border: 1px solid transparent;
}
.location-pill.is-active { border-color: var(--primary-color); background: rgba(255, 107, 53, .1); color: var(--primary-dark); font-weight: 600; }

/* ── Frise historique (page À propos) ──────────────────────── */

.timeline { position: relative; margin: 0; padding: 0 0 0 34px; list-style: none; border-left: 3px solid rgba(255, 107, 53, .35); }
.timeline li { position: relative; padding: 0 0 30px 8px; }
.timeline li::before {
  content: ""; position: absolute; left: -45px; top: 6px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--gradient-primary); box-shadow: 0 0 0 4px rgba(255, 107, 53, .16);
}
.timeline b { display: block; font-family: var(--font-title); font-size: 1.5rem; color: var(--primary-color); letter-spacing: 1px; }
.timeline h4 { margin: 0 0 4px; font-family: var(--font-body); font-size: 1rem; font-weight: 700; text-transform: none; letter-spacing: 0; }
.section--dark .timeline { border-left-color: rgba(255, 107, 53, .45); }
.section--dark .timeline h4 { color: #fff; }

.figure-figure { display: grid; grid-template-columns: 260px 1fr; gap: 26px; align-items: center; }
@media (max-width: 780px) { .figure-figure { grid-template-columns: 1fr; } }
.figure-figure img { border-radius: var(--radius-lg); box-shadow: var(--shadow-medium); }
/* ── Diplômes & distinctions : une carte carrée identique pour chaque pièce ──
   Le document est contenu dans un cadre de dimensions constantes (1 / 1),
   quelle que soit son orientation ; le clic ouvre la visionneuse. */
.diploma-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1000px; margin: 0 auto; }
@media (max-width: 900px) { .diploma-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.diploma-grid figure {
  display: flex; flex-direction: column; height: 100%; margin: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px; text-align: center; box-shadow: var(--shadow-light);
}
.diploma-grid .diploma-image {
  display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain;
  background: #fff; border-radius: var(--radius-sm); margin: 0 0 10px; cursor: zoom-in;
}
.diploma-grid figcaption {
  margin-top: auto; height: 2.8em; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  font-size: .84rem; font-weight: 600; line-height: 1.4; color: var(--secondary-color);
}

.quote {
  border-left: 4px solid var(--primary-color); padding: 14px 20px; margin: 22px 0;
  background: rgba(255, 107, 53, .06); border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic; color: var(--secondary-color);
}
.section--dark .quote { background: rgba(255, 255, 255, .06); color: var(--on-dark); }

/* ── Article de blog ───────────────────────────────────────── */

.article { max-width: 820px; margin: 0 auto; }
.article__cover { border-radius: var(--radius-lg); margin-bottom: 30px; box-shadow: var(--shadow-medium); }
.article h2 { margin-top: 2.2rem; }
.article h3 { margin-top: 1.7rem; font-size: 1.4rem; }
.article ul, .article ol { color: var(--muted); padding-left: 1.4rem; }
.article li { margin-bottom: .5rem; }
.article blockquote { border-left: 4px solid var(--primary-color); background: var(--surface-2); margin: 1.6rem 0; padding: 16px 22px; border-radius: 0 var(--radius) var(--radius) 0; font-style: italic; color: var(--secondary-color); }
.article table { min-width: 0; margin: 1.6rem 0; }
.article code { background: var(--surface-2); padding: 2px 6px; border-radius: 5px; font-size: .88em; }

/* ── Espace membre / admin ─────────────────────────────────── */

.app-shell { display: grid; grid-template-columns: 250px 1fr; gap: 26px; align-items: start; }
@media (max-width: 900px) { .app-shell { grid-template-columns: 1fr; } }
.side-nav { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px; position: sticky; top: 100px; box-shadow: var(--shadow-light); }
@media (max-width: 900px) { .side-nav { position: static; } }
.side-nav a, .side-nav button {
  display: block; width: 100%; text-align: left; padding: 11px 13px; border-radius: var(--radius-sm);
  color: var(--muted); font-size: .92rem; font-weight: 600; background: none; border: none;
  font-family: inherit; cursor: pointer; transition: var(--transition);
}
.side-nav a:hover, .side-nav button:hover { background: var(--surface-2); color: var(--secondary-color); }
.side-nav .is-active { background: rgba(255, 107, 53, .12); color: var(--primary-dark); }
.side-nav hr { border: none; border-top: 1px solid var(--line-soft); margin: 10px 4px; }

.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.toolbar__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.icon-btn {
  background: #fff; border: 1px solid var(--line); color: var(--secondary-color);
  border-radius: var(--radius-sm); padding: 6px 11px; font-size: .8rem; cursor: pointer;
  font-family: inherit; font-weight: 500; transition: var(--transition);
}
.icon-btn:hover { border-color: var(--primary-color); color: var(--primary-dark); }
.icon-btn--danger:hover { color: var(--danger); border-color: var(--danger); }
.icon-btn.is-active { background: rgba(255, 107, 53, .12); border-color: var(--primary-color); color: var(--primary-dark); }
.empty { text-align: center; padding: 46px 20px; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface); }

/* ── Fenêtres modales ──────────────────────────────────────── */

.modal-backdrop { position: fixed; inset: 0; z-index: 300; padding: 22px; overflow: auto; background: rgba(26, 26, 26, .7); display: none; place-items: center; }
.modal-backdrop.is-open { display: grid; }
.modal { background: #fff; border-radius: var(--radius-lg); width: 100%; max-width: 720px; padding: 28px; box-shadow: var(--shadow-heavy); }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.modal__head h3 { margin: 0; }
.modal__foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }

/* ── Bandeau d'appel à l'action ────────────────────────────── */

.cta-band {
  background: var(--gradient-secondary); color: #fff; border-radius: var(--radius-lg);
  padding: 52px 34px; text-align: center; box-shadow: var(--shadow-medium);
}
.cta-band h2, .cta-band h3 { color: #fff; }
.cta-band p { color: var(--on-dark-muted); }
.cta-band .btn { margin: 16px 6px 0; }
.cta-band--black .cta-band__bar + .btn { margin-top: 20px; }

/* ── Pied de page ──────────────────────────────────────────── */

.site-footer {
  position: relative; color: #ffffff;
  padding: 52px 0 20px;
  margin-top: 60px;
  background-color: #060b14;   /* teinte de fond de l'image (raccord invisible) */
  /* L'image couvre toute la largeur ET toute la hauteur du pied de page.
     Un dégradé progressif (plus dense à gauche, plus léger au centre) garde
     les textes lisibles sans masquer la carte. */
  background-image:
    linear-gradient(90deg, rgba(6, 11, 20, .90) 0%, rgba(6, 11, 20, .72) 42%, rgba(6, 11, 20, .58) 70%, rgba(6, 11, 20, .70) 100%),
    var(--footer-image, none);
  background-size: cover, auto 100%;
  background-position: center, center bottom;
  background-repeat: no-repeat, no-repeat;
  border-top: 3px solid var(--primary-color);
}
.site-footer > .container { position: relative; z-index: 1; }
.site-footer h4 {
  color: #ffffff; font-size: .95rem; margin: 0 0 10px; letter-spacing: .08em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}
.site-footer a {
  color: #ffffff; font-size: .92rem; font-weight: 500; line-height: 1.55;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
  transition: var(--transition);
}
.site-footer a:hover, .site-footer a:focus-visible {
  color: var(--primary-color); text-decoration: underline; text-underline-offset: 3px;
}
.site-footer .small, .site-footer__text { color: rgba(255, 255, 255, .92); text-shadow: 0 1px 3px rgba(0, 0, 0, .9); }
.site-footer .brand { margin-bottom: 10px; }
.site-footer .brand__text > span:first-child { color: #ffffff; font-size: 1.1rem; }
.site-footer .brand__text small { color: rgba(255, 255, 255, .88); }
.site-footer__text { font-size: .88rem; line-height: 1.55; margin: 0; max-width: 34ch; }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.1fr; gap: 22px; }
@media (max-width: 1100px) { .site-footer__grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 700px) { .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 18px; } }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 5px; }
.site-footer__bottom {
  margin-top: 26px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .22);
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  font-size: .82rem; color: rgba(255, 255, 255, .95); text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}

/* ── Notifications ─────────────────────────────────────────── */

#toasts { position: fixed; right: 18px; bottom: 18px; display: grid; gap: 10px; z-index: 400; max-width: 350px; }
.toast {
  background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--primary-color);
  border-radius: var(--radius); padding: 14px 18px; box-shadow: var(--shadow-medium); font-size: .9rem;
  animation: slide-in .22s ease;
}
.toast--ok { border-left-color: var(--ok); }
.toast--err { border-left-color: var(--danger); }
@keyframes slide-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ── Divers ────────────────────────────────────────────────── */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 28px; } }
.skeleton { background: linear-gradient(90deg, #eef0f3 25%, #e3e6ea 37%, #eef0f3 63%); background-size: 400% 100%; animation: shimmer 1.3s infinite; border-radius: var(--radius); height: 120px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 10px; } .mt-2 { margin-top: 22px; } .mt-3 { margin-top: 34px; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 22px; }
.divider { border: none; border-top: 1px solid var(--line); margin: 26px 0; }
.nowrap { white-space: nowrap; }
.cover-hero {
  min-height: 320px; display: grid; align-items: center; color: #fff;
  background: var(--gradient-secondary); background-size: cover; background-position: center;
  border-bottom: 1px solid var(--line);
}
.cover-hero h1 { color: #fff; margin-bottom: .4rem; }
.cover-hero p { color: var(--on-dark-muted); max-width: 46rem; }

/* ── Bandeau d'images défilant (marquee) ───────────────────── */

.photo-marquee { background: #111; padding: 22px 0 26px; overflow: hidden; position: relative; }
.photo-marquee__label {
  text-align: center; color: rgba(255,255,255,.62); font-size: .76rem; letter-spacing: .18em;
  text-transform: uppercase; margin-bottom: 16px; font-weight: 700;
}
.photo-marquee__viewport { overflow: hidden; }
.photo-marquee__track { display: flex; gap: 14px; width: max-content; animation: km-marquee 70s linear infinite; }
.photo-marquee:hover .photo-marquee__track { animation-play-state: paused; }
.photo-marquee__item {
  position: relative; flex: 0 0 auto; border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.45); background: #1f1f1f;
}
.photo-marquee__item img { height: 148px; width: auto; max-width: 320px; object-fit: cover; transition: var(--transition); }
.photo-marquee__item:hover img { transform: scale(1.06); }
.photo-marquee__item span {
  position: absolute; inset: auto 0 0 0; padding: 16px 10px 6px; font-size: .72rem; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.8)); opacity: 0; transition: var(--transition);
}
.photo-marquee__item:hover span { opacity: 1; }
@media (max-width: 700px) { .photo-marquee__item img { height: 108px; } }
@keyframes km-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .photo-marquee__track { animation: none; } .hero__slide { transition: opacity .3s; } }

/* ── Enrichissements (JS) ──────────────────────────────────── */

.site-header.is-scrolled { box-shadow: 0 6px 22px rgba(0, 0, 0, .13); }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.4,0,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ── Grille horaire hebdomadaire ───────────────────────────── */

.schedule-grid { min-width: 720px; }
.schedule-grid th { text-align: center; }
.schedule-grid thead th:first-child, .schedule-grid__time { text-align: left; white-space: nowrap; }
.schedule-grid__time {
  font-family: var(--font-title); font-size: 1.05rem; letter-spacing: .5px;
  color: var(--primary-dark); background: var(--surface-2); width: 92px;
}
.schedule-grid__slot {
  vertical-align: top; border-left: 3px solid var(--primary-color); background: rgba(255, 107, 53, .06);
  min-width: 130px; line-height: 1.4;
}
.schedule-grid__slot strong { display: block; font-size: .92rem; }
.schedule-grid__slot .small { display: block; color: var(--muted); font-size: .78rem; }
.schedule-grid__empty { text-align: center; color: #c9ced6; }
.section--dark .schedule-grid { background: transparent; }
.section--dark .schedule-grid__empty { color: rgba(255, 255, 255, .25); }

/* ── Fiches instructeurs : dimensions identiques pour toutes les cartes ──
   Référence = première carte (Maître Avi Attlan) :
   photo 300 × 480 px, texte à droite, hauteur de carte fixe. */
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
@media (max-width: 900px) { .team-grid { grid-template-columns: 1fr; } }

.instructor-card {
  display: grid; grid-template-columns: 300px 1fr;
  height: 480px; overflow: hidden; padding: 0;
}
.instructor-card__photo {
  width: 300px; height: 480px; object-fit: cover; object-position: center 15%;
  background: var(--surface-2);
}
.instructor-card .card__body {
  padding: 26px 28px; overflow: hidden; display: flex; flex-direction: column; gap: 10px;
}
.instructor-card__name { font-size: 1.55rem; margin: 0; }
.instructor-card__bio {
  display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden;
  margin: 0; color: var(--muted); font-size: .92rem;
}
.instructor-card .pill { align-self: flex-start; }

/* Mobile : la photo passe au-dessus, à hauteur fixe, cartes toujours identiques */
@media (max-width: 620px) {
  .instructor-card { grid-template-columns: 1fr; height: auto; }
  .instructor-card__photo { width: 100%; height: 320px; }
  .instructor-card__bio { -webkit-line-clamp: 6; }
}

/* ── Mur d'images défilant sur une ligne ─────────────────────
   Même carte que la grille (.gallery-item : photo 4/3 + légende + visionneuse),
   mais sur une seule ligne qui défile en continu. */
.gallery-marquee { position: relative; overflow: hidden; padding: 4px 0 10px; }
.gallery-marquee::before, .gallery-marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 70px; z-index: 2; pointer-events: none;
}
.gallery-marquee::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.gallery-marquee::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.gallery-marquee__track {
  display: flex; gap: 16px; width: max-content;
  animation: km-marquee 70s linear infinite;
}
.gallery-marquee:hover .gallery-marquee__track,
.gallery-marquee.is-paused .gallery-marquee__track { animation-play-state: paused; }
.gallery-marquee .gallery-item { flex: 0 0 320px; width: 320px; aspect-ratio: 4 / 3; }
@media (max-width: 700px) { .gallery-marquee .gallery-item { flex: 0 0 240px; width: 240px; } }

/* Dégradés latéraux adaptés au fond de la section */
.section--soft .gallery-marquee::before { background: linear-gradient(90deg, #fff, transparent); }
.section--soft .gallery-marquee::after { background: linear-gradient(270deg, #fff, transparent); }
.section--dark .gallery-marquee::before { background: linear-gradient(90deg, var(--bg-dark), transparent); }
.section--dark .gallery-marquee::after { background: linear-gradient(270deg, var(--bg-dark), transparent); }
.gallery-marquee:hover .gallery-item__play { background: rgba(0, 0, 0, .12); }

/* Témoignages : cartes de largeur identique dans la ligne défilante */
.gallery-marquee .testimonial { flex: 0 0 360px; width: 360px; }
.gallery-marquee .testimonial .card__body { gap: 12px; }
.gallery-marquee .testimonial .pill--warn { align-self: flex-start; font-size: .64rem; }
@media (max-width: 700px) { .gallery-marquee .testimonial { flex: 0 0 280px; width: 280px; } }

/* ── Menu d'en-tête : tient sur une seule ligne ───────────── */

.nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.nav::-webkit-scrollbar { display: none; }
.nav__cta { white-space: nowrap; }

/* Paliers : la marque et les libellés se réduisent avant de passer en burger */
@media (max-width: 1330px) { .brand__text small { display: none; } }
@media (max-width: 1260px) { .brand__text > span:first-child { font-size: 1.05rem; } .nav a { font-size: .82rem; padding: 8px 7px; } }
@media (max-width: 1080px) {
  .nav { flex-wrap: wrap; }
}

/* ── Enrichissements (JS) ──────────────────────────────────── */

.site-header.is-scrolled { box-shadow: 0 6px 22px rgba(0, 0, 0, .13); }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.4,0,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ── Grille horaire hebdomadaire ───────────────────────────── */

.schedule-grid { min-width: 720px; }
.schedule-grid th { text-align: center; }
.schedule-grid thead th:first-child, .schedule-grid__time { text-align: left; white-space: nowrap; }
.schedule-grid__time {
  font-family: var(--font-title); font-size: 1.05rem; letter-spacing: .5px;
  color: var(--primary-dark); background: var(--surface-2); width: 92px;
}
.schedule-grid__slot {
  vertical-align: top; border-left: 3px solid var(--primary-color); background: rgba(255, 107, 53, .06);
  min-width: 130px; line-height: 1.4;
}
.schedule-grid__slot strong { display: block; font-size: .92rem; }
.schedule-grid__slot .small { display: block; color: var(--muted); font-size: .78rem; }
.schedule-grid__empty { text-align: center; color: #c9ced6; }
.section--dark .schedule-grid { background: transparent; }
.section--dark .schedule-grid__empty { color: rgba(255, 255, 255, .25); }

/* ── Fiches instructeurs : dimensions identiques pour toutes les cartes ──
   Référence = première carte (Maître Avi Attlan) :
   photo 300 × 480 px, texte à droite, hauteur de carte fixe. */
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
@media (max-width: 900px) { .team-grid { grid-template-columns: 1fr; } }

.instructor-card {
  display: grid; grid-template-columns: 300px 1fr;
  height: 480px; overflow: hidden; padding: 0;
}
.instructor-card__photo {
  width: 300px; height: 480px; object-fit: cover; object-position: center 15%;
  background: var(--surface-2);
}
.instructor-card .card__body {
  padding: 26px 28px; overflow: hidden; display: flex; flex-direction: column; gap: 10px;
}
.instructor-card__name { font-size: 1.55rem; margin: 0; }
.instructor-card__bio {
  display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden;
  margin: 0; color: var(--muted); font-size: .92rem;
}
.instructor-card .pill { align-self: flex-start; }

/* Mobile : la photo passe au-dessus, à hauteur fixe, cartes toujours identiques */
@media (max-width: 620px) {
  .instructor-card { grid-template-columns: 1fr; height: auto; }
  .instructor-card__photo { width: 100%; height: 320px; }
  .instructor-card__bio { -webkit-line-clamp: 6; }
}

/* ── Mur d'images défilant sur une ligne ─────────────────────
   Même carte que la grille (.gallery-item : photo 4/3 + légende + visionneuse),
   mais sur une seule ligne qui défile en continu. */
.gallery-marquee { position: relative; overflow: hidden; padding: 4px 0 10px; }
.gallery-marquee::before, .gallery-marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 70px; z-index: 2; pointer-events: none;
}
.gallery-marquee::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.gallery-marquee::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.gallery-marquee__track {
  display: flex; gap: 16px; width: max-content;
  animation: km-marquee 70s linear infinite;
}
.gallery-marquee:hover .gallery-marquee__track,
.gallery-marquee.is-paused .gallery-marquee__track { animation-play-state: paused; }
.gallery-marquee .gallery-item { flex: 0 0 320px; width: 320px; aspect-ratio: 4 / 3; }
@media (max-width: 700px) { .gallery-marquee .gallery-item { flex: 0 0 240px; width: 240px; } }

/* Dégradés latéraux adaptés au fond de la section */
.section--soft .gallery-marquee::before { background: linear-gradient(90deg, #fff, transparent); }
.section--soft .gallery-marquee::after { background: linear-gradient(270deg, #fff, transparent); }
.section--dark .gallery-marquee::before { background: linear-gradient(90deg, var(--bg-dark), transparent); }
.section--dark .gallery-marquee::after { background: linear-gradient(270deg, var(--bg-dark), transparent); }
.gallery-marquee:hover .gallery-item__play { background: rgba(0, 0, 0, .12); }

/* Témoignages : cartes de largeur identique dans la ligne défilante */
.gallery-marquee .testimonial { flex: 0 0 360px; width: 360px; }
.gallery-marquee .testimonial .card__body { gap: 12px; }
.gallery-marquee .testimonial .pill--warn { align-self: flex-start; font-size: .64rem; }
@media (max-width: 700px) { .gallery-marquee .testimonial { flex: 0 0 280px; width: 280px; } }

/* ── Menu : sous-menu « Le club » ───────────────────────────── */

.nav {
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav__cta { white-space: nowrap; }
/* Écrans intermédiaires : le menu reste sur une ligne, la marque se réduit */
@media (max-width: 1330px) { .brand__text small { display: none; } }

/* Sous 1080 px : menu déroulant (burger) — les liens s'empilent proprement */
@media (max-width: 1080px) {
  .nav { flex-wrap: wrap; }
}

/* ── Visionneuse : cadre de dimensions identiques pour toutes les photos ──
   Le format du cadre est celui de la première photo (variable --lb-ratio). */

.lightbox { padding: 18px; }
.lightbox__panel { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 1040px; }
.lightbox__frame {
  width: 100%;
  aspect-ratio: var(--lb-ratio, 1.3333);
  background: #0b0b0b;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius);
  display: grid; place-items: center; overflow: hidden;
}
.lightbox__frame img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.lightbox__link {
  color: rgba(255, 255, 255, .85); font-size: .82rem; text-decoration: underline;
  text-underline-offset: 3px;
}
.lightbox__link:hover { color: var(--primary-color); }
.lightbox__caption { color: rgba(255, 255, 255, .82); font-size: .88rem; text-align: center; margin: 0; min-height: 1.3em; }
.lightbox__bar { display: flex; align-items: center; gap: 12px; }
.lightbox__count { color: rgba(255, 255, 255, .7); font-size: .82rem; letter-spacing: .08em; min-width: 64px; text-align: center; }
.lightbox__nav {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .08); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: var(--transition);
}
.lightbox__nav:hover { background: var(--primary-color); border-color: var(--primary-color); }
@media (max-width: 700px) { .lightbox__frame { aspect-ratio: var(--lb-ratio, 1.3333); } }


/* ── Badge « Licence fédérale FFK » (section Nos instructeurs) ──
   Logo officiel de la Fédération Française de Karaté (version couleur verticale).
   Il est présenté sur un fond BLANC, comme sur le visuel d'origine, dans le coin
   inférieur droit de la section — taille réduite et discrète. */

/* Logo FFK horizontal (emblème + « Fédération Française Karaté ») : le badge
   s'élargit pour que le nom de la fédération reste lisible. */
.federation-badge {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 176px; margin: 26px 0 0 auto;   /* aligné à droite, sous les fiches */
  padding: 16px 16px 12px;
  background: #ffffff;                    /* fond du logo : blanc, identique à l'original */
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-light);
  text-align: center;
}
.federation-badge img { width: 100%; height: auto; display: block; max-width: 132px; margin: 0 auto; }
.federation-badge span {
  font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--secondary-color); line-height: 1.35;
}
@media (max-width: 900px) {
  .federation-badge { width: 196px; }
}
@media (max-width: 620px) {
  .federation-badge { width: 168px; margin: 20px auto 0; padding: 12px 12px 10px; }
}
/* ── Enrichissements (JS) ──────────────────────────────────── */

.site-header.is-scrolled { box-shadow: 0 6px 22px rgba(0, 0, 0, .13); }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.4,0,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ── Grille horaire hebdomadaire ───────────────────────────── */

.schedule-grid { min-width: 720px; }
.schedule-grid th { text-align: center; }
.schedule-grid thead th:first-child, .schedule-grid__time { text-align: left; white-space: nowrap; }
.schedule-grid__time {
  font-family: var(--font-title); font-size: 1.05rem; letter-spacing: .5px;
  color: var(--primary-dark); background: var(--surface-2); width: 92px;
}
.schedule-grid__slot {
  vertical-align: top; border-left: 3px solid var(--primary-color); background: rgba(255, 107, 53, .06);
  min-width: 130px; line-height: 1.4;
}
.schedule-grid__slot strong { display: block; font-size: .92rem; }
.schedule-grid__slot .small { display: block; color: var(--muted); font-size: .78rem; }
.schedule-grid__empty { text-align: center; color: #c9ced6; }
.section--dark .schedule-grid { background: transparent; }
.section--dark .schedule-grid__empty { color: rgba(255, 255, 255, .25); }

/* ── Fiches instructeurs : dimensions identiques pour toutes les cartes ──
   Référence = première carte (Maître Avi Attlan) :
   photo 300 × 480 px, texte à droite, hauteur de carte fixe. */
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
@media (max-width: 900px) { .team-grid { grid-template-columns: 1fr; } }

.instructor-card {
  display: grid; grid-template-columns: 300px 1fr;
  height: 480px; overflow: hidden; padding: 0;
}
.instructor-card__photo {
  width: 300px; height: 480px; object-fit: cover; object-position: center 15%;
  background: var(--surface-2);
}
.instructor-card .card__body {
  padding: 26px 28px; overflow: hidden; display: flex; flex-direction: column; gap: 10px;
}
.instructor-card__name { font-size: 1.55rem; margin: 0; }
.instructor-card__bio {
  display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden;
  margin: 0; color: var(--muted); font-size: .92rem;
}
.instructor-card .pill { align-self: flex-start; }

/* Mobile : la photo passe au-dessus, à hauteur fixe, cartes toujours identiques */
@media (max-width: 620px) {
  .instructor-card { grid-template-columns: 1fr; height: auto; }
  .instructor-card__photo { width: 100%; height: 320px; }
  .instructor-card__bio { -webkit-line-clamp: 6; }
}

/* ── Mur d'images défilant sur une ligne ─────────────────────
   Même carte que la grille (.gallery-item : photo 4/3 + légende + visionneuse),
   mais sur une seule ligne qui défile en continu. */
.gallery-marquee { position: relative; overflow: hidden; padding: 4px 0 10px; }
.gallery-marquee::before, .gallery-marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 70px; z-index: 2; pointer-events: none;
}
.gallery-marquee::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.gallery-marquee::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.gallery-marquee__track {
  display: flex; gap: 16px; width: max-content;
  animation: km-marquee 70s linear infinite;
}
.gallery-marquee:hover .gallery-marquee__track,
.gallery-marquee.is-paused .gallery-marquee__track { animation-play-state: paused; }
.gallery-marquee .gallery-item { flex: 0 0 320px; width: 320px; aspect-ratio: 4 / 3; }
@media (max-width: 700px) { .gallery-marquee .gallery-item { flex: 0 0 240px; width: 240px; } }

/* Dégradés latéraux adaptés au fond de la section */
.section--soft .gallery-marquee::before { background: linear-gradient(90deg, #fff, transparent); }
.section--soft .gallery-marquee::after { background: linear-gradient(270deg, #fff, transparent); }
.section--dark .gallery-marquee::before { background: linear-gradient(90deg, var(--bg-dark), transparent); }
.section--dark .gallery-marquee::after { background: linear-gradient(270deg, var(--bg-dark), transparent); }
.gallery-marquee:hover .gallery-item__play { background: rgba(0, 0, 0, .12); }

/* Témoignages : cartes de largeur identique dans la ligne défilante */
.gallery-marquee .testimonial { flex: 0 0 360px; width: 360px; }
.gallery-marquee .testimonial .card__body { gap: 12px; }
.gallery-marquee .testimonial .pill--warn { align-self: flex-start; font-size: .64rem; }
@media (max-width: 700px) { .gallery-marquee .testimonial { flex: 0 0 280px; width: 280px; } }

/* ── Menu d'en-tête : tient sur une seule ligne ───────────── */

.nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.nav::-webkit-scrollbar { display: none; }
.nav__cta { white-space: nowrap; }

/* Paliers : la marque et les libellés se réduisent avant de passer en burger */
@media (max-width: 1330px) { .brand__text small { display: none; } }
@media (max-width: 1260px) { .brand__text > span:first-child { font-size: 1.05rem; } .nav a { font-size: .82rem; padding: 8px 7px; } }
@media (max-width: 1080px) {
  .nav { flex-wrap: wrap; }
}

/* ── Enrichissements (JS) ──────────────────────────────────── */

.site-header.is-scrolled { box-shadow: 0 6px 22px rgba(0, 0, 0, .13); }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.4,0,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ── Grille horaire hebdomadaire ───────────────────────────── */

.schedule-grid { min-width: 720px; }
.schedule-grid th { text-align: center; }
.schedule-grid thead th:first-child, .schedule-grid__time { text-align: left; white-space: nowrap; }
.schedule-grid__time {
  font-family: var(--font-title); font-size: 1.05rem; letter-spacing: .5px;
  color: var(--primary-dark); background: var(--surface-2); width: 92px;
}
.schedule-grid__slot {
  vertical-align: top; border-left: 3px solid var(--primary-color); background: rgba(255, 107, 53, .06);
  min-width: 130px; line-height: 1.4;
}
.schedule-grid__slot strong { display: block; font-size: .92rem; }
.schedule-grid__slot .small { display: block; color: var(--muted); font-size: .78rem; }
.schedule-grid__empty { text-align: center; color: #c9ced6; }
.section--dark .schedule-grid { background: transparent; }
.section--dark .schedule-grid__empty { color: rgba(255, 255, 255, .25); }

/* ── Fiches instructeurs : dimensions identiques pour toutes les cartes ──
   Référence = première carte (Maître Avi Attlan) :
   photo 300 × 480 px, texte à droite, hauteur de carte fixe. */
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
@media (max-width: 900px) { .team-grid { grid-template-columns: 1fr; } }

.instructor-card {
  display: grid; grid-template-columns: 300px 1fr;
  height: 480px; overflow: hidden; padding: 0;
}
.instructor-card__photo {
  width: 300px; height: 480px; object-fit: cover; object-position: center 15%;
  background: var(--surface-2);
}
.instructor-card .card__body {
  padding: 26px 28px; overflow: hidden; display: flex; flex-direction: column; gap: 10px;
}
.instructor-card__name { font-size: 1.55rem; margin: 0; }
.instructor-card__bio {
  display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden;
  margin: 0; color: var(--muted); font-size: .92rem;
}
.instructor-card .pill { align-self: flex-start; }

/* Mobile : la photo passe au-dessus, à hauteur fixe, cartes toujours identiques */
@media (max-width: 620px) {
  .instructor-card { grid-template-columns: 1fr; height: auto; }
  .instructor-card__photo { width: 100%; height: 320px; }
  .instructor-card__bio { -webkit-line-clamp: 6; }
}

/* ── Mur d'images défilant sur une ligne ─────────────────────
   Même carte que la grille (.gallery-item : photo 4/3 + légende + visionneuse),
   mais sur une seule ligne qui défile en continu. */
.gallery-marquee { position: relative; overflow: hidden; padding: 4px 0 10px; }
.gallery-marquee::before, .gallery-marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 70px; z-index: 2; pointer-events: none;
}
.gallery-marquee::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.gallery-marquee::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.gallery-marquee__track {
  display: flex; gap: 16px; width: max-content;
  animation: km-marquee 70s linear infinite;
}
.gallery-marquee:hover .gallery-marquee__track,
.gallery-marquee.is-paused .gallery-marquee__track { animation-play-state: paused; }
.gallery-marquee .gallery-item { flex: 0 0 320px; width: 320px; aspect-ratio: 4 / 3; }
@media (max-width: 700px) { .gallery-marquee .gallery-item { flex: 0 0 240px; width: 240px; } }

/* Dégradés latéraux adaptés au fond de la section */
.section--soft .gallery-marquee::before { background: linear-gradient(90deg, #fff, transparent); }
.section--soft .gallery-marquee::after { background: linear-gradient(270deg, #fff, transparent); }
.section--dark .gallery-marquee::before { background: linear-gradient(90deg, var(--bg-dark), transparent); }
.section--dark .gallery-marquee::after { background: linear-gradient(270deg, var(--bg-dark), transparent); }
.gallery-marquee:hover .gallery-item__play { background: rgba(0, 0, 0, .12); }

/* Témoignages : cartes de largeur identique dans la ligne défilante */
.gallery-marquee .testimonial { flex: 0 0 360px; width: 360px; }
.gallery-marquee .testimonial .card__body { gap: 12px; }
.gallery-marquee .testimonial .pill--warn { align-self: flex-start; font-size: .64rem; }
@media (max-width: 700px) { .gallery-marquee .testimonial { flex: 0 0 280px; width: 280px; } }

/* ── Menu : sous-menu « Le club » ───────────────────────────── */

.nav {
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav__cta { white-space: nowrap; }
/* Écrans intermédiaires : le menu reste sur une ligne, la marque se réduit */
@media (max-width: 1330px) { .brand__text small { display: none; } }

/* Sous 1080 px : menu déroulant (burger) — les liens s'empilent proprement */
@media (max-width: 1080px) {
  .nav { flex-wrap: wrap; }
}

/* ── Visionneuse : cadre de dimensions identiques pour toutes les photos ──
   Le format du cadre est celui de la première photo (variable --lb-ratio). */

.lightbox { padding: 18px; }
.lightbox__panel { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 1040px; }
.lightbox__frame {
  width: 100%;
  aspect-ratio: var(--lb-ratio, 1.3333);
  background: #0b0b0b;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius);
  display: grid; place-items: center; overflow: hidden;
}
.lightbox__frame img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox__caption { color: rgba(255, 255, 255, .82); font-size: .88rem; text-align: center; margin: 0; min-height: 1.3em; }
.lightbox__bar { display: flex; align-items: center; gap: 12px; }
.lightbox__count { color: rgba(255, 255, 255, .7); font-size: .82rem; letter-spacing: .08em; min-width: 64px; text-align: center; }
.lightbox__nav {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .08); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: var(--transition);
}
.lightbox__nav:hover { background: var(--primary-color); border-color: var(--primary-color); }
@media (max-width: 700px) { .lightbox__frame { aspect-ratio: var(--lb-ratio, 1.3333); } }


/* ── Badge « Licence fédérale FFK » (section Nos instructeurs) ──
   Logo officiel de la Fédération Française de Karaté, dans sa version couleur
   verticale, sur fond blanc (aucun habillage : le fond du logo reste identique).
   Positionné dans le coin inférieur droit de la section. */

.section--badged { position: relative; }
/* Carte blanche (pas de fond bleu) : logo du Comité en haut, logo FFK en bas. */
.federation-badge {
  position: absolute; bottom: 52px; right: 20px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 196px; text-align: center;
  padding: 16px 16px 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-light);
}
.federation-badge img { width: 100%; height: auto; display: block; max-width: 132px; margin: 0 auto; }
.federation-badge span {
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--secondary-color); line-height: 1.4;
}
/* (les deux logos de la carte sont dimensionnés dans le bloc « Carte Club affilié FFK » plus bas) */
/* Sous 1180 px, le badge se place au-dessus du titre, centré */
@media (max-width: 1180px) {
  .federation-badge { position: static; margin: 0 auto 30px; width: 150px; }
}
/* ── Enrichissements (JS) ──────────────────────────────────── */

.site-header.is-scrolled { box-shadow: 0 6px 22px rgba(0, 0, 0, .13); }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.4,0,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ── Grille horaire hebdomadaire ───────────────────────────── */

.schedule-grid { min-width: 720px; }
.schedule-grid th { text-align: center; }
.schedule-grid thead th:first-child, .schedule-grid__time { text-align: left; white-space: nowrap; }
.schedule-grid__time {
  font-family: var(--font-title); font-size: 1.05rem; letter-spacing: .5px;
  color: var(--primary-dark); background: var(--surface-2); width: 92px;
}
.schedule-grid__slot {
  vertical-align: top; border-left: 3px solid var(--primary-color); background: rgba(255, 107, 53, .06);
  min-width: 130px; line-height: 1.4;
}
.schedule-grid__slot strong { display: block; font-size: .92rem; }
.schedule-grid__slot .small { display: block; color: var(--muted); font-size: .78rem; }
.schedule-grid__empty { text-align: center; color: #c9ced6; }
.section--dark .schedule-grid { background: transparent; }
.section--dark .schedule-grid__empty { color: rgba(255, 255, 255, .25); }

/* ── Fiches instructeurs : dimensions identiques pour toutes les cartes ──
   Référence = première carte (Maître Avi Attlan) :
   photo 300 × 480 px, texte à droite, hauteur de carte fixe. */
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
@media (max-width: 900px) { .team-grid { grid-template-columns: 1fr; } }

.instructor-card {
  display: grid; grid-template-columns: 300px 1fr;
  height: 480px; overflow: hidden; padding: 0;
}
.instructor-card__photo {
  width: 300px; height: 480px; object-fit: cover; object-position: center 15%;
  background: var(--surface-2);
}
.instructor-card .card__body {
  padding: 26px 28px; overflow: hidden; display: flex; flex-direction: column; gap: 10px;
}
.instructor-card__name { font-size: 1.55rem; margin: 0; }
.instructor-card__bio {
  display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden;
  margin: 0; color: var(--muted); font-size: .92rem;
}
.instructor-card .pill { align-self: flex-start; }

/* Mobile : la photo passe au-dessus, à hauteur fixe, cartes toujours identiques */
@media (max-width: 620px) {
  .instructor-card { grid-template-columns: 1fr; height: auto; }
  .instructor-card__photo { width: 100%; height: 320px; }
  .instructor-card__bio { -webkit-line-clamp: 6; }
}

/* ── Mur d'images défilant sur une ligne ─────────────────────
   Même carte que la grille (.gallery-item : photo 4/3 + légende + visionneuse),
   mais sur une seule ligne qui défile en continu. */
.gallery-marquee { position: relative; overflow: hidden; padding: 4px 0 10px; }
.gallery-marquee::before, .gallery-marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 70px; z-index: 2; pointer-events: none;
}
.gallery-marquee::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.gallery-marquee::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.gallery-marquee__track {
  display: flex; gap: 16px; width: max-content;
  animation: km-marquee 70s linear infinite;
}
.gallery-marquee:hover .gallery-marquee__track,
.gallery-marquee.is-paused .gallery-marquee__track { animation-play-state: paused; }
.gallery-marquee .gallery-item { flex: 0 0 320px; width: 320px; aspect-ratio: 4 / 3; }
@media (max-width: 700px) { .gallery-marquee .gallery-item { flex: 0 0 240px; width: 240px; } }

/* Dégradés latéraux adaptés au fond de la section */
.section--soft .gallery-marquee::before { background: linear-gradient(90deg, #fff, transparent); }
.section--soft .gallery-marquee::after { background: linear-gradient(270deg, #fff, transparent); }
.section--dark .gallery-marquee::before { background: linear-gradient(90deg, var(--bg-dark), transparent); }
.section--dark .gallery-marquee::after { background: linear-gradient(270deg, var(--bg-dark), transparent); }
.gallery-marquee:hover .gallery-item__play { background: rgba(0, 0, 0, .12); }

/* Témoignages : cartes de largeur identique dans la ligne défilante */
.gallery-marquee .testimonial { flex: 0 0 360px; width: 360px; }
.gallery-marquee .testimonial .card__body { gap: 12px; }
.gallery-marquee .testimonial .pill--warn { align-self: flex-start; font-size: .64rem; }
@media (max-width: 700px) { .gallery-marquee .testimonial { flex: 0 0 280px; width: 280px; } }

/* ── Menu d'en-tête : tient sur une seule ligne ───────────── */

.nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.nav::-webkit-scrollbar { display: none; }
.nav__cta { white-space: nowrap; }

/* Paliers : la marque et les libellés se réduisent avant de passer en burger */
@media (max-width: 1330px) { .brand__text small { display: none; } }
@media (max-width: 1260px) { .brand__text > span:first-child { font-size: 1.05rem; } .nav a { font-size: .82rem; padding: 8px 7px; } }
@media (max-width: 1080px) {
  .nav { flex-wrap: wrap; }
}

/* ── Enrichissements (JS) ──────────────────────────────────── */

.site-header.is-scrolled { box-shadow: 0 6px 22px rgba(0, 0, 0, .13); }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.4,0,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ── Grille horaire hebdomadaire ───────────────────────────── */

.schedule-grid { min-width: 720px; }
.schedule-grid th { text-align: center; }
.schedule-grid thead th:first-child, .schedule-grid__time { text-align: left; white-space: nowrap; }
.schedule-grid__time {
  font-family: var(--font-title); font-size: 1.05rem; letter-spacing: .5px;
  color: var(--primary-dark); background: var(--surface-2); width: 92px;
}
.schedule-grid__slot {
  vertical-align: top; border-left: 3px solid var(--primary-color); background: rgba(255, 107, 53, .06);
  min-width: 130px; line-height: 1.4;
}
.schedule-grid__slot strong { display: block; font-size: .92rem; }
.schedule-grid__slot .small { display: block; color: var(--muted); font-size: .78rem; }
.schedule-grid__empty { text-align: center; color: #c9ced6; }
.section--dark .schedule-grid { background: transparent; }
.section--dark .schedule-grid__empty { color: rgba(255, 255, 255, .25); }

/* ── Fiches instructeurs : dimensions identiques pour toutes les cartes ──
   Référence = première carte (Maître Avi Attlan) :
   photo 300 × 480 px, texte à droite, hauteur de carte fixe. */
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
@media (max-width: 900px) { .team-grid { grid-template-columns: 1fr; } }

.instructor-card {
  display: grid; grid-template-columns: 300px 1fr;
  height: 480px; overflow: hidden; padding: 0;
}
.instructor-card__photo {
  width: 300px; height: 480px; object-fit: cover; object-position: center 15%;
  background: var(--surface-2);
}
.instructor-card .card__body {
  padding: 26px 28px; overflow: hidden; display: flex; flex-direction: column; gap: 10px;
}
.instructor-card__name { font-size: 1.55rem; margin: 0; }
.instructor-card__bio {
  display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden;
  margin: 0; color: var(--muted); font-size: .92rem;
}
.instructor-card .pill { align-self: flex-start; }

/* Mobile : la photo passe au-dessus, à hauteur fixe, cartes toujours identiques */
@media (max-width: 620px) {
  .instructor-card { grid-template-columns: 1fr; height: auto; }
  .instructor-card__photo { width: 100%; height: 320px; }
  .instructor-card__bio { -webkit-line-clamp: 6; }
}

/* ── Mur d'images défilant sur une ligne ─────────────────────
   Même carte que la grille (.gallery-item : photo 4/3 + légende + visionneuse),
   mais sur une seule ligne qui défile en continu. */
.gallery-marquee { position: relative; overflow: hidden; padding: 4px 0 10px; }
.gallery-marquee::before, .gallery-marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 70px; z-index: 2; pointer-events: none;
}
.gallery-marquee::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.gallery-marquee::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.gallery-marquee__track {
  display: flex; gap: 16px; width: max-content;
  animation: km-marquee 70s linear infinite;
}
.gallery-marquee:hover .gallery-marquee__track,
.gallery-marquee.is-paused .gallery-marquee__track { animation-play-state: paused; }
.gallery-marquee .gallery-item { flex: 0 0 320px; width: 320px; aspect-ratio: 4 / 3; }
@media (max-width: 700px) { .gallery-marquee .gallery-item { flex: 0 0 240px; width: 240px; } }

/* Dégradés latéraux adaptés au fond de la section */
.section--soft .gallery-marquee::before { background: linear-gradient(90deg, #fff, transparent); }
.section--soft .gallery-marquee::after { background: linear-gradient(270deg, #fff, transparent); }
.section--dark .gallery-marquee::before { background: linear-gradient(90deg, var(--bg-dark), transparent); }
.section--dark .gallery-marquee::after { background: linear-gradient(270deg, var(--bg-dark), transparent); }
.gallery-marquee:hover .gallery-item__play { background: rgba(0, 0, 0, .12); }

/* Témoignages : cartes de largeur identique dans la ligne défilante */
.gallery-marquee .testimonial { flex: 0 0 360px; width: 360px; }
.gallery-marquee .testimonial .card__body { gap: 12px; }
.gallery-marquee .testimonial .pill--warn { align-self: flex-start; font-size: .64rem; }
@media (max-width: 700px) { .gallery-marquee .testimonial { flex: 0 0 280px; width: 280px; } }

/* ── Menu : sous-menu « Le club » ───────────────────────────── */

.nav {
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav__cta { white-space: nowrap; }
/* Écrans intermédiaires : le menu reste sur une ligne, la marque se réduit */
@media (max-width: 1330px) { .brand__text small { display: none; } }

/* Sous 1080 px : menu déroulant (burger) — les liens s'empilent proprement */
@media (max-width: 1080px) {
  .nav { flex-wrap: wrap; }
}

/* ── Visionneuse : cadre de dimensions identiques pour toutes les photos ──
   Le format du cadre est celui de la première photo (variable --lb-ratio). */

.lightbox { padding: 18px; }
.lightbox__panel { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 1040px; }
.lightbox__frame {
  width: 100%;
  aspect-ratio: var(--lb-ratio, 1.3333);
  background: #0b0b0b;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radius);
  display: grid; place-items: center; overflow: hidden;
}
.lightbox__frame img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox__caption { color: rgba(255, 255, 255, .82); font-size: .88rem; text-align: center; margin: 0; min-height: 1.3em; }
.lightbox__bar { display: flex; align-items: center; gap: 12px; }
.lightbox__count { color: rgba(255, 255, 255, .7); font-size: .82rem; letter-spacing: .08em; min-width: 64px; text-align: center; }
.lightbox__nav {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .08); color: #fff; font-size: 1.3rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: var(--transition);
}
.lightbox__nav:hover { background: var(--primary-color); border-color: var(--primary-color); }
@media (max-width: 700px) { .lightbox__frame { aspect-ratio: var(--lb-ratio, 1.3333); } }


/* ── Carte « Club affilié FFK » (section Nos instructeurs) ────
   Carte à FOND BLANC (aucun fond bleu) posée dans le coin droit de la section.
   Les deux logos officiels sont placés à chaque extrémité :
   en haut le Comité FFK Val de Marne, en bas la Fédération Française de Karaté. */


.federation-badge {
  position: absolute; top: 46px; right: 20px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  gap: 10px; padding: 18px 20px 16px; width: 210px; min-height: 300px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 30px rgba(20, 37, 122, .12);
  text-align: center;
}
/* Logo du haut (Comité FFK Val de Marne) et du bas (Fédération Française de Karaté) */
.federation-badge img { width: 138px; height: auto; display: block; margin: 0 auto; }
.federation-badge img.federation-badge__logo { width: 116px; margin: 0 auto; }
.federation-badge img.federation-badge__disciplines { width: 100%; max-width: 170px; margin: 4px auto; border-radius: 6px; }
.federation-badge span {
  font-size: .72rem; font-weight: 600; letter-spacing: .02em; text-transform: none;
  color: var(--secondary-color); line-height: 1.45;
}
/* « FFK » en gras et en rouge (rouge du logo fédéral) sur la première ligne,
   « Disciplines Associées » sur la seconde */
.federation-badge span b { font-weight: 800; font-size: .82rem; letter-spacing: .06em; color: #dc2d5a; }
.federation-badge::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--gradient-primary); border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
/* Sous 1180 px, la carte passe au-dessus du titre, centrée */
@media (max-width: 1180px) {
  .federation-badge {
    position: static; margin: 0 auto 30px; width: auto; max-width: 260px; min-height: 0;
  }
}


/* Nom du club en orange */
.brand__text > span:first-child { color: var(--primary-color); }
.site-footer .brand__text > span:first-child { color: var(--primary-color); }

/* ── Fond blanc garanti : section « Notre académie » (accueil) ──
   Le sélecteur d'identifiant étant prioritaire sur les classes,
   aucun autre style ne peut rendre ce fond gris ou translucide. */
#objectifs { background: #ffffff; }
#objectifs .card { background: #ffffff; }

/* ── Barre de partage du pied de page ─────────────────────────
   Reproduit la maquette fournie : le libellé (SHARE) puis les boutons
   Facebook, Twitter, LinkedIn, Telegram, WhatsApp, VK et E-mail, avec
   les icônes et les couleurs officielles.
   Les boutons (libellé, lien, ordre, affichage) se gèrent dans le
   back-office : Espace membre → Admin → Réseaux de partage. */
.share-bar {
  display: flex; align-items: center; justify-content: center; gap: 24px;
  margin-top: 30px; padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.share-bar__label {
  flex: 0 0 auto; font-family: var(--font-body); font-size: 1.3rem; font-weight: 800;
  letter-spacing: .02em; text-transform: uppercase; color: #ffffff; line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}
.share-bar__buttons { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.site-footer .share-btn {
  display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px;
  border-radius: 4px; color: #ffffff; font-size: .95rem; font-weight: 700; line-height: 1;
  letter-spacing: .01em; text-decoration: none; text-shadow: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: var(--transition);
}
.site-footer .share-btn svg { width: 19px; height: 19px; flex: 0 0 auto; fill: currentColor; }
.site-footer .share-btn span { white-space: nowrap; }
.site-footer .share-btn:hover, .site-footer .share-btn:focus-visible {
  color: #ffffff; text-decoration: none; filter: brightness(1.12); transform: translateY(-1px);
}
.share-btn--facebook { background: #3b5998; }
.share-btn--twitter { background: #00acee; }
.share-btn--linkedin { background: #0077b5; }
.share-btn--telegram { background: #29a9eb; }
.share-btn--whatsapp { background: #25d366; }
.share-btn--vk { background: #4a76a8; }
.share-btn--email { background: #e2574c; }

@media (max-width: 900px) {
  .share-bar { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; }
  .share-bar__buttons { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 4px; gap: 6px; justify-content: center; }
  .site-footer .share-btn { height: 42px; padding: 0 14px; font-size: .88rem; }
}

/* ── Mur PHOTO : cartes blanches « polaroïd » ─────────────────
   Comme la maquette fournie : photo encadrée de blanc, puis le titre en
   gras (majuscules) et la précision en gris, centrés sous la photo.
   Le format de la carte est LÉGÈREMENT plus haut que large (5 / 6) :
   une carte de 320 px de large mesure 384 px de haut.
   Le fonctionnement est inchangé : le clic ouvre la visionneuse. */
.gallery-item:not(.gallery-item--video) {
  display: flex; flex-direction: column; aspect-ratio: 5 / 6;
  background: #ffffff; border-radius: 4px; padding: 12px 12px 0;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
  transition: box-shadow .25s ease, transform .25s ease;
}
.gallery-item:not(.gallery-item--video):hover {
  box-shadow: 0 16px 34px rgba(0, 0, 0, .22); transform: translateY(-3px);
}
.gallery-item:not(.gallery-item--video) img {
  flex: 1 1 auto; min-height: 0; width: 100%; height: auto; aspect-ratio: auto; object-fit: cover;
  border-radius: 2px; box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.gallery-item:not(.gallery-item--video):hover img { transform: none; }
.gallery-item:not(.gallery-item--video) .gallery-item__caption {
  flex: 0 0 auto; position: static; inset: auto; background: none; color: #1f2430;
  padding: 15px 6px 16px; text-align: center; font-size: .95rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em; line-height: 1.25;
}
.gallery-item:not(.gallery-item--video) .gallery-item__caption strong { font-weight: 800; }
.gallery-item:not(.gallery-item--video) .gallery-item__caption span {
  display: block; margin-top: 6px; color: #6b7280; font-size: .84rem;
  font-weight: 500; text-transform: none; letter-spacing: 0;
}
/* Ligne défilante : même format « polaroïd », texte aligné en bas de carte. */
.gallery-marquee .gallery-item:not(.gallery-item--video) { aspect-ratio: 5 / 6; }
.gallery-marquee .gallery-item:not(.gallery-item--video) .gallery-item__caption { min-height: 78px; }

/* ── Mur VIDÉOS : pellicule cinéma ────────────────────────────
   Cadre noir avec perforations blanches en haut et en bas, vignette au
   centre et bouton de lecture blanc — comme la maquette fournie.
   Le fonctionnement est inchangé : le clic lance la vidéo dans la page. */
.gallery-item--video {
  aspect-ratio: 16 / 9;
  background-color: #0d0d0d;
  background-image:
    repeating-linear-gradient(90deg, #ffffff 0 10px, transparent 10px 20px),
    repeating-linear-gradient(90deg, #ffffff 0 10px, transparent 10px 20px);
  background-size: calc(100% - 26px) 9px, calc(100% - 26px) 9px;
  background-position: 13px 4px, 13px calc(100% - 4px);
  background-repeat: no-repeat;
  padding: 16px 13px;
  border-radius: 5px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .3);
}
.gallery-item--video img { border-radius: 2px; }
.gallery-item--video:hover img { transform: none; }
.gallery-item--video .gallery-item__play { background: rgba(0, 0, 0, .18); }
.gallery-item--video .gallery-item__play span {
  width: 64px; height: 64px; background: rgba(255, 255, 255, .93); color: #14161c;
  font-size: 1.05rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.gallery-item--video:hover .gallery-item__play span { transform: scale(1.06); }
@media (max-width: 700px) {
  .gallery-item--video { padding: 12px 10px; background-size: calc(100% - 20px) 7px, calc(100% - 20px) 7px; background-position: 10px 3px, 10px calc(100% - 3px); }
  .gallery-item--video .gallery-item__play span { width: 50px; height: 50px; }
}

/* ── Archives de presse : les unes de journal ─────────────────
   Reproduit la maquette fournie : fond très sombre, grand titre
   « ARCHIVES DE PRESSE », sous-titre, puis 4 unes de journal en papier
   crème. Chaque une conserve SA photo à l'intérieur (cliquable). */
.section--archives { background: #0b0d12; }
.section--archives .section-head { margin-bottom: 38px; }
.section-head--archives h2 {
  font-family: var(--font-body); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.8rem, 4vw, 2.9rem); letter-spacing: .01em; color: #ffffff; line-height: 1.05;
}
.section-head--archives p { color: #9aa3ae; font-size: 1rem; }
.section-head--archives::after { background: rgba(255, 255, 255, .18); }

.press-archives {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; align-items: stretch;
}
@media (max-width: 1100px) { .press-archives { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .press-archives { grid-template-columns: 1fr; } }

.newspaper {
  position: relative;
  display: flex; flex-direction: column; margin: 0; padding: 22px 20px 20px;
  background: #f4efe3; color: #1b1c1e; border: 1px solid rgba(0, 0, 0, .22); border-radius: 3px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  font-family: Georgia, 'Times New Roman', serif;
}
.newspaper__header {
  margin: 0; text-align: center; font-size: .58rem; letter-spacing: .2em;
  text-transform: uppercase; color: #565046;
}
.newspaper__masthead {
  margin: 10px 0 0; text-align: center; font-size: 1.34rem; font-style: italic; font-weight: 800;
  line-height: 1.12; letter-spacing: -.01em; color: #16171a;
}
.newspaper__issue {
  display: flex; justify-content: space-between; gap: 8px; margin: 13px 0 14px; padding: 5px 0;
  border-top: 1px solid #1b1c1e; border-bottom: 1px solid #1b1c1e;
  font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: #2c2d30; white-space: nowrap;
}
.newspaper__headline {
  margin: 0; font-size: 1.02rem; font-style: italic; font-weight: 800; line-height: 1.2; color: #111214;
}
.newspaper__byline { margin: 7px 0 12px; font-size: .72rem; font-style: italic; color: #43423d; }
.newspaper__photo {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin: 0 0 12px;
  border: 1px solid rgba(0, 0, 0, .2); filter: grayscale(.15) contrast(1.03);
}
.newspaper__body {
  margin: 0; font-size: .78rem; line-height: 1.55; text-align: justify; hyphens: auto; color: #26272a;
}
.newspaper__link { margin: 10px 0 0; font-size: .74rem; }
.newspaper__link a { color: #16171a; text-decoration: underline; }
.newspaper__zoom {
  margin: 12px 0 0; padding-top: 8px; border-top: 1px dotted rgba(0, 0, 0, .25);
  font-size: .6rem; font-style: italic; text-align: center; color: #6a655c;
}
.newspaper__photo:hover { filter: none; }

/* ── Sens de défilement : mur vidéos (gauche → droite) ───────
   Le mur d'images et les témoignages défilent de la droite vers la gauche
   (animation km-marquee) ; le mur vidéos défile dans l'autre sens. */
@keyframes km-marquee-reverse {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
#gallery-videos-marquee .gallery-marquee__track { animation-name: km-marquee-reverse; }

/* ── Partenaires : deux lignes qui défilent en sens inverse ───
   Ligne du haut : droite → gauche. Ligne du bas : gauche → droite. */
.partner-marquee { display: grid; gap: 16px; }
.partner-marquee__row {
  position: relative; overflow: hidden; padding: 4px 0;
}
.partner-marquee__row::before, .partner-marquee__row::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 70px; z-index: 2; pointer-events: none;
}
.partner-marquee__row::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.partner-marquee__row::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.partner-marquee__track {
  display: flex; gap: 18px; width: max-content;
  animation: km-marquee 55s linear infinite;
}
.partner-marquee__track--reverse { animation-name: km-marquee-reverse; }
.partner-marquee:hover .partner-marquee__track { animation-play-state: paused; }
.partner-marquee .partner-logo { flex: 0 0 200px; width: 200px; min-height: 100px; }
@media (max-width: 700px) {
  .partner-marquee .partner-logo { flex: 0 0 150px; width: 150px; min-height: 88px; padding: 14px; }
  .partner-marquee .partner-logo img { max-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .partner-marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  #gallery-videos-marquee .gallery-marquee__track { animation: none; }
}

/* ── Lecture d'une une de presse dans la page ─────────────────
   Le cadre de la visionneuse devient un vrai article lisible :
   papier crème, texte complet, défilement si nécessaire. */
.lightbox__frame--article {
  aspect-ratio: auto; width: 100%; max-width: 720px; max-height: 74vh;
  overflow-y: auto; background: #f4efe3; border: 1px solid rgba(0, 0, 0, .3);
  border-radius: 3px; padding: 26px 28px 30px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}
.press-article { font-family: Georgia, 'Times New Roman', serif; color: #1b1c1e; }
.press-article .newspaper__masthead { font-size: 1.7rem; }
.press-article .newspaper__headline { font-size: 1.35rem; margin-top: 2px; }
.press-article .newspaper__photo { aspect-ratio: 16 / 10; margin: 14px 0 16px; }
.press-article .newspaper__body { font-size: .95rem; line-height: 1.7; }
.lightbox__frame--article .newspaper__issue { font-size: .62rem; }
@media (max-width: 700px) {
  .lightbox__frame--article { padding: 18px 16px 22px; max-height: 68vh; }
  .press-article .newspaper__masthead { font-size: 1.35rem; }
  .press-article .newspaper__headline { font-size: 1.1rem; }
  .press-article .newspaper__body { font-size: .88rem; }
}

/* ── Mouvement au survol : photos, vidéos et unes de presse ───
   Chaque carte bouge quand la souris la survole : elle se soulève,
   s'incline légèrement et son ombre s'accentue. Le bandeau se met en
   pause pendant le survol (déjà en place), le mouvement est donc bien
   visible. Sur téléphone/tablette (pas de survol) rien ne change. */

/* 1. Photos « polaroïd » : la carte se soulève et s'incline. */
.gallery-item:not(.gallery-item--video) {
  transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease;
}
.gallery-item:not(.gallery-item--video):hover {
  transform: translateY(-10px) rotate(-1.4deg) scale(1.02);
  box-shadow: 0 26px 48px rgba(0, 0, 0, .28);
  z-index: 3;
}
.gallery-item:not(.gallery-item--video) img { transition: filter .3s ease, transform .3s ease; }
.gallery-item:not(.gallery-item--video):hover img { filter: brightness(1.05) saturate(1.06); }

/* 2. Vidéos « pellicule » : la carte se soulève, le bouton de lecture grossit. */
.gallery-item--video {
  transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease;
}
.gallery-item--video:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 24px 48px rgba(0, 0, 0, .5);
  z-index: 3;
}
.gallery-item--video .gallery-item__play span { transition: transform .3s ease, box-shadow .3s ease; }
.gallery-item--video:hover .gallery-item__play span {
  transform: scale(1.14);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .45), 0 0 0 6px rgba(255, 255, 255, .16);
}

/* 3. Unes de presse : le journal se soulève et se redresse. */
.newspaper {
  transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease;
}
.newspaper:hover {
  transform: translateY(-10px) rotate(-.8deg) scale(1.015);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .62);
  z-index: 3;
}
.newspaper img { transition: filter .3s ease; }
.newspaper:hover .newspaper__photo { filter: grayscale(0) contrast(1.06); }

/* Les cartes qui bougent passent devant leurs voisines. */
.gallery-marquee__track, .press-archives { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .gallery-item:not(.gallery-item--video):hover,
  .gallery-item--video:hover,
  .newspaper:hover { transform: none; }
}
/* Marge supplémentaire : le mouvement des cartes (soulèvement) reste
   entièrement visible dans les bandeaux qui défilent. */
.gallery-marquee { padding: 20px 0 24px; }
@media (max-width: 700px) { .gallery-marquee { padding: 14px 0 18px; } }

/* ── Section presse : rangée qui défile et flèches ─────────────
   Les 4 unes tiennent sur une rangée ; s'il y en a plus (ajoutées dans
   l'espace membre), des flèches ‹ › apparaissent de chaque côté pour
   faire défiler la rangée. */
.press-carousel { position: relative; }
.press-archives {
  display: flex; gap: 22px; align-items: stretch;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 22px 4px 26px; margin: -18px -4px -14px;
  scrollbar-width: none;
}
.press-archives::-webkit-scrollbar { display: none; }
.press-archives .newspaper { flex: 0 0 calc((100% - 66px) / 4); scroll-snap-align: start; }
@media (max-width: 1100px) { .press-archives .newspaper { flex: 0 0 calc((100% - 22px) / 2); } }
@media (max-width: 620px) { .press-archives { gap: 16px; } .press-archives .newspaper { flex: 0 0 84%; } }

.press-nav {
  position: absolute; top: 46%; transform: translateY(-50%); z-index: 4;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(12, 14, 20, .78); color: #ffffff; font-size: 1.5rem; line-height: 1;
  display: grid; place-items: center; cursor: pointer; transition: var(--transition);
  backdrop-filter: blur(3px);
}
.press-nav:hover:not(:disabled) { background: var(--primary-color); border-color: var(--primary-color); }
.press-nav:disabled { opacity: .35; cursor: default; }
.press-nav--prev { left: -14px; }
.press-nav--next { right: -14px; }
@media (max-width: 1100px) { .press-nav--prev { left: -6px; } .press-nav--next { right: -6px; } }
@media (max-width: 620px) { .press-nav { width: 38px; height: 38px; font-size: 1.2rem; } }

/* ── Archives de presse : papier ancien, design moderne ───────
   Les unes prennent l'aspect de journaux anciens : papier jauni avec sa
   trame et sa pliure, cadre intérieur, double filet sous le nom du journal,
   lettrine en début d'article… le tout présenté avec des codes actuels :
   fond sombre dégradé, filet orange, ombres douces, légère inclinaison. */

/* 1. La section : salle d'archives moderne */
.section--archives {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255, 107, 53, .12), transparent 58%),
    linear-gradient(180deg, #0a0c11 0%, #0f1218 55%, #0a0c11 100%);
}
.section-head--archives h2 { position: relative; padding-bottom: 18px; }
.section-head--archives h2::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 168px; height: 7px; border-top: 1px solid rgba(255, 255, 255, .28); border-bottom: 1px solid rgba(255, 255, 255, .28);
  background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
}
.section-head--archives p {
  margin-top: 12px; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: #8b95a1;
}
.section-head--archives::after { display: none; }

/* 2. La une : papier jauni, trame, taches, pliure, cadre intérieur */
.newspaper {
  background-color: #fdfdfa;
  background-image: none;
  border: 1px solid #d9d5cb;
  outline: 1px solid rgba(72, 56, 30, .14);
  outline-offset: 3px;
  border-radius: 3px;
  padding: 9px;
  box-shadow: 0 22px 42px rgba(0, 0, 0, .48);
}
.newspaper::after { content: none; }   /* plus aucune pliure */
/* Légère inclinaison « pile d'archives » (annulée au survol). */
.press-archives .newspaper:nth-child(odd) { transform: rotate(-.4deg); }
.press-archives .newspaper:nth-child(even) { transform: rotate(.35deg); }
.press-archives .newspaper:hover { transform: translateY(-10px) rotate(-.7deg) scale(1.02); }

/* 3. Composition : bandeau à filets, nom du journal à double filet */
.newspaper__header {
  display: flex; align-items: center; gap: 9px; justify-content: center;
  font-size: .55rem; letter-spacing: .26em; text-transform: uppercase; color: #5c5344;
}
.newspaper__header::before, .newspaper__header::after {
  content: ""; flex: 1 1 auto; height: 1px; background: rgba(72, 56, 30, .35);
}
.newspaper__masthead {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 1.44rem; padding: 9px 0 11px; border-bottom: 3px double rgba(30, 25, 15, .55);
  color: #131208; text-shadow: 0 1px 0 rgba(255, 255, 255, .65);
}
.newspaper__masthead::before, .newspaper__masthead::after {
  content: "✦"; font-style: normal; font-size: .5rem; color: rgba(133, 51, 26, .65);
}
.newspaper__issue {
  margin: 11px 0 14px; padding: 6px 2px;
  border-top: 1px solid rgba(30, 25, 15, .5); border-bottom: 1px solid rgba(30, 25, 15, .5);
  font-size: .53rem; letter-spacing: .14em; color: #3b3327;
}
.newspaper__headline {
  font-size: 1.08rem; line-height: 1.16; color: #12110c;
  padding-bottom: 9px; border-bottom: 1px solid rgba(72, 56, 30, .3);
}
.newspaper__byline {
  margin: 8px 0 12px; font-size: .66rem; font-style: normal;
  letter-spacing: .07em; text-transform: uppercase; color: #6c6150;
}
.newspaper__photo {
  border: 1px solid rgba(60, 45, 25, .38); box-shadow: 0 2px 7px rgba(60, 45, 25, .28);
  filter: grayscale(.9) contrast(1.1) sepia(.14);
}
.newspaper:hover .newspaper__photo { filter: grayscale(.15) contrast(1.06) sepia(.05); }
.newspaper__body { font-size: .79rem; line-height: 1.62; color: #2b2419; }
.newspaper__body::first-letter {          /* lettrine, comme dans la presse ancienne */
  float: left; font-size: 2.7em; line-height: .8; padding: 3px 7px 0 0; font-weight: 700; color: #291f14;
}
.newspaper__zoom {
  border-top: 1px dotted rgba(72, 56, 30, .45); margin-top: 13px; padding-top: 8px;
  font-size: .58rem; letter-spacing: .05em; color: #7c7260;
}
.newspaper__link a { color: #8a3a1d; }

/* 4. Lecture d'une une : même papier, texte sur deux colonnes */
.lightbox__frame--article {
  background-color: #f2ecdb;
  background-image:
    radial-gradient(ellipse 55% 26% at 10% 3%, rgba(150, 120, 70, .08), transparent 70%),
    radial-gradient(ellipse 60% 30% at 92% 99%, rgba(138, 108, 58, .09), transparent 72%);
  border-color: rgba(72, 56, 30, .4);
}
.press-article .newspaper__body {
  column-count: 2; column-gap: 30px; column-rule: 1px solid rgba(72, 56, 30, .28);
}
.press-article .newspaper__body::first-letter { font-size: 3.1em; }
@media (max-width: 720px) {
  .press-article .newspaper__body { column-count: 1; column-rule: 0; }
  .newspaper { padding: 20px 18px 18px; }
  .newspaper__masthead { font-size: 1.26rem; }
  .press-archives .newspaper:nth-child(odd), .press-archives .newspaper:nth-child(even) { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .press-archives .newspaper:nth-child(odd), .press-archives .newspaper:nth-child(even) { transform: none; }
}

/* ── Bandeau de une, manchette gothique et cachet ─────────────
   Trois détails de presse ancienne ajoutés aux unes :
   · le nom du journal est composé en Gothic Textura (police libre OFL) ;
   · le titre de l'article devient un BANDEAU qui barre toute la largeur ;
   · un cachet d'encre « Archives du club » est tamponné sur le papier. */

/* 1. Manchette en Gothic Textura (repli : serif si la police manque) */
.newspaper__masthead {
  font-family: var(--font-gothic); font-style: normal; font-weight: 400;
  font-size: 1.34rem; line-height: 1.12; letter-spacing: 0;
  padding: 10px 0 12px;
}
.press-article .newspaper__masthead { font-size: 2rem; line-height: 1.05; }
@media (max-width: 620px) {
  .newspaper__masthead { font-size: 1.15rem; }
  .press-article .newspaper__masthead { font-size: 1.55rem; }
}

/* 2. Bandeau de une : le titre barre toute la largeur de la page */
.newspaper__headline {
  display: block; text-align: center; text-transform: uppercase; font-style: italic;
  font-size: 1rem; font-weight: 800; letter-spacing: .025em; line-height: 1.2;
  padding: 9px 2px 10px; margin: 0;
  border-top: 3px double rgba(30, 25, 15, .62);
  border-bottom: 1px solid rgba(30, 25, 15, .45);
}
.press-article .newspaper__headline { font-size: 1.32rem; padding: 12px 4px 13px; }

/* 3. Cachet de tampon, à l'encre rouge délavée */
.newspaper__stamp {
  position: absolute; right: 12px; bottom: 14px; z-index: 2;
  padding: 5px 11px 4px; border: 2px solid rgba(152, 46, 34, .55); border-radius: 5px;
  font-family: var(--font-body); font-size: .56rem; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase; color: rgba(152, 46, 34, .62);
  transform: rotate(-8deg); mix-blend-mode: multiply; pointer-events: none;
  box-shadow: inset 0 0 0 3px rgba(152, 46, 34, .1);
}
.newspaper__stamp--reader { bottom: 18px; right: 18px; font-size: .64rem; padding: 7px 14px 6px; }
.newspaper:hover .newspaper__stamp { color: rgba(152, 46, 34, .72); }

/* Le cachet ne doit pas passer par-dessus la visionneuse */
.lightbox .newspaper__stamp { z-index: 1; }

/* Pellicule sans photo (vidéo ajoutée sans vignette) : fond sombre, pas d'image cassée. */
.gallery-item__noimg {
  display: block; width: 100%; height: 100%; border-radius: 2px;
  background: linear-gradient(135deg, #232733 0%, #14171e 55%, #0c0e13 100%);
}

/* ── Unes de presse : mise en page d'après la maquette fournie ─
   Feuille blanche extérieure + papier crème, bandeau noir avec le nom du
   journal en Gothic Textura, ligne numéro / date / prix, bandeau de titre,
   signature, photo légendée, texte sur DEUX colonnes avec lettrine, puis
   barre « Source … LIRE — ». Le cachet du club reste apposé sur le papier. */

/* 1. Feuille extérieure (blanche) et papier crème */
.newspaper {
  background: #fdfdfa; border: 1px solid #d9d5cb; border-radius: 3px;
  padding: 9px; box-shadow: 0 26px 48px rgba(0, 0, 0, .5);
  display: flex; flex-direction: column;
}
.newspaper__sheet {
  position: relative; flex: 1 1 auto; display: flex; flex-direction: column;
  /* Teinte UNIE (aucune pliure, aucun dégradé) : seulement deux taches d'âge rondes. */
  background-color: #f2ecdb;
  background-image:
    radial-gradient(ellipse 55% 30% at 10% 4%, rgba(150, 120, 70, .09), transparent 70%),
    radial-gradient(ellipse 60% 32% at 92% 98%, rgba(138, 108, 58, .10), transparent 72%);
  border: 1px solid rgba(72, 56, 30, .3);
  padding-bottom: 2px;
}
.newspaper__sheet::after {          /* pliure du papier */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(101deg, transparent 47%, rgba(90, 70, 40, .10) 49.4%,
    rgba(255, 255, 255, .45) 50.4%, transparent 53%);
  opacity: .5;
}

/* 2. Bandeau noir : mentions + nom du journal */
.newspaper__band {
  background: linear-gradient(180deg, #171a21 0%, #0b0d11 100%);
  padding: 13px 12px 15px; text-align: center;
  border-bottom: 3px double rgba(0, 0, 0, .55);
}
.newspaper__kicker {
  margin: 0 0 4px; font-size: .5rem; letter-spacing: .22em;
  text-transform: uppercase; color: #e8e2d2;
}
.newspaper__masthead {
  margin: 6px 0 0; font-family: var(--font-gothic); font-weight: 400; font-style: normal;
  font-size: 1.32rem; line-height: 1.04; letter-spacing: .01em; text-transform: uppercase;
  color: #f7f3e6; border: 0; padding: 0; text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.newspaper__masthead::before, .newspaper__masthead::after { content: none; }

/* 3. Ligne numéro / date / prix */
.newspaper__issue {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 10px;
  margin: 0; padding: 9px 10px 8px; border: 0; border-bottom: 1px solid rgba(40, 32, 18, .55);
  font-family: Georgia, 'Times New Roman', serif; font-size: .56rem;
  letter-spacing: .12em; text-transform: uppercase; color: #35301f;
}
.newspaper__issue-num { font-weight: 700; font-size: .64rem; }
.newspaper__issue span + span::before { content: "·"; margin-right: 8px; color: rgba(60, 50, 30, .6); }

/* 4. Bandeau de titre, signature, photo légendée */
.newspaper__headline {
  margin: 0; padding: 13px 10px 11px; text-align: center; text-transform: uppercase;
  font-family: Georgia, 'Times New Roman', serif; font-style: normal; font-weight: 700;
  font-size: 1.02rem; line-height: 1.16; letter-spacing: .01em; color: #12110c;
  border-top: 0; border-bottom: 1px solid rgba(40, 32, 18, .4);
}
.newspaper__byline {
  margin: 0; padding: 9px 10px 11px; text-align: center;
  font-family: Georgia, 'Times New Roman', serif; font-style: italic;
  font-size: .74rem; letter-spacing: 0; text-transform: none; color: #3d3427;
}
.newspaper__figure { margin: 0 10px 12px; }
.newspaper__photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border: 1px solid rgba(50, 40, 22, .45); filter: grayscale(1) contrast(1.08); }
.newspaper:hover .newspaper__photo { filter: grayscale(.25) contrast(1.05); }
.newspaper__photocap {
  margin: 0; padding: 5px 6px; background: #e9e5d9; border: 1px solid #d6d1c3; border-top: 0;
  font-size: .5rem; letter-spacing: .1em; text-transform: uppercase; text-align: center; color: #5b564a;
}

/* 5. Texte sur deux colonnes, avec lettrine */
.newspaper__body {
  margin: 0; padding: 2px 10px 12px; column-count: 2; column-gap: 13px;
  column-rule: 1px solid rgba(60, 48, 26, .22);
  font-family: Georgia, 'Times New Roman', serif; font-size: .68rem; line-height: 1.5;
  text-align: justify; hyphens: auto; color: #262014;
}
.newspaper__body::first-letter {
  float: left; font-size: 2.9em; line-height: .78; padding: 3px 6px 0 0; font-weight: 700; color: #241c10;
}

/* 6. Barre de bas de une : source + LIRE — */
.newspaper__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: auto 10px 11px; padding: 6px 9px;
  background: #e9e5d9; border: 1px solid #d6d1c3;
  font-size: .5rem; letter-spacing: .09em; text-transform: uppercase; color: #5b564a;
}
.newspaper__read {
  flex: 0 0 auto; font-weight: 700; letter-spacing: .16em; color: #1a1813;
  text-decoration: none; border-bottom: 1px solid currentColor; cursor: pointer;
}
.newspaper__read:hover { color: #8a3a1d; }

/* 7. Cachet conservé, apposé sur le bas du papier */
.newspaper__stamp {
  right: 14px; bottom: 16px;
  border-color: rgba(152, 46, 34, .6); color: rgba(152, 46, 34, .68);
}
.newspaper__stamp--reader { bottom: 20px; right: 20px; }

/* 8. Lecture plein écran : même journal, en plus grand */
.newspaper__sheet--reader { border: 1px solid rgba(72, 56, 30, .35); }
.press-article .newspaper__band { padding: 20px 18px 22px; }
.press-article .newspaper__kicker { font-size: .6rem; }
.press-article .newspaper__masthead { font-size: 2.1rem; }
.press-article .newspaper__issue { font-size: .66rem; }
.press-article .newspaper__issue-num { font-size: .78rem; }
.press-article .newspaper__headline { font-size: 1.5rem; padding: 18px 14px 16px; }
.press-article .newspaper__byline { font-size: .9rem; }
.press-article .newspaper__figure { margin: 0 18px 16px; }
.press-article .newspaper__photocap { font-size: .58rem; }
.press-article .newspaper__body { font-size: .84rem; line-height: 1.62; padding: 2px 18px 16px; column-gap: 28px; }
.press-article .newspaper__foot { margin: auto 18px 16px; padding: 8px 12px; font-size: .58rem; }

/* 9. Flèches de défilement (maquette : pastilles sombres hors des journaux) */
.press-nav {
  width: 44px; height: 44px; font-size: 1.6rem; font-weight: 400;
  background: #2a1c07; border: 1px solid rgba(246, 242, 230, .8); color: #f6f2e6;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
.press-nav:hover:not(:disabled) { background: #3d2a0c; border-color: #f6f2e6; color: #ffffff; }
.press-nav:disabled { opacity: .35; }
.press-nav--prev { left: -66px; }
.press-nav--next { right: -66px; }
@media (max-width: 1280px) { .press-nav--prev { left: -10px; } .press-nav--next { right: -10px; } }
@media (max-width: 700px) {
  .press-nav { width: 38px; height: 38px; font-size: 1.3rem; }
  .newspaper__body { column-count: 1; column-rule: 0; }
  .newspaper__masthead { font-size: 1.18rem; }
}

/* 10. Inclinaison « pile d'archives » conservée, annulée au survol */
.press-archives .newspaper:nth-child(odd) { transform: rotate(-.4deg); }
.press-archives .newspaper:nth-child(even) { transform: rotate(.35deg); }
.press-archives .newspaper:hover { transform: translateY(-10px) rotate(-.6deg) scale(1.02); }

/* ── Bandeau noir identique à la maquette du club ─────────────
   Mentions en petites capitales espacées sur plusieurs lignes, puis le nom
   du journal en Gothic Textura blanc, cadré au centre du bandeau.
   (La pliure en travers du papier et l'inclinaison des unes sont retirées.) */

.newspaper__band {
  background: linear-gradient(180deg, #15181e 0%, #0d0f14 55%, #0a0c10 100%);
  padding: 17px 14px 19px; text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.newspaper__kickers { margin: 0; }
.newspaper__kicker {
  display: block; margin: 0; padding: 0;
  font-family: Georgia, 'Times New Roman', serif; font-size: .53rem;
  letter-spacing: .3em; text-transform: uppercase; line-height: 1.75;
  color: #efe9da; text-indent: .3em;
}
.newspaper__masthead {
  margin: 9px 0 0; font-family: var(--font-gothic); font-weight: 400; font-style: normal;
  font-size: 1.52rem; line-height: 1.02; letter-spacing: .01em;
  text-transform: uppercase; text-wrap: balance;
  color: #f8f4e7; text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

/* Plus de pliure en travers sur le papier */
.newspaper__sheet::after { content: none; }

/* Les unes restent bien droites (comme sur la maquette) */
.press-archives .newspaper:nth-child(odd),
.press-archives .newspaper:nth-child(even) { transform: none; }
.press-archives .newspaper:hover { transform: translateY(-10px); }

/* Lecture plein écran : même bandeau, en plus grand */
.press-article .newspaper__band { padding: 24px 20px 26px; }
.press-article .newspaper__kicker { font-size: .64rem; letter-spacing: .32em; line-height: 1.8; }
.press-article .newspaper__masthead { font-size: 2.35rem; margin-top: 12px; }

@media (max-width: 700px) {
  .newspaper__band { padding: 14px 10px 16px; }
  .newspaper__kicker { font-size: .48rem; letter-spacing: .22em; }
  .newspaper__masthead { font-size: 1.28rem; }
  .press-article .newspaper__masthead { font-size: 1.7rem; }
}

/* ── Bandeau noir : reproduction exacte du zoom fourni ────────
   Quatre lignes centrées sur un fond noir neutre :
     1-2. les mentions en petites capitales DORÉES très espacées
          (ARCHIVES NATIONALES · / KRAV MAGA PARIS) ;
     3.   la grande ligne du nom du journal en serif Didone BLANC ;
     4.   le complément du nom, en petites capitales dorées (DU KRAV MAGA). */

.newspaper__band {
  background: linear-gradient(180deg, #1c1c1c 0%, #141414 40%, #0b0b0b 100%);
  padding: 16px 14px 17px; text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, .4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}
.newspaper__kickers { margin: 0 0 2px; }
.newspaper__kicker {
  display: block; margin: 0; padding: 0;
  font-family: var(--font-didone); font-weight: 700; font-size: .5rem;
  letter-spacing: .34em; text-transform: uppercase; line-height: 1.9;
  color: #cfc09a; text-indent: .34em;
}
.newspaper__masthead {
  margin: 7px 0 0; font-family: var(--font-didone); font-weight: 700;
  font-size: 1.16rem; line-height: 1.02; letter-spacing: .005em;
  text-transform: uppercase; text-wrap: balance;
  color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, .7), 0 0 12px rgba(255, 255, 255, .12);
}
.newspaper__masthead-sub {
  margin: 5px 0 0; font-family: var(--font-didone); font-weight: 700;
  font-size: .5rem; letter-spacing: .34em; text-transform: uppercase;
  line-height: 1.7; color: #cfc09a; text-indent: .34em;
}

/* La même famille Didone donne son caractère d'époque au reste de la une */
.newspaper__headline {
  font-family: var(--font-didone); font-weight: 700;
  font-size: .98rem; line-height: 1.18; letter-spacing: .005em;
}
.newspaper__byline { font-family: var(--font-didone); font-weight: 400; font-size: .72rem; }
.newspaper__issue { font-family: var(--font-didone); font-weight: 400; }
.newspaper__photocap, .newspaper__foot { font-family: var(--font-body); }

/* Lecture plein écran : bandeau agrandi dans les mêmes proportions */
.press-article .newspaper__band { padding: 24px 20px 26px; }
.press-article .newspaper__kicker,
.press-article .newspaper__masthead-sub { font-size: .62rem; letter-spacing: .36em; }
.press-article .newspaper__masthead { font-size: 2.15rem; margin-top: 10px; }
.press-article .newspaper__headline { font-size: 1.42rem; }

@media (max-width: 700px) {
  .newspaper__band { padding: 13px 10px 14px; }
  .newspaper__kicker, .newspaper__masthead-sub { font-size: .44rem; letter-spacing: .24em; }
  .newspaper__masthead { font-size: 1.02rem; }
  .press-article .newspaper__masthead { font-size: 1.6rem; }
}

/* ── Barre de bas de une : lien « Lire l'article » toujours entier ─
   La mention de source peut être longue : elle se réduit proprement
   (points de suspension) tandis que le lien reste TOUJOURS affiché en
   entier, sur une seule ligne et bien lisible. */
.newspaper__foot {
  flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 6px 10px; font-size: .56rem; letter-spacing: .08em;
}
.newspaper__source {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.newspaper__read {
  flex: 0 0 auto; white-space: nowrap; font-size: .6rem; letter-spacing: .1em;
  text-transform: none; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
}
.newspaper__read span { font-size: .72em; }
.newspaper__read--hint {
  border-bottom: 0; font-style: italic; font-weight: 400; color: #6a6459; cursor: default;
}
.press-article .newspaper__foot { font-size: .64rem; }
.press-article .newspaper__read { font-size: .72rem; }
@media (max-width: 700px) {
  .newspaper__foot { font-size: .52rem; }
  .newspaper__read { font-size: .56rem; }
}

/* ── Papier SANS aucune pliure ni dégradé diagonal ────────────
   Le papier est désormais d'une teinte UNIE : plus aucune ligne, pliure
   ou dégradé diagonal visible. Seules restent deux très légères marques
   d'âge dans les angles (taches rondes) et la trame de fibres verticale. */
.newspaper__sheet {
  background-color: #f2ecdb !important;
  background-image:
    radial-gradient(ellipse 55% 30% at 10% 4%, rgba(150, 120, 70, .09), transparent 70%),
    radial-gradient(ellipse 60% 32% at 92% 98%, rgba(138, 108, 58, .10), transparent 72%) !important;
  box-shadow: none !important;
}
.newspaper__sheet::after { content: none !important; }
.newspaper {
  box-shadow: 0 22px 42px rgba(0, 0, 0, .48) !important;
}
/* La lecture plein écran utilise le même papier uni */
.lightbox__frame--article,
.newspaper__sheet--reader {
  background-color: #f2ecdb !important;
  background-image:
    radial-gradient(ellipse 55% 26% at 10% 3%, rgba(150, 120, 70, .08), transparent 70%),
    radial-gradient(ellipse 60% 30% at 92% 99%, rgba(138, 108, 58, .09), transparent 72%) !important;
}
.press-article .newspaper__body {
  column-rule: 1px solid rgba(60, 48, 26, .2);
}

/* Mention « Source originale » (uniquement dans la lecture, discrète) */
.newspaper__origin {
  flex: 0 0 auto; white-space: nowrap; font-size: .56rem; letter-spacing: .06em;
  text-transform: none; color: #6a6459; text-decoration: none;
  border-bottom: 1px dotted currentColor; padding-bottom: 1px;
}
.newspaper__origin:hover { color: #8a3a1d; }
.press-article .newspaper__origin { font-size: .64rem; }

/* Lien externe éventuel : jamais cliquable, simple mention textuelle
   (le site ne fait jamais sortir le visiteur de ses pages). */
.newspaper__origin { display: none; }

/* ── Fenêtre « page web » : le lien fourni s'affiche dans le site ──
   Le lien renseigné dans « Lien vers l'article » s'ouvre dans une fenêtre
   au-dessus de la page : on voit la page du lien et on la fait défiler
   sur place, sans quitter le site. */
.lightbox__frame--page {
  aspect-ratio: auto; width: 100%; max-width: 1100px; height: 78vh;
  background: #ffffff; border: 1px solid rgba(0, 0, 0, .35); border-radius: 4px;
  overflow: hidden; padding: 0; display: flex; flex-direction: column;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .55);
}
.lightbox__pagebar {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px; background: #14161c; border-bottom: 1px solid rgba(255, 255, 255, .12);
  font-size: .74rem; color: rgba(255, 255, 255, .8);
}
.lightbox__pageurl {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .02em;
}
.lightbox__pageext { flex: 0 0 auto; color: var(--primary-color); text-decoration: none; font-size: .72rem; }
.lightbox__pageext:hover { text-decoration: underline; }
.lightbox__page { flex: 1 1 auto; width: 100%; height: 100%; border: 0; background: #ffffff; }
@media (max-width: 700px) {
  .lightbox__frame--page { height: 74vh; }
  .lightbox__pagebar { font-size: .66rem; padding: 7px 9px; }
}

/* ── Sélecteur de langue ───────────────────────────────────────
   Petites pastilles FR / EN / ES / IT / PT / HE dans l'en-tête.
   La langue active est mise en évidence ; le choix est mémorisé par un
   cookie et l'en-tête, le pied de page et les contenus suivent. */
.lang-switch {
  display: inline-flex; align-items: center; gap: 3px; margin-left: 10px;
  padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
}
.lang-switch__item {
  display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 7px;
  border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  color: var(--secondary-color); text-decoration: none; transition: var(--transition);
}
.lang-switch__item:hover { background: var(--surface-2); color: var(--primary-color); }
.lang-switch__item.is-active { background: var(--primary-color); color: #fff; }
.site-footer .lang-switch { display: none; }
@media (max-width: 1100px) {
  .lang-switch { margin-left: 0; }
}
@media (max-width: 900px) {
  .lang-switch { order: 3; margin-top: 8px; }
}

/* ── Traductions des contenus (back-office) ──────────────────── */
.i18n-block { margin: 18px 0 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.i18n-block > summary { cursor: pointer; padding: 12px 14px; font-weight: 700; }
.i18n-grid { display: grid; gap: 16px; padding: 6px 14px 16px; }
.i18n-lang { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.i18n-lang__titre { margin: 0 0 10px; font-size: .95rem; }
.i18n-lang textarea { min-height: 90px; }

/* ── Sélecteur de langue en menu déroulant ─────────────────────
   Bouton « globe + code + flèche » puis liste des langues avec drapeau
   et nom (comme la maquette). S'ouvre au survol, au focus ou au clic. */
.lang-picker { position: relative; margin-left: 10px; flex: 0 0 auto; }
.lang-picker__button {
  display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 13px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  color: var(--secondary-color); font-family: var(--font-body); font-size: .82rem; font-weight: 700;
  letter-spacing: .06em; cursor: pointer; transition: var(--transition);
}
.lang-picker__button:hover { border-color: var(--primary-color); color: var(--primary-color); }
.lang-picker__globe { font-size: 1rem; line-height: 1; }
.lang-picker__caret { font-size: .7rem; opacity: .7; transition: transform .2s ease; }
.lang-picker.is-open .lang-picker__caret { transform: rotate(180deg); }

.lang-picker__menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 80;
  min-width: 210px; padding: 6px; display: none; flex-direction: column; gap: 2px;
  background: #14161c; border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .5);
}
.lang-picker:hover .lang-picker__menu,
.lang-picker:focus-within .lang-picker__menu,
.lang-picker.is-open .lang-picker__menu { display: flex; }
.lang-picker__item {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 7px;
  color: #eef1f5; font-family: var(--font-body); font-size: .92rem; font-weight: 500;
  text-decoration: none; transition: var(--transition);
}
.lang-picker__item:hover { background: rgba(255, 255, 255, .09); color: #ffffff; }
.lang-picker__item.is-active { background: rgba(255, 107, 53, .16); color: var(--primary-color); font-weight: 700; }
/* Drapeaux dessinés en SVG : affichage identique sur tous les systèmes
   (Windows n'affiche pas les drapeaux emoji). */
.lang-picker__flag { display: inline-flex; align-items: center; flex: 0 0 auto; }
.lang-picker__flag svg, svg.flag {
  display: block; width: 22px; height: 15px; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22);
}
.lang-picker__flag svg.flag { box-shadow: 0 0 0 1px rgba(0, 0, 0, .18); }
[dir="rtl"] .lang-picker__menu { right: auto; left: 0; }

@media (max-width: 1100px) { .lang-picker { margin-left: 0; } }
@media (max-width: 900px) {
  .lang-picker { order: 3; margin-top: 6px; }
  .lang-picker__button { height: 38px; }
}
.site-footer .lang-picker { display: none; }

/* ── Planning hebdomadaire (section « Horaires des cours ») ────
   Reprise de la maquette du club : fond sombre, filet rouge sous
   l'en-tête, blocs rouges « Krav Maga » et dorés « Cours combat »,
   légende en bas. */
.planning { margin-top: 6px; }
.planning__head { border-top: 2px solid #e01b24; padding-top: 14px; }
.planning__title {
  margin: 0; font-family: var(--font-body); font-weight: 900; text-transform: uppercase;
  letter-spacing: .01em; font-size: 1.5rem; color: #ffffff;
}
.planning__title span { font-size: .82rem; font-weight: 500; letter-spacing: .08em; color: #b9bec7; margin-left: 8px; }
.planning__subtitle {
  margin: 8px 0 0; font-size: .9rem; letter-spacing: .12em; text-transform: uppercase;
  color: #d8dce3; font-weight: 700;
}
.planning__scroll { overflow-x: auto; margin-top: 16px; }
.planning__table {
  width: 100%; border-collapse: collapse; background: #101216;
  border: 1px solid rgba(255, 255, 255, .1); font-family: var(--font-body);
}
.planning__table th, .planning__table td {
  border: 1px solid rgba(255, 255, 255, .09); padding: 10px 12px; vertical-align: middle;
}
.planning__table thead th {
  background: #0b0d12; color: #eef1f6; font-size: .78rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; text-align: left;
}
.planning__table thead tr { border-bottom: 2px solid #e01b24; }
.planning__table thead th { border-bottom: 2px solid #e01b24; }
.planning__hours { width: 150px; }
.planning__time {
  width: 150px; background: #0d0f13; color: #e7eaf0; font-size: .84rem; font-weight: 700;
  letter-spacing: .02em; text-align: left; white-space: nowrap;
}
.planning__cell { min-width: 120px; height: 62px; padding: 6px; }
.planning__cell--empty { background: #15181e; }
.planning__slot {
  display: block; padding: 8px 10px; border-radius: 2px; color: #ffffff; line-height: 1.25;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.planning__slot--red { background: #e01b24; }
.planning__slot--gold { background: #b8860b; }
/* Cours « Krav Maga — 100 % Féminin » : bloc rose, comme la carte tarifaire. */
.planning__slot--rose { background: #c2185b; }
.planning__slot-title { display: block; font-size: .82rem; font-weight: 800; }
.planning__slot-level { display: block; font-size: .72rem; opacity: .92; margin-top: 2px; }
.planning__empty {
  padding: 26px 16px; text-align: center; color: rgba(255, 255, 255, .6);
  font-size: .95rem; background: #15181e;
}
.planning__legend {
  display: flex; flex-wrap: wrap; gap: 22px; align-items: center; margin-top: 16px;
  padding: 14px 16px; background: #101216; border: 1px solid rgba(255, 255, 255, .1);
}
.planning__legend-item {
  display: inline-flex; align-items: center; gap: 9px; color: #eef1f6;
  font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.planning__dot { width: 14px; height: 14px; border-radius: 2px; display: inline-block; }
.planning__dot--red { background: #e01b24; }
.planning__dot--gold { background: #b8860b; }
.planning__dot--rose { background: #c2185b; }
@media (max-width: 700px) {
  .planning__title { font-size: 1.15rem; }
  .planning__title span { display: block; margin: 4px 0 0; }
  .planning__hours, .planning__time { width: 110px; font-size: .74rem; }
  .planning__slot-title { font-size: .74rem; }
}

/* ── Lieu : carte à gauche, photo à droite, adresse, puis le planning ──
   Présentation reprise du site du club. */
.venue { margin-bottom: 40px; }
.venue:last-child { margin-bottom: 0; }
.venue__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
@media (max-width: 800px) { .venue__grid { grid-template-columns: 1fr; } }
/* Carte et photo : MÊME largeur et MÊME hauteur pour tous les lieux. */
.venue__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; }
.venue__media {
  border-radius: var(--radius); overflow: hidden; background: var(--surface-2);
  border: 1px solid rgba(255, 255, 255, .12);
  height: 340px;              /* hauteur unique, identique pour tous les lieux */
  display: flex;
}
.venue__media iframe { width: 100%; height: 100%; border: 0; display: block; }
.venue__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.venue__media-empty {
  display: grid; place-items: center; width: 100%; height: 100%; padding: 20px;
  color: rgba(255, 255, 255, .55); font-size: .85rem; text-align: center;
}
@media (max-width: 800px) {
  .venue__grid { grid-template-columns: 1fr; }
  .venue__media { height: 240px; }
}

/* Adresse : plus grande et bien visible. */
.venue__address {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px;
  margin: 18px 0 0; padding: 14px 18px; border-radius: var(--radius);
  background: rgba(255, 255, 255, .07); border-left: 4px solid var(--primary-color);
}
.venue__address strong {
  font-family: var(--font-title); font-size: 1.5rem; letter-spacing: .5px; color: #ffffff;
}
.venue__address span { color: #e8ecf2; font-size: 1.05rem; }
.venue__address span::first-letter { font-size: 1.1em; }
.venue__planning { margin-top: 18px; }

/* ── Section « Rejoignez l'aventure » ─────────────────────────
   La carte reprend exactement le design de la section du même nom en bas de
   page (.cta-band) : mêmes polices, couleurs, tailles et espacements.
   Seul le fond de la carte est noir. */
.trial-cta { background: #e01b24; padding: 54px 0; }
.cta-band--black { background: #000000; }
/* En-tête identique aux sections du site (voir « Horaires des cours ») :
   petit libellé orange, grand titre blanc, sous-titre gris et filet orange. */
.cta-band--black .eyebrow { color: var(--primary-color); }
.cta-band--black h2 { margin-bottom: .5rem; }
.cta-band__bar {
  display: block; width: 70px; height: 4px; margin: 18px auto 0;
  background: var(--gradient-primary); border-radius: 3px;
}
@media (max-width: 700px) {
  .trial-cta { padding: 40px 0; }
}

/* ── Témoignages : deuxième rangée « Krav Maga 100 % Féminin » ──
   Cartes roses (rose du bandeau 100 % féminin) et défilement en sens inverse
   de la première rangée (gauche → droite, comme le mur vidéos).
   Le rang de chaque témoignage se règle dans l'espace membre. */
.gallery-marquee--reverse { margin-top: 18px; }
.gallery-marquee--reverse .gallery-marquee__track { animation-name: km-marquee-reverse; }
.gallery-marquee .testimonial--rose { background: #ffe3ef; border-color: #ffb0d0; }
.gallery-marquee .testimonial--rose:hover { border-color: #ff8bbd; box-shadow: 0 14px 30px rgba(194, 24, 91, .18); }
.gallery-marquee .testimonial--rose .rating { color: #c2185b; }
.gallery-marquee .testimonial--rose .testimonial__head span span { color: #8c1b46; }
/* Photo absente : les initiales remplacent l'image (pastille ronde). */
.testimonial__initials {
  width: 54px; height: 54px; flex: 0 0 54px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--secondary-color); color: #ffffff;
  font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; letter-spacing: .02em;
}
.gallery-marquee .testimonial--rose .testimonial__initials { background: #c2185b; }

/* ── Page « Réserver un cours d’essai » ──────────────────────
   Choix de la salle (cartes radio) puis de la date (boutons), avec le
   récapitulatif de la séance à droite. */
.trial-clubs { display: grid; gap: 10px; margin-top: 12px; }
.trial-club {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  border: 2px solid var(--line); border-radius: var(--radius); padding: 12px 14px;
  background: var(--surface); transition: var(--transition);
}
.trial-club:hover { border-color: rgba(255, 107, 53, .45); }
.trial-club input { margin-top: 4px; accent-color: var(--primary-color); }
.trial-club b { display: block; font-size: 1rem; }
.trial-club small { display: block; color: var(--muted); font-size: .82rem; line-height: 1.35; }
.trial-club__slot { color: var(--primary-dark) !important; font-weight: 600; }
.trial-club:has(input:checked) { border-color: var(--primary-color); box-shadow: 0 8px 20px rgba(255, 107, 53, .16); }
.trial-dates { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.trial-date {
  border: 2px solid var(--line); background: var(--surface); color: var(--secondary-color);
  border-radius: 999px; padding: 8px 14px; font-size: .85rem; font-weight: 600; cursor: pointer;
  font-family: var(--font-body); transition: var(--transition);
}
.trial-date:hover { border-color: var(--primary-color); color: var(--primary-dark); }
.trial-date.is-active { background: var(--gradient-primary); border-color: transparent; color: #ffffff; box-shadow: 0 6px 16px rgba(255, 107, 53, .3); }
@media (max-width: 700px) {
  .trial-club { padding: 10px 12px; }
  .trial-date { padding: 7px 12px; font-size: .8rem; }
}

/* ── Carte « Krav Maga 100 % Féminin » ────────────────────────
   Même carte que « Cours d'essai » (.cta-band) : titre, filet orange et les
   deux mêmes boutons — mais sur fond rose, avec le texte du club sur une
   seule ligne sur grand écran.
   Le bandeau de la section est NOIR : seule la carte reste rose. */
#feminin.trial-cta { background: #000000; }
.cta-band--rose { background: #c2185b; }
.cta-band--rose .eyebrow { color: #ffffff; }
.cta-band--rose h2 { margin-bottom: .5rem; }
.cta-band--rose .cta-band__bar + .btn { margin-top: 20px; }
.cta-band--rose p { color: #ffffff; }
.cta-band--rose .cta-band__line {
  font-size: 1.15rem; font-weight: 600; line-height: 1.4;
  max-width: 100%; margin-left: auto; margin-right: auto;
}

/* ── Témoignages : cartes de dimensions identiques ────────────
   Toutes les cartes des deux rangées ont la même taille ; le texte est
   limité à 4 lignes et la signature reste collée en bas. */
.gallery-marquee .testimonial { height: 262px; }
.gallery-marquee .testimonial .card__body { overflow: hidden; }
.gallery-marquee .testimonial .rating { line-height: 1; }
.gallery-marquee .testimonial p {
  margin: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}
.gallery-marquee .testimonial .testimonial__head { margin-top: auto; }
@media (max-width: 700px) {
  .gallery-marquee .testimonial { flex: 0 0 280px; width: 280px; height: 244px; }
}

/* ── Calendrier de réservation (page « Réserver un cours d’essai ») ──
   Grille du mois à la manière d’un agenda : seuls les jours de cours de la
   salle choisie sont cliquables, les autres restent grisés. */
.cal { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 14px; margin-top: 12px; }
.cal__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cal__mois { text-transform: capitalize; font-size: 1.02rem; }
.cal__nav {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface);
  color: var(--secondary-color); font-size: 1.15rem; line-height: 1; cursor: pointer; transition: var(--transition);
}
.cal__nav:hover:not([disabled]) { border-color: var(--primary-color); color: var(--primary-dark); }
.cal__nav[disabled] { opacity: .35; cursor: not-allowed; }
.cal__jours, .cal__grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal__jours { margin-bottom: 6px; }
.cal__jours span { text-align: center; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cal__case {
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--surface-2);
  color: var(--muted); font-family: var(--font-body); font-size: .88rem; font-weight: 600; cursor: default;
}
.cal__case--vide { background: transparent; }
.cal__case--dispo {
  background: rgba(255, 107, 53, .12); border-color: rgba(255, 107, 53, .45); color: var(--primary-dark); cursor: pointer;
}
.cal__case--dispo:hover { background: var(--gradient-primary); border-color: transparent; color: #ffffff; }
.cal__case.is-active { background: var(--gradient-primary); border-color: transparent; color: #ffffff; box-shadow: 0 6px 16px rgba(255, 107, 53, .35); }
.cal__legende { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--muted); margin: 10px 0 0; }
.cal__pastille { width: 14px; height: 14px; border-radius: 4px; background: rgba(255, 107, 53, .25); border: 1px solid rgba(255, 107, 53, .55); }
@media (max-width: 700px) {
  .cal { padding: 10px; }
  .cal__jours, .cal__grille { gap: 4px; }
  .cal__case { font-size: .8rem; }
}

/* ── Témoignages : titres des deux rangées ───────────────────
   « Cours mixtes » pour la première ligne défilante, « Cours 100 % féminin »
   pour la seconde (cartes roses). */
.temoignages-titre {
  font-size: 1.2rem; text-align: center; margin: 8px 0 16px; color: var(--secondary-color);
  font-family: var(--font-body); font-weight: 700;
}
.temoignages-titre--rose { margin-top: 30px; color: #c2185b; }
@media (max-width: 700px) { .temoignages-titre { font-size: 1.05rem; } }

/* ── Cartes de tarifs : lignes alignées d'une carte à l'autre ──
   Étiquettes, titre, prix, description et liste « Inclus » occupent tous la
   même hauteur, pour que les 5 cartes se lisent en ligne (le bouton était déjà
   collé en bas de carte). */
.grid--5 .card--pricing .card__body { align-items: stretch; }
.grid--5 .card--pricing .card__badges {
  min-height: 3.4rem; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; gap: 6px;
}
.grid--5 .card--pricing .card__title {
  min-height: 2.9rem; display: flex; align-items: center; justify-content: center; margin: 0;
}
.grid--5 .card--pricing .price { min-height: 3.6rem; }
.grid--5 .card--pricing > .card__body > p.small { min-height: 4.6rem; margin: 0; }
.grid--5 .card--pricing .card__features { min-height: 5.4rem; align-content: start; }
@media (max-width: 1200px) {
  .grid--5 .card--pricing .card__badges { min-height: 3.2rem; }
  .grid--5 .card--pricing .card__title { min-height: 2.6rem; }
  .grid--5 .card--pricing .price { min-height: 3.2rem; }
  .grid--5 .card--pricing > .card__body > p.small { min-height: 4.2rem; }
}

/* ── Visionneuse : lecture des vidéos DANS la page ────────────
   Le cadre prend le format 16/9 de la vidéo ; le lecteur YouTube est intégré
   (aucun renvoi vers un autre site), comme les photos s'ouvrent dans le cadre. */
.lightbox__frame--video { background: #000000; }
.lightbox__frame--video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ── Page d'inscription : carte « Fiche d'inscription & règlement » ──
   Le lien « Consulter le règlement intérieur » amène à la section du même nom
   un peu plus bas : on laisse la place à l'en-tête collant. */
#reglement-interieur { scroll-margin-top: 96px; }
#fiche-inscription .btn { margin-top: 4px; }

/* ── Pied de page : mention légale du club (sous le nom) ───── */
.site-footer__legal {
  margin: 0 0 10px; font-size: .78rem; font-weight: 600; letter-spacing: .02em;
  color: rgba(255, 255, 255, .78);
}

/* ── Page Contact : les 4 salles sur une seule ligne ─────────
   Cartes plus étroites : la carte Google Maps est réduite en hauteur pour que
   les 4 fiches restent alignées et lisibles. */
.grid--4 .club-card .map-embed { min-height: 150px; }
.grid--4 .club-card .card__title { font-size: 1.05rem; }
.grid--4 .club-card .card__body { padding: 16px 14px; }
@media (max-width: 1050px) {
  .grid--4 .club-card .map-embed { min-height: 200px; }
}

/* ── Espace membre : bouton « Choisir un fichier » (documents PDF) ──
   Le champ de fichier natif est masqué : on clique sur un vrai bouton. */
.file-picker { display: block; margin-top: 8px; }
.file-picker input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-picker__btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 10px 16px; border-radius: var(--radius); border: 2px solid var(--primary-color);
  background: rgba(255, 107, 53, .08); color: var(--primary-dark);
  font-family: var(--font-body); font-size: .9rem; font-weight: 700;
  transition: var(--transition);
}
.file-picker__btn:hover { background: var(--gradient-primary); color: #ffffff; }

/* Bouton corbeille du back-office (suppression d’un élément) */
.icon-btn--trash {
  font-size: 15px;
  line-height: 1;
  padding: 6px 10px;
}
.icon-btn--trash:hover {
  background: #e63946;
  border-color: #e63946;
  color: #fff;
}
.btn--danger {
  color: #ff8e97;
  border-color: rgba(230, 57, 70, .5);
}
.btn--danger:hover {
  background: #e63946;
  border-color: #e63946;
  color: #fff;
}
/* Fenêtre d’édition : la corbeille est écartée des boutons Annuler / Enregistrer */
.modal__foot .btn--danger {
  margin-right: auto;
}

/* ── Visionneuse : le document entier occupe le cadre, quelle que soit
   son orientation. L'image est positionnée dans le cadre (dont la hauteur
   est fixée par le format --lb-ratio) puis ajustée avec « contain ». ── */
.lightbox__frame { position: relative; }
.lightbox__frame img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  max-width: none; max-height: none; object-fit: contain;
}