/**
 * Pages éditoriales (Histoire, Métiers, Mouvement mécanique, Du design à la
 * réalité, Presse, Récompenses Innovation, Personnalisation).
 *
 * Les sections sont rendues avec des styles inline (auto-suffisants) ; cette
 * feuille n'ajoute que les adaptations responsives. Les surcharges de grilles
 * utilisent !important pour primer sur les styles inline.
 */

/* Titres de hero : autoriser la coupure des mots très longs (ex. « Reconnaissances »)
   pour éviter le débordement horizontal sur petit écran. */
.vm-page-hero h1 { overflow-wrap: break-word; hyphens: auto; }

/* ---------- Tablette ---------- */
@media (max-width: 1100px) {
  .vm-editorial-page section { padding-left: 48px !important; padding-right: 48px !important; }

  /* Sous-titres d'en-tête de section (le 2e/dernier bloc de l'en-tête, italique).
     Une fois l'en-tête passé à la ligne (tablette/mobile), on les aligne à gauche
     et on retire le max-width (≈380-440px) pour qu'ils tiennent sur une ligne.
     Couvre les sous-titres alignés à droite ET ceux qui ne le sont pas. */
  .vm-editorial-page section:not(.vm-page-hero) [style*="text-align:right"],
  .vm-editorial-page section:not(.vm-page-hero) [style*="justify-content:space-between"] > div:last-child { text-align: left !important; max-width: none !important; }

  .vm-page-hero { min-height: 64vh !important; }
  .vm-page-hero > div[style*="bottom:96px"],
  .vm-page-hero > div:last-child { left: 48px !important; right: 48px !important; bottom: 64px !important; }
  .vm-page-hero > div[style*="top:110px"] { display: none !important; }
  /* Histoire : annuler le décalage desktop du hero (sinon gros bandeau sur tablette/mobile) */
  .vm-page-histoire .vm-page-hero img { object-position: center !important; }

  .vm-mf-atelier__head,
  .vm-mf-techniques__head,
  .vm-mf-mecanisme__body,
  .vm-mf-echappement__body,
  .vm-mf-definition__grid,
  .vm-mf-rouage__grid,
  .vm-mf-fab__inner { grid-template-columns: 1fr !important; gap: 56px !important; }
  /* « Le rouage » : la colonne de droite perd son filet vertical une fois empilée. */
  .vm-mf-rouage__grid > div { border-left: 0 !important; padding-left: 0 !important; }
  /* « L'échappement » : une fois empilé, la vidéo passe APRÈS le texte. */
  .vm-mf-echappement__body > div:first-child { order: 2 !important; }

  .vm-mf-metiers__grid,
  .vm-mf-techniques__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  .vm-dr-process__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .vm-dr-process__grid > div { border-right: 0 !important; padding-right: 28px !important; margin-bottom: 40px; }
  .vm-dr-principe__inner { grid-template-columns: 1fr !important; gap: 48px !important; }
  .vm-dr-feature__grid { grid-template-columns: 1fr !important; }
  .vm-dr-feature__media { min-height: 360px !important; }
  .vm-dr-feature__copy { padding: 64px 48px !important; }

  .vm-rp-revue__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .vm-rc-artinov__grid { grid-template-columns: 1fr !important; }
  .vm-rc-artinov__copy { padding: 80px 48px !important; }
  /* Musée de Cluses : image AVANT le texte une fois la grille empilée. */
  #inauguration-cluses .vm-rc-artinov__media { order: -1 !important; }

  .vm-ps-principe__inner,
  .vm-ps-barillet__grid,
  .vm-ps-cercle__grid { grid-template-columns: 1fr !important; gap: 56px !important; }
  .vm-ps-cercle__copy { border-left: 0 !important; border-top: 1px solid rgba(255,255,255,0.18); padding: 80px 48px !important; }
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .vm-editorial-page section { padding-top: 80px !important; padding-bottom: 80px !important; padding-left: 22px !important; padding-right: 22px !important; }

  .vm-page-hero { min-height: 56vh !important; }
  .vm-page-hero > div:last-child { left: 22px !important; right: 22px !important; bottom: 40px !important; }
  .vm-page-hero h1 { font-size: clamp(40px, 11vw, 68px) !important; }
  /* Drapeau du lead (barres tricolores de part et d'autre de l'accroche) :
     barres raccourcies et écart réduit sur téléphone pour laisser respirer le
     texte (sinon les deux barres de 72px écrasent l'accroche en colonne étroite). */
  .vm-page-hero .bar { width: 40px !important; }
  .vm-page-hero [style*="gap:28px"] { gap: 14px !important; }

  .vm-mf-atelier__figs,
  .vm-mf-metiers__grid,
  .vm-mf-techniques__grid { grid-template-columns: 1fr !important; }

  .vm-mf-mvt__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .vm-mf-mvt__grid > div { border-right: 0 !important; padding-left: 0 !important; padding-right: 16px !important; }

  /* Frise : la grille 3 colonnes passe en bloc empilé */
  .vm-mf-historique__row { grid-template-columns: 1fr !important; gap: 6px !important; }
  .vm-mf-historique__row > div:first-child { font-size: 36px !important; }

  /* Blocs reconstruits 2026 (Engagements, Métiers, Étapes) : lignes
     « numéro / titre / description » empilées (sinon description écrasée). */
  .vm-mf-engagements__row,
  .vm-mf-metiers__row,
  .vm-dr-etapes__row,
  .vm-mk-row { grid-template-columns: 1fr !important; gap: 6px !important; }
  .vm-mf-engagements__row > div:first-child,
  .vm-mf-metiers__row > div:first-child,
  .vm-dr-etapes__row > div:first-child,
  .vm-mk-row > div:first-child { font-size: 36px !important; }

  .vm-dr-objet__specs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px !important; }
  .vm-dr-carnet__grid { grid-template-columns: 1fr !important; }
  .vm-dr-process__grid { grid-template-columns: 1fr !important; }
  .vm-dr-feature__copy { padding: 56px 22px !important; }
  .vm-dr-feature__media { min-height: 280px !important; }
  .vm-dr-objet { padding-left: 0 !important; padding-right: 0 !important; }
  .vm-dr-objet > div:first-child,
  .vm-dr-objet__specs { padding-left: 22px !important; padding-right: 22px !important; }

  .vm-rp-revue__grid { grid-template-columns: 1fr !important; }
  .vm-rp-citations__grid { grid-template-columns: 1fr !important; gap: 56px !important; }
  .vm-rp-ecrite__grid { grid-template-columns: 1fr !important; }
  .vm-rp-ecrite__grid > div { border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,0.18); padding-left: 0 !important; min-height: 0 !important; }
  .vm-rc-artinov__copy { padding: 64px 22px !important; }
  .vm-rc-artinov__figs { grid-template-columns: 1fr !important; }
  .vm-rc-artinov__figs > div { border-right: 0 !important; border-bottom: 1px solid rgba(10,10,10,0.12); padding-left: 0 !important; }

  /* Palmarès : table 5 colonnes → blocs empilés, en-tête masqué */
  .vm-rc-palmares__row--head { display: none !important; }
  .vm-rc-palmares__row { grid-template-columns: 1fr !important; gap: 6px !important; }

  .vm-ps-terrains__grid { grid-template-columns: 1fr !important; }
  .vm-ps-terrains__grid > div { border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,0.18); padding-left: 0 !important; padding-right: 0 !important; }
  .vm-ps-plaque__specs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .vm-ps-plaque__specs > div { border-right: 0 !important; padding-left: 0 !important; }
  .vm-ps-processus__row { grid-template-columns: 1fr !important; gap: 8px !important; }
  .vm-ps-cercle__copy,
  .vm-ps-cercle__media { padding: 56px 22px !important; }
}