/*
 * Gabarit « Culture » (maquette du 2026-10-16) : front/templates/culture.php, script assets/culture.js.
 * Tout est limité à body.template-culture : les autres pages du dossier ne changent pas.
 * --culture-top : bas de l'en-tête et du bandeau fixes (variables posées par vinea-mag-unified-band.js).
 */
body.template-culture {
  --culture-top: calc(var(--vinea-mag-header-edge, 168px) + var(--vinea-mag-band-height, 88px));
  --culture-line: #c9bfb0;
}

/* --- Héros : collé à l'en-tête, fond gris tant qu'aucune image n'est choisie --- */
body.template-culture .culture-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100svh - var(--vinea-header-full, 168px) - 60px);
  margin: 0;
  padding: 65px 8% 80px;
  box-sizing: border-box;
  background: linear-gradient(115deg, #dadbd9, #bfc2bf);
  color: #191919;
}
/* Image du héros (admin : En-tête › Image du héros, version mobile, point focal) ; voile clair à gauche pour le texte. */
body.template-culture.culture-has-hero-image .culture-hero {
  background: linear-gradient(90deg, rgba(255, 255, 255, .88) 0, rgba(255, 255, 255, .7) 45%, rgba(255, 255, 255, 0) 75%), var(--culture-hero-image) var(--culture-hero-position, 50% 50%) / cover no-repeat;
}
@media (max-width: 700px) {
  body.template-culture.culture-has-hero-image .culture-hero {
    background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .72)), var(--culture-hero-image-mobile) var(--culture-hero-position, 50% 50%) / cover no-repeat;
  }
}
body.template-culture .culture-hero-copy { max-width: 940px; }
body.template-culture .culture-kicker { margin: 0 0 25px; font: 400 12px/1.4 Arial, sans-serif; letter-spacing: 3px; text-transform: uppercase; }
body.template-culture .culture-hero h1 { margin: 0 0 30px; font: 400 clamp(40px, 4.4vw, 72px)/1.07 Georgia, 'Times New Roman', serif; letter-spacing: -1.4px; color: #191919; text-transform: none; }
body.template-culture .culture-chapo { max-width: 710px; margin: 0; font: italic 19px/1.6 Georgia, 'Times New Roman', serif; }
body.template-culture .culture-hero-next { display: inline-block; margin-top: 28px; padding-bottom: 8px; border-bottom: 1px solid #777; color: #191919; font: 10px Arial, sans-serif; letter-spacing: 1.5px; text-decoration: none; }
body.template-culture .culture-hero-credit { position: absolute; right: 24px; bottom: 16px; margin: 0; font: 10px Arial, sans-serif; color: #444; }

/* --- Personnages : un écran par personnage, glissement horizontal au défilement (assets/culture.js) --- */
body.template-culture .culture-sequence { min-width: 0; scroll-margin-top: calc(var(--culture-top) + 10px); }
body.template-culture .culture-sequence-window { overflow: hidden; width: 100%; isolation: isolate; background: #fff; }
body.template-culture .culture-sequence-track { display: flex; will-change: transform; transition: transform .95s cubic-bezier(.65, 0, .25, 1); }
body.template-culture .culture-person {
  flex: 0 0 100%;
  min-width: 0;
  align-self: flex-start;
  display: grid;
  grid-template-columns: 42% minmax(0, 1fr);
  gap: 35px;
  align-items: start;
  background: #fff;
}
/* Écran d'un personnage (maquette du 27/10/2026, alignement commun validé sur Rhône) : tout centré, portrait entier
   (jamais déformé ni rogné), légende à la largeur de l'image (culture.js), citation en italique, commentaire intégral. */
body.template-culture .culture-portrait { display: flex; flex-direction: column; align-items: center; min-width: 0; margin: 0; text-align: center; }
body.template-culture .culture-portrait img { display: block; width: auto; max-width: 100%; height: auto; max-height: 352px; margin: 0 auto; object-fit: contain; object-position: top center; }
body.template-culture .culture-portrait-grey { display: flex; width: 100%; aspect-ratio: 3 / 4; max-height: 440px; align-items: center; justify-content: center; background: #d0d1cf; color: #777; font: 10px Arial, sans-serif; letter-spacing: 2px; }
body.template-culture .culture-portrait figcaption { box-sizing: border-box; max-width: 100%; margin: 15px auto 0; color: #666; font: 12px/1.65 Arial, sans-serif; text-align: center; overflow-wrap: break-word; }
body.template-culture .culture-portrait-credit { color: #888; }
body.template-culture .culture-portrait figcaption .vinea-photo-credit { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
body.template-culture .culture-person-text { min-width: 0; text-align: center; }
/* Surtitre : hauteur de ligne suffisante pour les accents (É, Ô) de « VALLÉE DU RHÔNE ». */
body.template-culture .culture-person-kicker { margin: 0 0 15px; padding: 3px 0; overflow: visible; font: 11px/1.8 Arial, Helvetica, sans-serif; letter-spacing: 2px; text-transform: uppercase; text-align: center; }
body.template-culture .culture-person-name { margin: 0 0 20px; font: 400 40px/1.05 Georgia, 'Times New Roman', serif; letter-spacing: 0; text-transform: none; color: #191919; text-align: center; overflow-wrap: normal; word-break: normal; hyphens: none; }
body.template-culture .culture-person-job { margin: 0; font: 600 13px/1.3 Arial, sans-serif; color: #191919; text-align: center; }
body.template-culture .culture-person-dates { margin: 0; font: 12px/1.3 Arial, sans-serif; color: #777; text-align: center; }
body.template-culture .culture-person-quote { margin: 18px 0 22px; padding: 0; border: 0; font: italic 400 clamp(17px, 1.55vw, 23px)/1.4 Georgia, 'Times New Roman', serif; color: #191919; text-align: center; }
body.template-culture .culture-person-quote p { margin: 0; text-align: center; }
body.template-culture .culture-person-quote em { font-style: italic; }
body.template-culture .culture-person-source { margin: 0; font: italic 12px/1.6 Georgia, 'Times New Roman', serif; color: #666; text-align: center; }
body.template-culture .culture-person-comment { margin: 22px 0 0; font: 15px/1.55 Georgia, 'Times New Roman', serif; color: #191919; text-align: center; }
body.template-culture .culture-person-comment + .culture-person-comment { margin-top: 12px; }
body.template-culture :is(.culture-person-job, .culture-person-dates, .culture-person-source) :is(strong, b, em, i) { font-weight: inherit; font-style: inherit; }
@media (min-width: 1001px) {
  body.template-culture .culture-sequence-sticky { position: sticky; top: calc(var(--culture-top) + 20px); }
  body.template-culture .culture-person-reversed { grid-template-columns: minmax(0, 1fr) 42%; }
  body.template-culture .culture-person-reversed > .culture-portrait { grid-column: 2; grid-row: 1; }
  body.template-culture .culture-person-reversed > .culture-person-text { grid-column: 1; grid-row: 1; }
}
@media (max-width: 1000px) {
  body.template-culture .culture-sequence-window { overflow: visible; }
  body.template-culture .culture-sequence-track { display: block; transform: none !important; }
  body.template-culture .culture-person { margin-bottom: 65px; gap: 22px; }
  body.template-culture .culture-person-quote { font-size: 21px; }
}
@media (max-width: 600px) {
  body.template-culture .culture-person { grid-template-columns: 1fr; }
  body.template-culture .culture-portrait img { max-height: 280px; }
  body.template-culture .culture-portrait-grey { aspect-ratio: 4 / 3; }
  body.template-culture .culture-person-name { font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  body.template-culture .culture-sequence-track { transition: none; }
}

/* --- Colonne latérale : sommaire puis bloc vidéo, deux blocs distincts (20 px), collés ensemble jusqu'au bas de l'article --- */
@media (min-width: 851px) {
  html body.template-culture .rhone-visite-sidebar {
    position: sticky;
    /* Écran trop bas pour les deux blocs : culture.js donne un haut négatif, la colonne se fixe par le bas. */
    top: var(--culture-side-top, calc(var(--culture-top) + 16px));
    align-self: start;
    gap: 20px;
  }
  html body.template-culture.rhone-dossier-page .rhone-visite-sidebar > .vinea-region-summary,
  html body.template-culture.rhone-dossier-page .rhone-visite-sidebar > .vinea-region-summary.is-stuck,
  html body.template-culture.rhone-dossier-page .rhone-visite-sidebar > .vinea-region-summary.is-bottom {
    position: relative !important;
    top: auto !important;
    height: auto !important;
    max-height: none !important;
  }
  /* Hauteur de la liste calculée par culture.js : les deux blocs tiennent dans l'écran, la liste défile seule. */
  html body.template-culture .rhone-visite-sidebar .vinea-region-summary-list { max-height: var(--culture-summary-list, none); overflow-y: auto; }
}

/* --- Bloc vidéo --- */
body.template-culture .culture-video-card { position: relative; min-height: calc(265px - .5cm); margin: 0; border: 1px solid #d0c8bc; background: #f3f1ed; box-sizing: border-box; }
body.template-culture .culture-video-side-info { position: absolute; top: 16px; left: 14px; width: calc(70% - 14px - .5cm - 14px); text-align: center; }
body.template-culture .culture-video-side-title { max-width: 100%; margin: 0 0 12px; font: 400 15px/1.3 Georgia, 'Times New Roman', serif; letter-spacing: 0; text-transform: none; color: #191919; overflow-wrap: anywhere; }
body.template-culture .culture-video-nav { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 0 0 10px; }
body.template-culture .culture-video-nav [data-video-prev],
body.template-culture .culture-video-nav [data-video-next] { padding: 2px 8px; border: 0; background: transparent; color: #000; font-size: 21px; line-height: 1; cursor: pointer; }
body.template-culture .culture-video-like { display: inline-flex; align-items: center; gap: 4px; padding: 3px 0; border: 0; background: transparent; color: #000; font: 9px Arial, sans-serif; white-space: nowrap; cursor: pointer; }
body.template-culture .culture-video-like svg { flex-shrink: 0; fill: none; stroke: #000; }
body.template-culture .culture-video-like[aria-pressed="true"] svg { fill: #000; }
body.template-culture .culture-video-channel { margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid #d5cfc5; font: 15.6px/1.45 Georgia, 'Times New Roman', serif; color: #191919; }
body.template-culture .culture-video-channel img { display: block; width: 112.2px; height: 56.1px; margin: 7px auto 0; object-fit: contain; }
body.template-culture .culture-video-stage { position: relative; width: 30%; aspect-ratio: 9 / 16; margin: 16px .5cm 0 auto; overflow: hidden; background: #111; }
body.template-culture .culture-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #111; }
body.template-culture .culture-video-play { display: block; width: 30%; margin: 0 .5cm 0 auto; padding: 8px; border: 1px solid #142b28; border-top-color: #f3f1ed; background: #142b28; color: #fff; font: 10px Arial, sans-serif; letter-spacing: 1.5px; cursor: pointer; transform: translateY(-3mm); }
@media (max-width: 850px) {
  body.template-culture .culture-video-card { max-width: 384px; width: 100%; }
}

/* --- « À lire également » sous les personnages, sans grand blanc final --- */
body.template-culture .vinea-region-article > .rhone-dossier-related { margin-top: 40px; }