/* ==========================================================================
   Compagnie Logos — module Agenda
   N'invente aucune valeur : tout vient de logos-charte.css.
   Les seules valeurs propres à ce module sont des géométries (gouttières,
   largeurs de colonne) et un gris de texte pour les dates passées.
   ========================================================================== */

:root {
  --agenda-colonne-date: 108px;   /* largeur de la colonne de gauche, desktop */
  --agenda-gouttiere:    28px;
  --agenda-passe-opacite: 0.72;   /* atténuation des dates passées : autorisée sur le texte */
}

/* --- En-tête de page ---------------------------------------------------- */

.agenda-entete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--agenda-gouttiere);
  margin-bottom: 26px;
}

.agenda-titre {                 /* Logos Batard, jamais sous 56 px */
  font-size: clamp(42px, 7vw, 72px);
  margin: 0;   /* sans quoi la marge par défaut des h1 le posait plus bas que les autres titres */
}

.agenda-archives {
  font-family: var(--font-texte);
  font-weight: 500;
  font-size: 15px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
}

.agenda-archives select {
  font-family: var(--font-texte);
  font-size: 15px;
  text-transform: uppercase;
  height: 35px;
  padding: 0 10px;
  border: 2px solid var(--logos-noir);
  background: var(--logos-blanc);
  border-radius: 0;
}

/* --- Filtres ------------------------------------------------------------- */

/* Les filtres sont un outil, pas un contenu : pas de cadre, pas de filets,
   juste un léger retrait par la composition. */
.agenda-filtres fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

.agenda-filtres {
  padding: 6px 0 0;
  display: grid;
  gap: 14px;
}

.agenda-filtres__legende {
  font-family: var(--font-texte);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--logos-noir, #000);
  margin-bottom: 8px;
}

.agenda-filtres__lot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Les chips reprennent la géométrie du bouton de la charte, en 35 px.
   Aplat jaune à l'état actif : un filtre est un état de navigation, il prend
   donc le même jaune que l'entrée de bandeau active. Le noir est réservé aux
   boutons d'action depuis l'amendement du 2026-08-08. */
.agenda-chip {
  display: inline-flex;
  align-items: center;
  height: 35px;
  padding: 0 18px;
  font-family: var(--font-texte);
  font-weight: 500;
  font-size: 15px;
  text-transform: uppercase;
  background: var(--logos-blanc);
  color: var(--logos-noir);
  box-shadow: inset 0 0 0 2px var(--logos-noir);
  border: 0;
  cursor: pointer;
}

.agenda-chip--sans-filet { box-shadow: none; padding-left: 10px; padding-right: 14px; }

.agenda-chip__picto { width: 17px; height: 17px; margin-right: 8px; flex: none; }
.agenda-chip__picto svg { width: 100%; height: 100%; display: block; }

/* Filtre sélectionné : fond noir, texte blanc — comme partout (décision
   compagnie 2026-08-10). */
.agenda-chip[aria-pressed="true"] {
  background: var(--logos-noir, #000);
  color: var(--logos-blanc, #fff);
  box-shadow: none;
}


.agenda-bascule {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-texte);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.75;
  cursor: pointer;
}

/* Case à cocher aux couleurs de la charte : le bleu système n'y existe pas.
   accent-color couvre les navigateurs récents ; la version dessinée en
   dessous garantit le même rendu partout. */
.agenda-bascule input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 2px solid var(--logos-noir);
  border-radius: 0;
  background: var(--logos-blanc);
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  flex: none;
}

/* Cochée : boîte noire + COCHE blanche bien visible (pas un simple carré). */
.agenda-bascule input[type="checkbox"]::before {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--logos-blanc);
  clip-path: polygon(14% 44%, 0 62%, 38% 100%, 100% 18%, 84% 2%, 38% 64%);
  transform: scale(0);
}

.agenda-bascule input[type="checkbox"]:checked { background: var(--logos-noir); }
.agenda-bascule input[type="checkbox"]:checked::before { transform: scale(1); }

.agenda-bascule input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--logos-encre);
  outline-offset: 2px;
}

