/* ============================================================
   DESSIGNE — page « Vidéo narrative » (version 2, septembre 2026)
   ------------------------------------------------------------
   La maquette stylait la page presque entièrement en ligne et
   pilotait son responsive par sélecteurs d'attribut ([style*="..."]),
   qui cassent dès qu'un espacement change. On repose de vraies
   classes, mêmes valeurs ; les largeurs figées en pixels du dessin
   (paragraphes de 700 px, titres en nowrap) deviennent fluides.

   Préfixe « vn- » = vidéo narrative. Chargée après services.css,
   dont cette page réutilise les boutons (.svc-btn).
   ============================================================ */

/* Surfaces de la maquette absentes de la palette globale. */
.vn-page {
  --vn-nuit:      #1A1715; /* noir chaud : scénarisation */
  --vn-nuit-2:    #191715; /* noir chaud : motion design, identité */
  --vn-nuit-fond: #0E0C0B; /* fond des cadres vidéo */
  --vn-noir-burg: #3A1F1B; /* bordeaux profond de la CTA */
  --vn-sable:     #EDE7DA; /* fond des offres et des galeries */
  --vn-col:       1210px;  /* largeur de colonne du dessin */
}

/* ---------- 1 · HERO ---------- */
.vn-hero {
  position: relative;
  height: 74vh;
  min-height: 560px;
  overflow: hidden;
  background: var(--vn-nuit-fond);
}
.vn-hero__media { position: absolute; inset: 0; overflow: hidden; }
.vn-hero__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vn-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(20, 18, 16, .90) 0%,
    rgba(20, 18, 16, .30) 55%,
    rgba(20, 18, 16, .08) 100%);
  pointer-events: none;
}
.vn-hero__inner { position: absolute; bottom: 64px; left: 80px; right: 80px; }
.vn-hero__title {
  font-family: var(--serif);
  font-size: clamp(40px, 5.6vw, 72px);
  font-weight: 300;
  color: var(--cream);
  line-height: 1.05;
  /* Capitales posées en CSS : le texte reste en bas de casse dans le code,
     lisible pour les lecteurs d'écran et les moteurs. */
  text-transform: uppercase;
  letter-spacing: 0;
  max-width: 960px;
  margin: 0;
}

/* ---------- 2 · BANDEAUX ---------- */
.vn-punch { background: var(--cream); padding: 60px; text-align: center; }
.vn-punch__text {
  font-family: var(--serif);
  font-size: clamp(28px, 3.2vw, 45px);
  font-weight: 400;
  color: var(--ink);
  max-width: 1500px;
  margin: 0 auto;
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

/* Légende sous une vidéo */
.vn-legende { padding: 18px 80px; }
.vn-legende--noir { background: #000000; }
.vn-legende--burg { background: var(--burg); }
.vn-legende__text {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .04em;
  color: rgba(230, 223, 209, .45);
  margin: 0;
  text-align: center;
}
.vn-legende--burg .vn-legende__text { color: var(--paper); }

/* Bandeau bordeaux « Pour une vidéo plus simple » */
.vn-band { background: var(--burg); padding: 45px 60px 35px; text-align: center; }
.vn-band__title {
  font-family: var(--serif);
  font-size: clamp(28px, 3.6vw, 50px);
  font-weight: 400;
  color: var(--paper);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 20px;
}

/* ---------- 3 · BRIQUES COMMUNES ---------- */
/* Deux colonnes égales sur la largeur du dessin. */
.vn-duo {
  max-width: var(--vn-col);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
.vn-duo--centre { align-items: center; }
.vn-duo--bas    { align-items: end; }
/* Un enfant de grille ne rétrécit pas sous la largeur de son contenu sans ça. */
.vn-duo > * { min-width: 0; }

.vn-titre {
  font-family: var(--serif);
  font-size: clamp(34px, 3.8vw, 54px);
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0;
}
.vn-titre--creme { color: var(--cream); }

.vn-texte {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  color: rgba(38, 36, 33, .6);
  line-height: 1.8;
  margin: 0;
}
.vn-texte--creme { color: rgba(230, 223, 209, .72); }

/* ---------- 4 · CADRE VIDÉO (façade YouTube) ----------
   L'iframe n'est posée qu'au clic (cf. dessigne.js, initVideoFacade) :
   la page ne charge ni le lecteur ni les traceurs Google tant que le
   visiteur ne demande pas la vidéo. */
.vn-video-wrap { background: var(--vn-nuit-fond); }
.vn-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--vn-nuit-fond);
  overflow: hidden;
  cursor: pointer;
}
.vn-video__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vn-video__scrim {
  position: absolute;
  inset: 0;
  background: rgba(14, 12, 11, .38);
  transition: background .35s ease;
}
.vn-video:hover .vn-video__scrim,
.vn-video:focus-visible .vn-video__scrim { background: rgba(14, 12, 11, .20); }
.vn-video__corner { position: absolute; width: 44px; height: 44px; pointer-events: none; }
.vn-video__corner--tl { top: 32px; left: 40px;  border-top: 1px solid rgba(164,128,84,.30); border-left: 1px solid rgba(164,128,84,.30); }
.vn-video__corner--tr { top: 32px; right: 40px; border-top: 1px solid rgba(164,128,84,.30); border-right: 1px solid rgba(164,128,84,.30); }
.vn-video__corner--bl { bottom: 32px; left: 40px;  border-bottom: 1px solid rgba(164,128,84,.30); border-left: 1px solid rgba(164,128,84,.30); }
.vn-video__corner--br { bottom: 32px; right: 40px; border-bottom: 1px solid rgba(164,128,84,.30); border-right: 1px solid rgba(164,128,84,.30); }
.vn-video__inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.vn-video__play {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 1px solid rgba(230, 223, 209, .55);
  background: rgba(20, 18, 16, .38);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), background .35s ease, border-color .35s ease;
}
.vn-video:hover .vn-video__play,
.vn-video:focus-visible .vn-video__play {
  transform: scale(1.08);
  background: rgba(114, 20, 12, .82);
  border-color: rgba(230, 223, 209, .85);
}
.vn-video__play svg { margin-left: 4px; }
.vn-video__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.vn-video.is-playing { cursor: default; }

