/**
 * @file
 * Home hero — layout V7 pixel-perfect responsive (desktop / tablet / mobile).
 *
 * STRATÉGIE RESPONSIVE
 *   - Desktop (>=992px) : grille 2 cols, polaroids en position absolute
 *     avec rotations, badge superposé top-right. Rendu V7 exact.
 *   - Tablet (768–992px) : 1 col, visuals reste en absolute mais zone
 *     plus petite et centrée, polaroids/badge réduits proportionnellement.
 *   - Mobile (<768px) : 1 col, visuals passe en FLOW VERTICAL (les
 *     polaroids stack proprement, plus de superposition, badge en
 *     overlay sur le main). Évite tout débordement et coupe.
 */

/* ─────────── Section ─────────── */
.home-hero {
  padding: 3rem 0 4rem;
  position: relative;
  overflow: visible;
}

.home-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 3rem;
  align-items: center;
}

/* ─────────── Copy (gauche) ─────────── */
.home-hero__copy {
  min-width: 0;
}

.home-hero__copy .ocdm-underline,
.home-hero__copy .ocdm-underline--lg {
  display: block;
  margin: 0.5rem 0 1.5rem;
}

.home-hero__lead {
  font-family: var(--ocdm-font-body);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.5;
  max-width: 42ch;
  margin: 0 0 1.5rem;
  color: var(--ocdm-text);
}
.home-hero__lead p { margin: 0; }

/* ============================================================================
   DESKTOP (>=992px) — version exacte cible V7
   ============================================================================ */

/* Visuals = zone relative, polaroids et badge en absolute. */
.home-hero__visuals {
  position: relative;
  min-height: 540px;
}

.home-hero__photo-main {
  position: absolute;
  top: 0;
  left: 4%;
  width: 70%;
  margin: 0;
  --ocdm-rotate: -2deg;
}

.home-hero__photo-side {
  position: absolute;
  bottom: -6%;
  right: 0;
  width: 42%;
  margin: 0;
  z-index: 2;
  --ocdm-rotate: 4deg;
}

/* Photos hero : force aspect-ratio polaroid sur img (réelles photos cropées via object-fit) + placeholder identique. */
.home-hero__photo-main img,
.home-hero__photo-main .ocdm-photo-placeholder {
  aspect-ratio: 4 / 5;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  display: block;
}
.home-hero__photo-side img,
.home-hero__photo-side .ocdm-photo-placeholder {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  display: block;
}

.home-hero__badge {
  position: absolute;
  top: 2%;
  right: 14%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Rond + dimensions explicites — v7.css set 124×124 mais sans
     border-radius. Sans ça, le badge sort carré. */
  width: 124px;
  height: 124px;
  border-radius: 50%;
}

/* ============================================================================
   TABLET (768–991px) — 1 colonne, visuals plus petits mais position
   absolute conservée pour l'esprit V7.
   ============================================================================ */
@media (max-width: 991px) {
  .home-hero {
    padding: 2rem 0 3rem;
  }
  .home-hero__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .home-hero__copy {
    text-align: center;
    margin: 0 auto;
    max-width: 640px;
  }
  .home-hero__copy .ocdm-underline,
  .home-hero__copy .ocdm-underline--lg {
    margin-left: auto;
    margin-right: auto;
  }
  .home-hero__lead {
    margin-left: auto;
    margin-right: auto;
  }
  .home-hero__copy .ocdm-btn-group {
    justify-content: center;
  }

  /* Visuals : zone centrée, plus petite. Garde position absolute. */
  .home-hero__visuals {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    min-height: 460px;
  }
  .home-hero__photo-main { width: 64%; left: 6%; }
  .home-hero__photo-side { width: 44%; bottom: -4%; }
  .home-hero__badge {
    top: 4%;
    right: 8%;
    /* Taille un peu réduite via override des dim v7.css (124×124) */
    transform: rotate(-8deg) scale(0.85);
  }
}

