/* ============================================
   YOGA SHALA ARDENNES — Images
   --------------------------------------------
   TOUTES les images du site sont définies ICI.

   ⚠️ ACTUELLEMENT : les images pointent vers le site Wix existant
   (static.wixstatic.com). C'est une solution TEMPORAIRE pratique, mais
   ces images dépendent de l'abonnement Wix de l'association. Si Wix est
   résilié un jour, les images disparaîtront.

   ➜ SOLUTION DURABLE recommandée : enregistre chaque image
   (clic droit → Enregistrer l'image) depuis yogashalaardennes.fr,
   dépose-les dans le dossier assets/, puis remplace chaque URL ci-dessous
   par : url('../assets/nom-de-ta-photo.png')
   ============================================ */

:root {
  /* --- IMAGES DE FOND (remplaçables) --- */
  /* Hero accueil — photo Vinyasa du studio */
  --img-hero: url('https://static.wixstatic.com/media/a94738_5250189a7d8d4f8abebfdd0354f1d23d~mv2.png/v1/fill/w_1600,h_900,al_c,q_90,enc_auto/VINYASA.png');
  /* Bandeau À propos — Yoga Nidra */
  --img-about: url('https://static.wixstatic.com/media/a94738_a1d07edeb0264b56b44b96723f8d3d64~mv2.png/v1/fill/w_1200,h_675,al_c,q_90,enc_auto/a94738_a1d07edeb0264b56b44b96723f8d3d64~mv2.png');
  /* Bandeau séance découverte — Yoga Thérapie */
  --img-cta: url('https://static.wixstatic.com/media/a94738_71c232eb07e946e788a61070c3afab91~mv2.png/v1/fill/w_1600,h_900,al_c,q_90,enc_auto/YOGA%20THERAPIE.png');
  /* En-têtes de pages internes — Pilates */
  --img-page-header: url('https://static.wixstatic.com/media/a94738_f252cd5526774f2bb40f0556b7b7fafe~mv2.png/v1/fill/w_1600,h_700,al_c,q_90,enc_auto/PILATES.png');

  /* --- IMAGES DISCIPLINES (vraies photos du studio) --- */
  --img-vinyasa: url('https://static.wixstatic.com/media/a94738_5250189a7d8d4f8abebfdd0354f1d23d~mv2.png/v1/fill/w_700,h_460,al_c,q_90,enc_auto/VINYASA.png');
  --img-yin: url('https://static.wixstatic.com/media/a94738_e14a95cd5fa34fa2800d931afcef910c~mv2.png/v1/fill/w_700,h_460,al_c,q_90,enc_auto/YIN%20YOGA.png');
  --img-nidra: url('https://static.wixstatic.com/media/a94738_a1d07edeb0264b56b44b96723f8d3d64~mv2.png/v1/fill/w_700,h_460,al_c,q_90,enc_auto/a94738_a1d07edeb0264b56b44b96723f8d3d64~mv2.png');
  --img-pilates: url('https://static.wixstatic.com/media/a94738_f252cd5526774f2bb40f0556b7b7fafe~mv2.png/v1/fill/w_700,h_460,al_c,q_90,enc_auto/PILATES.png');
  --img-therapie: url('https://static.wixstatic.com/media/a94738_71c232eb07e946e788a61070c3afab91~mv2.png/v1/fill/w_700,h_460,al_c,q_90,enc_auto/YOGA%20THERAPIE.png');
  --img-reformer: url('https://static.wixstatic.com/media/a94738_f252cd5526774f2bb40f0556b7b7fafe~mv2.png/v1/fill/w_700,h_460,al_c,q_90,enc_auto/PILATES.png');
  --img-swissball: url('https://static.wixstatic.com/media/a94738_d26c8696be1446358d6f733f393e79d0~mv2.png/v1/fill/w_700,h_460,al_c,q_90,enc_auto/a94738_d26c8696be1446358d6f733f393e79d0~mv2.png');
  --img-massage: url('https://static.wixstatic.com/media/a94738_7463cadf7598408392f64836bec83cdb~mv2.png/v1/fill/w_700,h_460,al_c,q_90,enc_auto/THAI%20YOGA%20MASSAGE.png');

  /* --- IMAGES LIEUX (fond sauge de repli — remplace par tes photos des lieux) --- */
  --img-charleville: url('https://static.wixstatic.com/media/a94738_5250189a7d8d4f8abebfdd0354f1d23d~mv2.png/v1/fill/w_700,h_460,al_c,q_90,enc_auto/VINYASA.png');
  --img-bazeilles: url('https://static.wixstatic.com/media/a94738_f252cd5526774f2bb40f0556b7b7fafe~mv2.png/v1/fill/w_700,h_460,al_c,q_90,enc_auto/PILATES.png');
  --img-sedan: url('https://static.wixstatic.com/media/a94738_a1d07edeb0264b56b44b96723f8d3d64~mv2.png/v1/fill/w_700,h_460,al_c,q_90,enc_auto/a94738_a1d07edeb0264b56b44b96723f8d3d64~mv2.png');
}

