/* Plein Midi, feuille d'appareillage.
   Métaphore : le mur appareillé et l'ombre portée. La chaux est le fond,
   le basalte l'encre, l'ocre midi ce que le soleil frappe en plein, le
   bleu volet ce qu'il évite. Cinq leviers de forme :
   1. héros plein jour, texte posé dans l'ombre portée, cartouche chiffré ;
   2. registre dense d'une colonne, dates en majuscules ;
   3. notice de 58 canaux à gauche, rail collant à droite ;
   4. filets d'arase et hachures à 45 degrés, aucun glyphe figuratif ;
   5. passe-partout à double filet sur chaque photographie.
   Rayon nul partout. */

:root {
  --chaux: #eae5db;
  --chaux-vive: #f5f2ec;
  --chaux-ombree: #dcd5c7;
  --basalte: #26303f;
  --basalte-pale: #59626f;
  --ocre-midi: #8f4b18;
  --ocre-cuit: #733a10;
  --bleu-volet: #2f6079;
  --joint: #c8c0af;
  --voile: rgba(31, 38, 48, .78);
  --encre: var(--basalte);
  --fond: var(--chaux);
  --fond-vif: var(--chaux-vive);
  --fond-ombre: var(--chaux-ombree);
  --accent: var(--ocre-midi);
  --refroidi: var(--bleu-volet);
  --filet: 1px solid var(--joint);
  --hachures: repeating-linear-gradient(45deg, transparent 0 7px, rgba(38, 48, 63, .055) 7px 8px);
  --mur: 76rem;        /* largeur du mur appareillé */
  --canal: 58ch;       /* la notice se lit en 58 canaux */
  --mesure: 1.7;       /* interligne de la notice */
  --titres: Optima, Candara, "Gill Sans", "Gill Sans MT", "Segoe UI", system-ui, sans-serif;
  --texte: Constantia, "Lucida Bright", Lucida, "Book Antiqua", Georgia, serif;
  --cotes: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --encre: #e6e0d4;
    --fond: #1d242f;
    --fond-vif: #232b38;
    --fond-ombre: #181e28;
    --accent: #d1813f;
    --refroidi: #7fa9bd;
    --joint: #3d4756;
    --filet: 1px solid var(--joint);
    --hachures: repeating-linear-gradient(45deg, transparent 0 7px, rgba(230, 224, 212, .05) 7px 8px);
    --voile: rgba(16, 20, 26, .82);
  }
}

* { box-sizing: border-box; border-radius: 0; }

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

body {
  margin: 0;
  background: var(--fond);
  background-image: var(--hachures);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.65;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--ocre-cuit); text-decoration-style: solid; }

h1, h2, h3, h4 {
  font-family: var(--titres);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: .005em;
  margin: 0 0 .55em;
}
h1 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); }
h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin-top: 1.9em; }
h3 { font-size: 1.12rem; margin-top: 1.4em; }
p { margin: 0 0 1em; }

/* Le mur : assise centrale de la page. */
.asi-mur {
  width: min(var(--mur), 100% - 2.5rem);
  margin-inline: auto;
}

.asi-echappee {
  position: absolute;
  left: -9999px;
  padding: .6rem 1rem;
  background: var(--fond-vif);
  color: var(--encre);
  font-family: var(--titres);
}
.asi-echappee:focus { left: 0; z-index: 60; }

/* ---------- 1. La arase : bandeau de navigation ---------- */
.asi-arase {
  border-bottom: 3px solid var(--encre);
  background: var(--fond-vif);
}
.asi-arase__rang {
  display: flex;
  align-items: baseline;
  gap: 1.4rem;
  padding: .8rem 0 .7rem;
  flex-wrap: wrap;
}
.asi-arase__mot {
  font-family: var(--titres);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: .02em;
  color: var(--encre);
  text-decoration: none;
  white-space: nowrap;
}
.asi-arase__mot span {
  display: block;
  font-weight: 400;
  font-size: .68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--basalte-pale);
}
.asi-cheminement ul {
  display: flex;
  gap: 1.1rem;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--titres);
  font-size: .88rem;
}
.asi-cheminement a {
  color: var(--encre);
  text-decoration: none;
  padding-bottom: .12em;
  border-bottom: 2px solid transparent;
}
.asi-cheminement a:hover { border-bottom-color: var(--accent); color: var(--encre); }
.asi-arase__gnomon {
  margin: 0 0 0 auto;
  font-family: var(--cotes);
  font-size: .72rem;
  letter-spacing: .05em;
  color: var(--basalte-pale);
  display: flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;
}
/* Le gnomon : carré plein, ombre portée fixe, index de midi. */
.asi-gnomon {
  width: .72rem;
  height: .72rem;
  background: var(--accent);
  box-shadow: .32rem .32rem 0 var(--joint);
}

