/* ==========================================================================
   LE DOSSIER — système de design de Guide Londres
   Monde visuel : le dossier d'archive français. Chaque sujet est une fiche
   cotée, datée, sourcée. Le mobilier de fiche reste en filets maigres ;
   la prose possède le champ.
   ========================================================================== */

/* --- Polices auto-hébergées ------------------------------------------- */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Literata";
  src: url("../fonts/literata-latin.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Literata";
  src: url("../fonts/literata-latin-ext.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Jetons ------------------------------------------------------------ */

:root {
  /* Le carton et la feuille */
  --gl-sheet:       #f2f2ec;  /* la fiche : champ de lecture */
  --gl-sheet-sunk:  #e9e9e1;  /* creux, encarts */
  --gl-board:       #c6c8ba;  /* la chemise : rails, bandeaux */
  --gl-board-deep:  #23272a;  /* carton sombre : en-tête, pied */

  /* L'encre */
  --gl-ink:         #16181a;
  --gl-ink-2:       #52565a;
  --gl-ink-3:       #6a6e70;
  --gl-ink-rev:     #f2f2ec;

  /* Les filets */
  --gl-rule:        #b7b9a9;
  --gl-rule-soft:   #d5d6cb;
  --gl-rule-rev:    #414749;

  /* Le tampon : couleur de signal, rationnée aux marques et aux bords */
  --gl-tampon:      #4a2c7a;
  --gl-tampon-2:    #603a99;
  --gl-tampon-soft: #ece5f6;

  /* L'alerte : périmé, fermé, à revérifier */
  --gl-alert:       #a5382a;
  --gl-alert-soft:  #f7e8e5;

  /* Mesures */
  --gl-measure:     min(68ch, 100%);
  --gl-page:        76rem;
  --gl-rail:        15rem;
  --gl-gutter:      clamp(1.125rem, 4vw, 2.5rem);

  /* Rythme */
  --gl-1: 0.25rem;  --gl-2: 0.5rem;   --gl-3: 0.75rem;  --gl-4: 1rem;
  --gl-5: 1.5rem;   --gl-6: 2rem;     --gl-7: 3rem;     --gl-8: 4rem;
  --gl-9: 6rem;

  /* Échelle typographique fluide */
  --gl-t--2: clamp(0.6875rem, 0.66rem + 0.14vw, 0.75rem);
  --gl-t--1: clamp(0.8125rem, 0.78rem + 0.17vw, 0.875rem);
  --gl-t-0:  clamp(1.0625rem, 1.03rem + 0.18vw, 1.1875rem);
  --gl-t-1:  clamp(1.25rem, 1.18rem + 0.34vw, 1.4375rem);
  --gl-t-2:  clamp(1.5rem, 1.36rem + 0.68vw, 1.9375rem);
  --gl-t-3:  clamp(1.875rem, 1.62rem + 1.22vw, 2.625rem);
  --gl-t-4:  clamp(2.25rem, 1.79rem + 2.2vw, 3.625rem);

  /* Mouvement */
  --gl-ease:   cubic-bezier(0.16, 1, 0.3, 1);
  --gl-fast:   140ms;
  --gl-mid:    280ms;
  --gl-slow:   620ms;

  color-scheme: light;
  accent-color: var(--gl-tampon);
}

/* --- Surfaces du navigateur : elles portent aussi le design ------------ */

::selection { background: var(--gl-tampon); color: var(--gl-ink-rev); }
:root { caret-color: var(--gl-tampon); scrollbar-color: var(--gl-rule) var(--gl-sheet); scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--gl-sheet-sunk); }
::-webkit-scrollbar-thumb { background: var(--gl-rule); border: 3px solid var(--gl-sheet-sunk); }
::-webkit-scrollbar-thumb:hover { background: var(--gl-ink-3); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--gl-tampon);
  outline-offset: 2px;
  border-radius: 1px;
}

/* --- Réinitialisation --------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  background: var(--gl-board);
  color: var(--gl-ink);
  font-family: "Literata", Georgia, "Times New Roman", serif;
  font-size: var(--gl-t-0);
  line-height: 1.65;
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, li, figcaption { text-wrap: pretty; }

/* --- Typographie -------------------------------------------------------- */

