/* =========================================================================
   SQUELETTE « grille-annuaire »
   Repertoire : grille de fiches courtes et denses + pages de detail structurees.
   Tout le rhabillage passe par le bloc VARIABLES ci-dessous.
   Aucune ressource externe : polices systeme uniquement, zero requete reseau.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. VARIABLES (le seul bloc a toucher pour un rhabillage rapide)
   ------------------------------------------------------------------------- */
:root {
  /* Couleurs */
  --fond: #edf1f0;            /* fond de page, gris minerai froid */
  --papier: #ffffff;          /* fond des fiches et des blocs */
  --papier-creux: #e2eae8;    /* aplats secondaires, vignettes */
  --encre: #17262a;           /* texte principal */
  --encre-attenuee: #52646a;  /* texte secondaire, metadonnees */
  --liseret: #c8d8d6;         /* filets et bordures */
  --accent: #0e6b73;          /* couleur d'identite, bleu petrole */
  --accent-sombre: #0a545b;   /* liens, survol */
  --accent-voile: #ddeeee;    /* fond des etiquettes */
  --appui: #a2542a;           /* seconde teinte, rubriques */

  /* Polices (piles systeme, aucune police distante) */
  --titre-police: Charter, "Bitstream Charter", "Sitka Text", Cambria, Constantia, "Nimbus Roman", serif;
  --texte-police: "IBM Plex Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --chiffre-police: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Mesures */
  --travee: 72rem;            /* largeur max du conteneur */
  --mesure: 34rem;            /* largeur de lecture confortable */
  --pas-grille: 15rem;        /* largeur mini d'une fiche dans la grille */
  --rythme: 1.5rem;           /* pas vertical de base */
  --arrondi: 2px;
  --filet: 1px solid var(--liseret);
  --teinte: var(--accent);    /* teinte de rubrique, surchargee par fiche */
}

/* Variante sombre automatique. Supprimer ce bloc si le site doit rester clair. */
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #14191a;
    --papier: #1c2325;
    --papier-creux: #242d2f;
    --encre: #e6eeee;
    --encre-attenuee: #a0b0b2;
    --liseret: #354143;
    --accent: #4bb3bc;
    --accent-sombre: #8ed6db;
    --accent-voile: #16302f;
    --appui: #d99a6c;
  }
}

/* -------------------------------------------------------------------------
   2. SOCLE
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--texte-police);
  font-size: clamp(1rem, .97rem + .18vw, 1.0625rem);
  line-height: 1.6;
  overflow-wrap: break-word;
}

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

h1, h2, h3, h4 {
  font-family: var(--titre-police);
  line-height: 1.15;
  margin: 0 0 .6em;
  font-weight: 600;
}
h1 { font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.6rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.3rem, 1.15rem + .7vw, 1.7rem); }
h3 { font-size: 1.1rem; }
p, ul, ol, dl, table { margin: 0 0 var(--rythme); }

a { color: var(--accent-sombre); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--encre); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--arrondi);
}

/* Conteneur : jamais de debordement horizontal, marge laterale constante. */
.travee { width: min(100% - 2rem, var(--travee)); margin-inline: auto; }

.nh3-direct {
  position: absolute; left: -9999px; top: 0;
  background: var(--encre); color: var(--papier);
  padding: .6rem 1rem; z-index: 20;
}
.nh3-direct:focus { left: .5rem; top: .5rem; }

/* -------------------------------------------------------------------------
   3. FRONTON (en-tete)
   ------------------------------------------------------------------------- */
