/* =========================================================================
   NORTH STATE ARTS JOURNAL  (schoolofthearts-csuchico.com)
   Rhabillage du squelette officiel « galerie-visuelle » (cimaise / tirage /
   cartel / planche / passe / socle), renommé au préfixe at- (Atlas de Terrain).
   Direction artistique 04 « L'Atlas de Terrain » : un relevé de salles.
   Le mur givré est de ton moyen, les images sont posées nues.
   Aucune requête distante, aucun @font-face, aucun script.
   ========================================================================= */

:root {

  /* ---- 1. MATIÈRES (jetons nommés, 10) ---------------------------------- */
  --mur-givre:      #DCE9E1;  /* mur de galerie givré, ton moyen : le fond   */
  --mur-creux:      #C6D8CE;  /* mur en renfoncement : sections retournées   */
  --reserve-menthe: #EFF8F3;  /* réserve de papier givré : colonnes de texte */
  --encre-atelier:  #20302A;  /* encre d'atelier d'estampe : texte, titres   */
  --encre-sauge:    #41564C;  /* sauge diluée : mentions, filets de portée   */
  --laiton-rampe:   #6E5218;  /* laiton de rampe : liens, numéros, traits.
                                 Assombri depuis #8A6A22 pour tenir 4,5:1 sur
                                 le mur en renfoncement (exigence du squelette). */
  --laiton-appuye:  #4A360E;  /* laiton patiné : survol, toujours plus sombre*/
  --creek-chico:    #2E6F68;  /* eau de Chico Creek : anneau de focus SEUL   */
  --filet-givre:    #B7CFC2;  /* givre sur verre : filets de séparation      */
  --amande-verger:  #CDBFA4;  /* amande des vergers : trame de la retournée  */

  /* Alias du squelette : mêmes rôles, noms attendus par galerie-visuelle. */
  --fond:          var(--mur-givre);
  --fond-creux:    var(--mur-creux);
  --fond-clair:    var(--reserve-menthe);
  --encre:         var(--encre-atelier);
  --encre-douce:   var(--encre-sauge);
  --accent:        var(--laiton-rampe);
  --accent-appuye: var(--laiton-appuye);
  --trait:         var(--filet-givre);
  --vide:          var(--reserve-menthe);

  /* REGLE NEGATIVE at- : aucune ombre portee, aucun degrade decoratif,
     aucun rayon superieur a 0. Un mur de galerie est plat.
     La seule profondeur autorisee est un filet de 1px ou de 3px. */
  /* REGLE NEGATIVE at- (2) : aucun aplat de laiton en fond. Le laiton est
     toujours un trait ou un texte, jamais une surface de plus de 3 px. */

  /* ---- 2. TYPOGRAPHIE : trois rôles, trois piles système ---------------- */
  --titre-police: Garamond, "EB Garamond", "Apple Garamond", "Hoefler Text", Georgia, serif;
  --texte-police: Optima, Candara, "Gill Sans", "Gill Sans MT", "Segoe UI", sans-serif;
  /* Troisième rôle : réservé EXCLUSIVEMENT aux mentions de salle, de ville et
     de date (rail de salle, colonnes du relevé, source en pied). Jamais un
     titre, jamais un paragraphe, jamais un lien de navigation. */
  --mention-police: "Andale Mono", Consolas, ui-monospace, monospace;

  --titre-graisse: 600;
  --titre-interlettre: 0.004em;
  --titre-interlettre-serré: -0.005em;
  --mention-interlettre: 0.09em;
  --cote-interlettre: 0.22em;   /* surtitres en petites capitales espacées */

  --corps-taille: clamp(1rem, 0.955rem + 0.21vw, 1.075rem);
  --corps-interligne: 1.66;

  /* ---- 3. RYTHME ET MESURES : deux largeurs de page, pas trois ---------- */
  --at-mur:      72rem;                        /* largeur du mur            */
  --at-fiche:    36rem;                        /* note de salle, courte     */
  --mesure:      66ch;                         /* mesure de lecture         */
  --mesure-large: var(--at-mur);
  --marge-page:  clamp(1.1rem, 4.2vw, 4.5rem);
  --gouttiere:   clamp(0.9rem, 2.4vw, 2.4rem);
  --souffle:     clamp(3rem, 7vw, 6.5rem);
  --souffle-large: calc(var(--souffle) * 1.6); /* planche d'ouverture       */
  --decalage:    clamp(1.4rem, 3.6vw, 3.6rem); /* désalignement de la cimaise*/

  /* ---- 4. RAPPORTS D'IMAGE : nommés, jamais sur l'image nue ------------- */
  --at-format-affiche: 3 / 4;   /* portrait : affiche de saison, estampe     */
  --at-format-plateau: 4 / 3;   /* paysage : plateau et salle vue de la régie*/
  --at-format-cimaise: 1 / 1;   /* carré : vignette de mur                   */

  /* ---- 5. DÉTAILS ------------------------------------------------------- */
  --rayon: 0;                  /* angles vifs : identitaire, ne pas arrondir */
  --filet: 1px solid var(--trait);
  --transition: 180ms ease;

  color-scheme: light;         /* pas de mode sombre : le mur givré est la forme */
}

