/* ============================================================
   L'EFFET CLIQUET — LA BASCULE (bascule.css)
   MINIMAL : la page réutilise les classes de l'accueil (accueil.css) —
   héros rainbow (.home-hero-title.rainbow), capsules blanches
   (.s5 / .s5-capsule.capsule, animées par accueil.js), largeur
   (.s7-inner / .home-hero-content), titres Anybody (.s7-title),
   texte (.s7-block / .s2-sub), bouton (.home-hero-cta).
   Ce fichier ne contient QUE ce qui n'existe nulle part ailleurs.
   Aucune couleur en dur (variables theme.css).
   ============================================================ */

/* Accent framboise inline (ex. phrase clé dans un paragraphe) */
.bsc-accent { color: var(--accent); }

/* ---- Héros : hauteur mesurée (modificateur, ne redéfinit pas .home-hero) ----
   .home-hero garde tout son comportement (flex, centrage, padding) ; on ne
   surcharge QUE la hauteur pour que la photo ait de la place sans dominer. */
.bsc-hero { min-height: 66svh; }

/* ---- Héros : COUCHE IMAGE du cheval (derrière le texte) ----
   Couche dédiée en absolute/inset:0, z-index 0 (le contenu est z-index 5).
   background-size:contain → l'image apparaît EN ENTIER (tête + oreilles, bas
   non rognés) ; elle ne remplit pas toute la largeur, le reste est le fond
   rosé de la page (voulu). Calée à GAUCHE. Les bords déjà estompés du WebP
   suffisent à la fondre dans le fond : pas de masque (aucune ligne nette). */
.bsc-hero-photo {
  /* >>> opacité fond cheval — À AJUSTER ENSEMBLE <<< */
  --bsc-cheval-opacity: 0.5;

  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("/assets/img/bascule-cheval-tete-duotone.webp");
  background-size: contain;         /* image ENTIÈRE, hauteur non coupée */
  background-position: left center; /* calée à gauche, tête entière visible */
  background-repeat: no-repeat;

  opacity: var(--bsc-cheval-opacity);
  pointer-events: none;
}

/* ---- MOBILE (≤760px) : héros de bascule UNIQUEMENT ----
   Le desktop (background-size:contain, sans voile) reste inchangé : ces règles
   ne s'appliquent qu'en dessous de 760px. */
@media (max-width: 760px) {
  /* Pas de voile en mobile : on neutralise le .home-hero::after hérité
     d'accueil.css (voile mobile) pour CE héros (.bsc-hero) → aucune ligne. */
  .bsc-hero::after { display: none; }

  /* Titre centré comme en desktop (neutralise le justify-content:flex-end que
     .home-hero hérite d'accueil.css en mobile). */
  .bsc-hero { justify-content: center; }

  /* Image cheval plus grande en mobile, toujours calée à gauche.
     (Le desktop garde background-size:contain, défini hors media query.) */
  .bsc-hero-photo {
    /* >>> opacité fond cheval MOBILE — À AJUSTER <<< */
    --bsc-cheval-opacity: 0.5;
    /* >>> taille image cheval MOBILE — À AJUSTER (≈150–180%) <<< */
    background-size: 165%;
    background-position: left center;
    background-repeat: no-repeat;
  }
}

/* ---- SECTION 2 (le cheval) : photo en ARRIÈRE-PLAN, derrière le texte ----
   Même principe que .bsc-hero-photo : couche absolute/inset:0, z-index 0,
   calée à droite, bords déjà transparents (pas de voile, pas de ligne). Le
   texte (.s7-inner) repasse au-dessus via .bsc-cheval-content (z-index 1).
   La section .s7 est déjà position:relative → ancrage de la couche. */
.bsc-cheval-content { position: relative; z-index: 1; }  /* texte centré AU-DESSUS de l'image */

