/* =============================================
   KCVO – Global Styles (Bootstrap 5.3 only)
   ============================================= */

/* ---------- Custom Properties ----------
   Palette vive KCVO : navy (fond), rouge/orange/or (accent principal),
   violet/bleu, vert/cyan — une couleur par section plutôt qu'un unique
   accent or comme dans la précédente version. */
:root {
  --kcvo-navy:     #0f172a;
  --kcvo-navy-mid: #16213e;
  --kcvo-gold:     #f5c518;
  --kcvo-red:      #e0261e;
  --kcvo-orange:   #ff6b35;
  --kcvo-purple:   #6d28d9;
  --kcvo-violet:   #7c3aed;
  --kcvo-blue:     #2563eb;
  --kcvo-green:    #059669;
  --kcvo-cyan:     #0891b2;
  --kcvo-green-br: #4ade80;
  --kcvo-light:    #f8fafc;
  --kcvo-muted:    #6b7280;
  --kcvo-border:   #e2e8f0;
  --transition:    0.3s ease;

  /* Dégradés réutilisés tels quels dans la maquette d'origine. */
  --grad-red-orange:   linear-gradient(90deg, var(--kcvo-red), var(--kcvo-orange));
  --grad-red-orange-d: linear-gradient(135deg, var(--kcvo-red), var(--kcvo-orange));
  --grad-orange-gold:  linear-gradient(90deg, #f97316, var(--kcvo-gold));
  --grad-orange-gold-d:linear-gradient(135deg, #f97316, var(--kcvo-gold));
  --grad-purple-blue:  linear-gradient(90deg, var(--kcvo-purple), var(--kcvo-blue));
  --grad-purple-blue-d:linear-gradient(135deg, var(--kcvo-purple), var(--kcvo-blue));
  --grad-purple-violet-d: linear-gradient(135deg, var(--kcvo-purple), var(--kcvo-violet));
  --grad-green-cyan:   linear-gradient(90deg, var(--kcvo-green), var(--kcvo-cyan));
  --grad-green-cyan-d: linear-gradient(135deg, var(--kcvo-green), var(--kcvo-cyan));
  --grad-rainbow:      linear-gradient(90deg, var(--kcvo-red), var(--kcvo-orange), var(--kcvo-gold), var(--kcvo-green), var(--kcvo-blue), var(--kcvo-purple));
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }

body {
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  color: #1a202c;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6 { font-weight: 700; letter-spacing: -0.01em; }

/* ---------- Navbar ---------- */
.kcvo-navbar {
  background: var(--kcvo-navy) !important;
  border-bottom: 2px solid var(--kcvo-red);
  padding: .6rem 0;
  transition: box-shadow var(--transition);
}
.kcvo-navbar.scrolled { box-shadow: 0 2px 24px rgba(0,0,0,.35); }

.kcvo-navbar .navbar-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
}
.kcvo-navbar .brand-logo { height: 60px; width: auto; }
.kcvo-navbar .brand-name {
  font-size: .92rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.2;
}
.kcvo-navbar .brand-sub {
  font-size: .62rem;
  font-weight: 400;
  color: rgba(255,255,255,.5);
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.2;
}

.kcvo-navbar .nav-link {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72) !important;
  padding: .45rem .85rem !important;
  border-radius: 4px;
  transition: color var(--transition), background var(--transition);
}
.kcvo-navbar .nav-link:hover {
  color: #fff !important;
  background: rgba(255,255,255,.1);
}
.kcvo-navbar .nav-link.active-link {
  color: #fff !important;
  background: var(--kcvo-red);
  font-weight: 800;
}

.kcvo-navbar .dropdown-menu {
  background: var(--kcvo-navy-mid);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  min-width: 180px;
  padding: .5rem;
}
.kcvo-navbar .dropdown-item {
  color: rgba(255,255,255,.7);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .5rem .85rem;
  border-radius: 4px;
  transition: all var(--transition);
}
.kcvo-navbar .dropdown-item:hover {
  background: rgba(224,38,30,.15);
  color: #fff;
}

.kcvo-navbar .social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  /* Mêmes pastilles en dégradé que .ft-social du pied de page. */
  background: var(--ft-grad, rgba(255,255,255,.07));
  color: #fff;
  font-size: .9rem;
  transition: all var(--transition);
  text-decoration: none;
}
.kcvo-navbar .social-link:hover {
  transform: scale(1.1);
  color: #fff;
}
.kcvo-navbar .navbar-toggler {
  border-color: rgba(255,255,255,.25);
}
.kcvo-navbar .navbar-toggler-icon { filter: brightness(10); }

