/* =====================================================================
   Vallemont — main stylesheet (WordPress build).
   Layered on top of colors_and_type.css. Mirrors the 5-section ARBO-SITE.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--vm-black); color: var(--vm-bone); font-family: var(--font-serif); overflow-x: clip; }
::selection { background: var(--vm-marine); color: var(--vm-bone); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---------- Shared primitives ---------- */
.vm-eyebrow {
  font-family: var(--font-display); font-size: 11px; font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase; color: inherit;
}
.tricolore { display: inline-flex; align-items: center; gap: 36px; }
.bar { display: inline-block; width: 60px; height: 2px; flex-shrink: 0; }
.bar.marine    { background: var(--vm-marine); }
.bar.bourgogne { background: var(--vm-bourgogne); }

/* ---------- Button ---------- */
.vm-btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 28px; background: transparent;
  color: var(--vm-bone); border: 1px solid var(--vm-bone);
  font-family: var(--font-display); font-size: 12px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; border-radius: 0;
  transition:
    background var(--dur-base) var(--ease-mech),
    color var(--dur-base) var(--ease-mech);
}
.vm-btn:hover { background: var(--vm-bone); color: var(--vm-black); }
.vm-btn .arrow { transition: transform var(--dur-base) var(--ease-mech); }
.vm-btn:hover .arrow { transform: translateX(4px); }
.vm-btn.light { color: var(--vm-black); border-color: var(--vm-black); }
.vm-btn.light:hover { background: var(--vm-black); color: var(--vm-bone); }
.vm-btn:focus-visible { outline: 1px solid var(--vm-marine); outline-offset: 2px; }

/* ---------- NAV ---------- */
.vm-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  height: 176px; padding: 0 64px 0 0;
  background: rgba(10,10,10,0.72);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--vm-line-dark);
}
.vm-nav .logo { display: inline-flex; align-items: center; padding-left: 24px; }
.vm-nav .logo img,
.vm-nav .custom-logo,
.vm-nav .custom-logo-link img { height: 150px; width: auto; max-width: 100%; object-fit: contain; }
.vm-nav .vm-primary { display: flex; align-items: center; }
.vm-nav .vm-menu {
  display: flex; gap: 36px;
  margin: 0; padding: 0; list-style: none;
}
.vm-nav .vm-menu-item { position: relative; }

/* Top-level label — same style for <a> and <button> triggers */
.vm-nav .vm-menu-link,
.vm-nav .vm-menu-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 0; padding: 0 0 4px;
  font-family: var(--font-display); font-size: 11px; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--vm-bone);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: border-color 220ms var(--ease-mech);
}
.vm-nav .vm-menu-link:hover,
.vm-nav .vm-menu-link.is-active,
.vm-nav .vm-menu-trigger:hover,
.vm-nav .vm-menu-trigger[aria-expanded="true"] { border-bottom-color: var(--vm-bone); }
.vm-nav .vm-menu-chev {
  font-size: 9px; line-height: 1;
  transition: transform 260ms var(--ease-mech);
}
.vm-nav .vm-menu-trigger[aria-expanded="true"] .vm-menu-chev { transform: rotate(180deg); }

/* Parent items that also link to a homepage section — ORDINATEUR UNIQUEMENT.
   Le libellé devient un vrai lien (ancre vers l'accueil) et un chevron compact
   ouvre le sous-menu. Sur tablette/téléphone (≤820px) l'accordéon bouton+libellé
   reprend la main (voir le bloc @media max-width:820px). */
/* ≥1401px : la nav inline horizontale du desktop (le menu burger prend le relais
   jusqu'à 1400px, donc ces styles ne doivent PAS fuiter dans le menu tablette). */
@media (min-width: 1401px) {
  .vm-nav .vm-menu { align-items: baseline; }
  .vm-nav .vm-menu-item.has-anchor { display: inline-flex; align-items: baseline; gap: 4px; }
  .vm-nav .vm-menu-item.has-anchor .vm-menu-trigger { padding: 0 0 4px; border-bottom-color: transparent; }
  .vm-nav .vm-menu-item.has-anchor .vm-menu-trigger:hover,
  .vm-nav .vm-menu-item.has-anchor .vm-menu-trigger[aria-expanded="true"] { border-bottom-color: transparent; }
  .vm-nav .vm-menu-item.has-anchor .vm-menu-trigger .vm-menu-label { display: none; }
}

/* ---------- Submenu panel (desktop dropdown) ----------
   The visual breathing room (12 px) lives INSIDE the submenu via padding,
   so the hoverable area is contiguous with the parent button — no dead
   zone where the cursor would lose :hover state between them. */
.vm-nav .vm-submenu {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 260px;
  margin-top: 0;
  background: rgba(10,10,10,0.95);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--vm-line-dark);
  padding: 12px 0;
  opacity: 0; pointer-events: none;
  transition: opacity 220ms var(--ease-mech), transform 220ms var(--ease-mech);
  z-index: 60;
}
.vm-nav .vm-submenu[hidden] { display: block; } /* keep markup hidden semantically but visible via aria-expanded */
.vm-nav .vm-menu-trigger[aria-expanded="true"] + .vm-submenu,
.vm-nav .vm-menu-item:hover .vm-submenu,
.vm-nav .vm-menu-item:focus-within .vm-submenu {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.vm-nav .vm-submenu ul {
  list-style: none; margin: 0; padding: 0;
}
.vm-nav .vm-submenu a {
  display: block; padding: 10px 24px;
  font-family: var(--font-display); font-size: 11px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--vm-bone);
  transition: background 220ms;
}
.vm-nav .vm-submenu a:hover { background: rgba(255,255,255,0.05); }
.vm-nav .vm-submenu-item.is-group > a { color: var(--vm-bone); }
.vm-nav .vm-submenu-sub {
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin: 4px 0;
}
.vm-nav .vm-submenu-sub a {
  padding-left: 40px;
  color: var(--vm-platinum);
  letter-spacing: 0.18em;
  font-size: 10px;
}
.vm-nav .vm-submenu-sub a:hover { color: var(--vm-bone); }

/* Tricolore footer — only shown inside the mobile drawer */
.vm-nav .vm-nav-tricolore { display: none; }