/* ---------- 5 · SCÉNARISATION ---------- */
/* Fond blanc cassé et texte encre, à la demande de Kim (la maquette la posait
   en noir chaud) : la section fait respirer la page entre deux bandeaux sombres. */
.vn-scenario { background: var(--p2); padding: 80px clamp(80px, 10vw, 220px); }
.vn-scenario__titre { font-size: clamp(34px, 3.5vw, 50px); max-width: 562px; }
.vn-scenario__texte p {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 300;
  color: rgba(38, 36, 33, .8);
  line-height: 1.75;
  margin: 0 0 20px;
}
.vn-scenario__texte p:last-child { margin-bottom: 0; }

/* ---------- 6 · MOTION DESIGN ---------- */
.vn-motion { background: var(--vn-nuit-2); padding: 80px 80px 104px; }
.vn-motion__head {
  max-width: var(--vn-col);
  margin: 0 auto 52px;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 40px;
  align-items: start;
}
.vn-motion__head > * { min-width: 0; }
.vn-motion__lede {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  color: rgba(230, 223, 209, .72);
  line-height: 1.8;
  margin: 0;
  padding-top: 40px;
  max-width: 680px;
}
.vn-motion__detail {
  max-width: var(--vn-col);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  align-items: center;
}
.vn-motion__detail > * { min-width: 0; }
.vn-motion__liste { display: flex; flex-direction: column; gap: 26px; }
.vn-motion__item-titre {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  color: var(--cream);
  margin: 0 0 6px;
}
.vn-motion__item-texte {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  color: rgba(230, 223, 209, .62);
  line-height: 1.7;
  margin: 0;
}
.vn-gal--motion .vn-gal__stage {
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  background: #141210;
}

/* ---------- 7 · VISUELS DESCRIPTIFS ET NARRATIFS ---------- */
.vn-visuels { background: var(--paper); padding: 104px 80px 48px; }
.vn-visuels__gauche { padding-bottom: 100px; }
.vn-visuels__titre { font-size: clamp(32px, 3.1vw, 44px); margin-bottom: 20px; }
.vn-visuels__accroche {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  color: rgba(38, 36, 33, .7);
  line-height: 1.75;
  margin: 0;
}
.vn-visuels .vn-texte { font-size: 15px; }