/* ============================================
   HERO avec image de fond
   ============================================ */
.hero {
  background-image:
    linear-gradient(180deg, rgba(250,247,242,0.82) 0%, rgba(250,247,242,0.92) 60%, var(--color-bg) 100%),
    var(--img-hero);
  background-size: cover;
  background-position: center;
}

/* Sur grand écran, hero plus immersif avec photo plus visible */
@media (min-width: 768px) {
  .hero {
    background-image:
      linear-gradient(90deg, rgba(250,247,242,0.95) 0%, rgba(250,247,242,0.75) 50%, rgba(250,247,242,0.55) 100%),
      var(--img-hero);
    min-height: 70vh;
    display: flex;
    align-items: center;
  }
  .hero .container { width: 100%; }
  .hero-content {
    text-align: left;
    margin: 0;
  }
  .hero-actions { justify-content: flex-start; }
}

/* ============================================
   CARTES DISCIPLINES avec photo en-tête
   ============================================ */
.discipline-card {
  overflow: hidden;
  padding: 0;
}

.discipline-card .card-img {
  width: 100%;
  height: 180px;
  background-size: cover;
  background-position: center;
  background-color: var(--color-sage-light);
  background-repeat: no-repeat;
  position: relative;
  /* Léger overlay sauge pour harmonie avec la palette */
}

.discipline-card .card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(93,120,97,0) 40%, rgba(93,120,97,0.25) 100%);
}

.discipline-card .card-body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex-grow: 1;
}

/* Mapping des images par discipline (page accueil + disciplines) */
.card-img.img-vinyasa { background-image: var(--img-vinyasa); }
.card-img.img-yin { background-image: var(--img-yin); }
.card-img.img-nidra { background-image: var(--img-nidra); }
.card-img.img-pilates { background-image: var(--img-pilates); }
.card-img.img-therapie { background-image: var(--img-therapie); }
.card-img.img-reformer { background-image: var(--img-reformer); }
.card-img.img-swissball { background-image: var(--img-swissball); }
.card-img.img-massage { background-image: var(--img-massage); }

/* Pour les grandes cartes détaillées (page disciplines), image en bandeau plus haut */
.discipline-card.detailed .card-img {
  height: 240px;
}

/* ============================================
   PAGE HEADER avec image de fond
   ============================================ */
.page-header.with-image {
  background-color: var(--color-bg-alt);
  background-image:
    linear-gradient(180deg, rgba(241,236,227,0.85) 0%, rgba(250,247,242,0.92) 100%),
    var(--img-page-header);
  background-size: cover;
  background-position: center;
}

/* ============================================
   SECTION À PROPOS avec image
   ============================================ */
.about-image {
  width: 100%;
  height: 320px;
  border-radius: 4px;
  background-image: var(--img-about);
  background-size: cover;
  background-position: center;
  background-color: var(--color-sage);
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

.about-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(135,160,138,0.15) 0%, rgba(93,120,97,0.1) 100%);
}

@media (min-width: 800px) {
  .about-image { height: 100%; min-height: 380px; }
}

/* ============================================
   SECTION CTA "séance découverte" avec image
   ============================================ */
.cta-section.with-image {
  background-color: var(--color-text);
  background-image:
    linear-gradient(180deg, rgba(44,58,46,0.55) 0%, rgba(44,58,46,0.65) 100%),
    var(--img-cta);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.cta-section.with-image h2,
.cta-section.with-image .eyebrow,
.cta-section.with-image .lead,
.cta-section.with-image .hero-namaste {
  color: var(--color-cream);
}

.cta-section.with-image .lead { opacity: 0.92; }

/* Désactiver le parallaxe sur mobile (perf + bug iOS) */
@media (max-width: 768px) {
  .cta-section.with-image { background-attachment: scroll; }
}

/* ============================================
   CARTES LIEUX avec photo
   ============================================ */
.place-card {
  overflow: hidden;
  padding: 0;
}

.place-card .place-img {
  width: 100%;
  height: 140px;
  background-size: cover;
  background-position: center;
  background-color: var(--color-sage-light);
  background-repeat: no-repeat;
}

.place-card .place-img.img-charleville { background-image: var(--img-charleville); }
.place-card .place-img.img-bazeilles { background-image: var(--img-bazeilles); }
.place-card .place-img.img-sedan { background-image: var(--img-sedan); }

.place-card .place-body {
  padding: var(--space-sm);
}

/* ============================================
   Petit ornement : image ronde décorative
   ============================================ */
.img-circle {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: var(--color-sage);
  background-repeat: no-repeat;
  margin: 0 auto;
  box-shadow: 0 20px 50px -20px rgba(93,120,97,0.4);
}