/* ==========================================================
   Casapack 2025 - Bolt overrides (FINAL)
   ========================================================== */

/* --- Palette demandée --- */
:root{
  /* Recalage palette 2025 */
  --primary-500:#2F7BFF;
  --primary-600:#2F7BFF;
  --primary-700:#1E5FDB;
  /* dégradé hero Bolt */
  --bolt-hero-a:#6D28D9;
  --bolt-hero-b:#2F7BFF;
}

/* Remap des fonds du hero (couleurs d'origine) */
.hero-background{
  background: linear-gradient(135deg, var(--bolt-hero-a) 0%, var(--bolt-hero-b) 100%) !important;
}
.hero-gradient{
  background: linear-gradient(135deg, rgba(109,40,217,.88) 0%, rgba(47,123,255,.88) 100%) !important;
}

/* Boutons / accents */
.btn-primary{
  background: linear-gradient(135deg, var(--primary-600), var(--primary-700)) !important;
  border: none !important;
}
.feature-icon{
  background: linear-gradient(135deg, var(--primary-500), var(--primary-600)) !important;
  color:#fff;
}

/* ==========================================================
   HERO — Responsive + fond pleine largeur (100vw)
   ========================================================== */
.hero{
  position: relative;
  padding: clamp(2.25rem, 5vw, 5rem) 0 2.5rem;
  overflow: hidden;     /* coupe tout débordement */
}

/* Grille : 1 col en mobile, 2 cols dès lg */
.hero-content{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: center;
  position: relative;
  z-index: 1;           /* au-dessus du fond */
}
@media (min-width: 992px){
  .hero-content{ grid-template-columns: 1.1fr 0.9fr; }
}

/* Typo fluide */
.hero-title{
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  line-height: 1.2;
  margin-bottom: .5rem;
}
.hero-description{
  font-size: clamp(1rem, 2vw, 1.125rem);
  opacity: .9;
}

/* Actions : wrap + full width en très petit écran */
.hero-actions{ display:flex; gap:.6rem; flex-wrap:wrap; }
.hero-actions .btn{ min-width:180px; }
@media (max-width:575.98px){
  .hero-actions .btn{ width:100%; }
}

/* Visuel (mockup) */
.dashboard-preview{
  width:100%;
  max-width:560px;
  margin-inline:auto;
  box-shadow:0 12px 40px rgba(0,0,0,.18);
  border-radius:16px;
  overflow:hidden;
  transform:none !important; /* empêche les décalages horizontaux */
}
@media (max-width:575.98px){
  .dashboard-sidebar{ display:none; } /* évite l’écrasement en XS */
}

/* >>> Correctif clé : le FOND couvre TOUTE la largeur de l'écran <<< */
.hero .hero-background,
.hero .hero-gradient{
  position:absolute;
  top:0; left:50%;
  width:100vw;          /* plein écran, pas seulement le container */
  height:100%;
  transform:translateX(-50%);
  max-width:none;
  pointer-events:none;
  z-index:0;            /* derrière le contenu */
}

/* Ordre mobile : visuel au-dessus, texte centré */
@media (max-width:991.98px){
  .hero-text{ text-align:center; }
  .hero-actions{ justify-content:center; }
  .hero-visual{ order:-1; margin-bottom:1rem; }
}

/* Sécurité: rien ne doit dépasser du viewport */
.hero img, .hero svg{ max-width:100%; height:auto; display:block; }

/* === HERO MOBILE HOTFIX — empêche TOUT débordement horizontal === */

/* 1) Ne jamais scroller en X */
html, body { overflow-x: hidden; }

/* 2) Le hero et tout son contenu respectent la largeur écran */
.hero, .hero * { box-sizing: border-box; }
.hero { width:100%; }
.hero > .container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  margin: 0 auto !important;
}

/* 3) Grille du hero : 1 colonne en mobile, 2 en ≥992px (déjà OK) */
.hero-content { display:grid; grid-template-columns:1fr; gap:clamp(1rem,3vw,2.5rem); align-items:center; }
@media (min-width: 992px){ .hero-content{ grid-template-columns:1.1fr 0.9fr; } }

