/* ---------------------------------------------------------------------------
   Montage vidéo
   ---------------------------------------------------------------------------
   La page hérite du système de refonte. Sa pièce propre est la piste de
   montage : l'objet que le monteur a sous les yeux toute la journée, et la
   seule façon de montrer un rythme sans vidéo. Chaque bloc est un plan, à la
   durée médiane relevée dans le genre ; la bande se dessine en CSS à partir
   de cette seule valeur, posée dans le contenu à côté de son libellé.
   --------------------------------------------------------------------------- */

/* ── Piste de montage ────────────────────────────────────────────────────── */

/* La piste est plus haute que le texte d'ouverture : centrés, les deux
   blocs laissaient un vide d'une centaine de pixels sous le titre. */
.aio-mtg .hero-in{align-items:start}

.aio-mtg .mtg-piste{
  margin:0;
  background:var(--nuit);
  border:1px solid var(--filet);
  border-radius:var(--r);
  padding:clamp(20px,2.4vw,26px);
}

.aio-mtg .mtg-piste-tete{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding-block-end:16px;
  margin-block-end:16px;
  border-block-end:1px solid var(--filet);
}

.aio-mtg .mtg-piste-t,
.aio-mtg .mtg-piste-e{
  font-family:'AzeretMono',ui-monospace,monospace;
  font-size:11.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--texte-3);
}

.aio-mtg .mtg-piste-e{white-space:nowrap}

/* La règle porte une graduation par seconde et une plus haute toutes les dix
   secondes : on lit l'échelle des bandes sans avoir à compter les blocs. */
.aio-mtg .mtg-regle{
  position:relative;
  block-size:30px;
  margin-block-end:14px;
  background:
    repeating-linear-gradient(90deg,var(--filet-fort) 0 1px,transparent 1px calc(100% / 30)) 0 100% / 100% 5px no-repeat,
    repeating-linear-gradient(90deg,var(--texte-3) 0 1px,transparent 1px calc(100% / 3)) 0 100% / 100% 10px no-repeat,
    linear-gradient(var(--texte-3),var(--texte-3)) 100% 100% / 1px 10px no-repeat;
  box-shadow:inset 0 -1px var(--filet-fort);
}

.aio-mtg .mtg-regle span{
  position:absolute;
  inset-block-start:0;
  font-family:'AzeretMono',ui-monospace,monospace;
  font-size:11px;
  line-height:1;
  color:var(--texte-3);
  font-variant-numeric:tabular-nums;
}

.aio-mtg .mtg-regle span:nth-child(1){inset-inline-start:0}
.aio-mtg .mtg-regle span:nth-child(2){inset-inline-start:calc(100% / 3);transform:translateX(-50%)}
.aio-mtg .mtg-regle span:nth-child(3){inset-inline-start:calc(200% / 3);transform:translateX(-50%)}
.aio-mtg .mtg-regle span:nth-child(4){inset-inline-end:0}

.aio-mtg .mtg-pistes{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:16px;
}

.aio-mtg .mtg-p-n{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:2px 12px;
  margin:0 0 7px;
  font-size:14px;
  line-height:1.4;
  color:var(--texte);
}

