/* =========================================================================
   nec-responsive.css — passe responsive (LEÇON 10 : l'export n'est pas
   responsive nativement). Surcharge les inline styles via !important.
   Breakpoints : 900px (tablette) · 600px (mobile). Chargé EN DERNIER.
   Dette technique : les sélecteurs [style*=...] sont un pansement ; à migrer
   vers de vraies classes dans les render.php au fil de l'eau.
   ========================================================================= */

/* Anti-débordement horizontal global (jamais sur <html> — LEÇON 11) */
body { overflow-x: hidden; }
img, svg, video { max-width: 100%; }

/* -------- Grilles : repassage en 1 colonne quand le min déborde -------- */
/* Les grilles repeat(auto-fit,minmax(280..340px,1fr)) débordent sous ~760px
   car le min (280-340px) dépasse la largeur dispo → forcer 1 colonne. */
@media (max-width: 767px) {
  [style*="grid-template-columns:repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
}

/* Grille fixe 4 colonnes (section « Commencer » de l'accueil) */
@media (max-width: 900px) {
  [style*="repeat(4,minmax(0,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 520px) {
  [style*="repeat(4,minmax(0,1fr)"] { grid-template-columns: 1fr !important; }
}

/* -------- Paddings horizontaux : respiration sur mobile (40px → 22px) -- */
@media (max-width: 600px) {
  [style*="px 40px"] { padding-left: 22px !important; padding-right: 22px !important; }
}

/* -------- Images à très grande hauteur fixe : réduites sur mobile ------ */
@media (max-width: 700px) {
  [style*="height:710px"] { height: 420px !important; }
  [style*="height:546px"] { height: 380px !important; }
  [style*="height:420px"] { height: 320px !important; }
}

/* -------- Rangées flex 2 colonnes (photo + texte) → empilées ---------- */
/* Ex. nec-accueil-intro : sans ça, la colonne texte reste à droite de la photo
   et pousse le CTA hors de l'écran (flex-wrap ne suffit pas). */
@media (max-width: 767px) {
  [style*="display:flex;gap:64px"] {
    flex-direction: column !important;
    gap: 32px !important;
    align-items: stretch !important;
  }
  [style*="min-width:320px"] { min-width: 0 !important; }
}

/* -------- Espacements verticaux de section resserrés sur mobile ------- */
/* Les sections héritent de paddings desktop (88-160px) → pages très longues.
   On cible le padding en tête de shorthand (top) et les grandes valeurs de bas
   (« 40px 112px » = padding:V 40px 112px). On NE touche PAS aux font-size:96px
   ni aux petits encadrés (padding:40px/36px). */
@media (max-width: 600px) {
  [style*="padding:112px"], [style*="padding:104px"], [style*="padding:96px"],
  [style*="padding:88px"],  [style*="padding:72px"] {
    padding-top: 52px !important; padding-bottom: 52px !important;
  }
  [style*="40px 160px"], [style*="40px 112px"], [style*="40px 104px"], [style*="40px 96px"] {
    padding-bottom: 52px !important;
  }
  [style*="padding-top:72px"] { padding-top: 36px !important; }
}

/* -------- Widgets à min-width qui débordent (Calendly, carte) --------- */
@media (max-width: 600px) {
  .calendly-inline-widget { min-width: 0 !important; }
  iframe { max-width: 100%; }
}

/* -------- Témoignages : neutraliser les décalages/rotations sur mobile - */
@media (max-width: 767px) {
  .nec-temoignages-grid figure { transform: none !important; }
}

/* =========================================================================
   Menu mobile (drawer) — voir template-parts/nav.php
   ========================================================================= */
.nec-burger-btn { display: none; }
.nec-mobile-menu { display: none; }

@media (max-width: 860px) {
  /* Le drawer (position:fixed hors-écran) étendrait la zone scrollable ; body{overflow-x}
     ne clippe pas les fixed. On clippe sur html MAIS seulement en mobile (LEÇON 11 : jamais
     sur html en desktop, ça casse le scroll trackpad macOS). */
  html { overflow-x: hidden; }

  .nec-burger-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; padding: 0; border: 0; cursor: pointer;
    background: transparent; color: var(--moutarde); flex: 0 0 auto;
  }
  .nec-burger-btn span,
  .nec-burger-btn span::before,
  .nec-burger-btn span::after {
    content: ""; display: block; position: relative;
    width: 24px; height: 2px; background: var(--moutarde);
    transition: transform .25s ease, opacity .2s ease;
  }
  .nec-burger-btn span::before { position: absolute; top: -7px; }
  .nec-burger-btn span::after  { position: absolute; top: 7px; }
  /* état ouvert : croix */
  .nec-burger-btn[aria-expanded="true"] span { background: transparent; }
  .nec-burger-btn[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
  .nec-burger-btn[aria-expanded="true"] span::after  { transform: translateY(-7px) rotate(-45deg); }

  .nec-mobile-menu {
    display: block; position: fixed; inset: 0 0 0 auto;
    width: min(84vw, 340px); max-width: 100%;
    background: var(--terracotta-dark, #7A3719);
    box-shadow: -20px 0 60px rgba(0,0,0,.35);
    padding: 96px 28px 40px;
    transform: translateX(100%); transition: transform .3s ease;
    z-index: 100001; overflow-y: auto; /* au-dessus de la bannière Complianz (z-index 99999) */
  }
  .nec-mobile-menu.is-open { transform: translateX(0); }
  .nec-mobile-menu a {
    display: block; padding: 15px 0; color: var(--moutarde);
    font-size: 15px; letter-spacing: .1em; text-transform: uppercase;
    border-bottom: 1px solid rgba(241,217,164,.16); text-decoration: none;
  }
  .nec-mobile-menu a.nec-mm-sub { padding-left: 18px; font-size: 13px; opacity: .85; text-transform: none; letter-spacing: .04em; }
  .nec-mobile-menu a.nec-mm-cta {
    margin-top: 22px; border: 0; text-align: center; border-radius: 999px;
    background: var(--dore); color: var(--bouton-texte); padding: 15px 20px;
  }
  .nec-mobile-menu a.nec-mm-cta.nec-mm-contact { background: var(--moutarde); color: var(--terracotta-dark); margin-top: 10px; }
  /* voile derrière le drawer */
  .nec-menu-overlay {
    display: none; position: fixed; inset: 0; background: rgba(45,20,8,.5);
    z-index: 100000; /* juste sous le drawer, au-dessus de Complianz */
  }
  .nec-menu-overlay.is-open { display: block; }
  body.nec-menu-lock { overflow: hidden; }
}