/* =========================================================================
   The Georgia Records Desk - davidforgeorgia.com
   Reemploi de la FORME du squelette « grille-annuaire » (grille dense en
   accueil, liste a filets en rubrique, deux colonnes asymetriques en fiche),
   rhabille integralement : palette, polices, lexique de classes (prefixe gr-).
   Aucune requete externe : polices systeme, aucune image distante, aucun CDN.
   ========================================================================= */

:root {
  --fond: #f0ead9;
  --papier: #fcf9f2;
  --papier-creux: #e5dcc4;
  --encre: #22242b;
  --encre-attenuee: #5d5f68;
  --liseret: #d2c8ad;
  --accent: #2f5d50;
  --accent-sombre: #234639;
  --accent-voile: #dfe9e3;
  --appui: #8a3324;

  --titre-police: "Hoefler Text", Garamond, "EB Garamond", "Apple Garamond", "Palatino", Georgia, serif;
  --texte-police: Tahoma, "DejaVu Sans", Verdana, "Segoe UI", sans-serif;
  --chiffre-police: "Andale Mono", "Lucida Console", ui-monospace, Menlo, Consolas, monospace;

  --cadre: 74rem;
  --mesure: 36rem;
  --pas-grille: 21rem;
  --rythme: 1.5rem;
  --arrondi: 2px;
  --filet: 1px solid var(--liseret);
  --teinte: var(--accent);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { * { 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(.9375rem, .91rem + .16vw, 1rem);
  line-height: 1.62;
  overflow-wrap: break-word;
}

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

h1, h2, h3, h4 { font-family: var(--titre-police); line-height: 1.18; margin: 0 0 .6em; font-weight: 600; }
h1 { font-size: clamp(1.7rem, 1.35rem + 1.5vw, 2.6rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.28rem, 1.14rem + .6vw, 1.6rem); }
h3 { font-size: 1.09rem; }
p { margin: 0 0 1em; }

a { color: var(--accent-sombre); text-underline-offset: .16em; }
a:hover { color: var(--appui); }
:focus-visible { outline: 3px solid var(--appui); outline-offset: 2px; }

.gr-saut {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: #fff; padding: .6rem 1rem; z-index: 50;
}
.gr-saut:focus { left: .5rem; top: .5rem; }

.gr-cadre { width: min(100% - 2.2rem, var(--cadre)); margin-inline: auto; }

/* ---------- Tete ---------- */
.gr-tete { background: var(--papier); border-bottom: 3px double var(--liseret); }
.gr-tete__barre { display: flex; align-items: center; gap: 1rem; padding: .95rem 0; flex-wrap: wrap; }
.gr-marque { font-family: var(--titre-police); font-size: 1.28rem; font-weight: 600; color: var(--encre); text-decoration: none; letter-spacing: .005em; }
.gr-marque span { display: block; font-family: var(--chiffre-police); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--encre-attenuee); margin-top: .2rem; }
.gr-bascule {
  margin-left: auto; display: none; font: inherit; font-size: .82rem;
  background: var(--accent); color: #fff; border: 0; border-radius: var(--arrondi);
  padding: .5rem .85rem; cursor: pointer; letter-spacing: .06em; text-transform: uppercase;
}
.gr-nav { margin-left: auto; }
.gr-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: .15rem 1.15rem; margin: 0; padding: 0; }
.gr-nav a {
  display: inline-block; padding: .3rem 0; text-decoration: none; color: var(--encre-attenuee);
  font-size: .84rem; letter-spacing: .05em; text-transform: uppercase; border-bottom: 2px solid transparent;
}
.gr-nav a:hover { color: var(--accent-sombre); }
.gr-nav a[aria-current="page"] { color: var(--encre); border-bottom-color: var(--appui); }

@media (max-width: 60rem) {
  .gr-bascule { display: inline-block; }
  .gr-nav { flex-basis: 100%; margin-left: 0; }
  .gr-nav[hidden] { display: none; }
  .gr-nav ul { flex-direction: column; gap: 0; border-top: var(--filet); margin-top: .6rem; }
  .gr-nav li { border-bottom: var(--filet); }
  .gr-nav a { display: block; padding: .68rem .1rem; font-size: .9rem; }
}