/* ---------- Buttons ---------- */
.btn-gold {
  background: var(--grad-orange-gold);
  border-color: transparent;
  color: var(--kcvo-navy);
  font-weight: 800;
  font-size: .84rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .8rem 1.9rem;
  border-radius: 10px;
  transition: all var(--transition);
}
.btn-gold:hover {
  color: var(--kcvo-navy);
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 28px rgba(245,197,24,.35);
}

.btn-outline-ghost {
  background: transparent;
  border: 2px solid rgba(255,255,255,.5);
  color: rgba(255,255,255,.9);
  font-weight: 700;
  font-size: .84rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .75rem 1.85rem;
  border-radius: 10px;
  transition: all var(--transition);
}
.btn-outline-ghost:hover {
  border-color: #fff;
  color: #fff;
  background: rgba(255,255,255,.1);
}

.btn-navy {
  background: var(--kcvo-navy);
  border-color: var(--kcvo-navy);
  color: #fff;
  font-weight: 700;
  font-size: .84rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .75rem 1.8rem;
  border-radius: 10px;
  transition: all var(--transition);
}
.btn-navy:hover {
  background: var(--kcvo-navy-mid);
  color: #fff;
  transform: translateY(-1px);
}

/* Bouton à dégradé libre : la couleur vient de --btn-grad, posée en style
   inline sur chaque instance (même logique que la maquette d'origine, où
   chaque CTA a son propre dégradé). */
.btn-gradient {
  background: var(--btn-grad, var(--grad-purple-blue-d));
  border: 0;
  color: #fff;
  font-weight: 800;
  font-size: .84rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .8rem 1.9rem;
  border-radius: 10px;
  transition: all var(--transition);
}
.btn-gradient:hover {
  color: #fff;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 28px rgba(15,23,42,.3);
}

/* Bouton blanc sur fond de couleur (bandeau Pass'Sport) ; la couleur du
   texte vient de --btn-color, posée en style inline. */
.btn-white {
  background: #fff;
  border: 0;
  color: var(--btn-color, var(--kcvo-navy));
  font-weight: 800;
  font-size: .84rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .9rem 2rem;
  border-radius: 10px;
  transition: all var(--transition);
}
.btn-white:hover {
  color: var(--btn-color, var(--kcvo-navy));
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 28px rgba(0,0,0,.2);
}

/* ---------- Section utilities ---------- */
.section-pad   { padding: 6rem 0; }
.section-pad-sm{ padding: 4rem 0; }
.bg-navy       { background: var(--kcvo-navy); }
.bg-light-kcvo { background: var(--kcvo-light); }

/* Étiquette en pastille colorée : le dégradé vient de --label-grad, posé en
   style inline par section (rouge/orange, violet/bleu, vert/cyan…), comme
   dans la maquette où chaque bloc a sa propre couleur. */
.section-label {
  display: inline-block;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--label-grad, var(--kcvo-navy));
  padding: .4rem 1rem;
  border-radius: 100px;
  margin-bottom: .5rem;
}

