/* ════════════════════════════════════════════════════════════════════
   BeezWorld — Correctifs responsive (mobile + tablette)
   Fichier unique à inclure dans le <head> de chaque page :
     <link rel="stylesheet" href="assets/css/responsive-fixes.css">
   Doit être chargé APRÈS le <style> inline existant pour bénéficier
   de la priorité de source. Pour les pages où des <style> apparaissent
   dans le <body> (collectivites, industrie, logistique, filieres), les
   surcharges critiques utilisent !important pour garantir la prise en
   compte.
   ════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   PORTAIL (index.html) — autoriser le scroll +
   image de fond plus visible (moins assombrie).
   ───────────────────────────────────────────── */
@media(max-width:980px){
  body{overflow:auto!important;height:auto!important}
  html{overflow:auto!important;height:auto!important}
  .portal{overflow:visible!important}
  .portal-bg{position:fixed!important}
  .portal-overlay,.portal-grid-bg{position:fixed!important}

  /* Image moins assombrie pour révéler la station */
  .portal-bg img{
    filter:brightness(0.95) saturate(1.05)!important;
  }
  /* Overlay plus léger (était .45/.6/.8 → .22/.38/.7) */
  .portal-overlay{
    background:linear-gradient(180deg,
      rgba(15,46,49,.22) 0%,
      rgba(15,46,49,.38) 45%,
      rgba(15,46,49,.7) 100%)!important;
  }
}

/* ─────────────────────────────────────────────
   NAV — burger activé dès 900px (tablette incluse)
   Le seuil original (@640px) laisse le menu desktop
   apparaître écrasé sur les tablettes (640-900px).
   On force le burger + l'overlay dès 900px.

   IMPORTANT : on retire backdrop-filter sur .bw-nav
   en mobile. Sinon .bw-nav devient le containing
   block des descendants position:fixed (.nav-links),
   ce qui collapse l'overlay à la hauteur du nav (64px)
   au lieu du viewport. Bug observé : seul le 1er lien
   du menu est visible.
   ───────────────────────────────────────────── */
@media(max-width:900px){
  /* Retirer backdrop-filter pour ne pas créer de containing block */
  .bw-nav{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    background:rgba(15,46,49,.96)!important;
  }

  .nav-burger{
    display:inline-flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
  }
  .nav-burger span{display:block!important;width:22px!important;height:2px!important}

  .nav-links{
    position:fixed!important;
    top:var(--h-nav,64px)!important;
    left:0!important;right:0!important;
    bottom:auto!important;
    height:calc(100vh - var(--h-nav,64px))!important;
    background:#0F2E31!important;
    background-color:#0F2E31!important;
    flex-direction:column!important;
    align-items:stretch!important;
    padding:18px 20px 28px!important;
    gap:2px!important;
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:transform .25s,opacity .2s;
    overflow-y:auto!important;
    z-index:9999!important;
    display:flex!important;
  }
  .nav-links.open{
    transform:translateY(0)!important;
    opacity:1!important;
    pointer-events:auto!important;
  }
  .nav-links a{
    font-size:.78rem!important;
    padding:14px 16px!important;
    border-radius:10px!important;
    letter-spacing:.06em!important;
    text-align:left!important;
  }
  .nav-links a:not(.nav-cta):hover{background:rgba(255,255,255,.06)!important}

  .nav-dropdown{
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    width:100%!important;
  }
  .nav-dropdown-trigger{
    justify-content:space-between!important;
    width:100%!important;
    padding:14px 16px!important;
  }
  .nav-dropdown-menu{
    position:static!important;
    transform:none!important;
    background:rgba(255,255,255,.04)!important;
    border:0!important;
    box-shadow:none!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    margin:0 0 4px!important;
    padding:4px!important;
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
  }
  .nav-dropdown-menu a{
    padding:11px 18px!important;
    font-size:.72rem!important;
    color:rgba(255,255,255,.7)!important;
  }
  .nav-cta{
    align-self:flex-start!important;
    margin-top:10px!important;
    padding:15px 28px!important;
  }

  .bw-nav{padding:0 20px!important}
}

/* ─────────────────────────────────────────────
   TABLETTE — ≤900px
   Réduction des gaps trop larges, paddings 56→32
   ───────────────────────────────────────────── */
