/* Bal Machine — feuille unique.
   Ordre : jetons → polices → base → lecture verticale (par défaut, sans script)
   → html.travelling (ajouté par app.js) → composants → mobile → mouvement réduit. */

/* == Jetons == */
:root {
  --couleur-nuit: #0a0504;
  --couleur-creme: #f1e7d6;
  --couleur-creme-doux: #b9ab97;
  --couleur-texte: #d9cdbb;
  --couleur-or: #e2a04a;
  --place-raccourci: 340px; /* réservée au raccourci, à droite du pied */
  --couleur-champ: #806b59; /* bordure des champs, 4:1 */
  --couleur-rouge: #e8442a; /* le rouge de la carriole : petites touches (5,1:1 sur la nuit) */
  --couleur-filet: #3a2a20;
  --couleur-sombre: #8a7c6c;
  --police-titre: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
  --police-texte: "Instrument Sans", system-ui, sans-serif;
  --graisse-fine: 40;
  --graisse-pleine: 1000;
  --marge: 9vw;
  --duree-fondu: 1s;
  --courbe: cubic-bezier(.2, .7, .2, 1);
  --halo: 0 0 12px var(--couleur-nuit), 0 0 4px var(--couleur-nuit);
}

/* == Polices (auto-hébergées) == */
@font-face { font-family: "Sofia Sans Extra Condensed"; src: url("fonts/sofia-sans-extra-condensed.woff2") format("woff2"); font-weight: 1 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
/* Italique : chargée par app.js à l'approche du texte qui en a besoin (story 7.1) */

/* == Base == */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { background: var(--couleur-nuit); color: var(--couleur-creme); font-family: var(--police-texte); -webkit-font-smoothing: antialiased; text-size-adjust: 100%; }
body { background: var(--couleur-nuit); overflow-x: hidden; }
img, picture, video { display: block; max-width: 100%; }
figure { margin: 0; }
a { color: inherit; }
ul { list-style: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--couleur-or); outline-offset: 3px; }
::selection { background: var(--couleur-or); color: var(--couleur-nuit); }

/* Typographie : titres en Sofia (contraste fin / plein), texte en Instrument Sans */
.nom, .titre { font-family: var(--police-titre); text-transform: uppercase; line-height: .8; font-weight: var(--graisse-pleine); }
.fin { font-weight: var(--graisse-fine); }
.plein { font-weight: var(--graisse-pleine); }
.or { color: var(--couleur-or); }
.titre .fin, .titre .plein { display: block; }
/* Rappel du nom d'accueil (titre du contact) : même composition, sur une ligne, sans allumage */
.rappel-nom { display: block; white-space: nowrap; }
.rappel-nom .nom__bal, .rappel-nom .nom__machine { display: inline; }
.titre { font-size: clamp(60px, 6.8vw, 128px); margin-bottom: 32px; }
.titre--grand { font-size: clamp(68px, 8vw, 150px); }
.etiquette { font-size: 13px; letter-spacing: .24em; text-transform: uppercase; font-weight: 500; color: var(--couleur-rouge); margin-bottom: 22px; }
.panneau__texte p:not(.etiquette):not(.accroche):not(.bandeau):not(.devise):not(.duree) { font-size: clamp(17px, 1.25vw, 19px); line-height: 1.8; color: var(--couleur-texte); max-width: 36ch; }
.panneau__texte p + p { margin-top: 1em; }
.a-venir { display: inline-block; padding: 8px 14px; border: 1px dashed var(--couleur-filet); color: var(--couleur-sombre); font-style: italic; font-size: 15px; }



/* == Lecture verticale (défaut) == */
.panneau { position: relative; display: grid; grid-template-columns: var(--marge) 36vw 1fr; align-items: center; min-height: 100svh; }
.panneau + .panneau { margin-top: 14vh; }
.panneau__texte { grid-column: 2; grid-row: 1; position: relative; z-index: 2; padding: 12vh 0; }
.panneau__media { grid-column: 3; grid-row: 1; align-self: stretch; position: relative; overflow: hidden; margin-left: 4vw; min-height: 70vh; }
.panneau__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panneau__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--couleur-nuit) 0%, rgba(10, 5, 4, 0) 35%); }

/* Ouverture : image pleine hauteur à droite, nom à gauche, grain de pellicule */
.panneau--ouverture { min-height: 100svh; }
.panneau--ouverture .panneau__media { position: absolute; inset: 0 0 0 auto; width: 60vw; margin: 0; min-height: 0; grid-column: auto; }
.panneau--ouverture .panneau__media img { object-position: 45% 85%; }
.panneau--ouverture .panneau__media::after { background: linear-gradient(90deg, var(--couleur-nuit) 0%, rgba(10, 5, 4, .55) 18%, rgba(10, 5, 4, 0) 46%), linear-gradient(0deg, rgba(10, 5, 4, .5), rgba(10, 5, 4, 0) 30%); }
.panneau--ouverture .panneau__media::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.nom { font-size: clamp(90px, 12.5vw, 230px); color: var(--couleur-creme); margin-bottom: 30px; }
.nom__bal, .nom__machine { display: block; }
.nom__machine { white-space: nowrap; }
/* État final de MACHINE (aussi celui du mode réduit et sans script) : graisse progressive, E en or */
.nom__machine span:nth-child(1) { font-weight: 40; }
.nom__machine span:nth-child(2) { font-weight: 200; }
.nom__machine span:nth-child(3) { font-weight: 360; }
.nom__machine span:nth-child(4) { font-weight: 520; }
.nom__machine span:nth-child(5) { font-weight: 680; }
.nom__machine span:nth-child(6) { font-weight: 840; }
.nom__machine span:nth-child(7) { font-weight: 1000; color: var(--couleur-or); }
.accroche { margin: 12px 0 52px; font-size: clamp(17px, 1.3vw, 20px); color: var(--couleur-creme-doux); }
.accroche__formation { display: block; }