/* ---------- Fil d'ariane, dans le conteneur ---------- */
.gr-fil { font-size: .78rem; color: var(--encre-attenuee); padding: .9rem 0 0; }
.gr-fil ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.gr-fil li + li::before { content: "›"; margin-right: .4rem; color: var(--liseret); }

main { padding-bottom: 3.5rem; }

/* ---------- Une (heros) ---------- */
.gr-une { margin: 1.4rem 0 2.4rem; background: var(--papier); border: var(--filet); border-radius: var(--arrondi); overflow: hidden; }
.gr-une__vue { margin: 0; }
.gr-une__vue img { width: 100%; height: clamp(190px, 30vw, 360px); object-fit: cover; }
.gr-une__mot { padding: 1.4rem clamp(1rem, 3vw, 2.2rem) 1.6rem; }
.gr-une__mot h1 { margin-bottom: .5rem; }
.gr-une__chapo { font-size: 1.06rem; color: var(--encre-attenuee); max-width: 46rem; margin-bottom: 0; }
@media (min-width: 62rem) {
  .gr-une { display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; }
  .gr-une__vue img { height: 100%; min-height: 300px; }
  .gr-une__mot { display: flex; flex-direction: column; justify-content: center; }
}

/* ---------- Chiffres de reperage ---------- */
.gr-chiffres { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); background: var(--liseret); border: var(--filet); margin-bottom: 2.4rem; }
.gr-chiffres div { background: var(--papier); padding: .95rem 1.1rem; }
.gr-chiffres dt { font-family: var(--chiffre-police); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--encre-attenuee); }
.gr-chiffres dd { margin: .3rem 0 0; font-family: var(--titre-police); font-size: 1.32rem; }

/* ---------- Plan de section ---------- */
.gr-titre-bloc { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-bottom: 2px solid var(--encre); padding-bottom: .45rem; margin: 0 0 1.4rem; }
.gr-titre-bloc h2 { margin: 0; }
.gr-titre-bloc p { margin: 0; font-size: .8rem; color: var(--encre-attenuee); font-family: var(--chiffre-police); letter-spacing: .1em; text-transform: uppercase; }

.gr-plan { display: grid; gap: 1.35rem; grid-template-columns: repeat(auto-fill, minmax(var(--pas-grille), 1fr)); margin: 0 0 2.8rem; padding: 0; list-style: none; }
.gr-notice { background: var(--papier); border: var(--filet); border-top: 4px solid var(--teinte); border-radius: var(--arrondi); display: flex; flex-direction: column; }
.gr-notice[data-rubrique="records"] { --teinte: var(--accent); }
.gr-notice[data-rubrique="money"] { --teinte: var(--appui); }
.gr-notice[data-rubrique="offices"] { --teinte: #4a5a72; }
.gr-notice__vue { margin: 0; }
.gr-notice__vue img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.gr-notice__corps { padding: .95rem 1.05rem 1.15rem; display: flex; flex-direction: column; flex: 1; }
.gr-repere { font-family: var(--chiffre-police); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--teinte); margin-bottom: .4rem; }
.gr-notice h3 { margin-bottom: .45rem; font-size: 1.05rem; }
.gr-notice h3 a { color: var(--encre); text-decoration: none; border-bottom: 1px solid var(--liseret); }
.gr-notice h3 a:hover { color: var(--accent-sombre); border-bottom-color: var(--accent-sombre); }
.gr-notice p { font-size: .88rem; color: var(--encre-attenuee); margin-bottom: .8rem; }
.gr-etiqs { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: auto 0 0; padding: 0; }
.gr-etiq { font-family: var(--chiffre-police); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; background: var(--accent-voile); color: var(--accent-sombre); border: 1px solid var(--liseret); padding: .18rem .42rem; border-radius: var(--arrondi); }

/* ---------- Liste dense de rubrique ---------- */
.gr-liste { list-style: none; margin: 0 0 2.6rem; padding: 0; border-top: var(--filet); }
.gr-ligne { border-bottom: var(--filet); padding: 1.2rem 0; display: grid; gap: 1.1rem; }
.gr-ligne__vue { margin: 0; }
.gr-ligne__vue img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: var(--filet); }
.gr-ligne h3 { margin-bottom: .4rem; }
.gr-ligne h3 a { color: var(--encre); text-decoration: none; }
.gr-ligne h3 a:hover { color: var(--accent-sombre); }
.gr-ligne p { margin-bottom: .6rem; color: var(--encre-attenuee); }
@media (min-width: 48rem) {
  .gr-ligne { grid-template-columns: 28% 1fr; align-items: start; }
}