/* ---------- BURGER (mobile only) ---------- */
.vm-nav-burger {
  display: none; position: relative;
  width: 36px; height: 36px;
  background: transparent; border: 0; padding: 0;
  cursor: pointer; z-index: 60;
}
.vm-nav-burger span {
  position: absolute; left: 6px; right: 6px;
  height: 1.5px; background: var(--vm-bone);
  transition: transform 260ms var(--ease-mech), top 260ms var(--ease-mech);
}
.vm-nav-burger span:nth-child(1) { top: 14px; }
.vm-nav-burger span:nth-child(2) { top: 21px; }
.vm-nav-burger[aria-expanded="true"] span:nth-child(1) { top: 17.5px; transform: rotate(45deg); }
.vm-nav-burger[aria-expanded="true"] span:nth-child(2) { top: 17.5px; transform: rotate(-45deg); }
.vm-nav-burger:focus-visible { outline: 1px solid var(--vm-marine); outline-offset: 4px; }

/* ---------- HERO ---------- */
.vm-hero {
  position: relative; height: 100vh; min-height: 720px;
  background: var(--vm-black); color: var(--vm-bone); overflow: hidden;
}
.vm-hero .bg { position: absolute; inset: 0; }
.vm-hero .bg .mecanisme {
  width: 100%; height: 100%; object-fit: cover; object-position: left center;
  filter: contrast(1.08) brightness(0.55) saturate(0.85);
}
.vm-hero .bg .packshot {
  position: absolute; right: auto; left: auto; top: 50%; transform: translateY(-55%) translateX(20%);
  height: 100%; width: auto; object-fit: contain;
  filter: drop-shadow(0 40px 80px rgba(0,0,0,0.7));
}
.vm-hero .scrim-h { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.7) 35%, rgba(10,10,10,0.2) 100%); }
.vm-hero .scrim-v { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,0) 60%, rgba(10,10,10,0.85) 100%); }
.vm-hero .corner {
  position: absolute; top: 110px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--vm-platinum);
}
.vm-hero .corner.left  { left: 64px; }
.vm-hero .corner.right { right: 64px; }
.vm-hero .main { position: absolute; left: 96px; right: 96px; bottom: 96px; max-width: 1100px; }
.vm-hero .main .vm-eyebrow { margin-bottom: 28px; display: block; }
.vm-hero h1 {
  font-family: var(--font-display); font-size: 132px; font-weight: 500;
  letter-spacing: 0; line-height: 0.88; text-transform: uppercase; margin: 0;
}
.vm-hero h1 em {
  font-family: var(--font-serif); font-style: italic; font-weight: 300;
  text-transform: none; letter-spacing: -0.01em; color: var(--vm-platinum);
}
.vm-hero .lead-row { margin-top: 32px; }
.vm-hero .lead-row .tricolore { gap: 28px; }
.vm-hero .lead-row .lead {
  font-family: var(--font-serif); font-style: italic; font-weight: 300;
  color: var(--vm-bone); max-width: 600px; line-height: 1.4;
  text-align: center;
}
.vm-hero .lead-row .lead .lead-1 { font-size: 32px; }
.vm-hero .lead-row .lead .lead-2 { font-size: 22px; }
.vm-hero .cta-row { margin-top: 48px; display: flex; gap: 20px; }

/* ---------- Generic section frame ---------- */
section { background: var(--vm-black); color: var(--vm-bone); }
.sect { padding: 144px 64px; border-top: 1px solid rgba(255,255,255,0.18); }

/* ---------- Intro éditoriale (sous le hero) — gabarit 2 colonnes (« vision ») ---------- */
.vm-intro { padding: 160px 64px; border-top: 1px solid rgba(255,255,255,0.18); }
.vm-intro__inner {
  max-width: 1480px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.6fr; gap: 96px; align-items: center;
}
.vm-intro__tag {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--vm-steel); margin-bottom: 28px;
}
.vm-intro__title {
  font-family: var(--font-display); font-size: 72px; font-weight: 500;
  line-height: 0.96; letter-spacing: 0; text-transform: uppercase;
  margin: 0; color: var(--vm-bone);
}
.vm-intro__title em {
  font-family: var(--font-serif); font-style: italic; font-weight: 300;
  text-transform: none; letter-spacing: -0.01em; color: var(--vm-platinum);
}
.vm-intro__lead {
  font-family: var(--font-serif); font-style: italic; font-weight: 300;
  font-size: 26px; line-height: 1.45; color: var(--vm-bone);
  margin: 0 0 36px; max-width: 720px;
}
.vm-intro__text {
  font-family: var(--font-serif); font-weight: 400; font-size: 18px;
  line-height: 1.7; color: var(--vm-platinum); margin: 0 0 20px; max-width: 680px;
}
.vm-intro__text:last-of-type { margin-bottom: 0; }
.vm-intro__marker { display: flex; gap: 12px; margin-top: 48px; align-items: center; }
.vm-intro__marker .label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--vm-steel); white-space: nowrap;
}
.vm-intro__marker .line { flex: 1; height: 1px; background: rgba(255,255,255,0.18); }
/* <strong> = signal sémantique SEO uniquement, sans emphase visuelle. */
.vm-intro strong { font-weight: inherit; color: inherit; }
/* Retour à la ligne visible uniquement en mobile. */
.vm-br-mobile { display: none; }
@media (max-width: 768px) {
  .vm-br-mobile { display: inline; }
}
/* Localisation du sous-titre hero (Histoire) masquée en mobile. */
@media (max-width: 768px) {
  .vm-hero-loc { display: none; }
}

@media (max-width: 900px) {
  .vm-intro { padding: 80px 22px; }
  .vm-intro__inner { grid-template-columns: 1fr; gap: 40px; }
  .vm-intro__title { font-size: 44px; }
  .vm-intro__lead { font-size: 21px; }
  .vm-intro__text { font-size: 16px; }
}
.sect-h {
  display: flex; justify-content: space-between; align-items: flex-end;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  padding-bottom: 36px; margin-bottom: 64px;
}
.sect-h h1,
.sect-h h2 {
  font-family: var(--font-display); font-size: 84px; font-weight: 500;
  line-height: 0.96; letter-spacing: 0; text-transform: uppercase; margin: 0;
  white-space: nowrap;
}
.sect-h .aside-lead {
  font-family: var(--font-serif); font-style: italic; font-weight: 300;
  font-size: 22px; color: var(--vm-platinum); line-height: 1.4;
  white-space: nowrap;
}
/* Croix de Savoie en guise de point final : croix d'argent traversante
   (jusqu'aux bords) sur fond rouge, liseré noir — 4 carrés rouges aux angles. */
