/* ===== Judo Club de Monaco — site public =====
   Palette : noir/blanc (judogi) + rouge Monaco (#CE1126)
   Typo massive, system-ui, mode sombre par défaut, micro-animations sobres. */

:root {
  --red: #CE1126;
  --red-dim: #9c0c1c;
  --red-darker: #5c0710;
  --bg: #0a0a0a;
  --bg-tile: #141414;
  --bg-tile-hover: #1c1c1c;
  --fg: #f5f5f5;
  --fg-dim: #b8b8b8;
  --border: #2a2a2a;
  --radius: 22px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s ease, color 0.3s ease;
}

a { color: inherit; }

/* ===== Logo ===== */
/* Trait noir sur fond transparent : un fond clair fixe garantit la lisibilité
   quel que soit la tuile derrière (hero sombre notamment). */
.brand-logo {
  position: fixed;
  top: 0.85rem;
  left: 1rem;
  z-index: 50;
  height: 48px;
  width: 48px;
  padding: 5px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  object-fit: contain;
}

/* Bandeau plein écran : remplace le logo flottant dès que l'écran n'est plus un téléphone,
   pour éviter qu'il ne chevauche le contenu quand la fenêtre est redimensionnée. */
.site-header {
  display: none;
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.7rem 14px;
}
.site-header__logo {
  height: 40px;
  width: 40px;
  padding: 4px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border);
  object-fit: contain;
}
.site-header__name { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; white-space: nowrap; }

.site-header__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem 1.4rem;
  margin-left: auto;
}
.site-header__nav a {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--fg-dim);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.site-header__nav a:hover { color: var(--fg); }

/* Décale l'ancrage de scroll pour que les tuiles ne se retrouvent pas cachées
   sous le bandeau collant quand on clique un lien de nav. */
.tile { scroll-margin-top: 84px; }

@media (min-width: 760px) {
  .brand-logo { display: none; }
  .site-header { display: block; }
}

/* ===== Grid ===== */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px;
}

.tile {
  position: relative;
  background: var(--bg-tile);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  min-height: 220px;
}

.tile:hover, .tile:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  outline: none;
}
.tile--hero:hover, .tile--hero:focus-visible { transform: none; box-shadow: none; }
/* La tuile vidéo a déjà sa propre animation (lueur rouge qui s'intensifie) : pas besoin
   du décalage vers le haut des autres tuiles, en plus ça casse l'effet de lumière fixe. */
.tile--video:hover, .tile--video:focus-visible { transform: none; }

/* Tuiles avec image de fond (hero, vidéo) : ne pas écraser la photo par une couleur unie au survol.
   Le footer est aussi exclu : c'est un bandeau statique, pas une tuile cliquable. */
.tile:not(.tile--hero):not(.tile--video):not(.tile--footer):hover,
.tile:not(.tile--hero):not(.tile--video):not(.tile--footer):focus-visible {
  background: var(--bg-tile-hover);
}

.tile:focus-visible { box-shadow: 0 0 0 3px var(--red); }