.fronton { background: var(--papier); border-bottom: var(--filet); }
.fronton__barre { height: 4px; background: var(--accent); }
.fronton__interieur {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .5rem 1.5rem; padding: 1.1rem 0;
}
.enseigne {
  font-family: var(--titre-police); font-size: 1.35rem; font-weight: 600;
  color: var(--encre); text-decoration: none; letter-spacing: -.01em;
}
.enseigne:hover { color: var(--accent-sombre); }
.devise {
  margin: 0; color: var(--encre-attenuee); font-size: .875rem;
  border-left: var(--filet); padding-left: 1rem;
}
.parcours { margin-left: auto; }
.parcours ul { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.parcours__lien {
  color: var(--encre-attenuee); text-decoration: none;
  font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase;
}
.parcours__lien:hover, .parcours__lien[aria-current] { color: var(--accent-sombre); }
.parcours__lien[aria-current] { box-shadow: inset 0 -2px 0 var(--accent); }

@media (max-width: 40rem) {
  .devise { border-left: 0; padding-left: 0; flex-basis: 100%; }
  .parcours { margin-left: 0; flex-basis: 100%; }
}

/* -------------------------------------------------------------------------
   4. PREAMBULE + BILAN CHIFFRE
   ------------------------------------------------------------------------- */
.preambule { padding: calc(var(--rythme) * 2) 0 var(--rythme); }
.preambule p { max-width: var(--mesure); color: var(--encre-attenuee); }
.preambule h1 { max-width: 22ch; }

.bilan {
  display: flex; flex-wrap: wrap; gap: 0; list-style: none;
  margin: var(--rythme) 0 0; padding: 0;
  border: var(--filet); border-radius: var(--arrondi); background: var(--papier);
}
.bilan__poste { flex: 1 1 8rem; padding: .8rem 1rem; border-right: var(--filet); }
.bilan__poste:last-child { border-right: 0; }
.bilan__chiffre {
  display: block; font-family: var(--chiffre-police);
  font-size: 1.35rem; color: var(--accent-sombre);
}
.bilan__libelle {
  display: block; font-size: .75rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--encre-attenuee);
}

/* -------------------------------------------------------------------------
   5. ONGLETS DE RUBRIQUE (filtre)
   ------------------------------------------------------------------------- */
.onglets {
  display: flex; flex-wrap: wrap; gap: .4rem;
  padding: var(--rythme) 0 calc(var(--rythme) / 2);
  border-bottom: var(--filet);
}
.onglet {
  font: inherit; font-size: .8125rem;
  display: inline-block; padding: .4rem .85rem;
  border: var(--filet); border-radius: 999px;
  background: var(--papier); color: var(--encre-attenuee);
  text-decoration: none; cursor: pointer;
}
.onglet:hover { border-color: var(--accent); color: var(--accent-sombre); }
.onglet--courant, .onglet[aria-current="true"] {
  background: var(--accent); border-color: var(--accent);
  color: #ffffff; font-weight: 500;
}
@media (prefers-color-scheme: dark) {
  .onglet--courant, .onglet[aria-current="true"] { color: #16181c; }
}

/* -------------------------------------------------------------------------
   6. RAYON (section) + CASIER (grille de fiches)
   ------------------------------------------------------------------------- */
.rayon { padding: calc(var(--rythme) * 1.6) 0; }
.rayon__tete {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .5rem 1rem; margin-bottom: var(--rythme);
}
.rayon__tete h2 { margin: 0; }
.rayon__decompte {
  font-family: var(--chiffre-police); font-size: .8125rem;
  color: var(--encre-attenuee);
}
.rayon__tete .renvoi { margin-left: auto; }
.rayon__chapeau { max-width: var(--mesure); color: var(--encre-attenuee); }

.casier {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--pas-grille), 1fr));
  gap: 1rem;
}

.entree {
  display: flex; flex-direction: column;
  background: var(--papier);
  border: var(--filet);
  border-top: 3px solid var(--teinte);
  border-radius: var(--arrondi);
  padding: .9rem 1rem 1rem;
}
.entree:hover { border-color: var(--teinte); }
/* Teinte par rubrique : ajouter une regle par rubrique du site. */
.entree[data-rubrique="outils"]     { --teinte: var(--appui); }
.entree[data-rubrique="gestes"]     { --teinte: var(--encre-attenuee); }
.entree[data-rubrique="entretien"]  { --teinte: var(--liseret); }

.entree__cote {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 0 0 .5rem;
}
.cote {
  font-family: var(--chiffre-police); font-size: .75rem;
  letter-spacing: .04em; color: var(--encre-attenuee);
}
.mention {
  font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase;
  background: var(--accent-voile); color: var(--accent-sombre);
  padding: .15rem .5rem; border-radius: var(--arrondi);
}
.entree__intitule { margin: 0 0 .4rem; font-size: 1.05rem; }
.entree__intitule a { color: var(--encre); text-decoration: none; }
.entree__intitule a:hover { color: var(--accent-sombre); text-decoration: underline; }
.entree__abrege { font-size: .9rem; color: var(--encre-attenuee); margin: 0 0 .75rem; }

.entree__vignette {
  margin: -.9rem -1rem .75rem;
  border-bottom: var(--filet);
  background: var(--papier-creux);
}
.entree__vignette img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.entree__attributs {
  margin: 0 0 .8rem; padding: .55rem 0 0;
  border-top: var(--filet); font-size: .8125rem;
}
.attribut { display: flex; gap: .5rem; justify-content: space-between; padding: .12rem 0; }
.attribut dt { color: var(--encre-attenuee); }
.attribut dd { margin: 0; font-family: var(--chiffre-police); font-size: .78rem; text-align: right; }

