@font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;src:url('/kks-oswald-v36-latin-700.woff2') format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url('/kks-lato-v17-latin-regular.woff2') format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url('/kks-lato-v17-latin-700.woff2') format('woff2')}

/* PEAU « accrochage » (bibliothèque du socle-site, 17/09/2026). Archétype galerie-visuelle, direction 07 « La Cimaise ».
   Le site est un accrochage : une épreuve par article (étiquette, numéro d'inventaire, date d'accrochage), un cabinet par
   rubrique, l'affiche de l'exposition en tête de l'accueil, le mur principal en une hiérarchisée sur 12 colonnes,
   la station de lecture pour l'article (grand format pleine largeur, notice étroite, aparté actif, diptyque).
   Deux mondes assumés : l'affiche et le mur principal arrondis (--rayon-affiche), les salles à angles vifs.
   TOUT CE QUI VARIE PAR SITE est dans :root (palette de 8 matières, deux piles système, rayons, mesures, rythme).
   Préfixe de classes : .ci- (le changer ici et dans la constante P de theme.mjs, rien d'autre).
   Aucune ressource externe, aucune police distante, aucun script. */
:root {
  /* PALETTE : huit matières. Contrastes mesurés avec les valeurs par défaut. */
  --creme: #fdf8ec;              /* le papier des étiquettes et du mur principal (fond de page) */
  --mur: #e9dfc9;                /* la cloison de ton moyen des salles ; encre dessus 12,4:1, encre douce 5,2:1 */
  --encre: #0e3236;              /* vert profond : texte, tringle, et la surface vert nuit (affiche, régie, sortie) ; 14,4:1 sur crème */
  --encre-douce: #4c6165;        /* étiquettes, mentions, légendes ; 6,7:1 sur crème */
  --terre-cuite: #d4694a;        /* filets du surtitre, soulignés, fil d'Ariane ; 3,3:1 sur crème, donc JAMAIS un petit texte */
  --terre-cuite-sombre: #8e3b22; /* texte d'accent et survol ; 6,6:1 sur crème, 5,2:1 sur mur */
  --abricot: #f2b98e;            /* numéros du bloc méta et accents ; 8,2:1 sur vert nuit, posé UNIQUEMENT sur le vert nuit */
  --filet: #ddd2ba;              /* hairlines entre étiquettes et têtes de mur */
  /* RÈGLES NÉGATIVES :
     1. le survol est toujours plus foncé que l'accent (terre cuite -> terre cuite sombre -> plus sombre encore), jamais plus clair ;
     2. l'abricot ne se pose que sur le vert nuit : sur crème ou sur mur il tombe sous 2:1 ;
     3. aucune ombre floue : un tirage est posé à plat, la profondeur vient du passe-partout et des fils. */

  /* POLICES : deux piles système, aucun fichier. Didot pour les titres (compressé sur l'affiche), Avenir Next pour le texte.
     Rôles : capitales espacées .22em = étiquettes d'accrochage (inventaire, salle, surtitre) et elles seules ;
     italique = légendes des planches et du diptyque, et elles seules. */
  --titre-police: Oswald, Didot, "Bodoni 72", "Bodoni MT", "Hoefler Text", Georgia, serif;
  --texte-police: Lato, "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* GÉOMÉTRIE ET RYTHME */
  --rayon-affiche: 1.05rem;      /* accueil : affiche et mur principal */
  --rayon-salle: 0;              /* salles et articles : angles vifs (identitaire du squelette) */
  --largeur-mur: 90rem;          /* largeur maxi de la page */
  --mesure: 66ch;                /* colonne de lecture */
  --marge-page: clamp(1rem, 4vw, 4rem);
  --gouttiere: clamp(.9rem, 2vw, 2rem);
  --souffle: clamp(3.2rem, 7vw, 6.5rem);  /* écart entre les sections */
  --decalage: clamp(1.5rem, 4vw, 4.5rem); /* désalignement vertical de la mosaïque */
  --corps: clamp(1rem, .97rem + .15vw, 1.0625rem);
  --interligne: 1.65;
  /* DÉTAIL DU DIPTYQUE : point de recadrage et grossissement du même tirage (réglables par site) */
  --foyer-detail: 58% 52%;
  --zoom-detail: 1.9;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--creme); color: var(--encre); font-family: var(--texte-police); font-size: var(--corps); line-height: var(--interligne); overflow-wrap: break-word; }
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
h1, h2, h3, h4 { font-family: var(--titre-police); font-weight: 400; line-height: 1.08; margin: 0; letter-spacing: -.005em; text-wrap: balance; }
p, ul, ol, dl { margin: 0 0 1.1em; }
a { color: var(--terre-cuite-sombre); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: color-mix(in srgb, var(--terre-cuite-sombre) 72%, #000); }
:focus-visible { outline: 2px solid var(--terre-cuite-sombre); outline-offset: 3px; }
.ci-raccourci { position: absolute; left: -9999px; top: 0; z-index: 60; background: var(--encre); color: var(--creme); padding: .7rem 1.1rem; }
.ci-raccourci:focus { left: .6rem; top: .6rem; color: var(--creme); }
.ci-aplomb { width: 100%; max-width: var(--largeur-mur); margin-inline: auto; padding-inline: var(--marge-page); }
.ci-exposition { display: block; }

/* ------------------------------------------------------------------ GESTE A : le surtitre à filet */
.ci-surtitre { display: flex; align-items: center; gap: .75rem; margin: 0 0 .9rem; font-family: var(--texte-police); font-size: .7rem; font-weight: 600; line-height: 1.3; letter-spacing: .22em; text-transform: uppercase; color: var(--encre-douce); }
.ci-surtitre__filet { flex: none; width: 1.8rem; height: 1px; background: var(--terre-cuite); }
.ci-surtitre--sombre { color: var(--abricot); }

/* ------------------------------------------------------------------ GESTE B : le chiffre, bloc méta (toujours sur vert nuit) */
.ci-chiffre { display: flex; align-items: baseline; gap: .8rem; margin: 0; }
.ci-chiffre__numero { flex: none; font-family: var(--titre-police); font-size: clamp(2.3rem, 1.9rem + 1.4vw, 3.3rem); line-height: .9; letter-spacing: -.02em; color: var(--abricot); font-variant-numeric: lining-nums; }
.ci-chiffre__phrase { font-size: .8rem; line-height: 1.4; max-width: 28ch; color: var(--creme); }
.ci-chiffre--plaque { display: inline-flex; background: var(--encre); padding: .85rem 1.2rem .9rem; margin-top: 1.4rem; }
.ci-oeuvre .ci-chiffre--plaque .ci-chiffre__phrase { max-width: 34ch; }
.ci-chiffre--renvoi { align-items: flex-start; }
.ci-chiffre--renvoi .ci-chiffre__numero { font-size: clamp(1.8rem, 1.5rem + 1vw, 2.4rem); }
.ci-chiffre--renvoi .ci-chiffre__phrase { font-size: .93rem; line-height: 1.55; max-width: none; }

/* ------------------------------------------------------------------ fronton */
.ci-vestibule { background: color-mix(in srgb, var(--creme) 93%, transparent); border-bottom: 1px solid var(--filet); }
.ci-vestibule__rang { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .9rem 2rem; padding-block: .9rem; }
.ci-signaletique { display: inline-flex; align-items: center; gap: .8rem; color: var(--encre); text-decoration: none; min-width: 0; }
.ci-signaletique__pastille { flex: none; display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--encre); color: var(--abricot); font-family: var(--titre-police); font-size: 1rem; letter-spacing: .02em; }
.ci-signaletique__texte { display: flex; flex-direction: column; min-width: 0; }
.ci-signaletique__nom { font-family: var(--titre-police); font-size: clamp(1.25rem, 1.05rem + .8vw, 1.7rem); line-height: 1.05; }
.ci-signaletique__sous-titre { font-size: .76rem; line-height: 1.35; color: var(--encre-douce); max-width: 46ch; margin-top: .2rem; }
.ci-signaletique:hover .ci-signaletique__nom { color: var(--terre-cuite-sombre); }
.ci-orientation ul { display: flex; flex-wrap: wrap; gap: .35rem 1.3rem; list-style: none; margin: 0; padding: 0; }
.ci-orientation a { display: inline-flex; align-items: baseline; gap: .4rem; padding-block: .25rem; font-size: .9rem; color: var(--encre); text-decoration: none; box-shadow: inset 0 -2px 0 transparent; }
.ci-orientation__numero { font-size: .66rem; font-weight: 600; letter-spacing: .22em; color: var(--encre-douce); }
.ci-orientation a:hover { color: var(--terre-cuite-sombre); }
.ci-orientation a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--terre-cuite); }
.ci-orientation .ci-orientation__accueil { color: var(--terre-cuite-sombre); text-decoration: underline; text-decoration-color: var(--terre-cuite); }
@media (min-width: 64rem) {
  .ci-vestibule { position: sticky; top: 0; z-index: 30; -webkit-backdrop-filter: blur(14px) saturate(115%); backdrop-filter: blur(14px) saturate(115%); }
}