/* =========================================================================
   BASE
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--texte-police);
  font-size: var(--corps-taille);
  line-height: var(--corps-interligne);
  overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--titre-police);
  font-weight: var(--titre-graisse);
  letter-spacing: var(--titre-interlettre);
  line-height: 1.2;
  margin: 0;
}

h1 {
  font-size: clamp(2.05rem, 1.3rem + 2.6vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: var(--titre-interlettre-serré);
}
h2 {
  font-size: clamp(1.45rem, 1.15rem + 0.9vw, 1.95rem);
  letter-spacing: var(--titre-interlettre-serré);
}
h3 { font-size: 1.18rem; }

p, ul, ol { margin: 0 0 1.15em; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--accent-appuye); }

/* Le canard de Chico Creek ne sert QU'À l'anneau de focus, nulle part ailleurs. */
:focus-visible { outline: 2px solid var(--creek-chico); outline-offset: 3px; }

hr { border: 0; border-top: var(--filet); margin: var(--souffle) 0; }

/* =========================================================================
   SIGNATURE A : at-portee, la portée à deux traits
   Deux filets de 1 px séparés de 5 px : sauge au-dessus, laiton en dessous.
   C'est la portée musicale réduite à ce qui reste lisible à trois mètres.
   Réemplois : sous les h2 de l'accueil (4), sous le titre de chaque relevé (4),
   en tête des séries, au-dessus du socle. Aucune image, aucun script.
   ========================================================================= */

.at-portee {
  border-top: 1px solid var(--encre-sauge);
  box-shadow: 0 5px 0 -4px var(--laiton-rampe);
  padding-top: 0.55rem;
}

/* =========================================================================
   OSSATURE
   ========================================================================= */

/* Lien d'évitement. NE PAS SUPPRIMER. */
.at-evite {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--encre);
  color: var(--fond-clair);
  padding: 0.7rem 1.1rem;
  z-index: 50;
}
.at-evite:focus { left: 0.6rem; top: 0.6rem; }

/* Passe-partout : la largeur utile de toute zone de contenu. */
.at-passe {
  width: 100%;
  max-width: var(--mesure-large);
  margin-inline: auto;
  padding-inline: var(--marge-page);
}

.at-scene { display: block; }

/* --- Fronton : la barre de marque --------------------------------------- */
.at-corniche {
  background: var(--reserve-menthe);
  border-bottom: 1px solid var(--laiton-rampe);
}
.at-corniche__rang {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem 1.6rem;
  min-height: 4.6rem;
  padding-block: 0.7rem;
}
.at-enseigne {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--titre-police);
  color: var(--encre);
  text-decoration: none;
}
.at-fronton__marque { flex: 0 0 auto; width: 2.1rem; height: 2.1rem; }
.at-fronton__nom {
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.55rem);
  letter-spacing: var(--titre-interlettre-serré);
  line-height: 1.1;
}
.at-fronton__enseigne { max-width: 26rem; }
.at-fronton__baseline {
  display: block;
  font-family: var(--texte-police);
  font-size: 0.68rem;
  letter-spacing: var(--cote-interlettre);
  text-transform: uppercase;
  color: var(--encre-douce);
  margin-top: 0.25rem;
}

/* Le fronton : la barre de marque, sur réserve de papier givré. */
.at-fronton { position: relative; z-index: 30; }
.at-fronton .at-corniche__rang { padding-block: 0.6rem; }

/* --- Navigation : les DEUX états, sans script ---------------------------
   Au-dessus de 52rem : déclencheur caché, liste en barre horizontale.
   En dessous : déclencheur visible, liste repliée (case à cocher).
   Jamais <details> : fermé, il ne rend pas son contenu. */
.at-visite__cle {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.at-visite__declencheur {
  display: none;
  font-family: var(--mention-police);
  font-size: 0.72rem;
  letter-spacing: var(--mention-interlettre);
  text-transform: uppercase;
  color: var(--encre);
  border-bottom: 1px solid var(--laiton-rampe);
  padding-bottom: 0.2rem;
  cursor: pointer;
}
.at-visite__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.at-visite__liste a {
  display: inline-block;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre);
  text-decoration: none;
  padding-bottom: 0.2rem;
  border-bottom: 1px solid transparent;
}
.at-visite__liste a:hover,
.at-visite__liste [aria-current="page"] {
  border-bottom-color: var(--laiton-rampe);
  color: var(--laiton-rampe);
}

/* --- Fil (chemin de navigation) ----------------------------------------- */
.at-fil {
  font-family: var(--mention-police);
  font-size: 0.72rem;
  letter-spacing: var(--mention-interlettre);
  text-transform: uppercase;
  color: var(--encre-douce);
  padding-block: 1.1rem;
}
.at-fil ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.55rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.at-fil li + li::before { content: "/"; margin-right: 0.55rem; color: var(--trait); }
.at-fil a { color: var(--encre-douce); text-decoration: none; }
.at-fil a:hover { color: var(--laiton-rampe); }

/* =========================================================================
   PLANCH D'OUVERTURE DE L'ACCUEIL
   ========================================================================= */

.at-accroche { margin-top: 0; }
.at-accroche__vue {
  width: 100%;
  aspect-ratio: var(--at-format-plateau);
  object-fit: cover;
  background: var(--fond-creux);
}
/* Le titre ne repose JAMAIS sur l'image : la planche est nue, et le titre
   vit sous elle, sur la meme ligne de base que le cartel (titre a gauche,
   mentions a droite). Le bloc de titre n'est plus un aplat pose sur la photo. */