.section-title {
  font-size: clamp(1.6rem,3vw,2.4rem);
  font-weight: 800;
  color: var(--kcvo-navy);
}
.section-title-white { color: #fff; }

.section-line {
  width: 42px;
  height: 4px;
  background: var(--line-grad, var(--kcvo-gold));
  border-radius: 3px;
  margin: .9rem 0 1.5rem;
}
.section-line.center { margin-left: auto; margin-right: auto; }

/* ---------- Hero ---------- */
.hero-section {
  background: linear-gradient(135deg, #0f172a 0%, #1a1040 40%, var(--kcvo-red) 100%);
  min-height: 92vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.hero-section::before {
  content: '';
  position: absolute;
  top: -6rem; right: -6rem;
  width: 560px; height: 560px;
  border-radius: 50%;
  opacity: .2;
  background: radial-gradient(circle, var(--kcvo-orange) 0%, transparent 70%);
  pointer-events: none;
}
.hero-content { position: relative; z-index: 2; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .4rem 1rem;
  border-radius: 100px;
  margin-bottom: 1.5rem;
}
.hero-badge-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--kcvo-green-br);
  flex-shrink: 0;
}

.hero-title {
  font-size: clamp(2.4rem,5vw,3.8rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.025em;
  color: #fff;
  margin-bottom: 1.25rem;
}
.hero-title .accent-gradient {
  background: var(--grad-orange-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-sub {
  color: rgba(255,255,255,.75);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 480px;
}

.hero-stat .stat-num {
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.hero-stat .stat-lbl {
  font-size: .68rem;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: .2rem;
}
.hero-divider {
  width: 1px;
  background: rgba(255,255,255,.2);
  height: 40px;
  align-self: center;
}

/* ---------- Award Strip ---------- */
.award-strip {
  background: var(--grad-green-cyan);
  padding: 1.75rem 0;
}
.award-icon-box {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.award-icon {
  font-size: 1.1rem;
  color: #fff;
}
.award-label {
  font-size: .84rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}
.award-sub {
  font-size: .72rem;
  color: rgba(255,255,255,.75);
  margin-top: .1rem;
}

/* ---------- Discipline Cards ----------
   Chaque carte porte sa propre couleur via --card-accent (style inline) :
   la barre du haut, la pastille et la flèche au survol la reprennent toutes,
   comme les quatre couleurs de la maquette (karaté rouge, krav-maga violet,
   full contact or, tae kwon do vert). */
.disc-card {
  display: block;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
}
.disc-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(10,22,40,.3);
  text-decoration: none;
}
.disc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--card-accent, var(--kcvo-gold));
  z-index: 2;
}
.disc-card img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.disc-card:hover img { transform: scale(1.05); }
.disc-card .dc-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.2) 60%, transparent 100%);
  transition: background var(--transition);
}
.disc-card:hover .dc-overlay {
  background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.4) 70%, rgba(0,0,0,.1) 100%);
}
.disc-card .dc-body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.5rem;
}
.disc-card .dc-tag {
  display: inline-block;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--card-accent, var(--kcvo-navy));
  padding: .2rem .6rem;
  border-radius: 100px;
  margin-bottom: .5rem;
}
.disc-card .dc-name {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
}
.disc-card .dc-arrow {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--card-accent, var(--kcvo-gold));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  opacity: 0;
  transition: opacity var(--transition);
}
.disc-card:hover .dc-arrow { opacity: 1; }

/* ---------- Info Cards ---------- */
.info-card {
  background: var(--kcvo-light);
  border: 1px solid var(--kcvo-border);
  border-radius: 8px;
  padding: 2rem;
  height: 100%;
  transition: box-shadow var(--transition), border-color var(--transition);
}
.info-card:hover {
  box-shadow: 0 8px 32px rgba(10,22,40,.08);
  border-color: var(--kcvo-gold);
}
.info-card .ic-icon {
  width: 48px; height: 48px;
  border-radius: 8px;
  /* --ic-grad + --ic-color permettent de reprendre les icônes en dégradé
     de la section « Nous contacter » de l'accueil. */
  background: var(--ic-grad, rgba(245,197,24,.1));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  color: var(--ic-color, var(--kcvo-gold));
  margin-bottom: 1rem;
}