/* ---------- 2. Le couronnement : héros plein jour ---------- */
.asi-couronnement {
  position: relative;
  border-bottom: 3px solid var(--encre);
}
.asi-couronnement__cliche {
  width: 100%;
  height: clamp(21rem, 50vh, 32rem);
  object-fit: cover;
  object-position: 50% 62%;
}
.asi-couronnement__ombre {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(31, 38, 48, .18) 0%, rgba(31, 38, 48, .05) 34%, var(--voile) 100%);
}
.asi-couronnement__enonce {
  position: absolute;
  inset: auto 0 0 0;
  padding-block: 0 1.4rem;
}
.asi-couronnement__front {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.6rem;
  flex-wrap: wrap;
}
.asi-couronnement__front > div:first-child { max-width: 46rem; }
.asi-couronnement__surtitre {
  font-family: var(--titres);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .74rem;
  color: var(--chaux-ombree);
  margin: 0 0 .5em;
}
.asi-couronnement__front h1 { color: #f5f2ec; text-shadow: 0 1px 14px rgba(16, 20, 26, .5); margin-bottom: .35em; }
.asi-couronnement__chapeau {
  color: #e6e0d4;
  font-size: 1.08rem;
  max-width: 44ch;
  margin-bottom: .7em;
}
.asi-couronnement__mention {
  font-family: var(--cotes);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--chaux-ombree);
  margin: 0;
}

/* Le cartouche : encadré double filet, cotes en mono, posé sur l'ombre. */
.asi-cartouche {
  border: 1px solid #e6e0d4;
  outline: 1px solid #e6e0d4;
  outline-offset: .28rem;
  background: var(--voile);
  padding: .9rem 1.1rem .8rem;
  min-width: 15rem;
  max-width: 19rem;
  color: #f5f2ec;
}
.asi-cartouche__intitule {
  font-family: var(--titres);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 .55em;
  color: var(--chaux-ombree);
}
.asi-cartouche ul { list-style: none; margin: 0; padding: 0; }
.asi-cartouche li {
  display: flex;
  gap: .7rem;
  align-items: baseline;
  padding: .3rem 0;
  border-top: 1px solid rgba(230, 224, 212, .35);
  font-size: .84rem;
  line-height: 1.45;
}
.asi-cartouche li strong {
  font-family: var(--cotes);
  font-size: .82rem;
  white-space: nowrap;
  color: #f0d9c2;
}
/* Cartouche de rail (fond clair, hors héros) */
.asi-rail .asi-cartouche {
  border-color: var(--encre);
  outline-color: var(--joint);
  background: var(--fond-vif);
  color: var(--encre);
}
.asi-rail .asi-cartouche__intitule { color: var(--basalte-pale); }
.asi-rail .asi-cartouche li { border-top-color: var(--joint); }
.asi-rail .asi-cartouche li strong { color: var(--ocre-cuit); }