.agenda-decompte {
  font-family: var(--font-texte);
  font-weight: 300;
  font-style: italic;
  font-size: 12px;
  margin: 14px 0 0;
}

/* --- Intertitres de section --------------------------------------------- */

.agenda-section {
  font-family: var(--font-sous-titre);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 40px 0 0;
  padding-bottom: 10px;
  border-bottom: var(--filet-fin) solid var(--logos-encre);
}

/* --- Ligne d'agenda ----------------------------------------------------- */

/* L'attribut hidden posé par le filtre doit l'emporter sur display:grid —
   sans cette règle, la spécificité de .agenda-ligne écrase le [hidden] du
   navigateur et le filtrage ne masque rien. */
.agenda-ligne[hidden],
.agenda-annee-titre[hidden] {
  display: none;
}



/* Jour et mois calés sur le même bord droit : chacun en bloc aligné à
   droite, et le crénage résiduel de Logos Sans (letter-spacing appliqué
   après le dernier chiffre) est compensé, sinon le grand corps paraît
   décalé d'un cheveu par rapport au petit. */











/* --- Ligne de fabrique -------------------------------------------------- */
/* Même grille, hiérarchie plus basse : pas de Logos Sans, pas d'aplat de
   cycle. La fabrique est hors cycle par défaut (voir logos_cycle_class). */






.agenda-suite {
  font-family: var(--font-texte);
  font-weight: 500;
  font-size: 15px;
  text-transform: uppercase;
  padding: 16px 0 0;
  margin: 0;
}

/* --- Dates passées ------------------------------------------------------ */
/* L'atténuation passe par l'opacité, autorisée sur le texte, plus la
   réduction de corps et le changement de famille. Aucune couleur inventée.
   L'opacité porte sur la ligne entière : le badge de cycle s'atténue avec
   elle, ce qui est le comportement voulu. */

.agenda-passees { margin-top: 40px; }

.agenda-passees__bouton {
  font-family: var(--font-texte);
  font-weight: 500;
  font-size: 15px;
  text-transform: uppercase;
  background: none;
  border: 0;
  padding: 12px 0;
  cursor: pointer;
  color: var(--logos-encre);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}






/* --- Vide --------------------------------------------------------------- */

.agenda-vide {
  font-family: var(--font-texte);
  font-size: 14px;
  line-height: 1.75;
  padding: 40px 0;
}

/* --- Mobile 390 --------------------------------------------------------- */

@media (max-width: 1100px) {
  :root { --agenda-colonne-date: 88px; --agenda-gouttiere: 20px; }
}

@media (max-width: 780px) {
  :root { --agenda-colonne-date: 64px; --agenda-gouttiere: 14px; }

  .agenda-entete { flex-direction: column; align-items: flex-start; gap: 16px; }

  /* La ligne passe en deux rangées : la date au-dessus du corps, le bouton
     en dessous — trois colonnes ne tiennent pas sur un téléphone. */
      
        .agenda-chip, .agenda-archives select { height: 48px; }
}


/* ==========================================================================
   Agenda v2 (handoff août 2026)
   ========================================================================== */