/* Présentation : image à droite (défaut). Musiciens : image à gauche, regard vers le texte */
:is(#sylvie, #christophe) { grid-template-columns: 1fr 36vw var(--marge); }
:is(#sylvie, #christophe) .panneau__texte { grid-column: 2; }
:is(#sylvie, #christophe) .panneau__media { grid-column: 1; grid-row: 1 / 3; margin: 0 4vw 0 0; }
.panneau__texte--suite { grid-row: 2; padding-top: 0; }
.panneau--spectacle .panneau__media { grid-row: 1 / 3; }
#christophe .panneau__media img { object-position: 50% 20%; }
/* Textes du dossier (7.2) : bandeau, devise, durée, intertitres */
.bandeau { margin-top: 22px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.6; color: var(--couleur-creme-doux); }
.devise, .duree, .intertitre { font-family: var(--police-titre); text-transform: uppercase; font-weight: var(--graisse-pleine); line-height: 1; }
.devise { margin: 30px 0 12px; font-size: clamp(26px, 2.4vw, 40px); color: var(--couleur-or); }
.duree { margin: 12px 0 14px; font-size: clamp(22px, 1.9vw, 32px); color: var(--couleur-creme); }
.intertitre { margin: 28px 0 10px; font-size: clamp(22px, 1.9vw, 32px); color: var(--couleur-creme); }
.panneau__texte--suite > .intertitre:first-child, .panneau__texte--suite > .bloc:first-child > .intertitre:first-child { margin-top: 0; }
.titre + .bandeau { margin-top: 0; } /* sous un titre, pas d'écart en plus */
:is(#sylvie, #christophe) .panneau__media::after { background: linear-gradient(270deg, var(--couleur-nuit) 0%, rgba(10, 5, 4, 0) 35%); }

/* Vidéo : l'affiche en grand, le titre posé dans la zone fondue */
.panneau--video { grid-template-columns: var(--marge) 1fr; align-items: end; }
.panneau--video .panneau__media { position: absolute; inset: 0; margin: 0; min-height: 0; grid-column: auto; }
.panneau--video .panneau__media::after { background: linear-gradient(0deg, var(--couleur-nuit) 0%, rgba(10, 5, 4, .35) 45%, rgba(10, 5, 4, .35) 75%, var(--couleur-nuit) 100%), linear-gradient(90deg, rgba(10, 5, 4, .85) 0%, rgba(10, 5, 4, .7) 30%, rgba(10, 5, 4, 0) 60%); }
.panneau--video .panneau__texte { grid-column: 2; padding-bottom: 14vh; }
.video__lancer { display: inline-flex; gap: 16px; align-items: center; color: var(--couleur-or); text-decoration: none; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; font-weight: 500; text-shadow: var(--halo); }
/* lecture : disque or plein */
.video__lancer::before { content: ""; width: 80px; height: 80px; border-radius: 50%; flex: none; transition: transform .3s, box-shadow .3s;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'><path d='M0 0 10 6 0 12z' fill='%230a0504'/></svg>") 56% 50% / 20px no-repeat var(--couleur-or);
  box-shadow: 0 0 0 6px rgba(226, 160, 74, .18), 0 0 28px rgba(226, 160, 74, .35); }
.video__lancer:hover::before { transform: scale(1.06); box-shadow: 0 0 0 9px rgba(226, 160, 74, .22), 0 0 36px rgba(226, 160, 74, .45); }

/* Contact */
.panneau--contact { grid-template-columns: var(--marge) 40vw 1fr; align-items: center; }
.intro { color: var(--couleur-creme-doux); font-size: 17px; line-height: 1.7; max-width: 30ch; }
.pied { grid-column: 2 / -1; grid-row: 2; padding-bottom: 12vh; }
.pied__liens { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; font-weight: 500; }
.pied__liens a { color: var(--couleur-creme-doux); text-decoration: none; border-bottom: 1px solid transparent; }
.pied__liens a:hover { border-color: var(--couleur-creme-doux); }
.pied__liens .a-venir { font-size: 11px; letter-spacing: .12em; padding: 4px 8px; text-transform: none; }

/* == Mobile == */
@media (max-width: 760px) {
  :root { --marge: 24px; }
  .panneau, :is(#sylvie, #christophe), .panneau--contact { grid-template-columns: 24px 1fr 24px; min-height: 0; }
  .panneau + .panneau { margin-top: 10vh; }
  .panneau__texte, :is(#sylvie, #christophe) .panneau__texte { grid-column: 2; grid-row: 2; padding: 32px 0 0; }
  .panneau__media, :is(#sylvie, #christophe) .panneau__media { grid-column: 1 / -1; grid-row: 1; margin: 0; min-height: 58vh; }
  .panneau__media::after, :is(#sylvie, #christophe) .panneau__media::after { background: linear-gradient(0deg, var(--couleur-nuit) 0%, rgba(10, 5, 4, 0) 40%); }
  :is(#sylvie, #christophe) .panneau__media { grid-row: 1; }
  .panneau__texte--suite, :is(#sylvie, #christophe) .panneau__texte--suite { grid-row: 3; padding-top: 1em; }
  .panneau--ouverture { min-height: 100svh; align-items: end; }
  .panneau--ouverture .panneau__media { inset: 0 0 auto 0; width: auto; height: 64vh; }
  .panneau--ouverture .panneau__media img { object-position: 68% 50%; }
  .panneau--ouverture .panneau__media::after { background: linear-gradient(0deg, var(--couleur-nuit) 0%, rgba(10, 5, 4, .4) 30%, rgba(10, 5, 4, 0) 60%); }
  .panneau--ouverture .panneau__texte { padding-bottom: 12vh; }
  .nom { font-size: clamp(84px, 27vw, 130px); }
  .titre, .titre--grand { font-size: clamp(54px, 17vw, 84px); margin-bottom: 18px; }
  .panneau__texte p:not(.etiquette):not(.accroche):not(.bandeau):not(.devise):not(.duree) { font-size: 17px; line-height: 1.7; }
  .panneau--video { grid-template-columns: 24px 1fr 24px; min-height: 90svh; }
  .panneau--video .panneau__media { position: absolute; inset: 0; min-height: 0; }
  .panneau--video .panneau__texte { grid-row: 1; padding-bottom: 10vh; }
  .pied { grid-column: 2; grid-row: 3; padding: 48px 0 12vh; }
}

/* == Nom : allumage (app.js) == */
#titre-ouverture .nom__machine span:last-child { transition: color .6s ease .2s; }
.est-allumage #titre-ouverture .nom__machine span:last-child { color: var(--couleur-creme); }

/* == Éléments fixes : évitement, raccourci == */
.evitement { position: absolute; z-index: 60; left: 16px; top: -60px; padding: 12px 18px; background: var(--couleur-or); color: var(--couleur-nuit); font-weight: 600; text-decoration: none; }
.evitement:focus { top: 16px; }
.raccourci { position: fixed; z-index: 50; right: 28px; bottom: 26px; display: flex; gap: 8px; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; font-weight: 500; }
.raccourci a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; color: var(--couleur-creme); text-decoration: none; text-shadow: var(--halo); background: rgba(10, 5, 4, .78); border-radius: 22px; }
/* « Programmer » : le seul appel commercial, cadré d'or et lisible sur n'importe quelle image (audit du 24/10) */
.raccourci a:last-child { color: var(--couleur-or); border: 1px solid var(--couleur-or); }
.raccourci a:hover { text-decoration: underline; text-underline-offset: 6px; }
.titre:focus { outline: none; }

/* == Travelling (html.travelling, posé par app.js) == */
.travelling .piste { position: relative; }
.travelling .piste__plateau { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.travelling .piste__rail { position: absolute; inset: 0 auto 0 0; display: flex; will-change: transform; }
.travelling .panneau { display: flex; flex: none; height: 100svh; min-height: 0; margin: 0; align-items: stretch; }
.travelling .panneau__texte { flex: none; width: 46vw; padding: 0 5vw 0 var(--marge); display: flex; flex-direction: column; justify-content: center; }
.travelling .panneau__media { flex: none; width: 62vw; height: 100%; min-height: 0; margin: 0; }
.travelling .panneau__media--etroit { width: 40vw; }
/* Débord de 7 vw : la profondeur décale l'image d'au plus 6 vw, son bord reste derrière le fondu */
.travelling .panneau__media img { inset: 0 -7vw; width: calc(100% + 14vw); max-width: none; transform: translate3d(calc(var(--profondeur, 0) * 1px), 0, 0); }
.travelling .panneau__media::after,
.travelling #sylvie .panneau__media::after { background: linear-gradient(90deg, var(--couleur-nuit), rgba(10, 5, 4, 0) 16%, rgba(10, 5, 4, 0) 84%, var(--couleur-nuit)); }
@media (min-width: 761px) {
  /* colonne 1 à la largeur de son texte, la suite tout près */
  .travelling :is(#sylvie, #christophe) .panneau__texte:not(.panneau__texte--suite) { width: 34vw; padding-right: 3vw; }
  .travelling :is(#sylvie, #christophe) .panneau__texte--suite { width: 42vw; }
}
.travelling .panneau__texte--suite { width: 40vw; padding-top: 0; padding-left: 0; }
@media (min-width: 761px) {
  /* Christophe et Sylvie : le texte se rapproche de la photo et mord un peu sur son fondu (25/10) */
  .travelling #christophe .panneau__texte:not(.panneau__texte--suite), .travelling #sylvie .panneau__texte:not(.panneau__texte--suite) { margin-left: -7vw; padding-left: 0; }
}
/* Présentation en deux colonnes ; titre du spectacle à la largeur de sa colonne */
@media (min-width: 761px) {
  .travelling .panneau--presentation .panneau__texte:not(.panneau__texte--suite) { width: 40vw; padding-right: 3vw; }
  .travelling .panneau--presentation .panneau__texte--suite { width: 38vw; padding-right: 3vw; }
  .travelling .panneau--presentation .bloc + .bloc { margin-top: 8px; }
  .travelling .panneau--spectacle .titre { font-size: clamp(48px, min(5.4vw, 11vh), 112px); }
}
/* Ordinateurs étroits : colonnes plus larges, donc moins hautes */
@media (min-width: 761px) and (max-width: 1100px) {
  .travelling .panneau--presentation .panneau__texte:not(.panneau__texte--suite) { width: 50vw; }
  .travelling .panneau--presentation .panneau__texte--suite { width: 46vw; }
  .travelling .panneau--spectacle .panneau__texte.panneau__texte:not(.panneau__texte--suite) { width: 36vw; }
  .travelling .panneau--spectacle .panneau__texte.panneau__texte--suite { width: 52vw; }
  .travelling #sylvie .panneau__texte--suite { width: 54vw; } /* bio longue du 14/11/2026 */
  .travelling .panneau--contact .pied { padding: 0 var(--marge) 72px 0; } /* au-dessus du raccourci */
  .travelling .panneau--contact .pied__liens { gap: 8px 24px; }
}
/* Spectacle : la scène en plein écran, le texte sur une bande de nuit */
.travelling .panneau--spectacle { width: 160vw; justify-content: center; align-items: center; }
.travelling .panneau--spectacle .panneau__media { position: absolute; inset: 0; width: 100%; height: 100%; }
.travelling .panneau--spectacle .panneau__media img { inset: 0; width: 100%; transform: none; }
.travelling .panneau--spectacle .panneau__media::after { background: linear-gradient(90deg, var(--couleur-nuit) 0%, rgba(10, 5, 4, 0) 7%, rgba(10, 5, 4, 0) 22%, rgba(10, 5, 4, .9) 31%, rgba(10, 5, 4, .9) 70%, rgba(10, 5, 4, 0) 79%, rgba(10, 5, 4, 0) 93%, var(--couleur-nuit) 100%), linear-gradient(0deg, rgba(10, 5, 4, .5), rgba(10, 5, 4, 0) 30%); }
.travelling .panneau--spectacle .panneau__texte { position: relative; width: 32vw; padding: 0 2vw; }
/* Spectacle sur un écran (05/11, maquette validée) ; 16 px : exception à la règle des 17 px */
@media (min-width: 761px) {
  /* un halo par colonne, qui la suit à toutes les tailles d'ordinateur */
  .travelling #spectacle .panneau__texte::before { content: ""; position: absolute; z-index: -1; inset: -2vh -1.5vw; border-radius: 48px; background: rgba(10, 5, 4, .92); box-shadow: 0 0 56px 40px rgba(10, 5, 4, .92); }
}
@media (min-width: 1101px) {
  .travelling #spectacle { width: 100vw; }
  .travelling #spectacle .panneau__media { background: var(--couleur-nuit); }
  .travelling #spectacle .panneau__media img { inset: 15vh 0 0; height: 85vh; object-position: 50% 30%; -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%); mask-image: linear-gradient(180deg, transparent, #000 22%); }
  .travelling #spectacle .panneau__media::after { background: linear-gradient(90deg, var(--couleur-nuit), rgba(10, 5, 4, 0) 9%, rgba(10, 5, 4, 0) 91%, var(--couleur-nuit)), linear-gradient(0deg, var(--couleur-nuit), rgba(10, 5, 4, 0) 22%); } /* bords fondus */
  .travelling #spectacle .panneau__texte { position: absolute; left: 8vw; top: 10vh; width: min(25vw, 480px); padding: 0; }
  .travelling #spectacle .panneau__texte--suite { left: 35vw; top: auto; bottom: 13vh; width: min(39vw, 760px); }
  .travelling #spectacle .titre :is(.fin, .plein) { display: inline; }
  .travelling #spectacle .titre { font-size: clamp(40px, min(4.2vw, 8vh), 76px); margin-bottom: 12px; }
  .travelling #spectacle .etiquette { margin-bottom: 10px; }
  .travelling #spectacle .duree { margin: 6px 0 8px; }
  .travelling #spectacle .intertitre { margin: 20px 0 6px; }
  .travelling #spectacle .bloc:first-child > .intertitre:first-child { margin-top: 0; }
  .travelling #spectacle .panneau__texte p:not(.etiquette):not(.bandeau):not(.duree) { font-size: 16px; line-height: 1.5; max-width: none; }
}
/* Ouverture et vidéo : un écran entier, média en absolu */
.travelling .panneau--ouverture, .travelling .panneau--video { width: 100vw; align-items: center; }
.travelling .panneau--ouverture .panneau__texte { width: auto; padding-right: 0; }
.travelling .panneau--ouverture .panneau__media { position: absolute; width: 60vw; height: auto; }
.travelling .panneau--ouverture .panneau__media img { inset: 0; width: 100%; transform: none; }
.travelling .panneau--ouverture .panneau__media::after { background: linear-gradient(90deg, var(--couleur-nuit) 0%, rgba(10, 5, 4, .55) 18%, rgba(10, 5, 4, 0) 46%), linear-gradient(270deg, var(--couleur-nuit), rgba(10, 5, 4, 0) 12%); }
/* Vidéo (05/11) : affiche encadrée ; disque et zone cliquable calés sur le cadre */
.travelling { --cadre-l: min(50vw, calc((100svh - 240px) * 16 / 9)); --cadre-g: calc(92vw - var(--cadre-l)); --cadre-y: 50svh; }
.travelling .panneau--video .panneau__media { box-sizing: border-box; inset: auto; left: var(--cadre-g); top: calc(var(--cadre-y) - var(--cadre-l) * 9 / 32); width: var(--cadre-l); height: calc(var(--cadre-l) * 9 / 16); border: 1px solid rgba(242, 230, 210, .38); outline: 1px solid rgba(242, 230, 210, .12); outline-offset: 8px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.travelling .panneau--video .panneau__media img { inset: 0; width: 100%; transform: none; }
.travelling .panneau--video .panneau__media::after { background: rgba(10, 5, 4, .25); }
.travelling .panneau--video .panneau__texte { position: static; width: calc(var(--cadre-g) - 11vw); padding: 0 0 0 8vw; }
.travelling #video .titre { font-size: clamp(56px, 6vw, 110px); }
.travelling .video__lancer::before { position: absolute; z-index: 3; left: calc(var(--cadre-g) + var(--cadre-l) / 2); top: var(--cadre-y); margin: -40px 0 0 -40px; }
.travelling .video__lancer::after { content: ""; position: absolute; z-index: 2; left: var(--cadre-g); top: calc(var(--cadre-y) - var(--cadre-l) * 9 / 32); width: var(--cadre-l); height: calc(var(--cadre-l) * 9 / 16); }
.travelling .video__lancer:focus-visible::before { outline: 2px solid var(--couleur-or); outline-offset: 6px; }
.travelling .video__fermer { top: calc(var(--cadre-y) + var(--cadre-l) * 9 / 32 + 16px); left: var(--cadre-g); right: auto; }
/* Contact : dernier écran */
/* Le pied a sa propre rangée sous le contenu : posé par-dessus en absolu, il recouvrait le kit ou le bouton
   d'envoi sur les écrans peu hauts (défaut vu en 6.2) */
.travelling .panneau--contact { width: 100vw; display: grid; grid-template-columns: var(--marge) 40vw 1fr; grid-template-rows: 1fr auto; align-items: center; }
.travelling .panneau--contact .panneau__texte { width: auto; padding: 0; display: block; }
.travelling .pied { grid-column: 2 / -1; grid-row: 2; padding: 0 var(--place-raccourci) 56px 0; }

@media (max-width: 760px) {
  .raccourci { left: 0; right: 0; bottom: 0; justify-content: space-around; padding: 6px 8px 10px; background: linear-gradient(0deg, var(--couleur-nuit) 55%, rgba(10, 5, 4, 0)); }
  .raccourci a { background: none; }
  .travelling .panneau__texte, .travelling #sylvie .panneau__texte { width: 100vw; padding: 0 24px 22vh; justify-content: flex-end; }
  .travelling .panneau__media { width: 100vw; }
  .travelling .panneau__media--etroit { width: 84vw; }
  .travelling .panneau--ouverture .panneau__texte { width: 100vw; padding: 0 24px 16vh; }
  .travelling .panneau--ouverture { align-items: flex-end; }
  .travelling .panneau--ouverture .panneau__media { inset: 0 0 auto 0; width: 100vw; height: 64vh; }
  .travelling .panneau--ouverture .panneau__media::after { background: linear-gradient(0deg, var(--couleur-nuit) 0%, rgba(10, 5, 4, .7) 35%, rgba(10, 5, 4, 0) 62%), linear-gradient(90deg, rgba(10, 5, 4, .55) 0%, rgba(10, 5, 4, 0) 60%); }
  .travelling { --cadre-l: calc(100vw - 48px); --cadre-g: 24px; --cadre-y: calc(16svh + var(--cadre-l) * 9 / 32); }
  .travelling .panneau--video .panneau__texte { align-self: flex-start; width: 100vw; padding: calc(var(--cadre-y) + var(--cadre-l) * 9 / 32 + 28px) 24px 0; }
  .panneau--video .panneau__media::after { background: linear-gradient(0deg, var(--couleur-nuit) 0%, rgba(10, 5, 4, .92) 48%, rgba(10, 5, 4, .3) 76%, rgba(10, 5, 4, 0) 100%); }
  .travelling .panneau--spectacle { width: 300vw; justify-content: flex-start; align-items: stretch; }
  .travelling .panneau--spectacle .panneau__texte { width: 100vw; padding: 0 24px 22vh; }
  /* colonne trop haute : chaque bloc devient un écran */
  .travelling .panneau--spectacle .panneau__texte--suite,
  .travelling .panneau--presentation .panneau__texte:not(.panneau__texte--suite) { display: contents; }
  .travelling .panneau--spectacle .bloc, .travelling .panneau--presentation .bloc { flex: none; width: 100vw; padding: 0 24px 22vh; display: flex; flex-direction: column; justify-content: flex-end; position: relative; z-index: 2; }
  .travelling .panneau--spectacle .panneau__media::after { background: linear-gradient(0deg, var(--couleur-nuit) 0%, rgba(10, 5, 4, .88) 55%, rgba(10, 5, 4, .45) 100%); }
  .travelling .panneau--contact { grid-template-columns: 24px 1fr 24px; align-content: center; }
}

@media (max-width: 760px) and (max-height: 720px) {
  .travelling .panneau__texte, .travelling #sylvie .panneau__texte { padding-bottom: 13vh; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* == Médias (app.js) == */
/* Boucle (6.3) : déjà recadrée au format du cadre ; sur ordinateur, calée à gauche pour garder Christophe
   dans le plan large du duo */
.panneau--ouverture .panneau__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 25% 50%; }
@media (max-width: 760px) { .panneau--ouverture .panneau__media video { object-position: 50% 50%; } }
.video__lecteur { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border: 0; background: #000; }
.est-en-lecture .video__lancer::before, .est-en-lecture .video__lancer::after { display: none; } /* le lecteur prend le cadre, le titre reste */
.son { position: fixed; z-index: 50; top: 30px; right: var(--marge); display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; background: rgba(10, 5, 4, .72); border: 1px solid var(--couleur-filet); border-radius: 99px; cursor: pointer;
  font: 500 11px var(--police-texte); letter-spacing: .24em; text-transform: uppercase; color: var(--couleur-creme); text-shadow: var(--halo); }
.son__vumetre { display: inline-flex; gap: 2px; align-items: flex-end; height: 11px; }
.son__vumetre i { width: 2px; height: 3px; background: var(--couleur-or); }
.son[aria-pressed="true"] .son__vumetre i { animation: vumetre .9s ease-in-out infinite alternate; }
.son[aria-pressed="true"] .son__vumetre i:nth-child(2) { animation-delay: -.3s; }
.son[aria-pressed="true"] .son__vumetre i:nth-child(3) { animation-delay: -.6s; }
@keyframes vumetre { from { height: 3px; } to { height: 11px; } }
.son:hover .son__libelle { text-decoration: underline; text-underline-offset: 6px; }
@media (max-width: 760px) { .son { top: 22px; right: 16px; } }
@media (prefers-reduced-motion: reduce) { .son[aria-pressed="true"] .son__vumetre i { animation: none; height: 11px; } }

/* == Contact et kit == */
.kit { margin-top: 40px; border-top: 1px solid var(--couleur-filet); max-width: 34ch; }
.kit li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--couleur-filet); }
.kit__nom { font-family: var(--police-titre); font-weight: var(--graisse-pleine); text-transform: uppercase; font-size: clamp(26px, 2.4vw, 40px); line-height: 1; }
.kit a { flex: 1; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; color: var(--couleur-creme); text-decoration: none; }
.kit a:hover .kit__nom { color: var(--couleur-or); }
.kit__info { color: var(--couleur-sombre); font-size: 14px; font-style: italic; }
/* Tant qu'un élément du kit n'a pas de fichier (pas de lien), il reste discret : la typographie ne doit pas
   mettre en avant ce qui n'existe pas encore (audit du 24/10) */
.kit li:not(:has(a)) { padding: 8px 0; }
.kit li:not(:has(a)) .kit__nom { font-size: 17px; color: var(--couleur-creme-doux); }
/* Contacts du dossier (7.2) : diffusion et production, visibles */
.contacts { margin-top: 28px; border-top: 1px solid var(--couleur-filet); max-width: 34ch; }
.contacts li { padding: 6px 0; border-bottom: 1px solid var(--couleur-filet); }
.contacts__role { display: block; padding-top: 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--couleur-creme-doux); }
.contacts a { display: inline-flex; align-items: center; min-height: 44px; color: var(--couleur-or); font-size: 16px; text-underline-offset: 4px; }
.contacts + .kit { margin-top: 20px; }
/* La guirlande passe derrière le contact : un halo sombre détache le texte des ampoules (7.3) */
.panneau--contact .panneau__texte, .contact { text-shadow: var(--halo); }
.contact { grid-column: 3; grid-row: 1; align-self: center; padding: 12vh 0 12vh 6vw; max-width: 560px; }
.contact__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.champ { margin-bottom: 26px; }
.champ__libelle { display: block; margin-bottom: 8px; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; font-weight: 500; color: var(--couleur-rouge); }
.champ__saisie { width: 100%; padding: 10px 0 12px; background: transparent; border: 0; border-bottom: 1px solid var(--couleur-champ); border-radius: 0; color: var(--couleur-creme); font: 18px/1.5 var(--police-texte); transition: border-color .3s; }
.champ__saisie:focus { outline: none; border-bottom-color: var(--couleur-or); }
.champ__saisie:focus-visible { outline: 2px solid var(--couleur-or); outline-offset: 3px; }
.champ__saisie::placeholder { color: var(--couleur-sombre); font-style: italic; opacity: 1; }
.champ__saisie[aria-invalid="true"] { border-bottom-color: var(--couleur-or); }
textarea.champ__saisie { resize: vertical; min-height: 96px; }
.champ__erreur { min-height: 1.2em; margin-top: 6px; font-size: 14px; color: var(--couleur-or); }
.contact__envoyer { margin-top: 8px; padding: 16px 28px; min-height: 44px; background: none; border: 1px solid var(--couleur-or); color: var(--couleur-or); cursor: pointer;
  font: 500 11px var(--police-texte); letter-spacing: .24em; text-transform: uppercase; transition: background .25s, color .25s; }
.contact__envoyer:hover, .contact__envoyer:focus-visible { background: var(--couleur-or); color: var(--couleur-nuit); }
.contact__envoyer:disabled { opacity: .6; cursor: progress; }
.contact__echec { margin-top: 22px; padding: 14px 16px; border: 1px dashed var(--couleur-or); color: var(--couleur-texte); font-size: 16px; line-height: 1.6; }
.contact__echec a { color: var(--couleur-or); }
.contact__merci { grid-column: 3; grid-row: 1; align-self: center; padding-left: 6vw; }
.contact__merci .titre { font-size: clamp(48px, 5vw, 96px); margin-bottom: 20px; }
.contact__merci p:last-child { color: var(--couleur-texte); font-size: 18px; }
.contact__merci:focus { outline: none; }
.travelling .contact, .travelling .contact__merci { padding-top: 0; padding-bottom: 0; }

@media (max-width: 760px) {
  /* rangée 3 : en rangée 2 le formulaire chevauchait le texte (6.2) */
  .contact, .contact__merci { grid-column: 2; grid-row: 3; padding: 40px 0 0; max-width: none; }
  .pied { grid-row: 4; }
  /* Trois écrans : le texte, le formulaire, puis le pied en générique de fin (sur un seul écran avec le
     texte, il ne tenait pas sur les petits téléphones : 375×667, 360×640) */
  .travelling .panneau--contact { width: auto; grid-template-columns: 100vw 100vw 100vw; grid-template-rows: 1fr; align-items: stretch; }
  .travelling .panneau--contact .panneau__texte { grid-column: 1; grid-row: 1; width: 100vw; padding: 52px 24px 68px; display: flex; justify-content: flex-end; }
  .travelling .panneau--contact .etiquette { margin-bottom: 14px; }
  .travelling .contact, .travelling .contact__merci { grid-column: 2; grid-row: 1; width: 100vw; padding: 56px 24px 84px; display: flex; flex-direction: column; justify-content: center; }
  .travelling .pied { grid-column: 3; grid-row: 1; padding: 70px 24px 120px; display: flex; flex-direction: column; justify-content: flex-end; }
  .travelling .contact__merci[hidden], .travelling .contact[hidden] { display: none; }
  .champ { margin-bottom: 18px; }
}

/* == Page des mentions légales == */
.legal { max-width: 720px; padding: 12vh var(--marge) 16vh; }
.legal .titre { margin: 40px 0 48px; }
.legal__titre { margin: 40px 0 12px; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; font-weight: 500; color: var(--couleur-rouge); }
.legal p { font-size: 17px; line-height: 1.8; color: var(--couleur-texte); }
.legal p + p { margin-top: .8em; }
.legal a { color: var(--couleur-creme); }
.lien-retour { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; text-decoration: none; color: var(--couleur-or) !important; }
.lien-retour::before { content: "← "; }

/* Écrans peu hauts (portables 1366×660…) : les titres suivent aussi la hauteur, pour que chaque
   panneau tienne dans son écran */
.travelling .titre { font-size: clamp(48px, min(6.8vw, 11vh), 128px); }
.travelling .titre--grand { font-size: clamp(56px, min(8vw, 13vh), 150px); }
.travelling .nom { font-size: clamp(84px, min(12.5vw, 19vh), 230px); }
@media (max-height: 820px) {
  .travelling .panneau__texte p:not(.etiquette):not(.accroche):not(.bandeau):not(.devise):not(.duree) { line-height: 1.65; }
  .travelling .champ { margin-bottom: 14px; }
  .travelling .kit { margin-top: 24px; }
  .travelling .kit li { padding: 8px 0; }
}

/* Le geste horizontal ne doit pas déclencher le « retour » du navigateur pendant le travelling */
.travelling, .travelling body { overscroll-behavior-x: none; }

/* == Effets de lumière (travelling) == */
/* Guirlande de guinguette : ampoules chaudes, floues, comme au fond du teaser */
.guirlande { display: none; }
.travelling .guirlande { display: block; position: absolute; z-index: 0; top: 0; left: 0; width: 1100vw; height: 26vh; pointer-events: none; will-change: transform; }
.travelling .piste__rail { z-index: 1; }
.guirlande svg { width: 100%; height: 100%; }
.guirlande circle { fill: #ffcf7a; }
.guirlande .p0 { opacity: .85; filter: blur(1.2px) drop-shadow(0 0 6px rgba(255, 190, 90, .9)); }
.guirlande .p1 { opacity: .55; filter: blur(3.5px) drop-shadow(0 0 8px rgba(255, 180, 80, .6)); }
.guirlande .p2 { opacity: .3; filter: blur(7px); }
.guirlande .scintille { animation: scintille 4.2s ease-in-out infinite; }
.guirlande .d1 { animation-delay: -.7s; } .guirlande .d2 { animation-delay: -1.4s; } .guirlande .d3 { animation-delay: -2.1s; }
.guirlande .d4 { animation-delay: -2.8s; } .guirlande .d5 { animation-delay: -3.5s; }
@keyframes scintille { 0%, 100% { opacity: .8; } 46% { opacity: .35; } 50% { opacity: .1; } 54% { opacity: .6; } }

/* Phares de la carriole (insérés par app.js) */
.carriole { display: none; }
.travelling .carriole { display: block; position: absolute; z-index: 1; width: 260px; height: 190px; margin: -95px 0 0 -130px; pointer-events: none; animation: carriole 10s ease-in-out infinite; }
.carriole__lampe { opacity: 0; position: absolute; top: 50%; margin-top: -20px; width: 74px; height: 40px; border-radius: 50%;
  background: radial-gradient(ellipse at 52% 50%, #fffde6 0, #f7f2b8 38%, #e9e17a 72%, rgba(232, 220, 110, .7) 86%, transparent 100%);
  /* halo sur la couche de la lampe : un drop-shadow coûtait 10 i/s (7.1) */
  box-shadow: 0 0 6px 2px rgba(250, 242, 170, .65), 0 0 16px 8px rgba(245, 70, 36, .95), 0 0 34px 16px rgba(240, 66, 34, .8), 0 0 64px 30px rgba(225, 45, 22, .6), 0 0 100px 46px rgba(210, 40, 20, .42), 0 0 150px 70px rgba(150, 20, 10, .22);
  will-change: opacity; }
.carriole__lampe:nth-child(1) { left: 6%; transform: rotate(-20deg); }
.carriole__lampe:nth-child(2) { right: 6%; transform: rotate(20deg); }

@keyframes carriole { 0%, 100% { opacity: 1; } }
/* Mauvais contact : saccades, coupures, longue nuit. Les deux lampes partagent la même panne,
   la seconde avec un léger retard : presque ensemble, jamais tout à fait. */
.carriole__lampe:nth-child(1) { animation: panne-a var(--duree, 7.3s) steps(1, end) var(--decalage, 0s) infinite; }
.carriole__lampe:nth-child(2) { animation: panne-a var(--duree, 7.3s) steps(1, end) var(--retard, -7.12s) infinite; } /* même panne, une fraction de seconde en retard (tirée au sort par app.js) */
@keyframes panne-a { /* éteinte 82 % du cycle, paires à tour de rôle (app.js) */
  0%, 70% { opacity: 0; } 71% { opacity: .9; } 72% { opacity: 0; } 73% { opacity: 1; }
  79% { opacity: .55; } 80% { opacity: 1; } 85% { opacity: .2; } 86% { opacity: 1; }
  88%, 100% { opacity: 0; }
}
/* places des phares, toujours dans le noir, à gauche comme à droite (25/10) */
.travelling .panneau--presentation .carriole--1 { top: 90vh; left: 56vw; transform: scale(.6); }
.travelling #sylvie .carriole--1 { top: 14vh; left: 96vw; transform: scale(.55); }
.travelling #contact .carriole--1 { top: 80vh; left: 88vw; transform: scale(.62); }

@media (max-width: 760px) {
  .travelling .guirlande { height: 18vh; }
  .travelling .carriole { transform: scale(.62); }
  .travelling .panneau--presentation .carriole--1 { top: 17vh; left: 62vw; }
  .travelling #sylvie .carriole--1 { top: 16vh; left: 160vw; transform: scale(.5); }
    .travelling #contact .carriole--1 { top: 82vh; left: 176vw; transform: scale(.5); }
}
@media (prefers-reduced-motion: reduce) { .guirlande .scintille, .carriole__lampe { animation: none !important; } .video__lancer:hover::before { transform: none; } }
/* contraste forcé */
@media (forced-colors: active) { .video__lancer::before { content: "\25B6"; display: grid; place-items: center; font-size: 26px; color: ButtonText; background: Canvas; border: 2px solid ButtonText; forced-color-adjust: none; } .video__lancer:focus-visible::before { outline-color: Highlight; } }

/* Fermer la vidéo : bouton franc, en haut à droite */
.video__fermer { position: fixed; z-index: 70; top: 92px; right: var(--marge); display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 22px;
  background: var(--couleur-nuit); border: 1px solid var(--couleur-or); border-radius: 99px; color: var(--couleur-creme); cursor: pointer;
  font: 600 14px var(--police-texte); letter-spacing: .08em; text-transform: uppercase; }
.video__fermer span { color: var(--couleur-or); font-size: 18px; }
.video__fermer:hover, .video__fermer:focus-visible { background: var(--couleur-or); color: var(--couleur-nuit); }
.video__fermer:hover span, .video__fermer:focus-visible span { color: var(--couleur-nuit); }
@media (max-width: 760px) { .video__fermer { top: 80px; right: 16px; } }