/* Variante translucide pour fond sombre (section À propos) : la carte
   « verre dépoli » de la maquette, avec l'icône colorée via --ic-grad
   (posé en style inline, une couleur différente par carte). */
.info-card-dark {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 1.5rem;
  backdrop-filter: blur(6px);
  transition: background var(--transition);
}
.info-card-dark:hover { background: rgba(255,255,255,.1); }
.info-card-dark .ic-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--ic-grad, var(--grad-red-orange-d));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  color: #fff;
  flex-shrink: 0;
}
.info-card-dark h5 {
  color: #fff;
  font-size: 1rem;
  margin-bottom: .35rem;
}
.info-card-dark p {
  color: rgba(255,255,255,.6);
  font-size: .88rem;
  margin: 0;
  line-height: 1.6;
}

/* ---------- Pricing ---------- */
.pricing-card {
  background: #fff;
  border: 1.5px solid var(--kcvo-border);
  border-radius: 10px;
  padding: 2.5rem 2rem;
  text-align: center;
  transition: all var(--transition);
  height: 100%;
}
.pricing-card:hover,
.pricing-card.featured {
  border-color: var(--kcvo-gold);
  box-shadow: 0 12px 40px rgba(245,197,24,.15);
  transform: translateY(-4px);
}
.pricing-card.featured {
  background: var(--kcvo-navy);
  color: #fff;
}
.pricing-card .pc-price {
  font-size: 3rem;
  font-weight: 800;
  color: var(--kcvo-navy);
  line-height: 1;
}
.pricing-card.featured .pc-price { color: var(--kcvo-gold); }
.pricing-card .pc-cat {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--kcvo-muted);
  margin-bottom: .5rem;
}
.pricing-card.featured .pc-cat { color: rgba(255,255,255,.5); }
.pricing-card .pc-label {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--kcvo-navy);
  margin-bottom: .75rem;
}
.pricing-card.featured .pc-label { color: #fff; }

/* ---------- Pass'Sport ----------
   Section pleine largeur en dégradé orange → or (comme la maquette) : plus
   de carte encadrée sur fond gris, la couleur habille toute la section. */
.passsport-section {
  background: linear-gradient(135deg, #f97316 0%, var(--kcvo-gold) 100%);
}
/* Bannière sombre encadrée (Self-Défense sur karate, exemple Pass'Sport sur
   tarifs) : classe de l'ancienne maquette absente du CSS demo2, refaite ici
   dans la nouvelle palette — même dégradé que la section sombre de l'accueil,
   sans quoi son texte blanc devient invisible sur fond clair. */
.passsport-banner {
  background: linear-gradient(160deg, #1a0a2e 0%, #16213e 50%, #0f172a 100%);
  border: 1px solid rgba(245,197,24,.25);
  border-radius: 16px;
  padding: 2.5rem;
  color: #fff;
}
.passsport-num {
  background: var(--num-grad, var(--grad-red-orange-d));
  color: #fff;
  font-weight: 800;
  font-size: 1.4rem;
  padding: .5rem 1rem;
  border-radius: 10px;
  display: inline-block;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}

/* ---------- Age Schedule Card ---------- */
.age-card {
  background: var(--kcvo-light);
  border: 1px solid var(--kcvo-border);
  border-left: 4px solid var(--kcvo-gold);
  border-radius: 6px;
  padding: 1.5rem;
  height: 100%;
  transition: box-shadow var(--transition);
}
.age-card:hover { box-shadow: 0 6px 24px rgba(10,22,40,.08); }
.age-card h4 {
  font-size: .88rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--kcvo-navy);
  margin-bottom: .5rem;
}
.age-card p {
  font-size: .88rem;
  color: var(--kcvo-muted);
  margin: 0;
  line-height: 1.6;
}

/* ---------- Page Hero ---------- */
.page-hero {
  /* Même dégradé que le hero de l'accueil (.hero-section). */
  background: linear-gradient(135deg, #0f172a 0%, #1a1040 40%, var(--kcvo-red) 100%);
  padding: 5rem 0 3.5rem;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at right, rgba(245,197,24,.06) 0%, transparent 65%);
}
.page-hero-inner { position: relative; z-index: 1; }
.page-hero h1 {
  font-size: clamp(2rem,4vw,3rem);
  font-weight: 800;
  color: #fff;
  margin-bottom: .75rem;
}
.page-hero p {
  color: rgba(255,255,255,.6);
  font-size: 1rem;
  max-width: 580px;
  line-height: 1.7;
  margin: 0;
}
.breadcrumb-item a { color: rgba(255,255,255,.45); text-decoration: none; font-size: .8rem; }
.breadcrumb-item.active { color: var(--kcvo-gold); font-size: .8rem; }
.breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.3); }