.vm-croix {
  display: inline-block;
  width: 0.18em; height: 0.18em;
  margin-left: 0.08em;
  vertical-align: baseline;
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Crect%20width='100'%20height='100'%20fill='%23fff'/%3E%3Cg%20fill='%23E30613'%20stroke='%23000'%20stroke-width='2'%3E%3Crect%20x='1'%20y='1'%20width='37'%20height='37'/%3E%3Crect%20x='62'%20y='1'%20width='37'%20height='37'/%3E%3Crect%20x='1'%20y='62'%20width='37'%20height='37'/%3E%3Crect%20x='62'%20y='62'%20width='37'%20height='37'/%3E%3C/g%3E%3Crect%20x='1'%20y='1'%20width='98'%20height='98'%20fill='none'%20stroke='%23000'%20stroke-width='2'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
/* Nos Créations : lead aligné à droite */
#nos-horloges .sect-h {
  justify-content: space-between;
  gap: 50px;
}
.sect-h .more {
  font-family: var(--font-display); font-size: 11px; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--vm-bone);
  border-bottom: 1px solid var(--vm-bone); padding-bottom: 4px;
}

/* ---------- NOS Créations ---------- */
.collection-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid rgba(255,255,255,0.18);
}
.collection-card {
  position: relative;
  cursor: pointer;
  padding: 48px 36px 56px;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  transition: background var(--dur-base);
  /* Colonne flex : le pied (Composants/Découvrir) est poussé en bas, donc tous
     les pieds s'alignent quelle que soit la longueur du texte (utile en tablette,
     colonnes étroites où les accroches se répartissent sur un nombre de lignes différent). */
  display: flex;
  flex-direction: column;
}
/* Toute la carte est cliquable : le lien « Découvrir » est étendu en overlay. */
.collection-card .discover::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.collection-grid .collection-card:not(:last-child) {
  border-right: 1px solid rgba(255,255,255,0.18);
}
.collection-card:hover { background: rgba(255,255,255,0.03); }
.collection-card .title {
  font-family: var(--font-display); font-size: 56px; font-weight: 500;
  letter-spacing: 0; text-transform: uppercase; color: var(--vm-bone);
  margin: 36px 0 0;
}
.collection-card .product-subtitle {
  font-family: var(--font-display); font-size: 12px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--vm-steel);
  margin: 14px 0 0;
}
.collection-card .lead {
  font-family: var(--font-serif); font-style: italic; font-weight: 300;
  font-size: 19px; line-height: 1.5; color: var(--vm-platinum);
  max-width: 340px; margin-top: 24px;
}
.collection-card .foot { display: flex; align-items: flex-end; justify-content: space-between; margin-top: auto; padding-top: 56px; }
.collection-card .count-label {
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--vm-steel);
}
.collection-card .count {
  font-family: var(--font-display); font-size: 32px; font-weight: 500;
  color: var(--vm-bone); margin-top: 4px;
}
.collection-card .discover {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 11px; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--vm-bone);
  border-bottom: 1px solid var(--vm-bone); padding-bottom: 4px;
}
.collection-card .discover .arrow { transition: transform var(--dur-base) var(--ease-mech); }

/* Nos Créations — bouton « Demander la brochure » sous la grille */
.collection-cta { display: flex; justify-content: center; margin-top: 56px; }

/* Nos Créations — micro-animations au survol (ordinateur uniquement).
   Proportions inchangées : pas d'élargissement des colonnes, juste un trait
   qui se trace en haut de la carte + la flèche « Découvrir » qui glisse.
   Repris de l'effet des panneaux VM 1.1 / VM 1.2 (page Aéronef). */
@media (hover: hover) and (min-width: 1101px) {
  .collection-card { position: relative; }
  .collection-card::before {
    content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px;
    background: var(--vm-bone); transform: scaleX(0); transform-origin: left;
    transition: transform var(--dur-base) var(--ease-mech);
  }
  .collection-card:hover::before { transform: scaleX(1); }
  .collection-card:hover .discover .arrow { transform: translateX(6px); }
}

/* ---------- PRODUCT ---------- */
.product { background: var(--vm-black); color: var(--vm-bone); }
.product .grid { display: grid; grid-template-columns: 1fr 1.05fr; min-height: 720px; }
.product .photo { position: relative; background: var(--vm-black); overflow: hidden; }
.product .photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.25) contrast(1.05) brightness(0.85); }
.product .photo .caption {
  position: absolute; left: 32px; bottom: 32px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--vm-platinum);
}
.product .copy { padding: 120px 96px; display: flex; flex-direction: column; justify-content: center; max-width: 720px; }
.product .copy h2 {
  font-family: var(--font-display); font-size: 96px; font-weight: 500;
  line-height: 0.94; letter-spacing: 0; text-transform: uppercase; margin: 0;
}
.product .copy .bars { margin: 32px 0; display: flex; gap: 32px; }
.product .copy .lead {
  font-family: var(--font-serif); font-style: italic; font-weight: 300;
  font-size: 26px; line-height: 1.4; color: var(--vm-bone);
  margin: 0 0 28px; max-width: 520px;
}
.product .copy p {
  font-family: var(--font-serif); font-weight: 400; font-size: 17px;
  line-height: 1.65; color: var(--vm-platinum);
  margin: 0 0 16px; max-width: 520px;
}
.product .copy p:last-of-type { margin-bottom: 40px; }
.product .copy .specs {
  border-top: 1px solid rgba(255,255,255,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.18);
  padding: 24px 0; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px; margin-bottom: 40px;
}
.product .copy .specs > div { text-align: center; }
.product .copy .specs .k {
  font-family: var(--font-display); font-size: 10px; font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--vm-steel);
}
.product .copy .specs .v {
  font-family: var(--font-display); font-size: 22px; font-weight: 500; margin-top: 6px;
}
.product .copy .cta { display: flex; gap: 20px; }