/* ------------------------------------------------------------------ fil d'Ariane */
.ci-cheminement { padding-block: 1.1rem 0; font-size: .8rem; color: var(--encre-douce); }
.ci-cheminement ol { display: flex; flex-wrap: wrap; gap: .3rem .55rem; list-style: none; margin: 0; padding: 0; }
.ci-cheminement li + li::before { content: "/"; margin-right: .55rem; color: var(--terre-cuite); }
.ci-cheminement a { color: var(--encre-douce); text-decoration: none; }
.ci-cheminement a:hover { color: var(--terre-cuite-sombre); text-decoration: underline; }

/* ------------------------------------------------------------------ ACCUEIL : l'affiche de l'exposition */
.ci-affiche { margin-top: clamp(1rem, 2.4vw, 2rem); }
.ci-affiche__plaque { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(31rem, 74vh, 46rem); border-radius: var(--rayon-affiche); overflow: hidden; background: var(--encre); color: var(--creme); }
.ci-affiche__cadre { position: absolute; inset: 0; z-index: -1; margin: 0; }
.ci-affiche__vue, .ci-affiche__vue img { width: 100%; height: 100%; }
.ci-affiche__vue img { object-fit: cover; object-position: 50% 42%; }
/* dégradé de lisibilité systématique, teinté par l'encre : le texte ne pose jamais sur une photo nue */
.ci-affiche__cadre::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--encre) 94%, transparent) 0%, color-mix(in srgb, var(--encre) 76%, transparent) 32%, color-mix(in srgb, var(--encre) 24%, transparent) 60%, transparent 88%), linear-gradient(to right, color-mix(in srgb, var(--encre) 52%, transparent), transparent 58%); }
.ci-affiche__legende { position: absolute; top: .9rem; right: .9rem; z-index: 1; max-width: min(24rem, 70%); padding: .3rem .65rem; background: color-mix(in srgb, var(--encre) 80%, transparent); color: var(--creme); font-size: .76rem; font-style: italic; line-height: 1.35; }
.ci-affiche__texte { padding: clamp(1.4rem, 4.5vw, 4.2rem); max-width: 64rem; }
.ci-affiche__titre { font-size: clamp(3rem, 6vw, 7rem); line-height: .88; letter-spacing: -.045em; max-width: 13ch; margin: 0 0 .28em; color: var(--creme); }
.ci-affiche__sous-titre { max-width: 44ch; margin: 0 0 1.6rem; font-size: clamp(1rem, .94rem + .35vw, 1.22rem); line-height: 1.5; color: var(--creme); }
.ci-affiche__pied { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.1rem 2.6rem; padding-top: 1.1rem; border-top: 1px solid color-mix(in srgb, var(--creme) 26%, transparent); }
.ci-affiche__dernier { display: flex; align-items: center; gap: .9rem; margin: 0; max-width: 40ch; }
.ci-affiche__vignette { flex: none; width: 4.4rem; }
.ci-affiche__vignette img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: calc(var(--rayon-affiche) * .45); outline: 1px solid color-mix(in srgb, var(--creme) 45%, transparent); outline-offset: 3px; }
.ci-affiche__dernier-texte { display: flex; flex-direction: column; gap: .25rem; margin: 0; font-family: var(--titre-police); font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem); line-height: 1.25; }
.ci-affiche__dernier-cle { font-family: var(--texte-police); font-size: .68rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--abricot); }
.ci-affiche__dernier a { color: var(--creme); text-decoration-color: var(--abricot); }
.ci-affiche__dernier a:hover { color: var(--abricot); }