/* ---------- Contact ---------- */
.contact-section { background: var(--kcvo-navy); }
.ci-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}
.ci-icon {
  width: 42px; height: 42px;
  border-radius: 10px;
  background: var(--ci-grad, var(--grad-red-orange-d));
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 1rem;
  flex-shrink: 0;
}
.ci-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  display: block;
  margin-bottom: .15rem;
}
.ci-value {
  color: rgba(255,255,255,.85);
  font-size: .9rem;
  margin: 0;
}

/* ---------- Footer ----------
   Filet arc-en-ciel en haut (les six couleurs du site) ; les titres de
   colonne et les icônes sociales reprennent chacun une couleur différente,
   posée en style inline (--ft-grad / --ft-color), comme la maquette. */
.kcvo-footer {
  position: relative;
  background: #050e1c;
  border-top: 0;
  color: rgba(255,255,255,.75);
  font-size: .82rem;
}
.kcvo-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--grad-rainbow);
}
.kcvo-footer .ft-heading {
  display: inline-block;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ft-grad, var(--kcvo-navy-mid));
  padding: .3rem .7rem;
  border-radius: 6px;
  margin-bottom: 1rem;
}
.kcvo-footer a { color: rgba(255,255,255,.75); text-decoration: none; transition: color var(--transition); }
.kcvo-footer a:hover { color: #fff; }
.kcvo-footer .ft-legal {
  border-top: 1px solid rgba(255,255,255,.06);
  margin-top: 3rem;
  padding-top: 1.5rem;
  font-size: .72rem;
  color: rgba(255,255,255,.5);
}
.kcvo-footer .ft-social a {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--ft-grad, var(--grad-red-orange-d));
  color: #fff;
  font-size: .9rem;
  transition: all var(--transition);
}
.kcvo-footer .ft-social a:hover { transform: scale(1.1); }

/* ---------- Résultats sportifs (accueil) ----------
   Carte à bordure dégradée et médaille en émoji dans un rond de couleur,
   comme la maquette — la couleur vient de --medal-grad (style inline). */
.medal-result-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
  padding: 2rem 1.5rem;
  border-radius: 18px;
  border: 2px solid transparent;
  background: linear-gradient(#fff,#fff) padding-box, var(--medal-grad, var(--kcvo-border)) border-box;
  transition: transform var(--transition), box-shadow var(--transition);
}
.medal-result-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(15,23,42,.12);
}
.medal-result-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem;
  margin-bottom: 1.25rem;
  background: var(--medal-grad, var(--kcvo-navy));
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
}
.medal-result-title {
  font-weight: 800;
  color: var(--kcvo-navy);
  margin-bottom: .5rem;
}
.medal-result-detail {
  color: var(--kcvo-muted);
  font-size: .88rem;
  line-height: 1.6;
  margin: 0;
}

/* ---------- Calendrier (accueil) ----------
   Section sombre, dégradé bleu nuit → violet ; la liste des vacances prend
   l'aspect « verre dépoli » de la maquette. */