/* Années en liste, en tête à droite, la courante en gras. */
.agenda-annees {
  display: flex;
  gap: 14px;
  font-family: var(--font-sous-titre);
  font-size: 13px;
  letter-spacing: 0.5px;
}
.agenda-annees a { text-decoration: none; color: var(--logos-noir, #000); }
/* Survol : règle globale (logos-chrome.css) — aplat encre, texte blanc. */
.agenda-annees a:hover, .agenda-annees a:focus-visible { background: var(--logos-encre); color: var(--logos-blanc); }
.agenda-annees [aria-current] { font-weight: 700; color: var(--logos-noir); }

/* Filets de séparation en gris v2 ; les lignes publiques sont cerclées de
   filets noirs pleins, les fermées passent en encre à 60 %. */



/* Type d'événement : Oswald + icône filaire. */

/* Étiquette spectacle : aplat jaune (la couleur d'appartenance vient du
   cycle par la cascade existante ; hors cycle, jaune de la charte). */

.agenda-section { display: flex; align-items: center; gap: 10px; }
.agenda-section__puce, .agenda-suite__puce { width: 12px; height: 14px; }

.agenda-suite {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sous-titre);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 22px 0 0;
}
.agenda-suite a { text-decoration: none; color: var(--logos-noir); }
.agenda-suite a:hover, .agenda-suite a:focus-visible { background: var(--logos-encre); color: var(--logos-blanc); }

/* Mobile v2 : les lignes touchent les bords de l'écran. */
@media (max-width: 780px) {
    .agenda-annees { flex-wrap: wrap; }
}


/* Titre d'année intercalé dans la vue « À venir » de l'agenda */
.agenda-annee-titre {
  font-family: Oswald, sans-serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.4px;
  /* serré : le padding des lignes (20 px) fournit déjà l'air autour */
  margin: 14px 0 0;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--logos-noir, #001721);
}
.agenda-annee-titre:first-child { margin-top: 0; }

/* Masquage visuel accessible (lu par les lecteurs d'écran) */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}


/* ============================================================
   Ligne d'agenda — grille 4 colonnes (calque maquette)
   date · type · spectacle · lieu/fin
   ============================================================ */