.tile__inner {
  padding: 1.75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.tile__title {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 800;
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.02em;
}

.tile__hint {
  color: var(--fg-dim);
  font-size: 0.95rem;
  line-height: 1.4;
  margin: 0;
}

/* Hero: pleine largeur, grand */
.tile--hero {
  grid-column: span 4;
  background:
    linear-gradient(90deg, #000 0%, rgba(0,0,0,0.78) 38%, rgba(0,0,0,0.3) 68%, rgba(206,17,38,0.35) 100%),
    url('/assets/images/hero-action.webp');
  background-size: cover;
  background-position: right center;
  color: #fff;
  cursor: default;
  min-height: 380px;
  display: flex;
  align-items: center;
}
.tile--hero .tile__inner { justify-content: center; gap: 1rem; }
.hero__kicker {
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--red);
  font-weight: 700;
  font-size: 0.8rem;
  margin: 0;
}
.hero__title {
  font-size: clamp(2.6rem, 8vw, 5.5rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 0;
}
.hero__sub {
  color: #ddd;
  font-size: 1.05rem;
  max-width: 40ch;
  margin: 0;
}

.btn-cta {
  align-self: flex-start;
  margin-top: 0.5rem;
  background: var(--red);
  color: #fff;
  border: none;
  padding: 1rem 1.8rem;
  font-size: 1.15rem;
  font-weight: 800;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.btn-cta:hover { transform: scale(1.04); background: var(--red-dim); }
/* Volontairement pas un vrai [disabled] (l'étape 3 en a besoin cliquable pour afficher un
   message d'explication) : juste grisé visuellement, "vrai" state géré en JS. */
.btn-cta.is-blocked { opacity: 0.45; }
.btn-cta.is-blocked:hover { transform: none; background: var(--red); }
.wizard__warning {
  color: var(--red);
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 0.6rem;
}

.btn-outline {
  align-self: flex-start;
  background: transparent;
  color: var(--fg);
  border: 2px solid var(--fg);
  padding: 0.7rem 1.3rem;
  font-weight: 700;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-outline:hover { background: var(--fg); color: var(--bg); }

/* Grid layout : tuiles de tailles variées */
.tile-row-3 {
  grid-column: span 4;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.tile-row-3 > .tile { grid-column: auto; }
.tile--inscription { min-height: 340px; }
.tile--compare { min-height: 220px; }
.tile--schedule { min-height: 220px; }
.tile--inscription .tile__inner, .tile--compare .tile__inner, .tile--schedule .tile__inner { justify-content: center; }
.tile--news { grid-column: span 4; min-height: 260px; cursor: default; }
.tile--news:hover, .tile--news:focus-visible { background: var(--bg-tile); transform: none; box-shadow: none; }
.tile--team { grid-column: span 2; }
.tile--shop { grid-column: span 2; }
.tile--video {
  grid-column: span 4;
  min-height: 320px;
  position: relative;
  overflow: hidden;
  color: #0a0a0a;
  /* Le blanc pur reste dans le rond du logo (déjà présent dans l'image elle-même) ;
     tout autour, un gris très clair plutôt qu'un blanc plein écran. */
  background: #d9d9d9;
}
/* Un dégradé ne s'anime pas correctement via "transition: background" (les navigateurs
   ne l'interpolent pas, ça saute d'un coup) : on anime plutôt l'opacité d'un calque dédié,
   posé au repos avec l'intensité de base, et qui se renforce en fondu au survol. */
.tile--video::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(206,17,38,0.6) 0%, rgba(206,17,38,0) 32%);
  opacity: 1;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.tile--video::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(206,17,38,0.85) 0%, rgba(206,17,38,0) 42%);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.tile--video:hover::before { opacity: 0; }
.tile--video:hover::after { opacity: 1; }
.tile--video__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(60%, 260px);
  pointer-events: none;
  opacity: 0.9;
  z-index: 1;
}
.tile--video .tile__inner { position: relative; z-index: 1; }
.tile--video .tile__hint { color: #4a4a4a; }
.tile--video .video-placeholder {
  background: #fff;
  border: 1px solid var(--red);
  color: var(--red);
}
.tile--footer {
  grid-column: span 4;
  cursor: default;
  background: transparent;
  border: none;
  min-height: auto;
}
.tile--footer:hover, .tile--footer:focus-visible {
  background: transparent;
  transform: none;
  box-shadow: none;
}

.group-heading {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--red);
  font-weight: 800;
  margin: 1.25rem 0 0.6rem;
}
.group-heading:first-child { margin-top: 0; }

.planning-section { margin-bottom: 1.75rem; }
.planning-section--featured { margin-bottom: 2.25rem; }
/* Un fin trait sépare chaque section du planning (Judo / Ju-Jitsu / Taïso /
   Compétition 11-14 ans / Compétition 14-20 ans) de la suivante, sauf la toute dernière. Les
   sections à l'intérieur d'une paire côte à côte sont exclues ici : elles ont
   leur propre trait vertical (règle suivante), sinon on se retrouve avec 2 traits. */
.planning-section:not(:last-child):not(.planning-section-row .planning-section),
.planning-section-row:not(:last-child) {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
/* À l'intérieur d'une paire côte à côte (Ju-Jitsu/Taïso, Compétition 11-14/14-20 ans),
   le trait sépare aussi les deux colonnes entre elles. */
.planning-section-row .planning-section:not(:first-child) {
  border-left: 1px solid var(--border);
  padding-left: 1.25rem;
}
.planning-section .group-heading, .planning-section-row .group-heading {
  font-size: 1.15rem;
  text-align: center;
  margin-bottom: 0.85rem;
}
.planning-section .group-heading--featured {
  font-size: 2rem;
  margin-bottom: 1.1rem;
}
.planning-section .group-heading--minor, .planning-section-row .group-heading--minor {
  font-size: 0.95rem;
}
.planning-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(var(--planning-col-min, 88px), 1fr));
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  /* Par défaut une grille étire chaque colonne à la hauteur de la plus grande
     (ex. le mardi avec 4 créneaux) : les jours avec moins de créneaux se
     retrouvaient avec un grand vide en bas. On garde chaque jour à sa propre
     hauteur, celle de son propre contenu. */
  align-items: start;
}
.planning-day { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.planning-day__head {
  background: var(--bg-tile-hover);
  color: var(--fg);
  text-align: center;
  font-size: 0.95rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.4rem 0.2rem;
  border-radius: 8px;
}
/* Nom du jour complet ("Lundi") quand il y a la place, abrégé ("Lu") sinon —
   le palier de bascule est celui de la grille compacte du planning. */
.planning-day__head-short { display: none; }
.option-card__title-short { display: none; }
@media (max-width: 900px) {
  .planning-day__head-full { display: none; }
  .planning-day__head-short { display: inline; }
  .option-card__title-full { display: none; }
  .option-card__title-short { display: inline; }
  /* Plus petit que le titre simple pour tenir sur 2 lignes propres ("Ju-Jitsu" /
     "Self-Défense") sans que "Self-Défense" déborde et se recoupe à son tour. */
  .option-card__title--compact { font-size: 0.95rem !important; line-height: 1.25; }
}
.planning-slot {
  background: var(--red);
  color: #fff;
  border-radius: 8px;
  padding: 0.55rem 0.45rem;
  text-align: center;
  line-height: 1.25;
}
.planning-slot strong { display: block; font-size: 1rem; overflow-wrap: break-word; }
/* 0.82rem (pas 0.92rem) : avec les minutes ":00" toujours affichées ("21h00-22h00"
   au lieu de "21h-22h00"), le texte est plus long et passait à la ligne dans les
   colonnes les plus étroites du planning ordinateur ("Kata", "4 ans" le samedi). */
.planning-slot > span { display: block; font-size: 0.82rem; opacity: 0.85; margin-top: 0.15rem; white-space: nowrap; }
/* Rouge nettement plus foncé (pas --red-dim, trop proche du rouge normal) pour que les
   créneaux Adultes/Kata se distinguent clairement des créneaux enfants d'un coup d'œil. */
.planning-slot--dark { background: var(--red-darker); }
/* Libellé complet ("9 à 10 ans") par défaut ; version courte (juste les âges,
   "9, 10") réservée au format téléphone, où elle s'affiche en gros. Pareil pour
   l'horaire : les 3 morceaux restent en ligne ("17h-18h") sauf sur téléphone,
   où ils passent chacun sur leur propre ligne. */
.planning-slot__label-short { display: none; }
/* Libellé composé sur 2 lignes ("Ju-Jitsu" / "Self-Défense") : chaque ligne a sa propre
   taille de police (au lieu d'une taille unique) pour que les deux occupent exactement
   la même largeur malgré leurs longueurs de texte différentes, plutôt que "Self-" qui se
   coupait en plein mot avec une taille unique trop grande. */
.planning-slot__label-full--split { line-height: 1.2; }
.planning-slot__label-line { display: block; white-space: nowrap; }
.planning-slot__label-line--1 { font-size: 0.85rem; }
.planning-slot__label-line--2 { font-size: 0.62rem; }
.planning-slot__time-start, .planning-slot__time-sep, .planning-slot__time-end { display: inline; }

button.planning-slot { border: none; font: inherit; width: 100%; }
/* button.planning-slot (élément+classe) a la même spécificité que .planning-slot--selectable
   seul seul ne suffit pas à passer devant — d'où le doublement de sélecteur ici. */
button.planning-slot--selectable {
  cursor: pointer;
  background: transparent;
  /* var(--border) (#2a2a2a) est quasi invisible sur le fond noir de l'overlay — liseré
     blanc translucide pour que chaque tuile de créneau reste bien distinguable. */
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  color: var(--fg-dim);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.planning-slot--selectable:hover { border-color: var(--red); color: var(--fg); }
.planning-slot--selectable.is-selected { background: var(--red); border-color: transparent; color: #fff; }
.planning-slot--selectable.is-disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
/* Créneau d'une tranche d'âge voisine (pas celle exacte de l'enfant) : grisé et en
   pointillés pour bien le distinguer des créneaux sélectionnables — un clic dessus
   explique qu'un aménagement individualisé est possible plutôt que de l'ajouter. */
/* button.planning-slot--adjacent (comme ci-dessus) : sinon la spécificité de
   button.planning-slot--selectable (border en solid) l'emporterait sur ce dashed. */
button.planning-slot--adjacent {
  border-style: dashed;
  color: var(--fg-dim);
  opacity: 0.55;
}
.planning-slot--adjacent:hover { opacity: 0.85; border-color: var(--fg-dim); }

/* Mise en avant de l'explication d'aménagement individualisé, révélée au clic sur un
   créneau d'âge voisin — plus visible que le simple texte discret par défaut. */
.wizard-callout {
  margin-top: 1rem;
  padding: 1rem 1.2rem;
  border: 1.5px solid var(--red);
  border-radius: 12px;
  background: rgba(206, 17, 38, 0.1);
  font-size: 0.88rem;
  line-height: 1.5;
  animation: fade 0.3s ease;
}

.planning-rows { display: flex; flex-direction: column; gap: 6px; }
.planning-row { display: flex; align-items: stretch; gap: 0.5rem; font-size: 0.8rem; }
.planning-row__day {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tile-hover);
  color: var(--fg);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  width: 6rem;
  flex-shrink: 0;
  padding: 0.5rem 0.4rem;
  border-radius: 8px;
}
.planning-row__times {
  flex: 1;
  display: flex;
  /* Une ligne tant que ça tient (rendu voulu), mais on passe à la ligne plutôt que de
     déborder quand un jour cumule plusieurs créneaux — cas du mercredi en Ju-Jitsu. */
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.planning-row__time-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  color: var(--fg-dim);
  font-size: 0.72rem;
  white-space: nowrap;
}
.planning-row__time-chip--active { background: var(--red); color: #fff; border-color: transparent; font-weight: 700; }
.planning-row__time-chip--offsite { background: var(--border); color: var(--fg-dim); border-color: transparent; font-style: italic; }

.planning-section-row {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}
.planning-section-row .planning-section { flex: 1; min-width: 0; margin-bottom: 0; }

.video-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.4);
  backdrop-filter: blur(3px);
  color: #fff;
  font-size: 1.8rem;
  margin-top: 0.5rem;
  transition: background 0.2s ease, transform 0.2s ease;
}
.tile--video:hover .video-placeholder { background: var(--red); color: #fff; transform: scale(1.06); }

.video-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  min-height: 260px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 45%, rgba(206,17,38,0.6) 0%, rgba(206,17,38,0) 32%),
    #d9d9d9;
  margin-bottom: 1rem;
}
.video-cover__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(55%, 220px);
  pointer-events: none;
  opacity: 0.9;
}
.video-cover .video-placeholder {
  position: relative;
  z-index: 1;
  margin-top: 0;
  width: 76px;
  height: 76px;
  background: #fff;
  border: 1px solid var(--red);
  color: var(--red);
}