.calendrier-section {
  background: linear-gradient(160deg, #1e3a5f 0%, #1a1040 100%);
}
.vac-list {
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(6px);
}
.vac-row {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
  transition: background var(--transition);
}
.vac-row:last-child { border-bottom: none; }
.vac-row:hover { background: rgba(255,255,255,.05); }
.vac-period { font-weight: 700; color: #fff; font-size: .9rem; }
.vac-date   { font-size: .82rem; color: rgba(255,255,255,.55); margin-top: .2rem; }

/* ---------- Animations ---------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim-up { animation: fadeInUp .65s ease both; }
.d1 { animation-delay: .1s; }
.d2 { animation-delay: .2s; }
.d3 { animation-delay: .3s; }
.d4 { animation-delay: .4s; }
.d5 { animation-delay: .5s; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .hero-section { min-height: 70vh; padding: 5rem 0; }
  .section-pad  { padding: 4rem 0; }
  .kcvo-navbar .social-link { display: none; }
}
@media (max-width: 575.98px) {
  .disc-card img { height: 220px; }
  .pricing-card  { padding: 2rem 1.25rem; }
}

/* =============================================
   Équipe, palmarès et pages Club
   ============================================= */

/* ---------- Fiches de l'équipe ---------- */
/* Même carte que le reste du site (.info-card), avec la photo en rond dedans. */
.team-card {
  height: 100%;
  background: #fff;
  border: 1px solid var(--kcvo-border);
  border-radius: 10px;
  padding: 2rem 1.25rem 1.75rem;
  text-align: center;
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}
.team-card:hover {
  border-color: var(--kcvo-gold);
  box-shadow: 0 12px 40px rgba(245,197,24,.15);
  transform: translateY(-4px);
}

.team-avatar {
  width: 132px;
  height: 132px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  padding: 4px;
  background: var(--kcvo-light);
  border: 2px solid var(--kcvo-border);
  transition: border-color var(--transition);
}
.team-card:hover .team-avatar { border-color: var(--kcvo-gold); }

.team-avatar img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  background: var(--kcvo-border);
}

.team-role {
  display: block;
  color: var(--kcvo-gold);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.team-nom {
  display: block;
  color: var(--kcvo-navy);
  font-size: 1.02rem;
  font-weight: 700;
  margin-top: .4rem;
  line-height: 1.3;
}
.team-grade {
  display: block;
  color: var(--kcvo-muted);
  font-size: .8rem;
  line-height: 1.6;
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid var(--kcvo-border);
}

/* ---------- Compteurs de médailles ---------- */
.medal-card {
  height: 100%;
  background: var(--kcvo-navy);
  border: 1px solid rgba(245,197,24,.22);
  border-radius: 10px;
  padding: 1.75rem 1.5rem;
}
.medal-card-title {
  color: #fff;
  font-size: .95rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 1.25rem;
}
.medal-row { display: flex; gap: 1.5rem; }
.medal { flex: 1; }
.medal-dot {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-bottom: .5rem;
}
.medal-count {
  display: block;
  color: #fff;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}
.medal-label {
  display: block;
  color: rgba(255,255,255,.45);
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: .35rem;
}

/* ---------- Listes de podiums ---------- */
.podium-block { margin-bottom: 3rem; }
.podium-block:last-child { margin-bottom: 0; }
.podium-title {
  color: var(--kcvo-navy);
  font-size: 1.15rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding-bottom: .75rem;
  margin-bottom: 0;
  border-bottom: 2px solid var(--kcvo-gold);
}
.podium-list { list-style: none; margin: 0; padding: 0; }
.podium-item {
  display: grid;
  grid-template-columns: 3.25rem minmax(9rem, 12rem) 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding: .7rem 0;
  border-bottom: 1px solid var(--kcvo-border);
  font-size: .88rem;
}
.podium-medal {
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  border-radius: 100px;
  padding: .18rem 0;
}
.podium-nom { color: var(--kcvo-navy); font-weight: 700; }
.podium-epreuve { color: var(--kcvo-muted); }
.podium-lieu { color: var(--kcvo-muted); font-size: .82rem; white-space: nowrap; }

/* ---------- Tableau des titres nationaux ---------- */
.france-table { width: 100%; border-collapse: collapse; margin-top: 1.25rem; }
.france-table th, .france-table td {
  padding: .75rem 1rem;
  text-align: right;
  border-bottom: 1px solid var(--kcvo-border);
  font-size: .9rem;
}
.france-table thead th {
  color: var(--kcvo-muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.france-table th[scope="row"] { text-align: left; color: var(--kcvo-navy); }
.france-table tbody td { color: var(--kcvo-navy); font-weight: 600; }
.france-table tfoot th, .france-table tfoot td {
  color: var(--kcvo-navy);
  font-weight: 800;
  border-bottom: 0;
  border-top: 2px solid var(--kcvo-gold);
}

/* ---------- Résultats et galerie ---------- */
.result-card {
  margin: 0;
  height: 100%;
  background: #fff;
  border: 1px solid var(--kcvo-border);
  border-radius: 10px;
  overflow: hidden;
}
.result-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  background: var(--kcvo-border);
}
.result-card figcaption {
  padding: 1rem;
  color: var(--kcvo-navy);
  font-size: .84rem;
  line-height: 1.6;
}
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .75rem;
}
.photo-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  background: var(--kcvo-border);
}

/* ---------- Page À propos ---------- */
.champions-list { list-style: none; margin: 0; padding: 0; }
.champions-list li {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding: .5rem 0;
  color: var(--kcvo-navy);
  font-size: .95rem;
  border-bottom: 1px solid var(--kcvo-border);
}
.champions-n {
  color: var(--kcvo-gold);
  font-size: 1.35rem;
  font-weight: 800;
  min-width: 2rem;
}
.discipline-chip {
  display: inline-block;
  padding: .45rem 1rem;
  border-radius: 100px;
  background: var(--kcvo-light);
  border: 1px solid var(--kcvo-border);
  color: var(--kcvo-navy);
  font-size: .85rem;
  font-weight: 600;
}

@media (max-width: 767.98px) {
  .medal-row { gap: 1rem; }
  .podium-item { grid-template-columns: 3.25rem 1fr; row-gap: .2rem; }
  .podium-epreuve, .podium-lieu { grid-column: 2; }
}

/* ---------- Visuels du palmarès ---------- */
.medal-card { padding: 0; overflow: hidden; }
.medal-card-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  background: var(--kcvo-navy-mid);
}
.medal-card-title { padding: 1.5rem 1.5rem 0; }
.medal-card .medal-row { padding: 1.25rem 1.5rem 1.75rem; }
.medal-detail {
  display: block;
  color: rgba(255,255,255,.45);
  font-size: .68rem;
  line-height: 1.4;
  margin-top: .3rem;
}

.podium-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
  margin-top: 1.5rem;
}
.podium-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  background: var(--kcvo-border);
  position: sticky;
  top: 6rem;
}
.podium-layout .podium-list { margin-top: 0; }