.aio-mtg .mtg-p-v{
  font-family:'AzeretMono',ui-monospace,monospace;
  font-size:12px;
  color:var(--texte-2);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* Un plan = un bloc de --plan secondes sur trente, séparé du suivant par
   une coupe de deux pixels. Le filet clair en tête de bloc reprend celui
   des clips dans un logiciel de montage. */
.aio-mtg .mtg-bande{
  --pas:calc(var(--plan) / 30 * 100%);
  display:block;
  block-size:26px;
  border-radius:4px;
  background:
    repeating-linear-gradient(90deg,color-mix(in srgb,var(--filet-fort),var(--texte-3) 45%) 0 calc(var(--pas) - 2px),transparent calc(var(--pas) - 2px) var(--pas)) 0 0 / 100% 2px no-repeat,
    repeating-linear-gradient(90deg,var(--filet-fort) 0 calc(var(--pas) - 2px),var(--nuit) calc(var(--pas) - 2px) var(--pas));
}

.aio-mtg .mtg-piste-fin{
  margin-block-start:18px;
  padding-block-start:16px;
  border-block-start:1px solid var(--filet);
  font-size:13px;
  line-height:1.6;
  color:var(--texte-3);
}

/* ── Les cinq opérations ─────────────────────────────────────────────────── */

.aio-mtg .mtg-chaine{
  list-style:none;
  margin:clamp(28px,3.5vw,40px) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(20px,2.4vw,28px);
}

/* Une vraie séquence : le numéro est l'ordre de passage, posé sur un filet
   qui se lit comme la piste découpée en cinq segments. */
.aio-mtg .mtg-chaine li{
  display:grid;
  gap:10px;
  align-content:start;
  padding-block-start:14px;
  border-block-start:2px solid var(--filet-fort);
}

.aio-mtg .mtg-n{
  font-family:'AzeretMono',ui-monospace,monospace;
  font-size:12px;
  color:var(--texte-3);
}

.aio-mtg .mtg-chaine h3{
  margin-block-end:6px;
  font-size:16px;
}

.aio-mtg .mtg-chaine p{
  margin:0;
  font-size:14.5px;
  line-height:1.62;
  color:var(--texte-2);
}

/* ── Formules ────────────────────────────────────────────────────────────── */

.aio-mtg .mtg-paliers{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.2vw,24px);
  align-items:stretch;
}

/* Aucune formule n'est mise en avant : rien ne dit aujourd'hui laquelle se
   commande le plus, et un badge sans mesure serait une affirmation gratuite. */
.aio-mtg .mtg-p{
  display:flex;
  flex-direction:column;
  background:var(--sol);
  border:1px solid var(--filet);
  border-radius:var(--r);
  padding:clamp(22px,2.6vw,28px);
}

.aio-mtg .mtg-p-titre{
  font-size:17px;
}

.aio-mtg .mtg-p-x{
  margin:12px 0 0;
  font-family:'AzeretMono',ui-monospace,monospace;
  font-size:30px;
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.03em;
  color:var(--texte);
}

.aio-mtg .mtg-p-d{
  margin:12px 0 0;
  font-size:14.5px;
  line-height:1.6;
  color:var(--texte-2);
}

.aio-mtg .mtg-p-l{
  margin:auto 0 0;
  padding-block-start:20px;
}

.aio-mtg .mtg-p-l div{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  padding-block:10px;
  border-block-start:1px solid var(--filet);
}

.aio-mtg .mtg-p-l dt{
  font-size:13px;
  color:var(--texte-3);
}

.aio-mtg .mtg-p-l dd{
  margin:0;
  font-size:14px;
  color:var(--texte);
  text-align:end;
}

.aio-mtg .mtg-perimetre{
  margin-block-start:clamp(24px,3vw,32px);
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
}

.aio-mtg .mtg-hors{
  padding:clamp(22px,2.6vw,28px);
  border:1px solid var(--filet);
  border-inline-start:2px solid var(--filet-fort);
  border-radius:var(--r);
}

.aio-mtg .mtg-hors h3{margin-block-end:14px}

/* ── Rythme par genre ────────────────────────────────────────────────────── */

.aio-mtg .mtg-table{overflow-x:auto}

.aio-mtg .mtg-table .reg{margin-block-start:0}

.aio-mtg .mtg-table th:not(:first-child),
.aio-mtg .mtg-table td:not(:first-child){text-align:end}

