/* =========================================================
   MKD FIT TRAINING — Design System
   Coaching sportif premium pour femmes
   ========================================================= */

/* ===================== SPLASH SCREEN INTRO ===================== */
#mkd-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #191512;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
#mkd-splash.splash-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#splash-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Empêche le scroll pendant le splash */
body.splash-active {
  overflow: hidden;
}

:root{
  --color-black: #191512;
  --color-charcoal: #2b2521;
  --color-cream: #f8f4ef;
  --color-cream-dark: #efe7dc;
  --color-beige: #e9dfd0;
  --color-rose: #c98a7a;
  --color-rose-dark: #a86454;
  --color-gold: #b48b52;
  --color-white: #ffffff;
  --color-text: #2b2521;
  --color-text-soft: #5c5349;
  --color-border: #e2d8c8;

  --font-serif: 'Playfair Display', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-soft: 0 12px 32px rgba(25, 21, 18, 0.08);
  --shadow-strong: 0 20px 48px rgba(25, 21, 18, 0.18);
  --max-width: 1180px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-cream);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; }
li{ list-style:none; }

.container{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

h1,h2,h3,h4{
  font-family: var(--font-serif);
  color: var(--color-black);
  line-height: 1.22;
  margin: 0 0 16px;
  font-weight: 700;
}
h1{ font-size: clamp(2rem, 4.2vw, 3.4rem); }
h2{ font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3{ font-size: clamp(1.2rem, 2vw, 1.5rem); }
p{ margin: 0 0 16px; color: var(--color-text-soft); }
strong{ color: var(--color-black); }

.eyebrow{
  display:inline-block;
  font-family: var(--font-sans);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-rose-dark);
  margin-bottom: 12px;
}

/* Sections en "verre dépoli" : légèrement translucides + flou, pour laisser
   la vidéo de fond transparaître subtilement derrière tout le contenu tout
   en gardant le texte parfaitement lisible (contraste conservé). */
.section{
  padding: 72px 0;
  background: rgba(248,244,239,0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.section--tight{
  padding: 48px 0;
  background: rgba(248,244,239,0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.section--dark{
  background: rgba(25,21,18,0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--color-cream);
}
.section--dark h2, .section--dark h3{ color: var(--color-cream); }
.section--dark p{ color: #cfc6ba; }
.section--beige{
  background: rgba(233,223,208,0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.text-center{ text-align:center; }
.section-intro{
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{
  background: var(--color-rose-dark);
  color: var(--color-white);
  box-shadow: var(--shadow-soft);
}
.btn-primary:hover{ background: var(--color-black); }
.btn-secondary{
  background: transparent;
  color: var(--color-black);
  border-color: var(--color-black);
}
.btn-secondary:hover{ background: var(--color-black); color: var(--color-white); }
.btn-gold{
  background: var(--color-gold);
  color: var(--color-white);
}
.btn-gold:hover{ background: var(--color-black); }
.btn-whatsapp{
  background: #25D366;
  color:#fff;
}
.btn-whatsapp:hover{ background:#1aa64d; }
.btn-block{ width:100%; }
.btn-sm{ padding: 10px 20px; font-size: 0.85rem; }

.cta-group{
  display:flex;
  flex-wrap:wrap;
  gap: 14px;
  align-items:center;
}
.cta-group.center{ justify-content:center; }

/* ---------- Header ---------- */
.site-header{
  position: sticky;
  top:0;
  z-index: 200;
  background: rgba(248,244,239,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
  gap: 20px;
}
.logo{
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-black);
  letter-spacing: 0.5px;
}
.logo span{ color: var(--color-rose-dark); }

.main-nav{
  display:flex;
  align-items:center;
  gap: 26px;
}
.main-nav a{
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-charcoal);
  position:relative;
  padding: 6px 0;
}
.main-nav a:hover{ color: var(--color-rose-dark); }
.main-nav .has-dropdown{ position: relative; }
.dropdown{
  display:none;
  position:absolute;
  top: 100%;
  left: 0;
  background: var(--color-white);
  min-width: 260px;
  box-shadow: var(--shadow-strong);
  border-radius: var(--radius-md);
  padding: 10px;
  z-index: 50;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown{ display:block; }
.dropdown a{
  display:block;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
}
.dropdown a:hover{ background: var(--color-cream-dark); }

.header-actions{ display:flex; align-items:center; gap: 12px; }

.nav-toggle{ display:none; }
.nav-toggle-label{
  display:none;
  cursor:pointer;
  font-size: 1.6rem;
  line-height:1;
  padding: 4px 8px;
}

@media (max-width: 980px){
  /* Le nav est téléporté dans <body> par JS — position fixed au niveau racine */
  .main-nav{
    position:fixed;
    top: 68px;
    left:0; right:0;
    background: var(--color-white);
    flex-direction: column;
    align-items:flex-start;
    padding: 20px 24px 30px;
    gap: 6px;
    max-height: calc(100vh - 68px);
    overflow-y:auto;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    transform: translateY(-110%);
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    z-index: 99999;
  }
  .main-nav.nav--open{ transform: translateY(0); }
  .main-nav a{ width:100%; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
  .dropdown{ position:static; box-shadow:none; display:block; padding:0 0 0 14px; }
  .has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{ display:block; }
  .nav-toggle-label{ display:block; }
  /* Checkbox hack conservé en fallback si JS désactivé */
  .nav-toggle:checked ~ .main-nav{ transform: translateY(0); }
  .header-actions .btn-secondary{ display:none; }
}

/* ---------- Fond vidéo du site (portes MKD, fixe derrière tout le contenu) ---------- */
/* La vidéo reste plaquée à l'écran (position: fixed) pendant tout le scroll de la
   page : c'est un vrai arrière-plan, pas un bloc en haut de page. Sa progression
   (currentTime) est pilotée par js/scroll-video.js en fonction du scroll total de
   la page. Le contenu (header, sections) passe PAR-DESSUS avec un z-index supérieur
   et un fond opaque/quasi-opaque pour rester parfaitement lisible. */
.site-bg-video{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  overflow: hidden;
  background: #0d0b09;
}
.site-bg-video video{
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  will-change: transform;
  backface-visibility: hidden;
}
.site-bg-video__scrim{
  position: absolute;
  inset: 0;
  background: rgba(13,11,9,0.25);
}
@media (prefers-reduced-motion: reduce){
  .site-bg-video{ position: absolute; height: 100vh; }
}

/* Le contenu du site passe au-dessus de la vidéo de fond : header, hero et toutes
   les sections doivent avoir un fond opaque/quasi-opaque + z-index > 0. */
.site-header{ position: sticky; }
.site-header,
.hero,
.section,
.site-footer,
.sticky-cta{
  position: relative;
  z-index: 1;
}

/* ---------- Hero ---------- */
.hero{
  position: relative;
  overflow:hidden;
  background: rgba(248,244,239,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1;
}
.hero .container{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items:center;
  padding-top: 56px;
  padding-bottom: 56px;
}
.hero h1{ margin-bottom: 20px; }
.hero-lead{ font-size: 1.1rem; max-width: 560px; }
.hero-media{
  position: relative;
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-strong);
}
.hero-media img{ width:100%; height:100%; object-fit: cover; aspect-ratio: 3/4; }
.hero-badges{
  display:flex;
  gap: 18px;
  margin-top: 28px;
  flex-wrap:wrap;
}
.hero-badge{
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-black);
  display:flex;
  align-items:center;
  gap: 8px;
}
.hero-badge::before{ content:"✓"; color: var(--color-rose-dark); font-weight:900; }

@media (max-width: 900px){
  .hero .container{ grid-template-columns: 1fr; padding-top: 32px; }
  .hero-media{
    order: -1;
    max-width: 200px;
    margin: 0 0 0 auto;
    margin-right: 16px;
  }
}
@media (max-width: 480px){
  .hero-media{
    max-width: 160px;
    margin-right: 12px;
  }
}

/* ---------- Page header (non-home) ---------- */
.page-hero{
  background: linear-gradient(120deg, var(--color-black), var(--color-charcoal));
  color: var(--color-cream);
  padding: 56px 0 48px;
}
.page-hero h1{ color: var(--color-white); }
.page-hero p{ color: #d9d0c3; max-width: 700px; }
.breadcrumb{
  font-size: 0.8rem;
  color: #b7ab99;
  margin-bottom: 16px;
}
.breadcrumb a{ color: #b7ab99; text-decoration: underline; }

/* ---------- Cards / Grid ---------- */
.grid{
  display:grid;
  gap: 28px;
}
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; }
}

.card{
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--color-border);
}

/* ---------- Method steps ---------- */
.steps{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  counter-reset: step;
}
@media (max-width: 900px){ .steps{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .steps{ grid-template-columns: 1fr; } }
.step{
  position: relative;
  padding: 28px 22px;
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.step-number{
  font-family: var(--font-serif);
  font-size: 2.2rem;
  color: var(--color-rose-dark);
  font-weight:700;
  margin-bottom: 10px;
  display:block;
}

/* ---------- Pricing ---------- */
.pricing-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
@media (max-width: 980px){ .pricing-grid{ grid-template-columns: 1fr; } }
.price-card{
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 34px 28px;
  box-shadow: var(--shadow-soft);
  display:flex;
  flex-direction:column;
  position: relative;
}
.price-card--featured{
  border: 2px solid var(--color-rose-dark);
  transform: translateY(-8px);
  box-shadow: var(--shadow-strong);
}
.price-card--featured .badge-top{
  position:absolute;
  top: -14px; right: 24px;
  background: var(--color-rose-dark);
  color:#fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
}
.price-card h3{ margin-bottom:6px; }
.price-tagline{ font-size: 0.88rem; color: var(--color-text-soft); margin-bottom: 20px; }
.price-ht{
  font-family: var(--font-serif);
  font-size: 2.6rem;
  color: var(--color-black);
  font-weight: 700;
  line-height:1;
}
.price-ht sup{ font-size: 1rem; font-weight:600; }
.price-ttc{
  font-size: 0.82rem;
  color: var(--color-text-soft);
  margin-bottom: 22px;
}
.price-features{ margin-bottom: 26px; flex-grow:1; }
.price-features li{
  padding: 8px 0 8px 26px;
  position: relative;
  font-size: 0.92rem;
  border-bottom: 1px dashed var(--color-border);
}
.price-features li::before{
  content:"✓";
  position:absolute; left:0; top:8px;
  color: var(--color-rose-dark);
  font-weight:900;
}
.price-features li:last-child{ border-bottom:none; }
.price-features li.feature-no{ color: var(--color-text-soft); }
.price-features li.feature-no::before{ content:"✗"; color: #bbb; }

/* Options d'engagement (3/6/12 mois) */
.price-options{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  background: var(--color-cream);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.price-option{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  gap: 8px;
}
.price-option-label{ color: var(--color-text-soft); }
.price-option-label strong{ color: var(--color-rose-dark); }
.price-option-price{ font-weight: 700; color: var(--color-black); text-align:right; }
.price-option-price em{ display:block; font-style:normal; font-size:0.75rem; color: var(--color-text-soft); font-weight:400; }

/* Boutons CTA dans les cartes */
.price-cta-group{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}
.btn-block{ width:100%; text-align:center; }

.discovery-card{
  background: var(--color-black);
  color: var(--color-cream);
  border-radius: var(--radius-lg);
  padding: 40px;
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items:center;
  box-shadow: var(--shadow-strong);
}
.discovery-card h3{ color: var(--color-white); }
.discovery-card p{ color: #d9d0c3; }
@media (max-width: 760px){ .discovery-card{ grid-template-columns: 1fr; text-align:center; } }

/* ---------- Testimonials ---------- */
.testimonial-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 980px){ .testimonial-grid{ grid-template-columns: 1fr; } }
.testimonial{
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 28px;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
}
.testimonial-stars{ color: var(--color-gold); font-size: 1rem; margin-bottom: 10px; letter-spacing: 2px; }
.testimonial-quote{ font-style: italic; color: var(--color-text); margin-bottom: 16px; }
.testimonial-author{ font-weight: 700; color: var(--color-black); font-size: 0.9rem; }
.testimonial-meta{ font-size: 0.8rem; color: var(--color-text-soft); }
.testimonial-result{
  display:inline-block;
  margin-top: 10px;
  background: var(--color-cream-dark);
  color: var(--color-rose-dark);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 100px;
}

/* ---------- FAQ (accordion, no-JS friendly via <details>) ---------- */
.faq-list{ max-width: 820px; margin: 0 auto; }
.faq-item{
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: 14px;
  padding: 4px 22px;
}
.faq-item summary{
  cursor:pointer;
  font-weight: 700;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  padding: 18px 30px 18px 0;
  position: relative;
  color: var(--color-black);
  list-style:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+";
  position:absolute;
  right: 0; top: 16px;
  font-size: 1.6rem;
  color: var(--color-rose-dark);
  transition: transform .2s ease;
}
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{ padding-bottom: 18px; margin:0; }

/* ---------- Local SEO block ---------- */
.seo-block{
  background: var(--color-cream-dark);
  border-radius: var(--radius-lg);
  padding: 40px;
  font-size: 0.92rem;
  color: var(--color-text-soft);
}
.seo-block h2, .seo-block h3{ font-size: 1.2rem; }
.tag-list{ display:flex; flex-wrap:wrap; gap: 10px; margin-top:16px; }
.tag-list li{
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 100px;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-charcoal);
}

/* ---------- Info list (locations, hours) ---------- */
.info-list li{
  display:flex;
  gap:12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.95rem;
}
.info-list li strong{ min-width: 140px; display:inline-block; }

/* ---------- Table (comparison) ---------- */
.compare-table{ width:100%; border-collapse: collapse; margin: 20px 0; }
.compare-table th, .compare-table td{
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  text-align:left;
  font-size: 0.9rem;
}
.compare-table th{ background: var(--color-cream-dark); font-family: var(--font-serif); }

/* ---------- Blog ---------- */
.blog-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
@media (max-width: 980px){ .blog-grid{ grid-template-columns: 1fr; } }
.blog-card{
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow:hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
}
.blog-card img{ aspect-ratio: 16/10; object-fit: cover; }
.blog-card-body{ padding: 22px; }
.blog-tag{
  font-size: 0.72rem;
  text-transform:uppercase;
  letter-spacing: 1px;
  color: var(--color-rose-dark);
  font-weight: 700;
}
.article-content{ max-width: 720px; margin: 0 auto; }
.article-content h2{ margin-top: 40px; }
.article-meta{ color: var(--color-text-soft); font-size: 0.85rem; margin-bottom: 30px; }

/* ---------- Footer ---------- */
.site-footer{
  background: var(--color-black);
  color: #cfc6ba;
  padding: 60px 0 24px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 36px;
  margin-bottom: 40px;
}
@media (max-width: 900px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-grid h4{ color: #fff; font-size: 1rem; margin-bottom: 16px; }
.footer-grid ul li{ margin-bottom: 10px; font-size: 0.88rem; }
.footer-grid ul li a:hover{ color: var(--color-rose); }
.footer-logo{ font-family: var(--font-serif); font-size: 1.4rem; color:#fff; margin-bottom: 12px; display:block; }
.footer-social{ margin-top: 10px; font-size: 0.85rem; }
.footer-social a{ text-decoration: underline; }
.footer-social a:hover{ color: var(--color-rose); }
.footer-bottom{
  border-top: 1px solid #3a332c;
  padding-top: 22px;
  display:flex;
  justify-content: space-between;
  flex-wrap:wrap;
  gap: 12px;
  font-size: 0.8rem;
  color: #9a8f80;
}
.footer-bottom a{ color: #9a8f80; }
.footer-bottom a:hover{ color: var(--color-rose); }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{
  position: fixed;
  bottom:0; left:0; right:0;
  z-index: 300;
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  padding: 10px 14px;
  display:none;
  gap: 10px;
  box-shadow: 0 -6px 20px rgba(0,0,0,0.1);
}
.sticky-cta .btn{ flex:1; padding: 13px 10px; font-size: 0.82rem; }
@media (max-width: 760px){
  .sticky-cta{ display:flex; }
  body{ padding-bottom: 72px; }
}

/* ---------- Utility ---------- */
.mt-0{ margin-top:0; }
.mb-0{ margin-bottom:0; }
.small{ font-size: 0.85rem; }
.badge{
  display:inline-block;
  background: var(--color-rose);
  color:#fff;
  font-size: 0.72rem;
  font-weight:700;
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 12px;
  letter-spacing: 0.5px;
}
.divider{ height:1px; background: var(--color-border); margin: 48px 0; }
.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items:center; }
@media (max-width: 900px){ .two-col{ grid-template-columns: 1fr; } }
.img-rounded{ border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.list-check li{ padding-left: 26px; position:relative; margin-bottom: 10px; }
.list-check li::before{ content:"✓"; position:absolute; left:0; color: var(--color-rose-dark); font-weight:900; }