/* 4) Mockup : aucune largeur fixe, aucune transform, pas de min-width automatique */
.dashboard-preview,
.dashboard-content { width:100% !important; max-width:100% !important; transform:none !important; }
.dashboard-sidebar,
.dashboard-main { min-width:0 !important; }   /* évite l’overflow en flex */

@media (max-width: 575.98px){
  .dashboard-sidebar{ display:none !important; } /* respire en XS */
}

/* 5) Fonds couvrants sans dépasser */
.hero .hero-background,
.hero .hero-gradient{
  position:absolute; inset:0; width:100%; height:100%;
  max-width:none; pointer-events:none; z-index:0;
}

/* 6) Ordre et centrage en mobile */
@media (max-width: 991.98px){
  .hero-text{ text-align:center; }
  .hero-actions{ display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; }
  .hero-actions .btn{ min-width:180px; width:100%; }
  .hero-visual{ order:-1; margin-bottom:1rem; }
}

/* 7) Sécurité générale */
.hero img, .hero svg { max-width:100%; height:auto; display:block; }

/* === HERO MOBILE FIX — flatten background + no overflow (FINAL) === */

/* Palette (déjà chez toi) */
:root{
  --primary-500:#2F7BFF;
  --primary-600:#2F7BFF;
  --primary-700:#1E5FDB;
  --bolt-hero-a:#6D28D9;
  --bolt-hero-b:#2F7BFF;
}

/* 0) Empêche tout débordement horizontal */
html, body{ overflow-x:hidden; }

/* 1) Fond du hero directement sur .hero (plein écran) */
.hero{
  position: relative;
  padding: clamp(2.25rem, 5vw, 5rem) 0 2.5rem;
  background: linear-gradient(135deg, var(--bolt-hero-a) 0%, var(--bolt-hero-b) 100%) !important;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(109,40,217,.88) 0%, rgba(47,123,255,.88) 100%);
  pointer-events:none;
}
/* On neutralise les 2 calques internes qui posaient problème en mobile */
.hero .hero-background,
.hero .hero-gradient{ display:none !important; }

/* 2) Grille responsive : 1 colonne en mobile, 2 colonnes dès lg */
.hero-content{
  position: relative; z-index:1;
  display:grid; grid-template-columns:1fr;
  gap: clamp(1rem, 3vw, 2.5rem); align-items:center;
}
@media (min-width: 992px){
  .hero-content{ grid-template-columns:1.1fr 0.9fr; }
}

/* 3) Typo fluide */
.hero-title{ font-size:clamp(1.9rem,4.2vw,3rem); line-height:1.2; margin-bottom:.5rem; }
.hero-description{ font-size:clamp(1rem,2vw,1.125rem); opacity:.9; }

/* 4) Boutons : wrap + full width en très petit écran */
.hero-actions{ display:flex; gap:.6rem; flex-wrap:wrap; }
.hero-actions .btn{ min-width:180px; }
@media (max-width:575.98px){ .hero-actions .btn{ width:100%; } }

/* 5) Visuel : aucune transform et largeur bornée */
.dashboard-preview{
  width:100% !important; max-width:560px; margin-inline:auto;
  transform:none !important; box-shadow:0 12px 40px rgba(0,0,0,.18);
  border-radius:16px; overflow:hidden;
}
/* Évite les débordements côté contenu du mockup */
.dashboard-content{ flex-wrap:nowrap; }
.dashboard-sidebar, .dashboard-main{ min-width:0 !important; }
@media (max-width:575.98px){
  .dashboard-sidebar{ display:none !important; }
  .dashboard-content{ height:auto; }
}

/* 6) Ordre en mobile : visuel au-dessus, texte centré */
@media (max-width:991.98px){
  .hero-text{ text-align:center; }
  .hero-actions{ justify-content:center; }
  .hero-visual{ order:-1; margin-bottom:1rem; }
}

/* 7) Sécurité générale */
.hero img, .hero svg{ max-width:100%; height:auto; display:block; }