/* ---------- 8 · GALERIES ----------
   Diapositives superposées qui passent en fondu (cf. dessigne.js,
   initVnGalerie). La scène fixe son propre format : aucune diapositive
   n'influe sur la mise en page. */
.vn-gal { position: relative; }
.vn-gal__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--vn-sable);
  /* le défilement vertical reste au navigateur, le glissement
     horizontal arrive au script */
  touch-action: pan-y;
}
.vn-gal[data-zoom] .vn-gal__stage { cursor: zoom-in; }
.vn-gal__stage:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.vn-gal__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1);
}
.vn-gal__slide.is-active { opacity: 1; pointer-events: auto; }
.vn-gal__slide > img,
.vn-gal__slide > video,
.vn-gal__slide > .img-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Flèches. Astra repeint tout <button> au survol et au focus depuis son CSS
   en ligne, chargé après le thème : le préfixe .dessigne-page fait passer
   ces règles devant, et chaque état redéclare fond, couleur et bordure. */
.dessigne-page .vn-gal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(250, 248, 244, .82);
  color: rgba(38, 36, 33, .65);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  transition: background-color .24s ease, color .24s ease;
}
.dessigne-page .vn-gal__nav--prev { left: 18px; }
.dessigne-page .vn-gal__nav--next { right: 18px; }
.dessigne-page .vn-gal__nav:hover,
.dessigne-page .vn-gal__nav:focus-visible {
  background-color: #FAF8F4;
  color: var(--ink);
  border: 0;
  outline: none;
}
.dessigne-page .vn-gal__nav:focus-visible { box-shadow: 0 0 0 2px var(--gold); }

