/* ─── RESPONSIVE: 1024px ─── */
@media(max-width:1024px){
  #hero{grid-template-columns:1fr}
  .hero-r{display:none}
  .hero-bg-deco{display:none}
  .exp-layout{grid-template-columns:1fr}
  .agence-layout{grid-template-columns:1fr}
  .ct-layout{grid-template-columns:1fr}
  .ft-grid{grid-template-columns:1fr 1fr}
  .iscene3-stats{padding:32px 32px}
  .is3{padding:0 24px}
}

/* ─── RESPONSIVE: 768px ─── */
@media(max-width:768px){
  /* Nav */
  .nav-links{display:none}
  .nav-ham{display:flex}
  .nav-mobile-menu{display:flex}
  .nav-end{gap:4px}

  /* Boutons flottants bas d'écran : masqués sur mobile (lisibilité, zone de geste, pas de chevauchement) */
  .wa,
  #back-top,
  .recall-fab,
  #chat-bubble,
  #chat-panel{
    display:none!important;
    pointer-events:none!important;
    visibility:hidden!important;
  }

  /* Sections */
  section{padding:72px 5%}

  /* Hero */
  #hero{padding:90px 5% 64px}
  .hero-h1{font-size:clamp(32px,8vw,52px);letter-spacing:-1.5px}
  .hero-p{font-size:15px;max-width:100%}
  .hero-btns{flex-direction:column}
  .hero-btns a{text-align:center;justify-content:center}
  .hero-stats{
    display:grid;grid-template-columns:1fr 1fr;
    gap:20px;margin-top:40px;padding-top:28px;
  }

  /* Services / grids */
  .srv-layout{grid-template-columns:1fr}
  .srv-media{min-height:260px}
  .srv-catalog{grid-template-columns:1fr}
  .srv-item-featured{grid-column:auto}
  .srv-actions{justify-content:stretch}
  .srv-actions .btn-outline,.srv-actions .btn-red{width:100%;justify-content:center}
  .aud-grid{grid-template-columns:1fr}
  .tst-grid{grid-template-columns:1fr}
  .mosaic{grid-template-columns:1fr;grid-template-rows:auto}
  .mc:first-child{grid-row:auto}
  .mc img{height:200px}
  .fg{grid-template-columns:1fr}
  .form-nav{flex-direction:column}
  .form-nav .btn-outline,.form-nav .btn-navy,.form-nav .btn-sub{width:100%;justify-content:center}
  .ft-grid{grid-template-columns:1fr}

  /* Section headers */
  .s-header{flex-direction:column;align-items:flex-start;margin-bottom:40px}

  /* Cinematic intro — progress rail */
  .intro-prog-rail{display:none}
  .intro-chap-num{font-size:64px;left:16px;bottom:56px}

  /* Cinematic intro — badge */
  .intro-badge-tl{top:80px;left:12px;font-size:11px;padding:6px 11px;gap:6px}

  /* Scene 2 — words */
  .iscene2-words{flex-direction:column;gap:4px;align-items:center}
  .iw2-sep{font-size:20px;transform:rotate(90deg)}

  /* Scene 3 — stats card */
  .iscene3-stats{
    flex-direction:column;padding:20px 16px;gap:0;
    border-radius:16px;width:90%;max-width:340px;
  }
  .is3{padding:16px 12px;width:100%}
  .is3-sep{width:80%;height:1px}
  .is3-num{font-size:clamp(32px,9vw,52px)}
  .iscene3-label{margin-bottom:28px}

  /* Scene 4 — pills */
  .iscene4-grid{grid-template-columns:1fr;max-width:300px;gap:10px}
  .is4p{white-space:normal;padding:13px 20px;border-radius:14px}

  /* Scene 5 — CTA buttons */
  .iscene5-btns{flex-direction:column;align-items:center;gap:12px}
  .is5-cta,.is5-cta-ghost{width:100%;max-width:300px;justify-content:center}

  /* Counters section — override inline style */
  #counters-section{grid-template-columns:repeat(2,1fr)!important;gap:20px!important}

  /* Devis calculator — override inline style */
  .devis-grid{grid-template-columns:1fr!important;gap:28px!important;padding:28px 20px!important}
  .devis-grid > div:last-child{order:-1}

  /* Cookie bar */
  #cookie-bar{flex-direction:column!important;gap:14px!important;text-align:center;padding:16px 20px!important}
  #cookie-bar > div{justify-content:center!important}

  /* Toast */
  #toast{right:12px!important;left:12px!important}

  /* Mosaic gallery */
  .mosaic{grid-template-columns:1fr!important}
}

/* ─── RESPONSIVE: 480px ─── */
@media(max-width:480px){
  nav{padding:0 clamp(10px,3vw,4%)}
  .logo-txt .sub{display:none}
  .logo-txt{font-size:15px}
  section{padding:56px 4%}
  #hero{padding:84px 4% 52px}
  .hero-h1{font-size:clamp(28px,9vw,44px)}
  .hero-stats{grid-template-columns:1fr 1fr;gap:16px}
  .stat-n{font-size:28px}
  .s-title{font-size:clamp(24px,7vw,38px)}
  #counters-section{grid-template-columns:repeat(2,1fr)!important;gap:16px!important}
  .iscene3-stats{padding:14px 8px;width:95%}
  .is3{padding:12px 6px}
  .is3-num{font-size:clamp(28px,10vw,44px)}
  .is4p{font-size:14px}
  .dp{height:300px}
  .ft-grid{grid-template-columns:1fr}
  .sp-name{font-size:clamp(22px,6vw,36px)}
  .iscene1-logo{font-size:clamp(36px,11vw,72px);letter-spacing:-2px}
}