/* ===== MOBILE & RESPONSIVE STYLES ===== */

/* -------------------------------- Large screens tweaks -------------------------------- */
@media (min-width: 1400px){
  .hero__content{ max-width: 1200px; }
  .hero--center .hero__content{ width: min(1200px, 100%); }
}
@media (min-width: 1280px){
  section.hero .hero__content{ transform: translateX(14px); }
}
@media (min-width: 1536px){
  section.hero .hero__content{ transform: translateX(16px); }
}

/* -------------------------------- Tablet (≤1000px) -------------------------------- */
@media (max-width: 1000px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:repeat(2,1fr)}
  .testimonials{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr;}
  .dual-offers .split{ grid-template-columns:1fr }
  .dual-offers .offer{ min-height: initial }
  .kpis{ grid-template-columns:repeat(2,1fr) }
  .grid--features{ grid-template-columns:repeat(2,1fr) }
  .cards--projects{ grid-template-columns:repeat(2,1fr) }
  .grid--blog{ grid-template-columns:repeat(2,1fr) }
  .steps{ grid-template-columns:repeat(2,1fr) }
}

/* ========================================================================== */
/*                                   MOBILE                                   */
/*                              (≤ 900px — NAV)                               */
/* ========================================================================== */
@media (max-width: 900px){

  /* Bouton hamburger visible */
  .nav-toggle{ display:block; }

  /* Panneau global */
  #site-nav{ display:none; }
  #site-nav.open{
    display:block;
    position:fixed;
    top: var(--header-h);
    left: 0; right: 0;
    z-index: 1002;

    /* Backdrop premium */
    background: linear-gradient(180deg, rgba(19,23,34,.96), rgba(19,23,34,.94));
    border-top: 1px solid var(--border);
    box-shadow: 0 24px 60px rgba(0,0,0,.45);
    backdrop-filter: saturate(140%) blur(6px);
  }

  /* Carte intérieure */
  #site-nav .nav__list{
    flex-direction: column;
    gap: 6px;
    margin: 12px;
    padding: 10px;

    background: #131722;                 /* fond principal du panneau */
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
  }

  /* Lignes (touch target 44px) */
  #site-nav .nav__list a,
  #site-nav .dropdown-toggle{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 8px;

    min-height: 44px;
    padding: 12px 14px;
    border-radius: 10px;

    font-weight: 600;
    line-height: 1.2;
    color: var(--text);
    background: transparent;
    transition: background .15s ease, border-left .15s ease, color .15s ease;
  }

  /* Hover/active — accent de marque */
  #site-nav .nav__list a:hover,
  #site-nav .dropdown-toggle:hover{
    background: rgba(200,29,37,.12);
    border-left: 3px solid var(--brand);
  }

  /* Bande de tolérance (desktop) désactivée en mobile */
  .nav-item.dropdown::before{ display:none; }

  /* Chevrons niveau 1 */
  .dropdown-toggle::after{
    content:"▾";
    margin-left:8px;
    font-size:.9rem;
    opacity:.7;
    transition: transform .14s ease, opacity .14s ease;
  }
  .nav-item.dropdown.open > .dropdown-toggle::after{
    content:"▴";
    transform: translateY(-1px);
  }

  /* NIVEAU 1 — sous-menu (panneau) */
  .nav-item.dropdown > .dropdown-menu{
    position: static;
    display: none;

    margin: 6px 0 8px 0;
    padding: 6px;

    background: #1a1f2c;                 /* contraste doux */
    border: 1px solid var(--border);
    border-radius: 12px;

    /* animation */
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .14s ease, transform .14s ease;
  }
  .nav-item.dropdown.open > .dropdown-menu{
    display: block;
    opacity: 1;
    transform: translateY(0);
  }

  /* NIVEAU 2 — sous-menu */
  .dropdown-submenu{ position: static; }

  .dropdown-submenu > .dropdown-toggle{
    font-weight: 600;
    padding-left: 12px;                  /* 1er niveau d’indentation */
    border-radius: 8px;
  }
  .dropdown-submenu > .dropdown-toggle::after{
    content:"▸";
    opacity:.7;
  }
  .dropdown-submenu.open > .dropdown-toggle::after{
    content:"▾";
  }

  .dropdown-submenu > .dropdown-menu{
    position: static !important;
    display: none;

    margin: 6px 0 4px 0;
    padding: 4px 0 4px 12px;             /* indentation enfants */

    background: transparent;             /* on garde la “carte” du niveau 1 */
    border: 0;
    box-shadow: none;

    opacity: 0;
    transform: translateY(-2px);
    transition: opacity .14s ease, transform .14s ease;
  }
  .dropdown-submenu.open > .dropdown-menu{
    display: block;
    opacity: 1;
    transform: translateY(0);
  }

  /* Liens internes de sous-menu (niveaux 1 & 2) */
  .dropdown-menu li a{
    padding: 10px 12px;
    border-radius: 8px;
    font-weight: 500;
  }
  .dropdown-menu li a:hover{
    background: rgba(200,29,37,.15);
    border-left: 3px solid var(--brand);
  }

  /* Lien “Contact” mis en avant */
  #site-nav .nav__list a[href*="contact"]{
    background: var(--brand);
    color: #fff;
    text-align: center;
    font-weight: 700;
    margin-top: 8px;
    box-shadow: var(--shadow);
  }
  #site-nav .nav__list a[href*="contact"]:hover{
    background: var(--brand-600);
  }

  /* Footer mobile */
  .footer__grid{ grid-template-columns:1fr; }
  .footer__bottom{ flex-direction:column; gap:10px; }

  /* Header compact */
  :root{ --header-h: 64px; }
  .header__inner{ padding: 8px 0; }
  .brand__logo{ width: 30px; height: 30px; }
}