/* ===== Footer ===== */
.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem 1rem 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--fg-dim);
}
.footer-inner h3 { color: var(--fg); margin: 0 0 0.4rem; }
.footer-links, .footer-legal { display: flex; flex-direction: column; gap: 0.4rem; }
.footer-links a, .footer-legal a { text-decoration: underline; }
.footer-links--social { flex-direction: row; align-items: center; gap: 1.25rem; justify-self: center; }
.footer-links--social a { text-decoration: none; }
.footer-links--social .news-social__link svg { width: 36px; height: 36px; }
.footer-links--social .news-social__link:hover { transform: scale(1.3); }
.footer-links--social .news-social__link[aria-label="Facebook"]:hover { transform: scale(1.55); }
.footer-legal { justify-self: end; text-align: right; }

/* ===== Overlay (expansion de tuile / wizard) ===== */
.overlay-root {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
}

.overlay {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2.5rem 1rem;
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: auto;
}
.overlay.is-open { opacity: 1; }

.overlay__panel {
  background: var(--bg-tile);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 760px;
  width: 100%;
  padding: 2.5rem;
  position: relative;
  transform: translateY(16px);
  transition: transform 0.25s ease;
}
.overlay.is-open .overlay__panel { transform: translateY(0); }

.overlay__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  font-size: 1.2rem;
  cursor: pointer;
}
.overlay__close:hover { background: var(--red); color: #fff; border-color: var(--red); }

.overlay__panel h2 { font-size: 1.8rem; margin: 0 0 1rem; font-weight: 800; }
.overlay__panel h3 { font-size: 1.15rem; margin: 1.5rem 0 0.5rem; }
.overlay__panel h3.planning-overlay-heading {
  font-size: 1.15rem;
  text-align: center;
  color: var(--fg);
  margin: 2rem 0 1.25rem;
  padding: 0.6rem 1rem;
  background: var(--bg-tile-hover);
  border-radius: 8px;
}
.overlay__panel p { line-height: 1.6; color: var(--fg-dim); }

/* ===== Comparatif / équipe ===== */
.compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.compare-grid article {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem;
}
.compare-grid h3 { margin-top: 0; color: var(--red); font-size: 1.3rem; }
.compare-grid .compare-card--wide h3 { text-align: center; }
.compare-grid .compare-card--wide { grid-column: 1 / -1; }
.compare-card__tagline { font-weight: 700; color: var(--fg); }

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.tabs__nav {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.tabs__tab {
  background: none;
  border: none;
  color: var(--fg-dim);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.7rem 0.2rem;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.tabs__tab:hover { color: var(--fg); }
.tabs__tab.is-active { color: var(--fg); border-bottom-color: var(--red); }
.tabs__panel { display: none; }
.tabs__panel.is-active { display: block; animation: fade 0.2s ease; }
.team-card {
  text-align: center;
  padding: 1rem;
  border-radius: 14px;
  background: var(--bg);
  border: 1px solid var(--border);
}
/* Sert aussi bien à la pastille de repli (div) qu'à une vraie photo (img) : sans
   object-fit, un portrait non carré serait étiré. */
.team-card__photo {
  display: block;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--red), #333);
  margin: 0 auto 0.75rem;
  object-fit: cover;
}
.team-card h4 { margin: 0 0 0.2rem; font-size: 1rem; }
.team-card p { margin: 0; font-size: 0.8rem; }

/* ===== Actus carrousel ===== */
.news-carousel {
  position: relative;
  min-height: 90px;
}
.news-slide {
  display: none;
  animation: fade 0.4s ease;
}
.news-slide.is-active { display: block; }
.news-slide__meta { font-size: 0.78rem; color: var(--red); font-weight: 700; text-transform: uppercase; margin: 0 0 0.25rem; }
.news-slide h3 { margin: 0 0 0.3rem; font-size: 1.1rem; }
.news-slide p { margin: 0; color: var(--fg-dim); font-size: 0.85rem; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.tile__inner--social { align-items: center; justify-content: flex-start; text-align: center; gap: 2.25rem; padding-top: 2.25rem; }
.tile__inner--social .tile__title { max-width: 32rem; }

.news-social { display: flex; justify-content: center; gap: 2.5rem; }
.news-social__link {
  display: inline-flex;
  transition: transform 0.2s ease;
}
.news-social__link svg { width: 80px; height: 80px; }
.news-social__link:hover { transform: scale(1.3); }
/* Le glyphe Facebook est beaucoup plus fin dans son viewBox que celui d'Instagram :
   à agrandissement identique, il paraît grossir moins. On compense avec un scale plus fort. */
.news-social__link[aria-label="Facebook"]:hover { transform: scale(1.55); }

.news-full-list { display: flex; flex-direction: column; gap: 1.5rem; }
.news-full-item { border-bottom: 1px solid var(--border); padding-bottom: 1.5rem; }
.news-full-item img {
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 0.75rem;
  background: var(--border);
}
.news-full-item__date { color: var(--red); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; }

/* ===== Boutique ===== */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1.25rem;
}
.shop-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.shop-card:hover { transform: translateY(-3px); }
.shop-card__img {
  aspect-ratio: 1;
  background: linear-gradient(135deg, #222, #000);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  font-size: 0.75rem;
  overflow: hidden;
}
.shop-card__img img { width: 100%; height: 100%; object-fit: cover; }
.shop-card__body { padding: 0.75rem; }
.shop-card__body h4 { margin: 0 0 0.2rem; font-size: 0.95rem; }
.shop-card__body p { margin: 0; color: var(--red); font-weight: 700; font-size: 0.9rem; }
.shop-badge {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.7rem;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.product-detail__img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 1rem;
  background: #111;
}

/* ===== Wizard ===== */
.wizard {
  max-width: 620px;
  width: 100%;
}
.wizard__progress {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1.75rem;
}
.wizard__progress span {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: var(--border);
  transition: background 0.3s ease;
}
.wizard__progress span.is-done { background: var(--red); }

.wizard__step { display: none; }
.wizard__step.is-active { display: block; animation: fade 0.3s ease; }

.wizard__step h2 { font-size: 1.6rem; margin-bottom: 0.3rem; }
.wizard__step-hint { color: var(--fg-dim); margin: 0 0 1.5rem; }

.option-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.option-card {
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem 1rem;
  background: var(--bg);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--fg);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.option-card:hover { transform: translateY(-2px); }
.option-card.is-selected { border-color: var(--red); }
.option-card strong { display: block; font-size: 1.05rem; margin-bottom: 0.3rem; }
.option-card__years { display: block; font-size: 0.72rem; font-style: italic; margin-top: 0.2rem; color: var(--fg-dim); }

.discipline-cards { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }
.discipline-cards__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.option-card--judo,
.option-card--minor {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 140px;
  padding: 1.5rem;
  justify-content: center;
}
.option-card--judo strong { font-size: 2.1rem; margin-bottom: 0.4rem; }
.option-card--minor strong { font-size: 1.3rem; margin-bottom: 0.4rem; }

.option-card__tagline { font-size: 0.85rem; color: var(--fg-dim); margin: 0; }
.option-card--judo .option-card__tagline { font-size: 0.95rem; max-width: 30rem; }

.discipline-details { margin-bottom: 1.5rem; }
.discipline-details summary { cursor: pointer; color: var(--fg-dim); }
.discipline-details__group { margin-top: 1rem; }
.discipline-details__group h3 { font-size: 1rem; margin-bottom: 0.3rem; }
.discipline-details__group p { color: var(--fg-dim); font-size: 0.9rem; line-height: 1.5; margin: 0; }
.discipline-details__group p + p { margin-top: 0.6rem; }

.slot-list, .tariff-list { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; }
.slot-item, .tariff-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  cursor: pointer;
}
.slot-item.is-selected, .tariff-item.is-selected { border-color: var(--red); }
.slot-item__info strong, .tariff-item__info strong { display: block; }
.slot-item__info span, .tariff-item__info span { font-size: 0.82rem; color: var(--fg-dim); }

.wizard-form { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }
.wizard-form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; font-weight: 600; }
.wizard-form input, .wizard-form textarea, .wizard-form select {
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--fg);
  font-family: inherit;
  font-size: 1rem;
}
.wizard-form__section {
  margin: 0.5rem 0 -0.4rem;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--red);
}
.wizard-form__section:first-child { margin-top: 0; }
#wz-minor-fields { display: flex; flex-direction: column; gap: 1rem; }
.checkbox-line {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 0.6rem !important;
  font-weight: 400 !important;
  font-size: 0.82rem !important;
  color: var(--fg-dim);
  line-height: 1.4;
}
.checkbox-line input { width: auto; margin-top: 0.2rem; flex-shrink: 0; }
.payment-choice { display: flex; gap: 1rem; flex-wrap: wrap; }
.payment-choice label {
  flex: 1;
  min-width: 180px;
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
  cursor: pointer;
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
}
.payment-choice input { width: auto; }
/* Option annoncée mais pas encore ouverte : visiblement inactive, sans disparaître —
   les familles voient que le paiement en ligne arrive. */