/* ------------------------------------------------------------------ le MUR : une hiérarchisée sur 12 colonnes */
.ci-mur { margin-top: var(--souffle); }
.ci-mur__tete { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .3rem 2rem; padding-top: 1rem; margin-bottom: clamp(1.6rem, 3.5vw, 3rem); border-top: 1px solid var(--filet); }
.ci-mur__tete .ci-surtitre { grid-column: 1 / -1; }
.ci-mur__titre { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.3rem); letter-spacing: -.02em; }
.ci-mur__note { margin: 0; max-width: 32ch; text-align: right; font-size: .82rem; line-height: 1.45; color: var(--encre-douce); }
.ci-mur__accrochage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1.4rem, 2.6vw, 2.6rem) var(--gouttiere); align-items: start; list-style: none; margin: 0; padding: 0; }
.ci-epreuve { position: relative; grid-column: span 4; margin: 0; }
.ci-epreuve--e2 { grid-column: span 2; } .ci-epreuve--e3 { grid-column: span 3; } .ci-epreuve--e4 { grid-column: span 4; }
.ci-epreuve--e5 { grid-column: span 5; } .ci-epreuve--e6 { grid-column: span 6; } .ci-epreuve--e7 { grid-column: span 7; }
.ci-epreuve--e8 { grid-column: span 8; } .ci-epreuve--e9 { grid-column: span 9; } .ci-epreuve--e10 { grid-column: span 10; }
.ci-epreuve--e11 { grid-column: span 11; } .ci-epreuve--e12 { grid-column: span 12; }
.ci-epreuve--haut { grid-row: span 2; }
.ci-epreuve--decale1 { margin-top: var(--decalage); }
.ci-epreuve--decale2 { margin-top: calc(var(--decalage) * 2); }
.ci-epreuve__figure { margin: 0; }
.ci-format { overflow: hidden; border-radius: var(--rayon-affiche); background: var(--mur); }
.ci-format img { width: 100%; height: auto; object-fit: cover; transition: transform .5s ease, filter .5s ease; }
.ci-format--45 img { aspect-ratio: 4 / 5; } .ci-format--34 img { aspect-ratio: 3 / 4; } .ci-format--11 img { aspect-ratio: 1 / 1; }
.ci-format--32 img { aspect-ratio: 3 / 2; } .ci-format--219 img { aspect-ratio: 21 / 9; }
.ci-epreuve:hover .ci-format img, .ci-epreuve:focus-within .ci-format img { transform: scale(1.045); filter: saturate(1.08); }
.ci-epreuve:focus-within { outline: 2px solid var(--terre-cuite-sombre); outline-offset: 6px; }
.ci-epreuve:focus-within .ci-etiquette__lien:focus-visible { outline: none; }
.ci-mur__accrochage--cabinet .ci-format { border-radius: var(--rayon-salle); }
/* l'étiquette : filet, inventaire en capitales espacées, titre Didot, une ligne d'usage, la date d'accrochage et la saison */
.ci-etiquette { margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--filet); }
.ci-etiquette__numero { margin: 0 0 .4rem; font-size: .66rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--encre-douce); }
.ci-etiquette__titre { font-size: clamp(1.1rem, .98rem + .5vw, 1.45rem); line-height: 1.12; }
.ci-epreuve--e6 .ci-etiquette__titre, .ci-epreuve--e7 .ci-etiquette__titre, .ci-epreuve--e8 .ci-etiquette__titre, .ci-epreuve--e9 .ci-etiquette__titre,
.ci-epreuve--e10 .ci-etiquette__titre, .ci-epreuve--e11 .ci-etiquette__titre, .ci-epreuve--e12 .ci-etiquette__titre { font-size: clamp(1.45rem, 1.05rem + 1.3vw, 2.3rem); line-height: 1.05; }
.ci-etiquette__lien { color: var(--encre); text-decoration: none; }
.ci-etiquette__lien::after { content: ""; position: absolute; inset: 0; }
.ci-epreuve:hover .ci-etiquette__lien { color: var(--terre-cuite-sombre); }
.ci-etiquette__usage { margin: .5rem 0 0; max-width: 46ch; font-size: .88rem; line-height: 1.5; color: var(--encre-douce); }
.ci-epreuve--e2 .ci-etiquette__usage, .ci-epreuve--e3 .ci-etiquette__usage { display: none; }
.ci-etiquette__date { margin: .5rem 0 0; font-size: .76rem; color: var(--encre-douce); }
.ci-etiquette__saison { white-space: nowrap; }
.ci-cabinet__saison, .ci-seuil__saison { margin: 0 0 .5rem; font-size: .84rem; color: var(--encre-douce); }
.ci-seuil__saison { margin-top: -.4rem; }