/* -------------------------------- Small mobile fixes -------------------------------- */
@media (max-width: 768px){
  section.hero .hero__content{ transform: none; } /* pas d’offset sur mobile */
}

/* ========================================================================== */
/*                                 HERO2 MOBILE                               */
/*         Glow sur viewport pour éviter les bords “coupés” du radial         */
/* ========================================================================== */
@media (max-width:767.98px){
  .hero2{ position:relative; background:none !important; }
  .hero2::before{
    content:"";
    position:absolute; inset:0 auto auto 50%;
    transform:translateX(-50%);
    width:100vw; height:100%;
    background: radial-gradient(90vw 45vw at 50% -10%, rgba(200,29,37,.20), transparent 60%);
    pointer-events:none; z-index:0;
  }
  .hero2 > *{ position:relative; z-index:1; }
}

/* ========================================================================== */
/*                       Accessibility / Motion preferences                    */
/* ========================================================================== */
@media (prefers-reduced-motion: reduce){
  #site-nav .dropdown-menu,
  .dropdown-submenu > .dropdown-menu{
    transition: none !important;
  }
}

/* ===== Patch affichage mobile (ouvert/texte visible) ===== */
@media (max-width: 900px){
  /* Quand le toggle est ouvert, assure contraste et lisibilité */
  .nav-item.dropdown.open > .dropdown-toggle,
  .dropdown-submenu.open > .dropdown-toggle{
    background: var(--brand);
    color: #fff;                 /* <- texte lisible */
    border-left: 0;              /* pas de bord gauche rouge par-dessus le fond rouge */
  }

	
	
	
	
	
	
	
	
	
	
	
  /* Afficher le contenu des menus ouverts (sécurité) */
  .nav-item.dropdown.open > .dropdown-menu,
  .dropdown-submenu.open > .dropdown-menu{
    display: block !important;
    opacity: 1;
    transform: none;
  }

  /* Couleur des liens internes de sous-menu */
  #site-nav .dropdown-menu a{
    color: var(--text);
  }
  #site-nav .dropdown-menu a:hover{
    color: var(--text);
    background: rgba(200,29,37,.15);
  }

  /* Chevron du 2e niveau quand ouvert */
  .dropdown-submenu.open > .dropdown-toggle::after{ content:"▾"; }
}

/* ===== Collapse propre des sous-menus (mobile) ===== */
@media (max-width: 900px){

  /* ÉTAT FERME — aucun espace résiduel */
  .nav-item.dropdown > .dropdown-menu,
  .dropdown-submenu > .dropdown-menu{
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    transform: none !important;
  }

  /* Racine ouverte (ex: "Services") — carte visible */
  .nav-item.dropdown.open > .dropdown-menu{
    display: block !important;
    margin: 6px 0 8px !important;
    padding: 6px !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    background: #1a1f2c !important;
    height: auto !important;
    overflow: visible !important;
    opacity: 1 !important;
  }

  /* Sous-menu (niveau 2) ouvert — indentation légère */
  .dropdown-submenu.open > .dropdown-menu{
    display: block !important;
    margin: 6px 0 4px !important;
    padding: 4px 0 4px 12px !important;
    border: 0 !important;
    background: transparent !important;
    height: auto !important;
    overflow: visible !important;
    opacity: 1 !important;
  }
}