/* ===== Just for Today — peau « srk- » (direction 13 : The Reference Desk) =====
   Papier de nuit, ferrures laiton, une question répondue par rayon.
   Filets et changements de fond ; micro-ombre de papier posé, coins 12 px. */

@font-face { font-family: 'srk-titre'; src: url('srk-titre-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'srk-titre'; src: url('srk-titre-400i.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'srk-titre'; src: url('srk-titre-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'srk-texte'; src: url('srk-texte-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'srk-texte'; src: url('srk-texte-400i.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'srk-texte'; src: url('srk-texte-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'srk-mono'; src: url('srk-mono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'srk-mono'; src: url('srk-mono-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --nuit: #141d28;
  --feuille: #1b2836;
  --feuille-2: #223145;
  --trace: #e8ecf2;
  --trace-2: #b9c3d2;
  --laiton: #d4a24a;
  --laiton-2: #b4832f;
  --canard: #6fb2a8;
  --filet: #3a4a5e;
  --filet-2: #2b3a4c;
  --serif: 'srk-titre', 'Palatino', Georgia, serif;
  --sans: 'srk-texte', 'Segoe UI', -apple-system, sans-serif;
  --mono: 'srk-mono', Consolas, monospace;
}

* { box-sizing: border-box; }
html { background: var(--nuit); }
body {
  margin: 0;
  background: var(--nuit);
  color: var(--trace);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--laiton); text-decoration-color: var(--laiton-2); text-underline-offset: .18em; }
a:hover { color: var(--canard); }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.14; color: var(--trace); }
main { display: block; }

.srk-acces-direct { position: absolute; left: -9999px; top: 0; background: var(--laiton); color: var(--nuit); padding: .5rem 1rem; z-index: 50; }
.srk-acces-direct:focus { left: 0; }

/* ---------- fronton : la salle puis la barre d'onglets ---------- */
.srk-fronton { border-bottom: 1px solid var(--filet); }
.srk-fronton__salle {
  max-width: 72rem; margin: 0 auto; padding: 2.2rem 1.25rem 1.6rem;
  display: flex; align-items: center;
}
.srk-enseigne { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: var(--trace); }
.srk-enseigne:hover { color: var(--trace); }
.srk-enseigne__lampe { width: 44px; height: 44px; color: var(--laiton); flex: none; }
.srk-enseigne__bloc { display: flex; flex-direction: column; }
.srk-enseigne__nom { font-family: var(--serif); font-weight: 700; font-size: 1.75rem; letter-spacing: .01em; }
.srk-enseigne__devise { font-family: var(--mono); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--trace-2); margin-top: .15rem; }

.srk-pupitre { border-top: 1px solid var(--filet-2); background: var(--feuille); }
.srk-pupitre__onglets {
  max-width: 72rem; margin: 0 auto; padding: 0 1.25rem;
  list-style: none; display: flex; flex-wrap: wrap; gap: 0;
}
.srk-pupitre__onglets li { display: flex; }
.srk-pupitre__lien {
  display: block; padding: .72rem 1.05rem; font-family: var(--mono);
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--trace-2); text-decoration: none; border-left: 1px solid var(--filet-2);
}
.srk-pupitre__onglets li:first-child .srk-pupitre__lien { border-left: 0; }
.srk-pupitre__lien:hover { background: var(--feuille-2); color: var(--laiton); }
.srk-pupitre__lien[aria-current] { color: var(--laiton); background: var(--feuille-2); box-shadow: inset 0 -2px 0 var(--laiton); }

/* ---------- la salle : héros ---------- */
.srk-salle { max-width: 72rem; margin: 0 auto; padding: 3rem 1.25rem 2.4rem; }
.srk-salle__note, .srk-rayon__note {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--laiton); margin: 0 0 .9rem;
}
.srk-salle__titre { font-size: clamp(2.6rem, 5.4vw, 4.3rem); margin: 0 0 1.1rem; max-width: 46rem; }
.srk-salle__chapeau { font-size: 1.18rem; color: var(--trace-2); max-width: 42rem; margin: 0 0 1.4rem; }
.srk-salle__epigraphe {
  font-family: var(--serif); font-style: italic; font-size: 1.28rem; color: var(--laiton);
  max-width: 40rem; margin: 0; padding: .9rem 0 .9rem 1.2rem; border-left: 3px solid var(--laiton);
}