/* ------------------------------------------------------------------ GESTE D : le diptyque (le même tirage, entier puis détail) */
.ci-regard { margin-top: var(--souffle); }
.ci-diptyque { margin-block: var(--souffle) 0; }
.ci-regard .ci-diptyque { margin-top: 0; }
.ci-diptyque__tete { padding-top: 1rem; border-top: 1px solid var(--filet); }
.ci-diptyque__vues { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: var(--gouttiere); align-items: stretch; }
.ci-diptyque__entier img { width: 100%; height: auto; }
.ci-diptyque__detail { position: relative; overflow: hidden; min-height: 8rem; background: var(--mur); }
.ci-diptyque__detail .ci-diptyque__image { position: absolute; inset: 0; }
.ci-diptyque__image--detail img { width: 100%; height: 100%; object-fit: cover; object-position: var(--foyer-detail); transform: scale(var(--zoom-detail)); transform-origin: var(--foyer-detail); }
.ci-diptyque__legende { margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--filet); max-width: 72ch; font-size: .92rem; font-style: italic; line-height: 1.5; color: var(--encre-douce); }
.ci-diptyque__numero { margin-right: .5rem; font-style: normal; font-size: .66rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.ci-diptyque__legende a { color: var(--terre-cuite-sombre); }

/* ------------------------------------------------------------------ feuille de salle + régie */
.ci-feuille-de-salle { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; margin-top: var(--souffle); }
.ci-feuille-de-salle__texte { padding-top: 1rem; border-top: 1px solid var(--filet); }
.ci-feuille-de-salle__intro { max-width: 36ch; margin: 0; font-family: var(--titre-police); font-size: clamp(1.3rem, 1.05rem + 1vw, 1.9rem); line-height: 1.38; }
.ci-regie { padding: clamp(1.3rem, 2.8vw, 2.2rem); background: var(--encre); color: var(--creme); }
.ci-regie__titre { margin: 0 0 .6rem; font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem); color: var(--creme); }
.ci-regie__texte { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--creme); }
.ci-regie__bilan { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem 1.4rem; list-style: none; margin: 1.4rem 0 0; padding: 1.2rem 0 0; border-top: 1px solid color-mix(in srgb, var(--creme) 22%, transparent); }
.ci-regie__dates { margin: 1rem 0 0; font-size: .8rem; color: var(--creme); }