@media(max-width:900px){
  .chain-layout,
  .roi-layout,
  .faq-layout,
  .reseau-layout,
  .smartcity-grid,
  .audela-grid,
  .enjeux-layout{gap:48px}

  .chain-layout,
  .sec-aides,
  .sec-cta,
  .sec-ref,
  .reseau-inner,
  .invest-inner,
  .bw-footer{padding-left:32px;padding-right:32px}

  .ref-cards{grid-template-columns:repeat(2,1fr)}

  /* Grilles inline 4-5 colonnes (a-propos partis pris, etc.)
     → réduites à 2 colonnes en tablette pour ne pas écraser les cartes */
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns:repeat(4"]{
    grid-template-columns:repeat(2,1fr)!important;
  }

  /* Pages légales */
  .legal-hero{padding-left:32px!important;padding-right:32px!important}
  .legal-article{padding-left:24px!important;padding-right:24px!important}
}

/* ─────────────────────────────────────────────
   SMARTPHONE — ≤640px
   Suppression débordement horizontal, paddings 20px,
   collapse complet des grilles inline.
   ───────────────────────────────────────────── */
@media(max-width:640px){
  html,body{overflow-x:hidden;max-width:100vw}

  /* Menu déroulant : éviter le débordement */
  .nav-dropdown-menu{min-width:0}

  /* Sections du site principal */
  .chain-layout{padding:64px 20px;gap:36px}
  .sec-aides{padding:72px 20px}
  .sec-ref{padding:64px 20px}
  .sec-cta{padding:56px 20px}
  .reseau-inner,
  .invest-inner{padding-left:20px;padding-right:20px}

  /* Footer en colonne centrée */
  .bw-footer{
    padding:24px 20px;
    flex-direction:column;
    text-align:center;
    gap:14px;
    align-items:center;
    justify-content:center;
  }
  .footer-copy{text-align:center}

  /* Gaps des layouts multi-colonnes */
  .roi-layout,
  .faq-layout,
  .smartcity-grid,
  .audela-grid,
  .reseau-layout,
  .enjeux-layout{gap:36px}

  /* Cartes en pile complète */
  .ref-cards{grid-template-columns:1fr;gap:1px}
  .chain-cards,
  .args-grid{grid-template-columns:1fr}

  /* Grilles définies en style inline → forcer 1 colonne */
  .protection-grid,
  .contentieux-grid,
  .preuve-grid,
  .autorisations-grid,
  .reseau-timeline{grid-template-columns:1fr!important;gap:24px!important}

  /* Sections avec padding inline (style="padding:120px/112px/96px ...") */
  section[style*="padding:120px"],
  section[style*="padding:112px"],
  section[style*="padding:96px"]{
    padding-top:56px!important;
    padding-bottom:56px!important;
    padding-left:20px!important;
    padding-right:20px!important;
  }

  /* CATCH-ALL : toutes les grilles inline (repeat(N), 1fr 1fr, etc.)
     → 1 colonne sur mobile. Couvre Beez+World, Fondateurs,
     Partis pris (5 col), tous les inline grids multi-col. */
  [style*="grid-template-columns:1fr 1.2fr"],
  [style*="grid-template-columns:1.2fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1.15fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:repeat("]{
    grid-template-columns:1fr!important;
  }

  /* CATCH-ALL : gaps inline trop larges sur mobile */
  [style*="gap:96px"]{gap:28px!important}
  [style*="gap:80px"]{gap:28px!important}
  [style*="gap:64px"]{gap:24px!important}
  [style*="gap:48px"]{gap:22px!important}

  /* Cartes inline trop paddées (a-propos : fondateurs) */
  [style*="padding:48px 44px"]{padding:28px 22px!important}

  /* Onglets filières */
  .filieres-selector{flex-wrap:wrap;gap:8px}
  .filiere-onglet{flex:1 1 calc(50% - 8px);min-width:0}

  /* Safety net : pas d'image qui déborde */
  img,picture,video{max-width:100%;height:auto}

  /* Pages légales */
  .legal-hero{
    padding-left:20px!important;
    padding-right:20px!important;
    padding-top:calc(var(--h-nav,64px) + 32px)!important;
    padding-bottom:24px!important;
  }
  .legal-article{padding:32px 20px 64px!important}

  /* ─── PORTAIL (index.html) ───
     Layout : photo en banner top (55dvh), fond marine plein dessous,
     H1 + pitch agrandis sur l'image, portes ancrées tout en bas. */
  .portal{
    background:#0F2E31!important;
    padding:96px 18px 48px!important;
    min-height:100vh!important;
    min-height:100dvh!important;
    justify-content:flex-start!important;
    align-items:stretch!important;
  }

  /* Image bg limitée à 55% du viewport (au lieu de pleine page) */
  .portal-bg{
    position:absolute!important;
    top:0!important;left:0!important;right:0!important;
    bottom:auto!important;
    height:55vh!important;
    height:55dvh!important;
  }
  .portal-overlay{
    position:absolute!important;
    top:0!important;left:0!important;right:0!important;
    bottom:auto!important;
    height:55vh!important;
    height:55dvh!important;
    /* fondu doux vers marine en bas pour transition photo → contenu */
    background:linear-gradient(180deg,
      rgba(15,46,49,.12) 0%,
      rgba(15,46,49,.35) 50%,
      rgba(15,46,49,.92) 92%,
      #0F2E31 100%)!important;
  }
  .portal-grid-bg{display:none!important}

  /* Inner stretch sur toute la hauteur dispo */
  .portal-inner{
    flex:1 1 auto!important;
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    align-items:center!important;
    position:relative!important;
    z-index:5!important;
  }

  /* Typo : H1 plus impactant + pitch lisible */
  .portal-h1{
    font-size:1.8rem!important;
    line-height:1.15!important;
    margin-bottom:20px!important;
  }
  .portal-pitch{
    font-size:1rem!important;
    line-height:1.55!important;
    /* margin-bottom:auto → ancre portes en bas du portal-inner */
    margin-bottom:auto!important;
    padding-bottom:32px!important;
    max-width:580px!important;
  }

  /* Portes 2x2 ancrées en bas */
  .portal-doors{
    grid-template-columns:repeat(2,1fr)!important;
    gap:10px!important;
    width:100%!important;
  }
  .portal-door{min-height:auto!important;padding:14px 12px!important}
  .portal-door-tag{font-size:.5rem!important;margin-bottom:6px!important;letter-spacing:.16em!important}
  .portal-door-title{font-size:.95rem!important;line-height:1.15!important;margin-bottom:6px!important}
  .portal-door-slogan{font-size:.7rem!important;line-height:1.32!important;margin-bottom:6px!important}
  .portal-door-arrow{margin-top:6px!important;font-size:.62rem!important}

  /* Legal au bas absolu du portal */
  .portal-legal{font-size:.55rem!important;bottom:14px!important}
}

/* ─────────────────────────────────────────────
   PETIT SMARTPHONE — ≤480px
   Réduction des tailles de typo et compactage hero.
   ───────────────────────────────────────────── */
@media(max-width:480px){
  /* Logo nav réduit */
  .bw-logo svg{height:28px}
  .nav-logo svg{height:28px}

  /* Grilles à 1 colonne */
  .stats-grid{grid-template-columns:1fr}
  .stat{padding:24px 20px}

  /* Hero compact */
  .hero-inner{padding:36px 16px 56px}
  .hero h1{font-size:1.85rem;line-height:1.1}
  .hero-sub{font-size:.92rem}

  /* Pitch et citations */
  .pitch-q{font-size:1.05rem;line-height:1.55}
  .chain-quote{font-size:1rem;padding-left:18px;margin:20px 0 26px}
  .ref-acronym{font-size:1.9rem}
  .roi-big{font-size:2.6rem}

  /* Titres principaux */
  h2.ttl,
  .cta-text h2{font-size:1.7rem;line-height:1.18}

  /* Beez+World et autres h2/h3 inline (a-propos) */
  [style*="font-size:clamp(2.2rem"]{font-size:1.8rem!important}
  [style*="font-size:clamp(1.4rem,2.4vw"]{font-size:1.15rem!important}
  [style*="font-size:clamp(1.4rem,2vw"]{font-size:1.2rem!important}
  /* Titre "Nos partis pris" (clamp(1.8rem,3vw,2.6rem)) */
  [style*="font-size:clamp(1.8rem,3vw"]{font-size:1.55rem!important;line-height:1.18!important}

  /* Investissement */
  .invest-col-avant,
  .invest-col-apres{padding:24px 18px}

  /* Onglets filières en pile */
  .filiere-onglet{flex:1 1 100%}

  /* Pages légales */
  .legal-hero h1{font-size:1.65rem!important;line-height:1.2}

  /* Portail (index) : ajustement fin pour très petits écrans */
  .portal{padding:88px 14px 44px!important}
  .portal-bg,.portal-overlay{height:50vh!important;height:50dvh!important}
  .portal-h1{font-size:1.55rem!important;margin-bottom:16px!important}
  .portal-pitch{font-size:.92rem!important;padding-bottom:24px!important}
  .portal-door{padding:12px 10px!important}
  .portal-door-title{font-size:.86rem!important}
  .portal-door-slogan{font-size:.64rem!important}

  /* Page contact */
  nav .nav-logo svg{height:28px}
  nav .btn-accueil{font-size:.72rem;padding:.6rem .65rem}
}