/* Vignettes du reportage */
.vn-gal__thumbs {
  position: relative; /* repère des offsetLeft, pour centrer la vignette active */
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 0 2px;
  scrollbar-width: none;
}
.vn-gal__thumbs::-webkit-scrollbar { display: none; }
.dessigne-page .vn-gal__thumb {
  position: relative;
  flex: 0 0 auto;
  width: 132px;
  aspect-ratio: 16 / 10;
  padding: 0;
  border: 0;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  background-color: #E3DCCD;
  color: rgba(38, 36, 33, .5);
  opacity: .45;
  outline: 1px solid transparent;
  outline-offset: -1px;
  box-shadow: none;
  transition: opacity .24s ease, outline-color .24s ease;
}
.dessigne-page .vn-gal__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dessigne-page .vn-gal__thumb:hover,
.dessigne-page .vn-gal__thumb:focus-visible {
  background-color: #E3DCCD;
  color: rgba(38, 36, 33, .5);
  border: 0;
  opacity: .8;
}
.dessigne-page .vn-gal__thumb.is-active { opacity: 1; outline-color: var(--gold); }
.vn-gal__num {
  position: absolute;
  bottom: 6px;
  left: 8px;
  font-family: var(--sans);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .2em;
  color: rgba(250, 248, 244, .9);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

/* ---------- 9 · REPORTAGE PHOTO ---------- */
.vn-reportage { background: var(--paper); padding: 0 0 50px; }

/* ---------- 10 · MULTIFORMAT ---------- */
.vn-multiformat { background: var(--p2); padding: 60px 80px; }
.vn-multiformat__head { margin-bottom: 56px; }
.vn-multiformat__titre { padding-bottom: 30px; }
.vn-multiformat__galerie { max-width: var(--vn-col); margin: 0 auto; }
.vn-gal--multiformat .vn-gal__stage { aspect-ratio: auto; height: clamp(420px, 44vw, 620px); }
.vn-fmt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.vn-fmt__cadre {
  height: 82%;
  max-width: 94%;
  background: #141210;
}
.vn-fmt--169 .vn-fmt__cadre { aspect-ratio: 16 / 9; }
.vn-fmt--916 .vn-fmt__cadre { aspect-ratio: 9 / 16; }
.vn-fmt--11  .vn-fmt__cadre { aspect-ratio: 1 / 1; }
.vn-fmt__cadre img,
.vn-fmt__cadre .img-placeholder { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 100%; }
.vn-fmt--169 .vn-fmt__cadre img { object-fit: contain; object-position: center; }
.vn-fmt__legende {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  text-align: center;
}

/* ---------- 11 · IDENTITÉ DE PROJET ---------- */
.vn-identite { background: var(--vn-nuit-2); padding: 104px 80px; }
.vn-identite__head { margin-bottom: 56px; }

/* Une rangée : visuel à taille fixe / texte.
   La photo est figée à la taille de référence du dessin, 720 × 405 px, et
   ne grandit plus avec l'écran : flex:0 0 720px empêche flexbox de l'étirer
   comme de la comprimer. La rangée est plafonnée à 1200 px et centrée, sinon
   sur grand écran tout l'espace gagné partirait dans la colonne de texte. */
.vn-etape { display: flex; align-items: center; gap: 48px; max-width: 1200px; margin: 0 auto 48px; }
.vn-etape:last-child { margin-bottom: 0; }
.vn-etape__media { flex: 0 0 720px; width: 720px; }
.vn-etape__media .vn-gal__stage { border-radius: 8px; background: #141210; }
.vn-etape__media .vn-gal__slide { transition-duration: 1.1s; }
/* Le texte prend ce qui reste ; min-width:0 l'autorise à rétrécir. */
.vn-etape__texte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.vn-etape--inverse .vn-etape__media { order: 2; }
.vn-etape--inverse .vn-etape__texte { order: 1; }
.vn-etape__title {
  font-family: var(--serif);
  font-size: 35px;
  font-weight: 400;
  color: var(--cream);
  margin: 0 0 14px;
}
.vn-etape__text {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  color: rgba(230, 223, 209, .6);
  line-height: 1.75;
  margin: 0;
}

/* ---------- 12 · SUR MESURE ---------- */
.vn-surmesure { background: var(--cream); padding: 60px 80px; }
.vn-surmesure__inner { max-width: 1000px; margin: 0 auto; }
.vn-surmesure__titre { margin-bottom: 24px; }
.vn-surmesure__texte {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 300;
  color: var(--ink);
  line-height: 1.8;
  margin: 0;
  max-width: 760px;
}

/* ---------- 13 · ARGUMENTS DE VENTE ---------- */
.vn-args { background: var(--p2); padding: 80px; }
.vn-args__head { max-width: 760px; margin: 0 auto 64px; text-align: center; }
.vn-args__title {
  font-family: var(--serif);
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
}
.vn-args__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
}
.vn-arg {
  background: var(--paper);
  border-radius: 10px;
  padding: 36px;
  display: flex;
  gap: 20px;
  min-width: 0;
  /* même élévation au survol que .mission-card et .ia-arg */
  box-shadow: 0 2px 8px rgba(38, 36, 33, .09), 0 1px 3px rgba(38, 36, 33, .06);
  transition: transform .32s cubic-bezier(.16, 1, .3, 1), box-shadow .32s cubic-bezier(.16, 1, .3, 1);
}
.vn-arg:hover {
  transform: translateY(-7px);
  box-shadow: 0 16px 40px rgba(38, 36, 33, .14), 0 4px 12px rgba(38, 36, 33, .09);
}
.vn-arg__check {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--burg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.vn-arg__title {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink);
  text-transform: uppercase;
  margin: 0 0 10px;
  line-height: 1.4;
}
.vn-arg__text {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  color: rgba(38, 36, 33, .6);
  line-height: 1.65;
  margin: 0;
}

/* ---------- 14 · NOS OFFRES ---------- */
.vn-offres { background: var(--vn-sable); padding: 40px; }
.vn-offres__head { max-width: 720px; margin: 0 auto 64px; text-align: center; }
.vn-offres__title {
  font-family: var(--serif);
  font-size: 60px;
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
}
.vn-offres__note {
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 400;
  color: var(--burg);
  margin: 16px 0 0;
}
.vn-offres__asterisque {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  color: rgba(38, 36, 33, .55);
  margin: 14px 0 0;
}

/* Deux cartes côte à côte. En sous-grille, chaque ligne a la même hauteur
   dans les deux cartes : une case « — » s'aligne sur sa voisine même
   quand le texte d'en face passe sur deux lignes. */
.vn-offres__cartes {
  max-width: 784px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 380px));
  grid-template-rows: repeat(8, auto);
  justify-content: center;
  column-gap: 24px;
}
.vn-offre {
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  background: var(--paper);
  border: 1px solid rgba(164, 128, 84, .25);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(38, 36, 33, .08);
  overflow: hidden;
  transition: transform .32s cubic-bezier(.16, 1, .3, 1), box-shadow .32s ease;
}
.vn-offre:hover { transform: translateY(-6px); box-shadow: 0 20px 36px rgba(38, 36, 33, .16); }
.vn-offre--vedette {
  background: var(--burg);
  border-color: rgba(164, 128, 84, .4);
  box-shadow: 0 16px 36px rgba(38, 36, 33, .18);
}
.vn-offre--vedette:hover { transform: translateY(-8px); box-shadow: 0 28px 48px rgba(38, 36, 33, .26); }
.vn-offre__row {
  padding: 22px 28px;
  text-align: center;
  border-bottom: 1px solid rgba(164, 128, 84, .2);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
}
.vn-offre__row:last-child { border-bottom: 0; }
.vn-offre__head { padding: 30px 28px 26px; }
.vn-offre__nom {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.vn-offre__pour {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 300;
  color: rgba(38, 36, 33, .5);
  line-height: 1.5;
  margin: 8px 0 0;
}
.vn-offre__val {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}
.vn-offre__sub {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  color: rgba(38, 36, 33, .55);
  line-height: 1.55;
  margin: 5px 0 0;
}
.vn-offre__row--vide .vn-offre__val { color: rgba(38, 36, 33, .3); }
.vn-offre--vedette .vn-offre__row { border-bottom-color: rgba(230, 223, 209, .15); }
.vn-offre--vedette .vn-offre__head { border-bottom-color: rgba(230, 223, 209, .2); }
.vn-offre--vedette .vn-offre__row:last-child { border-bottom: 0; }
.vn-offre--vedette .vn-offre__nom,
.vn-offre--vedette .vn-offre__val { color: var(--cream); }
.vn-offre--vedette .vn-offre__pour { color: rgba(230, 223, 209, .55); }
.vn-offre--vedette .vn-offre__sub { color: rgba(230, 223, 209, .65); }

.vn-cta-mid { text-align: center; margin-top: 48px; }

/* Carrousel tactile des offres (téléphone). Même composant que la page
   Amélioration d'image, piloté par initOffresCarousel (dessigne.js) : la carte
   active est centrée, les autres réduites et estompées. Cartes resserrées
   (lignes de 11 px de marge au lieu de 22) pour qu'une offre tienne presque
   entière à l'écran. */
.vn-offres__mobile { display: none; }
.vn-oc__viewport { position: relative; overflow: hidden; padding: 20px 0 12px; touch-action: pan-y; cursor: grab; }
.vn-oc__viewport:active { cursor: grabbing; }
/* La piste est une grille dont les cartes sont des sous-grilles : chaque ligne
   prend la même hauteur dans les deux cartes, comme sur ordinateur. Sans ça,
   Immersion s'étirait à la hauteur de Prestige et tout le surplus tombait
   sous sa dernière case, les tirets étant plus courts que leurs voisines. */
.vn-oc__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 236px;
  grid-template-rows: repeat(8, auto);
  column-gap: 14px;
  width: max-content;
  /* Marge d'une demi-fenêtre moins une demi-carte de chaque côté : le script
     plafonne le décalage à zéro, donc sans elle la première carte restait
     collée au bord gauche au lieu d'être centrée (visible avec deux offres). */
  padding: 0 calc(50% - 118px);
  transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}
