/* ============================================================
   LUMINEYES — Responsive layer (phone / tablet). Loaded LAST.
   ============================================================ */

/* Global safety: never allow horizontal scroll on small screens */
html, body { max-width: 100%; overflow-x: clip; }
*{ min-width: 0; }                 /* stop flex/grid children from forcing overflow */
img, video, canvas, svg { max-width: 100%; }
.hero-scroll-video { max-width: none; }   /* must still cover full bleed */

/* ===================== Tablet (≤ 1024px) ===================== */
@media (max-width: 1024px){
  .hero-step-title { font-size: clamp(2rem, 6vw, 3.4rem); }
  .m2c-grid { gap: 1.6rem; }
  .lab-content, .engine-copy { padding-left: 1.4rem; padding-right: 1.4rem; }
}

/* ===================== Phone (≤ 640px) ===================== */
@media (max-width: 640px){
  /* Header + currency switch */
  .site-header { padding: .65rem .9rem; }
  .top-market-switch { top: .55rem !important; }
  .top-market-switch button { min-width: 3.9rem; padding: .5rem .5rem; font-size: .4rem; }

  /* Hero video intro: hauteur calee sur la duree reelle du scrub mobile.
     300vh laissait un grand vide noir APRES la fin de la video (le scroll
     continuait dans le vide). 220vh resserre pour que la video finisse
     pile quand la section se termine. */
  .hero-scroll-section { height: 220vh; }

  /* Lisibilite mobile : voile sombre derriere les titres pour que la frame logo
     de la video (1er instant) ne se superpose pas visuellement au titre.
     Place sous les titres (.hero-steps z-index:2), au-dessus de la video. */
  .hero-steps::before{
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(ellipse 90% 55% at 50% 45%,
                rgba(8,8,7,.72) 0%, rgba(8,8,7,.45) 45%, rgba(8,8,7,0) 80%);
    pointer-events: none;
  }
  .hero-step { padding: 0 1.1rem; }
  .hero-step-title { font-size: clamp(1.7rem, 8.5vw, 2.6rem); }
  .hero-step-num { font-size: .62rem; margin-bottom: .8rem; }
  .hero-step.final .hero-step-tagline { font-size: .8rem; }
  .hero-scroll-hint { bottom: 1.4rem; font-size: .5rem; }

  /* Lumineyes Engine: keep the 3D scene contained */
  .engine-scene { min-height: 27rem; }
  .engine-stack { width: 17.5rem; height: 17.5rem; }

  /* AI Lab orbital: contained + readable panel */
  .lab-visual { min-height: 25rem; }
  .orbital-system { width: 17.5rem; }
  .node-panel { left: 1rem; right: 1rem; width: auto; }

  /* Du message au client: tighten the stacked layout */
  .m2c-intro h2 { font-size: clamp(2.2rem, 9vw, 3rem); }
  .m2c-quote-inner p { font-size: 1.15rem; }

  /* Immersive gallery captions */
  .parallax-frame figcaption { font-size: .42rem; }
}

/* ===================== Small phone (≤ 400px) ===================== */
@media (max-width: 400px){
  .top-market-switch button { min-width: 3.5rem; letter-spacing: .03em; }
  .hero-step-title { font-size: clamp(1.5rem, 9vw, 2.2rem); }
  .m2c-quote-inner p { font-size: 1rem; }
}

/* ============================================================
   PHASE 3 — Polish mobile : CTA propres, halos allégés
   ============================================================ */
@media (max-width: 640px){
  /* CTA pleine largeur, centrés, jamais débordants */
  .lab-content .button, .contact-form .button, .pack-card .button{
    width: 100%; justify-content: center; gap: .6rem;
  }
  /* halos plus légers sur petit écran (lisibilité + perf) */
  .service-card:hover, .pack-card.glass-tilt:hover{
    box-shadow: 0 1rem 2.4rem rgba(0,0,0,.42);
  }
}

/* ============================================================
   MOBILE OPTIMIZATION PASS — débordement, sections, chatbot,
   boutons flottants. 100% sous media query → desktop intact.
   ============================================================ */

/* 1. Anti-débordement horizontal renforcé */
@media (max-width: 640px){
  html, body { overflow-x: clip; max-width: 100%; }   /* clip = bloque le scroll horizontal SANS casser le position:sticky du hero */
  main, footer, section { max-width: 100%; }
  /* sections à décor 3D/large : on borne l'axe horizontal (sans casser le sticky vertical) */
  .lume-engine, .ai-lab, .immersive, .packs, .services, .intro, .method { overflow-x: clip; }
}

/* 2. Sections premium : moins de vide vertical, titres lisibles en 390/430px */
@media (max-width: 640px){
  .intro, .services, .packs, .ai-studio, .cases, .method { padding-block: 4.5rem; }
  .lume-engine .engine-copy { padding: 4rem 1rem 1.5rem; }
  .intro h2, .section-title h2, .method-head h2, .lab-content h2,
  .immersive-intro h2, .engine-copy h2, .m2c-intro h2, .contact h2 {
    font-size: clamp(2.3rem, 11vw, 3.3rem);
  }
  .section-title, .intro-layout, .method-head { margin-block: 2.5rem; gap: 1.6rem; }
}