@media (max-width: 991.98px) {
  .podium-layout { grid-template-columns: 1fr; gap: 1.5rem; }
  .podium-photo { position: static; aspect-ratio: 16 / 9; }
}

/* ---------- Logos ---------- */
/* Le tracé du logo est fin : en dessous d'une soixantaine de pixels il devient
   illisible, surtout sur le bleu nuit du pied de page. */
.kcvo-footer .ft-logo { height: 150px; width: auto; }

/* ---------- Débordement horizontal sur mobile ----------
   Une rangée `g-5` porte une marge négative de 24 px alors que `.container`
   ne réserve que 12 px de retrait : elle dépasse de 12 px de chaque côté, ce
   qui fait apparaître une barre de défilement horizontale sur les petits
   écrans. On y ramène la gouttière à la valeur par défaut, où l'espacement
   généreux n'a de toute façon pas d'intérêt. */
@media (max-width: 991.98px) {
  .container > .row.g-5,
  .container > .row.gx-5 { --bs-gutter-x: 1.5rem; }
}

/* ---------- Diaporama de l'accueil ---------- */
.hero-carousel {
  border-radius: 10px;
  overflow: hidden;
  background: var(--kcvo-navy-mid);
}
.hero-carousel .carousel-item img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  display: block;
}

/* Le voile orangé du visuel d'origine, conservé au-dessus des diapositives. */
.hero-carousel-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,107,53,.18) 0%, transparent 60%);
}