.oc-card {
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  border-radius: 12px;
  overflow: hidden;
  transition: transform .4s cubic-bezier(.16, 1, .3, 1), opacity .4s ease;
}
.oc-card--clair {
  background: var(--paper);
  border: 1px solid rgba(164, 128, 84, .25);
  box-shadow: 0 8px 24px rgba(38, 36, 33, .08);
}
.oc-card--vedette {
  background: var(--burg);
  border: 1px solid rgba(164, 128, 84, .4);
  box-shadow: 0 16px 36px rgba(38, 36, 33, .18);
}
.oc-card__row {
  padding: 11px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  border-bottom: 1px solid rgba(164, 128, 84, .2);
}
.oc-card__row:last-child { border-bottom: 0; }
.oc-card__head { padding: 16px 14px 12px; }
.oc-card__nom {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.oc-card__pour {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 300;
  color: rgba(38, 36, 33, .5);
  line-height: 1.4;
  margin: 4px 0 0;
}
.oc-card__val {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}
.oc-card__sub {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 300;
  color: rgba(38, 36, 33, .55);
  line-height: 1.4;
  margin: 3px 0 0;
}
.oc-card__row--vide .oc-card__val { color: rgba(38, 36, 33, .3); }
.oc-card--vedette .oc-card__row { border-bottom-color: rgba(230, 223, 209, .15); }
.oc-card--vedette .oc-card__row:last-child { border-bottom: 0; }
.oc-card--vedette .oc-card__nom,
.oc-card--vedette .oc-card__val { color: var(--cream); }
.oc-card--vedette .oc-card__pour { color: rgba(230, 223, 209, .55); }
.oc-card--vedette .oc-card__sub { color: rgba(230, 223, 209, .65); }
.vn-oc__nav { display: flex; justify-content: center; align-items: center; margin-top: 16px; }
.vn-oc__dots { display: flex; gap: 8px; }
.vn-oc__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(38, 36, 33, .25);
  transition: background .25s;
  cursor: pointer;
}
.vn-oc__dot.is-active { background: var(--rouge); }

