/* La Mire, revue de la performance audiovisuelle live : design system sig-.
   Theme « salle de projection » : le noir de la salle avant la projection,
   le blanc de la toile, le rose de mire pour les liens, le cyan de visee
   pour le mobilier technique. Titres en Geneva (la face bitmap des
   premiers ecrans), lecture en Charter (serif concu pour l'ecran),
   mobilier en Tahoma. Hero typographique
   aligne a gauche, sommaire en liste d'entrees, fil date en une colonne,
   filets fins partout, ornements SVG inline (bobine, trame, ecran, mire).
   Aucune police web, aucune requete externe, mode clair automatique, print. */

:root {
  --salle: #101114;          /* the projection room before the beam */
  --salle-creuse: #17181d;    /* recessed reserves, image backing */
  --salle-levee: #1d1f25;     /* lifted boxes, even table rows */
  --toile: #e8e6e0;          /* the lit screen: text */
  --salle-nuit: #0a0b0d;     /* darkest ground: footer, table heads */
  --toile-sourde: #a3a09b;    /* captions, meta, accroche */
  --mire: #e06a92;           /* test pattern magenta: links (>= 4.5:1 on salle) */
  --mire-levee: #ef93b3;     /* lifted mire: hover */
  --visee: #7fb9c4;          /* viewfinder cyan: amorces, timecodes, lettrines */
  --visee-levee: #a5d3db;    /* lifted cyan: ticks, ornaments */
  --trame: #2a2d34;          /* hairlines, the scan line */
  --ecran: Geneva, "Geneva CE", Tahoma, "DejaVu Sans", sans-serif;
  --lecture: Charter, "Bitstream Charter", "Sitka Text", Cambria, "Droid Serif", serif;
  --mobilier: Tahoma, "Segoe UI", "Liberation Sans", "DejaVu Sans", sans-serif;
  --interlettrage: .22em;
  --reponse: 150ms;
}

@media (prefers-color-scheme: light) {
  :root {
    --salle: #f2f1ee;
    --salle-creuse: #e6e4e0;
    --salle-levee: #faf9f7;
    --toile: #1c1d21;
    --salle-nuit: #d8d6d1;
    --toile-sourde: #62605c;
    --mire: #a8325f;
    --mire-levee: #7f1f45;
    --visee: #1f6d7a;
    --visee-levee: #14545e;
    --trame: #cfccc6;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--salle);
  color: var(--toile);
  font-family: var(--lecture);
  font-size: clamp(1.02rem, .97rem + .22vw, 1.13rem);
  line-height: 1.68;
}
img { max-width: 100%; height: auto; }
::selection { background: var(--visee); color: var(--salle-nuit); }

a { color: var(--mire); text-decoration: none; transition: color var(--reponse) ease; }
a:hover { color: var(--mire-levee); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:focus-visible { outline: 2px solid var(--visee); outline-offset: 2px; border-radius: 2px; }

h1, h2, h3, h4 { font-family: var(--ecran); font-weight: 700; line-height: 1.14; margin: 0; }
/* Geneva derive d'une face bitmap : on ne la serre pas, l'interlettrage reste
   neutre ou legerement positif selon le corps. */
h1 { font-size: clamp(2.1rem, 1.25rem + 3.2vw, 3.6rem); letter-spacing: -.008em; }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.35vw, 2rem); line-height: 1.2; letter-spacing: -.004em; }
h3 { font-size: clamp(1.12rem, 1.04rem + .45vw, 1.32rem); letter-spacing: 0; }

.sig-shunt { position: absolute; left: -9999px; }
.sig-shunt:focus-visible { left: 1rem; top: 1rem; z-index: 10; background: var(--salle-levee); color: var(--toile); padding: .6rem 1rem; border: 1px solid var(--trame); }

/* --- mobilier : la largeur utile --- */
.sig-regie { width: min(100% - 2.6rem, 1140px); margin-inline: auto; }