.entree__renvoi { margin: auto 0 0; }
.renvoi {
  font-size: .8125rem; font-weight: 500; text-decoration: none;
  color: var(--accent-sombre);
}
.renvoi:hover { text-decoration: underline; }
.renvoi span { margin-left: .25rem; }

/* -------------------------------------------------------------------------
   7. ABECEDAIRE (index alphabetique)
   ------------------------------------------------------------------------- */
.abecedaire {
  display: flex; flex-wrap: wrap; gap: .3rem;
  list-style: none; margin: 0; padding: 0;
}
.abecedaire__lettre {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2rem; padding: .3rem .4rem;
  background: var(--papier); border: var(--filet); border-radius: var(--arrondi);
  font-family: var(--chiffre-police); font-size: .8125rem;
  text-decoration: none; color: var(--encre);
}
.abecedaire__lettre:hover { border-color: var(--accent); color: var(--accent-sombre); }
.abecedaire__lettre[aria-disabled="true"] {
  color: var(--encre-attenuee); background: transparent;
  border-style: dashed; pointer-events: none;
}

/* -------------------------------------------------------------------------
   8. ENCART (bloc editorial court)
   ------------------------------------------------------------------------- */
.encart {
  background: var(--papier); border: var(--filet);
  border-left: 3px solid var(--accent);
  border-radius: var(--arrondi);
  padding: 1.1rem 1.25rem;
}
.encart h2 { font-size: 1.15rem; }
.encart p:last-child, .encart ul:last-child { margin-bottom: 0; }
.encart ul { padding-left: 1.1rem; }
.encart li { margin-bottom: .35rem; }

/* -------------------------------------------------------------------------
   9. REGISTRE (liste dense : page de rubrique)
   ------------------------------------------------------------------------- */
.registre { list-style: none; margin: 0 0 var(--rythme); padding: 0; border-top: var(--filet); }
.ligne {
  display: grid; gap: .25rem 1rem;
  grid-template-columns: 1fr;
  padding: .95rem 0;
  border-bottom: var(--filet);
}
.ligne__cote { font-family: var(--chiffre-police); font-size: .75rem; color: var(--encre-attenuee); }
.ligne__intitule { margin: 0; font-size: 1.05rem; }
.ligne__intitule a { color: var(--encre); text-decoration: none; }
.ligne__intitule a:hover { color: var(--accent-sombre); text-decoration: underline; }
.ligne__abrege { margin: 0; font-size: .9rem; color: var(--encre-attenuee); max-width: var(--mesure); }
.ligne__attributs { margin: .2rem 0 0; font-size: .8125rem; display: grid; gap: .1rem; }

@media (min-width: 52rem) {
  .ligne { grid-template-columns: 6rem minmax(0, 1fr) 14rem; align-items: start; }
  .ligne__cote { grid-row: span 2; padding-top: .25rem; }
  .ligne__attributs { grid-column: 3; grid-row: 1 / span 2; }
}