.aio-mtg .mtg-table td:not(:first-child){
  font-family:'AzeretMono',ui-monospace,monospace;
  font-size:14px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* ── Films de démonstration ──────────────────────────────────────────────── */

/* Sept films verticaux et un encadré : deux rangées de quatre sur grand
   écran. Sous chaque film, sa propre bande de montage, dessinée comme celles
   de l'ouverture à partir de la durée moyenne de ses plans. Les vidéos ne se
   chargent qu'au clic (preload none) : seules les affiches pèsent sur la page. */
.aio-mtg .mtg-films{
  list-style:none;
  margin:clamp(28px,3.5vw,40px) 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(28px,3vw,36px) clamp(18px,2.2vw,24px);
}

.aio-mtg .mtg-film{margin:0}

.aio-mtg .mtg-film video{
  display:block;
  inline-size:100%;
  block-size:auto;
  aspect-ratio:9 / 16;
  object-fit:cover;
  background:var(--nuit);
  border:1px solid var(--filet);
  border-radius:var(--r);
}

.aio-mtg .mtg-film figcaption{margin-block-start:14px}

.aio-mtg .mtg-f-t{
  margin:0;
  font-size:16px;
  font-weight:600;
  line-height:1.35;
  color:var(--texte);
}

.aio-mtg .mtg-f-t span{
  display:block;
  font-size:13.5px;
  font-weight:400;
  color:var(--texte-3);
}

.aio-mtg .mtg-f-m{
  margin:10px 0 0;
  font-family:'AzeretMono',ui-monospace,monospace;
  font-size:12px;
  color:var(--texte-2);
  font-variant-numeric:tabular-nums;
}

.aio-mtg .mtg-film .mtg-bande{
  block-size:12px;
  margin-block:8px 12px;
  border-radius:3px;
}

.aio-mtg .mtg-f-g{
  margin:0;
  font-size:14px;
  line-height:1.58;
  color:var(--texte-2);
}

.aio-mtg .mtg-films-fin{display:flex}

.aio-mtg .mtg-films-fin .encadre{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
  inline-size:100%;
  min-inline-size:0;
}

.aio-mtg .mtg-films-fin h3,
.aio-mtg .mtg-films-fin p{margin:0}

.aio-mtg .mtg-films-fin p{
  font-size:14.5px;
  line-height:1.6;
  color:var(--texte-2);
}

/* La colonne fait 250 px sur grand écran : le bouton prend toute la largeur
   et peut passer sur deux lignes plutôt que de pousser l'encadré hors grille. */
.aio-mtg .mtg-films-fin .btn{
  align-self:stretch;
  justify-content:center;
  text-align:center;
  white-space:normal;
}

.aio-mtg .mtg-films-fin .mtg-f-note{
  font-size:12.5px;
  color:var(--texte-3);
}

/* ── Mention de fraîcheur ────────────────────────────────────────────────── */

.aio-mtg .mtg-maj{
  margin-block-start:clamp(28px,3.5vw,36px);
  font-family:'AzeretMono',ui-monospace,monospace;
  font-size:11.5px;
  letter-spacing:.03em;
  color:var(--texte-3);
}

/* ── Adaptations ─────────────────────────────────────────────────────────── */

@media (max-width:1100px){
  .aio-mtg .mtg-chaine{grid-template-columns:repeat(3,minmax(0,1fr));}
  .aio-mtg .mtg-films{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* Sur téléphone, les films défilent en rail : un film presque plein écran,
   le suivant qui dépasse au bord dit qu'il y en a d'autres. */
@media (max-width:640px){
  .aio-mtg .mtg-films{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:78%;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-block-end:14px;
  }
  .aio-mtg .mtg-films > li{scroll-snap-align:start}
}

@media (max-width:900px){
  .aio-mtg .mtg-paliers{grid-template-columns:1fr;}
}

@media (max-width:960px){
  .aio-mtg .mtg-perimetre{grid-template-columns:1fr;}
}

@media (max-width:700px){
  .aio-mtg .mtg-chaine{grid-template-columns:1fr;}
}

@media (max-width:640px){
  .aio-mtg .mtg-piste-tete{flex-direction:column;gap:6px;}
  .aio-mtg .mtg-table th,
  .aio-mtg .mtg-table td{padding-inline-end:12px;}
}