/* la plaque ouverte sur le bureau (article vedette) */
.srk-ouverte {
  margin-top: 2.6rem; display: grid; grid-template-columns: minmax(0, 21rem) 1fr; gap: 2.4rem;
  background: var(--feuille); border: 1px solid var(--filet); border-radius: 14px;
  padding: 1.6rem; box-shadow: 0 10px 26px rgba(0, 0, 0, .34);
}
.srk-ouverte__planche { margin: 0; }
.srk-ouverte__planche img { border-radius: 10px; border: 1px solid var(--filet); aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.srk-ouverte__legende { font-family: var(--mono); font-size: .74rem; color: var(--trace-2); margin-top: .55rem; }
.srk-ouverte__texte { padding: .4rem .4rem .4rem 0; }
.srk-ouverte__intitule { font-size: clamp(1.6rem, 3vw, 2.3rem); margin: .5rem 0 .8rem; }
.srk-ouverte__intitule a { color: var(--trace); text-decoration: none; }
.srk-ouverte__intitule a:hover { color: var(--laiton); }
.srk-ouverte__abrege { color: var(--trace-2); font-size: 1.04rem; max-width: 34rem; }

/* ---------- les rayons ---------- */
.srk-rayon { max-width: 72rem; margin: 0 auto; padding: 2.6rem 1.25rem 1rem; }
.srk-rayon__tete {
  display: flex; align-items: baseline; gap: 1.1rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--filet); padding-bottom: .8rem; margin-bottom: 1.6rem;
}
.srk-rayon__note { margin: 0; }
.srk-rayon__titre { font-size: 1.7rem; margin: 0; }
.srk-rayon__titre a { color: var(--trace); text-decoration: none; }
.srk-rayon__titre a:hover { color: var(--laiton); }
.srk-rayon__phrase { margin: 0; color: var(--trace-2); font-size: .95rem; }
.srk-rayon__decompte { margin-left: auto; font-family: var(--mono); font-size: .78rem; color: var(--canard); letter-spacing: .12em; }

/* ---------- la mosaïque de tuiles numérotées ---------- */
.srk-mosaique {
  display: grid; gap: 1.15rem;
  grid-template-columns: repeat(6, 1fr);
}
.srk-tuile {
  position: relative; background: var(--feuille); border: 1px solid var(--filet);
  border-radius: 14px; padding: 1.5rem 1.35rem 1.25rem;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
}
.srk-tuile--1 { grid-column: span 4; }
.srk-tuile--2 { grid-column: span 2; }
.srk-tuile--3 { grid-column: span 2; }
.srk-tuile--4 { grid-column: span 2; }
.srk-tuile--5 { grid-column: span 2; }
.srk-tuile__num {
  position: absolute; top: -.65rem; right: 1rem;
  font-family: var(--serif); font-weight: 700; font-size: 1.5rem; font-style: italic;
  color: var(--nuit); background: var(--laiton); padding: .35rem .7rem; line-height: 1;
  border-radius: 8px; min-width: 2.6rem; text-align: center;
}
.srk-tuile__titre { font-size: 1.45rem; margin: 0 0 .15rem; }
.srk-tuile__titre a { color: var(--trace); text-decoration: none; }
.srk-tuile__titre a:hover { color: var(--laiton); }
.srk-tuile__cote { font-family: var(--mono); font-size: .68rem; letter-spacing: .28em; color: var(--canard); margin: 0 0 .7rem; }
.srk-tuile__intro { color: var(--trace-2); font-size: .94rem; margin: 0 0 .9rem; }
.srk-tuile__liste { list-style: none; margin: 0 0 .9rem; padding: 0; }
.srk-tuile__liste li { border-top: 1px solid var(--filet-2); padding: .45rem 0; }
.srk-tuile__liste a { color: var(--trace); text-decoration: none; font-size: .95rem; }
.srk-tuile__liste a::before { content: '· '; color: var(--laiton); }
.srk-tuile__liste a:hover { color: var(--laiton); }
.srk-tuile__renvoi { margin: 0; font-family: var(--mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; }
.srk-tuile__renvoi a { color: var(--canard); text-decoration: none; }

/* ---------- le registre (plaques en rail) ---------- */
.srk-registre { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--filet); }
.srk-plaque { background: var(--feuille); border: 1px solid var(--filet); border-radius: 14px; overflow: hidden; }
.srk-plaque--rail {
  display: grid; grid-template-columns: 11rem 1fr; gap: 1.3rem; align-items: center;
  background: none; border: 0; border-bottom: 1px solid var(--filet-2); border-radius: 0;
  padding: 1.05rem .2rem;
}
.srk-plaque__vignette { margin: 0; }
.srk-plaque__vignette img { width: 100%; border-radius: 10px; border: 1px solid var(--filet); aspect-ratio: 4/3; object-fit: cover; }
.srk-plaque__meta { display: flex; align-items: baseline; gap: .8rem; margin: 0 0 .35rem; }
.srk-plaque__cote { font-family: var(--mono); font-size: .7rem; letter-spacing: .24em; color: var(--laiton); text-transform: uppercase; }
.srk-plaque__rayon { font-family: var(--mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--trace-2); text-decoration: none; }
.srk-plaque__rayon:hover { color: var(--canard); }
.srk-plaque__intitule { font-size: 1.28rem; margin: 0 0 .35rem; }
.srk-plaque__intitule a { color: var(--trace); text-decoration: none; }
.srk-plaque__intitule a:hover { color: var(--laiton); }
.srk-plaque__abrege { color: var(--trace-2); font-size: .93rem; margin: 0 0 .3rem; max-width: 46rem; }
.srk-plaque__date { font-family: var(--mono); font-size: .72rem; color: var(--canard); margin: 0; letter-spacing: .1em; }