/* ---------- 15 · FAQ ---------- */
.vn-faq { background: var(--p2); padding: 80px; }
.vn-faq__head { max-width: 720px; margin: 0 0 48px 80px; }
.vn-faq__title {
  font-family: var(--serif);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0;
}
.vn-faq__list { max-width: 840px; display: flex; flex-direction: column; margin-left: 80px; }
.vn-faq__item { border-bottom: 1px solid rgba(38, 36, 33, .12); padding: 24px 0; }
.vn-faq__item:last-child { border-bottom: none; }
.vn-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  gap: 20px;
  list-style: none;
}
.vn-faq__item summary::-webkit-details-marker { display: none; }
.vn-faq__q { font-family: var(--sans); font-size: 18px; font-weight: 500; color: var(--ink); }
.vn-faq__a {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 300;
  color: rgba(38, 36, 33, .55);
  line-height: 1.65;
  margin: 16px 0 0;
  max-width: 680px;
}
.vn-faq__icon { flex: none; width: 20px; height: 20px; position: relative; transition: transform .25s; }
.vn-faq__icon::before,
.vn-faq__icon::after { content: ''; position: absolute; background: var(--burg); }
.vn-faq__icon::before { top: 9px; left: 0; width: 20px; height: 1.5px; }
.vn-faq__icon::after  { top: 0; left: 9px; width: 1.5px; height: 20px; }
.vn-faq__item[open] .vn-faq__icon { transform: rotate(45deg); }