/* ---------- QUOTE BAND ---------- */
.quote-band {
  padding: 144px 96px;
  border-top: 1px solid var(--vm-line-dark);
  border-bottom: 1px solid var(--vm-line-dark);
}
.quote-band .inner { max-width: 1100px; margin: 0 auto; }
.quote-band blockquote {
  font-family: var(--font-serif); font-style: italic; font-weight: 300;
  font-size: 56px; line-height: 1.2; color: var(--vm-bone); margin: 0;
}
.quote-band .attrib { margin-top: 48px; display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; }
.quote-band .attrib .label {
  font-family: var(--font-display); font-size: 11px; font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--vm-platinum);
}

/* ---------- TEMPS & ART (clôture accueil) ---------- */
.vm-temps-art {
  padding: 144px 96px;
  border-top: 1px solid var(--vm-line-dark);
  border-bottom: 1px solid var(--vm-line-dark);
  text-align: center;
}
.vm-temps-art .inner { max-width: 980px; margin: 0 auto; }
.vm-temps-art .eyebrow {
  font-family: var(--font-display); font-size: 11px; font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--vm-steel);
  margin-bottom: 28px;
}
.vm-temps-art h2 {
  font-family: var(--font-display); font-size: 72px; font-weight: 500;
  line-height: 1.0; letter-spacing: 0; text-transform: uppercase;
  color: var(--vm-bone); margin: 0;
}
.vm-temps-art h2 em {
  display: block; font-family: var(--font-serif); font-style: italic;
  font-weight: 300; text-transform: none; color: var(--vm-platinum);
}
.vm-temps-art .lead {
  font-family: var(--font-serif); font-style: italic; font-weight: 300;
  font-size: 24px; line-height: 1.5; color: var(--vm-bone);
  max-width: 680px; margin: 36px auto 48px;
}
.vm-temps-art .ctas { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }

/* ---------- MANUFACTURE ---------- */
.manufacture { padding: 144px 96px; }
.manufacture .grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 96px; align-items: flex-start; }
.manufacture h2 {
  font-family: var(--font-display); font-size: 84px; font-weight: 500;
  line-height: 0.96; letter-spacing: 0; text-transform: uppercase; margin: 0;
}
.manufacture .bars { margin-top: 36px; display: flex; gap: 32px; }
.manufacture .lead {
  font-family: var(--font-serif); font-style: italic; font-weight: 300;
  font-size: 26px; line-height: 1.45; color: var(--vm-bone);
  margin: 0 0 28px; max-width: 580px;
}
.manufacture .body {
  font-family: var(--font-serif); font-weight: 400; font-size: 17px;
  line-height: 1.65; color: var(--vm-platinum); margin: 0; max-width: 580px;
}
.manufacture .meta { margin-top: 64px; border-top: 1px solid rgba(255,255,255,0.18); }
.manufacture .meta .row {
  display: grid; grid-template-columns: 80px 240px 1fr;
  padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,0.18);
  align-items: baseline;
}
.manufacture .meta .num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--vm-steel); }
.manufacture .meta .label { font-family: var(--font-display); font-size: 16px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vm-bone); }
.manufacture .meta .body-sm { font-family: var(--font-serif); font-size: 16px; color: var(--vm-platinum); line-height: 1.5; }

/* ---------- LES CARNETS ---------- */
.carnets .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid rgba(255,255,255,0.18); }
.carnets article { padding: 48px 36px; border-bottom: 1px solid rgba(255,255,255,0.18); }
.carnets .grid article:first-child { border-right: 1px solid rgba(255,255,255,0.18); }
.carnets .meta-row {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--vm-steel);
}
.carnets .news-title {
  font-family: var(--font-display); font-size: 38px; font-weight: 500;
  line-height: 1; text-transform: uppercase; margin: 36px 0 18px;
}
.carnets .news-lead {
  font-family: var(--font-serif); font-style: italic; font-weight: 300;
  font-size: 19px; line-height: 1.5; color: var(--vm-platinum); max-width: 460px;
}

/* ---------- GALERIE ---------- */
.galerie .sect-h { margin-bottom: 36px; }
.galerie .filters {
  display: flex; gap: 28px;
  font-family: var(--font-display); font-size: 11px; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--vm-platinum);
}
.galerie .filters .is-active { border-bottom: 1px solid var(--vm-bone); color: var(--vm-bone); padding-bottom: 4px; }
.galerie .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.galerie .tile { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #1a1a1a; }
.galerie .tile img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: grayscale(1) contrast(1.05) brightness(0.92);
  transition: transform 600ms var(--ease-mech);
}
.galerie .tile:hover img { transform: scale(1.04); }
.galerie .tile img[src*="/aeronef/barillets.webp"] { object-position: center bottom; }
.galerie .tile img[src*="IMG_0482"] { object-position: center 30%; }
.galerie .tile img[src*="atelier-banc"] { object-position: 70% center; transform: scale(1.15); }
.galerie .tile:hover img[src*="atelier-banc"] { transform: scale(1.2); }
.galerie .tile .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,0) 60%, rgba(10,10,10,0.7) 100%); }
.galerie .tile .kind {
  position: absolute; left: 16px; top: 14px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--vm-bone);
  background: rgba(0,0,0,0.45); padding: 3px 8px;
}
.galerie .tile .label {
  position: absolute; left: 16px; bottom: 14px;
  font-family: var(--font-display); font-size: 12px; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--vm-bone);
}

/* ---------- CONTACT ---------- */
.contact { padding: 144px 96px; }
.contact .grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 96px; align-items: flex-start; }
.contact h2 {
  font-family: var(--font-display); font-size: 84px; font-weight: 500;
  line-height: 0.96; letter-spacing: 0; text-transform: uppercase; margin: 0;
}
.contact .bars { margin-top: 36px; display: flex; gap: 32px; }
.contact .lead {
  font-family: var(--font-serif); font-style: italic; font-weight: 300;
  font-size: 26px; line-height: 1.45; color: var(--vm-bone);
  margin: 0 0 48px; max-width: 540px;
}
.contact .info {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  border-top: 1px solid rgba(255,255,255,0.18);
  border-bottom: 1px solid rgba(255,255,255,0.18);
  padding: 32px 0; margin-bottom: 40px;
}
.contact .info .k {
  font-family: var(--font-display); font-size: 11px; font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--vm-steel);
  margin-bottom: 12px;
}
.contact .info .v {
  font-family: var(--font-serif); font-size: 16px; line-height: 1.6;
  color: var(--vm-bone); white-space: pre-line;
}
.contact .ctas { display: flex; gap: 20px; flex-wrap: wrap; }

