/* Dawn Aerowar, maquette du 09/10/2026.
   Les codes de la campagne Kickstarter, tels qu'ils sont déjà dans le lecteur (settings.css, warroom.css) :
   panneau noir à pans coupés et filet cuivre, bandeau de titre à doubles chevrons, barres au filet or,
   étiquettes-flèches, images dans un filet or. Jost pour le texte, Rajdhani pour la navigation.
   Une teinte, un rôle : or = ce qui se clique ou se lit comme une donnée, cuivre = les cadres, crème = le texte.
   Aucun arrondi, aucune lueur, aucun texte en dégradé, aucune apparition au défilement. */

@font-face { font-family: "Jost"; src: url(polices/jost-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url(polices/jost-latin-wght-italic.woff2) format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Rajdhani"; src: url(polices/rajdhani-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Rajdhani"; src: url(polices/rajdhani-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Rajdhani"; src: url(polices/rajdhani-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --encre: #0a0506;
  --creme: #f5e6d8;
  --pale: #cdb6a6;
  --cu: #ec8433;
  --cu-deep: #9c4a1b;
  --or: #f3b83a;
  --bordeaux: #3a121c;
  --jost: "Jost", "Futura", "Century Gothic", sans-serif;
  --raj: "Rajdhani", "Segoe UI", sans-serif;
  --marge: 72px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: #060304; }
/* Le fond : le ciel de l'affiche, du haut des nuages à la mer. fond.js lui donne sa hauteur et le fait défiler moins vite que la page. */
.fond { position: fixed; left: 0; top: 0; z-index: -1; width: 100%; height: 100vh; height: 100lvh; background: url(img/grain.png), #060304 url(img/ciel.jpg) 50% 0 / cover no-repeat; pointer-events: none; }
@media (max-width: 900px) { .fond { background-image: url(img/grain.png), url(img/ciel-petit.jpg); } }
body { background: none; color: var(--creme); font-family: var(--jost); font-size: 19px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
svg { width: 22px; height: 16px; flex: none; color: var(--or); }
svg.g { transform: scaleX(-1); }

.page { max-width: 1296px; margin: 0 auto; padding-left: var(--marge); padding-right: var(--marge); }

/* ---------- Barre du haut ---------- */
.haut { background: #060304; display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 var(--marge); }
.marque { white-space: nowrap; font-weight: 600; font-size: 16px; letter-spacing: 0.34em; text-transform: uppercase; text-decoration: none; color: var(--creme); }
.haut nav { display: flex; gap: 30px; margin-left: auto; margin-right: 40px; }
.haut-actions { display: flex; gap: 12px; }
.etiquette.petite { --t: 14px; }
.etiquette.petite span { padding: 5px 28px 5px 14px; font-size: 16px; gap: 9px; }
.etiquette.petite svg { width: 11px; height: 11px; }
.haut nav a, .langue { font-family: var(--raj); font-weight: 600; font-size: 16px; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--pale); }
.haut nav a:hover { color: var(--or); }
.langue { display: flex; gap: 12px; }
.langue b { color: var(--creme); font-weight: 700; border-bottom: 2px solid var(--or); }

/* ---------- Premier écran : l'affiche, puis une ligne d'actions ---------- */
/* L'affiche entière, sur toute la largeur, jamais rognée ; les deux actions sont dans la barre du haut et reprises au pied de l'affiche. */
.affiche { position: relative; overflow: hidden; background: #000; }
section.tete { position: relative; }
section.tete::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 260px; background: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / 0.7) 40%, rgb(0 0 0 / 0) 100%); pointer-events: none; }
.affiche img { display: block; width: 100%; height: auto; }
.affiche h1 { font-size: 0; line-height: 0; }      /* le titre de la page est l'affiche elle-même */
.affiche video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.affiche video { mix-blend-mode: screen; opacity: 0; transition: opacity 1.2s linear; }
.affiche video.visible { opacity: 1; }
.actions { display: none; }

/* Étiquette-flèche : un liseré cuivre autour d'un fond sombre, la pointe à droite */
.etiquette { --t: 20px; display: inline-block; padding: 2px; background: var(--cu); text-decoration: none;
  clip-path: polygon(0 0, calc(100% - var(--t)) 0, 100% 50%, calc(100% - var(--t)) 100%, 0 100%); }
.etiquette span { display: flex; align-items: center; gap: 12px; padding: 11px 44px 11px 24px; background: #140a0c; color: #fff; font-weight: 600; font-size: 19px; white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - var(--t) * 0.92) 0, calc(100% - 1.6px) 50%, calc(100% - var(--t) * 0.92) 100%, 0 100%); }
.etiquette.forte span { background: var(--bordeaux); }
.etiquette:hover span { color: var(--or); }
.etiquette svg { width: 14px; height: 14px; color: var(--or); }

/* ---------- Panneau de campagne ---------- */
.bloc { position: relative; padding-top: 33px; margin-top: 128px; }
.bandeau { position: absolute; left: 50%; top: 0; z-index: 2; transform: translateX(-50%); padding: 2px; background: var(--cu);
  clip-path: polygon(27px 0, calc(100% - 27px) 0, 100% 50%, calc(100% - 27px) 100%, 27px 100%, 0 50%); }
.bandeau > div { display: flex; align-items: center; gap: 26px; height: 64px; padding: 0 56px; background: var(--bordeaux);
  clip-path: polygon(26px 0, calc(100% - 26px) 0, calc(100% - 1.6px) 50%, calc(100% - 26px) 100%, 26px 100%, 1.6px 50%); }
.bandeau h2 { font-weight: 700; font-size: 31px; line-height: 1; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; color: #fff; -webkit-text-stroke: 2.8px var(--cu); paint-order: stroke fill; }
.bandeau svg { width: 28px; height: 20px; }

.panneau { --c: 36px; padding: 2px; background: linear-gradient(165deg, #f6a45a 0%, var(--cu) 18%, var(--cu-deep) 58%, var(--cu) 100%);
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c)); }
.champ { --ci: calc(var(--c) - 1.2px); position: relative; isolation: isolate; overflow: hidden; padding: 88px 56px 52px; background: var(--encre);
  clip-path: polygon(var(--ci) 0, calc(100% - var(--ci)) 0, 100% var(--ci), 100% calc(100% - var(--ci)), calc(100% - var(--ci)) 100%, var(--ci) 100%, 0 calc(100% - var(--ci)), 0 var(--ci)); }
.champ::before { content: ""; position: absolute; inset: -30px; z-index: -1; background: url(img/carte-legere.jpg) 50% 40% / 112% auto; filter: blur(11px) saturate(1.25) brightness(1.45); opacity: 0.5; }
.champ::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(10 5 6 / 0.5); }

.deux { display: grid; grid-template-columns: 5fr 6fr; gap: 56px; align-items: start; }
.texte p + p { margin-top: 18px; }
.texte b { font-weight: 600; color: #fff; }
.signe { color: var(--pale); font-style: italic; }
.chapeau { max-width: 900px; margin-bottom: 36px; }

.cadre { border: 1px solid var(--or); width: 100%; height: auto; }
video.bande { display: block; aspect-ratio: 1536 / 400; object-fit: cover; background: #140a0c 50% 50% / cover no-repeat; }
video.bande.grand { aspect-ratio: 1170 / 658; }
figure.cadre { position: relative; }
figure.cadre img { width: 100%; }
figcaption { margin-top: 10px; font-style: italic; font-size: 16px; color: var(--pale); }

/* Barres : un libellé à gauche, une valeur à droite */
.faits { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; margin-top: 44px; }
.faits > div { display: flex; justify-content: space-between; gap: 24px; align-items: baseline; padding: 11px 18px; border: 1px solid rgb(243 184 58 / 0.55); background: rgb(10 5 6 / 0.62); font-weight: 600; font-size: 18px; }
.faits dt { color: var(--creme); }
.faits dd { color: #fff; text-align: right; }
.faits.serre { grid-template-columns: 1fr; gap: 8px; margin-top: 0; }

/* ---------- Volets hors panneau ---------- */
.volets article { margin-top: 112px; }
/* Titres de section dans la typographie de l'affiche : le nom comme le titre DAWN, la suite comme le slogan, centrés */
.ligne { margin-bottom: 34px; text-align: center; }
.ligne h2 { font-weight: 500; font-size: 42px; line-height: 1.15; letter-spacing: 0.46em; margin-right: -0.46em; text-transform: uppercase; color: #f3e8dc; }
.ligne span { display: block; margin-top: 16px; font-weight: 400; font-size: 16px; line-height: 1.4; letter-spacing: 0.32em; margin-right: -0.32em; text-transform: uppercase; color: rgb(245 230 216 / 0.82); }
.colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin: 26px 0 0; }
.as { margin-top: 34px; }

/* ---------- Distribution : un plan du film par personnage, dans ses couleurs ; le bas de chaque image se fond dans la page
   et porte le rôle (petites capitales ambre, comme au générique) et la voix. Zodiac et Morningstar, les deux voix du film, en grand. ---------- */
.distribution { display: grid; grid-template-columns: repeat(10, 1fr); gap: 12px; margin-top: 44px; }
.role { position: relative; grid-column: span 2; overflow: hidden; background: var(--encre); }
.role.grand { grid-column: span 5; }
.role img { display: block; width: 100%; height: auto; }
.role::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 58%;
  background: linear-gradient(to top, var(--encre) 0%, rgb(10 5 6 / 0.94) 22%, rgb(10 5 6 / 0.6) 50%, rgb(10 5 6 / 0) 100%); }
.role figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; margin: 0; padding: 0 10px 6px; text-align: center; font-style: normal; }
.role figcaption span { display: block; font-weight: 500; font-size: 12.5px; letter-spacing: 0.3em; margin-right: -0.3em; text-transform: uppercase; color: #e9a45c; }
.role figcaption b { display: block; margin-top: 4px; font-weight: 500; font-size: 20px; line-height: 1.2; color: var(--creme); }
.role.grand figcaption { padding-bottom: 10px; }
.role.grand figcaption span { font-size: 14px; }
.role.grand figcaption b { font-size: 27px; }
.suite { margin-top: 26px; text-align: center; font-size: 17px; color: var(--pale); }

/* ---------- Salle de guerre ---------- */
.trois { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.note { display: flex; align-items: baseline; gap: 14px; margin-top: 36px; padding-top: 20px; border-top: 1px solid rgb(243 184 58 / 0.3); font-size: 18px; color: var(--pale); }
.note svg { position: relative; top: 1px; }

/* ---------- Bande originale : la pochette, puis la liste des titres avec 15 secondes d'écoute chacun ---------- */
.disque { display: grid; grid-template-columns: 330px 1fr; gap: 56px; align-items: start; }
.pochette p { margin: 22px 0 24px; }
.mode { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; font-size: 18px; color: var(--pale); }
.pistes { list-style: none; columns: 2; column-gap: 44px; border-top: 1px solid rgb(243 184 58 / 0.28); }
.pistes li { position: relative; display: flex; align-items: center; break-inside: avoid; border-bottom: 1px solid rgb(243 184 58 / 0.28); }
.pistes button { position: relative; flex: 1; min-width: 0; display: grid; grid-template-columns: 16px 30px 1fr auto; align-items: baseline; gap: 10px; padding: 9px 4px 9px 0; border: 0; background: none; color: var(--creme); font: 500 17px/1.3 var(--jost); text-align: left; cursor: pointer; }
.pistes .num, .pistes .duree { font-family: var(--raj); font-weight: 600; font-size: 15px; letter-spacing: 0.08em; color: var(--pale); }
.pistes .titre { min-width: 0; }
.pistes .ic { width: 12px; height: 12px; align-self: center; color: var(--or); }
.pistes button i { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--or); }
.pistes button:hover .titre, .pistes .joue .titre { color: var(--or); }
.pistes .joue .num { color: var(--or); }
.pistes a { margin-left: 14px; font-family: var(--raj); font-weight: 600; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: var(--pale); border-bottom: 1px solid rgb(243 184 58 / 0.55); white-space: nowrap; }
.pistes a:hover { color: var(--or); }

/* ---------- Générique ---------- */
.generique { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
.generique > div { display: flex; justify-content: space-between; gap: 24px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid rgb(243 184 58 / 0.28); font-size: 18px; }
.generique .premiere { grid-column: 1 / -1; }
.generique dt { color: var(--pale); font-size: 16px; }
.generique dd { color: #fff; font-weight: 600; text-align: right; white-space: nowrap; }

/* ---------- Questions ---------- */
.questions > div { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; padding: 20px 0; border-bottom: 1px solid rgb(243 184 58 / 0.28); }
.questions dt { font-weight: 700; font-size: 21px; color: #fff; }

/* ---------- Pied ---------- */
.pied { margin-top: 128px; padding: 44px 0 40px; border-top: 1px solid rgb(236 132 51 / 0.45); }
.pied .page { display: grid; grid-template-columns: 1fr auto auto; gap: 16px 56px; align-items: baseline; }
.pied nav { display: flex; gap: 26px; }
.pied nav a { font-family: var(--raj); font-weight: 600; font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: var(--pale); }
.pied nav a:hover { color: var(--or); }
.pied p { grid-column: 1 / -1; font-size: 15px; color: var(--pale); }

/* ---------- Téléphone ---------- */
@media (max-width: 900px) {
  :root { --marge: 18px; }
  body { font-size: 17.5px; }
  .haut nav, .haut-actions { display: none; }
  .marque { font-size: 14px; letter-spacing: 0.28em; }
  .affiche video { display: none; }
  .actions { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px var(--marge) 6px; }
  .etiquette span { font-size: 18px; }
  .bloc { margin-top: 84px; padding-top: 25px; }
  .bandeau > div { height: 48px; padding: 0 34px; gap: 14px; }
  .bandeau h2 { font-size: 21px; -webkit-text-stroke-width: 2px; }
  .bandeau svg { width: 20px; height: 15px; }
  .panneau { --c: 22px; }
  .champ { padding: 58px 18px 30px; }
  .champ::before { background-size: 320% auto; }
  .deux, .colonnes, .trois, .disque, .generique, .faits { grid-template-columns: 1fr; }
  .deux { gap: 28px; }
  .colonnes { gap: 18px; }
  .faits { gap: 8px; margin-top: 28px; }
  .faits > div { font-size: 16.5px; padding: 10px 14px; }
  .volets article { margin-top: 72px; }
  .distribution { grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 30px; }
  .role.grand { grid-column: span 6; }
  .role:nth-child(6) { grid-column: 2 / span 2; }
  .role:nth-child(7) { grid-column: 4 / span 2; }
  .role figcaption { padding: 0 3px 6px; }
  .role figcaption b { font-size: 13.5px; }
  .role figcaption span { font-size: 9.5px; letter-spacing: 0.16em; margin-right: -0.16em; }
  .role.grand figcaption b { font-size: 22px; }
  .role.grand figcaption span { font-size: 12.5px; }
  .ligne { margin-bottom: 22px; }
  .ligne h2 { font-size: 21px; letter-spacing: 0.3em; margin-right: -0.3em; }
  .ligne span { margin-top: 10px; font-size: 12.5px; letter-spacing: 0.24em; margin-right: -0.24em; }
  .disque { gap: 28px; }
  .pochette img { max-width: 260px; }
  .pistes { columns: 1; }
  .pistes button { padding: 11px 4px 11px 0; }
  .generique > div { flex-direction: column; gap: 2px; }
  .generique dd { text-align: left; white-space: normal; }
  .questions > div { grid-template-columns: 1fr; gap: 8px; }
  .pied { margin-top: 84px; }
  .pied .page { grid-template-columns: 1fr; }
  .pied nav { flex-wrap: wrap; gap: 10px 22px; }
}

/* ---------- Panneaux affinés, version retenue par José le 09/10/2026 (« comme c'est là c'est bon ») : bandeau fin, capitales
   espacées comme sur l'affiche, filets d'un pixel, fond presque noir, carte à peine visible. Ces règles remplacent celles du haut
   du fichier (.bloc, .bandeau, .panneau, .champ, .faits), gardées pour mémoire du premier dessin. ---------- */
.panneau { --c: 24px; padding: 1px; background: rgb(236 132 51 / 0.5); }
.champ { --ci: calc(var(--c) - 0.6px); padding: 62px 56px 48px; background: #0c0607; }
.champ::before { filter: blur(16px) saturate(0.2) brightness(1.1); opacity: 0.16; }
.champ::after { background: none; }
.faits > div { border-color: rgb(243 184 58 / 0.3); background: none; font-weight: 500; font-size: 17px; }
.faits dt { color: var(--pale); }
.faits dd { color: var(--creme); }
.texte b { color: var(--creme); }
.generique dd { color: var(--creme); font-weight: 500; }
.bloc .colonnes { margin-top: 30px; }

.bloc { padding-top: 21px; }
.bandeau { padding: 1px; background: rgb(236 132 51 / 0.62); clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 15px 100%, 0 50%); }
.bandeau > div { gap: 18px; height: 40px; padding: 0 32px; background: #0c0607; clip-path: polygon(14.5px 0, calc(100% - 14.5px) 0, calc(100% - 1.3px) 50%, calc(100% - 14.5px) 100%, 14.5px 100%, 1.3px 50%); }
.bandeau h2 { font-weight: 500; font-size: 16px; letter-spacing: 0.36em; margin-right: -0.36em; color: var(--creme); -webkit-text-stroke: 0; }
.bandeau svg { width: 15px; height: 11px; color: rgb(243 184 58 / 0.75); }

@media (max-width: 900px) {
  .panneau { --c: 16px; }
  .champ { padding: 46px 18px 30px; }
  .bloc { padding-top: 18px; }
  .bandeau > div { height: 34px; padding: 0 24px; gap: 12px; }
  .bandeau h2 { font-size: 13.5px; letter-spacing: 0.3em; margin-right: -0.3em; }
}

/* ---------- Toutes les tailles d'écran (09/10/2026). Les règles « Téléphone » plus haut valent jusqu'à 900 px ; ce bloc règle
   ce qu'il y a entre le téléphone et le grand écran, et affine le téléphone. Contrôle : responsive.py (treize tailles). ---------- */
.haut nav a { white-space: nowrap; }
/* l'image d'attente des bandeaux vidéo est posée ici (et non dans la page) pour pouvoir changer avec la taille de l'écran */
video.b-3d { background-image: url(img/bande-3d.jpg); }
video.b-2d { background-image: url(img/bande-2d.jpg); }
video.b-voix { background-image: url(img/bande-voix.jpg); }
.as figure { display: none; }

/* Ordinateur portable (1181 à 1320 px) : la barre du haut se resserre */
@media (min-width: 1181px) and (max-width: 1320px) {
  .haut { padding: 0 36px; }
  .haut nav { gap: 22px; margin-right: 28px; }
}

/* Petit ordinateur, tablette couchée, fenêtre réduite (901 à 1180 px) : la mise en page du grand écran, resserrée */
@media (min-width: 901px) and (max-width: 1180px) {
  :root { --marge: 36px; }
  .haut nav { display: none; }
  .champ { padding-left: 40px; padding-right: 40px; }
  .deux { gap: 40px; }
  .colonnes { gap: 36px; }
  .role figcaption b { font-size: 17px; }
  .role.grand figcaption b { font-size: 24px; }
  .disque { grid-template-columns: 1fr; gap: 36px; }
  .pochette { display: grid; grid-template-columns: 250px 1fr; gap: 36px; align-items: center; }
  .pochette p { margin: 0; }
  .generique > div { flex-direction: column; gap: 2px; }
  .generique dd { text-align: left; white-space: normal; }
  .pied .page { grid-template-columns: 1fr auto; }
  .pied nav.legal { grid-column: 1 / -1; }
}

/* Les deux actions sous l'affiche (téléphone et tablette ; sur grand écran elles sont dans la barre du haut). José, 09/10/2026 :
   « le placement est bof ». Avant : deux étiquettes de largeurs inégales, l'une sous l'autre, sur une bande de ciel prise entre
   le noir de l'affiche et le noir du fondu. Maintenant : côte à côte, de même largeur, sur le noir du bas de l'affiche. */
@media (max-width: 900px) {
  section.tete { background: #000; }
  .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; padding: 4px var(--marge) 10px; }
  .actions .etiquette { display: block; --t: 15px; }
  .actions .etiquette span { justify-content: center; padding: 12px 17px 12px 6px; font-size: 15px; gap: 7px; }
  .actions .etiquette svg { width: 11px; height: 11px; }
}
@media (max-width: 339px) {
  .actions { grid-template-columns: 1fr; }
}

/* Tablette debout, téléphone couché (601 à 900 px) : une colonne, mais les images côte à côte */
@media (min-width: 601px) and (max-width: 900px) {
  :root { --marge: 28px; }
  .actions { grid-template-columns: repeat(2, minmax(0, 250px)); justify-content: center; gap: 14px; padding-bottom: 14px; }
  .actions .etiquette { --t: 18px; }
  .actions .etiquette span { padding: 12px 26px 12px 12px; font-size: 17px; gap: 10px; }
  .actions .etiquette svg { width: 13px; height: 13px; }
  .distribution { grid-template-columns: repeat(10, 1fr); gap: 10px; }
  .role.grand { grid-column: span 5; }
  .role:nth-child(6), .role:nth-child(7) { grid-column: span 2; }
  .role figcaption b { font-size: 14.5px; }
  .role figcaption span { font-size: 11px; letter-spacing: 0.14em; margin-right: -0.14em; }
  .pochette { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: center; }
  .pochette img { max-width: none; }
  .pochette p { margin: 0; }
  .pied nav a { padding: 8px 0; }
  .pied nav { gap: 2px 24px; }
}
@media (min-width: 700px) and (max-width: 900px) {
  .colonnes { grid-template-columns: 1fr 1fr; gap: 28px; }
  .generique { grid-template-columns: 1fr 1fr; gap: 0 36px; }
  .questions > div { grid-template-columns: 5fr 7fr; gap: 28px; }
}

/* Téléphone (jusqu'à 600 px) */
@media (max-width: 600px) {
  /* les trois As l'un sous l'autre, un cadre pour les trois (sur grand écran : côte à côte dans une seule image) */
  .as { border: 1px solid var(--or); background: #080809; }
  .as > img { display: none; }
  .as figure { display: block; position: relative; overflow: hidden; }
  .as figure + figure { margin-top: 3px; }
  .as figure img { display: block; width: 100%; height: auto; }
  .as figure::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: linear-gradient(to top, rgb(8 8 9 / 0.94) 0%, rgb(8 8 9 / 0.5) 45%, rgb(8 8 9 / 0) 100%); }
  .as figcaption { position: absolute; left: 16px; right: 16px; bottom: 13px; z-index: 1; margin: 0; font-style: normal; }
  .as figcaption b { display: block; font-family: var(--raj); font-weight: 700; font-size: 28px; line-height: 1; letter-spacing: 0.07em; text-transform: uppercase; color: #f5f0e8; }
  .as figcaption span { display: block; margin-top: 5px; font-family: var(--raj); font-weight: 600; font-size: 13.5px; line-height: 1.2; letter-spacing: 0.2em; text-transform: uppercase; color: #e8a33d; }
  /* les bandeaux vidéo en 16:9, image entière : la bande large n'y ferait que 98 px de haut */
  video.bande:not(.grand) { aspect-ratio: 16 / 9; }
  video.b-3d { background-image: url(img/bande-3d-tel.jpg); }
  video.b-2d { background-image: url(img/bande-2d-tel.jpg); }
  video.b-voix { background-image: url(img/bande-voix-tel.jpg); }
  .role figcaption span { font-size: 11px; letter-spacing: 0.1em; margin-right: -0.1em; }
  /* des liens assez hauts pour le doigt */
  .pied nav a { padding: 9px 0; }
  .pied nav { gap: 2px 24px; }
  .pistes a { position: relative; }
  .pistes a::after { content: ""; position: absolute; inset: -12px -8px; }
}

/* ---------- Ordinateur (901 px et plus) : la barre du haut et les deux actions (09/10/2026, proposition 3 retenue).
   Avant : menu et étiquettes tassés à droite, le milieu vide, et la barre s'en allait dès qu'on descendait.
   Maintenant : la barre reste en haut pendant la lecture, sur trois zones (marque, menu au centre, les deux étiquettes à droite, plus grandes),
   et les deux étiquettes sont reprises en grand au pied de l'affiche, sur son noir, comme sur téléphone et tablette.
   Contrôle : en-ligne/verifie_barre.py. ---------- */
@media (min-width: 901px) {
  html { scroll-padding-top: 60px; }      /* le menu ne glisse pas le haut d'une section sous la barre */
  .haut { position: sticky; top: 0; z-index: 30; height: 60px; display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 28px;
          background: #060304; box-shadow: 0 1px 0 rgb(236 132 51 / 0.30); }
  .haut .marque { justify-self: start; }
  .haut nav { margin: 0; gap: 34px; }
  .haut-actions { justify-self: end; align-items: center; gap: 16px; }
  .haut .etiquette.petite { --t: 16px; }
  .haut .etiquette.petite span { padding: 8px 32px 8px 17px; font-size: 16.5px; gap: 10px; }
  .haut .etiquette.petite svg { width: 12px; height: 12px; }
  section.tete { background: #000; }
  .actions { display: flex; justify-content: center; gap: 22px; padding: 6px var(--marge) 26px; background: #000; }
  .actions .etiquette span { min-width: 268px; justify-content: center; padding: 13px 44px 13px 24px; }
}
@media (min-width: 1321px) and (max-width: 1500px) { .haut nav { gap: 26px; } .haut { column-gap: 40px; } }
@media (min-width: 901px) and (max-width: 1320px) { .haut nav { gap: 20px; } .haut { column-gap: 22px; } }
@media (min-width: 901px) and (max-width: 1180px) { .haut { grid-template-columns: 1fr auto; } }
/* très grand écran (2200 px et plus) : l'affiche grandit avec la fenêtre, la barre et les étiquettes la suivent au lieu de rester minuscules */
@media (min-width: 2200px) {
  html { scroll-padding-top: 74px; }
  .haut { height: 74px; padding: 0 96px; }
  .haut .marque { font-size: 20px; }
  .haut nav { gap: 46px; }
  .haut nav a { font-size: 20px; }
  .haut-actions { gap: 22px; }
  .haut .etiquette.petite { --t: 20px; }
  .haut .etiquette.petite span { padding: 10px 42px 10px 22px; font-size: 20.5px; gap: 13px; }
  .haut .etiquette.petite svg { width: 14px; height: 14px; }
  .actions { gap: 30px; padding: 12px var(--marge) 40px; }
  .actions .etiquette { --t: 26px; }
  .actions .etiquette span { min-width: 350px; padding: 17px 56px 17px 30px; font-size: 24px; gap: 15px; }
  .actions .etiquette svg { width: 17px; height: 17px; }
}