/* ------------------------------------------------------------------ l'enfilade des cabinets et la tringle (GESTE C) */
.ci-enfilade { margin-top: var(--souffle); padding-block: clamp(2.8rem, 6vw, 5.2rem); background: var(--mur); }
.ci-cabinet { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.5rem, 4vw, 4.5rem); align-items: start; }
.ci-cabinet + .ci-cabinet { margin-top: clamp(2.6rem, 5vw, 4.6rem); padding-top: clamp(2.6rem, 5vw, 4.6rem); border-top: 1px solid color-mix(in srgb, var(--encre) 16%, transparent); }
.ci-cabinet__titre { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.6rem); line-height: 1.04; }
.ci-cabinet__titre a { color: var(--encre); text-decoration: none; }
.ci-cabinet__titre a:hover { color: var(--terre-cuite-sombre); }
.ci-cabinet__intro { max-width: 40ch; margin: .8rem 0 .7rem; color: var(--encre); }
.ci-cabinet__compte { margin: 0 0 .5rem; font-size: .8rem; color: var(--encre-douce); }
.ci-cabinet__note { max-width: 40ch; margin: 0 0 .5rem; font-size: .84rem; color: var(--encre-douce); }
.ci-cabinet__renvoi { margin: .9rem 0 0; font-size: .88rem; font-weight: 600; }
.ci-cabinet__renvoi a { color: var(--terre-cuite-sombre); }
/* GESTE C : la tringle, une moulure de 3 px et son ombre de 1 px ; chaque épreuve pend à un crochet par deux fils en Λ */
.ci-tringle { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 13.5rem)); gap: 0 clamp(1.2rem, 3vw, 2.8rem); list-style: none; margin: 1.2rem 0 0; padding: 0; border-top: 3px solid var(--encre); }
.ci-tringle::before { content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 1px; background: color-mix(in srgb, var(--encre) 30%, transparent); }
.ci-tringle--nue { display: block; min-height: 3.2rem; }
/* GESTE E : la frise des saisons. Douze initiales de mois sur un rail segmenté ; les mois de la saison en terre cuite.
   Sur un cabinet, la frise EST la tringle : ses segments portent le rail, les crochets s'y accrochent. */
.ci-frise { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; list-style: none; margin: 0; padding: 0; }
.ci-frise__mois { padding-bottom: .38rem; border-bottom: 3px solid color-mix(in srgb, var(--encre) 34%, transparent); font-size: .6rem; font-weight: 600; line-height: 1; letter-spacing: .08em; text-align: center; color: var(--encre-douce); }
.ci-frise__mois--saison { border-bottom-color: var(--terre-cuite); color: var(--terre-cuite-sombre); }
.ci-cabinet__accroche { min-width: 0; margin-top: 1.2rem; }
.ci-cabinet__accroche .ci-tringle { margin-top: 0; }
.ci-cabinet__accroche .ci-frise + .ci-tringle { border-top-color: transparent; }
.ci-cabinet__accroche .ci-frise + .ci-tringle::before { top: -1px; }
.ci-seuil .ci-frise { max-width: 24rem; margin: .1rem 0 1rem; }
.ci-aparte .ci-frise { max-width: 12rem; margin-top: .45rem; gap: 1px; }
.ci-aparte .ci-frise__mois { padding-bottom: .25rem; border-bottom-width: 2px; font-size: .5rem; letter-spacing: 0; }
.ci-tringle__crochet { position: absolute; top: -.48rem; left: clamp(3rem, 22%, 9rem); width: .62rem; height: .62rem; border: 1.5px solid var(--encre); border-radius: 50%; background: var(--mur); }
.ci-cabinet--vide .ci-tringle__crochet { background: var(--creme); }
.ci-suspension { position: relative; padding-top: 2.7rem; }
.ci-suspension::before { content: ""; position: absolute; top: -.48rem; left: 50%; width: .62rem; height: .62rem; margin-left: -.31rem; border: 1.5px solid var(--encre); border-radius: 50%; background: var(--mur); }
.ci-suspension__fil { position: absolute; top: .16rem; left: 14%; right: 14%; height: 2.6rem; opacity: .6;
  background:
    linear-gradient(to top left, transparent calc(50% - .6px), var(--encre) calc(50% - .6px), var(--encre) calc(50% + .6px), transparent calc(50% + .6px)) left top / 50% 100% no-repeat,
    linear-gradient(to top right, transparent calc(50% - .6px), var(--encre) calc(50% - .6px), var(--encre) calc(50% + .6px), transparent calc(50% + .6px)) right top / 50% 100% no-repeat; }
.ci-suspension__figure { margin: 0; }
.ci-suspension__passe-partout { padding: .55rem; background: var(--creme); border: 1px solid color-mix(in srgb, var(--encre) 22%, transparent); border-radius: var(--rayon-salle); }
.ci-suspension__passe-partout img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ci-suspension:nth-child(3n+2) .ci-suspension__passe-partout img { aspect-ratio: 1 / 1; }
.ci-suspension:nth-child(3n) .ci-suspension__passe-partout img { aspect-ratio: 4 / 3; }
.ci-suspension__etiquette { padding-top: .7rem; }
.ci-suspension__numero { margin: 0 0 .3rem; font-size: .62rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--encre-douce); }
.ci-suspension__titre { font-size: 1.08rem; line-height: 1.18; }
.ci-suspension__lien { color: var(--encre); text-decoration: none; }
.ci-suspension__lien::after { content: ""; position: absolute; inset: 0; }
.ci-suspension:hover .ci-suspension__lien { color: var(--terre-cuite-sombre); }
.ci-suspension:focus-within { outline: 2px solid var(--terre-cuite-sombre); outline-offset: 4px; }
.ci-suspension:focus-within .ci-suspension__lien:focus-visible { outline: none; }
.ci-suspension__date { margin: .35rem 0 0; font-size: .74rem; color: var(--encre-douce); }