/* ---------- ARTICLE (blocs Gutenberg) ---------- */
/* Stylise les blocs natifs de l'éditeur pour qu'un article rédigé dans
   WordPress sorte automatiquement au look Vallemont. Scopé à .vm-single-content. */
.vm-single-content > * { margin-top: 0; }
.vm-single-content p { margin: 0 0 1.5em; }
.vm-single-content strong { color: var(--vm-bone); font-weight: 600; }
.vm-single-content a { color: var(--vm-bone); text-decoration: none; border-bottom: 1px solid rgba(245,245,242,0.4); transition: border-color var(--dur-base) var(--ease-mech); }
.vm-single-content a:hover { border-color: var(--vm-bourgogne); }

/* Chapeau : premier paragraphe (auto) ou paragraphe à classe .vm-lead */
.vm-single-content > p:first-of-type,
.vm-single-content p.vm-lead {
  font-style: italic; font-weight: 300; font-size: 24px; line-height: 1.5;
  color: var(--vm-bone); margin-bottom: 2em;
}

/* Intertitres en Hemi Head */
.vm-single-content h2, .vm-single-content .wp-block-heading.is-style-default,
.vm-single-content h2.wp-block-heading {
  font-family: var(--font-display); font-weight: 500; font-size: 40px;
  line-height: 1.04; letter-spacing: 0; text-transform: uppercase;
  color: var(--vm-bone); margin: 1.6em 0 0.6em; max-width: none;
}
.vm-single-content h3, .vm-single-content h3.wp-block-heading {
  font-family: var(--font-display); font-weight: 500; font-size: 24px;
  line-height: 1.1; text-transform: uppercase; color: var(--vm-bone);
  margin: 1.4em 0 0.5em;
}

/* Listes */
.vm-single-content ul, .vm-single-content ol { margin: 0 0 1.5em; padding-left: 1.2em; }
.vm-single-content li { margin-bottom: 0.5em; }

/* Citation — barre marine + italique */
.vm-single-content blockquote, .vm-single-content .wp-block-quote {
  margin: 2em 0; padding: 4px 0 4px 28px; border-left: 2px solid var(--vm-marine);
  font-family: var(--font-serif); font-style: italic; font-weight: 300;
  font-size: 26px; line-height: 1.35; color: var(--vm-bone);
}
.vm-single-content blockquote p { margin-bottom: 0.4em; }
.vm-single-content blockquote cite, .vm-single-content .wp-block-quote cite {
  display: block; font-family: var(--font-display); font-style: normal;
  font-size: 11px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--vm-steel); margin-top: 12px;
}

/* Pull-quote centrée */
.vm-single-content .wp-block-pullquote {
  border-top: 1px solid var(--vm-line-dark); border-bottom: 1px solid var(--vm-line-dark);
  padding: 48px 0; margin: 3em 0; text-align: center;
}
.vm-single-content .wp-block-pullquote blockquote { border: 0; padding: 0; }
.vm-single-content .wp-block-pullquote p { font-size: 32px; }

/* Images plein largeur + légende mono */
.vm-single-content figure, .vm-single-content .wp-block-image { margin: 2.5em 0; }
.vm-single-content .wp-block-image img, .vm-single-content figure img {
  width: 100%; height: auto; display: block; filter: contrast(1.05) brightness(0.95);
}
.vm-single-content figcaption {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--vm-steel); margin-top: 12px;
}

/* Séparateur — filet */
.vm-single-content hr, .vm-single-content .wp-block-separator {
  border: 0; border-top: 1px solid var(--vm-line-dark); margin: 3em 0; max-width: none;
}

/* Pattern « chiffres clés » (colonnes + classes vm-stat-*) */
.vm-single-content .vm-stats {
  border-top: 1px solid var(--vm-line-dark); border-bottom: 1px solid var(--vm-line-dark);
  padding: 32px 0; margin: 3em 0; gap: 24px;
}
.vm-single-content .vm-stat-num {
  font-family: var(--font-display); font-weight: 500; font-size: 44px;
  line-height: 1; color: var(--vm-bone); margin: 0 0 8px;
}
.vm-single-content .vm-stat-label {
  font-family: var(--font-display); font-size: 11px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--vm-steel); margin: 0;
}

/* ---------- ARTICLE — barre de progression + responsive en-tête ---------- */
.vm-read-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 100;
  background: var(--vm-bone); transform: scaleX(0); transform-origin: left;
  transition: transform 80ms linear; pointer-events: none;
}
@media (max-width: 820px) {
  .vm-article-hero { min-height: 58vh !important; }
  .vm-article-hero__inner { padding: 0 22px 48px !important; }
  .vm-article-head { padding: 120px 22px 56px !important; }
  .vm-article-body { padding: 64px 22px 88px !important; }
  .vm-related { padding: 64px 22px !important; }
  .vm-breadcrumb { padding: 18px 22px !important; }
}

/* ---------- LE JOURNAL (archive Actualités) ---------- */
.vm-journal .vm-jnl-rub {
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px;
  background: transparent; color: var(--vm-bone);
  border: 1px solid rgba(255,255,255,0.32); border-radius: 0; cursor: pointer;
  font-family: var(--font-display); font-size: 11px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  transition: background var(--dur-base) var(--ease-mech), color var(--dur-base) var(--ease-mech), border-color var(--dur-base) var(--ease-mech);
}
.vm-journal .vm-jnl-rub .n { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--vm-steel); }
.vm-journal .vm-jnl-rub:hover { border-color: var(--vm-bone); }
.vm-journal .vm-jnl-rub.is-active { background: var(--vm-bone); color: var(--vm-black); border-color: var(--vm-bone); }
.vm-journal .vm-jnl-card:hover img { filter: grayscale(0.15) contrast(1.05) brightness(0.82) !important; }
.vm-journal .vm-jnl-featured__card:hover img { filter: grayscale(0.15) contrast(1.05) brightness(0.85) !important; }

