/* ════════════════════════════════════════════
   RESPONSIVE : desktop-first, breakpoints descendants
   ════════════════════════════════════════════ */

/* ── Tablette large / petit desktop ── */
@media (max-width: 1100px) {
  #hero { padding: 0 48px 64px; }
  .section, #citation { padding: 96px 48px; }
  .pb-grid { gap: 56px; }
  .contact-grid { grid-template-columns: 1fr; gap: 56px; }
  .ref-row { grid-template-columns: 180px 1fr 200px; }
  .hero-sub-block { gap: 48px; }
}

/* ── Tablette ── */
@media (max-width: 860px) {
  /* Nav verticale → barre horizontale en haut */
  nav {
    flex-direction: row; width: 100%; height: 56px;
    top: 0; bottom: auto; padding: 0 24px;
    border-right: none; border-bottom: 1px solid var(--border);
    justify-content: space-between;
  }
  .nav-logo { writing-mode: horizontal-tb; transform: none; font-size: 12px; letter-spacing: .25em; }
  .nav-links-v { flex-direction: row; gap: 18px; }
  .nav-links-v a { writing-mode: horizontal-tb; transform: none; }
  .nav-bottom { display: none; }
  .page { margin-left: 0; padding-top: 56px; }

  /* Le fil conducteur n'a plus de sens sans la nav verticale */
  #thread-svg { display: none; }

  /* Grilles → 1 colonne */
  .pb-grid { grid-template-columns: 1fr; }
  .methode-steps { grid-template-columns: 1fr; }
  .pbx-grid { grid-template-columns: repeat(2, 1fr); }

  /* Références : passage en cards empilées */
  .ref-row { grid-template-columns: 1fr; }
  .ref-l, .ref-c { border-right: none; }
  .ref-l { border-bottom: 1px solid var(--border); padding: 28px 28px 20px; }
  .ref-r { padding: 20px 28px 28px; justify-content: flex-start; }

  .hero-measure { display: none; }
}

/* ── Mobile ── */
@media (max-width: 560px) {
  html { font-size: 15px; }

  /* Nav : la barre doit tenir sur 375px sans rogner "Contact" */
  nav { padding: 0 16px; }
  .nav-logo { font-size: 11px; letter-spacing: .18em; }
  .nav-links-v { gap: 13px; }
  .nav-links-v a { font-size: 8px; letter-spacing: .14em; }

  /* Titre hero : le min de 68px déborde sur mobile */
  .hero-w1, .hero-w2, .hero-w3 { font-size: clamp(40px, 12.5vw, 64px); }

  #hero { padding: 0 24px 48px; }
  .hero-main { padding-top: 56px; }
  .hero-tag { margin-bottom: 32px; }
  .hero-w2 { margin-left: 0; }
  .hero-sub-block { grid-template-columns: 1fr; gap: 32px; }
  .hero-cta-block { text-align: left; }
  .btn-hc { display: block; text-align: center; }

  .section, #citation { padding: 72px 24px; }
  .s-num { margin-bottom: 36px; }
  .pb-grid, .pb-list { margin-top: 48px; }
  .methode-steps { margin-top: 48px; }
  .m-step { padding: 36px 28px; }

  .pbx-grid { grid-template-columns: 1fr; }
  .cf-row { grid-template-columns: 1fr; }
  .cf-field { border-right: none; }
  .cf-foot { flex-direction: column; align-items: flex-start; gap: 20px; }
  .btn-submit { width: 100%; text-align: center; }

  footer { flex-direction: column; gap: 12px; align-items: flex-start; padding: 32px 24px; }
}

/* ── Tactile : pas de curseur custom, restaurer le curseur natif ── */
@media (hover: none), (pointer: coarse) {
  body { cursor: auto; }
  #tailor-cur { display: none; }
  .btn-hc, .btn-submit, .ref-row, .coord-item,
  .cf-field input, .cf-field textarea, a, button { cursor: pointer; }
}