/* ---------- 3. Le calepin : six tuiles photographiées ---------- */
.asi-calepin {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  counter-reset: tuile;
}
.asi-calepin__module {
  counter-increment: tuile;
  background: var(--fond-vif);
  border: var(--filet);
  display: grid;
  grid-template-rows: auto 1fr;
}
/* Passe-partout double filet : le filet du cadre, puis le filet du pas. */
.asi-calepin__passe { padding: .55rem; border-bottom: var(--filet); }
.asi-calepin__vue { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.asi-calepin__notice { padding: .85rem 1rem 1rem; position: relative; }
.asi-calepin__notice::before {
  content: counter(tuile, decimal-leading-zero);
  position: absolute;
  top: -.85rem;
  left: 1rem;
  background: var(--accent);
  color: #f5f2ec;
  font-family: var(--cotes);
  font-size: .72rem;
  padding: .12rem .5rem;
  letter-spacing: .08em;
}
.asi-calepin__notice h2 { margin: .3em 0 .35em; font-size: 1.16rem; }
.asi-calepin__renvoi { color: var(--encre); text-decoration: none; }
.asi-calepin__renvoi:hover { color: var(--accent); }
.asi-calepin__notice p { font-size: .88rem; line-height: 1.55; color: var(--basalte-pale); margin: 0; }

/* ---------- 4. La course du soleil : bande calculée ---------- */
.asi-course {
  border-bottom: var(--filet);
  background: var(--fond-vif);
  padding: 1.1rem 0 1rem;
}
.asi-course svg { width: min(var(--mur), 100% - 2.5rem); display: block; margin-inline: auto; height: auto; }
.asi-course__ruban { fill: var(--joint); }
.asi-course__degre line { stroke: var(--basalte-pale); stroke-width: 1; }
.asi-course__degre text, .asi-course__etiquette {
  fill: var(--basalte-pale);
  font-family: var(--cotes);
  font-size: 11px;
  letter-spacing: .04em;
}
.asi-course__etiquette { font-size: 12.5px; }
.asi-course__index line { stroke: var(--bleu-volet); stroke-width: 2.5; }
.asi-course__index circle { fill: var(--bleu-volet); }
.asi-course__index--ete line { stroke: var(--ocre-midi); }
.asi-course__index--ete circle { fill: var(--ocre-midi); }
.asi-course__valeur {
  fill: var(--bleu-volet);
  font-family: var(--cotes);
  font-size: 12px;
  text-anchor: middle;
}
.asi-course__valeur--ete { fill: var(--ocre-midi); }
.asi-course__calcul {
  width: min(var(--mur), 100% - 2.5rem);
  margin: .5rem auto 0;
  font-size: .86rem;
  color: var(--basalte-pale);
  border-left: 3px solid var(--accent);
  padding-left: .9rem;
}

/* ---------- 5. Les travées : sections de la une et des pages ---------- */
.asi-travee { padding: 2.4rem 0 2.6rem; border-bottom: var(--filet); }
.asi-travee--creuse { background: var(--fond-ombre); }
.asi-travee--note { background: var(--fond-vif); border-bottom: 3px solid var(--encre); }
.asi-travee__front {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  flex-wrap: wrap;
  border-bottom: 3px solid var(--encre);
  padding-bottom: .7rem;
  margin-bottom: 1.5rem;
}
.asi-travee__intitule { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.asi-travee__rang {
  font-family: var(--cotes);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #f5f2ec;
  background: var(--basalte);
  padding: .16rem .6rem .12rem;
  margin-right: .7rem;
  vertical-align: .12em;
}
.asi-travee__mention { margin: 0 0 0 auto; font-size: .86rem; color: var(--basalte-pale); font-style: italic; }

/* ---------- 6. Les parements : mosaïque asymétrique ---------- */
.asi-parements {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.asi-parement { background: var(--fond-vif); border: var(--filet); display: grid; grid-template-rows: auto 1fr; }
.asi-parement--pleine { grid-column: span 12; }
.asi-parement--demi { grid-column: span 6; }
.asi-parement--tiers { grid-column: span 4; }
.asi-parement--menu { grid-column: span 3; }
.asi-parements--fond .asi-parement--demi:nth-child(2) { grid-column: 3 / span 5; }
.asi-parement--desaxe { margin-top: 1.6rem; }
.asi-parements--compactes { grid-template-columns: repeat(2, 1fr); }
.asi-parement__passe { padding: .55rem; border-bottom: var(--filet); }
.asi-parement__passe--pano .asi-parement__vue { aspect-ratio: 21 / 9; }
.asi-parement__passe--paysage .asi-parement__vue { aspect-ratio: 4 / 3; }
.asi-parement__vue { width: 100%; object-fit: cover; }
.asi-parement__etiquette { padding: .8rem 1rem 1rem; }
.asi-parement__intitule { margin: .15em 0 .3em; font-size: 1.06rem; }
.asi-parement__renvoi { color: var(--encre); text-decoration: none; }
.asi-parement__renvoi:hover { color: var(--accent); }
.asi-parement__mention { font-size: .86rem; color: var(--basalte-pale); margin: 0; }

/* ---------- 7. Le registre : colonne dense datée ---------- */
.asi-registre {
  display: grid;
  grid-template-columns: minmax(0, 52rem);
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.asi-inscription {
  display: grid;
  grid-template-columns: 5.25rem 1fr;
  gap: 1.1rem;
  padding: 1.05rem .4rem 1rem;
  border-bottom: var(--filet);
}
.asi-inscription:last-child { border-bottom: none; }
.asi-inscription__vue {
  width: 5.25rem;
  height: 5.25rem;
  object-fit: cover;
  border: var(--filet);
  padding: .2rem;
  background: var(--fond-vif);
}
.asi-inscription h3 { margin: .1em 0 .25em; font-size: 1.05rem; }
.asi-inscription h3 a { color: var(--encre); text-decoration: none; }
.asi-inscription h3 a:hover { color: var(--accent); }
.asi-inscription p { margin: 0; font-size: .9rem; color: var(--basalte-pale); }
.asi-millesime {
  font-family: var(--cotes);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .3em;
}
.asi-registre--notes .asi-inscription { grid-template-columns: 1fr; }

/* ---------- 8. Pages intérieures ---------- */
.asi-assise { padding: 1.2rem 0 2.6rem; }
.asi-trace { padding-top: 1.1rem; background: var(--fond); }
.asi-trace ol {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  list-style: none;
  margin: 0 0 1.3rem;
  padding: 0;
  font-family: var(--titres);
  font-size: .78rem;
}
.asi-trace li + li::before { content: "·"; margin-right: .45rem; color: var(--basalte-pale); }
.asi-trace a { color: var(--basalte-pale); text-decoration: none; }
.asi-trace a:hover { color: var(--accent); }
.asi-trace [aria-current] { color: var(--encre); }

.asi-entame {
  border-bottom: 3px solid var(--encre);
  padding-bottom: 1.1rem;
}
.asi-surtitre {
  font-family: var(--titres);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--basalte-pale);
  margin: 0 0 .6em;
}
.asi-entame__accroche {
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--basalte-pale);
  max-width: 58ch;
  font-style: italic;
}
.asi-mentions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.1rem;
  list-style: none;
  margin: .8rem 0 0;
  padding: 0;
  font-family: var(--titres);
  font-size: .8rem;
  color: var(--basalte-pale);
}

/* La fenêtre : photographie en tête de page, passe-partout double filet. */
.asi-fenetre {
  margin: 1.5rem auto;
  padding: .6rem;
  background: var(--fond-vif);
  border: var(--filet);
  outline: var(--filet);
  outline-offset: .3rem;
}
.asi-fenetre__vue { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* La notice et son rail collant : 58 canaux à gauche, le repérage à droite. */
.asi-lecture-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17.5rem;
  gap: 2.4rem;
  align-items: start;
  margin-top: 1.8rem;
}
.asi-notice {
  max-width: var(--canal);
  font-size: 1.0625rem;
  line-height: var(--mesure);
}
.asi-notice h2 { margin-top: 2em; border-bottom: var(--filet); padding-bottom: .3em; }
.asi-notice h2:first-child { margin-top: .4em; }
.asi-notice > p:first-child::first-letter {
  font-family: var(--titres);
  font-size: 3.1em;
  float: left;
  line-height: .82;
  padding: .07em .12em 0 0;
  color: var(--accent);
}
.asi-rail {
  position: sticky;
  top: 1.2rem;
  display: grid;
  gap: 1.1rem;
}
.asi-rail__fiche {
  border-left: 3px solid var(--refroidi);
  background: var(--fond-vif);
  padding: .75rem .95rem .7rem;
  font-size: .9rem;
}
.asi-rail__fiche p { margin: 0; }
.asi-rail__intitule {
  font-family: var(--titres);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--basalte-pale);
  margin: 0 0 .45em;
}