@media (max-width: 1100px) {
  .vm-jnl-featured, .vm-jnl-index { padding-left: 48px !important; padding-right: 48px !important; }
  .vm-jnl-hero__inner { left: 48px !important; right: 48px !important; bottom: 80px !important; }
  .vm-jnl-featured__card { grid-template-columns: 1fr !important; }
  .vm-jnl-featured__card > div:first-child { min-height: 360px !important; }
  .vm-jnl-featured__copy { padding: 48px !important; }
  .vm-jnl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 720px) {
  .vm-jnl-hero { min-height: 72vh !important; }
  .vm-jnl-hero__inner { left: 22px !important; right: 22px !important; bottom: 48px !important; }
  .vm-jnl-featured, .vm-jnl-index { padding: 80px 22px !important; }
  .vm-jnl-featured__copy { padding: 32px 22px !important; }
  .vm-jnl-grid { grid-template-columns: 1fr !important; }
  .vm-jnl-filterbar { gap: 20px !important; }
  .vm-jnl-search { min-width: 0 !important; width: 100% !important; }
}

/* ---------- FOOTER ---------- */
.vm-footer { padding: 96px 64px 36px; border-top: 1px solid var(--vm-line-dark); }
.vm-footer .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr 1fr; gap: 48px; }
.vm-footer .brand { text-align: center; }
.vm-footer .brand img,
.vm-footer .brand .custom-logo { height: auto; max-height: 200px; width: auto; max-width: 100%; margin: 0 auto; object-fit: contain; }
.vm-footer .brand .baseline {
  font-family: var(--font-serif); font-style: italic; font-weight: 300;
  font-size: 17px; color: var(--vm-platinum);
  margin: 24px auto 0; max-width: 320px; line-height: 1.5;
}
.vm-footer .brand .lockup { margin-top: 32px; display: flex; align-items: center; justify-content: center; gap: 24px; }
.vm-footer .brand .lockup .lock-label {
  font-family: var(--font-display); font-size: 11px; font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--vm-bone);
}
.vm-footer .brand .socials { margin-top: 28px; display: flex; align-items: center; justify-content: center; gap: 18px; }
.vm-footer .brand .socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,0.28); border-radius: 50%;
  color: var(--vm-bone);
  transition: border-color 220ms, color 220ms;
}
.vm-footer .brand .socials a:hover { border-color: var(--vm-bone); color: var(--vm-bone); }
.vm-footer .col-title {
  font-family: var(--font-display); font-size: 11px; font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--vm-steel);
  margin-bottom: 18px;
}
.vm-footer ul,
.vm-footer .vm-footer-menu { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.vm-footer ul li,
.vm-footer .vm-footer-menu li { font-family: var(--font-serif); font-size: 16px; color: var(--vm-bone); }
.vm-footer ul li a:hover,
.vm-footer .vm-footer-menu a:hover { border-bottom: 1px solid var(--vm-bone); }
.vm-footer .legal {
  margin-top: 96px; padding-top: 24px; border-top: 1px solid var(--vm-line-dark);
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--vm-steel);
}

/* Bouton « Gérer mes cookies » du footer : rendu identique aux liens voisins.
   Un <button> plutôt qu'un <a href="javascript:…"> — meilleure accessibilité
   et compatible avec une politique de sécurité de contenu stricte. */
.vm-footer .legal .vm-cookie-prefs {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: inherit; letter-spacing: inherit;
  text-transform: inherit; color: inherit;
}
.vm-footer .legal .vm-cookie-prefs:hover { border-bottom: 1px solid currentColor; }

/* ---------- WordPress core classes ---------- */
.alignwide  { max-width: 1100px; margin-left: auto; margin-right: auto; }
.alignfull  { width: 100%; }
.aligncenter{ display: block; margin-left: auto; margin-right: auto; }
.wp-caption-text {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--vm-steel); margin-top: 8px;
}
.screen-reader-text {
  border: 0; clip: rect(1px,1px,1px,1px); -webkit-clip-path: inset(50%); clip-path: inset(50%);
  height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 16px; background: var(--vm-bone); color: var(--vm-black); padding: 8px 16px; z-index: 9999; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .vm-hero h1 { font-size: 96px; }
  .vm-hero .main { left: 56px; right: 56px; bottom: 64px; }
  /* Tablette : aéronef centré horizontalement, agrandi et remonté */
  .vm-hero .bg .packshot { left: 50%; right: auto; top: 50%; transform: translate(-50%, calc(-50% - 60px)) scale(1.3); transform-origin: center; height: 78%; opacity: 1; }
  /* Tablette : image de fond (mécanisme) centrée */
  .vm-hero .bg .mecanisme { object-position: center; }
  .product .grid, .manufacture .grid, .contact .grid { grid-template-columns: 1fr; gap: 56px; }
  .product .photo { min-height: 420px; }
  .product .copy { padding: 80px 48px; }
  .manufacture, .contact, .vm-temps-art { padding: 96px 48px; }
  .vm-temps-art h2 { font-size: 52px; }
  .vm-footer .cols { grid-template-columns: 1fr 1fr 1fr; }
  .vm-footer .brand { grid-column: 1 / -1; }

  .vm-histoire { padding: 96px 48px !important; }
  .vm-histoire .vm-histoire-body { grid-template-columns: 1fr !important; gap: 56px !important; }
  .vm-histoire h2 { font-size: 64px !important; }
  .vm-histoire h3 { font-size: 44px !important; }

  /* Tablette : Nos Créations — le lead passe sous le titre (sinon il est coupé) */
  #nos-horloges .sect-h { flex-direction: column; align-items: flex-start; gap: 16px; }
  #nos-horloges .sect-h .aside-lead { white-space: normal; }
  /* 3 colonnes strictement égales : minmax(0,1fr) empêche le débordement,
     et le titre peut se couper si besoin (ex. « PERSONNALISATION ») */
  .collection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .collection-card { padding: 40px 24px 48px; }
  .collection-card .title { font-size: 38px; overflow-wrap: break-word; word-break: break-word; }
}

/* ---------- Mobile ---------- */
/* NAV : menu burger jusqu'aux tablettes (≤1400px : iPad Mini/Air/Pro, Surface Pro 7).
   Ce bloc ne contient QUE la nav ; le contenu des pages garde ses breakpoints
   d'origine (bloc @media ≤820px rouvert plus bas). */
