/* Responsive - chargé en dernier. Points de rupture :
   ≤1100 : tablette paysage (menu tiroir) · ≤820 : tablette / grands mobiles (une colonne)
   ≤560 : mobile. Approche « réduction » : le design bureau reste la référence. */

/* Le bouton burger n'existe qu'en mode tiroir. */
.nav-toggle { display: none; }

html { -webkit-text-size-adjust: 100%; }
.wrap.wrap { padding-inline: var(--gutter); }
img, svg, video { max-width: 100%; }
body { overflow-x: clip; }

/* ═══════════ ≤ 1100 : menu tiroir ═══════════ */
@media (max-width: 1100px) {
  :root { --gutter: 24px; }
  /* backdrop-filter ferait du header le bloc conteneur du tiroir (position: fixed) : on l'enlève. */
  .site-header { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 11px; margin-right: -11px;
    background: none; border: 0; cursor: pointer;
  }
  .nav-toggle span { display: block; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 160ms ease, opacity 120ms ease; }
  .site-header.is-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-header.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .site-header.is-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav {
    position: fixed; z-index: 49; top: var(--header-h); left: 0; right: 0; bottom: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--s-4) var(--gutter) var(--s-8); overflow-y: auto;
    background: var(--bg);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
  }
  .site-header.is-open .nav { opacity: 1; visibility: visible; transform: none; }
  .nav > a, .nav__dropdown-trigger { font-size: 18px; padding: 14px 0; border-bottom: 0.5px solid var(--line); }
  .nav__has-dropdown { border-bottom: 0.5px solid var(--line); }
  .nav__dropdown-trigger { border-bottom: 0; pointer-events: none; }
  .nav__dropdown-trigger svg { display: none; }
  .nav__dropdown {
    position: static; transform: none; min-width: 0; padding: 0 0 var(--s-3);
    opacity: 1; visibility: visible; pointer-events: auto;
    background: none; border: 0; box-shadow: none;
  }
  .nav__dropdown::before { display: none; }
  .nav__has-dropdown:hover .nav__dropdown, .nav__has-dropdown:focus-within .nav__dropdown { transform: none; }
  .nav__dropdown-item { padding: 10px 0; }
  .nav__tel { padding: 14px 0; font-size: 18px; }
  .nav .btn { margin-top: var(--s-5); font-size: 16px; min-height: 48px; }
}

