/**
 * Capesio — responsive (<1380px + tablette + mobile).
 * Feuille dédiée, chargée APRÈS style.css et footer.css : elle ne fait que
 * surcharger les breakpoints, sans toucher aux styles desktop de référence.
 * Ne couvre PAS les sections propres à la page d'accueil (hero home, ehome…),
 * encore en cours de design.
 */

/* ============================================================
   Header — burger mobile (CSS pur : checkbox + label)
   ============================================================ */
/* La checkbox pilote l'ouverture du menu ; visuellement retirée mais focusable. */
.nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.nav-burger { display: none; }
/* CTA dupliqué dans le panneau mobile : caché sur desktop */
.site-nav .cta-button--nav { display: none; }

/* ------ <1380px : header resserré (la barre devient juste avant le burger) ------ */
@media (max-width: 1240px) {
  .site-header__inner { gap: 24px; }
  .site-header__actions { gap: 20px; }
  .site-nav { gap: 18px; }
  .nav-link { font-size: 13px; }
  .cta-button { padding: 8px 18px 8px 10px; }
}

/* ------ ≤900px : burger + panneau déroulant ------ */
@media (max-width: 900px) {
  .site-header { position: relative; }
  .site-header__inner { padding: 14px 20px; }

  /* La nav devient un panneau déroulant sous le header */
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 24px 24px;
    background: var(--blanc);
    border-bottom: 1px solid rgba(3, 69, 115, 0.08);
    box-shadow: 0 22px 34px rgba(3, 69, 115, 0.14);
  }
  .site-nav .nav-link {
    width: 100%;
    padding: 14px 0;
    font-size: 15px;
    border-bottom: 1px solid rgba(3, 69, 115, 0.08);
  }
  .site-nav .nav-link:last-of-type { border-bottom: none; }

  /* CTA : masqué dans la barre, affiché dans le panneau */
  .site-header__actions > .cta-button { display: none; }
  .site-nav .cta-button--nav {
    display: inline-flex;
    margin-top: 14px;
    padding: 9px 24px 9px 10px;
  }

  /* Bouton burger */
  .nav-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    cursor: pointer;
    border-radius: 12px;
    outline: 1px solid rgba(3, 69, 115, 0.15);
    outline-offset: -1px;
  }
  .nav-burger span {
    display: block;
    width: 22px;
    height: 2.5px;
    border-radius: 2px;
    background: var(--bleu-fonce);
    transition: transform 0.25s ease, opacity 0.2s ease;
  }

  /* Ouverture + burger → croix */
  .nav-toggle:checked ~ .site-header__actions .site-nav { display: flex; }
  .nav-toggle:checked ~ .site-header__actions .nav-burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav-toggle:checked ~ .site-header__actions .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .site-header__actions .nav-burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  /* focus clavier sur la checkbox → halo sur le burger */
  .nav-toggle:focus-visible ~ .site-header__actions .nav-burger { outline: 2px solid var(--bleu-azure); }
}

/* ============================================================
   Page « Vos besoins et objectifs »
   ============================================================ */
/* 1180–1280px : la colonne du formulaire (560px) laisse trop peu de place au
   texte → on resserre les deux avant le passage sur une colonne à 1180px.
   Plage bornée : en dessous de 1181px, style.css repasse en une colonne et
   cette feuille, chargée après, ne doit PAS re-figer la grille.
   07/08/2026 : le formulaire n'est plus en position absolue (il est dans le
   cadre bleu) — on agit donc sur la grille, plus sur sa largeur propre. */
@media (max-width: 1280px) and (min-width: 1181px) {
  .besoins-hero__panel { grid-template-columns: minmax(0, 1fr) 500px; gap: 40px; padding: 56px 48px; }
  .besoins-hero__left { max-width: 420px; }
}

@media (max-width: 560px) {
  .besoins-hero__panel { padding: 36px 24px; }
  /* 2 classes : la règle à 1 classe de style.css perdait contre `.besoins-hero .besoins-hero__title` */
  .besoins-hero .besoins-hero__title { font-size: 24px; }
  .besoins-form__title { font-size: 20px; }
  .enjeux__title,
  .realisations__title { font-size: 20px; }
}

/* --- Bandeau « diagnostic » : allégé ≤1000px, en flux ≤720px --- */
@media (max-width: 1000px) {
  .diag-cta { padding: 36px 40px; }
  .diag-cta__star { width: 150px; left: -30px; top: -30px; }
  .diag-cta__content { max-width: none; }
}
@media (max-width: 720px) {
  .diag-seam { height: auto; padding: 8px 24px 48px; }
  .diag-cta { transform: none; margin: 0 auto; padding: 32px 24px; }
  .enjeux__inner { padding: 64px 24px 40px; }
  .apres-enjeux { padding: 56px 0 72px; }
}