h1, h2, h3, h4, h5, h6, .gl-display {
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-stretch: 82%;
  line-height: 1.08;
  letter-spacing: -0.012em;
  text-wrap: balance;
  color: var(--gl-ink);
}

h1 { font-size: var(--gl-t-4); }
h2 { font-size: var(--gl-t-2); }
h3 { font-size: var(--gl-t-1); }
h4, h5, h6 { font-size: var(--gl-t-0); }

/* La légende : petite capitale condensée, l'écriture de service du dossier */
.gl-legend {
  font-family: "Archivo", Arial, sans-serif;
  font-size: var(--gl-t--2);
  font-weight: 600;
  font-stretch: 70%;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--gl-ink-2);
  font-variant-numeric: tabular-nums lining-nums;
}

/* La cote : l'identifiant de la fiche, en chiffres tabulaires */
.gl-cote {
  font-family: "Archivo", Arial, sans-serif;
  font-size: var(--gl-t--2);
  font-weight: 500;
  font-stretch: 70%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--gl-tampon);
}

a {
  color: var(--gl-ink);
  text-decoration-color: var(--gl-tampon);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-thickness var(--gl-fast) var(--gl-ease),
              color var(--gl-fast) var(--gl-ease);
}
a:hover { color: var(--gl-tampon); text-decoration-thickness: 2px; }

/* --- Structure de page --------------------------------------------------- */

.gl-skip {
  position: absolute;
  left: var(--gl-4); top: -100%;
  z-index: 100;
  background: var(--gl-tampon);
  color: var(--gl-ink-rev);
  padding: var(--gl-3) var(--gl-4);
  font-family: "Archivo", Arial, sans-serif;
  font-stretch: 75%;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--gl-t--1);
  text-decoration: none;
}
.gl-skip:focus { top: var(--gl-4); color: var(--gl-ink-rev); }

.gl-shell {
  width: min(100% - (var(--gl-gutter) * 2), var(--gl-page));
  margin-inline: auto;
}

/* La feuille : le champ de lecture, posé sur la chemise */
.gl-sheet {
  background: var(--gl-sheet);
  border-inline: 1px solid var(--gl-rule);
  flex: 1;
}

/* --- En-tête : le rabat de la chemise ------------------------------------ */

.gl-head {
  background: var(--gl-board-deep);
  color: var(--gl-ink-rev);
  border-bottom: 3px solid var(--gl-tampon);
}
.gl-head__bar {
  display: flex;
  align-items: center;
  gap: var(--gl-5);
  min-height: 3.75rem;
}
.gl-head__mark {
  display: flex;
  align-items: baseline;
  gap: var(--gl-2);
  text-decoration: none;
  color: var(--gl-ink-rev);
  font-family: "Archivo", Arial, sans-serif;
  font-weight: 700;
  font-stretch: 75%;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--gl-t-1);
  line-height: 1;
  padding-block: var(--gl-3);
}
.gl-head__mark:hover { color: var(--gl-ink-rev); }
.gl-head__mark b { font-weight: 700; }
.gl-head__mark span {
  font-weight: 400;
  font-stretch: 62%;
  color: var(--gl-board);
}
.gl-head__ref {
  margin-left: auto;
  display: none;
  color: var(--gl-board);
}
@media (min-width: 60rem) { .gl-head__ref { display: block; } }

.gl-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  padding: 0; margin: 0;
}
.gl-nav a {
  display: block;
  padding: var(--gl-3) var(--gl-4);
  color: var(--gl-board);
  text-decoration: none;
  font-family: "Archivo", Arial, sans-serif;
  font-size: var(--gl-t--1);
  font-weight: 500;
  font-stretch: 75%;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  border-bottom: 2px solid transparent;
}
.gl-nav a:hover,
.gl-nav .current-menu-item > a,
.gl-nav [aria-current] { color: var(--gl-ink-rev); border-bottom-color: var(--gl-tampon-2); }

.gl-burger {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--gl-2);
  background: none;
  border: 1px solid var(--gl-rule-rev);
  color: var(--gl-ink-rev);
  padding: var(--gl-2) var(--gl-3);
  cursor: pointer;
  font-family: "Archivo", Arial, sans-serif;
  font-size: var(--gl-t--2);
  font-stretch: 70%;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.gl-burger:hover { border-color: var(--gl-tampon-2); }