/* ═══════════ ≤ 820 : une colonne ═══════════ */
@media (max-width: 820px) {
  :root {
    --gutter: 20px; --pad-y: 64px; --pad-hero: 48px;
    --fs-h1: 40px; --fs-h2: 30px; --fs-h2-sm: 26px; --fs-h3: 21px; --fs-lead: 17px;
  }
  .homehero h1 { font-size: 40px; }
  .page-security .hero h1, .page-why .hero h1, .mhero h1 { font-size: var(--fs-h1); max-width: none; }

  /* Toutes les mises en page à colonnes passent en une colonne. */
  .page-why .hero__body, .layout, .grid-2, .homehero__b, .mhero__grid, .mproblem__grid, .mbenefit,
  .page-security .hero__head, .archi, .guarantees, .page-why .hero__body, .human,
  .fit-cols, .showcase__panel, .teamcall__grid, .deepdive__row, .deepdive__row--right,
  .hero__head, .security-head, .bento, .mapfr, .team-head, .pillars, .casecards,
  .casecard__body, .datamap, .site-map-branches, .advice-layout, .cb__leg, .range,
  .irritants, .metiers, .manifesto__proofs, .usecases, .feature__steps, .casefacts,
  .caseresults, .cards-3, .cards-3--duo, .products, .features-grid, .testimonials, .proofs, .mosaic,
  .formation-encart, .metrics {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Grilles de petites cartes : deux colonnes. */
  .process, .ecosystem, .kpi-grid, .security-grid, .page-security .hero__pledges,
  .mpillars, .techband__grid, .journey, .case-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .hero__head, .page-security .hero__head, .page-why .hero__body { gap: var(--s-6); }
  .page-why .hero__inner, .page-security .hero__inner { padding-top: 64px; padding-bottom: 56px; }
  .deepdive__row { gap: var(--s-8); }
  .btn { white-space: normal; text-align: center; }
  .hero__ctas, .final-cta__ctas, .cta-band__ctas { flex-wrap: wrap; }

  /* Accueil : indicateurs en 2 × 2, bandeau des métiers (étiquette au-dessus), motifs recadrés */
  .homehero__kpi { margin-top: 40px; }
  .homehero__kpi > div { padding: 22px 16px 0; }
  .homehero__kpi > div:nth-child(odd) { padding-left: 0; }
  .homehero__kpi > div:nth-child(even) { border-right: 0; }
  .homehero__kpi > div:nth-child(n+3) { border-top: 1px solid var(--hh-ld); margin-top: 22px; }
  .homehero__kpi b { font-size: 34px; }
  .hometicker__inner { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .hometicker__track { width: 100%; flex: none; }
  .badge, .homehero-tag, .section__eyebrow { white-space: normal; max-width: 100%; }
  .hero__aside { border-left: 0; padding-left: 0; }
  .manifesto::before { height: 340px; top: -60px; right: -40%; opacity: .55; }
  .homehero__gl, .bento__motif { max-width: 100%; }
  .homehero, .bento, .bento__cell, .cta-band, .final-cta { overflow: hidden; }

  /* Bandeau d'appel (CtaBar) et pied de page */
  .cta-band__inner { flex-direction: column; align-items: flex-start; gap: var(--s-5); }
  .cta-band__ctas { width: 100%; }
  .site-footer__inner { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
  .site-footer__brand { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .site-footer__inner .links { flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
  .site-footer__inner .links a { white-space: nowrap; }

  /* Captures d'écran : cadre resserré, bouton d'agrandissement toujours visible (pas de survol au toucher) */
  .shot { padding: 12px; }
  .shot__zoom { opacity: 1; transform: none; right: 8px; bottom: 8px; padding: 6px 10px; font-size: 12px; }
  .lightbox { width: 100vw; max-height: 100vh; overflow: auto; }
  .lightbox img { max-width: none; max-height: none; height: 78vh; width: auto; margin: 0; }
  .lightbox__close { position: fixed; top: 12px; right: 12px; }

  /* Éléments qui doivent défiler plutôt que déborder (tableaux, maquettes d'écran). */
  .cmp, .shot__frame, .facture, .stock, .fiche, .contrats, .bo { overflow-x: auto; }
}

/* ═══════════ ≤ 560 : mobile ═══════════ */
@media (max-width: 560px) {
  :root {
    --gutter: 18px; --pad-y: 52px; --pad-hero: 36px;
    --fs-h1: 34px; --fs-h2: 27px; --fs-h2-sm: 23px; --fs-h3: 19px; --fs-lead: 16px;
  }
  .homehero h1 { font-size: 32px; }
  .process, .ecosystem, .journey, .mpillars, .techband__grid, .security-grid { grid-template-columns: minmax(0, 1fr); }
  .hero__ctas .btn, .final-cta__ctas .btn, .cta-band__ctas .btn, .homehero__act .btn { width: 100%; }
  .homehero__act, .hero__ctas, .final-cta__ctas { flex-direction: column; align-items: stretch; }
}

/* Tarifs */
@media (max-width: 1100px) { .pricing__modules, .situations { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .pricing__base { flex-direction: column; align-items: flex-start; padding: var(--s-6); gap: var(--s-5); }
  .pricing__base .pricing__amount { text-align: left; }
}
@media (max-width: 820px) { .situations { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .pricing__modules { grid-template-columns: minmax(0, 1fr); } }