/* --- Réalisations clients (carrousel) --- */
@media (max-width: 720px) {
  .realisations__inner { padding: 0 24px; }
  .real-track {
    gap: 20px;
    padding-inline: 24px;
    scroll-padding-inline: 24px;
  }
}
@media (max-width: 560px) {
  .real-dark, .real-quotebox { width: 86vw; }
  .real-dark { padding: 28px 22px 40px; gap: 32px; }
  .real-quotebox { padding: 32px 24px 40px; }
  .real-quote { font-size: 15px; }
  .real-track { padding-inline: 20px; scroll-padding-inline: 20px; }
  .realisations__inner { padding: 0 20px; }
  .enjeux__inner { padding-left: 20px; padding-right: 20px; }
}

/* ============================================================
   Page « À propos »
   ============================================================ */
/* 1025–1380px : l'illustration du panneau expertise (320px, right:200px)
   chevauchait le texte (max-width 600) → on resserre les deux. */
@media (max-width: 1380px) {
  .exp-card__text { max-width: 460px; }
  .exp-card__img { width: 280px; height: 210px; right: 120px; }
}

/* Le conteneur image du hero porte un min-height:560px EN INLINE (parade cache
   navigateur) → seul un !important peut le réduire en dessous. */
@media (max-width: 1024px) {
  .apropos-hero__visual { min-height: 420px !important; }

  /* Carte Grand-Est empilée : neutralise aussi le transform/top inline du média
     (sinon la map, translatée de -50%, sort à moitié de la carte). */
  .grandest__map {
    position: relative !important;
    transform: none !important;
    top: auto !important;
    right: auto !important;
    height: 300px !important;
    width: 100% !important;
  }
}

@media (max-width: 560px) {
  /* Encart chiffres : le min-content (3 stats + filets + gaps) dépassait 390px */
  .apropos-hero__stats { flex-wrap: wrap; gap: 14px 18px; padding: 18px 16px; }
  .apropos-hero__stat-num { font-size: 20px; }
  .apropos-hero__stat-label { font-size: 12px; }
  .apropos-hero__stat-sep { height: 40px; }

  .apropos-hero__intro { padding: 36px 24px; }
  .apropos-hero .apropos-hero__title { font-size: 24px; }
  .apropos-hero__visual { min-height: 320px !important; }

  .expertise .expertise__title,
  .team__title,
  .trust__title,
  .engage__title { font-size: 20px; }
  .expertise__desc { font-size: 14px; }
  .exp-item__label, .exp-card__title { font-size: 17px; }
  .exp-card { padding: 28px 20px; }

  .trust, .engage { padding: 0 20px; }
  .grandest__inner { padding: 0 20px; }
  .grandest__content { padding: 36px 24px; }
  .grandest__title { font-size: 24px; }
  .grandest__map { height: 220px !important; }

  .team__cta { max-width: 100%; }
}
@media (max-width: 420px) {
  .apropos-hero__stat-sep { display: none; }
  .apropos-hero__stats { justify-content: space-around; }
}

/* ============================================================
   Page « Contact »
   ============================================================ */
@media (max-width: 560px) {
  .contact-hero__inner { padding: 16px 16px 48px; }
  .contact-hero__panel { padding: 36px 20px; }
  .contact-coords__value--big { font-size: 20px; }
}

/* ============================================================
   Encart réassurance « Pourquoi Capesio » (besoins + à propos)
   ============================================================ */
@media (max-width: 1024px) {
  /* Sur À propos, le seam repasse en flux : on annule le chevauchement */
  .reassur-seam--apropos { height: auto; padding: 0 24px; }
  .reassur-seam--apropos .pourquoi__card { transform: none; }
  .team__inner { padding-bottom: 56px; }
  .apropos-after { padding-top: 48px; }
}
@media (max-width: 560px) {
  .pourquoi__panel { padding: 32px 24px; }
  .pourquoi__inner { padding: 0 16px; }
}

/* ============================================================
   Pages de contenu / légales + plan du site
   ============================================================ */
@media (max-width: 768px) {
  .site-main { padding: 40px 24px; }
  .site-main--home { padding: 0; }
}
@media (max-width: 560px) {
  .site-main { padding: 32px 20px; }
  .site-main--home { padding: 0; }
  .page-prose .page-prose__title { font-size: 26px; }
  .page-prose__body h2 { font-size: 19px; }
}

/* ============================================================
   Carrousel partenaires (partagé accueil / À propos)
   ============================================================ */
@media (max-width: 560px) {
  .partners__viewport { padding: 0 24px; }
  .partners__viewport::before, .partners__viewport::after { width: 80px; }
}

/* ============================================================
   Footer
   ============================================================ */
/* 769–1200px : la rangée haute (logo 278 + CTA 364 + tagline) débordait → wrap */
@media (max-width: 1200px) {
  .footer-top { flex-wrap: wrap; gap: 28px 48px; }
  .footer-cols { gap: 40px 48px; }
}