@media (max-width: 1400px) {
  /* Mobile : barre de nav fixe en haut, toujours accessible au scroll */
  .vm-nav { position: fixed; top: 0; left: 0; right: 0; padding: 0 18px; height: 132px; }
  .vm-nav .logo img,
  .vm-nav .custom-logo { height: 112px; }

  /* Reset desktop logo padding on mobile (the nav already has 18px). */
  .vm-nav .logo { padding-left: 0; }

  /* Show burger, hide inline nav until expanded */
  .vm-nav-burger { display: inline-block; }
  .vm-nav .vm-primary {
    position: fixed; inset: 132px 0 0 0;
    display: flex; flex-direction: column;
    padding: 24px 22px 32px;
    background: rgba(10,10,10,0.98);
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    border-top: 1px solid var(--vm-line-dark);
    overflow-y: auto;
    height: calc(100vh - 132px);
    height: calc(100dvh - 132px);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: opacity 260ms var(--ease-mech), transform 260ms var(--ease-mech);
  }
  .vm-nav[data-open="true"] .vm-primary { transform: translateY(0); opacity: 1; pointer-events: auto; }

  /* Mobile menu becomes a vertical accordion */
  .vm-nav .vm-menu {
    flex-direction: column; gap: 0; max-width: none;
  }
  .vm-nav .vm-menu-item { border-bottom: 1px solid rgba(255,255,255,0.14); }
  .vm-nav .vm-menu-item:first-child { border-top: 1px solid rgba(255,255,255,0.14); }
  .vm-nav .vm-menu-link,
  .vm-nav .vm-menu-trigger {
    display: flex; justify-content: space-between; width: 100%;
    font-size: 18px; letter-spacing: 0.28em;
    padding: 26px 0; border-bottom: 0;
    white-space: nowrap;
  }
  .vm-nav .vm-menu-link:hover,
  .vm-nav .vm-menu-trigger:hover,
  .vm-nav .vm-menu-trigger[aria-expanded="true"] { border-bottom: 0; }
  /* Le lien-titre (ancre) est réservé au desktop : sur ≤820px, l'accordéon
     bouton+libellé reprend, donc on masque le lien pour éviter le doublon. */
  .vm-nav .vm-menu-item.has-anchor .vm-menu-parent-link { display: none; }

  /* Submenu becomes a stacked accordion panel */
  .vm-nav .vm-submenu {
    position: static; transform: none;
    width: 100%; min-width: 0;
    background: transparent;
    border: 0; backdrop-filter: none; -webkit-backdrop-filter: none;
    padding: 0 0 16px;
    opacity: 1; pointer-events: auto;
    max-height: 0; overflow: hidden;
    transition: max-height 320ms var(--ease-mech);
  }
  /* Hard-cancel the desktop translateX(-50%) — on mobile the submenu is
     position: static and full-width, no centring trick needed. */
  .vm-nav .vm-submenu,
  .vm-nav .vm-menu-trigger[aria-expanded="true"] + .vm-submenu,
  .vm-nav .vm-menu-item:hover .vm-submenu,
  .vm-nav .vm-menu-item:focus-within .vm-submenu {
    transform: none;
    left: auto;
  }
  .vm-nav .vm-menu-trigger[aria-expanded="true"] + .vm-submenu { max-height: 800px; }
  .vm-nav .vm-submenu a {
    padding: 14px 0 14px 16px;
    font-size: 13px; letter-spacing: 0.22em;
    color: var(--vm-platinum);
  }
  .vm-nav .vm-submenu a:hover { background: transparent; color: var(--vm-bone); }
  .vm-nav .vm-submenu-sub { border: 0; margin: 0; }
  .vm-nav .vm-submenu-sub a {
    padding-left: 36px;
    font-size: 12px; letter-spacing: 0.18em;
  }

  /* Tricolore footer — pinned to the bottom of the drawer.
     Wordmark "Manufacture Horlogère" sits between the marine and bourgogne bars. */
  .vm-nav .vm-nav-tricolore {
    display: flex; justify-content: center; align-items: center;
    gap: 18px; margin-top: auto; padding-top: 48px;
  }
  .vm-nav .vm-nav-tricolore .bar { width: 48px; height: 2px; }
  .vm-nav .vm-nav-tricolore .lock-label {
    font-family: var(--font-display); font-size: 10px; font-weight: 500;
    letter-spacing: 0.28em; text-transform: uppercase; color: var(--vm-bone);
    white-space: nowrap;
  }
}

/* Contenu des pages (hero, sections…) : breakpoints mobile d'origine (≤820px),
   indépendants de la nav ci-dessus. */