/* ------------------------------------------------------------------ hors les murs (section réseau), sur vert nuit */
.ci-hors-les-murs { padding-block: clamp(3rem, 7vw, 6rem); background: var(--encre); color: var(--creme); }
.ci-hors-les-murs[hidden] { display: none; }
.ci-hors-les-murs__rang { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1.6rem, 4vw, 4.5rem); }
.ci-hors-les-murs__titre { font-size: clamp(1.8rem, 1.3rem + 2vw, 3.1rem); color: var(--creme); }
.ci-hors-les-murs__phrase { max-width: 38ch; margin: .9rem 0 0; font-size: .92rem; color: var(--creme); }
.ci-hors-les-murs__liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1.4rem 2.4rem; list-style: none; margin: 0; padding: 0; }
.ci-hors-les-murs__renvoi { padding-top: .95rem; border-top: 1px solid color-mix(in srgb, var(--creme) 22%, transparent); }
.ci-hors-les-murs a { color: var(--creme); text-decoration-color: var(--abricot); }
.ci-hors-les-murs a:hover { color: var(--abricot); }
.ci-hors-les-murs :focus-visible, .ci-sortie :focus-visible, .ci-affiche :focus-visible, .ci-regie :focus-visible { outline-color: var(--abricot); }

/* ------------------------------------------------------------------ ARTICLE : la station de lecture */
.ci-seuil { padding-block: clamp(1.4rem, 4vw, 3.4rem) clamp(1.4rem, 3vw, 2.4rem); }
.ci-seuil__titre { max-width: 20ch; margin: 0 0 .45em; font-size: clamp(2.3rem, 1.45rem + 3.3vw, 4.7rem); line-height: 1.02; letter-spacing: -.018em; }
.ci-seuil__amorce { max-width: 58ch; margin: 0 0 1.3rem; font-size: clamp(1.08rem, 1rem + .45vw, 1.32rem); line-height: 1.55; color: var(--encre-douce); }
.ci-indications { display: flex; flex-wrap: wrap; gap: .4rem 1.8rem; max-width: 62rem; list-style: none; margin: 0; padding: .85rem 0 0; border-top: 1px solid var(--filet); font-size: .84rem; color: var(--encre-douce); }
.ci-indications a { color: var(--encre-douce); }
.ci-indications a:hover { color: var(--terre-cuite-sombre); }
.ci-grand-format { margin: 0; }
.ci-grand-format__vue img { width: 100%; max-height: 82vh; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--rayon-salle); }
.ci-grand-format__etiquette { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .9rem; padding-top: .8rem; font-size: .88rem; color: var(--encre-douce); }
.ci-grand-format__numero { font-size: .66rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.ci-grand-format__legende { font-style: italic; }
.ci-grand-format__credit { font-size: .8rem; }
.ci-station { display: grid; grid-template-columns: minmax(0, var(--mesure)) minmax(0, 17rem); justify-content: space-between; gap: clamp(2rem, 6vw, 6rem); margin-top: clamp(2rem, 5vw, 4rem); }
.ci-station--seule { grid-template-columns: minmax(0, var(--mesure)); }
.ci-notice { min-width: 0; }
.ci-notice > :first-child { margin-top: 0; }
.ci-notice > p:first-of-type { font-size: 1.1em; line-height: 1.6; }
.ci-notice h2 { margin: 2.1em 0 .6em; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.15rem); line-height: 1.1; scroll-margin-top: 6rem; }
.ci-notice h3 { margin: 1.8em 0 .5em; font-size: 1.3rem; line-height: 1.2; }
.ci-notice ul, .ci-notice ol { padding-left: 1.3rem; }
.ci-notice li { margin-bottom: .35em; }
.ci-notice blockquote { margin: 1.8em 0; padding-left: 1.2rem; border-left: 1px solid var(--terre-cuite); font-family: var(--titre-police); font-size: 1.28em; line-height: 1.4; }
.ci-notice table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 1.6em 0; font-size: .92rem; }
.ci-notice th, .ci-notice td { padding: .5rem .7rem; border-bottom: 1px solid var(--filet); text-align: left; vertical-align: top; }
.ci-notice th { font-size: .84rem; font-weight: 600; color: var(--encre); }
.ci-notice img { margin: 1.6em 0; }
.ci-notice pre { max-width: 100%; overflow-x: auto; }
/* l'aparté : sommaire, étiquette détaillée, sources ; collant sur grand écran */
.ci-aparte { position: sticky; top: 6.5rem; align-self: start; font-size: .88rem; line-height: 1.5; }
.ci-aparte__titre { margin: 1.8rem 0 .7rem; padding-top: .8rem; border-top: 1px solid var(--filet); font-family: var(--titre-police); font-size: 1.18rem; line-height: 1.2; color: var(--encre); }
.ci-aparte__titre:first-child { margin-top: 0; }
.ci-aparte__sommaire { list-style: none; margin: 0; padding: 0; }
.ci-aparte__sommaire li { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); margin-bottom: .45rem; }
.ci-aparte__rang { font-family: var(--titre-police); color: var(--terre-cuite-sombre); }
.ci-aparte__sommaire a { color: var(--encre); text-decoration: none; }
.ci-aparte__sommaire a:hover { color: var(--terre-cuite-sombre); text-decoration: underline; }
.ci-aparte__etiquette { margin: 0; }
.ci-aparte__etiquette div { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap: .6rem; padding: .35rem 0; border-bottom: 1px solid var(--filet); }
.ci-aparte__etiquette dt { font-size: .62rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--encre-douce); padding-top: .18rem; }
.ci-aparte__etiquette dd { margin: 0; }
.ci-aparte__etiquette a { color: var(--encre); }
.ci-aparte__sources { list-style: none; margin: 0; padding: 0; }
.ci-aparte__sources li { margin-bottom: .45rem; overflow-wrap: anywhere; font-size: .84rem; }
/* à voir ensuite : la tringle sur la cloison */
.ci-ensuite { margin-top: var(--souffle); padding-block: clamp(2.6rem, 6vw, 4.8rem); background: var(--mur); }
.ci-ensuite__tete { max-width: 40rem; }
.ci-ensuite__titre { font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.6rem); }
.ci-tringle--ensuite { margin-top: 2rem; }

