/* Réalisations — Alexis Briend
   Le site est un découpage technique : chaque réalisation est un plan, avec sa valeur (plan large,
   insert, plan-séquence…) ; la largeur de son titre (axe wdth de Science Gothic) suit cette valeur.
   Trois lumières : la salle (noir), le papier, le blanc. Une seule couleur vive, le rouge, réservée
   aux marques et au voyant ; le bleu est celui de la scripte, pour ses notes.
   La chasse des titres et les gabarits de la polyvision sont ajoutés en fin de fichier par
   construire.py. */

/* ---- polices ---- */
@font-face {
  font-family: "Science Gothic";
  src: url("/polices/science-gothic.woff2") format("woff2");
  font-weight: 500 900;
  font-stretch: 50% 200%;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/polices/instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/polices/instrument-sans-italique.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("/polices/courier-prime.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("/polices/courier-prime-gras.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("/polices/courier-prime-italique.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---- jetons ---- */
:root {
  --papier: #EFEEEA;
  --encre: #141311;
  --encre-douce: #57534C;
  --bleu: #2440D8;
  --bleu-nuit: #8EA1FF;
  --rouge: #E3361F;
  --salle: #0E0D0C;
  --craie: #F4F2EC;
  --craie-douce: #A9A49A;
  --blanc: #FFFFFF;

  --f-titre: "Science Gothic", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-texte: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-scripte: "Courier Prime", "Courier New", Courier, monospace;

  --marge: clamp(1rem, 4.5vw, 4.5rem);
  --large-max: 104rem;
  --gouttiere: max(var(--marge), (100% - var(--large-max)) / 2);
  --bande-h: 3.25rem;
  --sauf-bas: env(safe-area-inset-bottom, 0px);
  --titre-max: 9rem;
  --plan-pad: clamp(4.5rem, 11vw, 9.5rem);
  --douce: cubic-bezier(.2, .7, .2, 1);

  /* valeurs par défaut (lumière papier), redéfinies par chaque lumière */
  --fond: var(--papier);
  --texte: var(--encre);
  --texte-doux: var(--encre-douce);
  --scripte: var(--bleu);
  --filet: rgb(20 19 17 / .16);
  --filet-fort: rgb(20 19 17 / .55);
}
@media (min-width: 760px) {
  :root { --bande-h: 3.5rem; --titre-max: 12rem; }
}
@media (min-width: 1100px) {
  :root { --titre-max: 15rem; }
}

/* ---- les trois lumières ---- */
.lumiere-papier,
.lumiere-blanc {
  --texte: var(--encre);
  --texte-doux: var(--encre-douce);
  --scripte: var(--bleu);
  --filet: rgb(20 19 17 / .16);
  --filet-fort: rgb(20 19 17 / .55);
  color-scheme: light;
  background: var(--fond);
  color: var(--texte);
}
.lumiere-papier { --fond: var(--papier); }
.lumiere-blanc { --fond: var(--blanc); }
.lumiere-salle,
.bande,
.projection {
  --fond: var(--salle);
  --texte: var(--craie);
  --texte-doux: var(--craie-douce);
  --scripte: var(--bleu-nuit);
  --filet: rgb(244 242 236 / .16);
  --filet-fort: rgb(244 242 236 / .5);
  color-scheme: dark;
  background: var(--fond);
  color: var(--texte);
}
/* la lumière d'un plan, en pastille (découpage) ou en segment (bande) */
.lumiere-salle-marque { --marque: var(--salle); }
.lumiere-papier-marque { --marque: var(--papier); }
.lumiere-blanc-marque { --marque: var(--blanc); }

/* ---- base ---- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--salle);
  scroll-padding-bottom: calc(var(--bande-h) + var(--sauf-bas) + 1.5rem);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  padding-bottom: calc(var(--bande-h) + var(--sauf-bas));
  background: var(--papier);
  color: var(--encre);
  font: 400 1.0625rem/1.55 var(--f-texte);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
/* sur body, overflow est reporté sur la fenêtre et ne retient plus rien sur mobile : on rogne le film lui-même */
main { overflow-x: clip; }
img, video, svg, iframe { display: block; max-width: 100%; }
img, video { height: auto; }
p, h1, h2, h3, dl, dd, figure, blockquote, ol, ul { margin: 0; }
h1, h2, h3 { font-size: inherit; font-weight: inherit; }
ol, ul { padding: 0; }
ol[role="list"], ul[role="list"], .depots, .journal,
.raccord__reperes, .raccord__communs, .sommaire__liste, .decoupage__plans { list-style: none; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
button, input, select { font: inherit; color: inherit; }
code { font-family: var(--f-scripte); font-size: .94em; white-space: nowrap; }
/* posé par le build sur les prénoms composés, identifiants et adresses : pas de coupure à leur trait d'union */
.insecable { white-space: nowrap; }
sup { font-size: .7em; line-height: 0; }
::selection { background: var(--bleu); color: var(--craie); }
:focus-visible { outline: 3px solid var(--scripte); outline-offset: 3px; }
[hidden] { display: none !important; }
[tabindex="-1"]:focus { outline: none; }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i {
  width: 1.15em; height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: square;
}
html.sans-js .js-seul { display: none !important; }
html.js .sans-js-seul { display: none !important; }

.evitement {
  position: fixed; z-index: 100; left: 1rem; top: 1rem;
  padding: .8rem 1.1rem;
  background: var(--encre); color: var(--craie);
  font-weight: 600; text-decoration: none;
  transform: translateY(-200%);
}
.evitement:focus { transform: none; }

/* ---- éléments communs ---- */
.voyant {
  display: inline-block;
  width: .55rem; height: .55rem;
  border-radius: 50%;
  background: var(--rouge);
  flex: none;
}

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 2.75rem;
  padding: .55em 1.05em;
  border: 1.5px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: 600 .9375rem/1.1 var(--f-texte);
  letter-spacing: .005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
  -webkit-tap-highlight-color: transparent;
}
.bouton:hover { background: var(--texte); color: var(--fond); border-color: var(--texte); }
.bouton--plein { background: var(--texte); color: var(--fond); border-color: var(--texte); }
.bouton--plein:hover { background: transparent; color: var(--texte); }
.bouton--petit { min-height: 2.25rem; padding: .4em .8em; font-size: .875rem; }
@media (pointer: coarse) { .bouton--petit { min-height: 2.75rem; } }
.bouton--icone { width: 2.75rem; padding: 0; }
.bouton[aria-pressed="true"] { background: var(--texte); color: var(--fond); border-color: var(--texte); }
.bouton--tourner {
  min-height: 3rem;
  padding-inline: 1.1em 1.3em;
  background: var(--texte); color: var(--fond); border-color: var(--texte);
  font-size: .8125rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
}
.bouton--tourner:hover { background: var(--fond); color: var(--texte); }
.bouton--tourner:hover .voyant,
.bouton--tourner:focus-visible .voyant { animation: clignote 1s steps(2, jump-none) infinite; }
@keyframes clignote { 50% { opacity: .15; } }

/* l'ardoise : le clap de chaque plan */
.ardoise {
  display: flex; flex-wrap: wrap;
  width: fit-content; max-width: 100%;
  margin-bottom: clamp(1rem, 2.5vw, 1.75rem);
  border: 1px solid var(--filet-fort);
  font: 400 .8125rem/1.2 var(--f-scripte);
  letter-spacing: .02em;
}
.ardoise > span {
  display: flex; align-items: center; gap: .4em;
  padding: .5rem .7rem;
  border-right: 1px solid var(--filet-fort);
}
.ardoise > span:last-child { border-right: 0; }
.ardoise__clap {
  width: 2.4rem;
  padding: 0 !important;
  background: repeating-linear-gradient(-55deg, var(--texte) 0 .32rem, transparent .32rem .64rem);
}
.ardoise__cle { color: var(--texte-doux); text-transform: uppercase; font-size: .9em; }
.ardoise__valeur { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.ardoise__glose { font-style: italic; color: var(--texte-doux); }
@media (max-width: 759.98px) {
  /* plan et séquence, puis la valeur qui prend le reste de la ligne ; la glose dessous */
  .ardoise { display: grid; grid-template-columns: 2.4rem auto auto minmax(0, 1fr); width: 100%; }
  .ardoise__valeur { grid-column: 4; border-right: 0 !important; }
  .ardoise__glose { grid-column: 1 / -1; border-top: 1px solid var(--filet-fort); }
}
@media (max-width: 359.98px) {
  /* à 320 px, « CONTRECHAMP » ne tient dans la dernière case qu'en resserrant les autres */
  .ardoise > span { padding-inline: .45rem; }
}

/* les titres : la largeur suit la valeur du plan, la taille remplit la ligne */
.plan, .sequence, .carton, .fin, .decoupage, .introuvable,
.tia__tete, .vertical__tete, .horschamp__tete { container-type: inline-size; }
.titre {
  font-family: var(--f-titre);
  font-weight: 800;
  font-stretch: calc(var(--largeur, 100) * 1%);
  text-transform: uppercase;
  line-height: .94; /* les accents des capitales montent à 0,9 em : en dessous, ils mordent sur la ligne d'avant */
  letter-spacing: 0;
}
.titre__nom {
  display: block;
  font-size: min(var(--titre-max), 100cqi / var(--chasse, 8));
}
.titre__sous {
  display: block;
  margin-top: .45em;
  font-family: var(--f-texte);
  font-weight: 500;
  font-style: italic;
  font-stretch: 100%;
  text-transform: none;
  font-size: clamp(1.375rem, 3.2vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -.01em;
}
@media (max-width: 759.98px) {
  .titre { font-stretch: calc(var(--largeur-m, 100) * 1%); }
  .titre__nom { font-size: min(var(--titre-max), 100cqi / var(--chasse-m, 8)); }
}

.legende {
  margin-top: .7rem;
  font: 400 .8125rem/1.45 var(--f-scripte);
  color: var(--texte-doux);
}
.legende--large { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1.5rem; }

/* la fiche : ce que c'est, ce qu'il y a fait, crédits, statut */
.fiche { display: grid; border-top: 1px solid var(--filet-fort); }
.fiche__ligne {
  display: grid; gap: .3rem;
  padding: 1rem 0 1.1rem;
  border-bottom: 1px solid var(--filet);
}
.fiche dt {
  font: 400 .8125rem/1.35 var(--f-scripte);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texte-doux);
}
.fiche dd {
  max-width: 40em;
  font-size: clamp(1.0625rem, 1.15vw, 1.1875rem);
  line-height: 1.5;
  text-wrap: pretty;
}
@media (min-width: 760px) {
  .fiche__ligne { grid-template-columns: 10.5rem minmax(0, 1fr); gap: 1.5rem; }
  .fiche dt { padding-top: .32em; }
}

.statut {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .42em .65em .38em;
  border: 1px solid currentColor;
  max-width: 100%;
  font: 700 .8125rem/1.15 var(--f-scripte);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.statut::before { content: ""; width: .62em; height: .62em; background: currentColor; flex: none; align-self: flex-start; margin-top: .26em; }
.statut--demo::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); box-shadow: inset 0 0 0 1px currentColor; }
.statut--archive::before { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.lien-sortie {
  display: inline-flex; align-items: center; gap: .35em;
  min-height: 2.75rem;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
  overflow-wrap: anywhere;
}
.lien-sortie:hover { color: var(--scripte); text-decoration-thickness: 2px; }
.actions__note {
  max-width: 36em;
  margin-top: .75rem;
  font: 400 .875rem/1.45 var(--f-scripte);
  color: var(--texte-doux);
}

/* la note de la scripte, au stylo bleu */
.note {
  max-width: 34em;
  padding-left: 1rem;
  border-left: 2px solid var(--scripte);
  font: 400 .9375rem/1.5 var(--f-scripte);
  color: var(--scripte);
  text-wrap: pretty;
}
.note__qui { font-weight: 700; }

.boucle, .film__ecran video { width: 100%; background: #000; }
/* affiches en réserve (build) : sans script, la copie sous <noscript> prend la place de la vidéo, sans boîte de plus.
   Jamais hors de cette requête : avec script, le contenu de <noscript> est du texte brut, que display: contents afficherait */
@media (scripting: none) {
  noscript { display: contents; }
  video[data-poster] { display: none; }
}

/* ---- bande de montage ---- */
.bande {
  position: fixed; z-index: 50; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: .15rem;
  height: calc(var(--bande-h) + var(--sauf-bas));
  padding: 0 max(.35rem, env(safe-area-inset-right)) var(--sauf-bas) max(.35rem, env(safe-area-inset-left));
  border-top: 1px solid rgb(244 242 236 / .14);
  font: 600 .875rem/1 var(--f-texte);
}
/* les commandes seulement : les segments de la piste sont des liens eux aussi, et gardent leur taille et leur couleur */
.bande > a, .bande > button {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 2.75rem; min-width: 2.75rem;
  padding: 0 .65rem;
  border: 0; background: none;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.bande > a:hover, .bande > button:hover { color: var(--bleu-nuit); }
/* quand la place manque, seuls la piste et le plan courant (qui a son ellipse) rétrécissent */
.bande__arret, .bande__nom, .bande__ecrire { flex-shrink: 0; }
.bande .i { width: 1.25rem; height: 1.25rem; }
.bande__arret { justify-content: center; }
.bande__nom { font-family: var(--f-titre); font-weight: 800; font-stretch: 100%; text-transform: uppercase; letter-spacing: .02em; justify-content: center; }
.bande__voyant { width: .6rem; height: .6rem; border-radius: 50%; background: var(--rouge); flex: none; }
.bande__courant { flex: 1 1 auto; min-width: 0; }
.bande__courant-texte { overflow: hidden; text-overflow: ellipsis; font-family: var(--f-scripte); font-weight: 400; }
.bande .bande__ecrire { background: var(--craie); color: var(--salle); padding-inline: .9rem 1rem; }
.bande .bande__ecrire:hover { background: var(--bleu-nuit); color: var(--salle); }
.bande__piste {
  position: absolute; left: 0; right: 0; top: -4px;
  display: flex; gap: 1px;
  height: 4px;
}
.bande__seg { position: relative; flex: 1 1 0; min-width: 1px; background: var(--marque); }
.bande .lumiere-salle-marque { --marque: #3B3733; }
.bande__seg--seq { opacity: .55; }
.bande__tete {
  position: absolute; top: -4px; left: 0;
  width: 2px; height: calc(100% + 8px);
  background: var(--rouge);
  will-change: transform;
}
/* sous 1100 px, l'arrêt sur image n'est plus qu'une icône (son nom reste lu) : la place va au plan courant */
@media (max-width: 1099.98px) {
  .bande__arret-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 759.98px) {
  .bande__nom-texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bande .bande__courant { padding-inline: .4rem; }
  /* 4 px au ras des commandes : ici la piste n'est qu'un indicateur, elle ne prend pas le doigt */
  .bande__piste { pointer-events: none; }
}
@media (min-width: 760px) {
  .bande { gap: .5rem; padding-inline: max(.75rem, env(safe-area-inset-left)) max(.75rem, env(safe-area-inset-right)); }
  .bande__piste { position: relative; top: auto; flex: 1 1 40%; height: 1.1rem; gap: 2px; }
  .bande__seg { height: 100%; transition: transform .15s; }
  .bande__seg:hover { transform: scaleY(1.35); }
  .bande__seg:hover::after {
    content: attr(data-titre);
    position: absolute; bottom: calc(100% + .7rem); left: 50%;
    transform: translateX(-50%) scaleY(.74);
    padding: .4rem .6rem;
    background: var(--craie); color: var(--salle);
    font: 400 .75rem/1 var(--f-scripte);
    white-space: nowrap;
    pointer-events: none;
  }
  .bande__courant { flex: 0 1 19rem; }
}

/* ---- ouverture : la polyvision ---- */
.ouverture { position: relative; }
.polyvision {
  --rang: 27vw;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  background: #000;
}
@media (min-width: 760px) {
  .polyvision { --rang: clamp(7.5rem, 15vw, 10.5rem); grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .polyvision {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    height: calc(100svh - var(--bande-h) - var(--sauf-bas));
    min-height: 40rem;
    max-height: 70rem;
  }
}
.carton {
  grid-area: c;
  display: flex; flex-direction: column; gap: clamp(.85rem, 1.6vw, 1.25rem);
  min-width: 0;
  padding: clamp(1.25rem, 5vw, 2.5rem) var(--marge) clamp(1.75rem, 6vw, 2.75rem);
  background: var(--salle);
}
@media (min-width: 1100px) {
  .carton { padding: clamp(1.5rem, 2.6vw, 2.75rem); justify-content: space-between; }
}
.carton__ardoise {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--filet-fort);
  font: 400 .8125rem/1.2 var(--f-scripte);
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--texte-doux);
}
.carton__ardoise span:first-child { color: var(--texte); font-weight: 700; }
.carton__nom {
  margin-top: .15em;
  font-family: var(--f-titre);
  font-weight: 800;
  font-stretch: 112%;
  text-transform: uppercase;
  line-height: .84;
  font-size: min(11rem, 100cqi / var(--chasse));
}
@media (max-width: 759.98px) {
  .carton__nom { font-size: min(11rem, 100cqi / var(--chasse-m)); }
}
.carton__metier {
  display: flex; align-items: center; flex-wrap: wrap; gap: .25em .6em;
  font-family: var(--f-titre); font-weight: 650; font-stretch: 100%;
  text-transform: uppercase; letter-spacing: .03em;
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  line-height: 1.1;
}
.carton__point { width: .5em; height: .5em; border-radius: 50%; background: var(--rouge); }
.carton__phrase {
  max-width: 33em;
  font-size: clamp(1.125rem, 1.45vw, 1.3rem);
  line-height: 1.42;
  text-wrap: pretty;
}
.carton__mode {
  max-width: 40em;
  font: 400 .9375rem/1.45 var(--f-scripte);
  color: var(--scripte);
  text-wrap: pretty;
}
.carton__preuves { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font: 400 .875rem/1.35 var(--f-scripte); color: var(--texte); }
.carton__preuves li { display: flex; align-items: baseline; gap: .5rem; }
.carton__preuves li::before { content: ""; flex: none; width: .45em; height: .45em; border-radius: 50%; background: var(--rouge); transform: translateY(-.1em); }
.carton__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.carton__aide {
  display: flex; align-items: center; gap: .6rem;
  font: 400 .8125rem/1.3 var(--f-scripte);
  color: var(--texte-doux);
}
.carton__aide::before { content: ""; width: 1.6rem; height: 1px; background: currentColor; }

.panneau {
  position: relative;
  display: block;
  min-height: 0;
  overflow: hidden;
  background: #000;
  color: var(--craie);
  text-decoration: none;
}
.panneau--h { grid-area: h; }
.panneau--t { grid-area: t; }
.panneau--k { grid-area: k; }
.panneau--m { grid-area: m; }
.panneau--a { grid-area: a; }
.panneau--p { grid-area: p; }
.panneau--r { grid-area: r; }
.panneau--o { grid-area: o; }
.panneau .boucle {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--douce), opacity .4s;
}
.panneau--h .boucle { object-position: 30% 50%; }
.panneau--a .boucle { object-position: 72% 50%; }
.panneau--o .boucle { object-position: 0 0; }
.panneau--m .boucle { object-position: 20% 50%; }
.panneau--r .boucle { object-position: 50% 30%; }
.panneau:hover .boucle { transform: scale(1.045); }
.panneau__legende {
  position: absolute; left: 0; bottom: 0;
  display: flex; gap: .55em;
  max-width: 100%;
  padding: .38rem .55rem .32rem;
  background: var(--salle);
  font: 400 .75rem/1.2 var(--f-scripte);
  text-transform: uppercase; letter-spacing: .05em;
  transition: background-color .2s, color .2s;
}
.panneau__n { color: var(--craie-douce); }
/* l'ellipse rogne la boîte : on l'agrandit en hauteur (sans changer la légende) pour garder les accents des capitales */
.panneau__titre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-block: .3em; margin-block: -.3em; }
.panneau:hover .panneau__legende,
.panneau:focus-visible .panneau__legende { background: var(--craie); color: var(--salle); }
.panneau:hover .panneau__n,
.panneau:focus-visible .panneau__n { color: var(--salle); }
.panneau:focus-visible { outline: 3px solid var(--bleu-nuit); outline-offset: -3px; }

/* ---- le découpage ---- */
.decoupage { padding: var(--plan-pad) var(--gouttiere); }
.decoupage__tete { display: grid; gap: 1.1rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.decoupage__tete .ardoise { margin-bottom: .25rem; }
.decoupage__titre {
  font-family: var(--f-titre); font-weight: 800; font-stretch: 100%;
  text-transform: uppercase;
  /* le plancher cède quand le mot le plus long (--chasse-mot, mesurée par le build) ne tiendrait plus dans la ligne */
  font-size: clamp(min(2.75rem, 100cqi / var(--chasse-mot, 9)), 9cqi, 8rem);
  line-height: .94;
}
.decoupage__chapeau { max-width: 42em; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); text-wrap: pretty; }
.decoupage__colonnes { display: none; }
.decoupage__seq {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .9rem;
  padding: 2.25rem 0 .7rem;
  border-bottom: 1px solid var(--filet-fort);
  font-family: var(--f-titre); font-weight: 800; font-stretch: 100%;
  text-transform: uppercase;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1;
  text-wrap: balance; /* « Archives et / hors-champ » plutôt que « hors- / champ » sur téléphone */
}
.decoupage__seq-n {
  font: 400 .8125rem/1 var(--f-scripte);
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--texte-doux);
}
.decoupage__plan {
  position: relative;
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  grid-template-areas: "n valeur" "vignette sujet" "vignette statut";
  gap: .35rem 1rem;
  padding: 1.1rem 0 1.2rem;
  border-bottom: 1px solid var(--filet);
  transition: background-color .2s;
}
.decoupage__n { grid-area: n; display: flex; align-items: center; gap: .5rem; font: 700 .875rem/1.2 var(--f-scripte); }
.decoupage__n::before { content: ""; width: .8rem; height: .8rem; background: var(--marque); box-shadow: inset 0 0 0 1px var(--encre); flex: none; }
.decoupage__valeur { grid-area: valeur; font: 400 .8125rem/1.3 var(--f-scripte); text-transform: uppercase; letter-spacing: .05em; color: var(--texte-doux); align-self: center; }
.decoupage__vignette {
  grid-area: vignette;
  width: 5.5rem; height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: 50% 0;
  background: var(--encre);
  margin-top: .2rem;
}
.decoupage__vignette--vide {
  display: block;
  background: transparent;
  border: 1px dashed var(--filet-fort);
}
.decoupage__sujet { grid-area: sujet; display: grid; gap: .3rem; }
.decoupage__lien {
  font-family: var(--f-titre); font-weight: 800; font-stretch: 100%;
  text-transform: uppercase;
  /* la colonne du sujet vaut 100cqi moins la vignette (5,5rem) et l'écart (1rem) : le titre cède avant que son mot le
     plus long (--chasse-mot, mesurée par le build) en sorte, « Reproducibility » sur un petit téléphone */
  font-size: min(clamp(1.25rem, 2vw, 1.6rem), (100cqi - 6.5rem) / var(--chasse-mot, 9));
  line-height: .95;
  text-decoration: none;
}
.decoupage__lien::after { content: ""; position: absolute; inset: 0; }
.decoupage__sous { font-family: var(--f-texte); font-weight: 500; font-style: italic; text-transform: none; font-size: .78em; }
.decoupage__resume { max-width: 40em; font-size: .9375rem; line-height: 1.45; color: var(--texte-doux); text-wrap: pretty; }
.decoupage__statut { grid-area: statut; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; margin-top: .3rem; }
.decoupage__nature { font: 400 .8125rem/1.3 var(--f-scripte); color: var(--texte-doux); }
.decoupage__plan:hover { background: rgb(20 19 17 / .045); }
.decoupage__plan:hover .decoupage__lien { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.decoupage__plan:focus-within { outline: 3px solid var(--scripte); outline-offset: 2px; }
.decoupage__lien:focus-visible { outline: none; }
@media (min-width: 1100px) {
  .decoupage__colonnes,
  .decoupage__plan {
    grid-template-columns: 4rem 13.5rem 8rem minmax(0, 1fr) 15rem;
    grid-template-areas: "n valeur vignette sujet statut";
    gap: 1.5rem;
    align-items: start;
  }
  .decoupage__colonnes {
    display: grid;
    padding-bottom: .55rem;
    border-bottom: 1px solid var(--filet-fort);
    font: 400 .75rem/1.2 var(--f-scripte);
    text-transform: uppercase; letter-spacing: .07em;
    color: var(--texte-doux);
  }
  .decoupage__plan { padding: 1.25rem .5rem 1.35rem; margin-inline: -.5rem; }
  /* cinq colonnes : celle du sujet vaut 100cqi moins 40,5rem de colonnes fixes et 6rem d'écarts */
  .decoupage__lien { font-size: min(clamp(1.25rem, 2vw, 1.6rem), (100cqi - 46.5rem) / var(--chasse-mot, 9)); }
  .decoupage__vignette { width: 8rem; margin-top: 0; }
  .decoupage__valeur { align-self: start; padding-top: .15rem; }
  .decoupage__n { padding-top: .1rem; }
  .decoupage__statut { flex-direction: column; align-items: flex-start; margin-top: 0; }
}

/* ---- séquences : les intertitres ---- */
.sequence {
  display: grid; align-content: center; gap: clamp(1rem, 2.5vw, 1.75rem);
  min-height: 72svh;
  padding: var(--plan-pad) var(--gouttiere);
}
.sequence__ardoise {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--filet-fort);
  font: 400 .8125rem/1.2 var(--f-scripte);
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--texte-doux);
}
.sequence__ardoise span:first-child { color: var(--texte); font-weight: 700; }
.sequence__titre {
  font-family: var(--f-titre); font-weight: 800; font-stretch: 100%;
  text-transform: uppercase;
  font-size: min(var(--titre-max), 100cqi / var(--chasse, 8));
  line-height: .84;
}
.sequence__texte { max-width: 30em; font-size: clamp(1.125rem, 2vw, 1.5rem); line-height: 1.38; text-wrap: balance; }
@media (max-width: 759.98px) {
  .sequence { min-height: 60svh; }
  .sequence__titre { font-stretch: 75%; font-size: min(var(--titre-max), 100cqi / var(--chasse-m, 8)); }
}

/* ---- plans ---- */
.plan { position: relative; padding: var(--plan-pad) var(--gouttiere); }
.plan__tete { margin-bottom: clamp(1.75rem, 4vw, 3.25rem); }
.plan__corps { display: grid; gap: 2.5rem; margin-top: clamp(2.5rem, 6vw, 4.5rem); }
.plan__cote { display: grid; gap: 1.75rem; align-content: start; }
@media (min-width: 1100px) {
  .plan__corps { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 5vw, 6rem); align-items: start; }
}

/* 01 · plan large : tout le décor, en 2,39:1 */
.large__cadre { aspect-ratio: 2.39; background: #000; overflow: hidden; }
.large__cadre .boucle { height: 100%; object-fit: cover; }
@media (max-width: 1099.98px) {
  .large { margin-inline: calc(-1 * var(--marge)); }
  .large .legende { padding-inline: var(--marge); }
}
.photogramme img { width: 100%; aspect-ratio: 1280 / 536; object-fit: cover; }

/* 02 · carton : l'identité, sur blanc */
.tia { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
.tia__tete .titre__sous { margin-top: .35em; }
.tia__signe { width: min(44%, 12rem); }
.tia__signe img { width: 100%; }
.tia__film .film__ecran video { aspect-ratio: 16 / 9; }
.tia__fiche { display: grid; gap: 1.75rem; align-content: start; }
.tia__cotes img { width: 100%; box-shadow: 0 0 0 1px var(--filet); }
.tia__mot img { width: 100%; max-width: 40rem; }
.tia__mot { padding: clamp(1.5rem, 4vw, 3rem) 0 0; border-top: 1px solid var(--filet); }
@media (min-width: 1100px) {
  .tia { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); row-gap: clamp(2.5rem, 5vw, 4.5rem); }
  .tia__tete { grid-column: 1 / 9; grid-row: 1; }
  .tia__signe { grid-column: 10 / 13; grid-row: 1 / 3; width: 100%; align-self: center; }
  .tia__film { grid-column: 1 / 9; grid-row: 2; }
  .tia__fiche { grid-column: 1 / 7; grid-row: 3; }
  .tia__cotes { grid-column: 7 / 13; grid-row: 3; }
  .tia__mot { grid-column: 1 / 9; grid-row: 4; }
  .tia__note { grid-column: 9 / 13; grid-row: 4; align-self: end; }
}

/* 03 · insert : un détail, en gros plan */
.insert { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
.insert__capture { position: relative; }
.insert__capture img { width: 100%; box-shadow: 0 0 0 1px var(--filet); }
.insert__zone {
  position: absolute;
  left: 72.36%; top: 43.78%; width: 27.64%; height: 12.89%;
  outline: 2px solid var(--rouge);
  outline-offset: 2px;
}
.plan--batia .insert__zone { left: 69.72%; top: 52.22%; width: 29.17%; height: 25.56%; }
.plan--batia .insert__detail img { width: min(100%, 30rem); }
.prix { width: min(100%, 19rem); }
.prix img { width: 100%; box-shadow: 0 0 0 1px var(--filet); }
.insert__detail img { width: 100%; background: var(--blanc); outline: 2px solid var(--rouge); outline-offset: 0; }
.insert__marque {
  display: inline-flex; align-items: center; gap: .45em;
  margin-right: .4em;
  color: var(--texte); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.insert__marque::before { content: ""; width: .8em; height: .8em; border: 2px solid var(--rouge); }
.insert__mobile { width: min(62%, 17rem); }
.insert__mobile img { border-radius: 1.4rem; box-shadow: 0 0 0 1px var(--filet), 0 1.5rem 3rem -1.5rem rgb(20 19 17 / .35); }
@media (min-width: 1100px) {
  .insert { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .insert__plein { grid-column: 1 / 9; grid-row: 1; }
  .insert__detail { grid-column: 1 / 9; grid-row: 2; }
  .insert__mobile { grid-column: 10 / 13; grid-row: 1 / 3; width: 100%; }
}

/* 04 · cadre dans le cadre : des carrés dans des carrés */
/* --tour : l'angle d'où partent les deux cadres à l'approche (voir « mouvement »). Sur une colonne, le carré incliné
   quitte la gouttière dès qu'il dépasse 20° environ : il part de 18°. Sur deux colonnes, il a la place pour 24° */
.cadres { --tour: 18deg; display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: end; }
.cadres__carre {
  aspect-ratio: 1;
  padding: 7%;
  border: 1px solid var(--filet-fort);
}
.cadres__carre--2 { padding: 9%; border-color: var(--texte); transform: rotate(-5deg); }
.cadres__carre--3 { padding: 0; border: 0; overflow: hidden; background: #000; transform: rotate(5deg); }
.cadres__carre--3 .boucle { height: 100%; object-fit: cover; }
.cadres__spirale { width: min(62%, 20rem); justify-self: end; }
.cadres__spirale img { width: 100%; }
@media (min-width: 1100px) {
  .cadres { --tour: 24deg; grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .cadres > .cadres__carre { grid-column: 1 / 8; }
  .cadres__spirale { grid-column: 9 / 13; width: 100%; }
}

/* 05 · plan d'ensemble : la page entière, tout le monde dans le champ */
.ensemble__defile { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.ensemble__defile img { width: auto; max-width: none; height: clamp(15rem, 52vw, 24rem); background: var(--encre); }
.ensemble__film .boucle { aspect-ratio: 16 / 10; }
@media (max-width: 1099.98px) {
  .ensemble { margin-inline: calc(-1 * var(--marge)); }
  .ensemble .legende { padding-inline: var(--marge); }
}
@media (min-width: 1100px) {
  .ensemble__defile { overflow: visible; }
  .ensemble__defile img { width: 100%; height: auto; }
}

/* 06 · projection : la salle s'éteint */
.plan--genius-n7 {
  padding-top: calc(var(--plan-pad) + clamp(9rem, 30vw, 22rem));
  background: linear-gradient(var(--papier), var(--salle) clamp(9rem, 30vw, 22rem));
}
.programme__annonce {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  font: 700 .8125rem/1 var(--f-scripte);
  text-transform: uppercase; letter-spacing: .3em;
  color: var(--texte-doux);
}
.programme__annonce::after { content: ""; flex: 1; height: 1px; background: var(--filet-fort); }
.programme { display: grid; gap: clamp(3rem, 7vw, 6rem); list-style: none; }
.film figure { display: grid; gap: 1.1rem; }
.film__ecran video { aspect-ratio: 16 / 9; }
.film figcaption { display: grid; gap: .8rem; align-content: end; }
.film__tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; }
.film__n {
  font-family: var(--f-titre); font-weight: 800; font-stretch: 60%;
  font-size: clamp(2.5rem, 5vw, 4rem); line-height: .8;
  color: var(--texte-doux);
}
.film__titre {
  font-family: var(--f-titre); font-weight: 800; font-stretch: 125%;
  text-transform: uppercase;
  font-size: clamp(1.375rem, 2.4vw, 2.25rem); line-height: .95;
}
.film__duree { display: inline-flex; align-items: center; gap: .45em; font: 400 .875rem/1 var(--f-scripte); color: var(--texte-doux); }
.film__muet { font-style: italic; }
.film__texte { max-width: 34em; text-wrap: pretty; }
@media (min-width: 1100px) {
  .film figure { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); align-items: end; }
  .film__ecran { grid-column: 1 / 9; grid-row: 1; }
  .film figcaption { grid-column: 9 / 13; grid-row: 1; padding-bottom: .25rem; }
  .film--2 .film__ecran { grid-column: 5 / 13; }
  .film--2 figcaption { grid-column: 1 / 5; text-align: right; }
  .film--2 .film__tete { justify-content: flex-end; }
  .film--2 .film__texte { justify-self: end; }
}

/* 08 · travelling circulaire : la caméra fait le tour de la bouteille */
.tourne__tete { container-type: inline-size; }
.tourne__scene { display: grid; gap: 1.5rem; align-items: center; }
/* l'orbite déborde d'environ 2,2rem sous le pied de la bouteille : l'écart la garde loin de la commande */
.tourne__bouteille { --commande-h: 2.75rem; display: grid; justify-items: center; gap: 2.75rem; }
/* sans script, pas de commande : la même marge garde l'orbite loin de ce qui suit */
html.sans-js .tourne__bouteille { padding-bottom: 2.75rem; }
.tourne__socle { position: relative; display: grid; justify-items: center; }
.tourne__image {
  position: relative; z-index: 1;
  width: auto;
  height: min(54svh, 34rem);
  aspect-ratio: 300 / 661;
}
.tourne__orbite {
  position: absolute; left: 50%; bottom: 1.5%;
  /* jamais plus large que la ligne : à 320 px, 175 % de la bouteille passerait sous les bords de l'écran */
  width: min(175%, 22rem, 100vw - 2 * var(--marge));
  aspect-ratio: 4.2;
  transform: translate(-50%, 50%);
  border: 1px solid var(--filet-fort);
  border-radius: 50%;
}
.tourne__camera {
  position: absolute;
  left: calc(50% + 50% * sin(var(--angle, 0deg)));
  top: calc(50% + 50% * cos(var(--angle, 0deg)));
  width: .75rem; height: .75rem;
  border-radius: 50%;
  background: var(--rouge);
  transform: translate(-50%, -50%);
  z-index: 2;
}
.tourne__camera.est-derriere { z-index: 0; opacity: .5; }
.tourne__commande {
  display: grid; grid-template-columns: auto minmax(0, 1fr) 3.2rem; align-items: center; gap: .5rem 1rem;
  width: min(100%, 26rem);
  font: 400 .8125rem/1.2 var(--f-scripte);
}
.tourne__label { color: var(--texte-doux); }
.tourne__curseur { width: 100%; accent-color: var(--craie); min-height: 2.75rem; }
.tourne__degres { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
html.js .tourne__piste { height: 240svh; }
html.js .tourne__scene {
  position: sticky; top: 0;
  min-height: calc(100svh - var(--bande-h) - var(--sauf-bas));
  padding-block: 1rem;
}
@media (prefers-reduced-motion: reduce) {
  html.js .tourne__piste { height: auto; }
  html.js .tourne__scene { position: static; min-height: 0; }
}
@media (max-width: 759.98px) {
  .tourne__bouteille { --commande-h: 4.5rem; }
  .tourne__commande { grid-template-columns: minmax(0, 1fr) 3.2rem; }
  .tourne__label { grid-column: 1 / -1; }
}
/* une seule colonne sous 1100 px : la scène tient pile entre le haut de l'écran et la bande, et la bouteille prend
   la hauteur qui reste — le curseur ne passe jamais sous la bande, du petit téléphone à la tablette */
@media (prefers-reduced-motion: no-preference) and (max-width: 1099.98px) {
  html.js .tourne__scene {
    display: flex; flex-direction: column; align-items: stretch;
    height: calc(100svh - var(--bande-h) - var(--sauf-bas));
  }
  html.js .tourne__bouteille { flex: 1 1 0; min-height: 0; container-type: size; align-content: center; }
  html.js .tourne__image { height: max(7rem, min(34rem, 100cqh - var(--commande-h) - 2.75rem)); }
}
/* écran trop bas pour une scène collante (téléphone à l'horizontale) : la bouteille passe, le curseur la fait tourner */
@media (prefers-reduced-motion: no-preference) and (max-height: 31.25rem) {
  html.js .tourne__piste { height: auto; }
  html.js .tourne__scene { position: static; display: grid; height: auto; min-height: 0; }
  html.js .tourne__bouteille { container-type: normal; }
  html.js .tourne__image { height: min(80svh, 34rem); }
}
@media (min-width: 1100px) {
  .tourne__scene { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 4rem); }
  .tourne__image { height: min(66svh, 40rem); }
}

/* 09 · Trade Center : le site mobile, dans un téléphone
   Les cotes sont celles d'un écran de 393 × 852 points, bordé de 17 points (5 de métal, 12 de verre noir) :
   --pt vaut un point, rapporté à la largeur du téléphone, qui peut donc prendre n'importe quelle taille. */
.vertical { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
.vertical__texte { display: grid; gap: 1.75rem; align-content: start; }

.telephone {
  container-type: inline-size;
  position: relative;
  justify-self: center;
  width: min(100% - 1rem, 21rem);
  margin: 0;
  padding: 1rem .5rem 2.5rem;      /* de quoi loger les boutons, qui dépassent du cadre */
  isolation: isolate;               /* les boutons, glissés sous le cadre, restent devant le fond */
}
/* un halo très doux, pour décoller le métal du fond de la salle */
.telephone::before {
  content: "";
  position: absolute; inset: -12% -30% -4%;
  background: radial-gradient(closest-side, rgb(244 242 236 / .075), transparent);
  pointer-events: none;
}
.telephone__corps {
  --pt: calc(100cqi / 427);
  position: relative;
  aspect-ratio: 427 / 886;
  border-radius: calc(var(--pt) * 72);
  /* titane naturel : un métal chaud, brossé, qui accroche la lumière sur ses arêtes */
  background:
    linear-gradient(90deg, rgb(255 255 255 / .7), rgb(255 255 255 / .15) .5%, transparent 1.2%, transparent 98.8%, rgb(255 255 255 / .3)),
    linear-gradient(180deg, rgb(255 255 255 / .5), transparent .9%, transparent 99.2%, rgb(0 0 0 / .35)),
    linear-gradient(128deg, #e4e0d8 0%, #a8a49b 14%, #d9d5cd 27%, #8e8a82 46%, #c6c2b9 63%, #9b978f 80%, #dcd8d0 100%);
  box-shadow:
    inset 0 0 0 calc(var(--pt) * .6) rgb(255 255 255 / .45),
    inset 0 0 0 calc(var(--pt) * 1.6) rgb(60 56 50 / .28),
    0 0 0 calc(var(--pt) * .6) rgb(0 0 0 / .7),
    0 calc(var(--pt) * 6) calc(var(--pt) * 10) rgb(0 0 0 / .35),
    0 calc(var(--pt) * 40) calc(var(--pt) * 70) calc(var(--pt) * -12) rgb(0 0 0 / .7);
}
/* le verre noir, posé dans le cadre de métal */
.telephone__corps::before {
  content: "";
  position: absolute; inset: calc(var(--pt) * 5);
  border-radius: calc(var(--pt) * 67);
  background: #020202;
  box-shadow: inset 0 0 0 calc(var(--pt) * .8) #1d1c1a, inset 0 0 calc(var(--pt) * 3) rgb(255 255 255 / .06);
}
.telephone__bouton {
  position: absolute;
  width: calc(var(--pt) * 4.5);
  border-radius: calc(var(--pt) * 2);
  background: linear-gradient(90deg, #77736b, #d7d3cb 45%, #a39f97 70%, #6c685f);
  box-shadow: 0 0 0 calc(var(--pt) * .4) rgb(0 0 0 / .45);
  z-index: -1;
}
.telephone__bouton--action { left: calc(var(--pt) * -2.6); top: calc(var(--pt) * 166); height: calc(var(--pt) * 34); }
.telephone__bouton--plus   { left: calc(var(--pt) * -2.6); top: calc(var(--pt) * 232); height: calc(var(--pt) * 62); }
.telephone__bouton--moins  { left: calc(var(--pt) * -2.6); top: calc(var(--pt) * 310); height: calc(var(--pt) * 62); }
.telephone__bouton--cote   { right: calc(var(--pt) * -2.6); top: calc(var(--pt) * 262); height: calc(var(--pt) * 100); }
/* les lignes d'antenne qui coupent le métal, près des coins */
.telephone__antennes {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(#5f5b54, #5f5b54) 0 calc(var(--pt) * 92) / calc(var(--pt) * 5) calc(var(--pt) * 1.6),
    linear-gradient(#5f5b54, #5f5b54) 100% calc(var(--pt) * 92) / calc(var(--pt) * 5) calc(var(--pt) * 1.6),
    linear-gradient(#5f5b54, #5f5b54) 0 calc(100% - var(--pt) * 92) / calc(var(--pt) * 5) calc(var(--pt) * 1.6),
    linear-gradient(#5f5b54, #5f5b54) 100% calc(100% - var(--pt) * 92) / calc(var(--pt) * 5) calc(var(--pt) * 1.6),
    linear-gradient(#5f5b54, #5f5b54) calc(var(--pt) * 92) 100% / calc(var(--pt) * 1.6) calc(var(--pt) * 5),
    linear-gradient(#5f5b54, #5f5b54) calc(100% - var(--pt) * 92) 0 / calc(var(--pt) * 1.6) calc(var(--pt) * 5);
  background-repeat: no-repeat;
  opacity: .75;
}

.telephone__ecran {
  position: absolute; inset: calc(var(--pt) * 17);
  overflow: hidden;
  border-radius: calc(var(--pt) * 55);
  background: #000;
  isolation: isolate;
}
.telephone__etat {
  position: absolute; inset: 0 0 auto;
  height: calc(var(--pt) * 54);
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--pt) * 3) calc(var(--pt) * 30) 0 calc(var(--pt) * 44);
  background: #000;
  color: #fff;
  z-index: 2;
}
.telephone__heure {
  font: 600 calc(var(--pt) * 17)/1 -apple-system, "SF Pro Text", var(--f-texte);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.telephone__ilot {
  position: absolute; left: 50%; top: calc(var(--pt) * 11);
  width: calc(var(--pt) * 125); height: calc(var(--pt) * 37);
  translate: -50% 0;
  border-radius: calc(var(--pt) * 19);
  background: #000;
  box-shadow: inset 0 0 0 calc(var(--pt) * .5) rgb(255 255 255 / .05);
}
.telephone__objectif {
  position: absolute; right: calc(var(--pt) * 12); top: 50%;
  width: calc(var(--pt) * 12); aspect-ratio: 1;
  translate: 0 -50%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 34%, rgb(140 170 255 / .55) 0 7%, transparent 18%),
    radial-gradient(circle at 50% 50%, #18213a 0 32%, #0b0e18 33% 58%, #151515 60% 100%);
}
.telephone__icones { display: flex; align-items: center; gap: calc(var(--pt) * 6); }
.telephone__icones svg { display: block; fill: currentColor; height: calc(var(--pt) * 12); width: auto; }
.telephone__batterie { height: calc(var(--pt) * 13) !important; }
.telephone__video {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: calc(100% - var(--pt) * 54);
  object-fit: cover;
  background: #000;
}
/* la barre d'adresse de Safari, repliée pendant le défilement : une pastille de verre */
.telephone__safari {
  position: absolute; left: 50%; bottom: calc(var(--pt) * 26);
  translate: -50% 0;
  display: flex; align-items: center; gap: calc(var(--pt) * 5);
  padding: calc(var(--pt) * 8) calc(var(--pt) * 15);
  border-radius: calc(var(--pt) * 20);
  background: rgb(28 28 30 / .58);
  -webkit-backdrop-filter: blur(calc(var(--pt) * 10)) saturate(1.6);
  backdrop-filter: blur(calc(var(--pt) * 10)) saturate(1.6);
  box-shadow: inset 0 0 0 calc(var(--pt) * .7) rgb(255 255 255 / .16), 0 calc(var(--pt) * 2) calc(var(--pt) * 10) rgb(0 0 0 / .18);
  color: rgb(255 255 255 / .92);
  font: 500 calc(var(--pt) * 13)/1 -apple-system, "SF Pro Text", var(--f-texte);
  white-space: nowrap;
  z-index: 2;
}
.telephone__cadenas { width: calc(var(--pt) * 8); fill: currentColor; opacity: .75; }
.telephone__barre {
  position: absolute; left: 50%; bottom: calc(var(--pt) * 8);
  width: calc(var(--pt) * 134); height: calc(var(--pt) * 5);
  translate: -50% 0;
  border-radius: calc(var(--pt) * 3);
  background: #fff;
  mix-blend-mode: difference;
  opacity: .9;
  z-index: 3;
}
/* le reflet de la vitre, très léger, au-dessus de tout */
.telephone__vitre {
  position: absolute; inset: calc(var(--pt) * 5);
  border-radius: calc(var(--pt) * 67);
  background: linear-gradient(118deg, rgb(255 255 255 / .09) 0%, rgb(255 255 255 / .025) 30%, transparent 44%);
  pointer-events: none;
  z-index: 4;
}
@media (min-width: 1100px) {
  .vertical { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr; column-gap: clamp(2.5rem, 6vw, 7rem); }
  .vertical__tete { grid-column: 1; grid-row: 1; }
  .vertical__texte { grid-column: 1; grid-row: 2; }
  .telephone { grid-column: 2; grid-row: 1 / 3; align-self: start; width: min(100%, 23rem); }
}

/* 10 · champ-contrechamp : ce que dit l'agent, ce que dit le fichier */
.contrechamp { position: relative; display: grid; gap: clamp(2.5rem, 5vw, 3rem); }
.contrechamp__qui {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem;
  margin-bottom: 1.25rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--filet-fort);
  font: 400 .8125rem/1.2 var(--f-scripte);
  color: var(--texte-doux);
}
.contrechamp__qui span { font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--texte); }
.contrechamp__dit { display: grid; gap: .8em; font-size: clamp(1.25rem, 2.1vw, 1.7rem); line-height: 1.32; text-wrap: pretty; }
.contrechamp__h { font: 700 .9em/1.2 var(--f-scripte); }
.feuille { position: relative; background: var(--blanc); box-shadow: 0 0 0 1px var(--filet); }
.feuille img { width: 100%; }
.feuille__cel {
  position: absolute; left: 75.6%; width: 22.4%;
  outline: 2px solid var(--rouge);
  outline-offset: -1px;
}
.feuille__cel--juste { outline-color: var(--encre); }
.feuille__cel--vide { outline-style: dashed; }
.feuille__cel--r3 { top: 21.8%; height: 9.4%; }
.feuille__cel--r4 { top: 31.2%; height: 9.4%; }
.feuille__cel--r5 { top: 40.6%; height: 9.4%; }
.feuille__cel--r6 { top: 50%; height: 9.4%; }
.feuille__cel--r7 { top: 59.4%; height: 9.4%; }
.feuille__cel--r9 { top: 78.2%; height: 9.4%; }
.contrechamp__verdict {
  margin-top: 1.5rem;
  font: 700 clamp(1.75rem, 3.6vw, 2.75rem)/1 var(--f-scripte);
  color: var(--rouge);
  letter-spacing: .02em;
}
.contrechamp__verdict span { font-size: .42em; font-weight: 400; color: var(--texte); letter-spacing: 0; }
.verifs { width: 100%; margin-top: 1.25rem; border-collapse: collapse; font: 400 .8125rem/1.3 var(--f-scripte); }
.verifs th, .verifs td { padding: .55rem .6rem .55rem 0; border-bottom: 1px solid var(--filet); text-align: left; }
.verifs thead th { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-doux); font-weight: 400; }
.verifs tbody th { font-weight: 400; }
.verifs code { font-size: 1em; white-space: normal; overflow-wrap: anywhere; }
.verifs tbody td:last-child { padding-left: .65rem; font-weight: 700; }
.verifs--ko td:last-child { box-shadow: inset 3px 0 0 var(--rouge); }
.verifs--ok td:last-child { box-shadow: inset 3px 0 0 var(--encre); }
@media (min-width: 1100px) {
  .contrechamp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(3rem, 7vw, 8rem); }
  .contrechamp::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--filet-fort); }
  .contrechamp__champ { padding-top: 3.5rem; }
}

.visionneuse { display: grid; gap: 1.5rem; margin-top: clamp(3.5rem, 8vw, 6rem); }
.visionneuse__ecran img { width: 100%; background: var(--encre); box-shadow: 0 0 0 1px var(--filet); }
.visionneuse__legende { margin-top: .65rem; min-height: 2.9em; font: 400 .875rem/1.45 var(--f-scripte); }
.visionneuse__titre {
  margin-bottom: .9rem;
  font: 700 .8125rem/1.2 var(--f-scripte);
  text-transform: uppercase; letter-spacing: .1em;
}
.visionneuse__commandes { display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem; }
.visionneuse__commandes input { flex: 1; min-width: 0; min-height: 2.75rem; accent-color: var(--encre); }
.journal { border-top: 1px solid var(--filet-fort); font: 400 .8125rem/1.35 var(--f-scripte); }
.journal > li { border-bottom: 1px solid var(--filet); }
.journal > li,
.journal__etape { display: flex; gap: .75rem; padding: .5rem .25rem; }
.journal > li:has(.journal__etape) { padding: 0; }
.journal__etape {
  width: 100%;
  border: 0; background: none;
  text-align: left;
  cursor: pointer;
}
.journal__etape:hover { background: rgb(20 19 17 / .05); }
.journal__etape[aria-current="step"] { background: var(--encre); color: var(--papier); }
.journal__etape[aria-current="step"] .journal__n { color: var(--papier); }
.journal__n { min-width: 1.6rem; color: var(--texte-doux); font-weight: 700; }
.journal__texte { flex: 1; min-width: 0; }
/* au doigt, chaque étape a la hauteur d'une cible tactile */
@media (pointer: coarse) { .journal__etape { min-height: 2.75rem; align-items: center; } }
@media (min-width: 1100px) {
  .visionneuse { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; gap: clamp(2rem, 4vw, 3.5rem); }
}

/* 11 · plan fixe : le cadre est posé avant l'action */
.fixe { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
.fixe__cadre { position: relative; padding: clamp(.85rem, 2.5vw, 1.75rem); }
.fixe__cadre img { width: 100%; box-shadow: 0 0 0 1px var(--filet); }
.fixe__coin {
  position: absolute;
  width: clamp(1rem, 3vw, 2rem); height: clamp(1rem, 3vw, 2rem);
  border: 0 solid var(--texte);
}
.fixe__coin--hg { left: 0; top: 0; border-top-width: 2px; border-left-width: 2px; }
.fixe__coin--hd { right: 0; top: 0; border-top-width: 2px; border-right-width: 2px; }
.fixe__coin--bg { left: 0; bottom: 0; border-bottom-width: 2px; border-left-width: 2px; }
.fixe__coin--bd { right: 0; bottom: 0; border-bottom-width: 2px; border-right-width: 2px; }
.fixe__croix {
  position: absolute; left: 50%; top: 50%;
  width: 2.25rem; height: 2.25rem;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(var(--rouge), var(--rouge)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--rouge), var(--rouge)) center / 1.5px 100% no-repeat;
}
.fixe__colonnes img { width: 100%; box-shadow: 0 0 0 1px var(--filet); }
.fixe__mobile { width: min(56%, 15rem); }
.fixe__mobile img { border-radius: 1.4rem; box-shadow: 0 0 0 1px var(--filet), 0 1.5rem 3rem -1.5rem rgb(20 19 17 / .35); }
@media (min-width: 1100px) {
  .fixe { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; column-gap: clamp(1.5rem, 3vw, 3rem); }
  .fixe__mire { grid-column: 1 / 9; grid-row: 1 / 3; }
  .fixe__colonnes { grid-column: 9 / 13; grid-row: 1; padding-top: clamp(.85rem, 2.5vw, 1.75rem); }
  .fixe__mobile { grid-column: 9 / 12; grid-row: 2; width: 100%; max-width: 14rem; }
}

/* 12 · raccord : ce qui tient trois pages ensemble */
.raccord { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
.raccord__ecran { position: relative; display: grid; gap: 1.5rem; align-content: start; }
.raccord__vue img { width: 100%; box-shadow: 0 0 0 1px var(--filet); }
.raccord__vue .legende { display: flex; align-items: center; gap: .5rem; }
html.js .raccord__ecran { gap: 0; }
html.js .raccord__vue { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .9s var(--douce), visibility 0s .9s; }
html.js .raccord__vue.est-visible { opacity: 1; visibility: visible; transition: opacity .9s var(--douce), visibility 0s; }
.raccord__reperes {
  position: absolute; left: 0; right: 0; top: 0;
  aspect-ratio: 1200 / 750;
  pointer-events: none;
}
.raccord__repere {
  position: absolute; left: 0; right: 0;
  height: 0;
  border-top: 1.5px dashed var(--scripte);
}
.raccord__repere--1 { top: 3.6%; }
.raccord__repere--2 { top: 9.6%; }
.raccord__repere--3 { top: 26%; }
.raccord__repere--4 { top: 44.5%; }
.raccord__repere > span,
.raccord__communs > li::before {
  display: grid; place-items: center;
  width: 1.35rem; height: 1.35rem;
  border-radius: 50%;
  background: var(--scripte);
  color: var(--papier);
  font: 700 .75rem/1 var(--f-scripte);
}
.raccord__repere > span { position: absolute; left: -.35rem; top: 0; transform: translateY(-50%); }
.raccord__cote { display: grid; gap: 1.5rem; align-content: start; }
.raccord__choix { display: flex; flex-wrap: wrap; gap: .5rem; }
.raccord__titre { font: 700 .8125rem/1.2 var(--f-scripte); text-transform: uppercase; letter-spacing: .1em; }
.raccord__communs { display: grid; gap: .75rem; counter-reset: repere; }
.raccord__communs > li { display: flex; align-items: baseline; gap: .75rem; font-size: 1.0625rem; line-height: 1.4; }
.raccord__communs > li::before { counter-increment: repere; content: counter(repere); flex: none; transform: translateY(.1rem); }
.citation { margin-top: .5rem; font-size: clamp(1.5rem, 2.6vw, 2.25rem); line-height: 1.18; font-style: italic; font-weight: 500; letter-spacing: -.01em; text-wrap: balance; }
.citation__source { margin-top: -.75rem; font: 400 .8125rem/1.4 var(--f-scripte); color: var(--texte-doux); }
@media (min-width: 1100px) {
  .raccord { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; column-gap: clamp(2.5rem, 5vw, 6rem); }
}

/* 13 · flash-back : septembre 2025, janvier 2026 */
.flashback { display: grid; gap: clamp(1.25rem, 3vw, 2rem); align-items: end; }
.flashback__date {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  font: 700 clamp(.875rem, 1.6vw, 1.125rem)/1.2 var(--f-scripte);
  text-transform: uppercase; letter-spacing: .08em;
}
.flashback__tiret { flex: 0 1 5rem; min-width: 2rem; height: 1.5px; background: currentColor; }
.flashback__souvenir img { width: 100%; box-shadow: 0 0 0 1px var(--filet); }
.flashback__mobile { width: min(46%, 14rem); }
.flashback__mobile img { border-radius: 1.2rem; box-shadow: 0 0 0 1px var(--filet); }
.flashback__logo { width: 4.5rem; }
@media (max-width: 1099.98px) {
  .flashback { grid-template-columns: minmax(0, 1fr) auto; }
  .flashback__date, .flashback__souvenir { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .flashback { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); }
  .flashback__date { grid-column: 1 / 13; }
  .flashback__souvenir { grid-column: 1 / 9; grid-row: 2; }
  .flashback__mobile { grid-column: 9 / 12; grid-row: 2; width: 100%; max-width: 15rem; }
  .flashback__logo { grid-column: 12 / 13; grid-row: 2; width: 100%; max-width: 5rem; }
}

/* 13 · dépôts publics */
.horschamp__tete { margin-bottom: clamp(1.75rem, 4vw, 3.25rem); }
.horschamp__plateau { display: grid; }
.depots {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .75rem;
}
.depot a {
  display: grid; gap: .3rem; align-content: start;
  height: 100%;
  padding: .9rem 1rem 1rem;
  border: 1px solid var(--filet-fort);
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.depot a:hover { background: var(--texte); color: var(--fond); }
.depot a:hover .depot__texte { color: inherit; }
.depot__nom { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font: 700 1rem/1.2 var(--f-scripte); overflow-wrap: anywhere; }
/* les cartes de tablette (220 px) ne tiennent claude-slides-template qu'en 12 px : le nom y passe plutôt à la ligne,
   à son propre trait d'union */
.depot__nom .insecable { white-space: normal; }
.depot__texte { font-size: .9375rem; line-height: 1.4; color: var(--texte-doux); }
@media (min-width: 760px) {
  .depots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
}
.horschamp .plan__corps { margin-top: clamp(3rem, 7vw, 5rem); }

/* ---- générique ---- */
.generique {
  padding: calc(clamp(9rem, 26vw, 20rem) + var(--plan-pad)) var(--gouttiere) 0;
  background: linear-gradient(var(--papier), var(--salle) clamp(9rem, 26vw, 20rem));
  text-align: center;
}
.generique__titre {
  margin-bottom: clamp(3rem, 7vw, 5rem);
  font: 700 .8125rem/1 var(--f-scripte);
  text-transform: uppercase; letter-spacing: .4em;
  color: var(--texte-doux);
}
.generique__vedette { display: grid; justify-items: center; gap: .9rem; margin-bottom: clamp(4.5rem, 10vw, 8rem); }
.generique__portrait { width: min(15rem, 52vw); aspect-ratio: 480 / 619; object-fit: cover; margin-bottom: 1rem; }
.generique__de, .credits__titre {
  font: 700 .8125rem/1.2 var(--f-scripte);
  text-transform: uppercase; letter-spacing: .32em;
  color: var(--texte-doux);
}
.generique__lui {
  font-family: var(--f-titre); font-weight: 800; font-stretch: 112%;
  text-transform: uppercase;
  font-size: clamp(2.75rem, 9cqi, 7.5rem);
  line-height: .84;
}
.generique__metier { font-family: var(--f-titre); font-weight: 650; font-stretch: 100%; text-transform: uppercase; letter-spacing: .04em; font-size: clamp(1rem, 1.8vw, 1.3rem); }
.generique { container-type: inline-size; }
.generique__rouleau { display: grid; gap: clamp(3.5rem, 7vw, 5.5rem); max-width: 60rem; margin-inline: auto; }
.credits__titre { margin-bottom: 1.4rem; }
.credits__liste { display: grid; gap: .35rem; }
.credits__liste > li { display: grid; gap: .15rem; padding: .35rem 0; }
.credit__role { font: 400 .8125rem/1.45 var(--f-scripte); text-transform: uppercase; letter-spacing: .06em; color: var(--texte-doux); }
.credit__nom { font-size: 1.0625rem; line-height: 1.45; text-wrap: balance; }
.credits--methode p { max-width: 34em; margin-inline: auto; font-size: clamp(1.125rem, 1.9vw, 1.375rem); line-height: 1.45; text-wrap: balance; }
@media (min-width: 760px) {
  .credits__liste > li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; text-align: left; align-items: baseline; }
  .credit__role { text-align: right; }
}

.ecrire {
  display: grid; justify-items: center; gap: 1.25rem;
  max-width: 64rem;
  margin: clamp(5rem, 12vw, 9rem) auto 0;
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  border-block: 1px solid var(--filet-fort);
}
.ecrire__titre {
  font-family: var(--f-titre); font-weight: 800; font-stretch: 100%;
  text-transform: uppercase;
  font-size: clamp(2.25rem, 6.5cqi, 5rem);
  line-height: .86;
}
.ecrire__adresse a {
  position: relative;
  display: inline-block;
  font-weight: 600;
  font-size: clamp(1.3rem, 4.6cqi, 3.1rem);
  letter-spacing: -.012em;
  line-height: 1.15;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
  overflow-wrap: anywhere;
}
/* au téléphone, la ligne ne fait que 24 px de haut : la zone de tap déborde dessus et dessous jusqu'à 48 px, comme les
   motifs plus bas, sans rien déplacer ni élargir l'anneau de focus. Elle s'annule dès que la ligne les atteint seule */
.ecrire__adresse a::after { content: ""; position: absolute; inset: min(0px, (1.15em - 3rem) / 2) 0; }
.ecrire__adresse a:hover { color: var(--bleu-nuit); }
.ecrire__outils { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.ecrire__statut { min-height: 1.45em; font: 400 .875rem/1.45 var(--f-scripte); color: var(--scripte); }
.ecrire__motifs-titre { font: 400 .875rem/1.4 var(--f-scripte); color: var(--texte-doux); }
.ecrire__motifs { display: grid; gap: .5rem; width: min(100%, 34rem); }
.ecrire__motif {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  min-height: 3rem;
  padding: .8rem 1rem;
  border: 1px solid var(--filet-fort);
  text-align: left; text-decoration: none;
  transition: background-color .2s, color .2s;
}
.ecrire__motif:hover { background: var(--craie); color: var(--salle); }
.generique__credit {
  max-width: 40em;
  margin: clamp(4rem, 9vw, 6rem) auto 0;
  font: 400 .875rem/1.5 var(--f-scripte);
  color: var(--texte-doux);
}
.fin { display: grid; justify-items: center; gap: 2rem; padding: clamp(5rem, 14vw, 12rem) 0 clamp(3rem, 8vw, 6rem); }
.fin__mot {
  font-family: var(--f-titre); font-weight: 800; font-stretch: 200%;
  text-transform: uppercase;
  font-size: min(24rem, 100cqi / var(--chasse, 4));
  line-height: .8;
}
.fin__rembobiner {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 2.75rem;
  padding: .7rem 1.1rem;
  border: 1px solid var(--filet-fort);
  font: 700 .8125rem/1 var(--f-scripte);
  text-transform: uppercase; letter-spacing: .14em;
  text-decoration: none;
}
.fin__rembobiner:hover { background: var(--craie); color: var(--salle); }

/* ---- projection : faire tourner une réalisation ici ---- */
.projection {
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  margin: 0; padding: 0;
  border: 0;
}
.projection[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.projection::backdrop { background: var(--salle); }
.projection__barre {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
  padding: .5rem max(.75rem, env(safe-area-inset-right)) .5rem max(.75rem, env(safe-area-inset-left));
  border-bottom: 1px solid var(--filet);
}
.projection__clap {
  display: flex; align-items: center; gap: .6rem;
  margin-right: auto;
  min-width: 0;
  font: 700 .875rem/1.2 var(--f-scripte);
  text-transform: uppercase; letter-spacing: .05em;
}
.projection__clap .voyant { animation: clignote 1.2s steps(2, jump-none) infinite; }
.projection__etat { font: 400 .8125rem/1.2 var(--f-scripte); color: var(--scripte); }
.projection__formats { display: flex; gap: .35rem; }
.projection__plateau { position: relative; display: grid; place-items: center; min-height: 0; background: #000; overflow: hidden; }
.projection__refus { display: grid; justify-items: center; gap: 1.25rem; padding: 2rem var(--marge); text-align: center; color: var(--craie); font: 400 1.0625rem/1.5 var(--f-scripte); }
.projection__cadre { width: 100%; height: 100%; border: 0; background: var(--blanc); }
.projection__plateau[data-format="telephone"] { padding: 1.25rem; }
.projection__plateau[data-format="telephone"] .projection__cadre {
  width: min(390px, 100%);
  height: min(844px, 100%);
  border-radius: 2.2rem;
  box-shadow: 0 0 0 10px #1C1A18, 0 0 0 11px #3B3733;
}
@media (max-width: 759.98px) {
  .projection__formats { display: none; }
  .projection__etat { order: 5; width: 100%; }
  .projection__sortie span, .projection__sortie { font-size: .8125rem; }
}

/* ---- sommaire ---- */
.sommaire {
  --fond: var(--papier); --texte: var(--encre); --texte-doux: var(--encre-douce); --scripte: var(--bleu);
  --filet: rgb(20 19 17 / .16); --filet-fort: rgb(20 19 17 / .55);
  position: fixed; inset: 0 0 0 auto;
  width: min(30rem, 100%); height: 100%;
  max-width: 100%; max-height: none;
  margin: 0 0 0 auto; padding: 0;
  border: 0;
  background: var(--papier); color: var(--encre);
  overflow: auto; overscroll-behavior: contain;
}
.sommaire::backdrop { background: rgb(14 13 12 / .6); }
.sommaire__tete {
  position: sticky; top: 0; z-index: 1;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .75rem 1rem .75rem 1.25rem;
  background: var(--papier);
  border-bottom: 1px solid var(--filet-fort);
}
.sommaire__titre { font-family: var(--f-titre); font-weight: 800; font-stretch: 100%; text-transform: uppercase; font-size: 1.5rem; line-height: 1; }
.sommaire__liste { padding: .5rem 0 2.5rem; }
.sommaire__liste a {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: .15rem .5rem; align-items: baseline;
  padding: .65rem 1.25rem;
  text-decoration: none;
}
.sommaire__liste a:hover { background: rgb(20 19 17 / .06); }
.sommaire__liste a[aria-current] { background: var(--encre); color: var(--papier); }
.sommaire__liste a[aria-current] .sommaire__n,
.sommaire__liste a[aria-current] .sommaire__valeur { color: var(--craie-douce); }
.sommaire__n { font: 700 .8125rem/1 var(--f-scripte); color: var(--texte-doux); }
.sommaire__sous { font-style: italic; }
.sommaire__valeur { grid-column: 2; font: 400 .8125rem/1.3 var(--f-scripte); color: var(--texte-doux); }
.sommaire__seq {
  margin-top: .75rem;
  padding: 1rem 1.25rem .45rem;
  border-bottom: 1px solid var(--filet);
  font: 700 .75rem/1.2 var(--f-scripte);
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--texte-doux);
}

/* ---- page introuvable ---- */
.page-introuvable { padding-bottom: 0; background: var(--salle); }
.introuvable {
  display: grid; align-content: center; justify-items: start; gap: 1.5rem;
  min-height: 100svh;
  padding: var(--marge) var(--gouttiere);
}
.introuvable__titre {
  font-family: var(--f-titre); font-weight: 800; font-stretch: 60%;
  text-transform: uppercase;
  font-size: clamp(2.25rem, 13cqi, 12rem);
  line-height: .84;
}
.introuvable__texte { max-width: 30em; font-size: clamp(1.125rem, 2vw, 1.375rem); }

/* ---- mouvement : seulement si on le veut bien ---- */
@media (prefers-reduced-motion: no-preference) {
  .sommaire[open] { animation: glisse .32s var(--douce); }
  @keyframes glisse { from { transform: translateX(100%); } }
  .projection[open] { animation: allume .45s ease-out; }
  @keyframes allume { from { opacity: 0; } }

  @supports (animation-timeline: view()) {
    .cadres > .cadres__carre { view-timeline: --carre block; }
    .cadres__carre--2 { animation: spirale-2 linear both; animation-timeline: --carre; animation-range: entry 0% cover 50%; }
    .cadres__carre--3 { animation: spirale-3 linear both; animation-timeline: --carre; animation-range: entry 0% cover 50%; }
    @keyframes spirale-2 { from { transform: rotate(calc(-1 * var(--tour))); } to { transform: rotate(-5deg); } }
    @keyframes spirale-3 { from { transform: rotate(var(--tour)); } to { transform: rotate(5deg); } }

    .flashback__souvenir img, .flashback__mobile img, .flashback__logo {
      animation: souvenir linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 45%;
    }
    @keyframes souvenir { from { filter: grayscale(1) sepia(.3) contrast(.92) brightness(1.04); } to { filter: none; } }

    .insert__zone { animation: cadrage linear both; animation-timeline: view(); animation-range: entry 30% cover 50%; }
    @keyframes cadrage { from { outline-offset: 2.5rem; opacity: 0; } to { outline-offset: 2px; opacity: 1; } }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .bande, .projection, .sommaire, .evitement { display: none !important; }
  body { padding: 0; }
}

/* ---- généré par construire.py : chasse des titres et gabarits de la polyvision ---- */
#titre-batia{--largeur:100;--largeur-m:75;--chasse:4.13;--chasse-m:3.485}
#titre-holobench{--largeur:82;--largeur-m:66;--chasse:7.49;--chasse-m:6.483}
#titre-reproducibility-bench{--largeur:96;--largeur-m:73;--chasse:11.951;--chasse-m:10.095}
#titre-house-style{--largeur:112;--largeur-m:81;--chasse:10.088;--chasse-m:8.136}
#titre-hypersphere{--largeur:200;--largeur-m:125;--chasse:16.577;--chasse-m:11.791}
#titre-toulouse-ia-identite{--largeur:118;--largeur-m:84;--chasse:10.022;--chasse-m:8.051}
#titre-toulouse-ia-application{--largeur:52;--largeur-m:51;--chasse:6.044;--chasse-m:5.981}
#titre-le-carre{--largeur:100;--largeur-m:75;--chasse:6.651;--chasse-m:5.531}
#titre-communaute-toulouse{--largeur:150;--largeur-m:100;--chasse:12.633;--chasse-m:9.74}
#titre-genius-n7{--largeur:140;--largeur-m:95;--chasse:8.953;--chasse-m:7.09}
#titre-pyrus{--largeur:100;--largeur-m:75;--chasse:4.623;--chasse-m:3.884}
#titre-trade-center{--largeur:50;--largeur-m:50;--chasse:3.568;--chasse-m:3.568}
#titre-gifted{--largeur:90;--largeur-m:70;--chasse:4.641;--chasse-m:3.912}
#titre-depots{--largeur:64;--largeur-m:57;--chasse:8.785;--chasse-m:8.23}
#titre-sequence-1{--chasse:8.766;--chasse-m:7.255}
#titre-sequence-2{--chasse:12.878;--chasse-m:10.696}
#titre-sequence-3{--chasse:7.324;--chasse-m:5.995}
#titre-sequence-4{--chasse:9.591;--chasse-m:7.985}
#titre-sequence-5{--chasse:7.04;--chasse-m:5.845}
.carton__nom{--chasse:11.166;--chasse-m:5.598}
.fin__mot{--chasse:3.513}
.decoupage__titre{--chasse-mot:6.317}
.decoupage__lien[href="#batia"]{--chasse-mot:4.13}
.decoupage__lien[href="#holobench"]{--chasse-mot:8.624}
.decoupage__lien[href="#reproducibility-bench"]{--chasse-mot:12.274}
.decoupage__lien[href="#house-style"]{--chasse-mot:4.814}
.decoupage__lien[href="#hypersphere"]{--chasse-mot:10.196}
.decoupage__lien[href="#toulouse-ia-identite"]{--chasse-mot:7.324}
.decoupage__lien[href="#toulouse-ia-application"]{--chasse-mot:7.324}
.decoupage__lien[href="#le-carre"]{--chasse-mot:4.669}
.decoupage__lien[href="#communaute-toulouse"]{--chasse-mot:9.74}
.decoupage__lien[href="#genius-n7"]{--chasse-mot:5.209}
.decoupage__lien[href="#pyrus"]{--chasse-mot:4.623}
.decoupage__lien[href="#trade-center"]{--chasse-mot:5.488}
.decoupage__lien[href="#gifted"]{--chasse-mot:5.005}
.decoupage__lien[href="#depots"]{--chasse-mot:5.822}
.polyvision{grid-template-areas:"c c" "h h" "h h" "p t" "p t" "p k" "r k" "r m" "r m" "o o" "o o";grid-template-rows:auto repeat(10,var(--rang))}
@media (min-width:760px){.polyvision{grid-template-areas:"c c c c" "h h p t" "h h p t" "m m p t" "m m r k" "o o r k" "o o r k";grid-template-rows:auto repeat(6,var(--rang))}}
@media (min-width:1100px){.polyvision{grid-template-areas:"c c c c c c h h h h p p" "c c c c c c h h h h p p" "c c c c c c t t k k p p" "c c c c c c t t k k r r" "m m m m m m o o o o r r" "m m m m m m o o o o r r";grid-template-rows:repeat(6,1fr)}}