@media (min-width: 56rem) { .gl-burger { display: none; } }
@media (max-width: 55.99rem) {
  .gl-nav {
    flex-basis: 100%;
    display: none;
    border-top: 1px solid var(--gl-rule-rev);
  }
  .gl-nav[data-open="true"] { display: block; }
  .gl-nav ul { flex-direction: column; }
  .gl-nav a { border-bottom: 1px solid var(--gl-rule-rev); }
  .gl-head__bar { flex-wrap: wrap; }
}

/* --- La fiche : en-tête du sujet ---------------------------------------- */

.gl-fiche { padding-block: var(--gl-6) var(--gl-8); }

.gl-fiche__head {
  display: grid;
  gap: var(--gl-4);
  padding-bottom: var(--gl-2);
}

.gl-fiche__cote {
  display: flex;
  align-items: center;
  gap: var(--gl-3);
  flex-wrap: wrap;
}
.gl-fiche__cote::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--gl-rule);
  min-width: var(--gl-6);
}

.gl-fiche__title { max-width: min(20ch, 100%); }
.gl-fiche__standfirst {
  font-size: var(--gl-t-1);
  line-height: 1.45;
  color: var(--gl-ink-2);
  max-width: min(46ch, 100%);
  text-wrap: pretty;
}

/* --- Le bandeau de provenance : le moteur de confiance ------------------- */

.gl-provenance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gl-2) var(--gl-5);
  padding: var(--gl-3) 0;
  border-block: 1px solid var(--gl-rule);
  margin-block: var(--gl-5);
  position: relative;
}
.gl-provenance__item {
  display: inline-flex;
  align-items: center;
  gap: var(--gl-2);
}
.gl-provenance__item > svg { flex: none; width: 1em; height: 1em; }

/* Le tampon : l'unique moment animé de la page */
.gl-tampon {
  display: inline-flex;
  align-items: center;
  gap: var(--gl-2);
  padding: var(--gl-1) var(--gl-2);
  border: 1.5px solid var(--gl-tampon);
  color: var(--gl-tampon);
  transform: rotate(-1.6deg);
}
.gl-tampon--land {
  animation: gl-land var(--gl-slow) var(--gl-ease) both;
}
@keyframes gl-land {
  from { transform: rotate(-7deg) scale(1.22); filter: blur(1.5px); }
  to   { transform: rotate(-1.6deg) scale(1); filter: blur(0); }
}

/* --- Les marques d'état : la forme porte l'état, jamais la teinte seule -- */

.gl-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--gl-2);
}
.gl-mark::before {
  content: "";
  width: 1.5rem;
  height: 0;
  flex: none;
  border-top: 2px solid currentColor;
}
.gl-mark--verified::before { border-top-style: solid; }
.gl-mark--recheck::before  { border-top-style: dashed; }
.gl-mark--closed::before   { border-top-style: dotted; }
.gl-mark--closed { color: var(--gl-alert); }
.gl-mark--recheck { color: var(--gl-ink-2); }

/* --- Le bloc réponse : la réponse à la question tapée dans Google -------- */