/* --- cabine (en-tete) --- */
.sig-cabine { border-bottom: 1px solid var(--trame); background: var(--salle); }
.sig-cabine__banc { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .8rem 2rem; padding-block: 1.1rem 1rem; }
.sig-cabine__sigle { display: inline-flex; align-items: baseline; gap: .55rem; color: var(--toile); }
.sig-cabine__sigle:hover { color: var(--visee); text-decoration: none; }
.sig-cabine__sigle .sig-picto { align-self: center; color: var(--visee-levee); }
.sig-cabine__ident { font-family: var(--ecran); font-weight: 700; font-size: 1.3rem; text-transform: uppercase; }
.sig-cabine__carton { font-family: var(--mobilier); font-size: .72rem; text-transform: uppercase; letter-spacing: var(--interlettrage); color: var(--toile-sourde); }
.sig-patch ul { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem 1.35rem; margin: 0; padding: 0; }
.sig-patch a { font-family: var(--mobilier); font-size: .8rem; text-transform: uppercase; letter-spacing: .13em; color: var(--toile-sourde); border-bottom: 1px solid transparent; padding-bottom: .15rem; }
.sig-patch a:hover { color: var(--visee); border-bottom-color: var(--visee-levee); text-decoration: none; }

/* --- amorce, timecode, plaques --- */
.sig-amorce { font-family: var(--mobilier); font-size: .78rem; text-transform: uppercase; letter-spacing: var(--interlettrage); color: var(--visee); margin: 0; display: flex; align-items: center; gap: .5rem; }
.sig-timecode { font-family: var(--mobilier); font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--visee); margin: 0; font-variant-numeric: tabular-nums; }
.sig-picto { flex: none; color: var(--visee-levee); }

/* --- ecran (heros typographique, aligne a gauche) --- */
.sig-ecran { padding-block: clamp(4rem, 9vw, 7rem) clamp(3rem, 7vw, 5rem); }
.sig-ecran .sig-amorce { justify-content: flex-start; }
.sig-ecran h1 { margin: 1.1rem 0 .9rem; max-width: 22ch; }
.sig-ecran__soustitre { max-width: 58ch; margin: 0; color: var(--toile-sourde); font-size: clamp(1.02rem, .96rem + .3vw, 1.18rem); }
.sig-incrustation { margin: 2.6rem 0 0; max-width: 46ch; padding-top: 1.7rem; border-top: 1px solid var(--trame); }
.sig-incrustation p { margin: 0; font-style: italic; font-size: clamp(1.22rem, 1.05rem + .95vw, 1.58rem); line-height: 1.4; }
.sig-incrustation footer { margin-top: .9rem; font-family: var(--mobilier); font-style: normal; font-size: .78rem; text-transform: uppercase; letter-spacing: var(--interlettrage); color: var(--toile-sourde); }

/* --- entrees (sommaire de la revue) --- */
.sig-entrees { padding-block: clamp(2.2rem, 5vw, 3.6rem); }
.sig-entrees__capot { margin-bottom: 1.8rem; }
.sig-entrees__intitule { display: flex; align-items: baseline; gap: 1.1rem; flex-wrap: wrap; }
.sig-entrees__canaux { font-family: var(--mobilier); font-size: .82rem; letter-spacing: .34em; color: var(--visee-levee); font-weight: 400; font-variant-numeric: tabular-nums; }
.sig-entrees__canaux--sigle { letter-spacing: var(--interlettrage); text-transform: uppercase; }
.sig-entrees__fiche { font-family: var(--mobilier); font-size: .92rem; color: var(--toile-sourde); margin: .5rem 0 0; }

/* --- generique fleuron --- */
.sig-generique { display: flex; align-items: center; gap: 1.4rem; width: min(100% - 2.6rem, 1140px); margin-inline: auto; color: var(--visee-levee); padding-block: .4rem; }
.sig-generique::before, .sig-generique::after { content: ""; flex: 1; height: 1px; background: var(--trame); }

