/* =========================================================
   TRAKADOM – styles.css (PATCH PRO RESPONSIVE)
   ✅ Objectif : 100% responsive (mobile/tablette/desktop/4K)
   ✅ Ne casse rien : on garde tes variables + classes existantes
   ✅ Corrige le point bloquant : min-width:1600px (à supprimer)
   ✅ Header/Footer : spacing + sticky + safe areas + scroll lock
   ========================================================= */

/* -------------------------
   1) ROOT – on garde tes vars
   + on rend --pad et container fluides
   ------------------------- */
   :root{
    --bg:#070A0F;
    --panel:#0B1020;
    --text:#EAF0FF;
    --muted:#A8B3CF;
    --line:rgba(255,255,255,.10);
    --accent:#7C5CFF;
    --accent2:#22E1FF;
    --radius:16px;
    --container:1600px;
  
    --max: 1600px;
  
    /* ✅ IMPORTANT: pad fluide au lieu de 4.5rem fixe */
    --pad: clamp(16px, 3vw, 72px);
  
    --bg0:#070A10;
    --bg1:#0E1422;
    --bg2:#111A2E;
  
    --text: rgba(255,255,255,.92);
    --muted: rgba(255,255,255,.66);
  
    --brand:#F57E57;
    --brand2:#1D6677;
  
    --panel: rgba(255,255,255,.06);
    --border: rgba(255,255,255,.11);
  
    --shadow: 0 18px 50px rgba(0,0,0,.38);
    --shadow2: 0 12px 30px rgba(0,0,0,.22);
  
    --r: 18px;
    --r2: 28px;
    --r3: 40px;
  
    --h1: clamp(2.2rem, 3.2vw, 3.6rem);
    --h2: clamp(1.5rem, 2.1vw, 2.3rem);
    --lead: clamp(1.02rem, 1.1vw, 1.18rem);
  
    --gapXL: clamp(1.8rem, 2.6vw, 3.1rem);
    --gapL: clamp(1.15rem, 1.7vw, 1.9rem);
    --sectionY: clamp(4.0rem, 6vw, 7.4rem);
  
    /* ✅ hero auto sur mobiles via media query */
    --heroH: 700px;
  
    --hero-blur-img: url("https://trakadom.com/media/2020/07/trakadom-retour-domicile-tracheotomie-gastrostomie-la-sla-pour-les-nuls-banner-3.jpg");
  
    /* ✅ header height safe */
    --headerH: 74px;
  }
  
  /* -------------------------
     2) RESET / BASE
     ------------------------- */
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden; /* ✅ anti scroll horizontal */
  }
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block;height:auto}
  
  /* ✅ iOS safe area */
  body{
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  
  /* -------------------------
     3) CONTAINER – 1 seule définition propre
     (on neutralise tes doublons sans casser)
     ------------------------- */
  .container{
    width: min(var(--max), calc(100% - (var(--pad) * 2)));
    margin-left:auto;
    margin-right:auto;
    padding-left: 0;
    padding-right: 0;
  }
  
  /* -------------------------
     4) BUTTONS – inchangé, juste tap-friendly
     ------------------------- */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.5rem;
    padding:.85rem 1.05rem;
    border-radius:999px;
    border:1px solid var(--line);
    font-weight:600;
    line-height:1;
    cursor:pointer;
    transition: transform .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
    min-height: 44px; /* ✅ accessibilité mobile */
  }
  .btn-primary{
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    border-color:transparent;
    color:#081018
  }
  .btn-ghost{background:transparent}
  .btn:active{transform: translateY(1px)}
  
  /* -------------------------
     5) TOP PROGRESS + REVEAL
     ------------------------- */
  .top-progress{
    position:fixed;
    top:0;left:0;right:0;height:3px;
    transform-origin:left center;
    transform:scaleX(0);
    background:linear-gradient(90deg,var(--accent),var(--accent2));
    z-index:9999;
  }
  .reveal{opacity:0;transform:translateY(10px);transition:.6s ease}
  .reveal.is-visible{opacity:1;transform:none}
  
  /* -------------------------
     6) IMPORTANT : SUPPRESSION DU "MIN-WIDTH 1600"
     (c’était le truc qui empêchait le responsive)
     ------------------------- */
  /*
    SUPPRIMÉ :
    @media (min-width: 1024px){
      body{ min-width: 1600px; }
      .site-header, main, footer{ min-width: 1600px; }
    }
    @media (min-width: 1024px){
      .hero, .band, .footer2026{ min-width: 1600px; }
    }
  */
  
  /* -------------------------
     7) HERO – stable partout
     ------------------------- */
  .hero{
    position: relative;
    min-height: var(--heroH);
    padding: clamp(2.6rem, 4vw, 4.5rem) 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  
  /* -------------------------
     8) TYPO (inchangé, safe)
     ------------------------- */
  body h2{
    text-shadow:
      0 1px 0 rgba(0,0,0,0.8),
      0 4px 10px rgba(0,0,0,0.9),
      0 12px 30px rgba(0,0,0,0.7);
  }
  body p{
    margin: 0 0 .9rem;
    color: rgba(255,255,255);
    line-height: 1.8;
    font-weight: 200;
  }
  body h1{
    color:#fff;
    text-shadow: 0 1px 1px rgb(0, 0, 0);
    font-weight: 800;
  }
  body h2{color:#f6815b}
  
  /* =========================================================
     9) HEADER – gestion intelligente (responsive + mobile nav)
     (ne casse rien : utilise tes classes existantes)
     ========================================================= */
  
  .site-header{
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(14px);
    background: rgba(7,10,16,.82);
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .site-header.is-scrolled{
    box-shadow: 0 14px 34px rgba(0,0,0,.28);
  }
  
  /* Rangée header safe */
  .header-row{
    min-height: var(--headerH);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 1rem;
    padding: .9rem 0;
  }
  
  /* Burger + panel (compatible avec ton JS: #navPanel) */
  .nav-toggle{
    display:none;
    border:1px solid var(--border);
    background: var(--panel);
    border-radius: 14px;
    padding:.65rem .75rem;
    cursor:pointer;
  }
  .burger{ width:22px; height:14px; display:block; position:relative; }
  .burger:before, .burger:after{
    content:""; position:absolute; left:0; right:0; height:2px;
    background: rgba(255,255,255,.88); border-radius:2px;
  }
  .burger:before{ top:0; }
  .burger:after{ bottom:0; }
  
  /* Panel desktop */
  .nav-panel{
    display:flex;
    align-items:center;
    gap:.25rem;
  }
  
  /* Links */
  .nav-link{
    padding:.65rem .9rem;
    border-radius: 14px;
    color: var(--muted);
    transition:.18s ease;
  }
  .nav-link:hover{
    color:var(--text);
    background: rgba(255,255,255,.06);
  }
  .nav-link.is-active{
    color: var(--text);
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.10);
  }
  
  .nav-actions{
    display:flex;
    gap:.55rem;
    margin-left:.5rem;
  }
  
  /* ✅ Scroll lock quand menu ouvert */
  body.nav-open{
    overflow: hidden;
    touch-action: none;
  }
  
  /* ✅ Mobile nav (≤980px) */
  @media (max-width: 980px){
    :root{ --heroH: auto; }
  
    .nav-toggle{ display:inline-flex; }
  
    .nav-panel{
      position:absolute;
      right:0;
      top: calc(100% + .65rem);
      width: min(92vw, 420px);
  
      flex-direction:column;
      align-items:stretch;
  
      padding:.75rem;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(7,10,16,.92);
      backdrop-filter: blur(16px);
      box-shadow: var(--shadow);
  
      display:none;
      transform: translateY(-6px);
      opacity: 0;
      transition: .18s ease;
    }
  
    .nav-panel.is-open{
      display:flex;
      transform: translateY(0);
      opacity: 1;
    }
  
    .nav-actions{
      margin-left:0;
      padding-top:.45rem;
      display:grid;
      gap:.6rem;
    }
  
    .nav-actions .btn{
      width:100%;
      justify-content:center;
    }
  
    .nav-link{
      padding: .9rem 1rem;
    }
  }
  
  /* ✅ Ultra mobile (≤520px) */
  @media (max-width: 520px){
    :root{ --pad: 14px; }
    .header-row{ padding: .75rem 0; }
    .btn{ padding: .85rem 1rem; border-radius: 14px; }
  }
  
  /* =========================================================
     10) FOOTER – spacing intelligent + responsive
     (ne remplace pas ton footer.css, complète)
     ========================================================= */
  
  .site-footer,
  .footer2026{
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
  
  .footer2026 .container,
  .site-footer .container{

  }
  
  /* ✅ typographie footer un peu plus compacte sur mobile */
  @media (max-width: 680px){
    .footer2026, .site-footer{ padding-bottom: 1.4rem; }
    .footer2026 p, .site-footer p{ line-height: 1.6; }
  }
  
  /* =========================================================
     11) BREAKPOINTS “100%” – TOUS SUPPORTS
     (propre, sans casser tes layouts de home.css)
     ========================================================= */
  
  /* Large desktop (≤1200px) */
  @media (max-width: 1200px){
    :root{
      --sectionY: clamp(3.6rem, 6vw, 6.6rem);
    }
  }
  
  /* Tablet (≤980px) */
  @media (max-width: 980px){
    :root{
      --sectionY: clamp(3.2rem, 6vw, 6rem);
    }
  }
  
  /* Mobile (≤680px) */
  @media (max-width: 680px){
    :root{
      --sectionY: 3.1rem;
    }
  }
  
  /* Small mobile (≤360px) */
  @media (max-width: 360px){
    :root{
      --pad: 12px;
    }
  }
  
  /* 4K+ (≥1800px) : on garde la même largeur max mais on aère */
  @media (min-width: 1800px){
    :root{
      --pad: 84px;
    }
  }

  .sr-only {
    color: #ffffffad;
    margin-right: 10px;
    font-weight: 600;
  }