.gl-reponse {
  background: var(--gl-tampon);
  color: var(--gl-ink-rev);
  padding: var(--gl-5) var(--gl-5);
  margin-block: var(--gl-6);
  max-width: var(--gl-measure);
}
.gl-reponse .gl-legend { color: #c9b8e6; }
.gl-reponse p {
  font-size: var(--gl-t-1);
  line-height: 1.5;
  margin-top: var(--gl-3);
  max-width: min(52ch, 100%);
}
.gl-reponse p:last-child { margin-bottom: 0; }
.gl-reponse a { color: var(--gl-ink-rev); text-decoration-color: #c9b8e6; }
.gl-reponse a:hover { color: #fff; text-decoration-color: #fff; }

/* --- Le corps de la fiche ------------------------------------------------ */

.gl-prose { max-width: var(--gl-measure); }
.gl-prose > * + * { margin-top: var(--gl-4); }
.gl-prose h2 {
  margin-top: var(--gl-8);
  padding-top: var(--gl-3);
  border-top: 1px solid var(--gl-rule);
}
.gl-prose h3 { margin-top: var(--gl-6); }
.gl-prose h2 + *, .gl-prose h3 + * { margin-top: var(--gl-3); }
.gl-prose ul, .gl-prose ol { padding-left: var(--gl-5); }
.gl-prose li + li { margin-top: var(--gl-2); }
.gl-prose li::marker { color: var(--gl-tampon); }
.gl-prose :where(img, iframe) {
  margin-block: var(--gl-5);
  border: 1px solid var(--gl-rule);
  max-width: 100%;
}
.gl-prose figure { margin-block: var(--gl-5); }
.gl-prose figure img { margin-block: 0; }
.gl-prose blockquote {
  padding-left: var(--gl-4);
  border-left: 1px solid var(--gl-tampon);
  font-style: italic;
  color: var(--gl-ink-2);
}
.gl-prose strong { font-weight: 700; }
.gl-prose table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums lining-nums;
  font-size: var(--gl-t--1);
}
.gl-prose th, .gl-prose td {
  text-align: left;
  padding: var(--gl-2) var(--gl-3);
  border-bottom: 1px solid var(--gl-rule-soft);
}
.gl-prose th {
  font-family: "Archivo", Arial, sans-serif;
  font-stretch: 70%;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--gl-t--2);
  border-bottom-color: var(--gl-rule);
}

/* --- La planche : image tenue dans un cadre, jamais en pleine largeur ---- */

.gl-planche { margin-block: var(--gl-6); border: 1px solid var(--gl-rule); background: var(--gl-sheet-sunk); }
.gl-planche img { width: 100%; }
.gl-planche figcaption {
  padding: var(--gl-2) var(--gl-3);
  background: var(--gl-board);
  border-top: 1px solid var(--gl-rule);
  color: var(--gl-ink-2);
}

/* --- Le bandeau pratique : réglé au pied de chaque fiche, identique partout */

.gl-pratique {
  margin-top: var(--gl-8);
  border-top: 2px solid var(--gl-ink);
  border-bottom: 1px solid var(--gl-rule);
  background: var(--gl-sheet-sunk);
}
.gl-pratique__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.gl-pratique__cell {
  padding: var(--gl-4);
  border-right: 1px solid var(--gl-rule-soft);
  border-bottom: 1px solid var(--gl-rule-soft);
}
.gl-pratique__cell:last-child { border-right: 0; }
.gl-pratique__value {
  display: block;
  margin-top: var(--gl-2);
  font-family: "Archivo", Arial, sans-serif;
  font-stretch: 82%;
  font-weight: 500;
  font-size: var(--gl-t-0);
  line-height: 1.3;
  font-variant-numeric: tabular-nums lining-nums;
}

/* --- La recommandation : le lien affilié reste un conseil, jamais une pub - */

.gl-reco {
  margin-block: var(--gl-6);
  border: 1px solid var(--gl-rule);
  background: var(--gl-sheet);
  max-width: var(--gl-measure);
}
.gl-reco__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gl-3);
  padding: var(--gl-2) var(--gl-4);
  background: var(--gl-board);
  border-bottom: 1px solid var(--gl-rule);
}
.gl-reco__body { padding: var(--gl-4); }
.gl-reco__body > p { margin-bottom: var(--gl-4); }
.gl-reco__note {
  padding: var(--gl-2) var(--gl-4) var(--gl-3);
  border-top: 1px dashed var(--gl-rule);
  color: var(--gl-ink-2);
  font-size: var(--gl-t--1);
}

.gl-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--gl-2);
  background: var(--gl-tampon);
  color: var(--gl-ink-rev);
  border: 1px solid var(--gl-tampon);
  padding: var(--gl-3) var(--gl-5);
  font-family: "Archivo", Arial, sans-serif;
  font-size: var(--gl-t--1);
  font-weight: 600;
  font-stretch: 75%;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--gl-fast) var(--gl-ease), transform var(--gl-fast) var(--gl-ease);
}
.gl-btn:hover { background: var(--gl-tampon-2); color: var(--gl-ink-rev); transform: translateY(-1px); }
.gl-btn:active { transform: translateY(0); }
.gl-btn[disabled], .gl-btn[aria-disabled="true"] {
  background: var(--gl-rule); border-color: var(--gl-rule); color: var(--gl-ink-2);
  cursor: not-allowed; transform: none;
}
.gl-btn--ghost { background: none; color: var(--gl-ink); border-color: var(--gl-ink); }
.gl-btn--ghost:hover { background: var(--gl-ink); color: var(--gl-ink-rev); }