/* ---------- l'encart ---------- */
.srk-encart {
  max-width: 72rem; margin: 2.2rem auto 0; padding: 1.6rem 1.25rem;
  border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet);
  background: var(--feuille); border-radius: 0;
}
.srk-encart .srk-rayon__note {
  display: inline-block; background: var(--laiton); color: var(--nuit);
  padding: .3rem .7rem; border-radius: 7px; margin-bottom: .7rem;
}
.srk-encart h2 { margin: 0 0 .5rem; font-size: 1.5rem; }
.srk-encart p { margin: 0; color: var(--trace-2); max-width: 52rem; }

/* ---------- ailleurs (réseau) ---------- */
.srk-ailleurs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .8rem; }
.srk-ailleurs__item {
  background: var(--feuille); border: 1px solid var(--filet-2); border-left: 3px solid var(--laiton);
  border-radius: 10px; padding: .8rem 1rem;
}
.srk-ailleurs__item p { margin: 0; font-size: .92rem; color: var(--trace-2); }

/* ---------- remontée ---------- */
.srk-remontee { max-width: 72rem; margin: 0 auto; padding: 1.1rem 1.25rem 0; }
.srk-remontee ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; font-family: var(--mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; }
.srk-remontee li { color: var(--trace-2); }
.srk-remontee li + li::before { content: '/'; color: var(--filet); margin-right: .45rem; }
.srk-remontee a { color: var(--canard); text-decoration: none; }
.srk-remontee li[aria-current] { color: var(--laiton); }