/* Lecture pleine largeur (rubriques, carnet, gabarit de publication) */
.asi-lecture { max-width: 46rem; margin-top: 1.8rem; font-size: 1.0625rem; line-height: var(--mesure); }
.asi-lecture--capitale { max-width: 58ch; }

/* Les tableaux du répertoire : papier de chantier, filets d'arase. */
.asi-lecture table, .asi-notice table {
  width: 100%;
  border-collapse: collapse;
  border: 3px solid var(--encre);
  background: var(--fond-vif);
  font-size: .88rem;
  margin: 1.4rem 0;
}
.asi-lecture th, .asi-lecture td, .asi-notice th, .asi-notice td {
  border: var(--filet);
  padding: .5rem .6rem;
  text-align: left;
  vertical-align: top;
}
.asi-lecture thead th, .asi-notice thead th {
  font-family: var(--titres);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--fond-ombre);
}
.asi-notice tbody th[scope="row"] a { font-family: var(--titres); }
tr[hidden] { display: none; }
.asi-tableau__filtres {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.2rem 0 .4rem;
}
.asi-tableau__filtres button {
  font-family: var(--titres);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .3rem .8rem;
  border: 1px solid var(--encre);
  background: var(--fond-vif);
  color: var(--encre);
  cursor: pointer;
}
.asi-tableau__filtres button[aria-pressed="true"] {
  background: var(--basalte);
  border-color: var(--basalte);
  color: #f5f2ec;
}

