/* =============================================================
   Coaching en Mathématiques — Adaptations responsives
   Approche « desktop-first » : la feuille style.css décrit la
   version large ; ce fichier adapte l'affichage aux écrans plus
   petits (tablette puis mobile).
   Points de rupture : 980px (tablette) et 640px (mobile).
   ============================================================= */

/* ---------- Tablette et moins (≤ 980px) ------------------- */
@media (max-width: 980px) {

  /* Navigation : bascule en menu déroulant */
  .nav-toggle {
    display: flex;
  }

  .nav__list {
    position: fixed;
    inset: 5rem 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-2) clamp(1.25rem, 4vw, 2.5rem) var(--space-3);
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    transform: translateY(calc(-100% - 6rem));
    transition: transform var(--transition);
  }

  .nav__list.is-open {
    transform: translateY(0);
  }

  .nav__link {
    width: 100%;
    padding: .9rem 0;
    border-bottom: 1px solid var(--line);
  }

  .nav__link[aria-current="page"] {
    border-bottom-color: var(--coral);
  }

  /* Hamburger animé en croix quand ouvert */
  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
  }

  /* Grilles à deux colonnes → une colonne */
  .split,
  .domains__grid,
  .approach__grid,
  .services__grid,
  .contact__grid {
    grid-template-columns: 1fr;
  }

  .domain-row {
    grid-template-columns: 1fr;
  }

  .price-trio {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Images rondes recentrées et limitées */
  .split .round-illus,
  .contact__card .round-illus {
    max-width: 280px;
    margin-inline: auto;
  }

  .domains__braces,
  .approach__illus {
    margin-inline: auto;
  }

  .services__photo {
    max-width: 480px;
    margin-inline: auto;
  }

  .approach__illus__cerveau {
	display: none !important;
  }

/* 2. Ajouter un espace après le bouton "En savoir plus" */
  .approach__grid .btn {
    margin-bottom: 2rem; /* Espace de 32px après le bouton */
    display: block;     /* S'assure que le bouton prend toute la largeur si nécessaire */
    text-align: center; /* Centrage du texte du bouton */
    margin-left: auto;  /* Centrage horizontal */
    margin-right: auto;
  }

}

/* ---------- Mobile (≤ 640px) ------------------------------ */
@media (max-width: 640px) {

  .site-header__inner {
    min-height: 4.5rem;
  }

  .nav__list {
    inset-block-start: 4.5rem;
  }

  /* Toutes les grilles de cartes en une colonne */
  .price-duo,
  .price-trio {
    grid-template-columns: 1fr;
  }

  .price-card--wide {
    width: 100%;
  }

  /* Actions et pied de page empilés */
  .form__actions,
  .page-actions,
  .site-footer__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-actions .back-home,
  .form__actions .back-home {
    margin-left: 0;
  }

  .btn {
    width: 100%;
  }

  .back-home {
    align-self: center;
    width: auto;
  }

  /* Texte justifié → aligné à gauche (meilleure lisibilité mobile) */
  .article p {
    text-align: left;
  }

  .domain-row__label {
    font-size: 1.35rem;
  }
}

/* ---------- Petit mobile (≤ 380px) ------------------------ */
@media (max-width: 380px) {
  .price-card__meta,
  .price-list {
    font-size: .82rem;
  }
}