.feuilletage {
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
  list-style: none; margin: 0; padding: 0; font-family: var(--chiffre-police); font-size: .8125rem;
}
.feuilletage a, .feuilletage span {
  display: inline-block; padding: .35rem .7rem;
  border: var(--filet); border-radius: var(--arrondi);
  background: var(--papier); text-decoration: none; color: var(--encre);
}
.feuilletage [aria-current="page"] { background: var(--accent); border-color: var(--accent); color: #ffffff; }
@media (prefers-color-scheme: dark) { .feuilletage [aria-current="page"] { color: #16181c; } }

/* -------------------------------------------------------------------------
   10. PAGE DE DETAIL : remontee, entete, duo texte + rail
   ------------------------------------------------------------------------- */
.remontee { padding: var(--rythme) 0 0; font-size: .8125rem; color: var(--encre-attenuee); }
.remontee ol { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.remontee li::after { content: "/"; margin-left: .35rem; color: var(--liseret); }
.remontee li:last-child::after { content: ""; }

.entete-fiche { padding: var(--rythme) 0 calc(var(--rythme) / 2); border-bottom: var(--filet); }
.entete-fiche h1 { margin-bottom: .4rem; }
.chapeau { font-size: 1.05rem; color: var(--encre-attenuee); max-width: var(--mesure); }
.datation { font-family: var(--chiffre-police); font-size: .75rem; color: var(--encre-attenuee); margin: 0; }

.duo { display: grid; gap: calc(var(--rythme) * 1.5); padding: calc(var(--rythme) * 1.5) 0; }
@media (min-width: 60rem) {
  .duo { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
  .rail { position: sticky; top: 1rem; }
}

.corps > * { max-width: var(--mesure); }
.corps h2 { margin-top: calc(var(--rythme) * 1.6); }
.corps h3 { margin-top: var(--rythme); }
.corps ul, .corps ol { padding-left: 1.2rem; }
.corps li { margin-bottom: .35rem; }
.corps figure { max-width: 100%; margin: var(--rythme) 0; }
.corps figcaption { font-size: .8125rem; color: var(--encre-attenuee); padding-top: .4rem; }

/* Releve de caracteristiques (le tableau de la fiche) */
.releve {
  background: var(--papier); border: var(--filet); border-radius: var(--arrondi);
  padding: .35rem 1rem 1rem;
}
.releve h2 { font-size: 1rem; margin: .75rem 0 .5rem; }
.releve table { width: 100%; border-collapse: collapse; font-size: .875rem; margin: 0; }
.releve th, .releve td { text-align: left; padding: .45rem 0; border-bottom: var(--filet); vertical-align: top; }
.releve tr:last-child th, .releve tr:last-child td { border-bottom: 0; }
.releve th { font-weight: 500; color: var(--encre-attenuee); width: 45%; }
.releve td { font-family: var(--chiffre-police); font-size: .82rem; }

/* Jalons : sommaire interne de la fiche */
.jalons { margin-top: var(--rythme); }
.jalons h2 { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-attenuee); font-family: var(--texte-police); }
.jalons ol { list-style: none; margin: 0; padding: 0; counter-reset: jalon; }
.jalons li { counter-increment: jalon; border-top: var(--filet); }
.jalons__lien { display: block; padding: .45rem 0; font-size: .875rem; text-decoration: none; color: var(--encre); }
.jalons__lien::before {
  content: counter(jalon, decimal-leading-zero) " ";
  font-family: var(--chiffre-police); font-size: .75rem; color: var(--accent-sombre);
}
.jalons__lien:hover { color: var(--accent-sombre); }

/* Tableau large : defilement propre, jamais de debordement de page */
.tableau-defilant { overflow-x: auto; border: var(--filet); border-radius: var(--arrondi); background: var(--papier); max-width: 100%; }
.tableau-defilant table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .875rem; margin: 0; }
.tableau-defilant caption { text-align: left; padding: .7rem 1rem; font-size: .8125rem; color: var(--encre-attenuee); }
.tableau-defilant th, .tableau-defilant td { padding: .55rem 1rem; border-bottom: var(--filet); text-align: left; }
.tableau-defilant thead th { background: var(--papier-creux); font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; }
.tableau-defilant tbody tr:last-child th, .tableau-defilant tbody tr:last-child td { border-bottom: 0; }
.tableau-defilant td { font-family: var(--chiffre-police); font-size: .82rem; }
.tableau-defilant:focus-visible { outline: 2px solid var(--accent); }

/* Voisinage : entrees liees en bas de fiche */
.voisinage { border-top: var(--filet); padding: calc(var(--rythme) * 1.5) 0; }
.voisinage .casier { --pas-grille: 13rem; }

/* -------------------------------------------------------------------------
   11. PIED
   ------------------------------------------------------------------------- */
.pied { background: var(--papier); border-top: var(--filet); padding: calc(var(--rythme) * 1.5) 0; margin-top: var(--rythme); }
.pied__colonnes { display: grid; gap: var(--rythme); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.pied h2 { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-attenuee); font-family: var(--texte-police); }
.pied ul { list-style: none; margin: 0; padding: 0; font-size: .875rem; }
.pied li { margin-bottom: .3rem; }
.pied__mention { border-top: var(--filet); margin-top: var(--rythme); padding-top: .9rem; font-size: .8125rem; color: var(--encre-attenuee); }

/* -------------------------------------------------------------------------
   12. UTILITAIRES
   ------------------------------------------------------------------------- */
.hors-ecran {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }

/* -------------------------------------------------------------------------
   NH3 LIMPIEZAS : interface éditoriale cm-*
   ------------------------------------------------------------------------- */
:root {
  --cm-fond: #edf1f0;
  --cm-papier: #ffffff;
  --cm-encre: #17262a;
  --cm-attenuee: #52646a;
  --cm-liseret: #c8d8d6;
  --cm-accent: #0e6b73;
  --cm-accent-sombre: #0a545b;
  --cm-appui: #a2542a;
  --cm-max: 76rem;
  --cm-gouttiere: clamp(1rem, 3vw, 2.5rem);
  --cm-radius: .35rem;
}

body { background: var(--cm-fond); color: var(--cm-encre); }
.cm-passe { width: min(100% - 2 * var(--cm-gouttiere), var(--cm-max)); margin-inline: auto; }
.cm-corniche { background: var(--cm-papier); border-top: .3rem solid var(--cm-accent); border-bottom: 1px solid var(--cm-liseret); }
.cm-corniche__rang { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; min-height: 4.8rem; }
.cm-enseigne { color: var(--cm-encre); font-family: var(--titre-police); font-size: clamp(1.15rem, 1rem + .7vw, 1.55rem); line-height: 1.1; text-decoration: none; }
.cm-enseigne span { display: block; margin-top: .25rem; color: var(--cm-attenuee); font: .72rem/1.2 var(--texte-police); letter-spacing: .05em; text-transform: uppercase; }
.cm-visite ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem .9rem; list-style: none; margin: 0; padding: 0; }
.cm-visite a { color: var(--cm-attenuee); font-size: .78rem; text-decoration: none; }
.cm-visite a:hover, .cm-visite a[aria-current="page"] { color: var(--cm-accent-sombre); text-decoration: underline; text-underline-offset: .25em; }
.cm-scene { min-height: 60vh; }
.cm-accroche { position: relative; min-height: clamp(16rem, 34vw, 25rem); overflow: hidden; background: var(--cm-encre); }
.cm-accroche__vue { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cm-accroche::after { content: ""; position: absolute; inset: 0; background: #0a545bcc; }
.cm-accroche > .cm-passe { position: relative; z-index: 1; display: flex; align-items: flex-end; min-height: inherit; padding-block: clamp(2rem, 5vw, 4rem); }
.cm-cartel-flottant { max-width: 42rem; color: #fff; }
.cm-cartel-flottant h1 { max-width: 15ch; margin-bottom: .5rem; color: #fff; font-size: clamp(2rem, 4vw, 3.9rem); }
.cm-cartel-flottant p { max-width: 42rem; margin: 0; color: #f1fbfa; font-size: clamp(1rem, .9rem + .4vw, 1.25rem); }
.cm-inventaire { display: inline-block; margin-bottom: .55rem; color: var(--cm-appui); font: .72rem/1.2 var(--chiffre-police); letter-spacing: .12em; text-transform: uppercase; }
.cm-salle { padding-block: clamp(1.5rem, 3vw, 3rem); }
.cm-salle__bandeau { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--cm-liseret); padding-bottom: .75rem; }
.cm-salle__titre h1, .cm-salle__titre h2 { margin: 0; }
.cm-salle__note { margin: 0; color: var(--cm-attenuee); font-size: .82rem; }
.cm-cimaise { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; list-style: none; margin: 0; padding: 0; }
.cm-tirage { min-width: 0; overflow: hidden; background: var(--cm-papier); border: 1px solid var(--cm-liseret); border-radius: var(--cm-radius); }
.cm-tirage--large, .cm-tirage--plein { grid-column: span 2; }
.cm-tirage__cadrage { background: #dce8e6; }
.cm-tirage__vue { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.cm-tirage__cartel { padding: 1rem; }
.cm-tirage__titre { margin-bottom: .45rem; font-size: 1.05rem; }
.cm-tirage__titre a { color: var(--cm-encre); text-decoration: none; }
.cm-tirage__titre a:hover { color: var(--cm-accent-sombre); text-decoration: underline; }
.cm-tirage__mot { margin-bottom: .65rem; color: var(--cm-attenuee); font-size: .88rem; }
.cm-tirage__indication { margin: 0; color: var(--cm-appui); font: .72rem/1.2 var(--chiffre-police); letter-spacing: .05em; text-transform: uppercase; }
.cm-repertoire { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.cm-repertoire__entree { position: relative; overflow: hidden; min-height: 10rem; border-radius: var(--cm-radius); background: var(--cm-encre); }
.cm-repertoire__vue { width: 100%; height: 100%; min-height: 10rem; object-fit: cover; opacity: .72; transition: transform .25s ease, opacity .25s ease; }
.cm-repertoire__entree:hover .cm-repertoire__vue { transform: scale(1.03); opacity: .9; }
.cm-repertoire__nom { position: absolute; inset: auto 0 0; display: flex; justify-content: space-between; gap: .5rem; padding: 1rem; background: linear-gradient(transparent, #0a3034e8); color: #fff; font-family: var(--titre-police); font-size: 1.25rem; text-decoration: none; }
.cm-repertoire__compte { align-self: end; color: #d7ecea; font: .7rem var(--chiffre-police); }
.cm-flujo__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cm-liseret); }
.cm-flujo__item { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 1rem; align-items: baseline; padding: .75rem 0; border-bottom: 1px solid var(--cm-liseret); }
.cm-flujo__item time { color: var(--cm-attenuee); font: .75rem var(--chiffre-police); }
.cm-flujo__item a { color: var(--cm-encre); font-weight: 600; text-decoration: none; }
.cm-flujo__item a:hover { color: var(--cm-accent-sombre); text-decoration: underline; }
.cm-fil { padding-top: 1.1rem; color: var(--cm-attenuee); font-size: .8rem; }
.cm-fil ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.cm-fil li:not(:last-child)::after { content: "›"; margin-left: .4rem; color: var(--cm-liseret); }
.cm-ouverture { max-width: 52rem; padding-block: 2rem 1rem; }
.cm-ouverture h1 { margin-bottom: .65rem; }
.cm-ouverture__chapo { color: var(--cm-attenuee); font-size: 1.08rem; }
.cm-indications { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; list-style: none; margin: 0; padding: 0; color: var(--cm-attenuee); font: .75rem var(--chiffre-police); }
.cm-planche { max-width: 60rem; margin: 0 auto 1.5rem; }
.cm-planche img { width: 100%; border-radius: var(--cm-radius); }
.cm-planche figcaption, .cm-diptyque figcaption { margin-top: .45rem; color: var(--cm-attenuee); font-size: .8rem; }
.cm-colonne { max-width: 48rem; padding-bottom: 2rem; }
.cm-colonne h2 { margin-top: 2rem; }
.cm-colonne ol, .cm-colonne ul { padding-left: 1.3rem; }
.cm-diptyque { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.cm-diptyque img { width: 100%; border-radius: var(--cm-radius); }
.cm-diptyque figcaption { grid-column: 1 / -1; }
.cm-exergue { margin: 1.5rem 0; border-left: .25rem solid var(--cm-appui); padding: .8rem 1rem; background: var(--cm-papier); color: var(--cm-accent-sombre); font-family: var(--titre-police); font-size: 1.15rem; }
.cm-meta-links { border-top: 1px solid var(--cm-liseret); padding-top: 1rem; color: var(--cm-attenuee); font-size: .85rem; }
.cm-poursuivre { color: var(--cm-accent-sombre); font-size: .82rem; font-weight: 600; }
.cm-socle { margin-top: 2rem; border-top: 1px solid var(--cm-liseret); background: var(--cm-papier); }
.cm-socle__rang { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2rem; padding-block: 2rem; }
.cm-socle h2 { font-size: .9rem; }
.cm-socle p, .cm-socle ul { color: var(--cm-attenuee); font-size: .88rem; }
.cm-socle ul { margin: 0; padding-left: 1.1rem; }
.cm-socle__bas { margin: 0; border-top: 1px solid var(--cm-liseret); padding: .8rem 0 1.2rem; }

/* La grille des rubriques arrive immédiatement après le bandeau d'accueil. */
.cm-accroche + .cm-passe { display: flex; flex-direction: column; }
.cm-accroche + .cm-passe > .cm-salle:nth-child(2) { order: -1; }

@media (max-width: 58rem) {
  .cm-corniche__rang { align-items: flex-start; flex-direction: column; padding-block: 1rem; }
  .cm-visite ul { justify-content: flex-start; }
  .cm-cimaise, .cm-repertoire { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .cm-cimaise, .cm-repertoire, .cm-flujo__lista { grid-template-columns: 1fr; }
  .cm-tirage--large, .cm-tirage--plein { grid-column: span 1; }
  .cm-salle__bandeau { align-items: flex-start; flex-direction: column; }
  .cm-flujo__item { grid-template-columns: 1fr; gap: .15rem; }
  .cm-diptyque, .cm-socle__rang { grid-template-columns: 1fr; }
  .cm-cartel-flottant h1 { font-size: 2.2rem; }
}