.at-accroche__bas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 23rem);
  gap: clamp(1.2rem, 3vw, 2.8rem);
  align-items: start;
  padding-top: clamp(1.1rem, 2.6vw, 2rem);
}
.at-cartel-flottant { max-width: 46rem; }
.at-cartel-flottant p {
  margin: 0.8rem 0 0;
  color: var(--encre-douce);
  max-width: 52ch;
}
.at-accroche__bas .at-cartel-mur { margin-top: 0; }
.at-planche-ouverture { padding-block: clamp(0.9rem, 2.2vw, 2rem) 0; }

@media (min-width: 900px) {
  .at-accroche__vue { aspect-ratio: 21 / 9; }
  .at-accroche { margin-bottom: 6rem; }
}
@media (max-width: 900px) {
  .at-accroche__bas { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   SALLE : une bande de la page
   ========================================================================= */

.at-salle { margin-top: var(--souffle); }

.at-salle__bandeau {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 0.7rem 2rem;
  padding-top: 0.35rem;
  margin-bottom: clamp(1.6rem, 3.5vw, 3rem);
}
.at-salle__titre { max-width: 34ch; }
.at-salle__note {
  font-family: var(--mention-police);
  font-size: 0.72rem;
  letter-spacing: var(--mention-interlettre);
  color: var(--encre-douce);
  max-width: 46ch;
  margin: 0;
}
/* Le texte de commentaire (la legende d'atlas) : prose courante, jamais en
   mono. La mono reste reservee aux mentions de salle, de ville et de date. */
.at-legende {
  font-family: var(--texte-police);
  font-size: var(--corps-taille);
  line-height: var(--corps-interligne);
  max-width: var(--mesure);
  margin: 0 0 1.1rem;
  color: var(--encre-atelier);
}

/* Cote : le petit numéro de catalogue, marqueur du squelette. */
.at-inventaire {
  display: block;
  font-family: var(--mention-police);
  font-size: 0.68rem;
  letter-spacing: var(--cote-interlettre);
  text-transform: uppercase;
  color: var(--encre-douce);
  margin-bottom: 0.5rem;
}

/* =========================================================================
   CIMAISE : le mur d'accrochage (cœur du squelette, 6 colonnes)
   ========================================================================= */

.at-cimaise {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--gouttiere);
  align-items: start;
  list-style: none;
  margin: 0;
  padding: 0;
}

.at-tirage { position: relative; grid-column: span 3; margin: 0; }
.at-tirage--plein { grid-column: span 6; }
.at-tirage--large { grid-column: span 4; }
.at-tirage--moyen { grid-column: span 3; }
.at-tirage--petit { grid-column: span 2; }

/* Désalignement vertical : c'est lui qui casse la grille régulière. */
.at-tirage--decale  { margin-top: var(--decalage); }
.at-tirage--decale2 { margin-top: calc(var(--decalage) * 2); }

.at-tirage__cadrage {
  overflow: hidden;
  background: var(--fond-creux);
  border-radius: var(--rayon);
}
.at-tirage__vue {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition);
}

/* Formats : le rapport vit sur le cadrage, jamais sur l'image. */
.at-tirage__cadrage--portrait { aspect-ratio: var(--at-format-affiche); }
.at-tirage__cadrage--paysage  { aspect-ratio: var(--at-format-plateau); }
.at-tirage__cadrage--carre    { aspect-ratio: var(--at-format-cimaise); }
.at-tirage__cadrage--pano     { aspect-ratio: 21 / 9; }
.at-tirage__cadrage--haut     { aspect-ratio: 2 / 3; }

.at-tirage__cartel { padding-top: 0.7rem; margin-top: 0.7rem; }
.at-tirage__titre {
  font-family: var(--titre-police);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  line-height: 1.18;
  margin: 0;
}
.at-tirage--large .at-tirage__titre,
.at-tirage--plein .at-tirage__titre { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); }

.at-tirage__lien { color: var(--encre); text-decoration: none; }
.at-tirage__lien:hover { color: var(--laiton-rampe); }
.at-tirage__lien::after { content: ""; position: absolute; inset: 0; }

.at-tirage:hover .at-tirage__vue { transform: scale(1.02); }

.at-tirage__mot {
  margin: 0.45rem 0 0;
  color: var(--encre-douce);
  font-size: 0.86rem;
  max-width: 46ch;
}
.at-tirage__indication {
  margin: 0.45rem 0 0;
  font-family: var(--mention-police);
  font-size: 0.68rem;
  letter-spacing: var(--mention-interlettre);
  text-transform: uppercase;
  color: var(--encre-douce);
}

/* Variante dense : gouttières resserrées (annonces de fin de page). */
.at-cimaise--dense { --gouttiere: clamp(0.7rem, 1.6vw, 1.4rem); }

/* =========================================================================
   SIGNATURE B : at-cartel-mur, le cartel de cimaise à filet gauche
   Un filet vertical de 3 px en laiton collé au bord gauche, texte en petites
   capitales espacées pour le lieu, italique pour la nature. C'est l'étiquette
   clouée à gauche d'une œuvre au Janet Turner Print Museum.
   Réemplois : sous chaque pièce du mur (10), sous la planche de chaque page de
   fond (12), dans le relevé de salles (4).
   ========================================================================= */

.at-cartel-mur {
  border-left: 3px solid var(--laiton-rampe);
  padding-left: 0.85rem;
  margin-top: 0.75rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--encre-douce);
}
.at-cartel-mur__lieu {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.14em;
  color: var(--encre-sauge);
  font-weight: 600;
}
.at-cartel-mur__nature { font-style: italic; display: block; margin-top: 0.15rem; }
.at-cartel-mur__date {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--mention-police);
  font-size: 0.68rem;
  letter-spacing: var(--mention-interlettre);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  color: var(--encre-douce);
}
.at-cartel-mur__ia { display: block; margin-top: 0.15rem; }