/* --- archives (le fil date, une seule colonne) --- */
.sig-archives-section { padding-block: clamp(2.2rem, 5vw, 3.6rem); }
.sig-archives { list-style: none; margin: 0; padding: 0; }
.sig-bande { break-inside: avoid; display: grid; grid-template-columns: 148px 1fr; gap: 1.3rem; padding-block: 1.2rem; border-bottom: 1px solid var(--trame); }
.sig-bande__contact { width: 148px; aspect-ratio: 4 / 3; object-fit: cover; display: block; border: 1px solid var(--trame); background: var(--salle-creuse); }
.sig-bande p { margin: 0 0 .3rem; font-family: var(--mobilier); font-size: .9rem; line-height: 1.5; color: var(--toile-sourde); }
.sig-bande h3 { font-size: 1.22rem; line-height: 1.3; margin: .1rem 0 .3rem; }
.sig-bande h3 a { color: var(--toile); }
.sig-bande h3 a:hover { color: var(--mire); text-decoration: none; }
.sig-fiche-fin { font-family: var(--mobilier); font-size: .92rem; line-height: 1.6; color: var(--toile-sourde); max-width: 64ch; margin: 2rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--trame); }

/* --- plateau : tetes de pages --- */
.sig-plateau { padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.sig-cable { font-family: var(--mobilier); font-size: .78rem; letter-spacing: .04em; padding-top: 1.4rem; color: var(--toile-sourde); }
.sig-cable ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; }
.sig-cable li { display: inline-flex; align-items: center; gap: .45rem; margin: 0; }
.sig-cable li + li::before { content: "\203A"; color: var(--visee-levee); }
.sig-cable a { color: var(--toile-sourde); }
.sig-cable a:hover { color: var(--visee); text-decoration: none; }
.sig-entame { padding-top: clamp(1.8rem, 4vw, 3rem); max-width: 60rem; }
.sig-entame h1 { margin: .9rem 0 1rem; max-width: 26ch; }
.sig-entame__accroche { font-family: var(--mobilier); font-size: clamp(.98rem, .94rem + .2vw, 1.08rem); line-height: 1.6; color: var(--toile-sourde); max-width: 58ch; margin: 0; }
.sig-reglages { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem 0; margin: 1.2rem 0 0; padding: .8rem 0 0; border-top: 1px solid var(--trame); max-width: 58ch; }
.sig-reglages li { font-family: var(--mobilier); font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--toile-sourde); }
.sig-reglages li + li::before { content: "\00B7"; margin-inline: .7rem; color: var(--visee-levee); }
.sig-reglages a { color: var(--toile-sourde); }
.sig-reglages a:hover { color: var(--visee); text-decoration: none; }

/* --- photogramme (image de tete) --- */
.sig-photogramme { margin: 2rem 0 0; }
.sig-photogramme__cadrage { width: 100%; aspect-ratio: 2048 / 1152; object-fit: cover; display: block; border: 1px solid var(--trame); background: var(--salle-creuse); }

/* --- deroule (colonne de lecture, lettrine discrete) --- */
.sig-deroule { max-width: 64ch; margin-top: 2.2rem; }
.sig-deroule p { margin: 0 0 1.05em; }
.sig-deroule ul, .sig-deroule ol { margin: 0 0 1.05em; padding-left: 1.35rem; }
.sig-deroule li { margin-block: .3rem; }
.sig-deroule h2 { margin: 2.1em 0 .65em; }
.sig-deroule h2::before { content: ""; display: block; width: 3.2rem; height: 1px; background: var(--visee-levee); margin-bottom: .65em; }
.sig-deroule > p:first-of-type::first-letter {
  float: left; font-size: 3.05em; line-height: .82; padding: .04em .1em 0 0;
  color: var(--visee); font-weight: 600;
}

/* --- releve (tableaux canoniques) --- */
.sig-releve { margin: 1.8rem 0; overflow-x: auto; }
.sig-releve table { width: 100%; border-collapse: collapse; font-family: var(--mobilier); font-variant-numeric: tabular-nums; }
.sig-releve caption { caption-side: top; text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .18em; color: var(--toile-sourde); padding-bottom: .6rem; }
.sig-releve th { background: var(--salle-nuit); color: var(--toile); font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; text-align: left; padding: .55rem .7rem; font-weight: 600; border-bottom: 1px solid var(--trame); }
.sig-releve td { font-size: .87rem; line-height: 1.5; padding: .6rem .7rem; border-bottom: 1px solid var(--trame); vertical-align: top; }
.sig-releve tbody tr:nth-child(even) { background: var(--salle-levee); }
.sig-releve a { color: var(--mire); }

