/* =====================================================================
   responsive.css — Points de rupture
   Toutes les media queries réunies ici pour ajuster le responsive
   depuis un seul fichier. Charger EN DERNIER.
   ===================================================================== */

/* Tablette / petit portable ------------------------------------------- */
@media (max-width: 900px) {
  /* Deux colonnes -> une seule (Parcours, Contact) */
  .split { grid-template-columns: 1fr; gap: 48px; }
  .split__aside { position: static; }

  /* Hero : titre -> photo -> texte, empilés */
  .hero__grid { grid-template-columns: 1fr; align-items: start; row-gap: 36px; }
  .hero__head   { grid-column: 1; grid-row: 1; }
  .hero__figure { grid-column: 1; grid-row: 2; height: auto; max-width: 340px; }
  .hero__body   { grid-column: 1; grid-row: 3; }

  /* Navbar -> menu mobile */
  .nav__toggle { display: flex; }
  .nav__links {
    position: fixed;
    inset: 74px 0 auto 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 24px var(--gutter) 32px;
    background: var(--ink);
    border-bottom: 1px solid var(--ink-rule);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
  }
  .nav.is-open .nav__links { transform: none; opacity: 1; pointer-events: auto; }
  .nav__links a { padding-block: 12px; font-size: 1.05rem; }
  .nav__cta { margin-top: 8px; }
}

/* Méthode : les zones s'empilent, la photo reste unique --------------- */
@media (max-width: 820px) {
  .approach__steps { grid-template-columns: 1fr; }
  /* Le filet séparateur bascule à l'horizontale, toujours plus court que
     la largeur de l'image. */
  .approach__step + .approach__step::before {
    top: 0;
    bottom: auto;
    left: 12%;
    right: 12%;
    width: auto;
    height: 1px;
  }
  /* Empilés, les blocs n'ont plus à remplir une hauteur de colonne : le
     texte se cale au centre de sa zone au lieu de tomber tout en bas. */
  .approach__panel {
    min-height: 0;
    justify-content: center;
    padding-block: clamp(26px, 6.5vw, 36px);
  }
  /* La section devient bien plus haute qu'elle n'est large : la photo est
     très recadrée et le dégradé s'étire. On le resserre pour garder le
     même contraste sous chaque bloc de texte. */
  .approach::before {
    background-image:
      linear-gradient(to bottom, rgba(11, 11, 12, 0.66) 0%, rgba(11, 11, 12, 0.58) 30%, rgba(11, 11, 12, 0.82) 100%),
      url("../img/approach/ecoute.webp");
  }
}

/* Réalisations : la pile de cartes passe en une colonne (pile au-dessus,
   texte en dessous) dès que la place manque pour les deux côte à côte. */
@media (max-width: 860px) {
  .cases-deck { grid-template-columns: 1fr; gap: 32px; }
  .cases-deck__stage { height: clamp(260px, 60vw, 320px); }
}

@media (max-width: 480px) {
  .case-card { width: min(340px, 90vw); }
}

/* Mobile ----------------------------------------------------------- */
@media (max-width: 560px) {
  .path__row { grid-template-columns: 1fr; gap: 10px; }
  .hero__actions { flex-direction: column; align-items: stretch; gap: 14px; }
  .btn { width: 100%; }
  .btn-beam { width: 100%; }
  .footer__inner { flex-direction: column; align-items: flex-start; }
}

/* Fond du hero : le flou fixe de desktop noie les faisceaux sur un petit
   écran (proportionnellement bien plus fort) ; on le réduit pour qu'ils
   restent visibles. */
@media (max-width: 600px) {
  .hero__beams { filter: blur(9px); }
}

/* Contact : texte plus compact sur mobile ----------------------------- */
@media (max-width: 640px) {
  #contact { padding-block: clamp(48px, 12vw, 72px); }

  #contact .section__title {
    font-size: clamp(1.5rem, 6.5vw, 1.9rem);
    margin-bottom: 0;
  }
  #contact .section__note {
    font-size: 0.92rem;
    margin-top: 14px;
  }

  .contact__mail { font-size: 1.2rem; margin-top: 24px; }
}

/* 404 : en paysage sur mobile, la hauteur d'écran est trop faible pour un
   chiffre à 21vw — on rend la main à la hauteur naturelle du contenu. */
@media (max-height: 520px) and (orientation: landscape) {
  .nf { padding-block: clamp(28px, 6vh, 48px); }
  .nf__code { font-size: clamp(3.5rem, 13vh, 6rem); }
}

/* Mouvement réduit ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }

  /* Le faisceau du bouton secondaire tourne en continu : sans cela la durée
     d'animation écrasée ci-dessus le ferait stroboscoper. On revient à la
     bordure fixe. */
  .btn-beam::before { animation: none !important; opacity: 0; }
  .btn-beam--ghost::after { opacity: 1; }
}