/* =========================================================================
   SIGNATURE C : at-rail-salle, le rail de salle de 6,5 rem
   Une colonne fixe à gauche de chaque notice : la salle et la ville en mono
   capitales, puis la date en chiffres tabulaires, séparées du texte par un
   filet de 1 px. Avant la date, le lieu : c'est la question du North State.
   Réemplois : en tête des entrées du flux daté, en tête de chaque notice de
   rubrique, en ouverture de chaque page de fond.
   ========================================================================= */

.at-rail-salle {
  float: left;
  width: 6.5rem;
  margin-right: 1.4rem;
  border-right: 1px solid var(--filet-givre);
  padding-right: 0.7rem;
  font-family: var(--mention-police);
  font-size: 0.72rem;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: var(--mention-interlettre);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--encre-sauge);
  overflow-wrap: anywhere;
}
.at-rail-salle__date { display: block; color: var(--encre-douce); font-weight: 400; }

/* Variante de pièce : dans une case étroite du mur, le rail ne peut pas être
   une colonne flottante. Il devient une ligne complète au-dessus du titre,
   toujours en mono capitales et chiffres tabulaires, toujours séparée par un
   filet. La lecture reste « salle d'abord », à toutes les largeurs. */
.at-rail-salle--piece {
  float: none;
  width: auto;
  margin: 0 0 0.45rem;
  padding: 0 0 0.4rem;
  border-right: 0;
  border-bottom: 1px solid var(--filet-givre);
}
.at-rail-salle--piece .at-rail-salle__date { display: inline; margin-left: 0.5rem; }
/* Des que la date passe en ligne derriere la ville, un point median les separe :
   sans lui on lit « CHICO PUBLISHED SEPTEMBER 12, 2026 » d'un seul trait. */
.at-rail-salle__date--enligne::before,
.at-rail-salle--piece .at-rail-salle__date::before,
.at-journal__corps .at-rail-salle__date::before { content: "\00b7\00a0"; }

/* Rail collé : sur une page de fond, la salle reste sous les yeux. */
.at-rail-salle--colle { position: sticky; top: 1.2rem; }
@media (max-width: 960px) {
  .at-rail-salle--colle { position: static; }
}

/* Colonne de lecture + rail collé : au-dessus de 960 px, la salle, la ville et
   la date accompagnent tout le défilé du texte. En dessous, le rail collé
   disparaît et celui de la tête de page suffit. */
.at-lecture { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0 1.4rem; }
.at-lecture__rail { display: block; }
@media (min-width: 961px) {
  .at-lecture__rail { display: block; align-self: start; padding-top: 0.9rem; }
  .at-lecture .at-rail-salle--colle {
    float: none;
    width: auto;
    margin: 0;
    position: sticky;
    top: 1.2rem;
  }
}
@media (max-width: 960px) {
  .at-lecture { display: block; }
}

/* =========================================================================
   RELEVÉ DES SALLES : section retournée, fond plein qui déborde des marges
   ========================================================================= */

.at-releve {
  margin-top: var(--souffle);
  padding-block: clamp(2rem, 5vw, 4rem);
}
.at-releve--retourne {
  background-color: var(--mur-creux);
  background-image: repeating-linear-gradient(115deg,
    rgba(205, 191, 164, .30) 0 1px, transparent 1px 9px);
}
.at-releve__entete { max-width: 52rem; margin-bottom: clamp(1.2rem, 3vw, 2rem); }

/* Tableau : toujours dans un conteneur à défilement propre. */
.at-defile {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.6rem 0 0;
  border-top: var(--filet);
  border-bottom: var(--filet);
}
.at-defile table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: 0.92rem;
}
.at-defile th, .at-defile td {
  text-align: left;
  padding: 0.65rem 1rem 0.65rem 0;
  border-bottom: 1px solid var(--trait);
  vertical-align: top;
}
.at-defile th {
  font-family: var(--mention-police);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: var(--mention-interlettre);
  text-transform: uppercase;
  color: var(--encre-douce);
}
.at-defile tr:last-child td { border-bottom: 0; }
/* La legende du tableau reste une legende de tableau : au-dessus de l'entete,
   pas coincee entre l'entete et les lignes. */
.at-defile caption {
  display: table-caption;
  caption-side: top;
  text-align: left;
  padding-bottom: 0.45rem;
}
/* Les chiffres, les villes et les salles du relevé : troisième rôle seulement. */
.at-defile .at-mention {
  font-family: var(--mention-police);
  font-size: 0.74rem;
  letter-spacing: var(--mention-interlettre);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--encre-sauge);
}
.at-defile .at-relu { font-style: italic; color: var(--encre-douce); }

/* =========================================================================
   THE SECOND NIGHT : la seconde soirée du même programme
   Deux volets de largeur égale séparés par un filet vertical de 1 px en givre,
   chaque volet ouvert par une pastille de laiton de 8 px. La seconde pastille
   est un cercle vide quand la seconde soirée n'est pas annoncée : l'absence
   est une information, pas un trou. CSS pur.
   ========================================================================= */