/* Le nom de la discipline, en bas à gauche — couleur propre à chaque
   diapositive, posée en style inline (--tag-accent), comme les pastilles
   colorées de la maquette. */
.hero-carousel-tag {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  padding: .3rem .8rem;
  border-radius: 100px;
  background: var(--tag-accent, var(--kcvo-red));
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.hero-carousel .carousel-indicators {
  margin-bottom: 1.35rem;
  margin-right: 1.25rem;
  justify-content: flex-end;
  z-index: 3;
}
.hero-carousel .carousel-indicators [data-bs-target] {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  margin: 0 4px;
  background: rgba(255,255,255,.45);
  opacity: 1;
  transition: background var(--transition), width var(--transition);
}
.hero-carousel .carousel-indicators .active {
  width: 22px;
  border-radius: 100px;
  background: var(--kcvo-orange);
}

/* Un diaporama qui s'anime tout seul est gênant pour qui demande moins de
   mouvement : le défilement est alors arrêté (voir assets/js/site.js) et la
   transition supprimée. */
@media (prefers-reduced-motion: reduce) {
  .hero-carousel .carousel-item { transition: none; }
}

/* ---------- Mentions légales ---------- */
.ft-mentions {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin-left: .5rem;
  font: inherit;
  color: rgba(255,255,255,.75);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--transition);
}
.ft-mentions:hover { color: var(--kcvo-gold); }
.ft-mentions:focus-visible { outline: 2px solid var(--kcvo-gold); outline-offset: 3px; }

.mentions-modal .modal-content {
  border: 0;
  border-radius: 10px;
  border-top: 3px solid var(--kcvo-gold);
}
.mentions-modal .modal-header {
  border-bottom: 1px solid var(--kcvo-border);
  padding: 1.5rem 1.75rem 1.25rem;
}
.mentions-modal .modal-title {
  color: var(--kcvo-navy);
  font-size: 1.35rem;
  font-weight: 800;
  margin: 0;
}
.mentions-modal .modal-body { padding: 1.5rem 1.75rem; }
.mentions-modal .modal-footer {
  border-top: 1px solid var(--kcvo-border);
  padding: 1rem 1.75rem;
}

.mentions-modal section + section {
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--kcvo-border);
}
.mentions-modal h3 {
  color: var(--kcvo-gold);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .85rem;
}
.mentions-modal p {
  color: #374151;
  font-size: .88rem;
  line-height: 1.75;
  margin-bottom: .75rem;
}
.mentions-modal p:last-child { margin-bottom: 0; }
.mentions-modal a { color: var(--kcvo-navy); text-decoration: underline; text-underline-offset: 2px; }
.mentions-modal a:hover { color: var(--kcvo-gold); }

.mentions-modal dl {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1fr;
  gap: .5rem 1.25rem;
  margin: 0;
  font-size: .88rem;
}
.mentions-modal dt {
  color: var(--kcvo-muted);
  font-weight: 600;
}
.mentions-modal dd {
  color: #374151;
  margin: 0;
  line-height: 1.6;
}
.mentions-note { color: var(--kcvo-muted); font-size: .82rem; }

@media (max-width: 575.98px) {
  .mentions-modal dl { grid-template-columns: 1fr; gap: .15rem; }
  .mentions-modal dd { margin-bottom: .6rem; }
}