/* ---------- Fiche (deux colonnes asymetriques) ---------- */
.gr-fiche { display: grid; gap: 2.2rem; margin-top: 1.2rem; }
.gr-fiche > * { min-width: 0; }
@media (min-width: 64rem) {
  .gr-fiche { grid-template-columns: minmax(0, 1fr) 19rem; align-items: start; }
}
.gr-corps { max-width: var(--mesure); min-width: 0; }
.gr-corps h2 { margin-top: 2.1rem; padding-top: .5rem; border-top: var(--filet); }
.gr-corps h2:first-of-type { margin-top: 1.4rem; }
.gr-chapo { font-size: 1.08rem; color: var(--encre-attenuee); border-left: 4px solid var(--appui); padding-left: 1rem; margin-bottom: 1.6rem; }
.gr-datation { font-family: var(--chiffre-police); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-attenuee); margin-bottom: 1.2rem; }
.gr-planche { margin: 0 0 1.8rem; }
.gr-planche img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: var(--filet); }
.gr-planche figcaption { font-size: .78rem; color: var(--encre-attenuee); padding-top: .45rem; }
.gr-source { background: var(--papier); border: var(--filet); border-left: 4px solid var(--accent); padding: .95rem 1.1rem; font-size: .88rem; margin: 2rem 0 0; }
.gr-source p { margin: 0; }

.gr-rail { background: var(--papier); border: var(--filet); border-radius: var(--arrondi); padding: 1.1rem 1.2rem; font-size: .86rem; }
@media (min-width: 64rem) { .gr-rail { position: sticky; top: 1.2rem; } }
.gr-rail h2 { font-size: 1rem; border: 0; margin: 0 0 .7rem; padding: 0; }
.gr-rail dl { margin: 0; display: grid; gap: .55rem; }
.gr-rail dt { font-family: var(--chiffre-police); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-attenuee); }
.gr-rail dd { margin: .1rem 0 0; }

/* ---------- Tableau ---------- */
.gr-tableau-defilant { overflow-x: auto; border: var(--filet); background: var(--papier); margin: 1.6rem 0; }
.gr-tableau-defilant:focus-visible { outline: 3px solid var(--appui); }
table { border-collapse: collapse; width: 100%; min-width: 26rem; font-size: .88rem; }
caption { text-align: left; font-family: var(--chiffre-police); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-attenuee); padding: .7rem .9rem; }
th, td { text-align: left; padding: .55rem .9rem; border-bottom: var(--filet); vertical-align: top; }
th { font-family: var(--chiffre-police); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; background: var(--papier-creux); }

/* ---------- Encart ---------- */
.gr-encart { background: var(--papier-creux); border: var(--filet); border-radius: var(--arrondi); padding: 1.3rem 1.4rem; margin: 0 0 2.8rem; }
.gr-encart h2 { font-size: 1.12rem; }
.gr-encart p:last-child { margin-bottom: 0; }

/* ---------- Suite ---------- */
.gr-suite { border-top: 3px double var(--liseret); padding-top: 1.4rem; margin-top: 2.8rem; }
.gr-suite ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.gr-suite li { border-left: 3px solid var(--liseret); padding-left: .9rem; }
.gr-suite a { color: var(--encre); }

/* ---------- Pied ---------- */
.gr-pied { background: var(--papier); border-top: 3px double var(--liseret); padding: 2.2rem 0 2.6rem; font-size: .86rem; }
.gr-pied__grille { display: grid; gap: 1.8rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.gr-pied h2 { font-size: .72rem; font-family: var(--chiffre-police); letter-spacing: .16em; text-transform: uppercase; color: var(--encre-attenuee); margin-bottom: .7rem; }
.gr-pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.gr-pied a { color: var(--encre); }
.gr-ours { border-top: var(--filet); margin-top: 1.8rem; padding-top: 1rem; color: var(--encre-attenuee); font-size: .8rem; }
.gr-ours p { margin: 0 0 .3rem; }