.bsc-cheval-photo {
  /* >>> taille image cliente (DESKTOP) — % de la HAUTEUR de section — À AJUSTER <<< */
  --bsc-cliente-size: 84%;
  /* >>> opacité image cliente (DESKTOP) — À AJUSTER <<< */
  --bsc-cliente-opacity: 0.35;

  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("/assets/img/bascule-cliente-cheval-duotone.webp");
  background-repeat: no-repeat;
  background-position: 75% center;                 /* ramenée vers la gauche (~½ largeur d'image depuis le bord droit) */
  background-size: auto var(--bsc-cliente-size);   /* dimensionnée par la HAUTEUR → image carrée ENTIÈRE, jamais rognée */
  opacity: var(--bsc-cliente-opacity);
  pointer-events: none;
}

@media (max-width: 760px) {
  /* Mobile : même logique (image en fond, à droite, dimensionnée par la hauteur),
     plus petite et plus estompée pour préserver la lisibilité du texte au-dessus. */
  .bsc-cheval-photo {
    /* >>> taille image cliente (MOBILE) — % de la HAUTEUR — À AJUSTER <<< */
    --bsc-cliente-size: 55%;
    /* >>> opacité image cliente (MOBILE) — À AJUSTER <<< */
    --bsc-cliente-opacity: 0.28;
  }
}

/* ---- SECTION 4 (pourquoi avec moi) : photo Davy+cheval en ARRIÈRE-PLAN ----
   EXACTEMENT le mécanisme validé de la section 2 (.bsc-cheval-photo), mais
   calée à GAUCHE (miroir : 25% au lieu de 75%). Dimensionnée par la HAUTEUR
   → image carrée entière, jamais rognée ; aucun voile (bords transparents). */
.bsc-davy-content { position: relative; z-index: 1; }  /* texte centré AU-DESSUS de l'image */

.bsc-davy-photo {
  /* >>> taille image Davy (DESKTOP) — % de la HAUTEUR de section — À AJUSTER <<< */
  --bsc-davy-size: 84%;
  /* >>> opacité image Davy (DESKTOP) — À AJUSTER <<< */
  --bsc-davy-opacity: 0.35;

  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("/assets/img/bascule-davy-cheval-duotone.webp");
  background-repeat: no-repeat;
  background-position: 25% center;             /* miroir de la section 2 → calée à GAUCHE */
  background-size: auto var(--bsc-davy-size);  /* dimensionnée par la HAUTEUR → image carrée ENTIÈRE, jamais rognée */
  opacity: var(--bsc-davy-opacity);
  pointer-events: none;
}

@media (max-width: 760px) {
  /* Mobile : même logique qu'en section 2 (à gauche, par la hauteur), plus
     petite et plus estompée pour la lisibilité du texte au-dessus. */
  .bsc-davy-photo {
    /* >>> taille image Davy (MOBILE) — % de la HAUTEUR — À AJUSTER <<< */
    --bsc-davy-size: 55%;
    /* >>> opacité image Davy (MOBILE) — À AJUSTER <<< */
    --bsc-davy-opacity: 0.28;
  }
}

/* Vidéo : embed responsive 16/9 centré dans la capsule blanche, coins
   arrondis, ratio conservé. Pas d'ombre (la capsule en porte déjà une). */
.bsc-video {
  position: relative;
  width: 100%;
  max-width: 960px;   /* élargie : prend quasi toute la largeur de la capsule */
  margin: 2.4rem auto 0;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.bsc-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Petit lien WhatsApp sous le bouton CTA (texte discret, pas un bouton) */
.bsc-wa {
  display: inline-block;
  margin-top: 1.4rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.bsc-wa:hover { color: var(--accent); }

/* Titres de section : réduits juste assez pour tenir sur UNE seule ligne
   en desktop (la taille pleine de .s7-title débordait sur 2 lignes).
   Sur mobile, le retour à la ligne naturel est réautorisé. */
.s7-title {
  white-space: nowrap;
  font-size: clamp(1.55rem, 3.2vw, 1.85rem);
}
@media (max-width: 760px) {
  .s7-title { white-space: normal; font-size: clamp(1.5rem, 6vw, 1.95rem); }
}