.at-seconde-nuit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 clamp(1.4rem, 3vw, 2.2rem);
}
.at-seconde-nuit__volet {
  padding: 0.9rem 1.2rem 0.9rem 0;
}
.at-seconde-nuit__volet + .at-seconde-nuit__volet {
  border-left: 1px solid var(--filet-givre);
  padding-left: 1.2rem;
  padding-right: 0;
}
.at-seconde-nuit__pastille {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--laiton-rampe);
  margin-right: 0.5rem;
  vertical-align: 0.05em;
}
.at-seconde-nuit__pastille--vide { background: transparent; box-shadow: inset 0 0 0 1px var(--laiton-rampe); }
.at-seconde-nuit__salle {
  font-family: var(--mention-police);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--mention-interlettre);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--encre-sauge);
}
.at-seconde-nuit__note {
  display: block;
  margin: 0.35rem 0 0 1.3rem;
  font-size: 0.86rem;
  color: var(--encre-douce);
}
.at-seconde-nuit__note--absente { font-family: var(--titre-police); font-style: italic; }

/* =========================================================================
   FLUX DATÉ : montrer les articles, pas les rubriques
   ========================================================================= */

.at-journal {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--filet-givre);
}
.at-journal__entree {
  padding: 1rem 0;
  border-bottom: 1px solid var(--filet-givre);
  overflow: hidden;   /* contient le rail flottant */
}
.at-journal__titre {
  font-family: var(--titre-police);
  font-size: 1.12rem;
  line-height: 1.22;
  margin: 0;
}
.at-journal__titre a { color: var(--encre); text-decoration: none; }
.at-journal__titre a:hover { color: var(--laiton-rampe); text-decoration: underline; }
.at-journal__extrait {
  margin: 0.3rem 0 0;
  font-size: 0.86rem;
  color: var(--encre-douce);
  max-width: 54ch;
}

/* =========================================================================
   NOTE DE SALLE : la colonne étroite (36 rem) sur réserve de papier
   ========================================================================= */

.at-note-salle {
  margin-top: var(--souffle);
  background: var(--reserve-menthe);
  max-width: var(--at-fiche);
  padding: clamp(1.3rem, 3vw, 2.2rem);
  border-left: 3px solid var(--laiton-rampe);
  border-radius: var(--rayon);
}
.at-note-salle__texte {
  font-family: var(--titre-police);
  font-size: 1.12rem;
  line-height: 1.55;
  margin: 0.8rem 0 0;
}
.at-note-salle__liste {
  margin: 1rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  color: var(--encre-douce);
}
.at-note-salle__liste li { margin-bottom: 0.35rem; }
.at-note-salle__signature {
  display: block;
  margin-top: 1rem;
  font-family: var(--mention-police);
  font-size: 0.7rem;
  letter-spacing: var(--mention-interlettre);
  text-transform: uppercase;
  color: var(--encre-sauge);
}

/* =========================================================================
   SÉRIES : les trois grands sujets, une ligne chacun
   ========================================================================= */

.at-series {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1.2rem, 3vw, 2.4rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.at-series__entree { margin: 0; }
.at-series__titre {
  font-family: var(--titre-police);
  font-size: 1.3rem;
  margin: 0 0 0.5rem;
}
.at-series__titre a { color: var(--encre); text-decoration: none; }
.at-series__titre a:hover { color: var(--laiton-rampe); }

/* =========================================================================
   RÉPERTOIRE : filet de sécurité du maillage, une ligne par entrée
   ========================================================================= */

.at-repertoire {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: var(--gouttiere);
  list-style: none;
  margin: 0;
  padding: 0;
}
.at-repertoire__entree {
  position: relative;
  padding-top: 0.6rem;
  border-top: 1px solid var(--filet-givre);
}
.at-repertoire__vue {
  width: 100%;
  aspect-ratio: var(--at-format-cimaise);
  object-fit: cover;
  background: var(--fond-creux);
  border-radius: var(--rayon);
}
.at-repertoire__nom {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--titre-police);
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--encre);
  text-decoration: none;
}
.at-repertoire__nom::after { content: ""; position: absolute; inset: 0; }
.at-repertoire__entree:hover .at-repertoire__nom { color: var(--laiton-rampe); }
.at-repertoire__compte {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--mention-police);
  font-size: 0.68rem;
  letter-spacing: var(--mention-interlettre);
  text-transform: uppercase;
  color: var(--encre-douce);
}

/* =========================================================================
   PAGE DE FOND (rubrique et article)
   ========================================================================= */

.at-ouverture {
  padding-block: clamp(1.4rem, 3.5vw, 3rem) clamp(1.2rem, 3vw, 2.2rem);
  max-width: 52rem;
  overflow: hidden;   /* contient le rail de salle */
}
.at-ouverture__signe {
  margin: 0.9rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--encre-sauge);
  max-width: 46rem;
}
.at-ouverture__auteur {
  display: block;
  font-family: var(--titre-police);
  font-size: 1rem;
  color: var(--encre);
}
.at-ouverture__role {
  display: block;
  margin-top: 0.22rem;
  font-family: var(--mention-police);
  font-size: 0.67rem;
  letter-spacing: var(--mention-interlettre);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--encre-douce);
}
.at-ouverture__joindre {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.84rem;
  color: var(--encre-douce);
}
.at-ouverture__joindre a { color: var(--encre-atelier); }

/* Intercalaire du relevé : dit ce que le volet à deux salles montre, pour que
   « The four halls » ne soit pas démenti par une paire. */
.at-releve__intercalaire {
  display: block;
  margin: 1.5rem 0 0.55rem;
}

.at-ouverture__chapo {
  font-size: clamp(1.05rem, 1rem + 0.5vw, 1.28rem);
  color: var(--encre-douce);
  margin-top: 1rem;
  max-width: 54ch;
}
.at-indications {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  font-family: var(--mention-police);
  font-size: 0.68rem;
  letter-spacing: var(--mention-interlettre);
  text-transform: uppercase;
  color: var(--encre-douce);
}