/* --- Le rail d'onglets : les fiches voisines, toujours visibles ---------- */

.gl-layout {
  display: grid;
  gap: var(--gl-7);
  align-items: start;
}
@media (min-width: 64rem) {
  .gl-layout--rail { grid-template-columns: minmax(0, 1fr) var(--gl-rail); }
  .gl-rail { position: sticky; top: var(--gl-4); }
}

.gl-rail__title {
  padding-bottom: var(--gl-2);
  border-bottom: 2px solid var(--gl-ink);
  margin-bottom: var(--gl-3);
}
.gl-rail ul { list-style: none; padding: 0; margin: 0; }
.gl-rail li { border-bottom: 1px solid var(--gl-rule-soft); }
.gl-rail a {
  display: grid;
  gap: var(--gl-1);
  padding: var(--gl-3) 0;
  text-decoration: none;
  font-family: "Archivo", Arial, sans-serif;
  font-stretch: 85%;
  font-size: var(--gl-t--1);
  line-height: 1.3;
}
.gl-rail a:hover { color: var(--gl-tampon); }
.gl-rail [aria-current="page"] {
  padding-left: var(--gl-3);
  border-left: 2px solid var(--gl-tampon);
  color: var(--gl-tampon);
}

/* --- Le bordereau : l'index du dossier (accueil et archives) ------------- */

.gl-bordereau { border-top: 2px solid var(--gl-ink); }
.gl-bordereau__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gl-1) var(--gl-4);
  padding: var(--gl-4) 0;
  border-bottom: 1px solid var(--gl-rule);
  align-items: baseline;
  text-decoration: none;
  transition: background var(--gl-fast) var(--gl-ease);
}
@media (min-width: 48rem) {
  .gl-bordereau__row { grid-template-columns: 6rem minmax(0, 1fr) 9rem; }
}
.gl-bordereau__row:hover {
  background: var(--gl-tampon-soft);
}
.gl-bordereau__row:hover .gl-bordereau__name { color: var(--gl-tampon); }
.gl-bordereau__name {
  display: block;
  font-family: "Archivo", Arial, sans-serif;
  font-stretch: 85%;
  font-weight: 600;
  font-size: var(--gl-t-1);
  line-height: 1.2;
}
.gl-bordereau__note { display: block; margin-top: var(--gl-1); color: var(--gl-ink-2); font-size: var(--gl-t--1); }
.gl-bordereau__meta { text-align: left; }
@media (min-width: 48rem) { .gl-bordereau__meta { text-align: right; } }

/* --- La couverture : premier écran de l'accueil -------------------------- */

.gl-couverture {
  padding-block: var(--gl-8) var(--gl-7);
  border-bottom: 2px solid var(--gl-ink);
}
.gl-couverture__cote {
  display: flex; align-items: center; gap: var(--gl-3);
  margin-bottom: var(--gl-5);
}
.gl-couverture__cote::after {
  content: ""; flex: 1; height: 1px; background: var(--gl-rule);
}
.gl-couverture h1 {
  font-size: var(--gl-t-4);
  max-width: min(16ch, 100%);
  margin-bottom: var(--gl-5);
}
.gl-couverture__lede {
  font-size: var(--gl-t-1);
  line-height: 1.5;
  max-width: min(48ch, 100%);
  color: var(--gl-ink-2);
  margin-bottom: var(--gl-6);
}
.gl-couverture__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  border-top: 1px solid var(--gl-rule);
}
.gl-couverture__stat {
  padding: var(--gl-3) var(--gl-4) var(--gl-3) 0;
  border-right: 1px solid var(--gl-rule-soft);
}
.gl-couverture__stat:last-child { border-right: 0; }
.gl-couverture__stat b {
  display: block;
  font-family: "Archivo", Arial, sans-serif;
  font-stretch: 82%;
  font-weight: 600;
  font-size: var(--gl-t-1);
  font-variant-numeric: tabular-nums lining-nums;
  margin-top: var(--gl-1);
}

/* --- La recherche -------------------------------------------------------- */

