/* --------------------------------------------------------------------------
   Thème minimaliste — inspiré du "brutalist web" de la référence.
   Fond blanc, serif, liens bleus soulignés. Volontairement dépouillé.
   -------------------------------------------------------------------------- */

:root {
    --ink: #000;
    --link: #1500ff;      /* bleu franc, proche du bleu navigateur */
    --paper: #fff;
    --muted: #444;
    --measure: 60rem;     /* largeur de lecture confortable */
    --serif: "Times New Roman", Times, serif;   /* DA : Times New Roman système */
}

* { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;   /* ancres : glissement plutôt que saut */
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 20px;
    line-height: 1.35;
}

.wrap {
    max-width: var(--measure);
    margin: 0;
    padding: 1.6rem 1.4rem 6rem;
}

a {
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 2px;
}
a:visited { color: var(--link); }
a:hover { text-decoration: none; }

/* --- Accueil --- */
.site-title {
    font-weight: normal;
    font-size: 2rem;
    margin: 0 0 1rem;
    letter-spacing: -0.01em;
}
.tagline {
    margin: -0.5rem 0 1.4rem;
    color: var(--muted);
    font-style: italic;
}
.index {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.index a {
    font-size: 1.9rem;
    line-height: 1.15;
}

/* --- Navigation retour --- */
.back { margin: 0 0 1.4rem; }
.back a { font-size: 1.6rem; text-decoration: none; }

/* --- Titres de page --- */
.page-title {
    font-weight: normal;
    font-size: 1.8rem;
    margin: 0 0 1.6rem;
}

/* --- Contenu texte / journal --- */
.prose p,
.entry-body p { margin: 0 0 1.3rem; }

.prose h1, .prose h2, .prose h3,
.entry-body h1, .entry-body h2, .entry-body h3 {
    font-weight: normal;
    margin: 1.6rem 0 0.8rem;
}

.journal .entry { margin: 0 0 1.6rem; }
.entry-label {
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-right: 0.4rem;
}
/* Le label et le premier paragraphe se suivent sur la même ligne. */
.entry-body { display: inline; }
.entry-body > p:first-child { display: inline; }

blockquote {
    margin: 1.3rem 0;
    padding-left: 1rem;
    border-left: 2px solid var(--ink);
    color: var(--muted);
}

hr {
    border: none;
    border-top: 1px solid var(--ink);
    margin: 2rem 0;
    max-width: 8rem;
    margin-left: 0;
}

img { max-width: 100%; height: auto; }

.empty { color: var(--muted); font-style: italic; }

/* --- Verrou « site privé » --- */
.gate-wrap { max-width: 30rem; }
.gate-msg { color: var(--muted); margin: 0 0 1.4rem; }
.gate-error { color: #c0392b; margin: 0 0 1rem; }
.gate-form { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.gate-form input {
    font-family: var(--serif);
    font-size: 1rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--ink);
    border-radius: 6px;
    min-width: 12rem;
}
.gate-form button {
    font-family: var(--serif);
    font-size: 1rem;
    padding: 0.5rem 1.1rem;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--paper);
    border-radius: 6px;
    cursor: pointer;
}
.gate-form button:hover { background: var(--paper); color: var(--ink); }

/* --- Recherche intégrée dans une liste (filtre à la frappe) --- */
.find {
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
    margin: 0 0 1.6rem;
    max-width: 46rem;
}
.find-input {
    font-family: var(--serif);
    font-size: 1rem;
    color: var(--ink);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--ink);
    border-radius: 0;               /* Safari arrondit les champs search par défaut */
    padding: 0.15rem 0.1rem;
    width: 12rem;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.find-input::placeholder { color: #999; font-style: italic; }
.find-input:focus { border-bottom-width: 2px; }
.find-count { font-size: 0.85rem; color: var(--muted); }
.find.is-empty .find-count { color: #c0392b; }

/* --- Des extraits : passage cité + référence APA --- */
.excerpt-list { max-width: 46rem; }
.excerpt { margin: 0 0 3.2rem; }
.excerpt-text {
    margin: 0 0 0.7rem;
    padding: 0;
    border: none;              /* pas le filet des citations ordinaires */
    color: inherit;
    font-size: 1.15rem;
    line-height: 1.45;
}
.excerpt-text > p { margin: 0 0 0.9rem; }
.excerpt-text > p:last-child { margin-bottom: 0; }
/* Guillemets français, ouverts avant le premier mot et fermés après le dernier. */
.excerpt-text > p:first-child::before { content: "« "; }
.excerpt-text > p:last-child::after   { content: " »"; }
.excerpt-toggle {
    display: inline-block;
    margin: 0 0 0.7rem;
    padding: 0;
    border: none;
    background: none;
    font-family: var(--serif);
    font-size: 0.85rem;
    color: inherit;
    opacity: .7;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.excerpt-toggle:hover { opacity: 1; }
.excerpt-original {
    margin: 0 0 0.8rem;
    padding: 0 0 0 1rem;
    border-left: 1px solid currentColor;
    font-size: 1rem;
    line-height: 1.45;
    opacity: .82;
}
.excerpt-original > p { margin: 0 0 0.7rem; }
.excerpt-original > p:last-child { margin-bottom: 0; }
.excerpt-original > p:first-child::before { content: "« "; }
.excerpt-original > p:last-child::after   { content: " »"; }

.excerpt-source {
    font-size: 0.95rem;
    padding-left: 1.6rem;      /* même retrait négatif que la liste de lectures */
    text-indent: -1.6rem;
    line-height: 1.4;
}
.excerpt-source a { word-break: break-word; }

/* --- Liste de lectures (références APA) --- */
.intro { margin-bottom: 2rem; }
.reading-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 46rem;
}
.reading-list .reading {
    /* retrait négatif : 1re ligne à gauche, lignes suivantes en retrait */
    padding-left: 1.6rem;
    text-indent: -1.6rem;
    margin: 0 0 1.1rem;
    line-height: 1.4;
}
.reading-list .reading a {
    text-indent: 0;
    word-break: break-word;
}

/* --- Veille de contenus --- */
.feed {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 46rem;
}
.feed-item > * { margin: 0 0 0.4rem; }
.feed-meta {
    font-size: 0.9rem;
    color: var(--muted);
}
.feed-meta .feed-media { color: var(--ink); }
.feed-meta .sep { margin: 0 0.4rem; }
.feed-desc { font-size: 1.05rem; }
.feed-caption {
    color: var(--muted);
    font-style: italic;
    white-space: normal;
}

/* --- Galerie --- */
.gallery {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    max-width: 40rem;
}
.gallery-item { margin: 0; }
.gallery-item figcaption {
    margin-top: 0.4rem;
    color: var(--muted);
    font-size: 0.95rem;
}

/* --- Moodboard (mur d'images façon Tumblr, masonry) --- */
.moodboard {
    column-count: 4;
    column-gap: 0.7rem;
    max-width: 72rem;
}
.mood-item {
    break-inside: avoid;
    margin: 0 0 0.7rem;
    display: inline-block;
    width: 100%;
}
.mood-item img { width: 100%; height: auto; display: block; }
.mood-item figcaption {
    font-size: 0.8rem;
    color: var(--muted);
    margin-top: 0.2rem;
}

/* --- Archive de newsletter (éditions) --- */
.archive {
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
    max-width: 46rem;
}
.edition > * { margin: 0; }
.edition-title { font-size: 1.15rem; }
.edition-meta {
    font-size: 0.9rem;
    color: var(--muted);
    margin-top: 0.1rem;
}
.edition-meta .sep { margin: 0 0.4rem; }

/* Archive en texte intégral */
.archive-index {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    margin: 0 0 3rem;
    max-width: 46rem;
}
.edition-full {
    max-width: 46rem;
    margin: 0 0 3.5rem;
    padding-bottom: 3.5rem;
    border-bottom: 1px solid var(--ink);
    scroll-margin-top: 1rem;
}
.edition-full:last-child { border-bottom: none; }
.edition-heading {
    font-weight: normal;
    font-size: 1.6rem;
    margin: 0.2rem 0 1.4rem;
}
.edition-body h2, .edition-body h3, .edition-body h4 {
    font-weight: normal;
    font-size: 1.2rem;
    margin: 1.8rem 0 0.6rem;
}
.edition-body img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.4rem auto;
}
/* Une image légendée (provenance, crédits) : l'éditeur la pose dans une <figure>. */
.edition-body figure, .prose figure { margin: 1.4rem 0; }
.edition-body figure img, .prose figure img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.edition-body figcaption, .prose figcaption {
    margin-top: 0.45rem;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--muted);
    text-align: left;
}

/* --- Page archive : colonne centrée (façon System Magazine) --- */
body.tpl-page-archive .wrap { max-width: 42rem; margin: 0 auto; }
body.tpl-page-archive .back { text-align: left; }
body.tpl-page-archive .page-title,
body.tpl-page-archive .intro { text-align: center; }
body.tpl-page-archive .archive-index { align-items: center; text-align: center; }
body.tpl-page-archive .edition-full { margin-left: auto; margin-right: auto; }
body.tpl-page-archive .edition-meta,
body.tpl-page-archive .edition-heading { text-align: center; }
/* le corps de lecture reste aligné à gauche (lisibilité) */
body.tpl-page-archive .edition-body { text-align: left; }
body.tpl-page-archive .edition-body h2,
body.tpl-page-archive .edition-body h3 { text-align: center; }

/* --- Page « des articles » : la même colonne que mdma ----------------------
   L'accueil annonce chaque article comme une édition (ligne, titre, chapeau) ;
   la page d'un article le donne en entier, comme une édition en texte intégral. */
body.tpl-page-articles .wrap { max-width: 42rem; margin: 0 auto; }
body.tpl-page-articles .back { text-align: left; }
body.tpl-page-articles .page-title,
body.tpl-page-articles .intro { text-align: center; }
body.tpl-page-articles .intro { margin-bottom: 3rem; }
body.tpl-page-articles .edition-full { margin-left: auto; margin-right: auto; }
body.tpl-page-articles .edition-meta,
body.tpl-page-articles .edition-heading { text-align: center; }
body.tpl-page-articles .edition-body { text-align: left; }
body.tpl-page-articles .edition-body h2,
body.tpl-page-articles .edition-body h3 { text-align: center; }
.article-annonce { margin-bottom: 2.6rem; padding-bottom: 2.6rem; }
.article-annonce .edition-heading { margin-bottom: .8rem; }
.edition-heading a, .edition-heading a:visited { color: inherit; text-decoration: none; }
.edition-heading a:hover { text-decoration: underline; text-underline-offset: 4px; }
.article-chapeau { text-align: center; margin: 0 auto 1rem; max-width: 34rem; font-style: italic; }
.article-lire { text-align: center; margin: 0; font-size: .95rem; }
.article-annonce.est-brouillon { opacity: .5; }
.edition-meta a.article-theme, .edition-meta a.article-theme:visited { color: inherit; text-decoration: underline; text-decoration-color: rgba(0, 0, 0, .3); text-underline-offset: 3px; }
.edition-meta a.article-theme:hover { text-decoration-color: currentColor; }
.articles-filtre { text-align: center; margin: -1.6rem 0 2.6rem; font-size: .95rem; font-style: italic; }
.article-rubrique { text-align: center; margin: 0 0 2.2rem; font-size: .95rem; }
.article-brouillon { text-align: center; margin: -1.4rem 0 2rem; font-size: .85rem; color: #c00; }
.article-plein { border-bottom: none; padding-bottom: 0; margin-bottom: 2.6rem; }
.article-plein .edition-heading { font-size: 2rem; line-height: 1.15; margin-bottom: 1rem; }
.article-plein .article-chapeau { margin-bottom: 2rem; }
.article-plein .article-chapeau + .langue-bascule-ligne { margin: -1.3rem 0 2rem; }
.article-image { margin: 0 0 2rem; }
.article-image img { display: block; width: 100%; height: auto; }
.article-suite {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: baseline;
    padding-top: 1.2rem; border-top: 1px solid var(--ink); font-size: .95rem;
}
.article-suite > :last-child { text-align: right; }
.article-tous { text-align: center; }
@media (max-width: 560px) {
    .article-suite { grid-template-columns: 1fr; text-align: center; }
    .article-suite > :last-child { text-align: center; }
}

/* Français / anglais : les deux versions sont dans la page, la bascule
   (theme.js) pose data-lecture="en" sur <html>. Sans script, le français. */
html:not([data-lecture="en"]) [data-v="en"],
html:not([data-lecture="zh"]) [data-v="zh"],
html[data-lecture="en"] [data-vf~="en"],
html[data-lecture="zh"] [data-vf~="zh"] { display: none; }

/* La bascule se lit comme une mention en italique sous l'introduction :
   « — read in English ». Le tiret n'est pas souligné, seul le libellé l'est. */
body.tpl-page-archive .intro { margin-bottom: 0; }
body.tpl-page-archive .intro > :last-child { margin-bottom: 0; }
.langue-bascule-ligne { text-align: center; margin: 0.6rem 0 2rem; }
.langue-bascule {
    padding: 0;
    border: none;
    background: none;
    font: italic 1em var(--serif);
    color: var(--link);
    text-decoration: underline;
    cursor: pointer;
}
.langue-bascule-ligne::before {
    content: "— ";
    white-space: pre;
}
.langue-sep { white-space: pre; }
.langue-bascule:hover { text-decoration-thickness: 2px; }

/* En anglais, mdma prend la DA de « des lectures » : blanc sur le bleu
   Kruger. Le fond passe aussi sur <html>, pour que le rebond du défilement
   (Safari, iOS) ne découvre pas de blanc. */
/* Fondu seulement au clic (theme.js pose data-fondu) : une page ouverte
   directement en anglais arrive bleue, sans passer par le blanc. */
html[data-fondu] :is(body.tpl-page-archive, body.tpl-page-articles) { transition: background-color .35s ease, color .35s ease; }
html[data-lecture="en"],
html[data-lecture="en"] :is(body.tpl-page-archive, body.tpl-page-articles) { background: #0f3cc0; color: #fff; }
html[data-lecture="en"] :is(body.tpl-page-archive, body.tpl-page-articles) a,
html[data-lecture="en"] :is(body.tpl-page-archive, body.tpl-page-articles) a:visited,
html[data-lecture="en"] :is(body.tpl-page-archive, body.tpl-page-articles) .langue-bascule { color: #fff; }
html[data-lecture="en"] :is(body.tpl-page-archive, body.tpl-page-articles) .edition-meta { color: rgba(255, 255, 255, .75); }
html[data-lecture="en"] :is(body.tpl-page-archive, body.tpl-page-articles) .edition-full { border-bottom-color: #fff; }
html[data-lecture="en"] :is(body.tpl-page-archive, body.tpl-page-articles) hr { border-top-color: #fff; }
html[data-lecture="en"] :is(body.tpl-page-archive, body.tpl-page-articles) blockquote { border-left-color: #fff; color: rgba(255, 255, 255, .75); }
html[data-lecture="en"] :is(body.tpl-page-archive, body.tpl-page-articles) ::selection { background: #fff; color: #0f3cc0; }
@media (prefers-reduced-motion: reduce) { html[data-fondu] :is(body.tpl-page-archive, body.tpl-page-articles) { transition: none; } }
/* « des articles » suit mdma dans chaque langue ; ses filets et ses thèmes aussi. */
html[data-lecture="en"] body.tpl-page-articles .article-suite { border-top-color: #fff; }
html[data-lecture="en"] body.tpl-page-articles .edition-meta a.article-theme { text-decoration-color: rgba(255, 255, 255, .45); }
html[data-lecture="zh"] body.tpl-page-articles .article-suite { border-top-color: #F2BE45; }
html[data-lecture="zh"] body.tpl-page-articles .edition-meta a.article-theme { text-decoration-color: rgba(243, 217, 166, .45); }

/* --- Page « des films » --- */
body.tpl-page-films .wrap { max-width: 92rem; }
.films-index {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    margin: 0 0 3rem;
}
.films-index[hidden], .films-menu[hidden] { display: none; }
/* L'index en menu déroulant : il colle en haut de l'écran au défilement. */
.films-menu {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2rem 1.6rem;
    margin: 0 0 3rem;
    padding: .6rem 0;
    background: var(--paper);
}
.films-menu.est-colle { border-bottom: 1px solid var(--ink); }
.films-menu-bouton { position: relative; display: inline-block; max-width: 100%; color: var(--link); }
.films-menu-texte { text-decoration: underline; }
.films-menu-fleche { display: inline-block; margin-left: .35em; font-size: .8em; transform: translateY(-.15em); }
.films-menu select {                  /* le vrai menu, invisible, posé sur le texte */
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0;
    font: inherit;
    font-size: 16px;                  /* pas de zoom automatique sur iPhone */
    cursor: pointer;
}
.films-menu-bouton:hover .films-menu-texte { text-decoration: none; }
.films-menu-bouton:has(select:focus-visible) { outline: 2px solid var(--link); outline-offset: 3px; }
.films-menu-lien {                    /* un bouton qui a l'air d'un lien */
    font: inherit;
    color: var(--link);
    background: none;
    border: 0;
    padding: 0;
    text-decoration: underline;
    cursor: pointer;
}
.films-menu-lien:hover { text-decoration: none; }
.film[hidden], .films-groupe[hidden] { display: none; }

/* La recherche dans les images, sous celle des films. */
.films-find-images { margin-top: -.9rem; }
.films-find-images[hidden] { display: none; }

/* L'explorateur des images : un champ, des filtres, les résultats. */
.films-mur-find { margin: 0; flex: 1 1 18rem; max-width: 30rem; }
.films-mur-find .find-input { flex: 1; width: auto; min-width: 0; }
.films-mur-find[hidden] { display: none; }
.films-mur-filtres { display: flex; flex-direction: column; gap: .35rem; margin: 0 0 1.2rem; font-size: .8rem; }
.films-mur-filtres[hidden] { display: none; }
.films-filtre { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .35rem; }
.films-filtre-nom { flex: 0 0 6.5rem; color: var(--muted); font-style: italic; }
.films-filtre button {
    font: inherit;
    color: var(--ink);
    background: none;
    border: 1px solid #ccc;
    border-radius: 99px;
    padding: .05rem .5rem .1rem;
    cursor: pointer;
}
.films-filtre button span { color: #999; font-size: .85em; }
.films-filtre button:hover { border-color: var(--ink); }
.films-filtre button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.films-filtre button[aria-pressed="true"] span { color: #bbb; }
.films-filtre-effacer { margin: .2rem 0 0; }
.films-mur-plus { margin: 1.4rem 0 0; text-align: center; font-size: .95rem; }
.films-mur [hidden] { display: none !important; }
@media (max-width: 640px) {
    .films-filtre-nom { flex-basis: 100%; }
    .films-mur-filtres { font-size: .75rem; }
}

.film { margin: 0 0 4rem; scroll-margin-top: calc(var(--films-barre, 2.9rem) + 1.3rem); }   /* sous la barre collée (hauteur posée par films.js) */
@media (max-width: 640px) { .films-menu { font-size: .85rem; gap: .15rem 1.1rem; } }
.film-nouveau {
    font-size: .55em;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    background: var(--link);
    padding: .1em .4em;
    vertical-align: .35em;
}
.films-groupe {                       /* les décennies, quand on trie par année */
    font-weight: normal;
    font-size: .8rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 2rem;
    padding-top: .5rem;
    border-top: 1px solid var(--ink);
}
.film-wiki { display: flex; flex-wrap: wrap; gap: .2rem 1.3rem; }
.film-wiki .lb-logo { height: .8em; }

/* La vue compacte : trois captures, le reste derrière « voir les N captures ».
   Repliée dès l'arrivée (html.films-js, posé par page-films.php avant les
   films), sans attendre films.js, qui ne fait que déplier (.est-ouvert). Sans
   JavaScript, tout reste visible, et la liste des liens de l'index aussi. */
.films-js .film-grid:not(.est-ouvert) > :nth-child(n+4) { display: none; }
.films-js .films-index { display: none; }
.film-plus { margin: .6rem 0 0; font-size: .95rem; }
.film-plus[hidden] { display: none; }
/* Ce que films.js va montrer (la barre, la recherche dans les images, les
   « voir les N captures ») a déjà sa place, invisible : la page ne bouge pas
   quand il arrive, ni au retour arrière quand le navigateur remet le
   défilement avant lui. */
.films-js .films-menu[hidden],
.films-js .films-find-images[hidden] { display: flex; visibility: hidden; }
.films-js .film-plus[hidden] { display: block; visibility: hidden; }

html.films-bloque { overflow: hidden; }

/* La visionneuse : une capture en grand, sur fond noir. */
.films-lb { position: fixed; inset: 0; z-index: 100; background: #000; color: #fff; }
.films-lb[hidden] { display: none; }
.films-lb-img {
    position: absolute;
    left: 50%; top: 46%;
    transform: translate(-50%, -50%);
    max-width: 94vw;
    max-height: 82vh;
    max-height: 82svh;
    cursor: pointer;
}
.films-lb-fleche {
    position: absolute;
    top: 0; bottom: 4.5rem;
    width: 18vw;
    background: none;
    border: 0;
    color: #fff;
    font: inherit;
    font-size: 1.6rem;
    opacity: .45;
    cursor: pointer;
}
.films-lb-fleche:hover, .films-lb-fleche:focus-visible { opacity: 1; }
.films-lb-prec { left: 0; text-align: left; padding-left: 1.4rem; }
.films-lb-suiv { right: 0; text-align: right; padding-right: 1.4rem; }
.films-lb-bas {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .3rem 1.3rem;
    padding: 1rem 1.4rem 1.2rem;
    font-size: .95rem;
}
.films-lb-titre { flex: 1 1 auto; }
.films-lb-compte { color: #999; font-variant-numeric: tabular-nums; }
.films-lb a, .films-lb a:visited, .films-lb .films-menu-lien { color: #fff; }
.films-lb-png[hidden] { display: none; }
@media (max-width: 640px) {
    .films-lb-img { top: 44%; }
    .films-lb-fleche { width: 25vw; }
    .films-lb-bas { font-size: .85rem; }
}

/* Les suggestions aléatoires : un mur de captures, ouvert à la demande. */
.films-mur {
    --films-mur-h: 9rem;
    position: fixed;
    inset: 0;
    z-index: 90;
    overflow-y: auto;
    background: var(--paper);
    padding: 0 1.4rem 3rem;
}
.films-mur[hidden] { display: none; }
.films-mur-tete {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .2rem 1.6rem;
    padding: 1.2rem 0 1rem;
    background: var(--paper);
}
.films-mur-nom { font-size: 1.5rem; margin-right: auto; }
.films-mur-grille { display: flex; flex-wrap: wrap; gap: 4px; }
.films-mur-grille::after { content: ""; flex-grow: 999; }
.films-mur-grille a { position: relative; display: block; height: var(--films-mur-h); }
.films-mur-grille img { display: block; width: 100%; height: 100%; object-fit: cover; background: #eee; }
.films-mur-grille span {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: .9rem .5rem .35rem;
    color: #fff;
    font-size: .8rem;
    line-height: 1.2;
    background: linear-gradient(transparent, rgba(0, 0, 0, .75));
    opacity: 0;
    transition: opacity .15s;
}
.films-mur-grille a:hover span, .films-mur-grille a:focus-visible span { opacity: 1; }
@media (max-width: 640px) {
    .films-mur { --films-mur-h: 5.5rem; padding: 0 .8rem 2rem; }
    .films-mur-grille span { opacity: 1; font-size: .68rem; }
}
.film-title {
    font-weight: normal;
    font-size: 1.5rem;
    margin: 0 0 0.8rem;
}
.film-wiki {
    margin: -0.3rem 0 1rem;
    font-size: 0.95rem;
}
.film-wiki a { display: inline-flex; align-items: center; }
.film-wiki .wiki-logo {
    height: 1em;          /* même hauteur que le texte */
    width: auto;
    margin-right: 0.4em;
}
.film-credits {
    margin: 0 0 1.2rem;
    color: var(--muted);
    font-size: 0.95rem;
}
.film-credits p { margin: 0; }
.film-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}
.film-grid img { width: 100%; height: auto; display: block; }
.film-grid .film-shot { display: block; cursor: zoom-in; }
.film-grid .film-shot img { transition: opacity 0.15s ease; }
.film-grid .film-shot:hover img { opacity: 0.85; }
@media (max-width: 640px) {
    .film-grid { grid-template-columns: 1fr; }
}

/* --- Bas de page (accueil) : CV à gauche, e-mail au centre, are.na à droite.
   Sur grand écran chaque élément est ancré indépendamment ; la barre .site-bottom
   ne sert de conteneur de mise en page que sur petit écran (voir plus bas). --- */

/* --- Lien are.na en bas à droite --- */
.site-footer {
    position: fixed;
    right: 1rem;
    bottom: 0.7rem;
    font-size: 0.95rem;
    background: var(--paper);
    padding: 0.1rem 0.35rem;
    z-index: 10;
}
.site-footer { display: flex; align-items: center; gap: 1rem; }
.site-footer a { display: inline-flex; align-items: center; white-space: nowrap; }
.site-footer .insta-logo {
    height: 1em;             /* même hauteur que le texte, comme le logo are.na */
    width: auto;
    margin-right: 0.4em;
}
/* Certaines plateformes (iOS) rendent « ↗ » en emoji : on force la variante
   texte, et on l'escamote sur mobile où elle alourdit la pile. */
.ext { font-variant-emoji: text; }
.site-footer .arena-logo {
    height: 1em;         /* même hauteur que le texte */
    width: auto;
    margin-right: 0.4em;
}

/* Bouton CV en bas à gauche (accueil) */
.site-cv {
    position: fixed;
    left: 1rem;
    bottom: 0.7rem;
    z-index: 10;
}
.site-cv a {
    display: inline-block;
    font-family: var(--serif);
    font-size: 0.9rem;
    line-height: 1;
    color: rgb(85, 186, 101);
    text-decoration: none;
    background: var(--paper);
    border: 1px solid var(--ink);
    border-radius: 999px;
    padding: 0.45rem 0.95rem;
    transition: background 0.15s ease, color 0.15s ease;
}
.site-cv a:hover { background: var(--ink); color: rgb(85, 186, 101); }
/* Avec la version anglaise : une seule pilule en deux parts, le français
   puis « in English » en italique, comme la bascule de langue de mdma. */
.site-cv.a-deux-langues { display: flex; }
.site-cv.a-deux-langues a:first-child { border-radius: 999px 0 0 999px; }
.site-cv.a-deux-langues .site-cv-en { border-left: none; border-radius: 0 999px 999px 0; font-style: italic; }

/* Bouton e-mail au centre (accueil) — copie l'adresse, n'ouvre pas de messagerie */
.site-mail {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0.7rem;
    z-index: 10;
}
.site-mail .mail-copy {
    position: relative;          /* repère pour l'état « copié » superposé */
    font-family: var(--serif);
    font-size: 0.9rem;
    line-height: 1;
    color: #9D9DCC;
    background: var(--paper);
    border: 1px solid var(--ink);
    border-radius: 999px;
    padding: 0.45rem 0.95rem;
    cursor: pointer;
    /* Le message de confirmation est plus long que l'adresse : la pastille
       s'élargit à la copie (min-width plus bas). Volontairement hors transition —
       animée, la largeur reste bloquée à 0 et le texte est tronqué. */
    min-width: 0;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.site-mail .mail-copy:hover { background: var(--ink); color: #9D9DCC; }

/* Annonce pour les lecteurs d'écran : audible, jamais affichée. */
.site-mail .mail-live {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Les deux libellés se superposent : on fait glisser l'un et apparaître l'autre. */
.site-mail .mail-label,
.site-mail .mail-done {
    display: inline-block;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.site-mail .mail-done {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(0.45rem);
    color: #9D9DCC;
    pointer-events: none;
}
/* L'état « copié » doit l'emporter sur :hover, sinon le rendu diffère
   entre desktop (survol) et mobile (pas de survol). */
.site-mail .mail-copy.is-copied,
.site-mail .mail-copy.is-copied:hover {
    background: var(--paper);
    border-color: #9D9DCC;
    min-width: 17.5rem;   /* place pour « adresse copiée dans le presse-papiers » */
}
.site-mail .is-copied .mail-label { opacity: 0; transform: translateY(-0.45rem); }
.site-mail .is-copied .mail-done { opacity: 1; transform: translateY(0); }
.site-mail .is-failed { border-color: #c0392b; color: #c0392b; }

/* Respecte le réglage système « réduire les animations ». */
@media (prefers-reduced-motion: reduce) {
    .site-mail .mail-label,
    .site-mail .mail-done,
    .site-mail .mail-copy { transition: none; }
}

/* Sur petit écran, les trois éléments ancrés se chevaucheraient : la barre
   reprend la main et les empile, alignés à gauche — are.na, e-mail, puis CV. */
@media (max-width: 700px) {
    .site-bottom {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0.7rem;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
        padding: 0 1rem;
        z-index: 10;
        pointer-events: none;   /* la barre n'intercepte pas les clics */
    }
    .site-bottom > * {
        position: static;
        transform: none;
        text-align: left;
        pointer-events: auto;
    }
    /* L'ordre visuel diffère de l'ordre du HTML. */
    .site-bottom .site-footer { order: 1; }
    .site-bottom .site-mail   { order: 2; }
    .site-bottom .site-cv     { order: 3; }

    .site-footer {
        font-size: 0.85rem;
        padding-left: 0;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .site-footer .ext { display: none; }
    /* Même gabarit de pictogramme des deux côtés : les libellés s'alignent. */
    .site-footer .arena-logo,
    .site-footer .insta-logo {
        width: 1.25em;
        height: 1em;
        object-fit: contain;
        margin-right: 0.5em;
        flex: none;
    }
    .site-cv a,
    .site-mail .mail-copy { font-size: 0.8rem; padding: 0.4rem 0.75rem; }
    /* Empilé, le bouton a toute la largeur : pas besoin d'élargissement. */
    .site-mail .mail-copy.is-copied,
    .site-mail .mail-copy.is-copied:hover { min-width: 0; }
    .site-mail .mail-done { position: static; opacity: 0; display: none; }
    .site-mail .is-copied .mail-label { display: none; }
    .site-mail .is-copied .mail-done { display: inline-block; opacity: 1; transform: none; }
}

@media (max-width: 1000px) { .moodboard { column-count: 3; } }
@media (max-width: 640px) {
    body { font-size: 18px; }
    .site-title { font-size: 1.7rem; }
    .index a { font-size: 1.5rem; }
    .moodboard { column-count: 2; }
}

/* ==========================================================================
   Page « des lectures » — d'après Picture/Readings (Barbara Kruger, 1978).
   Une couverture bleue plein écran, puis la liste au défilement.
   ========================================================================== */
body.tpl-page-reading {
    --kruger: #0f3cc0;          /* le bleu de la couverture */
    background: var(--kruger);
    color: #fff;
}
body.tpl-page-reading a,
body.tpl-page-reading a:visited { color: #fff; }
body.tpl-page-reading .page-title,
body.tpl-page-reading .back a { color: #fff; }
body.tpl-page-reading blockquote { border-left-color: #fff; color: rgba(255,255,255,.75); }
body.tpl-page-reading .empty { color: rgba(255,255,255,.7); }

/* La couverture occupe l'écran : c'est .reading-body qui reprend les marges. */
body.tpl-page-excerpt .wrap,
body.tpl-page-reading .wrap { max-width: none; padding: 0; }

/* --- La couverture (commune à « des lectures » et « des films ») --- */
.reading-cover,
.films-cover {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;         /* évite le saut dû à la barre d'URL mobile */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 3.2rem 1.6rem;
}
/* Retour à l'accueil, en tête de couverture — même corps que le sous-titre. */
.cover-home,
.cover-home:visited {          /* sinon a:visited (plus spécifique) le repasse en bleu */
    margin: 0;
    color: var(--cover-ink, #fff);
    text-decoration: none;
    letter-spacing: 0.01em;
}
.cover-home:hover { text-decoration: underline; text-underline-offset: 3px; }
.cover-home:visited { color: var(--cover-ink, #fff); }
.films-cover .cover-home { text-shadow: 0 1px 14px rgba(0,0,0,.55); }

.cover-title {
    margin: auto 0 0;           /* centrage optique vertical */
    font-weight: normal;
    font-size: clamp(2rem, 6vw, 3.6rem);
    color: var(--cover-ink, #fff);
    letter-spacing: 0.01em;
}
.cover-sub {
    margin: auto 0 1.4rem;      /* taille de corps inchangée */
    color: var(--cover-ink, #fff);
}

/* Flèche d'invitation au défilement — discrète, avec un léger balancement. */
.cover-down,
.cover-down:visited {          /* idem : l'ancre devient « visitée » après un clic */
    display: block;
    font-size: 1.5rem;
    line-height: 1;
    color: rgba(255,255,255,.65);
    text-decoration: none;
    animation: cover-bob 2.4s ease-in-out infinite;
}
.cover-down:hover { color: #fff; }
@keyframes cover-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(0.35rem); }
}

/* Mention en filigrane, le long du bord droit, lue de bas en haut. */
.cover-credit {
    position: absolute;
    right: 0.9rem;
    top: 50%;
    margin: 0;
    writing-mode: vertical-rl;
    transform: translateY(-50%) rotate(180deg);
    font-size: 0.6rem;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: rgba(255,255,255,.4);
    max-height: 88vh;
    overflow: hidden;
    pointer-events: none;
}
.cover-credit em { font-style: italic; }

/* --- La liste, sous la couverture --- */
.reading-body {
    max-width: var(--measure);
    padding: 2.4rem 1.4rem 6rem;
    scroll-margin-top: 0;
}

/* --- Liste et recherche sur fond bleu --- */
body.tpl-page-reading .find-input {
    color: #fff;
    border-bottom-color: #fff;
    caret-color: #fff;
}
body.tpl-page-reading .find-input::placeholder { color: rgba(255,255,255,.65); }
body.tpl-page-reading .find-count { color: rgba(255,255,255,.7); }
body.tpl-page-reading .find.is-empty .find-count { color: #ffb3ab; }

/* Écran très bas : le filigrane vertical ne tiendrait pas. */
@media (max-height: 520px) { .cover-credit { display: none; } }
@media (max-width: 640px) {
    .reading-cover { padding-left: 1.2rem; padding-right: 2.4rem; }
    .cover-credit { font-size: 0.55rem; right: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .cover-down { animation: none; }
}

/* ==========================================================================
   Page « des films » — couverture photographique plein écran.
   ========================================================================== */
body.tpl-page-films .wrap { max-width: none; padding: 0; }
.films-body {
    max-width: 92rem;
    padding: 2.4rem 1.4rem 6rem;
}

.films-cover {
    /* L'image (cover-films.webp) est posée par page-films.php, à la même
       adresse que l'image d'attente de la vidéo : un seul téléchargement. */
    background: #111 center / cover no-repeat;
    color: #fff;
    isolation: isolate;         /* la vidéo passe sous le voile et les textes */
}
/* L'ouverture du film en boucle : elle couvre l'écran sans se déformer
   (object-fit: cover), le still restant dessous le temps qu'elle arrive. */
.films-cover-video {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .films-cover-video { display: none; } }
/* Le haut-parleur, en bas à gauche : barré tant que la vidéo est muette. */
.films-son {
    position: absolute;
    left: 1.4rem;
    bottom: 1.4rem;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    color: #fff;
    background: rgba(0, 0, 0, .25);
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 50%;
    cursor: pointer;
    opacity: .75;
    transition: opacity .2s, background-color .2s;
}
.films-son[hidden] { display: none; }
.films-son:hover, .films-son:focus-visible { opacity: 1; background: rgba(0, 0, 0, .45); }
.films-son svg { width: 1.2rem; height: 1.2rem; overflow: visible; }
.films-son path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.films-son .films-son-ondes { display: none; }
.films-son.est-actif .films-son-ondes { display: inline; }
.films-son.est-actif .films-son-muet { display: none; }
/* Voile sombre : sans lui, le blanc se perd dans les tons clairs du visage. */
.films-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
                rgba(0,0,0,.50), rgba(0,0,0,.28) 42%, rgba(0,0,0,.60));
    pointer-events: none;
}
/* Au-dessus du voile — sans toucher au positionnement absolu du filigrane,
   qui redeviendrait sinon un élément de flux et casserait le centrage. */
.films-cover .cover-title,
.films-cover .cover-sub,
.films-cover .cover-down { position: relative; z-index: 1; }
.films-cover .cover-credit { z-index: 1; }
.films-cover .cover-title,
.films-cover .cover-sub { text-shadow: 0 1px 14px rgba(0,0,0,.55); }
.films-cover .cover-sub { max-width: 44rem; }
.films-cover .cover-credit {
    color: rgba(255,255,255,.55);
    text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
/* En portrait, l'image (très large) est recadrée horizontalement : centrée,
   elle ne montrerait que le nez. On vise le regard. */
@media (orientation: portrait) {
    .films-cover {
        /* L'image est rendue un peu plus haute que l'écran puis calée en bas :
           elle remonte d'autant, et « des films » vient se loger sous la paupière. */
        --montee: 100px;
        background-size: auto calc(100% + var(--montee));
        background-position: 64% 100%;
    }
    /* La vidéo, recadrée en hauteur : on garde le centre de l'action, un peu à droite. */
    .films-cover-video { object-position: 60% 50%; }
}

/* ==========================================================================
   Page « des extraits » — le papier imprimé dont les passages sont tirés :
   un crème chaud, de l'encre noire. Seule couverture claire du site.
   ========================================================================== */
body.tpl-page-excerpt {
    --cover-bg: #8A8A8A;
    --cover-ink: #fff;
    background: var(--cover-bg);
    color: var(--cover-ink);
}
body.tpl-page-excerpt .wrap { max-width: none; padding: 0; }
body.tpl-page-excerpt a,
body.tpl-page-excerpt a:visited { color: var(--cover-ink); }
body.tpl-page-excerpt .page-title,
body.tpl-page-excerpt .back a { color: var(--cover-ink); }
body.tpl-page-excerpt .empty { color: rgba(255, 255, 255, .75); }

/* La flèche et la recherche s'encrent aussi. */
body.tpl-page-excerpt .cover-down,
body.tpl-page-excerpt .cover-down:visited { color: rgba(255, 255, 255, .7); }
body.tpl-page-excerpt .cover-down:hover { color: var(--cover-ink); }
body.tpl-page-excerpt .find-input {
    color: var(--cover-ink);
    border-bottom-color: var(--cover-ink);
    caret-color: var(--cover-ink);
}
body.tpl-page-excerpt .find-input::placeholder { color: rgba(255, 255, 255, .7); }
body.tpl-page-excerpt .find-count { color: rgba(255, 255, 255, .8); }
body.tpl-page-excerpt .excerpt-source { color: rgba(255, 255, 255, .85); }

/* Bascule vers le noir — le lecteur choisit son fond. */
body.tpl-page-excerpt.is-dark { --cover-bg: #000; }

.theme-swap {
    display: inline-block;
    margin: 1.7rem 0 0;         /* dans le vide, sous le titre de couverture */
    padding: 0;
    border: none;
    background: none;
    font-family: var(--serif);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, .75);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.theme-swap:hover { color: #fff; }

/* ==========================================================================
   Page « des villes » — d'après l'écran hors-ligne de Plans : fond sombre,
   globe filaire, point bleu. Aucune donnée cartographique.
   ========================================================================== */
body.tpl-page-cities {
    --nuit: #000;          /* le noir franc de l'écran hors-ligne de Plans */
    --trait: rgba(96, 105, 120, .45);   /* gris sur l'ivoire du globe, comme la référence */
    --bleu-ios: #0a84ff;
    background: var(--nuit);
    color: #f2f2f7;
    /* Seule page du site à quitter la Times : c'est la DA d'une interface. */
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}
body.tpl-page-cities .wrap { max-width: none; padding: 0; }
body.tpl-page-cities a,
body.tpl-page-cities a:visited { color: var(--bleu-ios); text-decoration: none; }
body.tpl-page-cities a:hover { text-decoration: underline; }

.villes-app {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.4rem 1.2rem 3rem;
    text-align: center;
}
.villes-home {
    font-family: var(--serif);
    font-size: 1rem;
    color: rgba(255, 255, 255, .55) !important;
    /* Marge fixe et non « auto » : centrer verticalement faisait remonter le
       globe et le bouton de 55 px dès que la fiche apparaissait — sous le
       curseur, de quoi rater le clic suivant. */
    margin-bottom: 2.2rem;
}
.villes-home:hover { color: #fff !important; }

/* --- Le globe --- */
.globe-zone { display: flex; flex-direction: column; align-items: center; }
.globe { width: min(78vw, 26rem); height: auto; display: block; }
.globe-face { fill: #f4f1ea; }                    /* l'ivoire de Plans */
.graticule path { fill: none; stroke: var(--trait); stroke-width: .8; }
/* En SVG, l'attribut « hidden » n'a aucun effet : on masque par une classe. */
.marqueur.cache { display: none; }
.marqueur { filter: drop-shadow(0 1px 4px rgba(0,0,0,.45)); }
/* L'anneau blanc se perdrait sur l'ivoire du globe : une ombre le détache. */
.marqueur-halo  { fill: #fff; }
.marqueur-point { fill: var(--bleu-ios); }
.marqueur-cone  { fill: url(#cone-faisceau); }

.globe-etat {
    margin: 1.1rem 0 0;
    font-size: .95rem;
    letter-spacing: .01em;
    color: rgba(255, 255, 255, .6);
}

/* --- La fiche --- */
.fiche { max-width: 34rem; margin: 1.6rem 0 0; }
.fiche-titre {
    /* Les drapeaux ne rendent qu'avec une police à emoji couleur. */
    font-family: inherit, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: -.015em;
    margin: 0 0 .6rem;
}
.fiche-texte {
    margin: 0 0 .8rem;
    font-size: .98rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .75);
    text-align: left;
}
.fiche-source { margin: 0; font-size: .9rem; }

/* --- Le bouton, façon iOS --- */
/* La capsule de verre des commandes flottantes de Plans (variante B).
   Sur fond noir le flou n'a presque rien à brouiller : la capsule se lit
   surtout comme un gris sombre, fidèle à Plans en mode nuit. */
.villes-bouton {
    margin: 1.3rem 0 0;          /* sous le globe, avant la fiche */
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .72rem 1.35rem .72rem 1.15rem;
    border-radius: 999px;
    border: .5px solid rgba(255, 255, 255, .16);
    background: rgba(44, 44, 48, .62);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    color: #fff;
    font: inherit;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease, opacity .15s ease;
}
.villes-bouton-fleche { width: 17px; height: 17px; color: var(--bleu-ios); flex: none; }
.villes-bouton:hover { background: rgba(58, 58, 62, .72); }
.villes-bouton:active { transform: scale(.97); }
.villes-bouton:disabled { opacity: .5; cursor: default; transform: none; }
.villes-bouton:focus-visible { outline: 2px solid var(--bleu-ios); outline-offset: 3px; }

.villes-intro {
    max-width: 34rem;
    margin: auto 0 0;
    padding-top: 2.4rem;
    font-size: .9rem;
    color: rgba(255, 255, 255, .45);
}

@media (max-width: 640px) {
    .fiche-titre { font-size: 1.3rem; }
    .globe { width: 86vw; }
}

/* --- Sections protégées : lien vertical en marge de l'accueil --- */
.side-lien {
    position: fixed;
    right: 0.9rem;
    top: 50%;
    writing-mode: vertical-rl;
    transform: translateY(-50%) rotate(180deg);   /* lu de bas en haut */
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--muted);
    text-decoration: none;
    z-index: 10;
}
.side-lien:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-height: 520px) { .side-lien { display: none; } }

/* ==========================================================================
   Listes de « ressources numériques » — corps de page d'après la DA de hausotto.com :
   fond blanc, grotesque, aucun filet ; au survol les autres lignes
   s'estompent, au clic la référence se déplie sur place.
   ========================================================================== */
body.tpl-page-slides .wrap,
/* L'index des ressources a la même enveloppe : sans ça, .wrap le plafonne à
   60 rem ET le cale à gauche (margin: 0), d'où une page décentrée. */
body.tpl-page-veille .wrap { max-width: none; padding: 0; }

/* AT Surt — grotesque de la page, chargée localement. La Times reste
   réservée à la couverture et au reste du site. */
@font-face {
    font-family: "AT Surt";
    src: url("fonts/ATSurt-Regular.woff") format("woff"),
         url("fonts/ATSurt-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "AT Surt";
    src: url("fonts/ATSurt-Medium.woff") format("woff"),
         url("fonts/ATSurt-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

.slides-body {
    background: var(--paper);
    color: var(--ink);
    font-family: "AT Surt", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 20px;
    line-height: 1.15;
    min-height: 100vh;
    padding: 1.4rem 1.6rem 3rem;
}
.slides-body .back a { color: var(--ink); }

/* --- Étiquettes --- */
.v-tags { margin: 1.2rem 0 1.6rem; display: flex; flex-direction: column; gap: .35rem; }
.v-groupe { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem; }
.v-groupe-nom { font-size: .8rem; opacity: .45; min-width: 5rem; }
.v-tag {
    font: inherit;
    font-size: .82rem;
    line-height: 1;
    padding: .28rem .6rem;
    border: 1px solid rgba(0, 0, 0, .25);
    border-radius: 999px;
    background: none;
    color: inherit;
    cursor: pointer;
    opacity: .6;
    transition: opacity .12s ease, background .12s ease;
}
.v-tag:hover { opacity: 1; }

/* --- Groupe « Comptes », replié --- */
.v-groupe-repli { display: block; }
.v-groupe-repli > summary {
    display: inline-flex;         /* remplace le triangle natif par le nôtre */
    align-items: baseline;
    gap: .4rem;
    cursor: pointer;
    list-style: none;
    width: max-content;
}
.v-groupe-repli > summary::-webkit-details-marker { display: none; }
.v-groupe-repli > summary::after {
    content: '\002B';             /* + fermé, \2212 (moins) ouvert */
    font-size: .9em;
    opacity: .7;
}
.v-groupe-repli[open] > summary::after { content: '\2212'; }
.v-groupe-repli > summary:hover { opacity: .8; }
.v-groupe-nb { opacity: .7; font-variant-numeric: tabular-nums; }
.v-groupe-liste {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .5rem;
    padding-left: 5rem;           /* aligné sur les étiquettes des autres groupes */
}
@media (max-width: 900px) { .v-groupe-liste { padding-left: 0; } }
.v-tag.est-actif { background: var(--ink); color: var(--paper); border-color: var(--ink); opacity: 1; }

/* --- Colonnes --- */
.v-entete, .v-ligne {
    display: grid;
    /* Les colonnes viennent du gabarit : chaque sous-catégorie a les siennes. */
    grid-template-columns: 11rem minmax(0, 1fr) 6rem 8rem 11rem 5rem;
    gap: 1rem;
    align-items: baseline;
}
.v-entete { font-size: 1em; opacity: .45; margin: 0 0 .8rem; }

.v-liste { position: relative; }
.v-bloc[hidden] { display: none; }
.v-ligne {
    padding: .06rem 0;
    font-size: 1em;
    line-height: 1.15;
    cursor: pointer;
    outline: none;
    transition: opacity .18s ease;
}
/* Le geste signature : tout s'efface sauf la ligne visée. */
.v-liste:hover .v-ligne { opacity: .3; }
.v-liste .v-ligne:hover,
.v-liste .v-ligne:focus-visible,
.v-bloc.est-ouvert .v-ligne { opacity: 1; }

/* Aucune colonne ne doit passer sur deux lignes : la liste resterait aérée. */
.v-compte, .v-nom, .v-format, .v-theme, .v-date, .v-source { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-source a { color: var(--ink); text-decoration: none; }
.v-source a:hover { text-decoration: underline; }

/* --- Détail déplié --- */
.v-detail {
    display: grid;
    grid-template-columns: minmax(0, 29rem) minmax(0, 21rem);
    gap: 2rem;
    justify-content: center;      /* centré dans la page, comme un post */
    max-width: 54rem;
    margin: 1.4rem auto 2.6rem;
    animation: v-ouvre .3s ease both;
}
/* « display: grid » l'emporterait sur le display:none de l'attribut hidden :
   il faut le rétablir explicitement. */
.v-detail[hidden] { display: none; }
@keyframes v-ouvre { from { opacity: 0; } to { opacity: 1; } }
.v-detail-media { grid-column: 1; grid-row: 1; }
.v-detail-texte { grid-column: 2; grid-row: 1; font-size: .82em; line-height: 1.4; align-self: start; }
/* La légende se replie à douze lignes : la hauteur du bloc reste celle
   de l'image, quelle que soit la longueur du texte. */
.v-detail-caption {
    display: -webkit-box;
    -webkit-line-clamp: 12;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.v-detail.est-deplie .v-detail-caption { -webkit-line-clamp: unset; overflow: visible; }
.v-plus {
    font: inherit;
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 1rem;
    color: inherit;
    opacity: .55;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.v-plus:hover { opacity: 1; }
.v-detail-caption { margin: 0 0 .5rem; }
.v-detail-credits { margin: 0 0 1rem; font-size: .85rem; opacity: .6; }
.v-detail-lien { margin: 0; font-size: .9rem; }
.v-detail-lien a { color: var(--ink); }
/* L'embed impose sa propre mise en forme : on ne lui contraint que la largeur. */
.v-detail-media .instagram-media { margin: 0 !important; min-width: 0 !important; }

/* --- Recherche, sur fond blanc --- */
body.tpl-page-slides .find-input { color: var(--ink); border-bottom-color: var(--ink); }
body.tpl-page-slides .find-count { color: var(--muted); }

@media (max-width: 900px) {
    .v-entete { display: none; }
    .v-ligne {
        grid-template-columns: 1fr;
        gap: .1rem;
        padding: .7rem 0;
        border-top: 1px solid rgba(0, 0, 0, .12);
    }
    .v-ligne { font-size: 1.15rem; }
    .v-format, .v-theme, .v-date, .v-source { font-size: .9rem; opacity: .6; }
    .v-liste:hover .v-ligne { opacity: 1; }
    .v-detail { grid-template-columns: 1fr; max-width: 100%; }
    .v-detail-media { grid-column: 1; grid-row: 1; }
    .v-detail-texte { grid-column: 1; grid-row: 2; }
    .v-groupe-nom { min-width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .v-detail { animation: none; } }


/* « index » : refermer la référence dépliée, à la manière de Haus Otto. */

/* --- « ressources numériques » : l'aplat rouge de la couverture, dérivé du bleu
   de « des lectures » (même teinte inversée, luminosité et saturation
   identiques). AT Surt sur toute la page, couverture comprise. --- */
body.tpl-page-slides {
    --cover-bg: #C00F0F;
    background: var(--cover-bg);
    color: #fff;
    font-family: "AT Surt", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body.tpl-page-slides .slides-cover a,
body.tpl-page-slides .slides-cover a:visited { color: #fff; }
body.tpl-page-slides .find-input { font-family: inherit; }



/* Filet de sécurité : si le message de redimensionnement d'Instagram n'arrive
   pas (bloqueur, réseau), l'iframe reste à 2 px et la fiche paraît vide.
   min-height ne fait que relever un plancher : la hauteur réelle prime. */
.v-detail-media iframe { min-height: 24rem; }
.v-groupe-actif { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

/* Le pseudo mène au profil. Discret dans la liste : le lien ne doit pas
   trahir l'alignement typographique, il ne se signale qu'au survol. */
.v-compte a, .v-detail-credits a { color: inherit; text-decoration: none; }
.v-compte a:hover, .v-detail-credits a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- Index de la veille : les sous-catégories --- */
.ve-entete, .ve-ligne {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr) 7rem 2rem;
    gap: 1rem;
    align-items: baseline;
}
.ve-entete { font-size: 1em; opacity: .45; margin: 0 0 .8rem; }
.ve-ligne {
    padding: .5rem 0;
    border-top: 1px solid rgba(0, 0, 0, .18);
    color: inherit;
    text-decoration: none;
    transition: opacity .18s ease;
}
.ve-ligne:last-child { border-bottom: 1px solid rgba(0, 0, 0, .18); }
/* Le geste de Haus Otto : tout s'efface sauf la ligne visée. */
.ve-liste:hover .ve-ligne { opacity: .3; }
.ve-liste .ve-ligne:hover { opacity: 1; }
.ve-titre { font-weight: 500; }
.ve-sous  { opacity: .55; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ve-nb    { text-align: right; font-variant-numeric: tabular-nums; opacity: .55; }
.ve-fleche { text-align: right; opacity: 0; transition: opacity .18s ease; }
.ve-ligne:hover .ve-fleche { opacity: 1; }
.ve-total { margin-top: 2rem; opacity: .45; }
@media (max-width: 800px) {
    .ve-entete { display: none; }
    .ve-ligne  { grid-template-columns: minmax(0, 1fr) 4rem; row-gap: .2rem; }
    .ve-sous   { grid-column: 1 / -1; white-space: normal; }
    .ve-fleche { display: none; }
}

/* --- Introduction de l'index des ressources ---
   Volontairement dans la DA de « mdma » : centrée, en Times, largeur de
   lecture réduite — un temps d'arrêt avant la grille serrée de la liste. */
.ve-index { max-width: 64rem; margin: 0 auto; }
.ve-intro {
    max-width: 42rem;
    margin: 0 auto 3.4rem;      /* elle ouvre la page : aucune marge au-dessus */
    text-align: center;
    font-family: var(--serif);
    font-size: 20px;
    line-height: 1.35;
}
.ve-intro h2 {
    font-weight: normal;
    font-size: 1.8rem;
    margin: 0 0 1.6rem;
    text-wrap: balance;
}
/* Le navigateur répartit les mots entre les lignes au lieu de laisser une
   dernière ligne orpheline — le sous-texte tient en deux lignes égales. */
.ve-intro p {
    margin: 0 auto;
    max-width: 34rem;
    /* « pretty » d'abord : si le navigateur connaît « balance », il écrase la
       première déclaration ; sinon elle sert de repli. L'ordre inverse
       annulerait l'équilibrage. */
    text-wrap: pretty;
    text-wrap: balance;
}
/* Sans couverture au-dessus, l'index a besoin d'un peu d'air en tête. */
body.tpl-page-veille .slides-body { padding-top: 4.5rem; }

/* --- Fiche d'une personne : renseignements et exemples --- */
.v-detail-fiche { margin: 0 0 .8rem; font-size: .85rem; opacity: .75; }
.v-detail-fiche a { color: var(--ink); }
.v-detail-notes { margin: 0 0 1rem; }
.v-exemples { margin-top: 1.2rem; }
.v-exemples-titre { margin: 0 0 .3rem; font-size: .85rem; opacity: .45; }
.v-exemples-liste { list-style: none; margin: 0; padding: 0; }
.v-exemples-liste li { padding: .06rem 0; }
.v-exemple {
    font: inherit;
    font-size: .9rem;
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    cursor: pointer;
    opacity: .55;
    transition: opacity .12s ease;
}
.v-exemple:hover { opacity: 1; }
/* L'exemple affiché à droite se signale par un filet, comme une ligne active. */
.v-exemple.est-actif {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- « des villes » : l'heure et le ciel sur place --- */
.fiche-ici {
    margin: 0 0 .9rem;
    font-size: .95rem;
    opacity: .62;
    font-variant-numeric: tabular-nums;
}
/* --- Le ciel étoilé, d'après l'écran hors-ligne de Plans ---
   Une nappe fixe derrière toute la page. Les étoiles sont posées par le script,
   leur style tient ici. */
.ciel {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
.ciel circle { fill: #fff; }
/* Tout le contenu passe devant le ciel. */
.villes-app { position: relative; z-index: 1; }

/* --- Le globe de nuit ---
   L'ivoire s'éteint en une ardoise bleutée, le graticule vire au vert d'eau et
   un limbe bleu cerne le disque : la DA de l'écran hors-ligne de Plans.

   Aucune transition CSS ici, volontairement. Mesuré : ce moteur n'exécute pas
   les transitions sur les éléments SVG — ni « fill » ni « opacity » — et laisse
   la propriété bloquée à sa valeur de départ. Le fondu est donc animé en script
   (voir fondu() dans globe.js), ce qui fonctionne partout. */
.globe-nuit  { fill: #2b2e34; opacity: 0; pointer-events: none; }
.globe-limbe { opacity: 0; }
.globe-lueur { opacity: 0; }
.globe-bord  { fill: none; stroke: #6fb0ff; stroke-width: 1.1; opacity: 0; }

/* Les valeurs statiques pilotées par la classe, elles, s'appliquent bien. */
.villes-app.est-nuit .graticule path { stroke: rgba(124, 168, 152, .40); }
/* Les calottes polaires : le bleu-violet de l'écran de Plans. Nuit seulement. */
.calottes { opacity: 0; }
.calotte-nord, .calotte-sud { fill: rgba(92, 106, 178, .55); stroke: none; }

/* --- « des villes » : le choix de la langue ---
   La capsule de verre des commandes flottantes de Plans, en haut à droite,
   et un menu déroulant du même verre. */
.langues {
    position: absolute;
    top: 1.1rem;
    right: 1.2rem;
    z-index: 5;
}
[dir="rtl"] .langues { right: auto; left: 1.2rem; }
.langue-bouton {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .85rem .5rem .75rem;
    border-radius: 999px;
    border: .5px solid rgba(255, 255, 255, .16);
    background: rgba(44, 44, 48, .62);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    color: #fff;
    font: inherit;
    font-size: .88rem;
    font-weight: 500;
    cursor: pointer;
}
.langue-bouton:hover { background: rgba(58, 58, 62, .72); }
.langue-bouton:focus-visible,
.langue-option:focus-visible { outline: 2px solid var(--bleu-ios); outline-offset: 2px; }
.langue-icone { color: var(--bleu-ios); flex: none; }
.langue-chevron { opacity: .6; flex: none; }
.langue-menu {
    position: absolute;
    top: calc(100% + .45rem);
    right: 0;
    min-width: 11rem;
    padding: .35rem;
    border-radius: 14px;
    border: .5px solid rgba(255, 255, 255, .16);
    background: rgba(36, 36, 40, .86);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
    display: flex;
    flex-direction: column;
}
[dir="rtl"] .langue-menu { right: auto; left: 0; }
.langue-menu[hidden] { display: none; }
.langue-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem .75rem;
    border: none;
    border-radius: 9px;
    background: none;
    color: #fff;
    font: inherit;
    font-size: .95rem;
    text-align: start;
    cursor: pointer;
}
.langue-option:hover { background: rgba(255, 255, 255, .08); }
/* La langue active porte la coche bleue d'iOS. */
.langue-option[aria-checked="true"]::after {
    content: '✓';
    color: var(--bleu-ios);
    font-weight: 600;
}
/* En arabe, le texte Wikipédia et l'interface passent de droite à gauche ;
   le reste de la page, centré, n'a pas à bouger. */
.fiche-texte[dir="rtl"] { text-align: right; }
.langue-code { display: none; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
@media (max-width: 600px) {
    .langues { top: .8rem; right: .8rem; }
    [dir="rtl"] .langues { left: .8rem; }
    .langue-bouton { padding: .42rem .6rem .42rem .55rem; font-size: .8rem; gap: .35rem; }
    .langue-nom { display: none; }
    .langue-code { display: inline; }
}
/* Le texte Wikipédia se centre pour les langues européennes, comme le reste de
   la page. Le japonais et le chinois gardent l'alignement de début de ligne,
   plus lisible pour des blocs de caractères ; l'arabe s'aligne à droite.
   C'est la langue de l'ARTICLE qui compte : un article anglais affiché faute
   de version portugaise se centre aussi. */
.fiche-texte:lang(fr), .fiche-texte:lang(en), .fiche-texte:lang(it),
.fiche-texte:lang(es), .fiche-texte:lang(de), .fiche-texte:lang(pt) {
    text-align: center;
    text-wrap: pretty;
}
.fiche-texte:lang(ja), .fiche-texte:lang(zh) { text-align: start; }
/* L'introduction garde ses retours à la ligne : quatre phrases sur deux
   paragraphes se lisent mieux qu'un bloc. */
.fiche-texte { white-space: pre-line; }

/* « des lectures » : le nombre qui défile (theme.js). Chiffres à chasse
   fixe et largeur réservée, pour que la phrase ne tressaille pas. */
.compteur {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* mdma en chinois — base typographique, quelle que soit la DA retenue :
   un Song (l'équivalent chinois du Times), un interligne plus aéré que pour
   le latin, et jamais d'italique (les caractères seraient penchés de force). */
:is(body.tpl-page-archive, body.tpl-page-articles) [lang="zh"] {
    font-family: "Songti SC", "STSong", "Noto Serif SC", "Noto Serif CJK SC", "SimSun", var(--serif);
    font-style: normal;
}
:is(body.tpl-page-archive, body.tpl-page-articles) .edition-body[lang="zh"] { line-height: 1.8; }
:is(body.tpl-page-archive, body.tpl-page-articles) .edition-body[lang="zh"] p { text-align: justify; }

/* En chinois, mdma prend les couleurs de la Cité interdite : le rouge sourd
   des murs du palais (宫墙红) et le jaune des tuiles vernissées (琉璃黄), couleur
   réservée à l'empereur. Même mécanique que la version anglaise : fond aussi
   sur <html>, fondu seulement au clic. */
html[data-lecture="zh"],
html[data-lecture="zh"] :is(body.tpl-page-archive, body.tpl-page-articles) { background: #8E2A20; color: #F3D9A6; }
html[data-lecture="zh"] :is(body.tpl-page-archive, body.tpl-page-articles) a,
html[data-lecture="zh"] :is(body.tpl-page-archive, body.tpl-page-articles) a:visited,
html[data-lecture="zh"] :is(body.tpl-page-archive, body.tpl-page-articles) .langue-bascule,
html[data-lecture="zh"] :is(body.tpl-page-archive, body.tpl-page-articles) .page-title,
html[data-lecture="zh"] :is(body.tpl-page-archive, body.tpl-page-articles) .edition-heading { color: #F2BE45; }
html[data-lecture="zh"] :is(body.tpl-page-archive, body.tpl-page-articles) .edition-meta { color: rgba(243, 217, 166, .75); }
html[data-lecture="zh"] :is(body.tpl-page-archive, body.tpl-page-articles) .edition-full { border-bottom-color: #F2BE45; }
html[data-lecture="zh"] :is(body.tpl-page-archive, body.tpl-page-articles) hr { border-top-color: #F2BE45; }
html[data-lecture="zh"] :is(body.tpl-page-archive, body.tpl-page-articles) blockquote { border-left-color: #F2BE45; color: rgba(243, 217, 166, .8); }
html[data-lecture="zh"] :is(body.tpl-page-archive, body.tpl-page-articles) ::selection { background: #F2BE45; color: #8E2A20; }
/* Une rangée de tuiles jaunes, comme l'avant-toit d'un pavillon du palais,
   entre l'en-tête et le sommaire. */
html[data-lecture="zh"] :is(body.tpl-page-archive, body.tpl-page-articles) .langue-bascule-ligne::after {
    content: "";
    display: block;
    height: 12px;
    margin-top: 1.6rem;
    background: repeating-linear-gradient(90deg, #F2BE45 0 9px, #D69E2E 9px 11px);
    border-bottom: 3px solid #5a1a14;
}

/* Un titre d'un seul mot très long (« chambondondisonbondibondon ») déborderait
   d'un écran de téléphone : on l'autorise à se couper. */
body.tpl-page-archive .edition-heading,
body.tpl-page-archive .archive-index a { overflow-wrap: anywhere; }

/* ==========================================================================
   Page « des tableaux » — un musée numérique, d'après a24.raviklaassens.com :
   fond gris grainé, PP Eiko pour les œuvres, PP Neue Montreal pour les
   textes, crédits en tableau à filets fins, pastille de navigation en bas.
   Ordinateur : le texte à gauche, l'œuvre à droite, tout dans un écran.
   Téléphone : l'œuvre, puis le titre, les crédits et le cartel.
   ========================================================================== */
@font-face { font-family: "PP Eiko"; src: url("fonts/PPEiko-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "PP Eiko"; src: url("fonts/PPEiko-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "PP Eiko"; src: url("fonts/PPEiko-LightItalic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "PP Neue Montreal"; src: url("fonts/PPNeueMontreal-Book.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "PP Neue Montreal"; src: url("fonts/PPNeueMontreal-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "PP Neue Montreal"; src: url("fonts/PPNeueMontreal-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

body.tpl-page-tableaux,
body.tpl-page-eventail {
    --tb-fond: #F2F2F2;
    --tb-encre: #000;
    --tb-eiko: "PP Eiko", "Times New Roman", serif;
    --tb-sans: "PP Neue Montreal", "Helvetica Neue", Arial, sans-serif;
    --tb-carte: #fff;           /* pastille, menus, index */
    --tb-filet: rgba(0, 0, 0, .15);
    --tb-filet-fort: rgba(0, 0, 0, .25);
    --tb-survol: rgba(0, 0, 0, .05);
    --tb-entete: 3rem;          /* hauteur de l'en-tête */
    --tb-pied: 5.2rem;          /* place réservée à la pastille */
    background-color: var(--tb-fond);
    /* Le grain du papier : un bruit très léger, en SVG, sans image à charger. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    color: var(--tb-encre);
    font-family: var(--tb-sans);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: -0.025em;
    -webkit-font-smoothing: antialiased;
}
body.tpl-page-tableaux .wrap,
body.tpl-page-eventail .wrap { max-width: none; padding: 0; }
body.tpl-page-tableaux a,
body.tpl-page-eventail a { color: inherit; }

/* --- L'en-tête --------------------------------------------------------------- */
.tb-entete {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 1.6rem;
    height: var(--tb-entete);
    padding: 0 1.1rem;
    background: var(--tb-fond);
    border-bottom: 1px solid var(--tb-filet);
}
.tb-entete-nom {
    margin: 0;
    font-family: var(--tb-eiko);
    font-weight: 400;
    font-size: 1.25rem;
    letter-spacing: -0.03em;
    white-space: nowrap;
}
.tb-maison, .tb-maison:visited {
    margin-left: auto;
    font-size: .8rem;
    text-decoration: none;
    white-space: nowrap;
}
.tb-maison:hover { text-decoration: underline; text-underline-offset: 3px; }
.tb-maison-mobile { display: none; }
.tb-nuit {
    font: inherit;
    letter-spacing: inherit;
    font-size: .8rem;
    color: var(--tb-encre);
    background: none;
    border: 0;
    padding: .2rem .1rem;
    margin-left: auto;
    cursor: pointer;
    opacity: .55;
    transition: opacity .15s;
    display: inline-flex;
    align-items: center;
}
/* La lampe de tableau : éteinte le jour, elle projette son faisceau la nuit. */
.tb-lampe { display: block; overflow: visible; width: 27px; height: 25px; }
.tb-lampe-bras, .tb-lampe-capot { stroke: currentColor; fill: none; opacity: .6; }
.tb-lampe-cadre { stroke: currentColor; fill: none; opacity: .38; }
.tb-lampe-toile { fill: currentColor; opacity: .12; transition: opacity .45s ease; }
.tb-lampe-faisceau { opacity: 0; transition: opacity .45s ease; }
html[data-nuit] .tb-lampe-faisceau { opacity: .75; }
html[data-nuit] .tb-lampe-toile { opacity: .32; }
.tb-nuit + .tb-maison { margin-left: 1.2rem; }
.tb-nuit:hover { opacity: 1; }
.tb-nuit[hidden] { display: none; }
.tb-nuit-mobile { display: none; }
.tb-pied-panneau { display: flex; align-items: baseline; gap: 1.2rem; margin: .2rem 0 0; }
.tb-fleur { display: none; }

.tb-filtres { display: flex; align-items: center; gap: .3rem; }
.tb-filtres[hidden], .tb-filtres-bouton[hidden] { display: none; }
.tb-menu { position: relative; }
.tb-menu-bouton, .tb-filtres-bouton {
    font: inherit;
    letter-spacing: inherit;
    color: var(--tb-encre);
    background: none;
    border: 0;
    padding: .35rem .55rem;
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    cursor: pointer;
    font-size: .85rem;
}
/* Le bouton « filtres » n'existe que sur téléphone. */
@media (min-width: 801px) { .tb-filtres-bouton { display: none !important; } }
.tb-menu-lib { opacity: .55; transition: opacity .15s; }
.tb-menu-bouton:hover .tb-menu-lib,
.tb-menu.est-ouvert .tb-menu-lib,
.tb-menu.est-actif .tb-menu-lib { opacity: 1; }
.tb-menu.est-actif .tb-menu-lib::after { content: " :"; }
.tb-menu-val:empty { display: none; }
.tb-chevron { display: inline-block; font-size: .75em; transition: transform .2s; opacity: .55; }
.tb-menu.est-ouvert .tb-chevron { transform: rotate(180deg); }

/* Le menu coulisse sous son bouton. */
.tb-menu-liste {
    position: absolute;
    top: calc(100% + .45rem);
    left: 0;
    min-width: 14rem;
    max-height: min(60vh, 26rem);
    overflow-y: auto;
    padding: .35rem;
    display: flex;
    flex-direction: column;
    background: var(--tb-carte);
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 14px 40px rgba(0, 0, 0, .12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-.5rem);
    transition: opacity .18s ease, transform .22s ease, visibility .22s;
}
.tb-menu.est-ouvert .tb-menu-liste { opacity: 1; visibility: visible; transform: none; }
.tb-menu-liste button {
    font: inherit;
    letter-spacing: inherit;
    font-size: .85rem;
    text-align: left;
    color: var(--tb-encre);
    background: none;
    border: 0;
    border-radius: 2px;
    padding: .42rem .6rem;
    display: flex;
    justify-content: space-between;
    gap: 1.2rem;
    cursor: pointer;
    white-space: nowrap;
}
.tb-menu-liste button:hover { background: var(--tb-survol); }
.tb-menu-liste button[aria-checked="true"] { background: var(--tb-encre); color: var(--tb-fond); }
.tb-option-nb { opacity: .5; font-weight: 400; }
.tb-lien {
    font: inherit; letter-spacing: inherit; color: inherit; font-size: .8rem;
    background: none; border: 0; padding: .35rem .55rem;
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.tb-lien[hidden] { display: none; }
.tb-compte { margin: 0 0 0 .3rem; font-size: .8rem; font-weight: 400; opacity: .6; white-space: nowrap; }
.tb-compte:empty { display: none; }

/* --- L'écran de chargement --------------------------------------------------- */
.tb-chargement { display: none; }
html.tb-js .tb-chargement {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: inherit;
    background-color: var(--tb-fond);
    transition: opacity .8s ease, visibility .8s;
    cursor: pointer;
}
html.tb-ouvert .tb-chargement { opacity: 0; visibility: hidden; }
.tb-chargement-titre {
    margin: 0;
    font-family: var(--tb-eiko);
    font-weight: 400;
    font-size: clamp(3rem, 9vw, 8rem);
    letter-spacing: -0.04em;
    line-height: 1;
}
.tb-chargement-compte {
    position: absolute;
    bottom: 1.6rem;
    left: 0; right: 0;
    margin: 0;
    text-align: center;
    font-size: .85rem;
}
.tb-chargement-compte .compteur { font-variant-numeric: tabular-nums; }

/* --- La salle : le texte à gauche, l'œuvre à droite, tout dans l'écran ---------- */
.tableaux-salle { padding: 0; }
.tb {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(17rem, 23rem) 1fr;
    gap: 2.4rem;
    padding: 1.1rem 1.1rem 0;
    border-bottom: 1px solid var(--tb-filet);   /* sans JavaScript, les tableaux se suivent */
}
/* Avec JavaScript : un seul tableau à la fois, en fondu, à la hauteur de l'écran. */
html.tb-js .tb { display: none; border-bottom: 0; height: calc(100vh - var(--tb-entete)); height: calc(100svh - var(--tb-entete)); }
html.tb-js .tb.est-visible { display: grid; animation: tb-fondu .45s ease both; }
@keyframes tb-fondu { from { opacity: 0; } to { opacity: 1; } }

/* La colonne de texte défile d'elle-même si un cartel est très long :
   la page, elle, reste à la hauteur de l'écran. */
.cartel {
    min-height: 0;
    overflow-y: auto;
    padding-bottom: var(--tb-pied);
    scrollbar-width: none;
}
.cartel::-webkit-scrollbar { display: none; }

.tb-titre {
    margin: 0 0 .9rem;
    font-family: var(--tb-eiko);
    font-weight: 400;
    font-size: clamp(1.6rem, 2.3vw, 2.5rem);
    line-height: 1;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

/* Les crédits : libellés en capitales espacées à gauche, valeurs à droite, filets fins. */
.tb-credits { margin: 0; border-top: 1px solid var(--tb-encre); }
.tb-credits > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.2rem;
    padding: .3rem 0 .26rem;
    border-bottom: 1px solid var(--tb-encre);
}
/* Les libellés en PP Eiko Black, en minuscules. */
.tb-credits dt {
    flex: none;
    font-family: var(--tb-eiko);
    font-size: .82rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    text-transform: lowercase;
}
.tb-credits dd { margin: 0; text-align: right; font-size: .82rem; line-height: 1.3; }
.tb-etiquette {
    font: inherit; letter-spacing: inherit; color: inherit;
    background: none; border: 0; padding: 0;
    cursor: pointer; text-align: right;
}
.tb-etiquette:hover { text-decoration: underline; text-underline-offset: 3px; }

.cartel-texte {
    margin-top: 1rem;
    font-weight: 400;
    font-size: .8rem;
    line-height: 1.42;
    letter-spacing: -0.01em;
}
.cartel-texte p { margin: 0 0 .6rem; }
/* Au-delà de deux paragraphes, le cartel se replie (tableaux.js). */
.cartel-texte.est-replie > p:nth-of-type(n+3) { display: none; }
.cartel-texte.est-replie > p:nth-of-type(2)::after { content: " …"; }
.cartel-plus {
    font: inherit; letter-spacing: inherit; color: inherit;
    background: none; border: 0; padding: 0; margin: .1rem 0 0;
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.cartel-plus:hover { text-decoration: none; }
.cartel-liens { margin: .8rem 0 0; font-size: .8rem; }
.cartel-liens a { text-decoration: underline; text-underline-offset: 3px; }
.cartel-liens a:hover { text-decoration: none; }
.cartel-liens .sep { opacity: .5; }
.cartel-credit { margin: .7rem 0 0; font-size: .65rem; font-weight: 400; opacity: .55; }

/* L'œuvre, centrée dans l'espace de droite, au-dessus de la pastille. */
.tb-mur {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding-bottom: var(--tb-pied);
}
.tb-mur img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 22px 50px rgba(0, 0, 0, .16);
}
/* Sans JavaScript, pas de hauteur d'écran imposée : on borne l'image. */
html:not(.tb-js) .tb-mur img { max-height: 80vh; }

/* --- La pastille ----------------------------------------------------------------- */
.tb-pastille {
    position: fixed;
    left: 50%;
    bottom: 1.2rem;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: .2rem;
    padding: .45rem .55rem;
    background: var(--tb-carte);
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .08);
    white-space: nowrap;
}
.tb-pastille[hidden] { display: none; }
.tb-pastille button {
    font: inherit;
    letter-spacing: inherit;
    color: var(--tb-encre);
    background: none;
    border: 0;
    padding: .25rem .6rem;
    cursor: pointer;
    opacity: .55;
    transition: opacity .15s;
}
.tb-pastille button:hover,
.tb-pastille button.est-ouvert { opacity: 1; }
.tb-pastille button.est-ouvert .tb-chevron { transform: rotate(180deg); }

/* --- L'index, au-dessus de la pastille -------------------------------------------- */
.tb-index { display: none; }
html.tb-js .tb-index:not([hidden]) {
    display: block;
    position: fixed;
    left: 50%;
    bottom: 4.4rem;
    transform: translateX(-50%);
    z-index: 19;
    width: min(40rem, calc(100vw - 2rem));
    max-height: min(65vh, 36rem);
    overflow-y: auto;
    padding: .8rem 1.1rem 1rem;
    background: var(--tb-carte);
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 14px 40px rgba(0, 0, 0, .12);
    animation: tb-fondu .2s ease both;
}
html:not(.tb-js) .tb-index { display: block; padding: 1.1rem; }
.tb-index ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tb-encre); }
.tb-index li { border-bottom: 1px solid var(--tb-filet); }
.tb-index li[hidden] { display: none; }
.tb-index a {
    display: grid;
    grid-template-columns: 11rem 1fr auto;
    gap: 1rem;
    padding: .45rem 0;
    text-decoration: none;
    font-size: .85rem;
}
.tb-index a:hover .tb-index-titre { text-decoration: underline; text-underline-offset: 3px; }
.tb-index-titre { font-family: var(--tb-eiko); font-size: 1.05rem; letter-spacing: -0.02em; line-height: 1.15; }
.tb-index-date { opacity: .6; font-weight: 400; }
.tb-vide { margin: 1rem 0 0; opacity: .6; font-weight: 400; }

/* --- Téléphone ------------------------------------------------------------------------
   L'œuvre d'abord, en pleine largeur ; puis le titre, les crédits, le cartel.
   Les filtres se replient derrière « filtres » et coulissent depuis le haut. */
@media (max-width: 800px) {
    html.tb-js .tb { height: auto; }
    .tb { grid-template-columns: 1fr; gap: 1.3rem; padding: 1rem 1rem 0; }
    .tb-mur { order: -1; padding-bottom: 0; }
    .tb-mur img { max-height: 58vh; max-height: 58svh; }
    .cartel { overflow: visible; padding-bottom: 6.5rem; }
    .tb-titre { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
    .tb-credits dd { font-size: .85rem; }
    .cartel-texte { font-size: .88rem; }

    .tb-entete { gap: .8rem; }
    .tb-fleur {
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        line-height: 0;
        padding: .3rem;             /* zone de toucher plus large que l'image */
    }
    .tb-fleur img { width: 1.7rem; height: 1.7rem; }
    .tb-fleur:active img { transform: scale(.9); }
    .tb-entete > .tb-maison { display: none; }
    .tb-filtres-bouton { display: inline-flex; margin-left: auto; }
    .tb-filtres {
        position: absolute;
        top: 100%;
        left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 1.1rem;
        padding: 1rem 1rem 1.3rem;
        background: var(--tb-fond);
        border-bottom: 1px solid var(--tb-filet);
        box-shadow: 0 18px 30px rgba(0, 0, 0, .08);
        max-height: calc(100svh - var(--tb-entete));
        overflow-y: auto;
        /* Replié : il remonte sous l'en-tête. */
        transform: translateY(-.8rem);
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease, transform .25s ease, visibility .25s;
    }
    html:not(.tb-filtres-ouverts) .tb-filtres { pointer-events: none; }
    html.tb-filtres-ouverts .tb-filtres { transform: none; opacity: 1; visibility: visible; }
    /* Dans le panneau, chaque catégorie montre ses options en pastilles. */
    .tb-menu-bouton { padding: 0 0 .45rem; pointer-events: none; }
    .tb-menu-bouton .tb-chevron, .tb-menu-val { display: none; }
    .tb-menu-lib { opacity: 1 !important; font-size: .55rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; }
    .tb-menu.est-actif .tb-menu-lib::after { content: ""; }
    /* Les options héritent de la visibilité du panneau : replié, rien ne doit
       rester touchable (des options invisibles captaient les touchers). */
    .tb-menu-liste {
        position: static;
        opacity: 1; visibility: inherit; transform: none;
        flex-direction: row; flex-wrap: wrap; gap: .35rem;
        padding: 0; min-width: 0; max-height: none;
        background: none; box-shadow: none;
    }
    .tb-menu-liste button { border: 1px solid var(--tb-filet-fort); padding: .35rem .6rem; gap: .4rem; }
    .tb-lien { align-self: flex-start; padding: 0; }
    .tb-compte { margin: 0; }
    .tb-maison-mobile { display: block; opacity: .6; }
    .tb-entete > .tb-nuit { display: none; }
    .tb-nuit-mobile { display: inline-flex; margin-left: 0; opacity: .85; }

    .tb-index a { grid-template-columns: 1fr auto; }
    .tb-index-artiste { grid-column: 1 / -1; opacity: .6; font-weight: 400; }

    .tb-pastille { max-width: calc(100vw - 1.4rem); }
}
@media (prefers-reduced-motion: reduce) {
    html.tb-js .tb.est-visible, html.tb-js .tb-index:not([hidden]) { animation: none; }
    .tb-menu-liste, .tb-filtres { transition: none; }
}

/* --------------------------------------------------------------------------
   « des tableaux », mode nuit — la salle s'éteint, les œuvres restent
   éclairées. Par défaut, le réglage du système ; le bouton de l'en-tête
   force l'un ou l'autre et le navigateur s'en souvient (tableaux.js).
   -------------------------------------------------------------------------- */
html[data-nuit] body.tpl-page-tableaux,
html[data-nuit] body.tpl-page-eventail {
    --tb-fond: #121110;          /* un noir chaud, pas un noir d'encre */
    --tb-encre: #EFEAE1;
    --tb-carte: #1E1B19;
    --tb-filet: rgba(255, 255, 255, .16);
    --tb-filet-fort: rgba(255, 255, 255, .32);
    --tb-survol: rgba(255, 255, 255, .08);
    color-scheme: dark;
    /* Le grain s'inverse : des points clairs sur le fond sombre. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
/* L'œuvre est éclairée : une ombre portée plus profonde et un halo tiède,
   comme un projecteur de salle. */
html[data-nuit] .tb-mur img {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .07),
                0 24px 60px rgba(0, 0, 0, .65),
                0 0 110px rgba(255, 234, 199, .10);
}
html[data-nuit] .tb-pastille,
html[data-nuit] .tb-menu-liste,
html[data-nuit] .tb-index:not([hidden]) {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 14px 40px rgba(0, 0, 0, .55);
}
html[data-nuit] body.tpl-page-tableaux ::selection,
html[data-nuit] body.tpl-page-eventail ::selection { background: var(--tb-encre); color: var(--tb-fond); }

/* La frise chronologique de l'en-tête : un point par tableau, à sa date.
   Le point éclairé est celui qu'on regarde ; un clic ouvre le tableau.
   Les filtres estompent ce qui sort de la sélection. Ordinateur seulement. */
.tb-frise {
    position: relative;
    flex: 1;
    align-self: stretch;
    max-width: 34rem;
    margin: 0 auto;
    min-width: 12rem;
}
.tb-frise[hidden] { display: none; }
.tb-frise-rail {
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 1px;
    background: var(--tb-filet);
}
.tb-frise-point {
    position: absolute;
    top: 50%;
    width: 3px; height: 3px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: currentColor;
    opacity: .35;
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: opacity .2s, transform .2s, background-color .3s, box-shadow .3s;
}
.tb-frise-point::after {          /* zone de clic confortable, invisible */
    content: "";
    position: absolute;
    inset: -9px -5px;
}
.tb-frise-point:hover, .tb-frise-point:focus-visible { opacity: .95; transform: translate(-50%, -50%) scale(1.9); }
.tb-frise-point.est-hors { opacity: .1; pointer-events: none; }
.tb-frise-point.est-ici {
    opacity: 1;
    width: 7px; height: 7px;
    background: #B8860B;
}
html[data-nuit] .tb-frise-point.est-ici {
    background: #FFD9A0;
    box-shadow: 0 0 10px rgba(255, 234, 199, .7);
}
.tb-frise-etiquette {
    position: absolute;
    top: 50%;
    margin-top: -1.35rem;
    transform: translateX(-50%);
    font-size: .68rem;
    white-space: nowrap;
    opacity: .85;
}
.tb-frise-bornes {
    position: absolute;
    left: 0; right: 0; top: 50%;
    margin-top: .5rem;
    display: flex;
    justify-content: space-between;
    font-size: .6rem;
    letter-spacing: .1em;
    opacity: .4;
}
/* Le survol d'un point : la vignette du tableau, son titre, l'artiste et la
   date, dans une petite carte suspendue sous l'en-tête. La carte glisse d'un
   point à l'autre (tableaux.js). */
.tb-frise-apercu {
    position: absolute;
    left: 0;
    top: calc(100% + .75rem);
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: min-content;
    min-width: 8rem;
    padding: .4rem .4rem .6rem;
    background: var(--tb-carte);
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 14px 40px rgba(0, 0, 0, .16);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    translate: 0 -.35rem;
    transition: opacity .16s ease, translate .22s ease, visibility .22s;
}
.tb-frise-apercu::before {        /* la pointe, à l'aplomb du point */
    content: "";
    position: absolute;
    top: -4px;
    left: var(--pointe, 50%);
    width: 8px; height: 8px;
    background: var(--tb-carte);
    transform: translateX(-50%) rotate(45deg);
}
.tb-frise-apercu.est-visible { opacity: 1; visibility: visible; translate: none; }
.tb-frise-apercu.est-glisse {
    transition: opacity .16s ease, translate .22s ease, visibility .22s,
                transform .28s cubic-bezier(.2, .7, .2, 1);
}
.tb-frise-apercu-cadre {
    position: relative;
    display: block;
    height: 9.5rem;
    min-width: 7.2rem;
    background: var(--tb-survol);
}
.tb-frise-apercu-cadre img {
    display: block;
    height: 100%;
    width: auto;
    max-width: 16rem;
    object-fit: cover;
    transition: opacity .2s ease;
}
.tb-frise-apercu-cadre img:not([src]) { visibility: hidden; }
.tb-frise-apercu.est-attente img { opacity: .3; }
.tb-frise-apercu.est-attente .tb-frise-apercu-cadre { animation: tb-apercu-attente 1.1s ease-in-out infinite alternate; }
@keyframes tb-apercu-attente { to { background-color: var(--tb-filet); } }
.tb-frise-apercu-titre {
    margin-top: .55rem;
    font-family: var(--tb-eiko);
    font-size: .95rem;
    line-height: 1.12;
    letter-spacing: -.02em;
}
.tb-frise-apercu-qui {
    margin-top: .25rem;
    font-size: .66rem;
    line-height: 1.3;
    opacity: .6;
}
html[data-nuit] .tb-frise-apercu { box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 14px 40px rgba(0, 0, 0, .6); }
@media (prefers-reduced-motion: reduce) {
    .tb-frise-apercu, .tb-frise-apercu.est-glisse { transition: opacity .16s ease, visibility .16s; translate: none; }
    .tb-frise-apercu.est-attente .tb-frise-apercu-cadre { animation: none; }
}
@media (max-width: 1100px) { .tb-frise-etiquette, .tb-frise-bornes { display: none; } }
@media (max-width: 800px) { .tb-frise { display: none; } }

/* ==========================================================================
   Page « éventail d'inspirations » — les trouvailles de la semaine.
   Même DA que « des tableaux » : le socle (couleurs, polices, en-tête,
   pastille) est partagé ; ne s'ajoutent ici que l'index des semaines et la
   présentation d'une planche.
   ========================================================================== */
.ev-entete-semaine { margin: 0; font-size: .85rem; }
.ev-entete-periode { opacity: .5; margin-left: .5rem; }
.ev-retour, .ev-retour:visited { margin-left: auto; font-size: .8rem; text-decoration: underline; text-underline-offset: 3px; }
.ev-retour + .tb-maison { margin-left: 1.4rem; }

/* --- L'index des semaines --- */
.ev-index { max-width: 52rem; margin: 0 auto; padding: 3rem 1.1rem 6rem; }
.ev-intro {
    font-family: var(--tb-eiko);
    font-weight: 400;
    font-size: clamp(1.4rem, 2.6vw, 2.1rem);
    line-height: 1.15;
    letter-spacing: -.03em;
    text-align: center;
    text-wrap: balance;
    margin: 0 0 3rem;
}
.ev-intro p { margin: 0 0 .4rem; }
.ev-semaines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tb-filet); }
.ev-semaine { border-bottom: 1px solid var(--tb-filet); }
.ev-semaine > a, .ev-semaine > span {
    display: grid;
    grid-template-columns: 13.5rem 11rem 1fr auto;
    gap: 1.2rem;
    align-items: baseline;
    padding: .7rem .2rem;
    text-decoration: none;
    transition: background-color .15s;
}
.ev-semaine > a:hover { background: var(--tb-survol); }
.ev-numero { font-family: var(--tb-eiko); font-size: 1.25rem; letter-spacing: -.03em; white-space: nowrap; }
.ev-periode, .ev-nb { font-size: .8rem; opacity: .55; }
.ev-titre { font-size: .9rem; }
.ev-semaine.est-vide > span { opacity: .38; }
/* La semaine en cours porte une pastille discrète. */
.ev-semaine.est-ici .ev-numero::after {
    content: "cette semaine";
    font-family: var(--tb-sans);
    font-size: .58rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-left: .6rem;
    padding: .12rem .4rem;
    border: 1px solid var(--tb-filet-fort);
    border-radius: 999px;
    vertical-align: .15em;
    white-space: nowrap;
}

/* --- La présentation : une planche par écran --- */
.ev-planche {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(17rem, 23rem) 1fr;
    gap: 2.4rem;
    padding: 1.1rem 1.1rem 0;
    border-bottom: 1px solid var(--tb-filet);   /* sans JavaScript, elles se suivent */
}
html.tb-js .ev-planche { display: none; border-bottom: 0; height: calc(100vh - var(--tb-entete)); height: calc(100svh - var(--tb-entete)); }
html.tb-js .ev-planche.est-visible { display: grid; animation: tb-fondu .4s ease both; }
.ev-compte { margin: 0 0 .6rem; font-size: .6rem; letter-spacing: .2em; opacity: .45; }
.ev-planche .cartel { display: flex; flex-direction: column; }
.ev-planche .cartel-texte { font-size: .88rem; margin-top: .4rem; }

/* La jauge : un segment par planche, ceux déjà vus sont pleins. */
.ev-jauge {
    position: fixed;
    left: 50%;
    bottom: 4.6rem;
    transform: translateX(-50%);
    z-index: 19;
    display: flex;
    gap: 3px;
    width: min(26rem, calc(100vw - 3rem));
}
.ev-jauge[hidden] { display: none; }
.ev-jauge-pas {
    flex: 1;
    height: 2px;
    padding: 0;
    border: 0;
    background: var(--tb-filet-fort);
    cursor: pointer;
    position: relative;
    transition: background-color .25s;
}
.ev-jauge-pas::after { content: ""; position: absolute; inset: -10px 0; }   /* zone de clic */
.ev-jauge-pas.est-passe { background: var(--tb-encre); }
.ev-pastille-compte { font-size: .78rem; opacity: .5; padding: 0 .6rem 0 .3rem; font-variant-numeric: tabular-nums; }

@media (max-width: 800px) {
    .ev-index { padding: 2rem 1rem 5rem; }
    .ev-semaine > a, .ev-semaine > span { grid-template-columns: 1fr auto; gap: .2rem .8rem; }
    .ev-periode { grid-column: 1; }
    .ev-titre { grid-column: 1 / -1; }
    .ev-entete-periode, .ev-retour { display: none; }
    html.tb-js .ev-planche { height: auto; }
    .ev-planche { grid-template-columns: 1fr; gap: 1.2rem; padding: 1rem 1rem 7rem; }
    .ev-planche .tb-mur { order: -1; padding-bottom: 0; }
    .ev-planche .tb-mur img { max-height: 58vh; max-height: 58svh; }
    .ev-jauge { bottom: 4.2rem; }
}

/* Le volet des semaines à venir : replié par défaut, il s'ouvre de lui-même
   dès qu'une semaine y est préparée. */
.ev-avenir { margin: 0 0 1.6rem; }
.ev-avenir summary {
    list-style: none;
    cursor: pointer;
    padding: .5rem .2rem;
    font-size: .8rem;
    opacity: .55;
    border-bottom: 1px solid var(--tb-filet);
    transition: opacity .15s;
}
.ev-avenir summary::-webkit-details-marker { display: none; }
.ev-avenir summary::before { content: "▸ "; display: inline-block; transition: transform .2s; }
.ev-avenir[open] summary::before { transform: rotate(90deg); }
.ev-avenir summary:hover { opacity: 1; }
.ev-avenir-prets { opacity: .8; }
.ev-semaines-avenir { border-top: 0; margin-bottom: 1.6rem; }
/* Une semaine à venir encore vide s'efface davantage : elle attend son tour. */
.ev-semaines-avenir .ev-semaine.est-vide > span { opacity: .28; }

/* --- La planche d'ouverture : le compte à rebours, puis la mise au point ---
   Le numéro de la semaine grimpe en grand au centre, file se ranger dans le
   coin, et le still apparaît flou avant de se faire net. Le V de Views se
   trace au trait, et se retrace toutes les 30 secondes (eventail.js). */
.ev-ouverture {
    position: relative;
    display: block;
    padding: 0;
    overflow: hidden;
    background: #0d0d0d;
    color: #F2EFE8;
    border-bottom: 0;
}
html.tb-js .ev-ouverture.est-visible { display: block; }
.ev-still {
    position: absolute;
    inset: 0;
    background: center / cover no-repeat;
    filter: blur(20px) saturate(.65);
    transform: scale(1.08);
    opacity: 0;
}
.ev-still-video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.ev-voile {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.2) 45%, rgba(0,0,0,.7));
    opacity: 0;
    transition: opacity .9s ease;
}
/* Le numéro, plein écran. */
.ev-gros {
    position: absolute;
    inset: 0;
    margin: 0;
    display: grid;
    place-items: center;
    font-family: var(--tb-eiko);
    font-size: clamp(4rem, 16vw, 13rem);
    letter-spacing: -.05em;
    font-variant-numeric: tabular-nums;
    color: #F2EFE8;
}
.ev-coin-semaine {
    position: absolute;
    left: 5%;
    top: 7%;
    margin: 0;
    font-family: var(--tb-eiko);
    font-size: clamp(1rem, 1.7vw, 1.35rem);
    opacity: 0;
}
.ev-coin-semaine b { font-weight: 400; font-variant-numeric: tabular-nums; }
.ev-coin-logo { position: absolute; right: 5%; top: 6.5%; width: clamp(3.4rem, 7vw, 5.6rem); opacity: 0; }
.ev-v { display: block; width: 100%; height: auto; }
.ev-v-trait { fill: none; stroke: currentColor; stroke-width: 2.9; stroke-linejoin: miter; }

.ev-ouverture-texte { position: absolute; left: 5%; right: 5%; bottom: 13%; }
.ev-ouverture-titre {
    font-family: var(--tb-eiko);
    font-weight: 400;
    font-size: clamp(1.8rem, 5vw, 4rem);
    line-height: 1;
    letter-spacing: -.04em;
    margin: 0 0 .6rem;
}
.ev-ouverture-sous { margin: 0; font-size: clamp(.8rem, 1.15vw, 1rem); font-weight: 400; max-width: 34ch; opacity: .92; }
.ev-masque { display: block; overflow: hidden; }
.ev-masque > span { display: block; transform: translateY(110%); }
.ev-credit-film {
    position: absolute;
    right: 5%;
    bottom: 2.5%;
    margin: 0;
    font-size: .58rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: 0;
}
/* Sur téléphone, une planche prend la hauteur de son contenu ; l'ouverture
   (et la clôture) n'a que des calques posés en absolu : elle garde l'écran.
   Le crédit du film quitte le bas, où passe la pastille, pour se ranger sous
   le numéro de la semaine. */
@media (max-width: 800px) {
    html.tb-js .ev-ouverture { height: calc(100vh - var(--tb-entete)); height: calc(100svh - var(--tb-entete)); }
    .ev-ouverture .ev-credit-film { left: 5%; right: 5%; bottom: auto; top: calc(7% + 2.5rem); }
}

/* Le déroulé, lancé par eventail.js (classe « est-lancee »). */
.ev-ouverture.est-lancee .ev-gros { animation: ev-range .9s cubic-bezier(.5,0,.2,1) 1.5s forwards; }
@keyframes ev-range { to { opacity: 0; transform: scale(.14) translate(-230%, -190%); } }
.ev-ouverture.est-lancee .ev-still { animation: ev-point 2.2s cubic-bezier(.3,.8,.2,1) 1.7s forwards; }
@keyframes ev-point { 0% { opacity: 0 } 25% { opacity: 1 } 100% { opacity: 1; filter: blur(0) saturate(1); transform: none } }
.ev-ouverture.est-lancee .ev-voile { opacity: 1; transition-delay: 1.9s; }
.ev-ouverture.est-lancee .ev-coin-semaine,
.ev-ouverture.est-lancee .ev-coin-logo { animation: ev-parait .8s ease 2.4s forwards; }
.ev-ouverture.est-lancee .ev-credit-film { animation: ev-parait .8s ease 3.4s forwards; }
@keyframes ev-parait { to { opacity: 1; } }
.ev-ouverture.est-lancee .ev-masque > span { animation: ev-monte 1s cubic-bezier(.2,.8,.2,1) 2.9s forwards; }
.ev-ouverture.est-lancee .ev-masque.d2 > span { animation-delay: 3.05s; }
.ev-ouverture.est-lancee .ev-masque.d3 > span { animation-delay: 3.2s; }
@keyframes ev-monte { to { transform: none; } }
/* Le tracé du V : au lancement, puis toutes les 30 secondes. */
.ev-ouverture.est-lancee .ev-v-trait {
    stroke-dasharray: 430;
    animation: ev-trace 30s linear 2.4s infinite;
}
@keyframes ev-trace {
    0%   { stroke-dashoffset: 430; }
    6%   { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .ev-ouverture.est-lancee .ev-gros { animation: none; opacity: 0; }
    .ev-ouverture.est-lancee .ev-still { animation: none; opacity: 1; filter: none; transform: none; }
    .ev-ouverture.est-lancee .ev-masque > span,
    .ev-ouverture.est-lancee .ev-coin-semaine,
    .ev-ouverture.est-lancee .ev-coin-logo,
    .ev-ouverture.est-lancee .ev-credit-film { animation: none; opacity: 1; transform: none; }
    .ev-ouverture.est-lancee .ev-v-trait { animation: none; }
}

/* --- La bascule jour / nuit de l'éventail : une lampe de banquier ---
   Éteinte le jour, dessinée au trait. La nuit, son dôme vert s'allume et
   pose une flaque de lumière chaude sur le bureau. */
.ev-banquier { display: block; overflow: visible; width: 29px; height: 26px; }
.ev-banquier-dome {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.3;
    transition: fill .45s ease, stroke .45s ease;
}
.ev-banquier-tige, .ev-banquier-chainette {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.2;
    stroke-linecap: round;
    opacity: .6;
}
.ev-banquier-socle { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: .6; }
.ev-banquier-perle { fill: currentColor; opacity: .5; transition: transform .25s cubic-bezier(.3,1.4,.5,1); transform-origin: 27.5px 23.2px; }
.ev-banquier-reflet { fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; opacity: 0; transition: opacity .45s ease; }
.ev-banquier-flaque { fill: url(#ev-lueur); opacity: 0; transition: opacity .5s ease; }
/* On tire sur la chaînette au survol. */
.tb-nuit:hover .ev-banquier-perle { transform: translateY(2px); }

html[data-nuit] .ev-banquier-dome { fill: #1E5B3F; stroke: #2F7A56; }
html[data-nuit] .ev-banquier-reflet { opacity: .5; stroke: #BFE6D2; }
html[data-nuit] .ev-banquier-flaque { opacity: .55; }
html[data-nuit] .ev-banquier-perle { opacity: .8; }

/* --- La pellicule de l'en-tête : une vignette par planche ---
   Celle qu'on regarde est éclairée ; un clic mène à la planche. Masquée sur
   téléphone, où la jauge du bas fait le même travail. */
.ev-pellicule {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0 auto;
    padding: 3px;
    border: 1px solid var(--tb-filet);
    max-width: min(38rem, 50vw);
    overflow-x: auto;
    scrollbar-width: none;
}
.ev-pellicule::-webkit-scrollbar { display: none; }
.ev-pellicule[hidden] { display: none; }
.ev-vue {
    flex: none;
    width: 26px;
    height: 17px;
    padding: 0;
    border: 0;
    background: center / cover no-repeat var(--tb-survol);
    opacity: .4;
    cursor: pointer;
    transition: opacity .2s, outline-color .2s;
    outline: 1px solid transparent;
    outline-offset: -1px;
}
.ev-vue:hover { opacity: .85; }
.ev-vue.est-ici { opacity: 1; outline-color: var(--tb-encre); }
html[data-nuit] .ev-vue.est-ici { outline-color: rgba(255, 234, 199, .85); }
/* Une planche sans image : un cadre avec deux lignes, comme du texte. */
.ev-vue.est-texte {
    background-image: linear-gradient(to bottom, transparent 5px, currentColor 5px 6px,
                      transparent 6px 9px, currentColor 9px 10px, transparent 10px);
    background-size: 16px 100%;
    background-position: center;
    box-shadow: inset 0 0 0 1px var(--tb-filet);
}
@media (max-width: 900px) { .ev-pellicule { display: none; } }

/* --- Planches de l'éventail : vidéo en boucle et post Instagram --- */
.ev-planche .tb-mur video {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 22px 50px rgba(0, 0, 0, .16);
}
/* L'intégration Instagram impose sa largeur : on la contient et on la centre. */
.ev-mur-embed { align-items: center; overflow-y: auto; scrollbar-width: none; }
.ev-mur-embed::-webkit-scrollbar { display: none; }
.ev-mur-embed .instagram-media {
    margin: 0 auto !important;
    min-width: 0 !important;
    max-width: min(420px, 100%) !important;
    width: 100% !important;
    border-radius: 3px !important;
}
.ev-legende { white-space: pre-line; }
/* Une vidéo YouTube intégrée : un cadre 16/9, aussi grand que le mur le permet
   (borné par la hauteur de l'écran), posé comme les autres vidéos. */
.ev-youtube {
    width: 100%;
    max-width: calc((100vh - var(--tb-entete) - var(--tb-pied) - 1.1rem) * 16 / 9);
    max-width: calc((100svh - var(--tb-entete) - var(--tb-pied) - 1.1rem) * 16 / 9);
    aspect-ratio: 16 / 9;
    background: #0d0d0d;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 22px 50px rgba(0, 0, 0, .16);
}
.ev-youtube iframe { display: block; width: 100%; height: 100%; border: 0; }
/* Sans JavaScript, pas de lecteur : seul le lien vers YouTube reste. */
html:not(.tb-js) .ev-youtube { display: none; }
@media (max-width: 800px) {
    .ev-mur-embed { overflow: visible; }
    .ev-planche .tb-mur video { max-height: 58vh; max-height: 58svh; }
    .ev-youtube { max-width: none; }
}

/* Le V de Views, au pied du cartel de chaque planche : il se trace à l'arrivée
   sur la planche, puis toutes les 30 secondes. L'ouverture garde le sien, en
   grand, dans son coin. */
.ev-v-planche {
    display: block;
    width: 2.4rem;
    margin-top: auto;          /* poussé au bas de la colonne de texte */
    padding-top: 1.6rem;
    opacity: .55;
}
.ev-v-planche .ev-v { width: 100%; height: auto; }
.ev-v-planche .ev-v-trait { stroke-width: 3.4; stroke-dasharray: 430; animation: ev-trace 30s linear infinite; }
@media (prefers-reduced-motion: reduce) { .ev-v-planche .ev-v-trait { animation: none; } }
@media (max-width: 800px) { .ev-v-planche { padding-top: .8rem; width: 2rem; } }

/* --- La coque de téléphone ---
   Le post est présenté dans un téléphone dessiné au trait : on comprend en une
   seconde qu'on regarde quelqu'un dérouler son fil. Le compte à gauche, la date
   à droite, sous l'écran. */
.ev-ecran {
    position: relative;
    background: var(--tb-carte);
    border: 1px solid var(--tb-filet-fort);
    border-radius: 26px;
    padding: 1.5rem .55rem .9rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 24px 54px rgba(0, 0, 0, .2);
}
/* L'écouteur, en haut de la coque. */
.ev-ecran::before {
    content: "";
    position: absolute;
    top: .62rem;
    left: 50%;
    transform: translateX(-50%);
    width: 2.6rem;
    height: 4px;
    border-radius: 999px;
    background: var(--tb-filet-fort);
}
.ev-ecran .ev-cadre { border-radius: 16px; box-shadow: none; }
.ev-ecran-pied {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin: .6rem .3rem 0;
    font-size: .58rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .5;
}
/* La nuit, le téléphone est allumé dans le noir : même halo tiède que les œuvres. */
html[data-nuit] .ev-ecran {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 20px 50px rgba(0, 0, 0, .6),
                0 0 90px rgba(255, 234, 199, .08);
}
@media (max-width: 800px) {
    .ev-ecran { border-radius: 22px; padding: 1.3rem .45rem .8rem; }
}

/* Le cadre ne montre que le média du post : eventail.js lui donne sa taille
   et décale l'iframe vers le haut pour cacher l'en-tête d'Instagram. */
.ev-cadre {
    width: min(400px, 100%);
    height: 420px;
    overflow: hidden;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 20px 46px rgba(0, 0, 0, .18);
    background: #000;
}
.ev-cadre iframe { display: block; border: 0; width: 100%; height: 100%; }
/* Un média à nous (quand l'auteur interdit l'intégration) remplit le cadre. */
.ev-cadre.est-media video, .ev-cadre.est-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Format du média inconnu : on montre le post entier, sans rogner. */
.ev-cadre.est-brut { height: auto; background: transparent; }
.ev-cadre.est-brut iframe { height: 640px; transform: none; }

/* ==========================================================================
   Éventail : la bobine qui avance, la pellicule sonore, la télécommande
   ========================================================================== */

/* --- La bobine qui avance ---
   La planche qui part tressaute, flashe et file vers le haut ; la suivante
   arrive par le bas et se cale en quelques secousses. Les pas sont francs
   (steps), comme une pellicule qui saute dans le couloir du projecteur. */
.ev-presentation.est-projection { overflow: hidden; }
html.tb-js .ev-planche.est-sortante { animation: ev-proj-sortie .28s steps(1, end) both; }
html.tb-js .ev-planche.est-entrante { animation: ev-proj-entree .75s steps(1, end) both; }
html.tb-js .ev-planche.est-visible.est-projetee { animation: none; }
@keyframes ev-proj-sortie {
    0%   { transform: none;               filter: none; }
    25%  { transform: translateY(-1.5%);  filter: brightness(1.7) contrast(1.15); }
    50%  { transform: translateY(1%);     filter: brightness(.65); }
    75%  { transform: translateY(-30%);   filter: brightness(1.5) blur(2px); }
    100% { transform: translateY(-58%);   filter: brightness(2) blur(3px); }
}
@keyframes ev-proj-entree {
    0%   { transform: translateY(52%);    filter: brightness(2) blur(3px); }
    12%  { transform: translateY(9%);     filter: brightness(1.3) blur(1px); }
    28%  { transform: translateY(-2.2%);  filter: brightness(1.55); }
    45%  { transform: translateY(1%);     filter: brightness(.88); }
    62%  { transform: translateY(-.4%);   filter: brightness(1.1); }
    80%, 100% { transform: none;          filter: none; }
}
/* Le voile orangé : une fuite de lumière qui traverse l'écran. */
.ev-fuite {
    position: fixed;
    inset: var(--tb-entete) 0 0 0;
    z-index: 15;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(38% 55% at 18% 42%, rgba(255, 128, 48, .9), transparent 70%),
        radial-gradient(30% 40% at 72% 68%, rgba(255, 70, 34, .6), transparent 70%);
}
.ev-presentation.est-projection .ev-fuite { animation: ev-fuite 1s ease-out both; }
@keyframes ev-fuite {
    0%   { opacity: 0;   transform: translateX(-18%); }
    30%  { opacity: .42; }
    100% { opacity: 0;   transform: translateX(22%); }
}
html[data-nuit] .ev-fuite { mix-blend-mode: screen; }
html[data-nuit] .ev-presentation.est-projection .ev-fuite { animation-name: ev-fuite-nuit; }
@keyframes ev-fuite-nuit {
    0%   { opacity: 0;   transform: translateX(-18%); }
    30%  { opacity: .85; }
    100% { opacity: 0;   transform: translateX(22%); }
}
@media (prefers-reduced-motion: reduce) {
    html.tb-js .ev-planche.est-sortante, html.tb-js .ev-planche.est-entrante,
    .ev-presentation.est-projection .ev-fuite { animation: none; }
}

/* --- Les boutons de l'en-tête : le son et la télécommande ---
   Même allure que la lampe : un dessin au trait, discret, qui s'éclaire au survol. */
.ev-son, .ev-tc {
    font: inherit;
    color: var(--tb-encre);
    background: none;
    border: 0;
    padding: .2rem .1rem;
    cursor: pointer;
    opacity: .55;
    transition: opacity .15s;
    display: inline-flex;
    align-items: center;
}
.ev-son:hover, .ev-tc:hover, .ev-son.est-allume, .ev-tc.est-connecte { opacity: 1; }
.ev-son[hidden], .ev-tc[hidden] { display: none; }
.ev-son { margin-left: auto; }
.ev-tc { margin-left: .9rem; }
.ev-son:not([hidden]) ~ .tb-nuit, .ev-tc:not([hidden]) ~ .tb-nuit { margin-left: .9rem; }
.ev-son svg { display: block; width: 32px; height: 21px; overflow: visible; }
.ev-son circle, .ev-son path { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; }
.ev-bobine { transform-box: fill-box; transform-origin: center; }
.ev-son.est-allume .ev-bobine-g { animation: ev-bobine 1.6s linear infinite; }
.ev-son.est-allume .ev-bobine-d { animation: ev-bobine 1.1s linear infinite; }
@keyframes ev-bobine { to { transform: rotate(360deg); } }
.ev-son-film { stroke-dasharray: 2 2.4; }
.ev-son.est-allume .ev-son-film { animation: ev-film .5s linear infinite; }
@keyframes ev-film { to { stroke-dashoffset: -8.8; } }
.ev-tc svg { display: block; width: 23px; height: 23px; overflow: visible; }
.ev-tc rect, .ev-tc path { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; }
.ev-tc-onde { opacity: 0; transition: opacity .3s; }
.ev-tc.est-connecte .ev-tc-onde { opacity: 1; animation: ev-onde 1.8s ease-in-out infinite; }
@keyframes ev-onde { 50% { opacity: .3; } }
@media (max-width: 900px) { .ev-son, .ev-tc { display: none !important; } }

/* --- Le QR code de la télécommande --- */
.ev-qr {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(10, 9, 8, .45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.ev-qr[hidden] { display: none; }
.ev-qr-carte {
    width: min(21rem, 100%);
    padding: 1.6rem 1.6rem 1.2rem;
    text-align: center;
    background: var(--tb-carte);
    color: var(--tb-encre);
    border: 1px solid var(--tb-filet);
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 30px 80px rgba(0, 0, 0, .35);
}
.ev-qr-titre { margin: 0 0 1.1rem; font-family: var(--tb-eiko); font-size: 1.6rem; letter-spacing: -.04em; line-height: 1; }
.ev-qr-code { width: 12.5rem; margin: 0 auto; padding: .7rem; background: #fff; border-radius: 4px; }
.ev-qr-code svg { display: block; width: 100%; height: auto; }
.ev-qr-code.est-lien { width: auto; color: #111; font-size: .72rem; line-height: 1.35; text-align: left; word-break: break-all; user-select: all; }
.ev-qr-code svg path { fill: #000; }
.ev-qr-texte { margin: 1.1rem 0 0; font-size: .8rem; line-height: 1.4; opacity: .75; }
.ev-qr-etat { margin: .9rem 0 0; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; opacity: .55; }
.ev-qr-actions { display: flex; justify-content: center; gap: .6rem; margin: 1.1rem 0 0; }
.ev-qr-actions button {
    font: inherit; font-size: .78rem; color: inherit; cursor: pointer;
    background: none; border: 1px solid var(--tb-filet-fort); border-radius: 999px; padding: .3rem .9rem;
}
.ev-qr-actions button:hover { background: var(--tb-survol); }

/* --- La télécommande, sur le téléphone ---
   Tout pour le pouce : la planche en cours en grand, un pavé à glisser,
   deux grosses flèches, et la liste des planches pour sauter directement. */
.ev-zapette {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    min-height: calc(100svh - var(--tb-entete));
    padding: 1.2rem 1rem calc(1.2rem + env(safe-area-inset-bottom));
    -webkit-user-select: none;
    user-select: none;
}
.ev-zap-etat { margin: 0; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; opacity: .5; }
.ev-zap-etat::before {
    content: ""; display: inline-block; width: 7px; height: 7px; margin-right: .5em; border-radius: 50%;
    background: currentColor; opacity: .35; vertical-align: .05em;
}
.ev-zapette.est-connectee .ev-zap-etat::before { background: #3FA36B; opacity: 1; }
.ev-zap-compte { margin: 0; font-size: .7rem; letter-spacing: .2em; opacity: .5; font-variant-numeric: tabular-nums; }
.ev-zap-titre {
    margin: .3rem 0 0;
    font-family: var(--tb-eiko);
    font-size: clamp(2rem, 10vw, 2.8rem);
    letter-spacing: -.045em;
    line-height: 1;
    min-height: 2em;
}
.ev-zap-suite { margin: .5rem 0 0; font-size: .82rem; opacity: .55; }
.ev-zap-pave {
    position: relative;
    flex: 1;
    min-height: 12rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--tb-filet);
    border: 1px solid var(--tb-filet);
    border-radius: 10px;
    overflow: hidden;
    touch-action: pan-y;
}
.ev-zap-pave button {
    font: inherit;
    font-size: 2.4rem;
    color: inherit;
    background: var(--tb-carte);
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.ev-zap-pave button:active { background: var(--tb-survol); }
.ev-zap-aide {
    position: absolute; left: 50%; bottom: .8rem; transform: translateX(-50%); margin: 0;
    padding: .25rem .7rem; white-space: nowrap; border-radius: 999px;
    background: var(--tb-carte); color: color-mix(in srgb, var(--tb-encre) 45%, transparent);
    font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; pointer-events: none;
}
.ev-zap-liste { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--tb-filet); }
.ev-zap-liste li { border-bottom: 1px solid var(--tb-filet); }
.ev-zap-liste button {
    display: flex; gap: .9rem; align-items: baseline; width: 100%;
    font: inherit; font-size: .92rem; color: inherit; text-align: left; cursor: pointer;
    background: none; border: 0; padding: .75rem .2rem;
    -webkit-tap-highlight-color: transparent;
}
.ev-zap-liste button span { font-size: .66rem; letter-spacing: .12em; opacity: .45; min-width: 1.2rem; font-variant-numeric: tabular-nums; }
.ev-zap-liste button.est-ici { font-weight: 500; }
.ev-zap-liste button.est-ici span { opacity: 1; }

/* --- Le glissement d'italique ---
   Les mots en italique d'un cartel (<em>) sont ses mots-clés. En présentation,
   ils restent en romain jusqu'à ce qu'on les évoque, puis passent en Eiko
   italique, la police des titres, au creux d'un bref flou. Sans JavaScript,
   ils restent simplement en italique. */
html.tb-js .ev-planche .cartel-texte em { font-style: normal; }
html.tb-js .ev-planche .cartel-texte em.est-evoque {
    font-family: var(--tb-eiko);
    font-style: italic;
    font-weight: 300;
    font-size: 1.14em;
    letter-spacing: -.01em;
}
html.tb-js .ev-planche .cartel-texte em.bascule { animation: ev-bascule .6s ease; }
@keyframes ev-bascule { 40% { filter: blur(3px); opacity: .3; } }
@media (prefers-reduced-motion: reduce) { html.tb-js .ev-planche .cartel-texte em.bascule { animation: none; } }
.ev-zap-mots { margin: .45rem 0 0; font-size: .72rem; letter-spacing: .06em; opacity: .6; }
.ev-zap-mots[hidden] { display: none; }

/* --- Un objet animé sous le texte d'une planche ---
   La caméra Super 8 en vue éclatée (eventail-super8.js) occupe l'espace libre
   entre le texte et le V. Sur téléphone, elle prend une hauteur fixe. */
.ev-objet { position: relative; flex: 1 1 auto; min-height: 10rem; margin-top: 1.2rem; }
.ev-objet canvas { position: absolute; inset: 0 0 1.2rem; width: 100%; height: calc(100% - 1.2rem); cursor: grab; touch-action: pan-y; }
.ev-objet canvas:active { cursor: grabbing; }
.ev-objet-legende { position: absolute; left: 0; bottom: 0; margin: 0; font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; opacity: .4; }
@media (max-width: 800px) { .ev-objet { flex: none; height: 15rem; } }

/* --- La régie : plusieurs vidéos ensemble, comme dans un car de télévision ---
   Un pupitre sombre (même de jour : c'est un appareil posé sur la page), une
   barre avec le timecode de l'émission et le voyant REC, un mur de moniteurs
   et, dessous, le mélangeur. Rouge = à l'antenne (PGM), vert = en attente (PVW). */
.ev-mur-regie { align-items: center; }
.ev-regie {
    --regie-fond: #0e0e0d;
    --regie-trait: rgba(255, 255, 255, .12);
    --regie-texte: rgba(255, 255, 255, .62);
    --regie-rouge: #E3412B;
    --regie-vert: #3FB36F;
    width: 100%;
    /* La régie tient dans la hauteur de l'écran : moniteurs 2 × 2 + barres. */
    /* Hauteur de la régie ≈ 0,86 × sa largeur (moniteurs, barre, pupitre). */
    max-width: min(64rem, calc((100vh - var(--tb-entete) - var(--tb-pied) - 2.5rem) / .86));
    max-width: min(64rem, calc((100svh - var(--tb-entete) - var(--tb-pied) - 2.5rem) / .86));
    padding: .7rem;
    background: var(--regie-fond);
    border: 1px solid #1f1e1c;
    border-radius: 6px;
    color: var(--regie-texte);
    font-size: .6rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 26px 60px rgba(0, 0, 0, .28);
}
html[data-nuit] .ev-regie { border-color: #2a2926; box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 26px 60px rgba(0, 0, 0, .6); }
.ev-regie-barre {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .1rem .2rem .65rem;
}
.ev-regie-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-regie-tc { color: #fff; font-size: .72rem; letter-spacing: .1em; }
.ev-regie-rec { display: inline-flex; align-items: center; gap: .4em; color: var(--regie-rouge); }
.ev-regie-rec i { width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; animation: ev-rec 1.4s steps(1) infinite; }
@keyframes ev-rec { 50% { opacity: .2; } }

.ev-regie-murs { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.ev-regie-3 .ev-moniteur:first-child { grid-column: 1 / -1; }
.ev-moniteur { margin: 0; position: relative; }
.ev-moniteur video {
    display: block;
    width: 100%;
    aspect-ratio: 1024 / 720;
    object-fit: cover;
    background: #000;
    outline: 2px solid transparent;
    outline-offset: 0;
    transition: outline-color .15s;
}
.ev-moniteur.est-pgm video { outline-color: var(--regie-rouge); }
.ev-moniteur.est-pvw video { outline-color: var(--regie-vert); }
.ev-moniteur figcaption {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .1rem 0;
}
.ev-tally { width: .5rem; height: .5rem; border-radius: 50%; background: #3a3936; flex: none; }
.ev-moniteur.est-pgm .ev-tally { background: var(--regie-rouge); box-shadow: 0 0 8px var(--regie-rouge); }
.ev-moniteur.est-pvw .ev-tally { background: var(--regie-vert); box-shadow: 0 0 8px var(--regie-vert); }
.ev-cam { color: #fff; }
.ev-statut::before { content: ""; }
.ev-moniteur.est-pgm .ev-statut::before { content: "pgm"; color: var(--regie-rouge); }
.ev-moniteur.est-pvw .ev-statut::before { content: "pvw"; color: var(--regie-vert); }
.ev-moniteur .ev-tc { margin-left: auto; opacity: .7; }

/* Le mélangeur : une touche par caméra, celle à l'antenne allumée en rouge. */
.ev-regie-pupitre {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .75rem;
    padding-top: .65rem;
    border-top: 1px solid var(--regie-trait);
}
.ev-regie-pupitre-nom { margin-right: .4rem; }
.ev-regie-pupitre button {
    font: inherit;
    font-size: .7rem;
    letter-spacing: 0;
    width: 1.9rem;
    height: 1.5rem;
    padding: 0;
    color: #fff;
    background: #1c1b19;
    border: 1px solid #34332f;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.ev-regie-pupitre button:hover { border-color: #5a5852; }
.ev-regie-pupitre button.est-pgm { background: var(--regie-rouge); border-color: var(--regie-rouge); }
.ev-regie-auto { margin-left: auto; opacity: .55; }
.ev-regie.est-manuel .ev-regie-auto { opacity: .2; text-decoration: line-through; }
@media (prefers-reduced-motion: reduce) { .ev-regie-rec i { animation: none; } }
@media (max-width: 800px) {
    .ev-regie { max-width: none; padding: .5rem; }
    .ev-regie-murs { gap: .35rem; }
    .ev-moniteur .ev-tc, .ev-regie-auto { display: none; }
}

/* --- L'infographie « formats » : Super 8 et 16 mm à la même échelle ---
   Même écriture que la caméra de la planche 2 : un trait fin, des noms en
   Eiko italique, une légende « fig. ». Les deux bandes défilent d'une image
   à la même cadence (le 16 mm file donc plus vite) ; les cotes se tracent à
   l'arrivée sur la planche. */
.ev-formats { display: flex; flex-direction: column; gap: .7rem; }
.ev-formats svg { flex: 1 1 auto; min-height: 7rem; width: 100%; overflow: visible; }
.ev-formats .ev-objet-legende { position: static; }
.ev-formats-nom { font-family: var(--tb-eiko); font-style: italic; font-weight: 300; font-size: 4.4px; text-anchor: middle; fill: currentColor; }
.ev-formats-mesure { font-size: 2.3px; letter-spacing: .12em; text-anchor: middle; fill: currentColor; opacity: .6; }
.ev-formats-cote { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .7; }
.ev-planche.est-visible .ev-formats-cote { animation: ev-cote .9s cubic-bezier(.5,0,.3,1) .5s forwards; }
@keyframes ev-cote { to { stroke-dashoffset: 0; } }
.ev-bande-bord, .ev-bande-image, .ev-bande-perfo { stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.ev-bande-bord { fill: none; opacity: .75; }
.ev-bande-image { fill: currentColor; fill-opacity: .06; opacity: .9; }
.ev-bande-perfo { fill: var(--tb-fond); opacity: .8; }
.ev-bande { animation: ev-defile .9s linear infinite; }
@keyframes ev-defile { from { transform: translateY(calc(-1 * var(--pas))); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .ev-bande { animation: none; }
    .ev-planche.est-visible .ev-formats-cote { animation: none; stroke-dashoffset: 0; }
}
.ev-formats-faits { margin: 0; display: grid; font-size: .74rem; }
.ev-formats-faits div { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: .6rem; padding: .3rem 0; border-top: 1px solid var(--tb-filet-fort); }
.ev-formats-faits dt { font-family: var(--tb-eiko); font-weight: 900; text-transform: lowercase; }
.ev-formats-faits dd { margin: 0; }
.ev-formats-faits .ev-formats-tete { border-top: 0; padding-top: 0; font-family: var(--tb-eiko); font-style: italic; font-weight: 300; font-size: .9rem; }
@media (max-width: 800px) { .ev-formats { height: auto; } .ev-formats svg { height: 12rem; flex: none; } }

/* --- Le partage d'un tableau ---
   Une ligne sobre sous les liens du cartel : de petites icônes au trait,
   dans l'encre de la page, suivies de leur nom. */
.tb-partage { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin: .9rem 0 0; font-size: .78rem; }
.tb-partage a { display: inline-flex; align-items: center; gap: .35rem; text-decoration: none; }
.tb-partage a[hidden] { display: none; }
.tb-partage a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tb-partage svg { width: .95rem; height: .95rem; flex: none; overflow: visible; }
.tb-partage path, .tb-partage rect, .tb-partage circle {
    fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;
}
/* La petite bulle qui confirme une copie. */
.tb-bulle {
    position: fixed; left: 50%; bottom: 5.4rem; z-index: 60; margin: 0; transform: translate(-50%, .6rem);
    padding: .5rem .95rem; border-radius: 999px; background: var(--tb-encre); color: var(--tb-fond);
    font-size: .78rem; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
}
.tb-bulle.est-la { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
   Page 404 — « la capture ratée » : le regard de Nick (Good Time) en plein
   écran, et la fenêtre d'un lecteur qui n'arrive pas à ouvrir la page.
   ========================================================================== */
body.tpl-404 { background: #000; }
body.tpl-404 .wrap { max-width: none; padding: 0; }
.introuvable { position: fixed; inset: 0; overflow: hidden; background: #000; }
.introuvable-plan {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--cadre, 50% 50%);   /* ce qui compte reste dans le cadre (404.php) */
    filter: brightness(var(--lumiere, .58));
}
.introuvable-boite {
    position: absolute;
    left: 50%;
    top: var(--boite, 47%);
    transform: translate(-50%, -50%);
    width: min(26rem, calc(100vw - 2.4rem));
    padding: 1.3rem 1.4rem 1.1rem;
    background: rgba(236, 236, 236, .96);
    color: #1d1d1f;
    border-radius: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.45;
    box-shadow: 0 0 0 .5px rgba(0, 0, 0, .3), 0 20px 60px rgba(0, 0, 0, .55);
    animation: introuvable-ouverture .28s cubic-bezier(.2, .8, .2, 1) both .15s;
}
@keyframes introuvable-ouverture { from { opacity: 0; transform: translate(-50%, -50%) scale(.96); } }
.introuvable-boite h1 { margin: 0 0 .5rem; font: inherit; font-size: 14px; font-weight: 600; }
.introuvable-boite p { margin: 0 0 1rem; color: #3a3a3c; }
.introuvable-boite code { font-family: ui-monospace, Menlo, monospace; font-size: 12px; word-break: break-all; }
.introuvable-boutons { display: flex; justify-content: flex-end; gap: .5rem; margin: 0 !important; }
.introuvable-boutons a, .introuvable-boutons a:visited {
    padding: .3rem .95rem;
    border-radius: 6px;
    text-decoration: none;
    color: #1d1d1f;
    background: #fff;
    box-shadow: 0 0 0 .5px rgba(0, 0, 0, .25), 0 1px 1px rgba(0, 0, 0, .1);
}
.introuvable-boutons a:hover { background: #f5f5f5; }
.introuvable-boutons a.est-defaut, .introuvable-boutons a.est-defaut:visited { background: #0a64d8; color: #fff; box-shadow: none; }
.introuvable-boutons a.est-defaut:hover { background: #0958c0; }
.introuvable-boutons a:focus-visible { outline: 2px solid #0a64d8; outline-offset: 2px; }
/* En hauteur (téléphone), un autre cadrage : le plan est bien plus large que l'écran. */
@media (max-aspect-ratio: 4/5) {
    .introuvable-plan { object-position: var(--cadre-h, 50% 50%); }
    .introuvable-boite { top: var(--boite-h, 58%); }
}
@media (prefers-reduced-motion: reduce) { .introuvable-boite { animation: none; } }

/* --- Planche « article » : l'aperçu du lien, comme une messagerie le déplie ---
   L'illustration en grand, puis le site, le titre et le chapeau d'origine.
   L'image respire lentement (un zoom à peine perceptible) tant que la planche
   est à l'écran. */
.ev-mur-article { align-items: center; }
.ev-lien {
    display: flex;
    flex-direction: column;
    width: min(54rem, 100%);
    max-height: 100%;
    color: inherit;
    text-decoration: none;
    background: var(--tb-carte);
    border: 1px solid var(--tb-filet-fort);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 24px 54px rgba(0, 0, 0, .2);
    transition: transform .35s ease, box-shadow .35s ease;
}
.ev-lien:hover { transform: translateY(-3px); box-shadow: 0 3px 6px rgba(0, 0, 0, .1), 0 30px 64px rgba(0, 0, 0, .24); }
.ev-lien-image {
    display: block;
    flex: 0 1 auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0b1a06;
}
.ev-planche .ev-lien-image img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    box-shadow: none;
    transform-origin: 53% 52%;
}
.ev-planche.est-visible .ev-lien-image img { animation: ev-lien-souffle 18s ease-in-out infinite alternate; }
@keyframes ev-lien-souffle { from { transform: scale(1); } to { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .ev-planche.est-visible .ev-lien-image img { animation: none; } }
.ev-lien-corps {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    padding: 1rem 1.25rem 1.05rem;
    border-top: 1px solid var(--tb-filet);
}
.ev-lien-site { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; opacity: .5; }
.ev-lien-titre {
    font-family: var(--tb-eiko);
    font-size: clamp(1.25rem, 1.7vw, 1.7rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    text-wrap: balance;
}
.ev-lien-chapo { font-size: .88rem; line-height: 1.4; opacity: .72; }
.ev-lien-pied {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: .15rem;
    font-size: .72rem;
    opacity: .5;
}
.ev-lien-fleche { font-size: .95rem; transition: transform .35s ease; }
.ev-lien:hover .ev-lien-fleche { transform: translate(2px, -2px); }
.ev-article-texte p:first-child { font-family: var(--tb-eiko); font-size: 1.15rem; line-height: 1.2; letter-spacing: -0.02em; }
html[data-nuit] .ev-lien { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 24px 60px rgba(0, 0, 0, .65), 0 0 110px rgba(255, 234, 199, .08); }
@media (max-width: 800px) {
    .ev-lien { max-height: none; }
    .ev-lien-corps { padding: .85rem 1rem .9rem; }
}

/* Planche Instagram « cadre : nu » : le média en grand, sans coque, qui remplit
   la place à son format même s'il est plus petit qu'elle (comme la planche 2). */
.ev-mur-nu { container-type: size; }
.ev-planche .ev-mur-nu[style] video,
.ev-planche .ev-mur-nu[style] img {
    width: min(100cqw, 100cqh * var(--format));
    height: auto;
    max-width: none;
    max-height: none;
}
@media (max-width: 800px) {
    .ev-mur-nu { container-type: normal; }
    .ev-planche .ev-mur-nu[style] video,
    .ev-planche .ev-mur-nu[style] img { width: 100%; }
}

/* --- Le bouton « son » des vidéos (eventail.js) ---
   Une pastille sombre et translucide dans le coin bas-droit de la vidéo ;
   allumée, elle passe en blanc et ses ondes battent doucement. */
.ev-porte-son { position: relative; }
.ev-son-video {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .42rem .75rem .42rem .6rem;
    font: inherit;
    font-size: .72rem;
    letter-spacing: .04em;
    line-height: 1;
    color: #fff;
    background: rgba(0, 0, 0, .5);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    cursor: pointer;
    transition: background-color .2s, color .2s, border-color .2s;
}
.ev-son-video:hover { background: rgba(0, 0, 0, .72); }
.ev-son-video svg { width: 1.05rem; height: auto; flex: none; }
.ev-son-video path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ev-son-video .ev-hp { fill: currentColor; stroke: none; }
.ev-son-video .ev-ondes { display: none; }
.ev-son-video.est-allume { background: #fff; color: #000; border-color: #fff; }
.ev-son-video.est-allume .ev-barre { display: none; }
.ev-son-video.est-allume .ev-ondes { display: inline; animation: ev-ondes 1.1s ease-in-out infinite alternate; }
@keyframes ev-ondes { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ev-son-video.est-allume .ev-ondes { animation: none; } }
/* L'ouverture : en bas à gauche, sur la ligne du crédit du film ; il paraît avec lui. */
.ev-son-video.ev-son-ouverture { left: 5%; top: auto; bottom: 2.5%; opacity: 0; }
.ev-ouverture.est-lancee .ev-son-ouverture { animation: ev-parait .8s ease 3.4s forwards; }
@media (prefers-reduced-motion: reduce) { .ev-ouverture .ev-son-ouverture { opacity: 1; } }
/* Sur le pupitre de la régie, le bouton prend sa place dans la rangée, à la
   manière des touches de caméra. */
.ev-regie-pupitre button.ev-son-regie {
    position: static;
    width: auto;
    height: 1.5rem;
    margin-left: .6rem;
    padding: 0 .6rem 0 .45rem;
    border-radius: 3px;
    background: #1c1b19;
    border-color: #34332f;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.ev-regie-pupitre button.ev-son-regie.est-allume { background: #fff; color: #000; border-color: #fff; }

/* --- Objet « monza » : le circuit, virage par virage (eventail-monza.js) ---
   Le tracé pâle, encré derrière la voiture ; les numéros des virages autour,
   celui qu'on passe en rouge ; son nom en grand, en PP Eiko italique. */
.ev-monza { display: flex; flex-direction: column; gap: .5rem; min-height: 16rem; }
.ev-mz-carte { position: relative; flex: 1 1 auto; min-height: 0; }
.ev-mz-carte svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ev-mz-fond, .ev-mz-encre { fill: none; stroke: currentColor; stroke-linejoin: round; stroke-linecap: round; }
.ev-mz-fond { stroke-width: 2; opacity: .22; }
.ev-mz-encre { stroke-width: 3; }
.ev-mz-ligne { stroke: currentColor; stroke-width: 1.6; }
.ev-mz-voiture { fill: #E3412B; }
.ev-mz-num circle { fill: var(--tb-fond); stroke: currentColor; stroke-width: 1; transition: fill .3s, stroke .3s; }
.ev-mz-num text { font-family: var(--tb-sans); font-size: 9px; fill: currentColor; text-anchor: middle; dominant-baseline: central; transition: fill .3s; }
.ev-mz-num.est-ici circle { fill: #E3412B; stroke: #E3412B; }
.ev-mz-num.est-ici text { fill: #fff; }
.ev-mz-virage { position: relative; flex: none; height: 4.8rem; }
.ev-mz-virage p { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; transition: opacity .6s ease, transform .6s ease; }
.ev-mz-virage p.est-sorti { opacity: 0; transform: translateY(-.6rem); }
.ev-mz-virage p.est-attente { opacity: 0; transform: translateY(.6rem); }
.ev-mz-virage span { display: block; margin-bottom: .25rem; font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; opacity: .45; }
.ev-mz-virage em {
    display: block;
    font-family: var(--tb-eiko);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.5rem, 2.1vw, 2.1rem);
    line-height: 1;
    letter-spacing: -.03em;
}
.ev-monza .ev-objet-legende { position: static; }
@media (max-width: 800px) { .ev-objet.ev-monza { height: 26rem; } }

/* --- Les exemples « à décrocher » : trois vidéos côte à côte ---
   Chaque vidéo est un écran vertical à coins arrondis ; au repos, un bouton
   rond au combiné de téléphone et le mot « décrocher ». En ligne, une barre
   en bas : raccrocher, l'avancée, la durée, le haut-parleur. Les autres
   écrans pâlissent pendant l'appel. */
.ev-trio { container-type: size; }
.ev-trio-rang {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
    width: 100%;
    height: 100%;
}
.ev-tel {
    margin: 0;
    flex: none;
    width: min(calc((100cqw - 2.4rem) / 3), calc((100cqh - 2.4rem) * 9 / 16));
    display: flex;
    flex-direction: column;
    gap: .55rem;
    transition: opacity .4s ease, filter .4s ease;
}
.ev-trio.a-un-appel .ev-tel:not(.est-en-ligne) { opacity: .45; filter: saturate(.4); }
.ev-tel-ecran {
    position: relative;
    aspect-ratio: 9 / 16;
    border-radius: 16px;
    overflow: hidden;
    background: #0d0c0b;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 22px 50px rgba(0, 0, 0, .18);
}
.ev-planche .ev-tel video {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    box-shadow: none;
    cursor: pointer;
}
/* Le voile du bas, pour lire les boutons sur n'importe quelle image. */
.ev-tel-ecran::after {
    content: "";
    position: absolute;
    inset: 55% 0 0;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .55));
    pointer-events: none;
    transition: opacity .4s;
}
/* Au repos : le bouton rond et le mot, au centre. */
.ev-tel-decrocher {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    padding: 0;
    color: #fff;
    background: rgba(0, 0, 0, .12);
    border: 0;
    font: inherit;
    cursor: pointer;
    transition: opacity .35s ease, background-color .35s ease;
}
.ev-tel-rond {
    display: grid;
    place-items: center;
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #111;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .3);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), background-color .3s, color .3s;
}
.ev-tel-rond svg { width: 1.7rem; height: 1.7rem; fill: currentColor; }
/* Le combiné qui sonne : un léger tremblement, de temps en temps. */
.ev-planche.est-visible .ev-tel:not(.est-entame) .ev-tel-rond svg { animation: ev-sonne 3.6s ease-in-out infinite; }
.ev-planche.est-visible .ev-tel:nth-child(2):not(.est-entame) .ev-tel-rond svg { animation-delay: 1.2s; }
.ev-planche.est-visible .ev-tel:nth-child(3):not(.est-entame) .ev-tel-rond svg { animation-delay: 2.4s; }
@keyframes ev-sonne {
    0%, 70%, 100% { transform: rotate(0); }
    73%, 79%, 85% { transform: rotate(-14deg); }
    76%, 82%, 88% { transform: rotate(14deg); }
}
@media (prefers-reduced-motion: reduce) { .ev-planche.est-visible .ev-tel .ev-tel-rond svg { animation: none; } }
.ev-tel-mot {
    font-size: .62rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}
.ev-tel-decrocher:hover .ev-tel-rond { transform: scale(1.08); background: #3FB36F; color: #fff; }
.ev-tel-decrocher:focus-visible .ev-tel-rond { outline: 2px solid #fff; outline-offset: 3px; }
.ev-tel.est-en-ligne .ev-tel-decrocher { opacity: 0; pointer-events: none; }
/* En ligne : la barre du bas. */
.ev-tel-barre {
    position: absolute;
    left: .55rem;
    right: .55rem;
    bottom: .55rem;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .35rem .45rem;
    color: #fff;
    background: rgba(0, 0, 0, .45);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(.4rem);
    pointer-events: none;
    transition: opacity .35s ease, transform .35s ease;
}
.ev-tel.est-entame .ev-tel-barre { opacity: 1; transform: none; pointer-events: auto; }
.ev-tel-barre button {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    padding: 0;
    border-radius: 50%;
    border: 0;
    color: #fff;
    cursor: pointer;
    transition: background-color .2s, transform .2s;
}
/* Raccrocher : le combiné retourné, sur fond rouge ; à l'arrêt, vert pour reprendre. */
.ev-tel-pause { background: #E3412B; }
.ev-tel-pause svg { width: .95rem; height: .95rem; fill: currentColor; transform: rotate(135deg); transition: transform .3s; }
.ev-tel:not(.est-en-ligne) .ev-tel-pause { background: #3FB36F; }
.ev-tel:not(.est-en-ligne) .ev-tel-pause svg { transform: none; }
.ev-tel-barre button:hover { transform: scale(1.08); }
.ev-tel-temps { position: relative; flex: 1; height: 1.4rem; cursor: pointer; }
.ev-tel-temps::before, .ev-tel-temps i {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    background: rgba(255, 255, 255, .3);
}
.ev-tel-temps i { background: #fff; transform-origin: left; transform: scaleX(0); }
.ev-tel-duree { flex: none; font-size: .6rem; letter-spacing: .06em; font-variant-numeric: tabular-nums; opacity: .85; }
.ev-tel-hp { background: rgba(255, 255, 255, .14); }
.ev-tel-hp.est-allume { background: #fff; color: #111; }
.ev-tel-hp svg { width: 1rem; height: auto; }
.ev-tel-hp path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ev-tel-hp .ev-hp { fill: currentColor; stroke: none; }
.ev-tel-hp .ev-ondes { display: none; }
.ev-tel-hp.est-allume .ev-ondes { display: inline; }
.ev-tel-hp.est-allume .ev-barre { display: none; }
/* Sous chaque écran : le numéro, la date, les « j'aime », le lien du post. */
.ev-tel-source {
    display: flex;
    align-items: baseline;
    gap: .55rem;
    font-size: .66rem;
    line-height: 1.3;
}
.ev-tel-num { font-family: var(--tb-eiko); font-weight: 900; font-size: .8rem; }
.ev-tel-source a { margin-left: auto; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.ev-tel-source a:hover { text-decoration: none; }
html[data-nuit] .ev-tel-ecran { box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 24px 60px rgba(0, 0, 0, .65); }
@media (max-width: 800px) {
    .ev-trio { container-type: normal; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .ev-trio-rang { justify-content: flex-start; width: max-content; height: auto; gap: .8rem; }
    .ev-tel { width: 68vw; scroll-snap-align: center; }
}

/* --- Le plein écran (eventail.js) ---
   Le bouton : quatre coins au trait, qui s'ouvrent (entrer) ou se referment
   (sortir). En plein écran, l'en-tête ne prend plus de place : il se replie
   au-dessus de l'écran et redescend quand la souris monte ; immobile, la
   pastille, la jauge et le curseur s'effacent. */
.ev-plein {
    margin-left: .9rem;
    display: inline-flex;
    align-items: center;
    padding: .2rem .1rem;
    font: inherit;
    color: var(--tb-encre);
    background: none;
    border: 0;
    cursor: pointer;
    opacity: .55;
    transition: opacity .15s;
}
.ev-plein:hover, .ev-plein[aria-pressed="true"] { opacity: 1; }
.ev-plein[hidden] { display: none; }
.ev-plein:not([hidden]) ~ .tb-nuit { margin-left: .9rem; }
.ev-plein svg { display: block; width: 21px; height: 21px; overflow: visible; }
.ev-plein path { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; transition: opacity .2s; }
.ev-plein .ev-plein-fermer { opacity: 0; }
.ev-plein[aria-pressed="true"] .ev-plein-ouvrir { opacity: 0; }
.ev-plein[aria-pressed="true"] .ev-plein-fermer { opacity: 1; }
.ev-plein:hover .ev-plein-ouvrir { animation: ev-plein-souffle .6s ease; }
@keyframes ev-plein-souffle { 50% { transform: scale(1.12); } }
.ev-plein-ouvrir { transform-box: fill-box; transform-origin: center; }
@media (max-width: 900px) { .ev-plein { display: none !important; } }

html.est-plein-ecran body.tpl-page-eventail { --tb-entete: 0rem; }
html.est-plein-ecran .tb-entete {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 3rem;
    transform: translateY(-101%);
    transition: transform .3s ease, box-shadow .3s ease;
}
html.est-plein-ecran.montre-entete .tb-entete { transform: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
html.est-plein-ecran .tb-pastille,
html.est-plein-ecran .ev-jauge { transition: opacity .6s ease; }
html.est-plein-ecran.est-immobile .tb-pastille,
html.est-plein-ecran.est-immobile .ev-jauge { opacity: 0; pointer-events: none; }
html.est-plein-ecran.est-immobile,
html.est-plein-ecran.est-immobile * { cursor: none !important; }

/* --- « Quelques profils » : des comptes Instagram, chacun avec son portrait,
   ses chiffres, sa présentation et ses dernières publications. Trois mises en
   page (champ « mise ») : les cartels côte à côte, trois écrans de téléphone,
   une pellicule par profil. --- */
.ev-planche .ev-profils { width: 100%; height: 100%; min-height: 0; container-type: size; }
.ev-planche .ev-profils img { box-shadow: none; max-width: none; max-height: none; }
.ev-profil { margin: 0; min-width: 0; }
.ev-profil-tete { display: flex; align-items: center; gap: .75rem; color: inherit; text-decoration: none; }
.ev-profil-tete:hover .ev-profil-compte { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.ev-planche .ev-profil-avatar { flex: none; width: 2.8rem; height: 2.8rem; border-radius: 50%; object-fit: cover; background: var(--tb-filet); }
.ev-profil-noms { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.ev-profil-nom { font-family: var(--tb-eiko); font-size: 1.35rem; line-height: 1.05; letter-spacing: -.02em; overflow-wrap: anywhere; }
.ev-profil-compte { font-size: .72rem; opacity: .55; overflow-wrap: anywhere; }
.ev-profil-chiffres { margin: 0; display: flex; gap: 1.6rem; }
.ev-profil-chiffres div { display: flex; flex-direction: column-reverse; gap: .1rem; }
.ev-profil-chiffres dt { font-size: .56rem; letter-spacing: .18em; opacity: .5; }
.ev-profil-chiffres dd { margin: 0; font-family: var(--tb-eiko); font-size: 1.25rem; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ev-profil-bio { margin: 0; font-size: .74rem; line-height: 1.4; opacity: .75; }
.ev-profil-grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.ev-profil-grille li { position: relative; aspect-ratio: 4 / 5; }
.ev-profil-grille a { display: block; width: 100%; height: 100%; overflow: hidden; background: var(--tb-filet); }
.ev-planche .ev-profil-grille img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.ev-profil-grille a:hover img { transform: scale(1.05); }
.ev-profil-num { display: none; }

/* 1 — les cartels : trois colonnes à filets, comme dans « des tableaux ». */
.ev-profils--cartels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2rem; align-content: center; align-items: start; }
/* Trois lignes réservées à la présentation : les grilles s'alignent d'un profil à l'autre. */
.ev-profils--cartels .ev-profil-bio { min-height: calc(3 * 1.4em); }
.ev-profils--cartels .ev-profil { display: flex; flex-direction: column; gap: .85rem; padding-top: .9rem; border-top: 1px solid var(--tb-encre); }
.ev-profils--cartels .ev-profil-chiffres { padding: .55rem 0; border-top: 1px solid var(--tb-filet); border-bottom: 1px solid var(--tb-filet); }
.ev-profils--cartels .ev-profil-grille { max-width: calc((100cqh - 15rem) * 3 * 4 / 5 / 2 + 6px); }

/* 2 — les écrans : trois téléphones, comme les exemples des planches
   précédentes, chacun ouvert sur le profil. */
.ev-profils--ecrans { display: flex; justify-content: center; align-items: center; gap: 1.2rem; }
.ev-profils--ecrans .ev-profil {
    flex: none;
    width: min(calc((100cqw - 2.4rem) / 3), calc((100cqh - 1rem) * 9 / 16));
    aspect-ratio: 9 / 16;
    display: flex; flex-direction: column; gap: .6rem;
    padding: .7rem .75rem 0;
    overflow: hidden;
    background: var(--tb-carte);
    border: 5px solid #0d0c0b;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 22px 50px rgba(0, 0, 0, .18);
}
.ev-profils--ecrans .ev-profil::before { content: ""; flex: none; align-self: center; width: 28%; height: .8rem; border-radius: 999px; background: #0d0c0b; margin-bottom: .2rem; }
.ev-profils--ecrans .ev-profil-nom { font-size: 1.1rem; }
.ev-profils--ecrans .ev-profil-chiffres dd { font-size: 1.05rem; }
.ev-profils--ecrans .ev-profil-bio { font-size: .66rem; }
.ev-profils--ecrans .ev-profil-grille { flex: 1; align-content: start; margin: .2rem -.75rem 0; gap: 2px; }
.ev-profils--ecrans .ev-profil-grille li { aspect-ratio: 3 / 4; }

/* 3 — la pellicule : un profil par bande, ses publications comme des
   images sur un film, perforations en haut, numéros de vue en bas. */
.ev-profils--pellicule { display: flex; flex-direction: column; justify-content: center; gap: 1.2rem; overflow: hidden; }
.ev-profils--pellicule .ev-profil { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); grid-template-rows: auto auto 1fr; gap: .45rem 1.4rem; align-items: start; }
.ev-profils--pellicule .ev-profil-tete,
.ev-profils--pellicule .ev-profil-chiffres,
.ev-profils--pellicule .ev-profil-bio { grid-column: 1; }
.ev-profils--pellicule .ev-profil-nom { font-size: 1.15rem; }
.ev-profils--pellicule .ev-profil-chiffres dd { font-size: 1.05rem; }
.ev-profils--pellicule .ev-profil-bio { font-size: .68rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ev-profils--pellicule .ev-profil-grille {
    grid-column: 2; grid-row: 1 / span 3; align-self: center;
    display: flex; gap: 5px;
    justify-self: start;
    /* La bande prend la largeur qu'il lui reste, décalée selon son rang, sans
       dépasser la hauteur d'un tiers d'écran pour ses vues. */
    width: calc(100% - var(--rang, 0) * 1.2rem);
    max-width: calc(((100cqh - 2.4rem) / 3 - 40px) * 4.8 + 39px);
    margin-left: calc(var(--rang, 0) * 1.2rem);
    padding: 15px 7px 17px;
    background: #141210;
    position: relative;
}
/* Les perforations : une rangée de fenêtres claires le long du bord. */
.ev-profils--pellicule .ev-profil-grille::before {
    content: ""; position: absolute; left: 7px; right: 7px; top: 4px; height: 6px;
    background: repeating-linear-gradient(90deg, rgba(239, 234, 225, .82) 0 9px, transparent 9px 18px);
    border-radius: 1px;
}
.ev-profils--pellicule .ev-profil-grille li { flex: 1 1 0; min-width: 0; aspect-ratio: 4 / 5; }
.ev-profils--pellicule .ev-profil-grille a { background: #26221e; }
.ev-profils--pellicule .ev-profil-num {
    display: block; position: absolute; left: 1px; bottom: -14px;
    font-size: .5rem; letter-spacing: .14em; color: #E8A23A; font-variant-numeric: tabular-nums;
}
.ev-profils--pellicule .ev-profil-num::before { content: "▸ "; }
.ev-planche.est-visible .ev-profils--pellicule .ev-profil-grille { animation: ev-pellicule-entre 1s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--rang, 0) * .12s); }
@keyframes ev-pellicule-entre { from { opacity: 0; transform: translateX(3rem); } }

@media (prefers-reduced-motion: reduce) {
    .ev-planche.est-visible .ev-profils--pellicule .ev-profil-grille { animation: none; }
    .ev-planche .ev-profil-grille img { transition: none; }
}

/* Téléphone : les profils l'un sous l'autre, quelle que soit la mise en page. */
@media (max-width: 800px) {
    .ev-planche .ev-profils { height: auto; container-type: normal; display: flex; flex-direction: column; gap: 1.6rem; }
    .ev-profils .ev-profil,
    .ev-profils--ecrans .ev-profil,
    .ev-profils--pellicule .ev-profil { width: auto; aspect-ratio: auto; display: flex; flex-direction: column; gap: .7rem; padding: .9rem 0 0; border: 0; border-top: 1px solid var(--tb-encre); border-radius: 0; background: none; box-shadow: none; overflow: visible; }
    .ev-profils--ecrans .ev-profil::before { display: none; }
    .ev-profils--cartels .ev-profil-bio { min-height: 0; }
    .ev-profils .ev-profil-grille,
    .ev-profils--ecrans .ev-profil-grille,
    .ev-profils--pellicule .ev-profil-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: auto; max-width: none; margin: 0; padding: 0; background: none; transform: none; animation: none; }
    .ev-profils--pellicule .ev-profil-grille::before, .ev-profils--pellicule .ev-profil-num { display: none; }
    .ev-profils--pellicule .ev-profil-grille li { height: auto; max-height: none; }
}


/* ==========================================================================
   « des villes » : le vrai ciel, l'identificateur d'étoiles et l'antipode
   (theme/villes-ciel-vrai.js, villes-identificateur.js, villes-antipode.js).
   D'après le Star Identifier de l'Amirauté britannique (1941) et la montre
   Tambour Spin Time Air Antipode de Louis Vuitton. Essais : _apercus/villes/.
   ========================================================================== */

/* La toile du vrai ciel remplace le semis d'étoiles de globe.js (qui reste
   là si le script ou les étoiles manquent). */
body.ciel-vrai-actif .ciel { display: none; }

.ciel-vrai {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* La ligne des étoiles, sous l'heure et la météo, du même ton. */
.fiche-etoiles {
    margin: -.35rem 0 .9rem;
    font-size: .95rem;
    opacity: .62;
    text-wrap: balance;
}
.fiche-etoiles::before { content: "✦\00a0"; }

/* L'identificateur d'étoiles : le Star Identifier de 1941, refait pour
   chaque ville. Le rouge est celui de l'impression de l'Amirauté, éclairci
   pour tenir sur le noir ; le bleu de la page sert à la visite guidée, pour
   ne pas se confondre avec le calque. */
body.tpl-page-cities { --rouge-amiraute: #ff5b3d; }

/* --- Le bouton, sous le choix de la langue (même capsule de verre) --- */
.calque-bouton {
    position: absolute;
    z-index: 4;                    /* sous le menu des langues quand il s'ouvre */
    top: 4rem;
    right: 1.2rem;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .85rem .5rem .75rem;
    border-radius: 999px;
    border: .5px solid rgba(255, 255, 255, .16);
    background: rgba(44, 44, 48, .62);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    color: #fff;
    font: inherit;
    font-size: .88rem;
    font-weight: 500;
    cursor: pointer;
}
.calque-bouton svg { color: var(--rouge-amiraute); flex: none; }
.calque-bouton:hover { background: rgba(58, 58, 62, .72); }
.calque-bouton:focus-visible { outline: 2px solid var(--bleu-ios); outline-offset: 2px; }
.calque-bouton-court { display: none; }
@media (max-width: 600px) {
    .calque-bouton { padding: .42rem .6rem .42rem .55rem; font-size: .8rem; gap: .35rem; }
    .calque-bouton-long { display: none; }
    .calque-bouton-court { display: inline; }
}

/* --- La fenêtre : trois colonnes sur grand écran, comme la carte de 1941
       (le mode d'emploi à gauche, la carte, la lecture à droite) --- */
html.calque-ouvert { overflow: hidden; }
.calque {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: minmax(13rem, 18rem) minmax(0, 1fr) minmax(13rem, 18rem);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "tete tete tete" "gauche carte droite" "pied pied pied";
    gap: 1rem 1.6rem;
    padding: max(1rem, env(safe-area-inset-top)) 1.4rem max(1rem, env(safe-area-inset-bottom));
    background: #000;
    color: #f2f2f7;
    text-align: left;
}
.calque[hidden] { display: none; }
.calque-tete { grid-area: tete; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.calque-gauche { grid-area: gauche; min-height: 0; overflow-y: auto; }
.calque-carte { grid-area: carte; min-height: 0; display: grid; place-items: center; }
.calque-droite { grid-area: droite; min-height: 0; overflow-y: auto; }
.calque-pied { grid-area: pied; display: flex; justify-content: center; padding-bottom: .6rem; }

/* Empilée quand la place manque : la carte, la réglette juste dessous, puis
   le mode d'emploi (ou la visite), la lecture et les villes. */
@media (max-width: 1099px) {
    .calque {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        /* Chaque ligne à la hauteur de son contenu : la fenêtre a une hauteur
           fixe, et des lignes « auto » s'y écrasaient les unes sur les autres. */
        grid-auto-rows: max-content;
        grid-template-areas: "tete" "carte" "pied" "gauche" "droite";
        align-content: start;
        overflow-y: auto;
        padding-left: .9rem;
        padding-right: .9rem;
    }
    .calque-gauche, .calque-droite { overflow: visible; max-width: 36rem; width: 100%; justify-self: center; }
    /* La carte prend sa vraie hauteur : un « 100 % » d'une ligne automatique
       ne vaut rien, et la carte débordait sur la réglette. */
    .calque-carte, .calque-gauche, .calque-droite { min-height: auto; }
    .calque-svg { max-height: none; }
}

.calque-sur { margin: 0; font-size: .72rem; letter-spacing: .08em; color: var(--rouge-amiraute); }
.calque-titre { margin: .1rem 0 .15rem; font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; }
.calque-meta { margin: 0; font-size: .85rem; color: rgba(255, 255, 255, .6); font-variant-numeric: tabular-nums; }
.calque-tete-boutons { display: flex; gap: .5rem; flex: none; }

.calque-capsule {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-width: 2.2rem;
    min-height: 2.2rem;
    padding: 0 .85rem;
    border-radius: 999px;
    border: .5px solid rgba(255, 255, 255, .16);
    background: rgba(44, 44, 48, .62);
    color: #fff;
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
}
.calque-capsule:hover { background: rgba(58, 58, 62, .8); }
.calque-fermer { padding: 0; }
.calque-mode-signe {
    display: inline-grid; place-items: center;
    width: 1.1rem; height: 1.1rem;
    border-radius: 50%;
    border: 1px solid currentColor;
    font-size: .7rem; font-weight: 700; line-height: 1;
}
.calque-lien {
    padding: 0; border: 0; background: none;
    color: rgba(255, 255, 255, .55);
    font: inherit; font-size: .85rem;
    text-decoration: underline; text-underline-offset: 3px;
    cursor: pointer;
}
.calque-lien:hover { color: #fff; }
.calque button:focus-visible,
.calque input:focus-visible { outline: 2px solid var(--bleu-ios); outline-offset: 2px; }

.calque h3 { margin: 0 0 .6rem; font-size: .72rem; font-weight: 600; letter-spacing: .08em; color: rgba(255, 255, 255, .5); }

/* --- La visite guidée --- */
.calque-visite {
    margin-bottom: 1.2rem;
    padding: 1rem 1.1rem 1.05rem;
    border-radius: 14px;
    border: .5px solid rgba(10, 132, 255, .6);
    background: rgba(10, 132, 255, .1);
}
.calque-visite[hidden] { display: none; }
.calque-visite-compte { margin: 0; font-size: .72rem; letter-spacing: .06em; color: #7cb8ff; font-variant-numeric: tabular-nums; }
.calque-visite-titre { margin: .2rem 0 .5rem; font-size: 1.15rem; font-weight: 600; color: #fff; letter-spacing: 0; outline: none; }
.calque-visite-texte { margin: 0 0 1rem; font-size: .93rem; line-height: 1.5; color: rgba(255, 255, 255, .85); text-wrap: pretty; }
.calque-visite-boutons { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; }
.calque-visite-boutons > span { display: inline-flex; align-items: center; gap: .9rem; margin-left: auto; }
.calque-visite-suivant { background: var(--bleu-ios); border-color: transparent; font-weight: 600; }
.calque-visite-suivant:hover { background: #2b95ff; }
.calque.en-visite .calque-legende { display: none; }

/* Ce que montre chaque étape : le reste s'efface un peu (pas de transition :
   ce moteur ne les joue pas sur le SVG). */
.calque[data-visite="carte"] .calque-pose { opacity: .2; }
.calque[data-visite="horizon"] .calque-trait,
.calque[data-visite="horizon"] .calque-chiffre,
.calque[data-visite="horizon"] .calque-cardinal,
.calque[data-visite="horizon"] .calque-croix,
.calque[data-visite="horizon"] .calque-fleche { opacity: .14; }
.calque[data-visite="horizon"] .calque-horizon { stroke-width: 3.6; }
.calque[data-visite="zenith"] .calque-etoiles,
.calque[data-visite="zenith"] .calque-direction { opacity: .3; }
.calque[data-visite="zenith"] .calque-trait:not(.calque-direction) { opacity: 1; stroke-width: 1.3; }
.calque[data-visite="heure"] .calque-centrale { stroke-width: 3.4; }
.calque[data-visite="heure"] .calque-heure-piste,
.calque[data-visite="etoile"] .calque-lire,
.calque[data-visite="soeurs"] .calque-soeurs {
    border-radius: 12px;
    box-shadow: 0 0 0 2px var(--bleu-ios), 0 0 0 7px rgba(10, 132, 255, .18);
}
.calque[data-visite="etoile"] .calque-lire,
.calque[data-visite="soeurs"] .calque-soeurs { padding: .7rem .8rem; }
.calque-marque { fill: none; stroke: var(--bleu-ios); stroke-width: 2; }
.calque-marque-texte { fill: #7cb8ff; font-size: 11px; font-weight: 600; }

/* --- La légende --- */
.calque-legende ul { list-style: none; margin: 0 0 .9rem; padding: 0; display: grid; gap: .5rem; font-size: .88rem; color: rgba(255, 255, 255, .8); }
.calque-legende li { display: flex; align-items: center; gap: .65rem; }
.calque-legende li svg { flex: none; width: 22px; overflow: visible; }
.calque-origine { margin: .9rem 0 0; font-size: .78rem; line-height: 1.45; color: rgba(255, 255, 255, .42); }

/* --- La lecture et les villes de même latitude --- */
.calque-lecture { margin: 0; font-size: .95rem; line-height: 1.5; color: rgba(255, 255, 255, .82); text-wrap: pretty; }
.calque-lecture b { color: #fff; font-weight: 600; }
.calque-azimut { color: rgba(255, 255, 255, .45); font-variant-numeric: tabular-nums; }
.calque-soeurs { margin-top: 1.6rem; }
.calque-soeurs[hidden] { display: none; }
.calque-soeurs-texte { margin: 0 0 .7rem; font-size: .85rem; line-height: 1.45; color: rgba(255, 255, 255, .6); }
.calque-soeurs-liste { list-style: none; margin: 0; padding: 0; border-radius: 12px; overflow: hidden; background: rgba(44, 44, 48, .55); }
.calque-soeurs-liste li + li { border-top: .5px solid rgba(255, 255, 255, .1); }
.calque-soeur {
    width: 100%;
    display: flex; align-items: baseline; justify-content: space-between; gap: .8rem;
    padding: .62rem .85rem;
    border: 0; background: none;
    color: var(--bleu-ios);
    font: inherit; font-size: .92rem; text-align: left;
    cursor: pointer;
}
.calque-soeur:hover { background: rgba(255, 255, 255, .05); }
.calque-soeur.est-ici { color: #fff; }
.calque-soeur[aria-pressed="true"] { background: rgba(10, 132, 255, .2); }
.calque-soeur-quand { color: rgba(255, 255, 255, .55); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calque-drapeau { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }

/* --- La réglette et sa frise (les villes de même latitude, à leur heure) --- */
.calque-heure { display: grid; grid-template-columns: auto minmax(12rem, 26rem) minmax(14rem, auto); align-items: center; gap: .3rem 1rem; font-size: .85rem; }
.calque-heure-libelle { color: rgba(255, 255, 255, .5); }
.calque-heure-piste { position: relative; display: block; padding: .2rem .3rem 1rem; direction: ltr; }
.calque-heure input { display: block; width: 100%; margin: 0; accent-color: var(--rouge-amiraute); }
.calque-frise { position: absolute; left: .3rem; right: .3rem; bottom: .2rem; height: 9px; }
.calque-frise-point {
    position: absolute; top: 0;
    width: 7px; height: 7px; margin-left: -3.5px;
    border-radius: 50%;
    border: 1px solid var(--bleu-ios);
    background: #000;
}
.calque-frise-point.est-ici { background: rgba(255, 255, 255, .85); border-color: #fff; }
.calque-frise-point.est-actif { background: var(--bleu-ios); box-shadow: 0 0 0 3px rgba(10, 132, 255, .35); }
.calque-heure output { color: rgba(255, 255, 255, .8); font-variant-numeric: tabular-nums; }

/* --- La carte --- */
.calque-svg { display: block; max-width: 100%; max-height: 100%; touch-action: manipulation; }
.calque-disque { fill: #07080b; }
.calque-parallele { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: .8; }
.calque-equateur { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: .9; }
.calque-bord { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: .8; }
.calque-graduation { stroke: rgba(255, 255, 255, .45); stroke-width: .8; }
.calque-heure-texte { fill: rgba(255, 255, 255, .55); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.calque-petit { fill: rgba(255, 255, 255, .3); font-size: 9.5px; letter-spacing: .04em; }
.calque-figures path { fill: none; stroke: rgba(255, 255, 255, .11); stroke-width: .8; }

.calque .pleine { fill: #fff; }
.calque .creuse { fill: none; stroke: #fff; stroke-width: 1; }
.calque .rond { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: .9; }
.calque-nom { fill: rgba(255, 255, 255, .78); font-size: 10.5px; }
.calque-etoile.sous-horizon { opacity: .28; }
.calque-etoile[tabindex] { cursor: pointer; outline: none; }
.calque-etoile[tabindex]:focus-visible .calque-nom { fill: var(--bleu-ios); }

.calque-trait { fill: none; stroke: var(--rouge-amiraute); stroke-width: 1; opacity: .72; }
.calque-direction { opacity: .45; }
.calque-horizon { fill: none; stroke: var(--rouge-amiraute); stroke-width: 2; opacity: .95; }
.calque-chiffre { fill: var(--rouge-amiraute); font-size: 9.5px; font-variant-numeric: tabular-nums; opacity: .9; }
.calque-cardinal { fill: var(--rouge-amiraute); font-size: 12px; font-weight: 700; }
.calque-croix { stroke: var(--rouge-amiraute); stroke-width: 1.6; }
.calque-centrale { stroke: var(--rouge-amiraute); stroke-width: 2.2; }
.calque-pointe { fill: var(--rouge-amiraute); }
.calque-anneau { fill: none; stroke: #fff; stroke-width: 1.2; }

@media (max-width: 640px) {
    .calque-titre { font-size: 1.1rem; }
    .calque-mode-texte { display: none; }
    .calque-mode { padding: 0; }
    .calque-heure { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
    .calque-heure-piste { width: min(22rem, 86vw); }
}

/* L'antipode.
   Dans la fiche : un petit titre, le « cube » (clin d'œil aux cubes de la
   montre Tambour Spin Time Air Antipode : deux faces, la ville tirée et
   celle de l'antipode, claire le jour, sombre la nuit), une phrase, un
   bouton. Les deux fonds sont ceux du globe : l'ivoire de Plans le jour,
   l'ardoise du globe de nuit. */

.antipode {
    max-width: 24rem;
    margin: 2.2rem auto 0;          /* sous le lien « Lire sur Wikipédia » */
    text-align: center;
}
/* Il ne reçoit le focus que par script, après un saut vers l'antipode. */
.antipode:focus { outline: none; }

.antipode-titre {
    margin: 0 0 .55rem;
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .45);
}

/* --- Le cube ---
   Deux faces côte à côte, séparées par un trait de nuit. Chacune tourne
   d'un quart de tour à l'arrivée, et d'un demi-tour quand le jour passe de
   l'autre côté (script : villes-antipode.js ; sans animation CSS, que le rendu
   sans fenêtre laisse figée à sa première image). */
.antipode-cube {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2px;
    perspective: 700px;
}
.antipode-face {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 7.4rem;
    padding: .7rem .7rem .8rem;
    box-sizing: border-box;
    /* L'axe du cube est derrière la face : elle roule, elle ne bascule pas. */
    transform-origin: 50% 50% -3.7rem;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: background-color .45s ease, color .45s ease;
}
.antipode-face:first-child { border-radius: 14px 5px 5px 14px; }
.antipode-face:last-child  { border-radius: 5px 14px 14px 5px; }
[dir="rtl"] .antipode-face:first-child { border-radius: 5px 14px 14px 5px; }
[dir="rtl"] .antipode-face:last-child  { border-radius: 14px 5px 5px 14px; }

/* Le jour : l'ivoire du globe, un liseré clair en haut comme l'arête d'un
   cube éclairé. La nuit : l'ardoise du globe de nuit, cernée d'un filet. */
.antipode-face.fait-jour {
    background: #f4f1ea;
    color: #1c1c1e;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(0, 0, 0, .08);
}
.antipode-face.fait-nuit {
    background: #2b2e34;
    color: #f4f1ea;
    box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .16);
}

.antipode-moment {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .74rem;
    letter-spacing: .02em;
    opacity: .62;
}
.antipode-moment svg { flex: none; }
.antipode-heure {
    margin: .2rem 0 .4rem;
    font-size: 1.65rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Sans réponse d'Open-Meteo, pas d'heure plutôt qu'une heure fausse. */
.antipode-heure:empty { display: none; }
.antipode-ville {
    font-family: inherit, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
    text-wrap: balance;
}
.antipode-drapeau { margin-inline-start: .3em; font-weight: 400; }
.antipode-pays {
    margin-top: .1rem;
    font-size: .78rem;
    line-height: 1.25;
    opacity: .58;
    overflow-wrap: anywhere;
}

.antipode-ecart {
    margin: .5rem 0 0;
    font-size: .78rem;
    color: rgba(255, 255, 255, .45);
    font-variant-numeric: tabular-nums;
}
.antipode-ecart[hidden] { display: none; }

/* --- La phrase --- */
.antipode-phrase {
    margin: .85rem 0 0;
    font-size: .95rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, .78);
    text-wrap: balance;
}
.antipode-suite {
    margin: .4rem 0 0;
    font-size: .88rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, .52);
    text-wrap: balance;
}
.antipode-suite:empty { display: none; }

/* --- Le bouton : la capsule de verre de la page, en plus petit --- */
.antipode-aller {
    margin: .9rem 0 0;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    max-width: 100%;
    padding: .55rem 1.05rem .55rem .85rem;
    border-radius: 999px;
    border: .5px solid rgba(255, 255, 255, .16);
    background: rgba(44, 44, 48, .62);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    color: #fff;
    font: inherit;
    font-size: .92rem;
    font-weight: 500;
    line-height: 1.25;
    text-align: start;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
}
.antipode-aller svg { flex: none; color: var(--bleu-ios, #0a84ff); }
.antipode-aller span { overflow-wrap: anywhere; }
.antipode-aller:hover { background: rgba(58, 58, 62, .72); }
.antipode-aller:active { transform: scale(.97); }
.antipode-aller:focus-visible { outline: 2px solid var(--bleu-ios, #0a84ff); outline-offset: 3px; }

/* Téléphone : le cube garde ses deux faces côte à côte, un cran plus serré. */
@media (max-width: 400px) {
    .antipode-face { min-height: 6.8rem; padding: .6rem .5rem .7rem; }
    .antipode-heure { font-size: 1.45rem; }
    .antipode-ville { font-size: .88rem; }
}

@media (prefers-reduced-motion: reduce) {
    .antipode-face { transition: none; }
    .antipode-aller { transition: none; }
    .antipode-aller:active { transform: none; }
}


/* ==========================================================================
   « des films » : le générique d'ouverture, comme dans une salle de cinéma
   (theme/films-generique.js et ses deux cartons, joués en alternance).
   Essais et huit autres cartons : _apercus/des-films/title-cards/.
   ========================================================================== */

@font-face { font-family: "Söhne Mono"; src: url("fonts/SohneMono-Buch.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: block; }

/* Le noir de l'attente : posé par page-films.php dès le premier instant, il
   cache la page le temps que le carton arrive (films-generique.js le retire). */
html.generique-attente body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 999;
    background: #000;
}

html.salle-en-cours { overflow: hidden; }

.salle {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #000;
    color: #fff;
    opacity: 1;
    transition-property: opacity;
    transition-timing-function: ease;
    cursor: default;
}
.salle.se-retire { opacity: 0; pointer-events: none; }

/* L'écran : toute la fenêtre ; la scène, où le carton dessine. Les cartons qui
   veulent un format de cinéma (1,85 ou 2,39) le posent eux-mêmes dans la scène. */
.salle-ecran { position: absolute; inset: 0; overflow: hidden; }
.salle-scene { position: absolute; inset: 0; }

/* Le grain de pellicule, par-dessus tout, en mode « lumière » pour ne pas
   ternir les noirs. */
.salle-grain {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    mix-blend-mode: overlay;
    opacity: 0;
}

/* « passer » : discret, en bas à droite ; plus franc au survol et au clavier. */
.salle-passer {
    position: absolute;
    right: 1.2rem;
    bottom: 1.1rem;
    z-index: 2;
    padding: .35rem .7rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(0, 0, 0, .35);
    color: rgba(255, 255, 255, .55);
    font: 400 .78rem/1.2 "PP Neue Montreal", "Helvetica Neue", Arial, sans-serif;
    letter-spacing: .02em;
    cursor: pointer;
    transition: color .2s, border-color .2s;
}
.salle-passer:hover, .salle-passer:focus-visible { color: #fff; border-color: rgba(255, 255, 255, .6); outline: none; }

@media (prefers-reduced-motion: reduce) {
    .salle { transition-duration: .01s !important; }
}

/* « l’écriture » (films-generique-ecriture.js). Les classes
   commencent par ec-. Le rouge carmin de Metadata : un léger dégradé vers la
   droite, les coins un peu plus sombres ; la ligne est dessinée dans la toile. */
.ec-fond {
    --ec-pret: 1;              /* le script sait ainsi que la feuille est là */
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 78% at 44% 47%, rgba(40, 0, 0, 0) 52%, rgba(40, 0, 0, .34) 100%),
        linear-gradient(90deg, #a3080b 0%, #970709 45%, #7c0507 100%);
    opacity: 0;
}
.ec-toile {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
/* Pour les lecteurs d'écran : le nom, que la ligne écrit. */
.ec-lecteur {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ==========================================================================
   « la distribution » (films-generique-distribution.js).
   Les classes commencent par di-. Les places des lettres sont calculées par
   le script ; ici, la matière : le fond, la police du bloc, les points.
   ========================================================================== */

.di-racine {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* Le fond : un noir bleuté, une tache bleue floue en haut à gauche, et son
   écho, très faible, qui remonte du bas. */
.di-fond {
    position: absolute;
    inset: 0;
    opacity: 0;
    /* Des dégradés à paliers serrés, la chute en douceur : pas de bord visible.
       Les tailles suivent le plus grand côté, sans dépasser les deux tiers de
       la largeur : une tache, pas un bandeau, en portrait. */
    background:
        radial-gradient(min(40vmax, 66vw) min(27vmax, 48vh) at 6% 2%,
            rgba(27, 58, 122, .58), rgba(27, 58, 122, .46) 16%, rgba(27, 58, 122, .31) 33%,
            rgba(27, 58, 122, .18) 50%, rgba(27, 58, 122, .08) 67%, rgba(27, 58, 122, .025) 84%, rgba(27, 58, 122, 0) 100%),
        radial-gradient(min(14vmax, 26vw) min(12vmax, 22vh) at 17% 13%,
            rgba(27, 58, 122, .22), rgba(27, 58, 122, .1) 45%, rgba(27, 58, 122, 0) 100%),
        radial-gradient(36vmax 17vmax at 64% 112%,
            rgba(27, 58, 122, .2), rgba(27, 58, 122, .12) 35%, rgba(27, 58, 122, .045) 70%, rgba(27, 58, 122, 0) 100%),
        #05070d;
}

/* Le bloc : Söhne Mono bas de casse, le corps posé par le script. */
.di-bloc,
.di-points,
.di-titre {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.di-bloc {
    font-family: "Söhne Mono", ui-monospace, "SF Mono", Menlo, monospace;
    font-weight: 400;
    font-size: 20px;
    color: #e3141b;
}
.di-l {
    position: absolute;
    left: 0;
    top: 0;
    width: 1em;
    height: 1em;
    line-height: 1;
    text-align: center;
    white-space: pre;
    opacity: 0;
}
.di-sonde { visibility: hidden; }

/* Une marque sans taille, posée sur la ligne de base : le script y lit où
   tombe la ligne de base d'une lettre. */
.di-marque {
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: baseline;
}

/* « des films » dans la Times de la page : police, corps et couleur copiés du
   titre par le script ; l'ombre, celle du titre. */
.di-titre span {
    position: absolute;
    left: 0;
    top: 0;
    white-space: pre;
    line-height: normal;
    text-shadow: 0 1px 14px rgba(0, 0, 0, .55);
    opacity: 0;
}

/* Le fantôme : là où serait le titre si celui de la page manquait (au centre,
   au corps du titre), invisible ; on n'en lit que la place. */
.di-fantome {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    font: 400 clamp(2rem, 6vw, 3.6rem)/1.35 "Times New Roman", Times, serif;
    letter-spacing: .01em;
    white-space: nowrap;
    visibility: hidden;
}

/* Les points blancs qui scintillent entre les lettres. */
.di-point {
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 3px 1px rgba(255, 255, 255, .55);
    opacity: 0;
}