/* La fiche à trois entrées invariables : le lecteur cherche son cas. */
.at-fiche {
  display: grid;
  grid-template-columns: 12.5rem minmax(0, 1fr);
  gap: 0.6rem 1.4rem;
  margin: 1.8rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--encre-sauge);
  box-shadow: 0 5px 0 -4px var(--laiton-rampe);
  max-width: 52rem;
}
.at-fiche__terme {
  font-family: var(--mention-police);
  text-wrap: balance;
  hyphens: none;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: var(--mention-interlettre);
  text-transform: uppercase;
  color: var(--encre-sauge);
  margin: 0;
}
.at-fiche__valeur { margin: 0; }
/* L'italique Garamond ne porte QUE la limite (« what the page does not say »). */
.at-fiche__valeur--limite {
  font-family: var(--titre-police);
  font-style: italic;
  font-size: 1.04rem;
  color: var(--encre-atelier);
}

/* Planche : image hors passe-partout, pleine largeur. Enfant direct de
   <article> : c'est ce qui évite le 100vw et le défilement horizontal. */
.at-planche { margin: 0; }
.at-planche__vue {
  width: 100%;
  aspect-ratio: var(--at-format-plateau);
  object-fit: cover;
  background: var(--fond-creux);
}
.at-planche__vue--haute { aspect-ratio: var(--at-format-affiche); }
.at-planche__cartel {
  max-width: var(--mesure-large);
  margin-inline: auto;
  padding: 0.9rem var(--marge-page) 0;
  font-size: 0.78rem;
  color: var(--encre-douce);
}

/* Colonne de lecture : étroite, alignée à gauche du mur. */
.at-colonne {
  max-width: var(--mesure);
  margin-top: var(--souffle);
  overflow: hidden;   /* contient un éventuel rail */
}
.at-colonne--centree { margin-inline: auto; }
.at-colonne h2 { margin-top: 2.4rem; }
.at-colonne h3 { margin-top: 1.9rem; }
.at-colonne h2:first-child,
.at-colonne h3:first-child { margin-top: 0; }
.at-colonne ul, .at-colonne ol { padding-left: 1.15rem; }
.at-colonne li { margin-bottom: 0.45em; }

/* Lettrine : trois lignes de Garamond ouvrent le corps de chaque page de fond.
   Aucune page ne commence sur un h2 : le h1, la fiche et la planche passent
   d'abord, et c'est le premier paragraphe du corps qui porte la lettrine. */
.at-colonne > p:first-of-type::first-letter {
  float: left;
  font-family: var(--titre-police);
  font-size: 3.5rem;
  line-height: 0.82;
  font-weight: 600;
  color: var(--laiton-rampe);
  padding: 0.1rem 0.55rem 0 0;
}

.at-exergue {
  margin: 2.2rem 0;
  padding-left: 1.3rem;
  border-left: 3px solid var(--laiton-rampe);
  font-family: var(--titre-police);
  font-size: clamp(1.2rem, 1rem + 0.9vw, 1.6rem);
  line-height: 1.3;
}
.at-exergue cite {
  display: block;
  margin-top: 0.8rem;
  font-family: var(--mention-police);
  font-size: 0.7rem;
  font-style: normal;
  letter-spacing: var(--mention-interlettre);
  text-transform: uppercase;
  color: var(--encre-douce);
}

.at-reserve {
  background: var(--vide);
  padding: clamp(1.2rem, 3vw, 2rem);
  margin: 2.4rem 0;
  border-radius: var(--rayon);
}
.at-reserve > :last-child { margin-bottom: 0; }

/* Diptyque : deux images côte à côte, une légende chacune. */
.at-diptyque {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gouttiere);
  margin: var(--souffle) 0 0;
}
.at-diptyque figure { margin: 0; }
.at-diptyque img {
  width: 100%;
  aspect-ratio: var(--at-format-affiche);
  object-fit: cover;
  background: var(--fond-creux);
  border-radius: var(--rayon);
}

/* Rail de renvois : la navigation de lecture, autour du corps, jamais dedans. */
.at-renvois {
  margin-top: var(--souffle);
  padding-top: 1rem;
  border-top: 1px solid var(--encre-sauge);
  box-shadow: 0 5px 0 -4px var(--laiton-rampe);
  max-width: var(--mesure);
}
.at-renvois__titre {
  font-family: var(--titre-police);
  font-size: 1.2rem;
  margin: 0 0 0.6rem;
}

/* =========================================================================
   APPUIS
   ========================================================================= */

.at-poursuivre {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mention-police);
  font-size: 0.72rem;
  letter-spacing: var(--mention-interlettre);
  text-transform: uppercase;
  color: var(--laiton-rampe);
  text-decoration: none;
  border-bottom: 1px solid var(--laiton-rampe);
  padding-bottom: 0.25rem;
}
.at-poursuivre::after { content: "\203A"; font-size: 1.1em; line-height: 1; }
.at-poursuivre:hover { color: var(--encre); border-bottom-color: var(--encre); }

.at-tourne {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  margin: var(--souffle) 0 0;
  padding: 0;
  align-items: center;
}
.at-tourne a, .at-tourne span {
  display: inline-block;
  min-width: 2.6rem;
  text-align: center;
  padding: 0.55rem 0.8rem;
  border: var(--filet);
  text-decoration: none;
  color: var(--encre);
  font-size: 0.85rem;
}
.at-tourne a:hover { border-color: var(--laiton-rampe); color: var(--laiton-rampe); }
.at-tourne [aria-current="page"] {
  background: var(--encre);
  color: var(--fond-clair);
  border-color: var(--encre);
}