/* ---------- fiche article ---------- */
.srk-fiche { padding-bottom: 1rem; }
.srk-entete-fiche { max-width: 72rem; margin: 0 auto; padding: 1.6rem 1.25rem 1.4rem; }
.srk-fiche__titre { font-size: clamp(2rem, 4.4vw, 3.2rem); margin: .4rem 0 .9rem; max-width: 52rem; }
.srk-fiche__chapeau { font-size: 1.14rem; color: var(--trace-2); max-width: 44rem; margin: 0 0 .9rem; }
.srk-fiche__datation { font-family: var(--mono); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--canard); margin: 0; }
.srk-planche { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }
.srk-planche img { width: 100%; border-radius: 14px; border: 1px solid var(--filet); box-shadow: 0 12px 30px rgba(0, 0, 0, .36); }
.srk-planche__legende { font-family: var(--mono); font-size: .76rem; color: var(--trace-2); margin-top: .6rem; }
.srk-duo {
  max-width: 72rem; margin: 1.8rem auto 0; padding: 0 1.25rem;
  display: grid; grid-template-columns: minmax(0, 44rem) minmax(0, 17rem); gap: 3rem;
}
.srk-corps { font-size: 1.03rem; }
.srk-corps h2 {
  font-size: 1.55rem; margin: 2.2rem 0 .7rem; padding-top: 1.1rem;
  border-top: 1px solid var(--filet);
}
.srk-corps h2::before {
  content: '§'; color: var(--laiton); font-family: var(--mono); font-weight: 400;
  font-size: .85rem; letter-spacing: 0; margin-right: .6rem; vertical-align: .25em;
}
.srk-corps p { margin: 0 0 1rem; color: var(--trace); }
.srk-corps ul, .srk-corps ol { color: var(--trace); padding-left: 1.3rem; }
.srk-corps li { margin-bottom: .35rem; }
.srk-corps blockquote {
  margin: 1.4rem 0; padding: .9rem 1.2rem; border-left: 3px solid var(--laiton);
  background: var(--feuille); border-radius: 0 10px 10px 0;
  font-family: var(--serif); font-style: italic; color: var(--trace);
}
.srk-corps a { color: var(--laiton); }
.srk-releve {
  border-left: 1px solid var(--filet-2); padding-left: 1.4rem; align-self: start;
  position: sticky; top: 1.2rem;
}
.srk-releve__titre { font-family: var(--mono); font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: var(--laiton); margin: 0 0 .7rem; font-weight: 600; }
.srk-releve__sommaire { margin: 0 0 1.6rem; padding-left: 1.1rem; font-size: .9rem; }
.srk-releve__sommaire li { margin-bottom: .35rem; }
.srk-releve__sommaire a { color: var(--trace-2); text-decoration: none; }
.srk-releve__sommaire a:hover { color: var(--laiton); }
.srk-releve__sources { list-style: none; margin: 0; padding: 0; font-family: var(--mono); font-size: .76rem; }
.srk-releve__sources li { margin-bottom: .4rem; }
.srk-releve__sources a { color: var(--canard); }

/* ---------- fiche service ---------- */
.srk-fiche--service .srk-corps { max-width: 44rem; }

/* ---------- colophon de pied ---------- */
.srk-colophon { margin-top: 3rem; border-top: 1px solid var(--filet); background: var(--feuille); }
.srk-colophon__trois {
  max-width: 72rem; margin: 0 auto; padding: 2.2rem 1.25rem 1.6rem;
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.4rem;
}
.srk-colophon__titre { font-family: var(--mono); font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: var(--laiton); margin: 0 0 .8rem; font-weight: 600; }
.srk-colophon__case p { margin: 0; color: var(--trace-2); font-size: .92rem; }
.srk-colophon__liste { list-style: none; margin: 0; padding: 0; }
.srk-colophon__liste li { margin-bottom: .3rem; }
.srk-colophon__liste a { color: var(--trace-2); text-decoration: none; font-size: .92rem; }
.srk-colophon__liste a:hover { color: var(--laiton); }
.srk-brouillon {
  max-width: 72rem; margin: 0 auto; padding: 0 1.25rem 1.4rem;
}
.srk-brouillon__note {
  margin: 0; border: 1px dashed var(--filet); border-radius: 10px; padding: .8rem 1rem;
  font-family: var(--mono); font-size: .78rem; color: var(--trace-2);
}
.srk-colophon__ligne {
  max-width: 72rem; margin: 0 auto; padding: 1rem 1.25rem 1.6rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border-top: 1px solid var(--filet-2);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--trace-2);
}
.srk-colophon__heure { color: var(--laiton); }

/* ---------- deux largeurs ---------- */
@media (max-width: 62rem) {
  .srk-mosaique { grid-template-columns: repeat(2, 1fr); }
  .srk-tuile--1, .srk-tuile--2, .srk-tuile--3, .srk-tuile--4, .srk-tuile--5 { grid-column: auto; }
  .srk-ouverte { grid-template-columns: 1fr; }
  .srk-duo { grid-template-columns: 1fr; gap: 1.6rem; }
  .srk-releve { position: static; border-left: 0; border-top: 1px solid var(--filet); padding-left: 0; padding-top: 1.2rem; }
  .srk-colophon__trois { grid-template-columns: 1fr; gap: 1.6rem; }
}
@media (max-width: 34rem) {
  .srk-mosaique { grid-template-columns: 1fr; }
  .srk-plaque--rail { grid-template-columns: 1fr; }
  .srk-plaque__vignette img { max-width: 16rem; }
  .srk-enseigne__nom { font-size: 1.4rem; }
  .srk-salle { padding-top: 2rem; }
}