/* ============================================================================
   MOBILE (<768px) — flow vertical, polaroids stack, badge en overlay
   ============================================================================ */
@media (max-width: 767px) {
  .home-hero {
    padding: 1.5rem 0 2rem;
  }
  .home-hero__grid {
    gap: 2rem;
  }
  .home-hero__copy {
    text-align: left;
    max-width: 100%;
  }
  .home-hero__copy .ocdm-underline,
  .home-hero__copy .ocdm-underline--lg {
    margin-left: 0;
    margin-right: 0;
  }
  .home-hero__lead {
    margin-left: 0;
    margin-right: 0;
  }
  .home-hero__copy .ocdm-btn-group {
    justify-content: flex-start;
  }

  /* Visuals : on quitte le position absolute et on stack verticalement.
     Le polaroid main au-dessus, le side en dessous en bas-droite,
     le badge en overlay coin haut-droite du main. */
  .home-hero__visuals {
    position: relative;
    min-height: 0;
    max-width: 360px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: stretch;
  }
  .home-hero__photo-main {
    position: relative;
    top: auto;
    left: auto;
    width: 92%;
    margin: 0 auto;
    --ocdm-rotate: -2deg;
  }
  .home-hero__photo-side {
    position: relative;
    bottom: auto;
    right: auto;
    width: 68%;
    margin: -1rem 0 0 auto;
    --ocdm-rotate: 4deg;
    z-index: 2;
  }
  .home-hero .ocdm-photo-placeholder { aspect-ratio: 4 / 5; }
  .home-hero__photo-side .ocdm-photo-placeholder { aspect-ratio: 1 / 1; }

  .home-hero__badge {
    position: absolute;
    top: -10px;
    right: -10px;
    transform: rotate(-8deg) scale(0.7);
    transform-origin: top right;
  }

  /* CTAs s'empilent verticalement si manque de place. */
  .ocdm-btn-group { width: 100%; }
  .ocdm-btn-group .ocdm-btn {
    flex: 1 1 auto;
  }
}

/* ============================================================================
   SMALL MOBILE (<480px) — réduction supplémentaire
   ============================================================================ */
@media (max-width: 479px) {
  .home-hero__visuals { max-width: 100%; }
  .home-hero__photo-main { width: 88%; }
  .home-hero__photo-side { width: 62%; }
  .home-hero__badge {
    transform: rotate(-8deg) scale(0.6);
  }
  .ocdm-btn-group {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ─────────── Bandeau urgent (sous hero) ─────────── */
.home-urgent-wrap {
  margin-top: 3rem;
  clear: both;
}

/* Le texte occupe l'espace entre label et CTA et est centré.
   Le contenu interne (p du processed_text) doit aussi voir ses margins neutralisés
   pour que le centrage vertical du flex parent fonctionne. */
.ocdm-urgent__text {
  flex: 1;
  text-align: center;
  margin: 0;
}
.ocdm-urgent__text > p,
.ocdm-urgent__text p:first-child,
.ocdm-urgent__text p:last-child {
  margin: 0;
}

@media (max-width: 767px) {
  .home-urgent-wrap { margin-top: 2rem; }
  .ocdm-urgent {
    flex-direction: column;
    align-items: stretch !important;
    text-align: center;
  }
  .ocdm-urgent__text { min-width: 0 !important; }
}

/* Sur fond framboise, le bouton .ocdm-btn--danger devient invisible.
   On le force en blanc + border ink pour contraste. */
.ocdm-urgent .ocdm-btn,
.ocdm-urgent .ocdm-btn--danger {
  background: #fff !important;
  color: var(--ocdm-text-strong, #1f1820) !important;
  border-color: var(--ocdm-text-strong, #1f1820) !important;
  flex-shrink: 0;
}
.ocdm-urgent .ocdm-btn:hover {
  background: var(--v7-blue, #b8d0db) !important;
  color: var(--ocdm-text-strong, #1f1820) !important;
}