/* =========================================================================
   SOCLE : le pied qui prouve
   ========================================================================= */

.at-socle {
  margin-top: var(--souffle);
  background-color: var(--mur-creux);
  background-image: repeating-linear-gradient(115deg,
    rgba(205, 191, 164, .30) 0 1px, transparent 1px 9px);
  padding-block: clamp(2.2rem, 5vw, 4rem);
}
/* Deux colonnes pleines : quatre blocs, deux rangees, aucune case vide. */
.at-socle__rang {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.6rem, 4vw, 3.2rem);
}
/* Les quatre blocs se repondent deux a deux : le colophon avec les corrections,
   la politique editoriale avec les sources. Deux rangees de meme hauteur de
   contenu, donc aucune colonne qui s'arrete a mi-hauteur sous un voisin long.
   L'ordre visuel est pose ici ; l'ordre du document reste l'ordre de lecture
   du pied (identite, politique, corrections, sources). */
.at-socle__bloc--colophon    { order: 1; }
.at-socle__bloc--corrections { order: 2; }
.at-socle__bloc--politique   { order: 3; }
.at-socle__bloc--sources     { order: 4; }
.at-socle__bloc > :last-child { margin-bottom: 0; }
.at-socle h2 {
  font-size: 1.1rem;
  margin-bottom: 0.7rem;
}
.at-socle p { color: var(--encre-douce); font-size: 0.9rem; margin-block: 0.55rem; }
.at-socle ul { list-style: none; margin: 0; padding: 0; }
.at-socle li { margin-bottom: 0.45rem; font-size: 0.9rem; }
.at-socle a { color: var(--encre); text-decoration: none; border-bottom: 1px solid transparent; }
.at-socle a:hover { border-bottom-color: var(--laiton-rampe); color: var(--laiton-rampe); }
.at-socle__sources {
  font-family: var(--mention-police);
  font-size: 0.72rem;
  letter-spacing: var(--mention-interlettre);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
/* La liste des sources est la seule suite de lignes courtes du pied : ses
   interlignes de liste sont resserres pour qu'elle ne soit pas le bloc le
   plus creux des quatre. */
.at-socle__sources li { margin-bottom: 0.18rem; }
/* La note d'editeur sort des blocs et prend toute la largeur, sous les deux
   rangees, avant la signature : c'est la seule phrase du site ecrite sur le
   ton du journal lui-meme, elle se lit seule, sur une mesure courte. */
.at-socle__note {
  margin-top: clamp(1.7rem, 3.6vw, 2.6rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--encre-sauge);
}
.at-socle__note p {
  max-width: 46rem;
  margin-bottom: 0;
  font-family: var(--titre-police);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--encre-douce);
}

.at-socle__bas {
  margin-top: clamp(1.8rem, 4vw, 3rem);
  padding-top: 1.1rem;
  border-top: 1px solid var(--encre-sauge);
  box-shadow: 0 5px 0 -4px var(--laiton-rampe);
  font-family: var(--mention-police);
  font-size: 0.7rem;
  letter-spacing: var(--mention-interlettre);
  text-transform: uppercase;
  color: var(--encre-douce);
}

/* =========================================================================
   RESPONSIVE : la grille se replie, jamais de débordement horizontal
   ========================================================================= */

/* =========================================================================
   FLUX DATÉ : la vignette de l'article (règle du 16/09/2026)
   Toute liste d'articles montre la vue de l'article, au format cimaise 1/1,
   à côté de la salle, de la date et du titre.
   ========================================================================= */

.at-journal__entree {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 0 1.1rem;
  align-items: start;
}
.at-journal__vignette {
  margin: 0;
  overflow: hidden;
  background: var(--mur-creux);
}
.at-journal__vignette--cimaise { aspect-ratio: var(--at-format-cimaise); }
.at-journal__vue {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.at-journal__corps { min-width: 0; }
/* Dans le flux, le rail cesse d'etre un float de 6,5 rem (il s'y cassait sur
   quatre lignes a cote de la vignette) : il devient une ligne de mention au
   dessus du titre, salle et date sur la meme ligne. */
.at-journal__corps .at-rail-salle {
  float: none;
  width: auto;
  display: inline-block;
  max-width: 100%;
  margin: 0 0 0.4rem;
  padding: 0 0 0.3rem;
  border-right: 0;
  border-bottom: 1px solid var(--filet-givre);
  text-align: left;
}
.at-journal__corps .at-rail-salle__date { display: inline; margin-left: 0.6rem; }

/* =========================================================================
   LIGNE D'AUTEUR DE FIN D'ARTICLE : qui écrit, quand, où l'on corrige
   ========================================================================= */

.at-signature {
  display: block;
  margin: var(--souffle) 0 1.4rem;
  padding: 1rem 0 0;
  border-top: var(--filet);
  max-width: var(--mesure);
}
.at-signature__qui {
  display: block;
  font-family: var(--titre-police);
  font-size: 1.02rem;
  color: var(--encre);
}
.at-signature__quand {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--mention-police);
  font-size: 0.68rem;
  letter-spacing: var(--mention-interlettre);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--encre-douce);
}
.at-signature__contact {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.86rem;
  color: var(--encre-douce);
}
.at-signature__contact a { color: var(--encre-atelier); }