/* ------------------------------------------------------------------ SALLE (rubrique) */
.ci-seuil--cabinet .ci-seuil__amorce { max-width: 52ch; }
.ci-mur--cabinet { margin-top: calc(var(--souffle) * .8); }
.ci-autres-cabinets { margin-block: var(--souffle); padding-top: 1rem; border-top: 1px solid var(--filet); }
.ci-regard--cabinet { margin-top: calc(var(--souffle) * .7); }
.ci-cabinet--vide { margin-top: var(--souffle); }
.ci-cabinet--vide .ci-cabinet__note { margin-top: 1.2rem; }
.ci-autres-cabinets__liste { display: flex; flex-wrap: wrap; gap: .6rem 2rem; list-style: none; margin: 0; padding: 0; }
.ci-autres-cabinets__liste a { display: inline-flex; align-items: baseline; gap: .55rem; font-family: var(--titre-police); font-size: clamp(1.15rem, 1rem + .5vw, 1.5rem); color: var(--encre); text-decoration: none; }
.ci-autres-cabinets__liste a:hover { color: var(--terre-cuite-sombre); }
.ci-autres-cabinets__numero { font-family: var(--texte-police); font-size: .66rem; font-weight: 600; letter-spacing: .22em; color: var(--encre-douce); }

/* ------------------------------------------------------------------ 404 : le tirage décroché */
.ci-decroche { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-block: clamp(2rem, 6vw, 5rem); }
.ci-decroche__mur { position: relative; aspect-ratio: 4 / 5; background: var(--mur); }
.ci-decroche__tringle { position: absolute; left: 0; right: 0; top: 1.6rem; height: 3px; background: var(--encre); }
.ci-decroche__crochet { position: absolute; top: calc(1.6rem - .45rem); left: 50%; width: .62rem; height: .62rem; margin-left: -.31rem; border: 1.5px solid var(--encre); border-radius: 50%; background: var(--mur); }
.ci-decroche__cordon { position: absolute; top: 2rem; left: 50%; width: 1px; height: 18%; background: color-mix(in srgb, var(--encre) 70%, transparent); }
.ci-decroche__cordon::after { content: ""; position: absolute; bottom: -.55rem; left: -.36rem; width: .72rem; height: .62rem; border: 1.5px solid var(--encre); border-top: 0; border-radius: 0 0 .5rem .5rem; }
.ci-decroche__trace { position: absolute; left: 17%; right: 17%; top: 34%; bottom: 13%; background: color-mix(in srgb, var(--creme) 58%, var(--mur)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--encre) 7%, transparent); }
.ci-decroche__texte { max-width: 46ch; font-size: 1.05rem; }
.ci-decroche__note { max-width: 46ch; font-size: .84rem; color: var(--encre-douce); }
.ci-autres-cabinets--decroche { margin-block: 1.6rem 0; }

