/* ─────────────────────────────────────────────────────────────────────────────
   public/css/events-timeline.css
   Frise d'événements — styles partagés par les trois pages qui l'affichent :
   /events.html (tout le registre), /museumweek-events.html et
   /women-actions.html (bridées sur un programme).
   Extrait du <style> inline d'events.html le 2026-09-08, à l'identique, pour
   qu'une correction profite aux trois pages au lieu d'être recopiée.
   ───────────────────────────────────────────────────────────────────────── */

  :root {
    --paper:   #F4F3EF;
    --paper-2: #E9E8E2;
    --ink:     #1A1A1A;
    --ink-2:   #3A3A3A;
    --ink-3:   #5C5C5C;
    --ink-4:   #8C8C8C;
    --rule:    #C0BEBC;
    --accent:  #D25D38;
    --f-display: 'Fraunces', Georgia, serif;
    --f-body:    'Plus Jakarta Sans', system-ui, sans-serif;
    --f-mono:    'Plus Jakarta Sans', system-ui, sans-serif;
    --container: 1280px;
  }
  * { box-sizing: border-box; }
  body { background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased;
         font-family: var(--f-body); margin: 0; }
  .wrap { max-width: var(--container); margin: 0 auto; padding: 0 40px; }
  .eyebrow { font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em;
             text-transform: uppercase; font-weight: 500; color: var(--ink-3); }

  /* ── filtres ─────────────────────────────────────────────────
     Les deux barres de nav sont elles-mêmes `sticky` : la barre de filtres doit
     se coller SOUS elles, sinon les trois se superposent au même `top: 0`.
     z-index inférieur à celui des navs.

     LA HAUTEUR VIENT DES VARIABLES, JAMAIS D'UNE CONSTANTE — corrigé le
     2026-09-10. Cette règle codait `top: 135px`, la somme à la main de 90 et 45.
     Or `nav-c4c.css` réduit la barre 1 à 72 px de `min-height` sous 1080 px de
     large (et 64 sous 900) : entre 901 et 1080 px, la pile réelle fait 119 px
     et non 135, et cette barre flottait 16 px trop bas — on voyait défiler le
     contenu de la page dans l'interstice, signalé à 1062 px de large.

     C'est mot pour mot la panne décrite en tête de nav-c4c.css (« les pages
     codaient top:48px et top:96px en dur… les constantes dataient d'un masthead
     plus court et n'ont pas suivi »), et la raison d'être des variables :
     `nav-c4c.js` mesure les barres au chargement ET au redimensionnement.
     exhibition-page.css les utilise déjà ainsi ; c'était le dernier `top` en dur
     du projet. Ne pas y remettre de nombre. */
  .filters { position: sticky; top: calc(var(--nav1-h) + var(--nav2-h)); z-index: 30;
             background: var(--paper); border-bottom: 1px solid var(--rule); }
  @media (max-width: 900px) { .filters { position: static; } }
  .filters .wrap { display: flex; flex-wrap: wrap; gap: 22px; align-items: center;
                   padding-top: 12px; padding-bottom: 12px; }
  .fgroup { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
  .fgroup > .eyebrow { margin-right: 2px; }
  .chip { font-family: var(--f-mono); font-size: 11px; letter-spacing: .03em; font-weight: 500;
          border: 1px solid var(--rule); background: none; color: var(--ink-3);
          padding: 4px 11px; border-radius: 999px; cursor: pointer;
          transition: background .13s, color .13s, border-color .13s; }
  .chip:hover { border-color: var(--ink-3); color: var(--ink); }
  .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  .count { margin-left: auto; font-family: var(--f-mono); font-size: 11px; color: var(--ink-4);
           white-space: nowrap; }

  /* ── frise ───────────────────────────────────────────────── */
  .edition { border-bottom: 1px solid var(--rule); padding: 0 0 8px; }
  .edition-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
                  padding: 34px 0 18px; }
  .edition-year { font-family: var(--f-display); font-size: clamp(38px,7vw,64px); line-height: 1;
                  font-weight: 300; letter-spacing: -.02em; }
  .edition-meta { font-family: var(--f-body); font-size: 14px; color: var(--ink-3); }
  .edition-note { font-family: var(--f-body); font-size: 14px; line-height: 22px;
                  color: var(--ink-2); background: var(--paper-2); border-left: 2px solid var(--accent);
                  padding: 12px 16px; margin: 0 0 20px; max-width: 760px; }

  /* L'édition MuseumWeek est le cadre de son année, pas une carte parmi les autres :
     elle coiffe la grille. Reste une fiche à part entière — cliquable, filtrable.
     L'affiche est cadrée à 294 px, la largeur d'une carte de la grille : une affiche
     de festival tient sa force de sa taille, et à 168 px elle passait pour une
     vignette à côté des visuels d'événements. */
  .edition-banner { display: grid; grid-template-columns: 294px 1fr; gap: 28px;
                    align-items: start; margin: 0 0 30px; max-width: 1000px;
                    background: none; border: 0; padding: 0; text-align: left;
                    font: inherit; color: inherit; cursor: pointer; }
  @media (max-width: 780px) {
    .edition-banner { grid-template-columns: 200px 1fr; gap: 20px; }
  }
  .edition-banner:hover .edition-theme { color: var(--accent); }
  .edition-banner img { width: 100%; height: auto; display: block;
                        border: 1px solid var(--rule); }
  .edition-theme { display: block; font-family: var(--f-display);
                   font-size: clamp(19px,2.4vw,25px);
                   line-height: 1.22; font-weight: 300; margin: 0 0 8px; }
  .edition-desc { display: block; font-family: var(--f-body); font-size: 14px;
                  line-height: 22px; color: var(--ink-2); margin: 0; }
  .edition-part { display: block; font-family: var(--f-body); font-size: 13px;
                  line-height: 20px; color: var(--ink-3); margin: 12px 0 0;
                  padding-top: 10px; border-top: 1px solid var(--rule); }
  .edition-part-lib { display: block; font-family: var(--f-mono); font-size: 9px;
                      letter-spacing: .09em; text-transform: uppercase; font-weight: 600;
                      color: var(--ink-4); margin-bottom: 3px; }
  @media (max-width: 620px) {
    .edition-banner { grid-template-columns: 1fr; gap: 16px; max-width: 340px; }
  }

  /* Publications citées. Le visuel vient du CDN de X, jamais de chez nous. */
  .d-tweets { list-style: none; margin: 0; padding: 0;
              display: grid; gap: 1px; background: var(--rule); }
  .d-tweets a { display: block; background: var(--paper); padding: 12px 14px;
                text-decoration: none; color: inherit; transition: background .13s; }
  .d-tweets a:hover { background: var(--paper-2); }
  .tw-compte { display: block; font-family: var(--f-mono); font-size: 10px;
               letter-spacing: .05em; color: var(--accent); margin-bottom: 4px; }
  .tw-texte { display: block; font-family: var(--f-body); font-size: 13px;
              line-height: 20px; color: var(--ink-2); }
  .tw-tete { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-bottom: 5px; }
  .tw-auteur { font-family: var(--f-body); font-size: 13px; font-weight: 600; color: var(--ink); }
  .tw-img { display: block; width: 100%; height: auto; margin: 10px 0 0;
            border: 1px solid var(--rule); background: var(--paper-2); }
  .tw-avert { font-family: var(--f-body); font-size: 12px; line-height: 18px;
              color: var(--ink-4); margin: 10px 0 0; max-width: 520px; }

  .d-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
  .d-tags span { font-family: var(--f-mono); font-size: 11px; letter-spacing: .02em;
                 border: 1px solid var(--rule); color: var(--ink-2);
                 padding: 3px 9px; border-radius: 999px; }

  /* `min(288px, 100%)` et non `288px` : sous ~330 px de large, une colonne minimale
     fixe dépasse l'espace disponible et fait déborder la page horizontalement
     (constaté à 304 px). Le `min()` laisse la colonne se réduire au conteneur. */
  /* ── MASONRY, pas une grille — troisième correctif, le 2026-09-10 ──────────
     Deux essais insuffisants avant celui-ci, tous deux en restant sur CSS
     Grid, qui force TOUTES les cartes d'une même rangée à la hauteur de la
     plus haute :

     1. Par défaut (`stretch`), la carte elle-même s'étire sur cette hauteur.
        Une carte sans image ni intervenant (3 lignes de texte) tombant dans
        la rangée d'un événement à neuf ou treize intervenants se retrouvait
        avec 650-900 px de blanc en dessous.
     2. `align-items: start` (2026-09-09) arrête l'étirement de la CARTE,
        mais la rangée reste haute : l'espace se déplace sous la carte plutôt
        que dedans. `background: var(--paper)` (même jour, un peu plus tard)
        rend cet espace blanc au lieu de gris — repéré aux deux tentatives
        comme insuffisant : un rectangle vide reste un rectangle vide, gris
        ou blanc. Une carte de deux lignes suivie de 400+ px de rien continue
        à se lire comme cassée — ce n'était pas un problème de couleur.

     `columns` (comme un journal) n'a pas de notion de rangée : chaque carte
     prend la place de la précédente DANS SA COLONNE, sans se soucier des
     autres colonnes. Un événement à treize intervenants n'affecte plus que
     sa propre colonne — plus aucun espace à combler, d'aucune couleur.

     Contrepartie, déjà pesée : l'ordre de lecture visuel devient par colonne
     (on descend la première avant de passer à la seconde) plutôt que par
     rangée. L'ordre du DOM ne change pas : tabulation au clavier et lecteur
     d'écran suivent toujours l'ordre chronologique des données, seule la
     position visuelle bouge.

     `display: block` explicite, et pas juste omis : `.grid` porte le même
     nom que l'utilitaire Tailwind `.grid { display: grid }`
     (app.tailwind.css, chargé avant cette feuille) — `columns` n'a aucun
     effet sur une boîte en `display: grid`, et sans cette ligne Tailwind
     l'emporte en silence sur la seule propriété `display`.

     `break-inside: avoid` empêche qu'une carte soit tranchée par un saut de
     colonne. `margin-bottom` remplace la part verticale de l'ancien `gap` :
     `column-gap` n'écarte que les colonnes entre elles, pas les cartes
     empilées à l'intérieur d'une même colonne. `background: var(--paper)`
     est conservé du correctif précédent : les interstices d'1 px se fondent
     dans la page plutôt que de dessiner un filet gris. */
  .grid { display: block; columns: 288px; column-gap: 1px; background: var(--paper); border-top: 1px solid var(--rule); }
  .card { background: var(--paper); padding: 18px 20px 20px; display: flex; flex-direction: column;
          gap: 9px; cursor: pointer; transition: background .13s; border: none; text-align: left;
          font: inherit; color: inherit; width: 100%; break-inside: avoid; margin-bottom: 1px; }
  .card:hover { background: var(--paper-2); }
  .card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .role { font-family: var(--f-mono); font-size: 9px; letter-spacing: .09em; text-transform: uppercase;
          font-weight: 600; padding: 2px 7px; border-radius: 2px; white-space: nowrap; }
  .role-organise   { background: var(--ink);    color: var(--paper); }
  .role-co_organise{ background: var(--accent); color: #fff; }
  .role-finance    { background: #8A6D3B;       color: #fff; }
  .role-labellise  { background: none; color: var(--ink-3); border: 1px solid var(--rule); }
  .role-presence   { background: none; color: var(--ink-3); border: 1px dashed var(--rule); }
  /* Soutien en nature (affichage, mise à disposition) : ce n'est pas un rendez-vous.
     Traité comme `presence` — présent dans la frise, jamais confondu avec un événement produit. */
  .role-soutien    { background: none; color: var(--ink-3); border: 1px dashed var(--rule); }
  .card-date { font-family: var(--f-mono); font-size: 10px; letter-spacing: .05em; color: var(--ink-4); }
  .card-title { font-family: var(--f-display); font-size: 17px; line-height: 24px; font-weight: 400; margin: 0; }
  .card-place { font-family: var(--f-body); font-size: 13px; line-height: 19px; color: var(--ink-3); }
  .card-co { font-family: var(--f-body); font-size: 12px; line-height: 17px; color: var(--accent);
             margin: -4px 0 0; }
  .card-replay { font-family: var(--f-mono); font-size: 10px; letter-spacing: .05em; color: var(--ink-3);
                 display: inline-flex; align-items: center; gap: 4px; }
  /* Description de la fiche, coupée à quatre lignes — ajoutée le 2026-09-10 :
     la carte n'en montrait aucune, ce qui faisait paraître vides 57 fiches sans
     image ni intervenant dont la description, elle, existait bien.
     `line-clamp` plutôt qu'une troncature à N signes dans le JS : la coupe suit
     la largeur réelle de la carte (qui varie avec le nombre de colonnes) et ne
     tombe jamais au milieu d'un mot. Le texte entier reste dans le DOM ; la
     fiche est l'endroit où on le lit en entier.
     `-webkit-` conservé : la version préfixée reste la seule comprise par
     Safari et par les Chrome un peu anciens, `line-clamp` standard prend le
     relais ailleurs. */
  .card-desc { font-family: var(--f-body); font-size: 13px; line-height: 19px; color: var(--ink-2);
               margin: 0; display: -webkit-box; -webkit-box-orient: vertical;
               -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
  /* Intervenants sous le visuel : un aperçu de trois, pas la liste — plafond
     ajouté le 2026-09-09, cf. `.card-people-plus` et le commentaire de
     `.card-thumb` juste en dessous, qui explique pourquoi les deux plafonds
     (personnes ET image) sont arrivés ensemble. La fiche, elle, les liste
     tous : voir `ouvrir()` dans events-timeline.js, non plafonnée. */
  .card-people { margin: 0; padding-top: 9px; border-top: 1px solid var(--rule); }
  .card-people dt { font-family: var(--f-mono); font-size: 9px; letter-spacing: .12em;
                    text-transform: uppercase; font-weight: 500; color: var(--ink-4);
                    margin-bottom: 6px; }
  .card-people dd { font-family: var(--f-body); font-size: 12px; line-height: 16px;
                    color: var(--ink-3); margin: 0 0 5px; }
  .card-people dd:last-child { margin-bottom: 0; }
  .card-people b { font-weight: 600; color: var(--ink-2); }
  /* Le repère du plafond : ni un nom ni une qualité, l'italique et la couleur
     la plus pâle du jeu de tokens (`--ink-4`, déjà celle de `dt`) l'écartent
     visuellement des vraies entrées au-dessus. */
  .card-people-plus { font-style: italic; color: var(--ink-4); }
  /* Format des vignettes — aucun cadre imposé.
     Le corpus mêle cartons 16/9, affiches verticales, portraits carrés et photos.
     Deux fausses pistes essayées le 2026-08-30 : `cover` dans un cadre fixe, qui
     décapitait les affiches (l'information y est le cadre entier) ; puis `contain`
     sur un fond flouté de la même image, qui entourait chaque vignette d'un halo
     sale sans rien montrer de plus. La bonne réponse était de ne pas imposer de
     cadre du tout : l'image garde ses proportions, rien n'est coupé, rien à combler.

     `max-height: 320px` ajouté le 2026-09-09, avec le plafond de `.card-people`
     ci-dessus : les deux seules choses qui peuvent rendre une carte démesurée
     (une affiche verticale à 540 px, une liste de treize intervenants). Au-delà,
     `object-fit: contain` réduit l'image entière, avec le fond de carte en
     bandes sur les côtés — jamais un recadrage, jamais un halo. Le passage au
     masonry (commentaire de `.grid` ci-dessus) rend cette carte indépendante de
     ses voisines, mais une carte de plusieurs centaines de pixels reste
     disproportionnée dans sa PROPRE colonne : les deux plafonds gardent leur
     utilité. */
  .card-thumb { display: block; width: 100%; height: auto; max-height: 320px; margin-top: 2px;
                background: var(--paper-2); object-fit: contain; }

  /* ── panneau de détail ───────────────────────────────────── */
  dialog#detail { border: none; padding: 0; max-width: 720px; width: calc(100% - 32px);
                  background: var(--paper); color: var(--ink); }
  dialog#detail::backdrop { background: rgba(26,26,26,.62); }
  .d-body { padding: 30px 34px 34px; }
  .d-close { position: sticky; top: 0; float: right; background: var(--paper); border: none;
             font-size: 22px; line-height: 1; color: var(--ink-3); cursor: pointer; padding: 4px 6px; }
  .d-title { font-family: var(--f-display); font-size: 27px; line-height: 34px; font-weight: 400;
             margin: 6px 0 12px; }
  .d-desc { font-family: var(--f-body); font-size: 15px; line-height: 24px; color: var(--ink-2); }
  .d-sec { margin-top: 22px; }
  .d-sec h4 { font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
              font-weight: 500; color: var(--ink-3); margin: 0 0 8px; }
  .d-people { display: flex; flex-direction: column; gap: 5px; font-size: 14px; line-height: 20px; }
  .d-people b { font-weight: 600; }
  .d-people span { color: var(--ink-3); }
  .d-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 10px; }
  .d-gal figure { margin: 0; }
  .d-gal img { display: block; width: 100%; height: auto; background: var(--paper-2); }
  .d-gal figcaption { font-family: var(--f-mono); font-size: 9px; letter-spacing: .04em;
                      color: var(--ink-4); margin-top: 4px; }
  .d-links a { display: inline-block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em;
               color: var(--ink); text-decoration: underline; text-underline-offset: 3px; margin-right: 16px; }
  .d-proof { font-family: var(--f-mono); font-size: 10px; color: var(--ink-4); margin-top: 20px;
             padding-top: 12px; border-top: 1px solid var(--rule); line-height: 16px; }

  .empty { padding: 60px 0; text-align: center; color: var(--ink-3); font-size: 15px; }
  @media (max-width: 720px) {
    .wrap { padding: 0 20px; }
    .filters .wrap { gap: 12px; }
    .count { margin-left: 0; width: 100%; }
  }