/* ===== Thème global – Le Site de Noah ===== */

/* ===== Stabilité du scroll sans flash ===== */
html {
  overflow-x: hidden;
  overflow-y: auto;           /* pas de scroll forcé */
  scrollbar-gutter: stable;   /* réserve la place → pas de décalage */
  min-height: 100%;
}

body {
  overflow-x: hidden;         /* évite la barre horizontale */
  background-color: #f8fafc;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}


/* Force la stabilité dès le début */
* {
  box-sizing: border-box;
}

:root{
  /* Couleurs/layout généraux */
  --noah-bg: #f8fafc;
  --noah-navbar: #131E28;
  --noah-mobile-menu: #232c35;

  /* Palette réutilisable */
  --primary-color:  #3788d8;
  --primary-dark:   #2c6cb8;
  --primary-light:  #e3f2ff;
  --secondary-color:#6c757d;
  --success-color:  #28a745;
  --success-dark:   #1e7e34;
  --success-light:  #d4edda;
  --warning-color:  #ffc107;
  --warning-dark:   #e0a800;
  --warning-light:  #fff3cd;
  --danger-color:   #dc3545;
  --light-bg:       #f8f9fa;
  --white:          #ffffff;
  --dark-text:      #212529;
  --muted-text:     #6c757d;
  --border-color:   #dee2e6;
  --border-radius:  12px;
  --shadow:         0 2px 10px rgba(0,0,0,0.1);
  --shadow-hover:   0 4px 20px rgba(0,0,0,0.15);
}

/* Masquer éléments AOS avant init pour éviter flash */
[data-aos]:not(.aos-animate) {
  opacity: 0;
  transform: translateY(20px);
  transition: none !important;
}

/* Stabilise la hauteur des sections critiques */
.home-page {
  min-height: 100vh;
  contain: layout;
}

.home-page .apps-section,
.home-page .roadmap-section,
.home-page .about-section {
  contain: layout;
  min-height: 400px;
  will-change: auto;
}

/* ===== NAVBAR – base ===== */
.custom-navbar { 
  background-color: var(--noah-navbar); 
  min-height: 64px; 
  position: relative;
  z-index: 1030;
}
.custom-navbar .container { position: relative; }
.brand-link span { color: #fff; }

/* Icône Actualités (desktop) */
.nav-megaphone { display: inline-flex; align-items: center; margin-left: -1.25rem; margin-right: .25rem; }
.icon-wrap { position: relative; display: inline-flex; }
.icon-wrap .badge { position: absolute; top: -6px; right: -10px; }

/* Boutons communs */
.nav-btn { transition: transform .2s ease, box-shadow .2s ease; white-space: nowrap; border-radius: 8px; }
.nav-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.15); }

/* Offcanvas teinte */
.custom-offcanvas { --bs-offcanvas-bg: var(--noah-navbar); }

/* ===== Desktop (≥ xl) : offcanvas inline + nav horizontale ===== */
@media (min-width:1200px){
  .navbar .offcanvas{ position:static; transform:none; visibility:visible; background:transparent; border:0; box-shadow:none; }
  .navbar .offcanvas-header{ display:none; }
  .navbar .offcanvas-body{ display:flex!important; align-items:center; justify-content:space-between; gap:1rem; padding:0; }

  .navbar .offcanvas-body .navbar-nav{
    flex-direction:row!important; align-items:center; gap:.5rem;
  }
  .navbar .offcanvas-body .navbar-nav .nav-item .btn{
    width:auto!important; text-align:center; padding:.4rem .7rem; border-width:1px;
  }
}

/* ===== Mobile / tablette (< xl) : style "carte" + scroll fiable ===== */
:root{ --offcanvas-header-h:56px; }

@media (max-width:1199.98px){
  /* Hauteur & scroll interne (iOS/Android OK) */
  .custom-offcanvas{ 
    height:100dvh; 
    max-height:100dvh; 
    overscroll-behavior:contain;
    position: fixed;
  }
  .custom-offcanvas .offcanvas-body{
    overflow-y:auto!important; 
    overflow-x: hidden;
    max-height:calc(100dvh - var(--offcanvas-header-h));
    -webkit-overflow-scrolling:touch; 
    padding:1rem; 
    padding-bottom:max(1rem, env(safe-area-inset-bottom));
  }

  /* Groupe apps en "carte" */
  .offcanvas .navbar-nav.me-xl-auto{
    padding:1rem; background:rgba(255,255,255,.05);
    border-radius:1rem; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
    gap:.35rem;
  }

  /* Liens simples (bord transparent) */
  .offcanvas .btn-outline-light.nav-btn{
    border:0!important; background:transparent!important;
    width:100%; text-align:left; padding:.6rem .75rem; border-radius:.75rem;
    display:flex; align-items:center; gap:.5rem;
  }
  .offcanvas .btn-outline-light.nav-btn:hover{ background:rgba(255,255,255,.06)!important; }
  .offcanvas .btn-outline-light.nav-btn .badge{ margin-left:.5rem; }

  /* CTA en bas, gros boutons */
  .offcanvas .navbar-nav.ms-xl-auto{ margin-top:1rem; gap:.75rem; }
  .offcanvas .navbar-nav.ms-xl-auto .btn{ width:100%; padding:.7rem .9rem; border-radius:.8rem; }
}

/* Touch : adoucir le hover */
@media (hover:none) and (pointer:coarse){
  .nav-btn:hover{ transform:none; box-shadow:none; }
}

/* Pousser encore l'icône "Actualités" plus à gauche en desktop */
@media (min-width: 1200px) {
  /* calc enlève le padding interne du .container (0.75rem) + un extra de 0.5rem */
  .nav-megaphone,
  #notif-btn {
    margin-left: calc(-1 * (var(--bs-gutter-x, 1.5rem) * .5) - .5rem);
  }
}