@media (max-width: 820px) {
  section { padding: 72px 22px; overflow: hidden; }
  .sect  { padding: 72px 22px; }

  .vm-histoire { padding: 72px 22px !important; }
  .vm-histoire > div { max-width: none !important; }
  .vm-histoire h2 { font-size: 44px !important; }
  .vm-histoire h3 { font-size: 34px !important; }
  /* Mobile : le petit texte italique passe sous le mot « Histoire » (au lieu d'être à droite) */
  .vm-histoire .vm-histoire-head { flex-direction: column !important; align-items: flex-start !important; gap: 18px; }
  .vm-histoire .vm-histoire-lead { text-align: left !important; max-width: none !important; }
  /* Mobile : le chapô « Au pays du Mont-Blanc… » aligné à gauche (au lieu de centré) */
  .vm-histoire .vm-histoire-intro { text-align: left !important; margin-top: 36px !important; }
  .vm-histoire .vm-histoire-body { grid-template-columns: 1fr !important; gap: 36px !important; padding: 56px 0 16px !important; }
  .vm-histoire .vm-histoire-triptyque { grid-template-columns: 1fr !important; }
  .vm-histoire .vm-histoire-triptyque > div { padding: 28px 0 !important; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.14); }
  .vm-histoire .vm-histoire-triptyque > div:last-child { border-bottom: none; }
  .vm-hero { min-height: 88vh; height: auto; }
  /* Mobile : on remet l'aéronef comme avant (le placement desktop ne doit pas déteindre ici),
     agrandi de 50% via scale() — la largeur étant bridée par `img { max-width:100% }`, scale est fiable */
  .vm-hero .bg .packshot { left: 50%; right: auto; top: 50%; transform: translate(-50%, calc(-50% - 150px)) scale(1.5); transform-origin: center; height: 55%; opacity: 1; }
  /* Mobile : image de fond (mécanisme) centrée */
  .vm-hero .bg .mecanisme { object-position: center; }
  .vm-hero .corner { top: 76px; font-size: 9px; }
  .vm-hero .corner.left  { left: 22px; }
  .vm-hero .corner.right { right: 22px; }
  .vm-hero .main { left: 22px; right: 22px; bottom: 56px; }
  .vm-hero h1 { font-size: 52px; line-height: 0.94; }
  .vm-hero .lead-row .lead { font-size: 17px; }
  /* Mobile : titre de marque plus petit, et on masque la ligne du lieu */
  .vm-hero .lead-row .lead .lead-1 { font-size: 20px; }
  .vm-hero .lead-row .lead br { display: none; }
  .vm-hero .lead-row .lead .lead-2 { display: none; }

  .sect-h { flex-direction: column; align-items: flex-start; gap: 18px; padding-bottom: 22px; margin-bottom: 28px; }
  .sect-h h1, .sect-h h2, .manufacture h2, .contact h2 { font-size: 44px; }
  /* Mobile : le lead doit pouvoir revenir à la ligne (sinon il déborde / est coupé) */
  .sect-h .aside-lead { white-space: normal; }
  .product .copy h2 { font-size: 48px; line-height: 0.96; }

  /* Collection cards (Nos horloges) stay on a single row until real phone width.
     Everything else collapses at the standard 820px tablet breakpoint. */
  .carnets .grid, .galerie .grid,
  .contact .info, .product .copy .specs { grid-template-columns: 1fr; }
  .carnets .grid article:first-child { border-right: 0; }
  /* Smaller card padding + tighter title size so the 3 cards still breathe at tablet width */
  .collection-card { padding: 36px 18px; }
  .collection-card .title { font-size: 38px; }
  .collection-card .lead { font-size: 17px; }
  .collection-card .count { font-size: 26px; }

  .product .copy { padding: 56px 22px; }
  .product .photo { min-height: 280px; }
  .product .copy .specs { grid-template-columns: repeat(2, 1fr); gap: 18px; }

  .manufacture, .contact { padding: 72px 22px; }
  .manufacture .meta .row { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }

  .quote-band { padding: 96px 22px; }
  .quote-band blockquote { font-size: 26px; line-height: 1.3; }
  .quote-band .attrib .label { font-size: 9px; letter-spacing: 0.18em; }

  .carnets .news-title { font-size: 26px; }

  .vm-btn { padding: 14px 22px; font-size: 11px; }
  .vm-hero .cta-row, .product .copy .cta, .contact .ctas { flex-wrap: wrap; gap: 12px; }
  .vm-hero .cta-row .vm-btn,
  .product .copy .cta .vm-btn,
  .contact .ctas .vm-btn { flex: 1 1 100%; justify-content: space-between; }

  .vm-footer { padding: 64px 22px 28px; }
  .vm-footer .cols { grid-template-columns: 1fr; gap: 32px; }
  .vm-footer .legal { flex-direction: column; gap: 14px; align-items: flex-start; text-align: left; }
}

/* ---------- Phone-only: collapse the Nos horloges grid to 1 column ---------- */
@media (max-width: 600px) {
  .collection-grid { grid-template-columns: 1fr; }
  .collection-grid .collection-card:not(:last-child) { border-right: 0; }
  .collection-card { padding: 36px 4px; }
  .collection-card .title { font-size: 36px; }
}

@media (max-width: 380px) {
  section, .sect { padding: 56px 16px; }
  .vm-hero h1 { font-size: 42px; }
  .sect-h h1, .sect-h h2, .manufacture h2, .contact h2 { font-size: 36px; }
  .product .copy h2 { font-size: 40px; }
  .quote-band blockquote { font-size: 22px; }
  .vm-temps-art h2 { font-size: 34px; }
  .vm-temps-art .lead { font-size: 19px; }
}

/* ---------- Back-to-top button (all pages) ---------- */
.vm-totop {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: var(--hairline) solid var(--vm-line-strong-dark);
  border-radius: var(--r-pill);
  background: rgba(10, 10, 10, 0.72);
  color: var(--vm-bone);
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-precision),
              transform var(--dur-base) var(--ease-precision),
              background var(--dur-fast) var(--ease-precision),
              border-color var(--dur-fast) var(--ease-precision);
}
.vm-totop[hidden] { display: none; }
.vm-totop.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.vm-totop:hover {
  background: var(--vm-marine);
  border-color: var(--vm-marine);
}
.vm-totop:focus-visible {
  outline: 2px solid var(--vm-bone);
  outline-offset: 3px;
}
.vm-totop svg { display: block; }

@media (max-width: 600px) {
  .vm-totop { right: 18px; bottom: 18px; width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- Menu plein écran — version tablette (821-1100px) ----------
   Sur tablette, on ne s'étale plus bord à bord comme sur mobile : la liste
   devient une colonne centrée à largeur confortable, avec des entrées plus
   grandes et aérées. Le mobile (≤820px) garde la pleine largeur. */
@media (min-width: 821px) and (max-width: 1400px) {
  .vm-nav .vm-primary { align-items: center; padding: 72px 48px 56px; }
  .vm-nav .vm-menu { width: 100%; max-width: 640px; }
  /* Libellés centrés (au lieu de collés à gauche) et agrandis sur tablette */
  .vm-nav .vm-menu-item { text-align: center; }
  .vm-nav .vm-menu-link,
  .vm-nav .vm-menu-trigger { font-size: 32px; padding: 40px 0; justify-content: center; }
  .vm-nav .vm-submenu a { justify-content: center; text-align: center; padding-left: 0; }
  /* Bandeau tricolore agrandi sur tablette (barres + libellé « Manufacture… ») */
  .vm-nav .vm-nav-tricolore { margin-top: 40px; gap: 26px; }
  .vm-nav .vm-nav-tricolore .bar { width: 72px; height: 2px; }
  .vm-nav .vm-nav-tricolore .lock-label { font-size: 14px; letter-spacing: 0.3em; }
}