/* --- fiche (encadre, liste de reglages) --- */
.sig-fiche { background: var(--salle-levee); border: 1px solid var(--trame); border-left: 3px solid var(--visee-levee); padding: 1.15rem 1.35rem; margin: 1.7rem 0; }
.sig-fiche h4 { font-family: var(--mobilier); font-size: .8rem; text-transform: uppercase; letter-spacing: .16em; color: var(--visee); margin: 0 0 .55rem; }
.sig-fiche ul { margin: 0; padding-left: 1.2rem; }
.sig-fiche li { font-family: var(--mobilier); font-size: .93rem; line-height: 1.55; margin-block: .32rem; }

/* --- enchainement (a lire ensuite) --- */
.sig-enchainement { margin-top: 3rem; padding-top: 1.5rem; border-top: 3px double var(--trame); }
.sig-enchainement h2 { font-family: var(--mobilier); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: var(--interlettrage); color: var(--toile-sourde); margin-bottom: .8rem; }
.sig-enchainement ul { list-style: none; margin: 0; padding: 0; }
.sig-enchainement li { font-size: .98rem; margin-block: .4rem; padding-left: 1.2rem; position: relative; }
.sig-enchainement li::before { content: ""; position: absolute; left: 0; top: .72em; width: .55rem; height: 1px; background: var(--visee-levee); }

/* --- credits (pied) --- */
.sig-credits { margin-top: clamp(3rem, 7vw, 5rem); background: var(--salle-nuit); color: var(--toile); }
.sig-credits__banc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; padding-block: 2.6rem 2.2rem; }
.sig-credits h2 { font-family: var(--mobilier); font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: var(--interlettrage); color: var(--visee-levee); margin-bottom: .8rem; }
.sig-credits ul { list-style: none; margin: 0; padding: 0; }
.sig-credits li { margin-block: .34rem; }
.sig-credits a { font-family: var(--mobilier); font-size: .9rem; color: #b5b2ac; }
.sig-credits a:hover { color: var(--mire-levee); text-decoration: none; }
.sig-credits__queue { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.4rem; padding-block: 1.2rem 1.5rem; border-top: 1px solid rgba(232, 230, 224, .14); font-family: var(--mobilier); font-size: .78rem; color: #8f8c87; }
.sig-credits__queue .sig-picto { color: var(--visee-levee); }
.sig-credits__queue em { font-family: var(--lecture); font-style: italic; font-size: .84rem; color: #a3a09b; }

/* --- responsive --- */
@media (max-width: 900px) {
  .sig-credits__banc { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .sig-deroule > p:first-of-type::first-letter { float: none; font-size: inherit; color: inherit; padding: 0; font-weight: inherit; }
  .sig-bande { grid-template-columns: 1fr; gap: .7rem; }
  .sig-bande__contact { width: 100%; }
}
@media (max-width: 640px) {
  .sig-credits__banc { grid-template-columns: 1fr; }
  .sig-cabine__banc { align-items: flex-start; flex-direction: column; }
}

/* --- motion, print --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}
@media print {
  :root {
    --salle: #ffffff; --salle-levee: #ffffff; --salle-creuse: #ffffff;
    --toile: #000000; --toile-sourde: #444444; --trame: #bbbbbb;
    --mire: #000000; --mire-levee: #000000; --visee: #000000; --visee-levee: #666666;
  }
  body { background: #fff; font-size: 11pt; }
  .sig-cabine__banc .sig-patch, .sig-shunt, .sig-generique, .sig-credits { display: none; }
  .sig-regie { width: 100%; }
  .sig-photogramme__cadrage, .sig-bande__contact { border: none; }
  a { color: #000; text-decoration: none; }
  .sig-ecran { padding-block: 1.5rem; }
}