/* ============================================================
   The Stellina Registry — surcouche mobile
   Chargée après le <style> de chaque page : elle ne fait
   qu'ajouter des règles sous 860 px. Le desktop est inchangé.
   Un seul fichier à retoucher pour les 29 pages.
   ============================================================ */

/* Le bouton du menu n'existe que sur mobile. */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0; background: none;
  cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 5px;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 2px;
  background: var(--gold, #C9A050);
  transition: transform .2s ease, opacity .15s ease;
}
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Rien ne doit dépasser la largeur de l'écran. */
img, video, iframe { max-width: 100%; }

/* Un tableau large défile horizontalement au lieu d'élargir la page.
   min-width:0 est indispensable : sans lui, l'élément de grille qui le
   contient s'élargit au contenu et le téléphone dézoome la page entière. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; max-width: 100%; }
.main > *, .chassis-body > *, .contact-wrap > *, .hero-inner > *, .grid-wrap > * { min-width: 0; }


/* ══════════════════════════════════════════════════════════
   ≤ 860 px — le menu passe en panneau, tout passe en colonne
   ══════════════════════════════════════════════════════════ */
@media (max-width: 860px) {

  html { -webkit-text-size-adjust: 100%; }

  /* ─── Barre haute ─── */
  .topbar .wrap { padding: 0 16px; }
  .nav-toggle { display: flex; }

  .topbar nav {
    position: fixed; top: 60px; left: 0; right: 0; bottom: 0;
    z-index: 99;
    background: var(--navy, #1C2B4A);
    padding: 6px 20px 40px;
    overflow-y: auto;
    opacity: 0; visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  body.nav-open .topbar nav { opacity: 1; visibility: visible; transform: none; }
  body.nav-open { overflow: hidden; }

  .topbar nav ul { flex-direction: column; gap: 0; }
  .topbar nav li { border-bottom: 1px solid rgba(255,255,255,.10); }
  .topbar nav a {
    display: block;
    padding: 19px 2px;
    font-size: 15px; letter-spacing: .18em;
    color: rgba(255,255,255,.72);
    border-bottom: 0;
  }
  .topbar nav a.active {
    color: var(--gold, #C9A050);
    box-shadow: inset 3px 0 0 var(--gold, #C9A050);
    padding-left: 14px;
  }

  /* ─── Accueil ─── */
  .hero { padding: 42px 18px 38px; }
  .hero-inner { grid-template-columns: 1fr; gap: 26px; }
  .hero h1 { font-size: clamp(42px, 13vw, 68px); margin-bottom: 18px; }
  .hero-eyebrow { font-size: 11px; letter-spacing: .24em; margin-bottom: 14px; }
  .hero-lede { font-size: 17px; }

  .stats-inner { display: grid; grid-template-columns: 1fr 1fr; }
  .stat {
    padding: 16px 12px;
    border-right: 3px solid var(--line, #DDD0BA);
    border-bottom: 3px solid var(--line, #DDD0BA);
  }
  .stats-inner .stat:nth-child(2n) { border-right: none; }
  .stats-inner .stat:last-child { border-bottom: none; }
  .stats-inner .stat:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: none; }
  .stat .n { font-size: 34px; }
  .stat .l { font-size: 10px; letter-spacing: .14em; }

  .main { grid-template-columns: 1fr; gap: 34px; padding: 36px 18px 46px; }
  .phases { grid-template-columns: 1fr; margin-top: 30px; padding-top: 26px; }
  .intro h2 { font-size: 31px; }
  .intro p:first-of-type::first-letter { font-size: 58px; padding: 8px 11px 0 0; }

  /* ─── En-têtes de page ─── */
  .page-header { padding: 34px 18px 28px; }
  .page-header .wrap { flex-direction: column; align-items: flex-start; gap: 12px; }
  .page-header h1 { font-size: 40px; }
  .page-header .lede { font-size: 17px; }
  .page-header-meta { text-align: left; }

  /* ─── Registry ─── */
  .filter-bar { padding: 10px 0 10px 16px; }
  .filter-wrap {
    flex-wrap: nowrap;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-right: 16px;
  }
  .filter-wrap::-webkit-scrollbar { display: none; }
  /* Dégradé en bord droit : rappelle que la bande continue hors écran. */
  .filter-bar { position: sticky; }
  .filter-bar::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 34px;
    background: linear-gradient(90deg, rgba(255,255,255,0), #fff 78%);
    pointer-events: none;
  }
  .filter-wrap > * { flex: 0 0 auto; }
  .filter-btn { padding: 9px 14px; font-size: 12px; }

  .grid-wrap { padding: 22px 16px 48px; }
  .car-grid { grid-template-columns: 1fr; }
  /* Sans survol possible, les flèches de photo doivent rester visibles. */
  .card-arrow { opacity: 1; width: 38px; height: 38px; }
  .card-photo-counter { opacity: 1; }
  .car-info { padding: 15px 16px 17px; }
  .car-footer { flex-wrap: wrap; gap: 8px; }
  .unidentified-section { padding: 0 16px 48px; }

  /* ─── Technical, History, Press, Market ─── */
  .main, article { padding-left: 18px; padding-right: 18px; }
  article { padding-top: 36px; padding-bottom: 48px; }
  .phase-toggle { padding: 12px 18px; }
  .phase-toggle .inner { flex-wrap: wrap; gap: 8px; }
  figure { margin: 26px 0; }
  figure.fig-pair { grid-template-columns: 1fr; }
  .stats .stat { flex: 1 1 44%; }
  .range-cards { grid-template-columns: 1fr; }

  /* Table de spécifications : le libellé passe au-dessus de la valeur. */
  .spec-table, .spec-table tbody, .spec-table tr, .spec-table td { display: block; width: 100%; }
  .spec-table tr { border-bottom: 3px solid var(--line, #DDD0BA); }
  .spec-table td:first-child {
    width: 100%;
    padding: 10px 14px 6px;
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  }
  .spec-table td:last-child { padding: 0 14px 13px; font-size: 17px; }

  /* Table des enchères : trop de colonnes pour être empilée, elle défile. */
  .auction-table { min-width: 560px; }

  /* ─── Contact ─── */
  .contact-wrap { grid-template-columns: 1fr; gap: 34px; padding: 34px 18px 48px; }
  /* 16 px minimum : en dessous, iOS zoome tout seul à la saisie. */
  .form-input, .form-select, .form-textarea { font-size: 16px; }

  /* ─── Fiches de châssis ─── */
  .chassis-hero { padding: 28px 18px 24px; }
  .chassis-num { font-size: 32px; }
  .chassis-sub { flex-wrap: wrap; gap: 6px 14px; font-size: 15px; }

  .chassis-nav { padding: 0 14px; }
  .chassis-nav-inner { height: auto; padding: 9px 0; gap: 10px; }
  .chassis-nav-btn { padding: 9px 12px; font-size: 10px; }
  .chassis-nav-pos { font-size: 9px; }

  .carousel-section { padding: 18px 14px; }
  .carousel-inner { grid-template-columns: 1fr; gap: 10px; }
  .carousel-stage { aspect-ratio: 4 / 3; }
  .carousel-caption { font-size: 12px; }
  /* La hauteur de la colonne de vignettes est posée en ligne par le script
     de la page : on la neutralise pour en faire une bande horizontale. */
  .carousel-thumbs-wrap { height: auto !important; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  .carousel-thumbs { flex-direction: row; gap: 8px; }
  .carousel-thumb { flex: 0 0 74px; width: 74px; border-width: 3px; }

  .chassis-body { grid-template-columns: 1fr; gap: 32px; padding: 32px 18px 48px; }
  .fields-grid { grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 30px; }
  .timeline-item { grid-template-columns: 1fr; gap: 3px; }
  .timeline-year { font-size: 13px; }

  /* ─── Pied de page ─── */
  footer .wrap { flex-direction: column; align-items: flex-start; gap: 15px; padding: 28px 18px; }
  .footer-links { flex-wrap: wrap; gap: 12px 20px; }
  .footer-sister { gap: 10px 14px; padding-left: 18px; padding-right: 18px; }
}


/* ══════════════════════════════════════════════════════════
   ≤ 560 px — téléphones : on desserre la typographie
   ══════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  body { font-size: 18px; line-height: 1.62; }
  .hero h1 { font-size: clamp(38px, 12.5vw, 54px); }
  .hero-lede, .intro p { font-size: 17px; }
  .page-header h1 { font-size: 33px; }
  .chassis-num { font-size: clamp(24px, 8vw, 32px); }
  .breadcrumb { font-size: 10px; letter-spacing: .12em; }
  .intro h2 { font-size: 27px; }
  .intro p:first-of-type::first-letter { font-size: 50px; }
  .fields-grid { grid-template-columns: 1fr; gap: 14px; }
  .stat .n { font-size: 30px; }
  .brochure-grid, .article-list { grid-template-columns: 1fr; }
  .chassis-nav-btn { font-size: 9.5px; letter-spacing: .1em; padding: 9px 10px; }
}