/* ==== HERO — Desktop layout polish (≥992px) ==== */
@media (min-width: 992px){

  /* largeur et centrage du bloc */
  .hero > .container{
    max-width: 1240px !important;   /* 1200–1280 selon ton goût */
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* grille : texte 56% / visuel 44% pour respiration */
  .hero-content{
    grid-template-columns: 0.56fr 0.44fr !important;
    align-items: center !important;
    min-height: 72vh;                /* hauteur confortable */
  }

  /* colonne texte : largeur lisible + décalage */
  .hero-text{
    max-width: 680px;                /* bloc de lecture */
    padding-right: 6vw;              /* espace avec le visuel */
  }
  .hero-title{ letter-spacing: -.2px; }
  .hero-description{ max-width: 600px; }

  /* colonne visuel : cadrage à droite, taille maîtrisée */
  .hero-visual{
    display: grid;
    justify-items: end;              /* colle le mockup à droite */
  }
  .dashboard-preview{
    max-width: 520px !important;     /* 500–560px selon rendu */
    margin: 0 !important;            /* plus d’auto-centre en desktop */
    transform: translateX(12px);     /* petit décalage pour l’équilibre */
  }

  /* métriques sous les boutons : rangée compacte si tu en as */
  .hero-metrics{
    display: grid; grid-auto-flow: column; gap: 36px;
    margin-top: 20px;
  }
}

/* ==== XL écrans (≥1400px) : un peu plus large si besoin ==== */
@media (min-width: 1400px){
  .hero > .container{ max-width: 1320px !important; }
  .dashboard-preview{ max-width: 560px !important; transform: translateX(18px); }
}

/* ----- Boutons Hero (pilules, clean) ----- */
.hero-actions{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.25rem; }
.hero-actions .btn{ border-radius:999px; padding:.8rem 1.4rem; font-weight:600; box-shadow:0 6px 18px rgba(0,0,0,.12); transition:transform .2s, box-shadow .2s, filter .2s; }

/* 1) Essayer gratuitement (rempli blanc) */
.btn-hero-fill{
  background:#fff; color:#1E5FDB; border:none;
}
.btn-hero-fill:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(47,123,255,.28); filter:brightness(.98); }

/* 2) Découvrir (ghost translucide) */
.btn-hero-ghost{
  background:rgba(255,255,255,.08); color:#fff;
  border:2px solid rgba(255,255,255,.55);
}
.btn-hero-ghost:hover{ background:rgba(255,255,255,.14); border-color:#fff; transform:translateY(-2px); }

/* Bouton Connexion (si présent sous les deux autres) – harmonisé */
.btn-hero-primary{
  background:linear-gradient(135deg,#2F7BFF,#1E5FDB); border:none; color:#fff;
}
.btn-hero-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(47,123,255,.35); }

/* ----- Image du hero ----- */
.hero-img{
  width:100%; max-width:560px; display:block;
  border-radius:18px;
  box-shadow:0 14px 44px rgba(0,0,0,.22);
}

/* ----- Ordre mobile : image APRES le texte ----- */
@media (max-width: 991.98px){
  .hero-visual{ order:2; }          /* ← image après le texte, comme tu veux */
  .hero-text{ order:1; text-align:center; }
  .hero-actions{ justify-content:center; }
  .hero-img{ max-width:520px; margin-inline:auto; }
}

/* ----- Desktop (polish) ----- */
@media (min-width: 992px){
  .hero > .container{ max-width:1240px !important; padding-inline:24px !important; }
  .hero-content{ grid-template-columns:.56fr .44fr !important; align-items:center !important; min-height:72vh; }
  .hero-text{ max-width:680px; padding-right:6vw; }
  .hero-img{ max-width:520px; margin:0; transform:translateX(12px); }
}
@media (min-width:1400px){
  .hero > .container{ max-width:1320px !important; }
  .hero-img{ max-width:560px; transform:translateX(18px); }
}

/* ===== Connexion card look ===== */
.card-connexion{
  background:rgba(255,255,255,.88);
  border:1px solid rgba(15,27,45,.06);
  border-radius:18px;
  box-shadow:0 10px 28px rgba(15,27,45,.10);
}

/* ===== Scrollbar / layout stable ===== */
:root{ scrollbar-gutter: stable both-edges; } /* évite le "saut" quand la barre apparait */
html{ overflow-y:auto; }                      /* barre verticale standard */
body{ overflow-x:hidden; }                    /* jamais de scroll horizontal global */

/* Sécurité : certaines sections avaient pu forcer 100vh → préfère min-height auto */
section{ min-height: auto; }

/* Empêche qu’un élément interne crée un scroll vertical “fantôme” */
.hero, .section-connexion{ contain: paint; }