/* Les suites de lecture */
.asi-suivant {
  margin-top: 2.2rem;
  border-top: 3px solid var(--encre);
  padding-top: 1rem;
}
.asi-suivant h2 { margin-top: 0; font-size: 1.2rem; }
.asi-suivant ul { list-style: none; margin: 0; padding: 0; }
.asi-suivant li {
  padding: .6rem 0 .55rem;
  border-bottom: var(--filet);
  font-size: .95rem;
}

/* La note de la rédaction */
.asi-note {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: 1.4rem;
  align-items: start;
  margin: 0;
}
.asi-note__vue { border: var(--filet); padding: .35rem; background: var(--fond); }
.asi-note figcaption p { font-size: .95rem; }

/* Le trait de coupe : filet crénelé entre deux travées */
.asi-trait-de-coupe {
  display: flex;
  justify-content: center;
  padding: 1.1rem 0;
  color: var(--basalte-pale);
  background: var(--fond-vif);
  border-bottom: var(--filet);
}

/* ---------- 9. Le soubassement : pied du mur ---------- */
.asi-soubassement {
  border-top: 3px solid var(--encre);
  background: var(--fond-vif);
  margin-top: 0;
}
.asi-soubassement__rang {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
  padding: 2rem 0 1.4rem;
}
.asi-soubassement h2 {
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 .7em;
  color: var(--basalte-pale);
}
.asi-soubassement ul { list-style: none; margin: 0; padding: 0; }
.asi-soubassement li { padding: .22rem 0; font-size: .9rem; }
.asi-soubassement a { color: var(--encre); text-decoration: none; }
.asi-soubassement a:hover { color: var(--accent); }
.asi-soubassement__pied {
  border-top: var(--filet);
  padding: .8rem 0 1rem;
  font-family: var(--cotes);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--basalte-pale);
}

/* ---------- 10. Écrans étroits ---------- */
@media (max-width: 64rem) {
  .asi-lecture-rail { grid-template-columns: 1fr; }
  .asi-rail { position: static; display: flex; flex-wrap: wrap; gap: 1.1rem; }
  .asi-rail > * { flex: 1 1 15rem; }
  .asi-parements--fond .asi-parement--demi:nth-child(2) { grid-column: span 6; }
  .asi-parement--menu { grid-column: span 6; }
  .asi-calepin { grid-template-columns: repeat(2, 1fr); }
  .asi-note { grid-template-columns: 1fr; }
}

@media (max-width: 42rem) {
  body { font-size: 1rem; }
  .asi-mur { width: min(var(--mur), 100% - 1.6rem); }
  .asi-arase__rang { gap: .6rem; }
  .asi-arase__gnomon { display: none; }
  .asi-couronnement__front > div:first-child { max-width: 100%; }
  .asi-couronnement__front .asi-cartouche { display: none; }
  .asi-calepin { grid-template-columns: 1fr; }
  .asi-parement--demi, .asi-parement--tiers, .asi-parement--menu { grid-column: span 12; }
  .asi-parements--compactes { grid-template-columns: 1fr; }
  .asi-inscription { grid-template-columns: 4.2rem 1fr; }
  .asi-inscription__vue { width: 4.2rem; height: 4.2rem; }
  .asi-soubassement__rang { grid-template-columns: 1fr; gap: 1.1rem; }
  .asi-fenetre { outline-offset: .18rem; padding: .4rem; }
  .asi-travee__mention { margin-left: 0; }
}

@media print {
  .asi-arase, .asi-soubassement, .asi-course, .asi-trait-de-coupe, .asi-rail { display: none; }
  body { background: #fff; color: #000; }
}