.payment-choice label.is-disabled { opacity: 0.5; cursor: not-allowed; }
.payment-choice__soon {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--red);
}

.wizard__nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
}

.recap-box {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}
.recap-box dt { color: var(--fg-dim); font-size: 0.75rem; text-transform: uppercase; margin-top: 0.5rem; }
.recap-box dd { margin: 0 0 0.3rem; font-weight: 600; }

.confirm-screen { text-align: center; padding: 1rem 0; }
.confirm-screen__icon { font-size: 3rem; margin-bottom: 1rem; }

.empty-state { color: var(--fg-dim); font-style: italic; }

/* ===== Responsive ===== */
@media (max-width: 900px) {
  /* 3 onglets ("Bureau", "Équipe pédagogique", "Histoire du club") ne tiennent pas sur
     une ligne à la taille desktop en dessous de ce palier : le 3e retombe seul à la
     ligne suivante, sans plus aucun lien visuel avec la barre d'onglets (perd son trait
     actif/soulignement de groupe). Police et espacement resserrés pour que les 3
     tiennent toujours sur une seule ligne, quitte à être plus compacts. */
  .tabs__tab { font-size: 0.78rem; padding: 0.6rem 0.1rem; }
  .tabs__nav { gap: 0.3rem; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .tile--hero, .tile--video, .tile--footer, .tile-row-3 { grid-column: span 2; }
  .tile--news { grid-column: span 2; }
  .tile--team, .tile--shop { grid-column: span 1; }
  /* En dessous de ce palier, 3 colonnes ne tiennent plus proprement : on empile
     directement à la verticale plutôt que de les laisser se comprimer ou de
     provoquer un état intermédiaire à 2 colonnes (trou vide à droite). */
  .tile-row-3 { grid-template-columns: 1fr; }
  /* Le min-height de 340px de "Comment s'inscrire" n'a de sens que dans la mise en
     page 3 colonnes du bureau (pour équilibrer avec le bouton). Une fois empilée en
     pleine largeur, ça laisse un vide disproportionné au-dessus/en dessous du texte
     par rapport aux tuiles voisines (220px) : on aligne sur elles. */
  .tile--inscription { min-height: 220px; }
  /* Les paires de colonnes du planning (Ju-Jitsu/Taïso, Compétition 11-14/14-20 ans)
     n'ont plus assez de place côte à côte en dessous de ce palier :
     leur contenu (horaires) déborde et chevauche la colonne voisine. On empile
     directement à la verticale plutôt que de les laisser se comprimer/chevaucher. */
  .planning-section-row { flex-direction: column; }
  /* Le trait vertical entre les 2 colonnes n'a plus de sens une fois empilées :
     on bascule sur un trait horizontal, comme entre les autres sections. */
  .planning-section-row .planning-section:not(:first-child) {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--border);
    padding-top: 1.25rem;
  }
  /* La grille Judo (6 jours en colonnes) a besoin d'au moins ~570px pour tenir sans
     scroll horizontal : en dessous de ce palier elle déborde. On garde l'affichage
     hebdomadaire (colonnes) mais on réduit la taille minimale des colonnes, les
     marges et les polices pour que les 6 jours tiennent sans scroll horizontal. */
  /* Variable (pas juste un override direct de .planning-grid) : reprise aussi par le
     style inline du planning sélectionnable du parcours d'inscription, qui peut avoir
     un nombre de colonnes différent de 6. */
  :root { --planning-col-min: 50px; }
  .planning-grid { gap: 4px; }
  .planning-day { gap: 4px; }
  .planning-day__head { font-size: 0.8rem; padding: 0.3rem 0.1rem; }
  /* Toutes les cases ont la même hauteur, coupée en deux moitiés égales : la moitié
     du haut pour l'âge, la moitié du bas pour l'horaire — comme ça l'horaire tombe
     toujours à la même hauteur d'une case à l'autre, quelle que soit la longueur du
     texte de l'âge au-dessus (au lieu d'un simple centrage qui décale tout). */
  /* height (pas min-height) : un flex-basis en % n'est fiable que si le conteneur a
     une hauteur définie, sinon les 2 moitiés se recalent sur leur propre contenu
     au lieu d'être vraiment 50/50 — ce qui décalait les horaires d'une case à l'autre. */
  /* Padding uniforme (pas plus haut/bas que gauche/droite) : sinon la marge rouge visible
     autour du rectangle d'âge est plus épaisse en haut qu'sur les côtés. */
  .planning-slot { padding: 0.22rem; height: 106px; display: flex; flex-direction: column; }
  .planning-slot > strong, .planning-slot > .planning-slot__time {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 0;
  }
  /* Rectangle noir derrière la catégorie d'âge (haut de la tuile) pour la faire
     ressortir du fond rouge — demandé spécifiquement pour le format mobile. Opacité
     réduite (0.55 → 0.25) : trop marqué à 0.55, ça ressortait comme un bloc bordeaux
     trop présent au lieu d'un simple fond légèrement distinct. */
  .planning-slot > strong {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    padding: 0.2rem 0.35rem;
    width: 100%;
  }
  .planning-slot strong { font-size: 0.85rem; }
  .planning-slot > span { font-size: 0.78rem; }
  /* Format téléphone demandé : le numéro d'âge en gros, "ans" à la ligne en dessous,
     puis l'horaire écrit sur 3 lignes ("17h00" / "-" / "18h00") — plus visuel qu'un
     texte compact tout en ligne. */
  .planning-slot__label-full { display: none; }
  .planning-slot__label-short { display: block; }
  /* Groupe désigné par un nom composé ("Ju-Jitsu / Self-Défense") : la tuile mobile est
     bien plus étroite que la colonne desktop, donc taille unique et beaucoup plus petite
     que sur desktop (0.85rem/0.62rem) pour que "Self-Défense" tienne quand même sur une
     ligne — et en blanc, pas le gris discret du badge d'âge normal. */
  .planning-slot__label-short--compound .planning-slot__label-line {
    font-size: 0.4rem;
    color: #fff;
  }
  .planning-slot__label-short--compound .planning-slot__label-line--1 { font-size: 0.5rem; }
  /* Une seule taille pour tous les âges (simples ou énumérés type "11/12/13"),
     même s'il y a la place pour faire plus gros sur les cas simples : des tailles
     différentes d'une tuile à l'autre rendaient le planning moins lisible dans son
     ensemble. La taille est celle qui tient sur une ligne même pour le cas le plus
     long ("11/12/13"), y compris sur les téléphones les plus étroits (320px). */
  .planning-slot__age-num {
    display: block;
    font-size: 0.65rem;
    line-height: 1.1;
    white-space: nowrap;
  }
  .planning-slot__age-unit { display: block; font-size: 0.7rem; font-weight: 600; text-transform: none; opacity: 0.85; }
  .planning-slot__time-start, .planning-slot__time-sep, .planning-slot__time-end { display: block; }
  /* Le logo flottant (.brand-logo) est affiché dès que le bandeau plein écran est
     masqué, soit jusqu'à 760px. Sans cette marge, il se superpose au texte
     "Monaco · 柔道" du hero entre 561px et 760px (la marge existante ne
     s'appliquait qu'en dessous de 560px). */
  .tile--hero .tile__inner { padding-top: 4rem; }
}

@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr; padding: 10px; gap: 10px; }
  .tile--hero, .tile--video, .tile--footer,
  .tile--team, .tile--news, .tile--shop, .tile-row-3 { grid-column: span 1; }
  .tile:not(.tile--hero):not(.tile--video) { min-height: auto; }
  .footer-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .footer-links--social, .footer-legal { justify-self: center; text-align: center; }
  .tile--hero .tile__inner { padding-top: 4rem; }
  .overlay { padding: 0; }
  .overlay__panel { border-radius: 0; min-height: 100vh; padding: 1.5rem; }
  .hero__title { font-size: 2.6rem; }
}

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