/* ==========================================================================
   Mathilda Tissandié — Responsive
   Mobile-first ajouté par-dessus le style de base (desktop-first overrides).
   ========================================================================== */

/* ---- Tablette ---- */
@media (max-width: 960px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
  .footer-brand { grid-column: 1 / -1; }
}

/* ---- Menu mobile ---- */
@media (max-width: 820px) {
  :root { --header-height: 84px; }
  .brand img { height: 64px; }

  .burger { display: flex; }

  .main-nav {
    position: fixed;
    inset: var(--header-height) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--blanc-casse);
    border-bottom: 1px solid var(--trait);
    padding: 12px 24px 24px;
    box-shadow: var(--shadow-soft);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--transition-base), opacity var(--transition-base), visibility var(--transition-base);
  }
  .main-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  .main-nav a.nav-link {
    padding: 14px 12px;
    border-radius: var(--radius-s);
    font-size: 17px;
  }

  /* Sur mobile, on désencombre le header : logo + burger seulement.
     Le CTA « Prendre rendez-vous » passe en bouton dans le menu déroulant. */
  .header-actions .nav-cta { display: none; }

  .main-nav .nav-cta-mobile {
    display: block;
    margin-top: 10px;
    padding: 14px 18px;
    border-radius: var(--radius-s);
    background: var(--orange);
    color: var(--blanc);
    font-weight: 700;
    font-size: 16px;
    text-align: center;
  }
  .main-nav .nav-cta-mobile:hover { background: var(--orange-profond); }
}

/* ---- Accueil : grilles ---- */
@media (max-width: 820px) {
  .hero-accueil-inner { grid-template-columns: 1fr; }
  .hero-accueil-illu { order: 0; max-width: 460px; }
  .hero-accueil-copy { max-width: none; }
}
@media (max-width: 900px) {
  .step-band { grid-template-columns: repeat(2, 1fr); }
  .consult-grid { grid-template-columns: 1fr; }
  .cta-band {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .cta-band-action { min-width: 0; }
}

@media (max-width: 680px) {
  .duo-grid { grid-template-columns: 1fr; }
}

/* ---- Qui suis-je ---- */
@media (max-width: 760px) {
  .qsj-intro {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .qsj-intro-copy .lead { margin-inline: auto; }
  .formation-grid { grid-template-columns: 1fr; }
}

/* ---- Consultations ---- */
@media (max-width: 680px) {
  .rdv-duo { grid-template-columns: 1fr; }
}

/* ---- Tarifs ---- */
@media (max-width: 860px) {
  .aide-grid { grid-template-columns: 1fr; }
}

/* ---- Contact ---- */
@media (max-width: 820px) {
  .contact-layout { grid-template-columns: 1fr; }
  .access-layout { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .price-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* ---- Petit mobile ---- */
@media (max-width: 560px) {
  body { font-size: 16px; }

  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }

  .brand .brand-name { font-size: 17px; }
  .brand .brand-role { font-size: 15px; }

  .step-band { grid-template-columns: 1fr; }
  .hero-accueil-actions .btn { flex: 1 1 auto; justify-content: center; }

  .cookie-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .cookie-actions { justify-content: center; }
}