/* ------------------------------------------------------------------ socle : la feuille de salle du site, sur vert nuit */
.ci-sortie { background: var(--encre); color: var(--creme); border-top: 1px solid color-mix(in srgb, var(--terre-cuite) 70%, transparent); font-size: .9rem; }
.ci-enfilade + .ci-sortie, .ci-ensuite + .ci-sortie { margin-top: 0; }
.ci-sortie__rang { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); gap: clamp(1.6rem, 4vw, 4rem); padding-block: clamp(2.6rem, 6vw, 4.6rem) 1.6rem; }
.ci-sortie__nom { margin: 0 0 .7rem; font-family: var(--titre-police); font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); line-height: 1.1; }
.ci-sortie__texte { max-width: 56ch; margin: 0 0 .8rem; line-height: 1.6; color: var(--creme); }
.ci-sortie__note { padding-top: .8rem; border-top: 1px solid color-mix(in srgb, var(--creme) 18%, transparent); }
.ci-sortie__cle { margin-right: .4rem; font-size: .64rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--abricot); }
.ci-sortie__titre { margin: 0 0 .8rem; font-family: var(--titre-police); font-size: 1.3rem; line-height: 1.15; color: var(--abricot); }
.ci-sortie__liste { list-style: none; margin: 0; padding: 0; }
.ci-sortie__liste li { display: flex; align-items: baseline; gap: .55rem; margin-bottom: .5rem; }
.ci-sortie__numero { font-family: var(--titre-police); color: var(--abricot); }
.ci-sortie a { color: var(--creme); text-decoration-color: color-mix(in srgb, var(--abricot) 70%, transparent); }
.ci-sortie a:hover { color: var(--abricot); }
.ci-sortie__bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-block: 1.3rem 2rem; border-top: 1px solid color-mix(in srgb, var(--creme) 18%, transparent); }
.ci-sortie__ligne { margin: 0; font-size: .78rem; color: var(--creme); }

/* ------------------------------------------------------------------ tablette : 6 colonnes, empans ramenés */
@media (max-width: 64rem) {
  .ci-mur__accrochage { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ci-epreuve--e2, .ci-epreuve--e3, .ci-epreuve--e4, .ci-epreuve--e5 { grid-column: span 3; }
  .ci-epreuve--e6, .ci-epreuve--e7, .ci-epreuve--e8, .ci-epreuve--e9, .ci-epreuve--e10, .ci-epreuve--e11, .ci-epreuve--e12 { grid-column: span 6; }
  .ci-epreuve--haut { grid-row: auto; }
  .ci-epreuve--decale2 { margin-top: var(--decalage); }
  .ci-epreuve--e3 .ci-etiquette__usage { display: block; }
  .ci-feuille-de-salle, .ci-cabinet, .ci-hors-les-murs__rang, .ci-decroche { grid-template-columns: minmax(0, 1fr); }
  .ci-station { grid-template-columns: minmax(0, 1fr); }
  .ci-aparte { position: static; max-width: var(--mesure); }
  .ci-sortie__rang { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ci-sortie__mentions { grid-column: 1 / -1; }
  .ci-decroche__mur { max-width: 22rem; }
}

/* ------------------------------------------------------------------ téléphone : une colonne, décalages retirés */
@media (max-width: 38.75rem) {
  .ci-mur__accrochage { grid-template-columns: minmax(0, 1fr); }
  .ci-epreuve, .ci-epreuve--e2, .ci-epreuve--e3, .ci-epreuve--e4, .ci-epreuve--e5, .ci-epreuve--e6, .ci-epreuve--e7, .ci-epreuve--e8,
  .ci-epreuve--e9, .ci-epreuve--e10, .ci-epreuve--e11, .ci-epreuve--e12 { grid-column: 1 / -1; }
  .ci-epreuve--decale1, .ci-epreuve--decale2 { margin-top: 0; }
  .ci-epreuve--e2 .ci-etiquette__usage { display: block; }
  .ci-format--219 img { aspect-ratio: 3 / 2; }
  .ci-format--45 img { aspect-ratio: 5 / 6; }
  .ci-mur__tete { grid-template-columns: minmax(0, 1fr); }
  .ci-mur__note { text-align: left; }
  .ci-signaletique__sous-titre { display: none; }
  .ci-affiche__plaque { min-height: 34rem; }
  .ci-affiche__titre { font-size: clamp(2.7rem, 13vw, 3.4rem); }
  .ci-affiche__legende { top: .6rem; right: .6rem; left: .6rem; max-width: none; }
  .ci-diptyque__vues { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .ci-tringle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ci-sortie__rang { grid-template-columns: minmax(0, 1fr); }
  .ci-orientation ul { gap: .2rem 1rem; }
  .ci-orientation a { font-size: .86rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ci-format img { transition: none; }
  .ci-epreuve:hover .ci-format img, .ci-epreuve:focus-within .ci-format img { transform: none; filter: none; }
}

@media print {
  .ci-vestibule, .ci-sortie, .ci-aparte, .ci-hors-les-murs, .ci-raccourci, .ci-autres-cabinets { display: none !important; }
  body { background: #fff; color: #000; }
  .ci-affiche__plaque { min-height: 0; background: #fff; color: #000; }
  .ci-affiche__cadre { position: static; }
  .ci-affiche__cadre::after { display: none; }
  .ci-affiche__titre, .ci-affiche__sous-titre, .ci-affiche__dernier a { color: #000; }
  .ci-station { grid-template-columns: minmax(0, 1fr); }
}

/* couleur par salle : --ci-rc est posée en ligne sur les éléments d'une rubrique */
.ci-orientation__lien .ci-orientation__numero{color:var(--ci-rc,var(--terre-cuite-sombre))}
.ci-sortie__numero[style]{color:var(--ci-rc)}
.ci-grand-format__humaine{display:block;margin-bottom:.35rem;font-weight:400}