/* ---------- 16 · CTA CROISÉE ---------- */
.vn-cta { background: var(--vn-noir-burg); padding: 50px 80px; text-align: center; }
.vn-cta__title {
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 400;
  color: #FFFFFF;
  line-height: 1.15;
  padding-bottom: 20px;
  margin: 0;
}
.vn-cta__actions { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.vn-cta__actions .svc-btn { font-size: 12px; padding: 18px 36px; letter-spacing: .22em; font-weight: 500; }

/* ---------- 17 · VISIONNEUSE PLEIN ÉCRAN ----------
   Créée à la demande par dessigne.js (vnOuvrirVisionneuse), rattachée au
   <body> : d'où le préfixe .dessigne-page, porté par le body. */
.vn-lb {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(8, 6, 5, .97);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s;
  touch-action: pan-y;
}
.vn-lb.is-open { opacity: 1; visibility: visible; transition: opacity .3s ease; }
.vn-lb__cadre { margin: 0; max-width: calc(100vw - 160px); max-height: calc(100vh - 120px); display: flex; }
.vn-lb__img { max-width: 100%; max-height: calc(100vh - 120px); object-fit: contain; display: block; }
.dessigne-page .vn-lb__btn {
  position: absolute;
  z-index: 1;
  padding: 0;
  border: 1px solid rgba(230, 223, 209, .08);
  border-radius: 0;
  background-color: rgba(20, 18, 16, .6);
  color: rgba(230, 223, 209, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  transition: background-color .24s ease, color .24s ease;
}
.dessigne-page .vn-lb__btn:hover,
.dessigne-page .vn-lb__btn:focus-visible {
  background-color: rgba(20, 18, 16, .9);
  color: var(--cream);
  border-color: rgba(230, 223, 209, .25);
  outline: none;
}
.dessigne-page .vn-lb__fermer { top: 24px; right: 28px; width: 44px; height: 44px; background-color: transparent; border-color: transparent; }
.dessigne-page .vn-lb__nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
.dessigne-page .vn-lb__nav--prev { left: 24px; }
.dessigne-page .vn-lb__nav--next { right: 24px; }
.vn-lb__compteur {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .22em;
  color: rgba(230, 223, 209, .4);
  white-space: nowrap;
}

/* ---------- 18 · PALIER 1200 PX : rangées d'identité empilées ----------
   Conséquence directe de la photo figée à 720 px : sous 1200 px il ne reste
   plus la place pour la colonne de texte à côté. La rangée passe en colonne,
   le texte avant l'image, et la photo reste plafonnée à 720 px. */
@media (max-width: 1200px) {
  .vn-etape { flex-direction: column; align-items: flex-start; gap: 24px; }
  .vn-etape__texte,
  .vn-etape--inverse .vn-etape__texte { flex: none; width: 100%; max-width: 720px; order: 1; }
  .vn-etape__media,
  .vn-etape--inverse .vn-etape__media { flex: none; width: 100%; max-width: 720px; order: 2; }
  .vn-etape { margin-left: auto; margin-right: auto; max-width: 720px; }

  /* Le motion design suit le même palier : en dessous de 1200 px, la liste
     à côté de la vidéo devenait une colonne étroite et deux fois plus haute
     qu'elle. La vidéo passe au-dessus, les quatre atouts en deux colonnes. */
  .vn-motion__detail { grid-template-columns: 1fr; gap: 36px; max-width: 900px; }
  .vn-motion__media { order: -1; }
  .vn-motion__liste { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 40px; }
}

/* ---------- 19 · TABLETTE ET TÉLÉPHONE ---------- */
@media (max-width: 860px) {

  /* Le hero garde le format horizontal de la vidéo (16/9) : rien n'est
     recadré. Titre plafonné à 40 px et proportionnel en dessous, pour
     tenir sur deux lignes sous la barre de navigation. */
  .vn-hero { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
  .vn-hero__inner { left: 22px; right: 22px; bottom: 24px; }
  .vn-hero__title { font-size: min(40px, 8.4vw); line-height: 1.02; }

  .vn-punch { padding: 40px 22px; }
  .vn-punch__text { font-size: 24px; line-height: 1.35; }
  .vn-legende { padding: 14px 22px; }
  .vn-band { padding: 32px 22px 24px; }
  .vn-band__title { font-size: 26px; line-height: 1.25; margin-bottom: 0; }

  .vn-video__corner { width: 28px; height: 28px; top: 18px; bottom: 18px; }
  .vn-video__corner--tl, .vn-video__corner--tr { bottom: auto; }
  .vn-video__corner--bl, .vn-video__corner--br { top: auto; }
  .vn-video__corner--tl, .vn-video__corner--bl { left: 18px; }
  .vn-video__corner--tr, .vn-video__corner--br { right: 18px; }
  .vn-video__play { width: 62px; height: 62px; }
  .vn-video__play svg { width: 20px; height: 22px; }

  .vn-duo { grid-template-columns: 1fr; gap: 18px; }
  .vn-titre { font-size: 30px; }
  .vn-texte { font-size: 14px; line-height: 1.6; }

  .vn-scenario { padding: 56px 22px; }
  .vn-scenario__texte p { font-size: 14px; line-height: 1.6; margin-bottom: 14px; }

  .vn-motion { padding: 56px 22px; }
  .vn-motion__head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 32px; }
  .vn-motion__lede { font-size: 14px; line-height: 1.6; padding-top: 0; }
  /* la vidéo passe au-dessus de la liste, qui la commente */
  .vn-motion__detail { gap: 28px; }
  .vn-motion__liste { grid-template-columns: 1fr; gap: 18px; }
  .vn-motion__item-titre { font-size: 22px; }
  .vn-motion__item-texte { font-size: 13px; line-height: 1.6; }

  .vn-visuels { padding: 56px 22px 32px; }
  .vn-visuels__gauche { padding-bottom: 0; }
  .vn-visuels__titre { font-size: 30px; margin-bottom: 14px; }
  .vn-visuels__accroche { font-size: 14px; line-height: 1.6; }
  .vn-visuels .vn-texte { font-size: 14px; }

  .vn-reportage { padding-bottom: 36px; }
  .dessigne-page .vn-gal__nav { width: 38px; height: 38px; }
  .dessigne-page .vn-gal__nav--prev { left: 10px; }
  .dessigne-page .vn-gal__nav--next { right: 10px; }
  .dessigne-page .vn-gal__thumb { width: 104px; }
  .vn-gal__thumbs { padding-left: 22px; padding-right: 22px; scroll-padding: 0 22px; }

  .vn-multiformat { padding: 56px 22px 40px; }
  .vn-multiformat__head { margin-bottom: 28px; }
  .vn-multiformat__titre { padding-bottom: 0; }
  /* Sur écran étroit, chaque cadre se dimensionne sur la largeur ou la
     hauteur selon son format : le 16/9 prend toute la largeur, le 9/16
     et le carré se calent sur la hauteur disponible. */
  .vn-gal--multiformat .vn-gal__stage { height: 400px; }
  .vn-fmt__cadre { max-width: 100%; }
  .vn-fmt--169 .vn-fmt__cadre { width: 100%; height: auto; }
  .vn-fmt--916 .vn-fmt__cadre { height: 320px; }
  .vn-fmt--11  .vn-fmt__cadre { width: min(100%, 290px); height: auto; }
  .vn-fmt__legende { font-size: 13px; }

  .vn-identite { padding: 56px 22px; }
  .vn-identite__head { margin-bottom: 32px; }
  .vn-etape { margin-bottom: 40px; max-width: none; }
  .vn-etape__texte,
  .vn-etape--inverse .vn-etape__texte,
  .vn-etape__media,
  .vn-etape--inverse .vn-etape__media { max-width: none; }
  .vn-etape__title { font-size: 24px; margin-bottom: 8px; }
  .vn-etape__text { font-size: 14px; line-height: 1.6; }

  .vn-surmesure { padding: 48px 22px; }
  .vn-surmesure__titre { margin-bottom: 16px; }
  .vn-surmesure__texte { font-size: 14px; line-height: 1.6; }

  .vn-args { padding: 48px 32px; }
  .vn-args__head { margin-bottom: 28px; }
  .vn-args__grid { grid-template-columns: 1fr; gap: 14px; }
  .vn-arg { padding: 16px; gap: 12px; box-shadow: none; }
  .vn-arg__check { width: 22px; height: 22px; }
  .vn-arg__check svg { width: 11px; height: 11px; }
  .vn-arg__title { font-size: 14px; margin-bottom: 5px; }
  .vn-arg__text { font-size: 13px; line-height: 1.5; }

  .vn-offres { padding: 48px 22px; }
  .vn-offres__head { margin-bottom: 28px; }
  .vn-offres__title { font-size: 36px; }
  .vn-offres__note { font-size: 14px; }
  .vn-offres__asterisque { font-size: 12px; margin-top: 16px; }
  /* sur téléphone, les offres défilent au doigt, une carte à la fois */
  .vn-offres__cartes { display: none; }
  .vn-offres__mobile { display: block; }
  .vn-cta-mid { margin-top: 28px; }

  .vn-faq { padding: 48px 22px; }
  .vn-faq__head { margin-left: 0; }
  .vn-faq__title { font-size: 36px; }
  .vn-faq__list { margin-left: 0; }
  .vn-faq__item summary { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; }
  .vn-faq__icon { order: -1; }
  .vn-faq__q { font-size: 14px; }
  .vn-faq__a { font-size: 14px; }

  .vn-cta { padding: 40px 22px; }
  .vn-cta__title { font-size: 28px; padding-bottom: 26px; }
  .vn-cta__actions { gap: 12px; }
  .vn-cta__actions .svc-btn { padding: 14px 22px; font-size: 11px; letter-spacing: .16em; }

  .vn-lb__cadre { max-width: 100vw; }
  .dessigne-page .vn-lb__nav { width: 40px; height: 40px; }
  .dessigne-page .vn-lb__nav--prev { left: 8px; }
  .dessigne-page .vn-lb__nav--next { right: 8px; }
  .dessigne-page .vn-lb__fermer { top: 14px; right: 14px; }
}