/* 3. Chatbot Lume AI : vraie feuille mobile + input toujours au-dessus du clavier.
      --kb est posé par script.js (Visual Viewport API) = hauteur du clavier. */
@media (max-width: 640px){
  .lume-chat{
    left: .6rem; right: .6rem; top: auto;
    bottom: calc(.6rem + env(safe-area-inset-bottom, 0px) + var(--kb, 0px));
    width: auto;
    height: min(72dvh, 30rem);
    max-height: calc(100dvh - 1.2rem - var(--kb, 0px));
    border-radius: 1.1rem;
    transition: bottom .2s ease;
  }
  .lume-chat-messages{ overscroll-behavior: contain; }
  /* quick replies : scroll horizontal propre, ne poussent pas l'input */
  .lume-chat-suggestions{ flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .lume-chat-suggestions::-webkit-scrollbar{ display: none; }
}

/* 4. Boutons flottants : un seul logo ∞ (chat) sur mobile.
      Le menu rapide (circle-menu) fait doublon visuel avec le hamburger
      toujours visible en haut → masqué pour libérer la lecture. */
@media (max-width: 640px){
  .circle-menu{ display: none; }
  .lume-launcher{
    left: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    padding: .45rem;
    box-shadow: 0 .5rem 1.6rem rgba(0,0,0,.5), 0 0 1.2rem rgba(205,152,71,.18);
  }
  .lume-launcher img{ width: 1.7rem; height: 1.7rem; }
}

/* ============================================================
   CORRECTIFS MOBILE — menu plein ecran, chatbot, galerie /02
   Ajout en fin de fichier (charge en dernier = prioritaire).
   100% sous media query => desktop strictement intact.
   ============================================================ */

/* ---- 1. MENU MOBILE PLEIN ECRAN -------------------------------
   Le JS ajoute bien .open a .main-nav au clic du hamburger, mais
   aucun style mobile n'existait => les liens flottaient en vrac.
   Ici : nav repliee par defaut, puis panneau plein ecran a l'ouverture. */
@media (max-width: 900px){
  /* etat ferme : on cache la nav et on la sort du flux */
  .main-nav{
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    padding: 6rem 1.5rem 3rem;
    background: rgba(8,8,7,.985);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    /* masque : invisible + non cliquable tant que pas .open */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s;
    overflow-y: auto;
  }
  .main-nav.open{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .28s ease, transform .28s ease, visibility 0s;
  }
  /* CRITIQUE : styles.css cache les liens via .main-nav a:not(.nav-cta){display:none}
     sous @media(max-width:1100px). On les RE-AFFICHE quand le menu est ouvert,
     sinon le panneau plein ecran s'ouvre VIDE (cause du bug constate). */
  .main-nav.open a:not(.nav-cta){
    display: block !important;
    font-size: 1.5rem;
    letter-spacing: .04em;
    padding: .35rem 0;
    color: #F5F0E8;
    text-align: center;
  }
  /* le bouton hamburger doit rester au-dessus du panneau pour pouvoir refermer */
  .menu-toggle{ position: relative; z-index: 4100; }

  /* CRITIQUE menu : le header a un backdrop-filter -> il devient le bloc conteneur
     des enfants position:fixed, ce qui calait le menu plein ecran sur le header
     (~60px) au lieu de l'ecran. On le retire en mobile pour liberer le .main-nav. */
  .site-header{ -webkit-backdrop-filter: none; backdrop-filter: none; }

  /* le selecteur de devise : remis dans le flux du menu, plus de position fixed baladeuse */
  .main-nav .top-market-switch{
    position: static !important;
    top: auto !important;
    right: auto !important;
    margin: .4rem 0;
    transform: none !important;
  }
  .main-nav .top-market-switch button{
    min-width: 6rem;
    font-size: .8rem !important;
    padding: .55rem 1rem !important;
  }
  /* le CTA "Demarrer un projet" : pleine largeur, bien visible en bas de liste */
  .main-nav .nav-cta{
    margin-top: .8rem;
    font-size: 1rem;
    padding: .9rem 1.8rem;
  }
}

/* ---- 2. CHATBOT : messages pousses vers le bas, plus de vide noir ----
   Cause du grand vide : les messages etaient colles en haut d'une feuille
   de 30rem. On reduit la feuille et on aligne le contenu vers le bas. */
@media (max-width: 640px){
  .lume-chat{
    height: min(68dvh, 27rem);
    max-height: calc(100dvh - 1.2rem - var(--kb, 0px));
  }
  /* la zone messages occupe l'espace et colle son contenu en bas */
  .lume-chat-messages{
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;   /* messages en bas, comme une vraie messagerie */
    gap: .6rem;
    overflow-y: auto;
  }
}

/* ---- 3. GALERIE /02 : supprimer le grand vide noir en bas ----
   Le bloc empile laissait un espace vide avant la section suivante. */
@media (max-width: 640px){
  .immersive, .immersive-gallery, .parallax-gallery{
    padding-bottom: 2.5rem;
  }
  /* la colonne centrale sticky n'a plus besoin de reserver une grande hauteur sur mobile */
  .parallax-gallery, .gallery-3col, .gallery3-track{
    min-height: 0 !important;
    height: auto !important;
  }
}