/* ===================================================================
   Azur Expertise — responsive.css
   Chargé GLOBALEMENT (Base.astro), après les CSS de page → gagne au mobile.
   Objectif : rendu mobile/tablette propre sans toucher au desktop.
   Les classes sont partagées par home.css ET v4.css (même design system).
   =================================================================== */

/* garde-fou : jamais de scroll horizontal */
html, body{ overflow-x:hidden; }

/* burger & CTA mobile masqués par défaut (desktop) */
.nav-burger{ display:none; }
.nav-cta-mobile{ display:none; }

/* ============ TABLETTE (≤ 1024px) : dégonfler les grilles denses ============ */
@media (max-width: 1024px){
  .two-col{ gap:48px; }
  .team{ grid-template-columns:repeat(2,1fr); gap:28px; }
  .cols-4{ grid-template-columns:repeat(2,1fr); }
  .stat-band{ grid-template-columns:repeat(2,1fr); }
  .exp-grid{ grid-template-columns:repeat(2,1fr) !important; }
  .sect-grid{ grid-template-columns:repeat(2,1fr); }
  section.blk{ padding:88px 0; }
}

/* ============ MOBILE (≤ 900px) : nav burger + colonnes empilées ============ */
@media (max-width: 900px){
  .wrap{ padding:0 22px; }
  section.blk{ padding:62px 0; }
  section.blk.tight{ padding:50px 0; }

  /* — topbar rééquilibrée sur mobile — */
  .topbar .l{ display:none; }
  .topbar .r{ flex:1; justify-content:space-between; gap:16px; }

  /* — barre de nav + burger — */
  nav.main{ background:linear-gradient(180deg, rgba(7,13,30,.62), transparent); }
  nav.main .wrap{ height:64px; }
  nav.main .logo{ height:42px; }
  nav.main > .wrap > .btn{ display:none; }               /* CTA inline (desktop) masqué */

  .nav-burger{
    display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
    width:42px; height:42px; padding:9px; margin-left:auto;
    background:transparent; border:0; cursor:pointer; z-index:60;
  }
  .nav-burger span{ display:block; height:2px; width:100%; background:#fff; border-radius:2px; transition:.25s; }
  nav.main.nav-open .nav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  nav.main.nav-open .nav-burger span:nth-child(2){ opacity:0; }
  nav.main.nav-open .nav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* — panneau déroulant — */
  nav.main .links{
    display:none; position:absolute; top:64px; left:0; right:0; z-index:55;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--navy); border-top:1px solid rgba(255,255,255,.1);
    box-shadow:0 30px 60px -18px rgba(0,0,0,.55); padding:6px 0 18px;
  }
  nav.main.nav-open .links{ display:flex; }
  nav.main .links a:not(.btn){ font-size:16px; padding:15px 24px; width:100%; color:rgba(255,255,255,.9); }
  nav.main .links a:not(.btn)::after{ display:none; }
  .nav-cta-mobile{ display:inline-flex !important; justify-content:center; margin:14px 22px 2px; }

  /* — HOME : hero empilé, texte d'abord (marque avant le portrait) — */
  .hero{ min-height:auto; }
  .hero > .wrap{ min-height:auto; display:block; }
  .hero .visual{ position:relative; width:100%; height:280px; }
  .hero .visual::before{ display:none; }
  .hero .copy{ max-width:100%; padding:92px 0 54px; }        /* dégage la barre de nav */
  /* nav.js déplace .visual ici, entre la description et les CTA */
  .hero .copy .visual{ margin:14px -22px 10px; width:auto; height:250px; }
  .hero h1{ font-size:34px; }
  .hero .lede{ font-size:16.5px; max-width:100%; }
  .hero .cta{ flex-wrap:wrap; gap:12px; margin-top:30px; }
  .hero .cta .btn{ flex:1 1 auto; justify-content:center; }
  .hero .trust{ flex-direction:column; gap:14px; margin-top:34px; }

  /* — authority strip — */
  .authority .wrap{ flex-wrap:wrap; gap:14px 22px; }
  .authority .sep{ display:none; }

  /* — HOME : sections — */
  .cabinet .grid{ grid-template-columns:1fr; gap:38px; }
  .cabinet .figure img{ height:330px; }
  .cabinet .figure .frame{ display:none; }
  .cabinet .figure .badge{ position:static; margin-top:16px; max-width:none; }
  .exp-grid{ grid-template-columns:1fr !important; margin-top:34px; }
  .platform .grid{ grid-template-columns:1fr; gap:42px; }
  .platform .feats{ grid-template-columns:1fr 1fr; }
  .sect-grid{ grid-template-columns:1fr; margin-top:32px; }

  /* — INTÉRIEURES : page-hero — */
  .page-hero > .wrap{ padding:116px 0 54px; }
  .page-hero h1{ font-size:34px; }
  .page-hero .lead{ font-size:16.5px; }
  .page-hero .cta{ flex-wrap:wrap; }

  /* — titres de section / type — */
  .sec-head h2{ font-size:28px; }
  .lead-p{ font-size:18px; }

  /* — INTÉRIEURES : grilles → 1 colonne — */
  .two-col{ grid-template-columns:1fr; gap:36px; }
  .two-col .figure img{ height:330px; }
  .two-col .figure .frame{ display:none; }
  .figure .badge{ position:static; margin-top:16px; max-width:none; left:auto; }
  .cols-3{ grid-template-columns:1fr; }
  .steps, .steps.four{ grid-template-columns:1fr; gap:26px; }
  .posts{ grid-template-columns:1fr; }
  .feat-cards{ grid-template-columns:1fr; }
  .detail{ grid-template-columns:1fr; gap:8px; padding:34px 0; }
  .detail .items{ grid-template-columns:1fr; }
  .sector{ grid-template-columns:1fr; gap:12px; padding:30px 0; }
  .form .row2{ grid-template-columns:1fr; }
  .contact-main .two-col{ grid-template-columns:1fr; gap:42px; }
  .two-col.r{ grid-template-columns:1fr; }
  .dirigeant .two-col{ grid-template-columns:1fr; }
  .dirigeant .portrait img{ height:360px; }
  .dirigeant .portrait .frame{ display:none; }
  .approach .ribbon{ flex-wrap:wrap; }               /* évite le débordement horizontal */

  /* — newsletter — */
  .newsletter{ flex-direction:column; align-items:flex-start; gap:20px; padding:32px 26px; }
  .newsletter input{ min-width:0; }

  /* — CTA band — */
  .cta-band .wrap{ padding:72px 22px; }
  .cta-band h2{ font-size:30px; }
  .cta-band .sub{ font-size:16.5px; }
  .cta-band .row{ flex-wrap:wrap; gap:16px; }

  /* — footer — */
  footer{ padding:54px 0 28px; }
  footer .grid{ grid-template-columns:1fr 1fr; gap:30px; }
  footer .grid > div:first-child{ grid-column:1 / -1; }
  footer .base{ flex-direction:column; gap:12px; align-items:flex-start; }
  footer .base a{ margin-left:0; margin-right:20px; }
}

/* ============ PETIT MOBILE (≤ 520px) ============ */
@media (max-width: 520px){
  .hero h1{ font-size:29px; }
  .page-hero h1{ font-size:27px; }
  .sec-head h2{ font-size:24px; }
  .cta-band h2{ font-size:25px; }
  .stat-band{ grid-template-columns:1fr 1fr; }
  .cols-4{ grid-template-columns:1fr 1fr; }
  .team{ grid-template-columns:1fr 1fr; gap:20px; }
  .platform .feats{ grid-template-columns:1fr; }
  footer .grid{ grid-template-columns:1fr; gap:24px; }
  .hero .cta .btn{ flex:1 1 100%; }
}