.gl-search { display: flex; border: 1px solid var(--gl-ink); background: var(--gl-sheet); }
.gl-search input[type="search"] {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  padding: var(--gl-3) var(--gl-4);
  font-family: "Archivo", Arial, sans-serif;
  font-stretch: 85%;
  font-size: var(--gl-t-0);
}
.gl-search input[type="search"]::placeholder { color: var(--gl-ink-3); opacity: 1; }
.gl-search input[type="search"]:focus { outline: 0; }
.gl-search:focus-within { outline: 2px solid var(--gl-tampon); outline-offset: 2px; }
.gl-search button { border: 0; border-left: 1px solid var(--gl-ink); }

/* --- Formulaires --------------------------------------------------------- */

.gl-field { display: grid; gap: var(--gl-2); margin-bottom: var(--gl-4); }
.gl-field input, .gl-field textarea, .gl-field select {
  border: 1px solid var(--gl-rule);
  background: var(--gl-sheet);
  padding: var(--gl-3);
  font-family: "Archivo", Arial, sans-serif;
  font-stretch: 85%;
}
.gl-field input:focus, .gl-field textarea:focus, .gl-field select:focus {
  border-color: var(--gl-tampon); outline: 2px solid var(--gl-tampon); outline-offset: -1px;
}
.gl-field input[aria-invalid="true"] { border-color: var(--gl-alert); }
.gl-error {
  display: flex; align-items: flex-start; gap: var(--gl-2);
  color: var(--gl-alert); font-size: var(--gl-t--1);
}
.gl-error::before {
  content: ""; flex: none; width: 1.25rem; height: 0;
  border-top: 2px dotted currentColor; margin-top: 0.7em;
}

/* --- Pagination ---------------------------------------------------------- */

.gl-pagination {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--gl-2);
  margin-top: var(--gl-7); padding-top: var(--gl-4);
  border-top: 1px solid var(--gl-rule);
}
.gl-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.5rem; padding: var(--gl-2) var(--gl-3);
  border: 1px solid var(--gl-rule);
  font-family: "Archivo", Arial, sans-serif;
  font-stretch: 75%; font-size: var(--gl-t--1);
  font-variant-numeric: tabular-nums lining-nums;
  text-decoration: none;
}
.gl-pagination .page-numbers:hover { border-color: var(--gl-tampon); color: var(--gl-tampon); }
.gl-pagination .current {
  background: var(--gl-tampon); border-color: var(--gl-tampon); color: var(--gl-ink-rev);
}

/* --- États vides et 404 --------------------------------------------------- */

.gl-empty {
  padding: var(--gl-8) 0;
  max-width: min(48ch, 100%);
}
.gl-empty h2 { margin-bottom: var(--gl-3); }
.gl-empty p { color: var(--gl-ink-2); margin-bottom: var(--gl-5); }

/* --- Pied de page : le dos de la chemise ---------------------------------- */

.gl-foot {
  background: var(--gl-board-deep);
  color: var(--gl-board);
  border-top: 3px solid var(--gl-tampon);
  padding-block: var(--gl-7) var(--gl-5);
  margin-top: auto;
}
.gl-foot a { color: var(--gl-board); }
.gl-foot a:hover { color: var(--gl-ink-rev); }
.gl-foot .gl-legend { color: #9ea79a; }
.gl-foot__grid {
  display: grid;
  gap: var(--gl-6);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  padding-bottom: var(--gl-6);
  border-bottom: 1px solid var(--gl-rule-rev);
}
.gl-foot__col ul { list-style: none; padding: 0; margin: var(--gl-3) 0 0; }
.gl-foot__col li + li { margin-top: var(--gl-2); }
.gl-foot__col a {
  font-family: "Archivo", Arial, sans-serif;
  font-stretch: 85%; font-size: var(--gl-t--1);
  text-decoration: none;
}
.gl-foot__col a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.gl-foot__base {
  display: flex; flex-wrap: wrap; gap: var(--gl-3) var(--gl-5);
  padding-top: var(--gl-4);
  align-items: center;
}
.gl-foot__base p { font-size: var(--gl-t--1); }

/* --- Utilitaires --------------------------------------------------------- */

.gl-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.gl-stack > * + * { margin-top: var(--gl-5); }
.gl-flow { padding-block: var(--gl-7); }