@media (max-width: 52rem) {
  /* Le panneau se range sous le fronton entier, pas sous le seul declencheur :
     ancre sur la rangee, il ne peut pas deborder a gauche de la page. */
  .at-corniche__rang { position: relative; }
  .at-visite { position: static; }
  .at-visite__declencheur { display: inline-block; }
  .at-visite__cle:not(:checked) ~ .at-visite__liste { display: none; }
  .at-visite__liste {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
    min-width: 0;
    /* Ouvert, le panneau range les onglets en lignes de deux : jamais une
       colonne unique, jamais un menu replie une fois ouvert. */
    flex-wrap: wrap;
    gap: 0.55rem 1.4rem;
    background: var(--reserve-menthe);
    border: var(--filet);
    padding: 0.8rem 1rem;
  }
  .at-visite__cle:focus-visible ~ .at-visite__declencheur { outline: 2px solid var(--creek-chico); outline-offset: 3px; }
}

@media (max-width: 960px) {
  .at-cimaise { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .at-tirage,
  .at-tirage--moyen,
  .at-tirage--petit { grid-column: span 2; }
  .at-tirage--large,
  .at-tirage--plein { grid-column: span 4; }
  .at-tirage--decale  { margin-top: calc(var(--decalage) / 2); }
  .at-tirage--decale2 { margin-top: calc(var(--decalage) / 2); }
  .at-fiche { grid-template-columns: 9rem minmax(0, 1fr); }
}

/* À 390 px : une seule colonne, aucun trou vertical, la trame s'efface. */
@media (max-width: 620px) {
  .at-cimaise { grid-template-columns: minmax(0, 1fr); }
  .at-tirage,
  .at-tirage--petit,
  .at-tirage--moyen,
  .at-tirage--large,
  .at-tirage--plein { grid-column: span 1; }
  .at-tirage--decale,
  .at-tirage--decale2 { margin-top: 0; }

  /* Le rail cesse d'être un float : une ligne complète au-dessus du titre. */
  .at-rail-salle {
    float: none;
    width: auto;
    margin: 0 0 0.5rem;
    padding: 0 0 0.4rem;
    border-right: 0;
    border-bottom: 1px solid var(--filet-givre);
  }
  .at-rail-salle__date { display: inline; margin-left: 0.5rem; }
  .at-rail-salle__date::before { content: "\00b7\00a0"; }
  .at-rail-salle--colle { position: static; }

  /* The Second Night : deux blocs empilés, filet horizontal, pastilles gardées. */
  .at-seconde-nuit { grid-template-columns: minmax(0, 1fr); }
  .at-seconde-nuit__volet { padding: 0.8rem 0; }
  .at-seconde-nuit__volet + .at-seconde-nuit__volet {
    border-left: 0;
    border-top: 1px solid var(--filet-givre);
    padding-left: 0;
  }

  /* La trame amande devient illisible sous 1 px de rendu dense : aplat plein. */
  .at-releve--retourne,
  .at-socle { background-image: none; }
  /* L'extrait du flux daté disparaît : vignette, titre et date seuls. */
  .at-journal__extrait { display: none; }
  .at-journal__entree { grid-template-columns: 4.6rem minmax(0, 1fr); gap: 0 0.9rem; }
  /* Le tableau ne defile plus et ne coupe plus rien : chaque ligne devient un
     bloc empile, et l'en-tete de colonne se pose devant la valeur (data-libelle).
     Aucune colonne n'est supprimee : la colonne Guide restait invisible avant. */
  .at-defile {
    overflow-x: visible;
    border-top: 0;
    border-bottom: 0;
  }
  .at-defile table {
    display: block;
    min-width: 0;
    width: 100%;
  }
  .at-defile caption {
    display: block;
    max-width: 100%;
    overflow-wrap: break-word;
  }
  /* L'en-tete reste dans l'arbre d'accessibilite, sa place est prise par les libelles. */
  .at-defile thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .at-defile tbody { display: block; }
  .at-defile tbody tr {
    display: block;
    padding: 0.85rem 0;
    border-top: 1px solid var(--trait);
  }
  .at-defile tbody tr:first-child { border-top: var(--filet); }
  .at-defile tbody tr:last-child { border-bottom: var(--filet); }
  .at-defile tbody td {
    display: block;
    padding: 0.12rem 0;
    border-bottom: 0;
    overflow-wrap: break-word;
  }
  .at-defile tbody td[data-libelle]::before {
    content: attr(data-libelle);
    display: block;
    font-family: var(--mention-police);
    font-size: 0.64rem;
    letter-spacing: var(--mention-interlettre);
    text-transform: uppercase;
    color: var(--encre-douce);
  }

  .at-diptyque { grid-template-columns: minmax(0, 1fr); }
  .at-tirage__cadrage--haut { aspect-ratio: var(--at-format-affiche); }
  .at-accroche__vue { aspect-ratio: var(--at-format-plateau); }
  .at-socle__rang { grid-template-columns: minmax(0, 1fr); }
  /* Une seule colonne : l'ordre du document reprend ses droits. */
  .at-socle__rang > .at-socle__bloc { order: 0; }
  .at-fiche { grid-template-columns: minmax(0, 1fr); gap: 0.2rem 0; }
  .at-fiche__valeur { margin-bottom: 0.8rem; }
  /* Les onglets se rangent en deux lignes de deux, jamais en menu replié. */
  .at-visite__liste a { font-size: 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .at-tirage:hover .at-tirage__vue { transform: none; }
}