.agenda-ligne {
  color: var(--logos-noir, #000);
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 0.9fr);
  gap: 26px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid var(--filet-agenda, #d4d4d4);
}

/* Colonne 1 : date, alignée à droite dans sa colonne */
.agenda-ligne__date { text-align: right; }
.agenda-ligne__jour {
  display: block;
  font-family: Oswald, sans-serif; font-weight: 700;
  font-size: 21px; line-height: 1;
}
.agenda-ligne__mois {
  display: block;
  font-family: Oswald, sans-serif; font-weight: 500;
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  margin-top: 3px;
}

/* Colonne 2 : picto AU-DESSUS du titre, systématiquement (décision
   compagnie 2026-08-09), calés à gauche. */
.agenda-ligne__type { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.agenda-ligne__picto { width: 22px; height: 19px; flex: none; }  /* picto billetterie, un peu plus gros */
.agenda-ligne__picto svg { width: 100%; height: 100%; display: block; }
.agenda-ligne__type-texte {
  font-family: Oswald, sans-serif; font-weight: 700;
  font-size: 18px; text-transform: uppercase; letter-spacing: 0.5px;
  line-height: 1.1;
}

/* Colonne 3 : spectacle */
.agenda-ligne__spectacle {
  font-family: Oswald, sans-serif; font-weight: 700;
  font-size: 18px; text-transform: uppercase; letter-spacing: 0.5px;
  color: inherit; text-decoration: none;
}

/* Lignes de fabrique : AUCUNE couleur sous les textes ou titres (décision
   compagnie 2026-08-09) — le nom du spectacle reste en texte nu, seule
   l'icône porte la couleur du cycle. */
.agenda-ligne__spectacle:hover, .agenda-ligne__spectacle:focus-visible { background: var(--logos-encre); color: var(--logos-blanc); text-decoration: none; }

/* Colonne 4 : lieu, mention, bouton */
.agenda-ligne__fin { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.agenda-ligne__lieu { margin: 0; font-size: 14px; line-height: 1.5; }
.agenda-ligne__mention {
  margin: 0;
  font-family: Oswald, sans-serif; font-weight: 500;
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px;
}
/* « sur inscription » cliquable : gras, survol selon la règle globale. */
.agenda-ligne__mention a { font-weight: 700; text-decoration: none; }
.agenda-ligne__mention a:hover,
.agenda-ligne__mention a:focus-visible { background: var(--logos-encre, #001721); color: var(--logos-blanc, #fff); }
.agenda-ligne__reserver {
  display: inline-flex;
  align-items: center;
  height: 33px;
  padding: 0 20px;
  box-shadow: inset 0 0 0 2px var(--logos-noir, #000);
  color: var(--logos-noir, #000);
  /* bouton à fond blanc : Oswald (la Logos Sans n'existe que sur aplat) */
  font-family: var(--font-sous-titre, Oswald, sans-serif); font-weight: 500;
  font-size: 14px; text-transform: uppercase; letter-spacing: 1px;
  text-decoration: none;
}
.agenda-ligne__reserver:hover, .agenda-ligne__reserver:focus-visible { background: var(--logos-encre); color: var(--logos-blanc); box-shadow: none; }

/* Mise en valeur des dates PUBLIQUES : trait noir à gauche + grande date.
   Le trait (4 px) et son retrait (18 px) sont DÉDUITS par une marge négative :
   la colonne date reste alignée à gauche avec celle des lignes non publiques,
   le trait vit dans la gouttière. */
.agenda-ligne--publique {
  padding-left: 18px;
  border-left: 4px solid var(--logos-noir, #000);
  margin-left: -22px;
}
.agenda-ligne--publique .agenda-ligne__jour { font-size: 40px; }
.agenda-ligne--publique .agenda-ligne__mois { font-size: 13px; }

/* Dates non publiques : AUCUNE baisse d'opacité — seule la présence/absence
   du trait noir à gauche distingue les dates publiques des autres. Le titre
   (colonne 2) passe simplement en graisse normale. */
.agenda-ligne--fermee .agenda-ligne__type-texte { font-weight: 400; }

/* Date passée : texte estompé (l'opacité est autorisée sur le texte —
   elle s'applique à TOUS les événements passés, publics ou non). */
.agenda-ligne--passee { opacity: 0.6; }
.agenda-ligne--annulee .agenda-ligne__spectacle { text-decoration: line-through; }

@media (max-width: 780px) {
  .agenda-ligne {
    grid-template-columns: 64px 1fr;
    gap: 6px 16px;
  }
  .agenda-ligne__spectacle-col { grid-column: 2; }
  .agenda-ligne__fin { grid-column: 2; }
  .agenda-ligne__type { grid-column: 2; }
  .agenda-ligne__date { grid-row: 1 / span 3; }

  /* Mobile : même disposition qu'en desktop — icône au-dessus du titre. */
  .agenda-ligne__picto { flex: none; }
  .agenda-ligne__type-texte { min-width: 0; }

  /* La case « Ouvert au public seulement » vient À CÔTÉ des icônes : la
     ligne de filtres devient une rangée souple. Les filtres spectacles et le
     décompte gardent leur propre ligne. */
  .agenda-filtres {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
  }
  .agenda-filtres__spectacles { width: 100%; }
  .agenda-decompte { width: 100%; margin: 0; }

  /* Chips Représentations / Fabrique : l'icône SEULE (le libellé reste dans
     le DOM pour les lecteurs d'écran). Le chip « Tout » garde son texte. */
  .agenda-chip[data-valeur="representation"],
  .agenda-chip[data-valeur="fabrique"] {
    font-size: 0;
    padding: 0 14px;
  }
  .agenda-chip[data-valeur="representation"] .agenda-chip__picto,
  .agenda-chip[data-valeur="fabrique"] .agenda-chip__picto {
    margin-right: 0;
    width: 19px;
    height: 19px;
  }

  /* Titres de spectacles trop longs : coupés proprement sur une ligne.
     (inline-block requis pour l'ellipse — la règle inline-flex des
     représentations est plus spécifique, on la surclasse ici.) */
  .agenda-ligne__type { max-width: 100%; }
  .agenda-ligne__type-texte,
  .agenda-ligne--representation .agenda-ligne__type-texte {
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .agenda-ligne__type-texte .agenda-ligne__picto {
    vertical-align: -3px;
    margin-right: 8px;   /* remplace le gap du flex desktop */
  }

  /* Les événements prennent la largeur ENTIÈRE de l'écran : le flux déborde
     de la gouttière de 20 px, chaque ligne la réintègre en padding pour que
     les textes restent alignés. Le trait noir des dates publiques colle au
     bord de l'écran (la marge négative du desktop est neutralisée : 4 px de
     trait + 16 px de retrait = les 20 px des autres lignes, tout est aligné). */
  .agenda-flux { margin-left: -20px; margin-right: -20px; }
  .agenda-flux .agenda-ligne { padding-left: 20px; padding-right: 20px; }
  .agenda-flux .agenda-ligne--publique { margin-left: 0; padding-left: 16px; }
  .agenda-flux .agenda-annee-titre { padding-left: 20px; }
}


/* Couleurs de cycle (décision compagnie 2026-08-09) :
   — représentation : l'aplat du cycle derrière le nom du spectacle (col 2) ;
   — atelier / fabrique : AUCUN aplat derrière le titre ;
   — l'icône prend la couleur du cycle du spectacle lié, sur TOUTES les lignes
     (la classe de cycle est posée sur le pictogramme par le gabarit). */
.agenda-ligne--representation .agenda-ligne__type-texte {
  background: var(--cycle-aplat);
  padding: 5px 13px 3px;
  /* inline-block : un titre long (« Nous rendrons coup pour coup ») passe à
     la ligne DANS l'aplat au lieu de déborder de sa colonne. */
  display: inline-block;
  line-height: 1.4;
}
.agenda-ligne--representation .agenda-ligne__picto {
  vertical-align: -2px;
  margin-right: 8px;   /* le masque vit dans le bloc, à gauche du nom */
}
.agenda-ligne__picto { color: var(--logos-noir, #000); }  /* icônes fabrique et représentation : noir (2026-08-09) */

/* Filtre spectacle : liens discrets, style « années » de l'agenda */
.agenda-filtres__spectacles { border: 0; margin: 0 0 4px; padding: 0; min-width: 0; }
.agenda-spectacles-liens {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 14px;
  font-family: var(--font-sous-titre, Oswald, sans-serif);
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.agenda-lien-filtre {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: #6a6a6a;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.agenda-lien-filtre:hover,
.agenda-lien-filtre:focus-visible { background: var(--logos-encre, #001721); color: var(--logos-blanc, #fff); }
/* Lien de filtre sélectionné : fond noir, texte blanc — comme partout. */
.agenda-lien-filtre[aria-pressed="true"] {
  background: var(--logos-noir, #000);
  color: var(--logos-blanc, #fff);
}
/* Filtre lié à un spectacle : au repos, il reste neutre comme les autres.
   La couleur du cycle n'apparaît qu'UNE FOIS LE FILTRE ACTIF, posée sur le
   fond noir (décision compagnie 2026-08-10). */
.agenda-lien-filtre[aria-pressed="true"].cycle-revolution,
.agenda-lien-filtre[aria-pressed="true"].cycle-propriete { color: var(--cycle-icone); }
/* Le survol global garde le dernier mot. */
.agenda-lien-filtre:hover,
.agenda-lien-filtre:focus-visible { background: var(--logos-encre, #001721); color: var(--logos-blanc, #fff); }

/* Col 2 : le nom du spectacle est cliquable sur les représentations. */
.agenda-ligne__type-lien { color: inherit; text-decoration: none; }
.agenda-ligne__type-lien:hover, .agenda-ligne__type-lien:focus-visible { background: var(--logos-encre); color: var(--logos-blanc); text-decoration: none; }
/* Le picto billetterie suit le texte au survol : blanc lui aussi (sa couleur
   noire est forcée au repos, il faut la relâcher explicitement). */
.agenda-ligne__type-lien:hover .agenda-ligne__picto,
.agenda-ligne__type-lien:focus-visible .agenda-ligne__picto { color: var(--logos-blanc); }

/* Col 3 : nom du spectacle en texte nu — aucune couleur sous les textes des
   lignes de fabrique (décision compagnie 2026-08-09). */
.agenda-ligne__spectacle-col { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }

/* 2026-08-20 — Étiquettes des dates (Échappée culturelle…) : colonne de
   droite, petit cartouche à filet fin, sous le bouton Réserver / mentions. */
.agenda-ligne__etiquette {
  margin: 0;
  padding: 3px 10px 1px;
  box-shadow: inset 0 0 0 1px var(--logos-noir);
  font-family: Oswald, sans-serif;
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}