/*
 * HomeBe — Accueil v2  ([homebe_accueil_v2])
 * Genere depuis la maquette Claude Design "HomeBe Accueil v1".
 *
 * Le style est majoritairement inline dans le HTML du shortcode. Ce fichier
 * ne porte que ce qui ne peut pas l'etre : keyframes, etats :hover / ::after
 * (.hb-s*) et le responsive (.hbm-*). Tout est scope sous .hb-accueil-v2
 * pour ne pas interferer avec style.css du theme ni avec homebe-mvp.css.
 */

/* ---- Bases, limitees au bloc ---- */
.hb-accueil-v2, .hb-accueil-v2 *, .hb-accueil-v2 *::before, .hb-accueil-v2 *::after { box-sizing: border-box; }
.hb-accueil-v2 {
  /* Full-bleed : les sections a fond colore vont bord a bord quel que soit
     le conteneur d'Elementor. Meme technique que .hb-bg-cream du theme. */
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  color: #1B2A4E; font-family: 'DM Sans', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
.hb-accueil-v2 img, .hb-accueil-v2 svg, .hb-accueil-v2 video { display: block; max-width: 100%; }
.hb-accueil-v2 a, .hb-accueil-v2 a:link, .hb-accueil-v2 a:visited { color: #1B2A4E; text-decoration: none; }
.hb-accueil-v2 a:hover { color: #0F1A33; }

  @keyframes hb-float-a { 0%,100%{transform:translate(0,0)} 50%{transform:translate(6px,-10px)} }
  @keyframes hb-float-b { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-8px,8px)} }
  @keyframes hb-float-c { 0%,100%{transform:translate(0,0)} 50%{transform:translate(10px,6px)} }
  @keyframes hb-float-d { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-6px,-8px)} }
  @keyframes hb-pulse-ring { 0%{transform:scale(1);opacity:.6} 100%{transform:scale(1.8);opacity:0} }
  @keyframes hb-dash { to { stroke-dashoffset:-200; } }
  @keyframes hb-blink { 0%,40%{opacity:.85} 50%,60%{opacity:.35} 70%,100%{opacity:.85} }
  @keyframes hb-live-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
  @keyframes hb-marquee-l { from{transform:translateX(0)} to{transform:translateX(-50%)} }
  @keyframes hb-marquee-r { from{transform:translateX(-50%)} to{transform:translateX(0)} }
  .hb-s1:hover { border-color:#1B2A4E }
  .hb-s2:hover { background:#B8852B;color:#fff;transform:translateY(-1px) }
  .hb-s3:hover { background:#1B2A4E;color:#fff;transform:translateY(-1px) }
  .hb-s4:hover { border-color:#1B2A4E;transform:translateY(-2px) }
  .hb-s5:hover { background:rgba(255,255,255,.14);transform:translateY(-1px) }
  .hb-s6:hover { transform:rotateY(12deg) rotateX(2deg) translateZ(-60px) }
  .hb-s7:hover { transform:rotateY(-12deg) rotateX(2deg) translateZ(-60px) }
  .hb-s8:hover { background:#0F1A33;transform:translateY(-1px) }
  .hb-s9:hover { background:rgba(255,255,255,.09);border-color:rgba(217,164,65,.5) }
  .hb-s10::after { content:'';position:absolute;left:0;right:0;bottom:-2px;height:3px;background:#D9A441;border-radius:2px }

  /* ============================================================
     RESPONSIVE — breakpoints alignés sur le thème HomeBe (900 / 600 / 400)
     ============================================================ */

  /* ---------- <= 900px : tablette ---------- */
  @media (max-width: 900px) {
    .hbm-s1    { padding: 112px 0 64px !important; }
    .hbm-s389  { padding: 88px 0 72px !important; }
    .hbm-s4    { padding: 80px 0 64px !important; }
    .hbm-s5    { padding: 80px 0 0 !important; }
    .hbm-s6    { padding: 80px 0 !important; }
    .hbm-s7    { padding: 88px 0 96px !important; }

    /* Plateforme : la colonne fixe de 380px passe en pleine largeur */
    .hbm-platgrid { grid-template-columns: 1fr !important; gap: 44px !important; }

    /* Parcours : le trait pointillé ne relie plus 3 colonnes -> masqué */
    .hbm-stepline { display: none !important; }

    /* Recherche : on annule la perspective 3D (cartes empilées) */
    .hbm-persp { perspective: none !important; padding: 0 !important; }
    .hbm-tilt  { transform: none !important; margin-left: 0 !important;
                 margin-right: 0 !important; max-width: 100% !important;
                 flex: 1 1 100% !important; }

    /* Manifeste : cartes flottantes ramenées dans le cadre */
    .hbm-manicard { left: 0 !important; }
    .hbm-manipill { right: 0 !important; }
  }

  /* ---------- <= 600px : mobile ---------- */
  @media (max-width: 600px) {
    .hbm-s1    { padding: 96px 0 48px !important; }
    .hbm-s2    { padding: 18px 0 !important; }
    .hbm-s389  { padding: 64px 0 56px !important; }
    .hbm-s4    { padding: 56px 0 48px !important; }
    .hbm-s5    { padding: 56px 0 0 !important; }
    .hbm-s6    { padding: 56px 0 !important; }
    .hbm-s7    { padding: 64px 0 72px !important; }
    .hbm-s10   { padding: 0 0 56px !important; }

    /* Gouttière latérale 32px -> 20px sur tous les conteneurs 1280px */
    .hb-accueil-v2 .hbm-s1 > div[style*="max-width:1280px"],
    .hb-accueil-v2 section > div[style*="max-width:1280px"],
    .hb-accueil-v2 section > div > div[style*="max-width:1280px"] { padding-left: 20px !important; padding-right: 20px !important; }

    /* --- Constellation : hauteur suffisante pour que les 8 pastilles
       tiennent sans chevaucher le titre --- */
    .hbm-constel  { min-height: 500px !important; height: 500px !important; margin-top: 20px !important; }
    .hbm-chip     { padding: 6px 12px 6px 6px !important; gap: 7px !important; }
    .hbm-chip > span:first-child { width: 26px !important; height: 26px !important; flex: 0 0 26px !important; }
    .hbm-chip > span:last-child  { font-size: 12px !important; }
    .hbm-badge    { min-width: 0 !important; padding: 10px 16px 10px 10px !important; gap: 10px !important; }
    .hbm-badge > span:nth-child(2) { width: 30px !important; height: 30px !important; flex: 0 0 30px !important; font-size: 12.5px !important; }
    .hbm-herocopy { margin-top: 40px !important; }

    /* --- Bandeau sources : label au-dessus du carrousel --- */
    .hbm-trust { flex-direction: column !important; align-items: center !important; gap: 12px !important; }
    .hbm-trust > span:first-child { white-space: normal !important; text-align: center !important; }
    .hbm-trust > div { width: 100% !important; }

    /* --- Boutons : pleine largeur, texte centré --- */
    .hbm-btn { padding: 14px 20px !important; font-size: 15px !important;
               width: 100% !important; justify-content: center !important; }
    .hbm-btn + .hbm-btn { margin-top: 0 !important; }

    /* --- Cartes 3D internes (aperçu "Annonces notées") : à plat --- */
    .hbm-tilt2 { transform: none !important; }

    /* --- CTA final --- */
    .hbm-ctabox { padding: 40px 24px !important; border-radius: 20px !important; gap: 28px !important; }

    /* --- Manifeste : cartes flottantes recalées et réduites --- */
    .hbm-manicard { width: 200px !important; bottom: 16px !important; left: 8px !important; padding: 14px !important; }
    .hbm-manipill { top: 12px !important; right: 8px !important; padding: 8px 12px 8px 8px !important; }
  }

  /* ---------- <= 400px : petits mobiles ---------- */
  @media (max-width: 400px) {
    .hbm-constel { min-height: 470px !important; height: 470px !important; }
    .hbm-chip > span:last-child { font-size: 11.5px !important; }
    .hbm-manicard { width: 180px !important; }
  }

  /* Aucune barre de défilement horizontale, quelle que soit la largeur */
  /* body { overflow-x:hidden } est deja pose par style.css du theme */

  /* ---------- Correctifs mobile (passe 2) ---------- */
  @media (max-width: 900px) {
    /* Diagramme HomeBeCORE : cartes positionnées en % sur une base 640px.
       On met la maquette à l'échelle au lieu de laisser les cartes se
       chevaucher. */
    .hbm-diagwrap { max-width: 100% !important; overflow: hidden !important; }
    .hbm-diagram  { width: 640px !important; height: 560px !important;
                    aspect-ratio: auto !important;
                    margin-left: calc(50% - 320px) !important;
                    transform-origin: top center; }
  }
  @media (max-width: 600px) { .hbm-diagram { transform: scale(.80); } .hbm-diagwrap { height: 448px; } }
  @media (max-width: 550px) { .hbm-diagram { transform: scale(.70); } .hbm-diagwrap { height: 392px; } }
  @media (max-width: 490px) { .hbm-diagram { transform: scale(.62); } .hbm-diagwrap { height: 347px; } }
  @media (max-width: 440px) { .hbm-diagram { transform: scale(.55); } .hbm-diagwrap { height: 308px; } }
  @media (max-width: 400px) { .hbm-diagram { transform: scale(.50); } .hbm-diagwrap { height: 280px; } }
  @media (max-width: 360px) { .hbm-diagram { transform: scale(.45); } .hbm-diagwrap { height: 252px; } }

  @media (max-width: 600px) {
    /* Sur-titre du hero : tient sur 2 lignes propres */
    .hbm-eyebrow  { font-size: 11px !important; letter-spacing: .09em !important; gap: 8px !important; }
    /* Badge central : titre sur une seule ligne (sinon il monte sur la
       pastille "Simulateur") */
    .hbm-badgetitle { white-space: nowrap !important; }
    /* Rangée "Sans inscription / Données vérifiées / RGPD" */
    .hbm-badges   { gap: 12px !important; font-size: 12px !important; }
    /* Voile radial derrière "Huit outils. Une cohérence." — élargi pour que
       le titre reste lisible par-dessus le carrousel */
    .hbm-scrim    { background: radial-gradient(95% 60% at 50% 50%, rgba(27,42,78,.97) 38%, rgba(27,42,78,.72) 70%, transparent 92%) !important; }
    /* Carte "27,4 %" : dégagée de la légende de l'image */
    .hbm-manicard { bottom: 46px !important; }
  }

  /* Le cadre du diagramme (640x560) contient ~24% de vide en haut et en bas :
     on recadre pour ne pas gaspiller de hauteur sur mobile. */
  @media (max-width: 600px) { .hbm-diagram { margin-top: -94px !important; } .hbm-diagwrap { height: 259px; } }
  @media (max-width: 550px) { .hbm-diagram { margin-top: -80px !important; } .hbm-diagwrap { height: 230px; } }
  @media (max-width: 490px) { .hbm-diagram { margin-top: -70px !important; } .hbm-diagwrap { height: 206px; } }
  @media (max-width: 440px) { .hbm-diagram { margin-top: -61px !important; } .hbm-diagwrap { height: 186px; } }
  @media (max-width: 400px) { .hbm-diagram { margin-top: -54px !important; } .hbm-diagwrap { height: 171px; } }
  @media (max-width: 360px) { .hbm-diagram { margin-top: -47px !important; } .hbm-diagwrap { height: 156px; } }

  /* ============================================================
     Section Recherche — les 3 maquettes 3D deviennent un carrousel
     swipable (scroll-snap) sur mobile/tablette au lieu de s'empiler.
     ============================================================ */
  @media (max-width: 900px) {
    .hbm-persp {
      perspective: none !important;
      flex-wrap: nowrap !important;
      justify-content: flex-start !important;
      align-items: flex-start !important;
      gap: 14px !important;
      padding: 0 20px 6px !important;
      margin-top: 40px !important;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      scroll-padding: 0 20px;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      overscroll-behavior-x: contain;
    }
    .hbm-persp::-webkit-scrollbar { display: none; }
    /* hauteur pilotée en JS sur la diapo active */
    .hbm-persp { transition: height .35s cubic-bezier(.2,.7,.2,1); }
    /* Ordre mobile : 1. Recherche  2. Score  3. Liste d'annonces (la plus
       haute, reléguée en fin de carrousel) */
    .hbm-persp > div:nth-child(1) { order: 1; }
    .hbm-persp > div:nth-child(3) { order: 2; }
    .hbm-persp > div:nth-child(2) { order: 3; }
    .hbm-persp > div {
      flex: 0 0 86% !important;
      max-width: 86% !important;
      min-width: 0 !important;
      margin: 0 !important;
      transform: none !important;
      scroll-snap-align: center;
      border-radius: 18px !important;
    }
    /* le panneau central ne "saigne" plus hors de la section */
    .hbm-s5 { padding-bottom: 12px !important; }

    /* Indicateurs (générés en JS) */
    .hbm-dots {
      display: flex; justify-content: center; align-items: center;
      gap: 8px; margin: 20px 0 0; padding: 0 0 28px;
    }
    .hbm-dots button {
      width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px;
      background: rgba(255,255,255,.28); cursor: pointer;
      transition: width .25s ease, background .25s ease;
    }
    .hbm-dots button[aria-current="true"] { width: 22px; background: #D9A441; }
    .hbm-hint {
      display: block; text-align: center; margin-top: 14px;
      font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
      color: rgba(255,255,255,.42);
    }
  }
  @media (min-width: 901px) { .hbm-dots, .hbm-hint { display: none !important; } }


/* Bloc avis — trois cartes en bureau, deux en tablette, une en telephone.
   La pagination lit ce nombre de colonnes, il n'y a rien a synchroniser. */
@media (max-width: 1000px) {
  .hbm-avis-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .hbm-avis-grid { grid-template-columns: 1fr !important; }
}