/* ==========================================================================
   Les Éditions des Fines Herbes — feuille de style principale
   Direction : herbier. Fond vert-noir de feuille froissée, étiquettes de
   spécimen en papier crème, numérotation réelle du catalogue.
   ========================================================================== */

:root {
  /* Palette */
  --encre:      #151B15;   /* fond, vert-noir de feuille froissée */
  --encre-2:    #1E261F;   /* panneaux */
  --feuille:    #669A41;   /* vert exact du logo EFH */
  --feuille-cl: #9DC47B;   /* vert clair, texte et liens sur fond sombre */
  --papier:     #EFE9DC;   /* étiquettes, texte principal */
  --papier-om:  #C9C3B4;   /* texte secondaire */
  --fumee:      #8C9487;   /* texte tertiaire, légendes */
  --zeste:      #C9822F;   /* accent chaud, univers Muezzin */
  --trait:      #333B33;   /* filets */

  /* Typographie */
  /* Palatino Linotype est la police de composition du livre. Elle est
     appelée si elle est installée chez le visiteur (Windows, macOS) ;
     sinon EB Garamond, très proche d'esprit, prend le relais. */
  --display: "Palatino Linotype", Palatino, "Book Antiqua",
             "EB Garamond", Georgia, serif;
  --texte:   "Spectral", Georgia, serif;
  --etiq:    "DM Mono", ui-monospace, monospace;

  /* Rythme */
  --marge:   clamp(1.25rem, 5vw, 4rem);
  --colonne: 68rem;
}

/* --------------------------------------------------------------- Reset -- */

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

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

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

body {
  margin: 0;
  background: var(--encre);
  color: var(--papier);
  font-family: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--feuille-cl); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--papier); }

:focus-visible {
  outline: 2px solid var(--feuille-cl);
  outline-offset: 3px;
}

.saut-contenu {
  position: absolute; left: -9999px;
  background: var(--papier); color: var(--encre);
  padding: .75rem 1rem; z-index: 100;
}
.saut-contenu:focus { left: 1rem; top: 1rem; }

/* ------------------------------------------------------------- Gabarit -- */

.enveloppe {
  width: 100%;
  max-width: var(--colonne);
  margin-inline: auto;
  padding-inline: var(--marge);
}

.section { padding-block: clamp(2.5rem, 5vw, 3.75rem); }
.section + .section { border-top: 1px solid var(--trait); }

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

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 5.2vw, 3rem); }
h2 { font-size: clamp(1.45rem, 3.2vw, 1.95rem); }
h3 { font-size: clamp(1.1rem, 2.2vw, 1.28rem); }

p { margin: 0 0 .95em; max-width: 64ch; }
p:last-child { margin-bottom: 0; }

.chapeau {
  font-size: clamp(1.02rem, 1.8vw, 1.13rem);
  color: var(--papier-om);
  line-height: 1.6;
}

/* Sur-titre : porte le numéro réel du catalogue, pas une décoration */
.exergue {
  font-family: var(--etiq);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--feuille-cl);
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 .85rem;
}
.exergue::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--trait);
  max-width: 7rem;
}

/* -------------------------------------------------------------- Entête -- */

.entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(21, 27, 21, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--trait);
}
.entete .enveloppe {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 4.5rem; padding-block: .6rem;
}

.marque { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
/* Le brin est un fichier externe : remplacez assets/img/logo-efh.svg par le
   logo original (SVG de préférence, sinon PNG à fond transparent) et rien
   d'autre ne bouge. Ajustez --brin-h si les proportions diffèrent. */
.marque__brin { height: var(--brin-h, 28px); width: auto; flex: none; }
.marque span {
  font-family: var(--display);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--papier);
  line-height: 1.3;
}

.navigation { display: flex; gap: clamp(.85rem, 2.6vw, 1.9rem); align-items: center; }
.navigation a {
  font-family: var(--display);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.25;
  color: var(--papier-om);
  text-decoration: none;
  text-align: center;
}
.navigation a i { font-style: normal; display: block; }
.navigation a:hover, .navigation a[aria-current="page"] { color: var(--feuille-cl); }

/* --------------------------------------------------------------- Boutons -- */

.bouton {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--etiq);
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .95rem 1.6rem;
  border: 1px solid var(--feuille);
  border-radius: 2px;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}
.bouton--plein { background: var(--feuille); color: var(--encre); }
.bouton--plein:hover { background: var(--feuille-cl); color: var(--encre); }
.bouton--creux { color: var(--feuille-cl); background: transparent; }
.bouton--creux:hover { background: var(--feuille); color: var(--encre); }

.groupe-boutons { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

/* ------------------------------------------- Étiquette de spécimen (SIGNATURE) */

.etiquette {
  background: var(--papier);
  color: #2A2E27;
  font-family: var(--etiq);
  font-size: .74rem;
  line-height: 1.5;
  padding: 1.1rem 1.25rem;
  border-radius: 2px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
  max-width: 21rem;
}
.etiquette__titre {
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #6E7A62;
  padding-bottom: .55rem;
  margin-bottom: .7rem;
  border-bottom: 1px solid #CFC8B8;
}
.etiquette dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; margin: 0; }
.etiquette dt { color: #6E7A62; }
.etiquette dd { margin: 0; text-align: right; }

/* --------------------------------------- Planche d'herbier (SIGNATURE) -- */
/* La couverture de Marjolaine est presque noire : montée sur papier, elle se
   détache du fond au lieu de s'y fondre. */

.planche {
  background: var(--papier);
  padding: 1.15rem 1.15rem .25rem;
  border-radius: 3px;
  box-shadow: 0 22px 52px rgba(0, 0, 0, .55);
  max-width: 21rem;
  width: 100%;
}
.planche > img {
  margin-inline: auto;
  border-radius: 1px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .38);
}
.planche .etiquette {
  background: transparent;
  box-shadow: none;
  max-width: none;
  padding: 1rem 0 1.15rem;
  margin: 1.1rem 0 0;
  border-top: 1px solid #D3CCBC;
}
.planche .etiquette__titre { border-bottom: 0; padding-bottom: 0; margin-bottom: .6rem; }

/* ---------------------------------------------------------------- Héros -- */

.heros { padding-block: clamp(2rem, 4.5vw, 3.25rem) clamp(2.5rem, 5vw, 4rem); }
.heros__grille { display: grid; gap: clamp(2rem, 4.5vw, 3rem); align-items: center; }

.heros__livre { justify-self: center; display: flex; justify-content: center; width: 100%; }

.promesse {
  font-family: var(--display);
  font-size: clamp(1.08rem, 2.1vw, 1.28rem);
  font-style: italic;
  color: var(--papier);
  border-left: 2px solid var(--feuille);
  padding-left: 1.1rem;
  margin: 1.75rem 0 0;
  max-width: 34ch;
  line-height: 1.45;
}

.prix-ligne {
  display: flex; align-items: baseline; gap: .7rem;
  font-family: var(--etiq);
  margin-top: 2rem;
}
.prix-ligne strong { font-size: 1.7rem; font-weight: 500; color: var(--papier); }
.prix-ligne span { font-size: .78rem; color: var(--fumee); letter-spacing: .06em; }

/* ------------------------------------------------------------ Catalogue -- */

.catalogue { display: grid; gap: 1.25rem; margin-top: 1.85rem; }

.fiche {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: 1.4rem;
  align-items: start;
  padding: 1.5rem;
  background: var(--encre-2);
  border: 1px solid var(--trait);
  border-radius: 3px;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s ease, transform .2s ease;
}
.fiche:hover { border-color: var(--feuille); transform: translateY(-2px); }
.fiche img {
  border-radius: 1px;
  background: var(--papier);
  padding: .4rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .5);
}
.fiche__cote {
  font-family: var(--etiq);
  font-size: .66rem;
  letter-spacing: .18em;
  color: var(--feuille);
  display: block;
  margin-bottom: .5rem;
}
.fiche h3 { margin-bottom: .35rem; }
.fiche__note { color: var(--papier-om); font-size: .95rem; margin: 0; }
.fiche__pied {
  font-family: var(--etiq);
  font-size: .74rem;
  color: var(--fumee);
  margin-top: .9rem;
  display: flex; flex-wrap: wrap; gap: .35rem .9rem;
}
.fiche--zeste .fiche__cote { color: var(--zeste); }
.fiche--zeste:hover { border-color: var(--zeste); }

/* --------------------------------------------------------------- Encart -- */

.encart {
  background: var(--encre-2);
  border: 1px solid var(--trait);
  border-left: 3px solid var(--feuille);
  border-radius: 3px;
  padding: clamp(1.25rem, 3vw, 1.75rem);
}
.encart h3 { margin-bottom: .75rem; }

/* ----------------------------------------------------------------- Pied -- */

.pied {
  border-top: 1px solid var(--trait);
  padding-block: 3rem 2.5rem;
  font-size: .9rem;
  color: var(--fumee);
}
.pied__grille { display: grid; gap: 2rem; }
.pied h4 {
  font-family: var(--etiq);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--papier-om);
  margin: 0 0 .8rem;
  font-weight: 400;
}
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.pied a { color: var(--fumee); text-decoration: none; }
.pied a:hover { color: var(--feuille-cl); }
.pied__legal {
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--trait);
  font-family: var(--etiq); font-size: .7rem; letter-spacing: .04em;
}

/* ------------------------------------------------------------ Page livre -- */

.livre-entete { padding-block: clamp(2rem, 4vw, 3rem) clamp(2rem, 4vw, 2.75rem); }
.livre-grille { display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); align-items: start; }
.livre-visuel { justify-self: center; display: flex; justify-content: center; width: 100%; }

.quatrieme p { font-size: 1.1rem; }
.quatrieme p:first-child { color: var(--papier); }

.retour {
  font-family: var(--etiq); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none; color: var(--fumee);
  display: inline-block; margin-bottom: 1.5rem;
}
.retour:hover { color: var(--feuille-cl); }

/* Page Muezzin : bascule vers l'univers chaud de sa couverture */
.univers-zeste {
  --feuille: var(--zeste);
  --feuille-cl: #E0A659;
}

/* -------------------------------------------------------- Grands écrans -- */

@media (min-width: 46rem) {
  .heros__grille { grid-template-columns: 1.15fr .85fr; }
  .heros__livre { justify-self: end; }
  .catalogue { grid-template-columns: 1fr 1fr; }
  .fiche { grid-template-columns: 1fr; }
  .fiche img { max-width: 8.5rem; }
  .livre-grille { grid-template-columns: .8fr 1.2fr; }
  .livre-visuel { justify-self: start; position: sticky; top: 6rem; }
  .pied__grille { grid-template-columns: 2fr 1fr 1fr; }
}

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

.formulaire { margin-top: 2.5rem; }

.formulaire fieldset {
  border: 0;
  border-top: 1px solid var(--trait);
  margin: 0 0 2.25rem;
  padding: 1.75rem 0 0;
}
.formulaire legend {
  font-family: var(--etiq);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--feuille-cl);
  padding: 0 .9rem 0 0;
}

/* Choix d'article et de livraison */
.option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .9rem;
  align-items: center;
  padding: 1rem 1.1rem;
  margin-bottom: .7rem;
  background: var(--encre-2);
  border: 1px solid var(--trait);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color .18s ease;
}
.option:hover { border-color: var(--feuille); }
.option:has(input:checked) { border-color: var(--feuille); background: #23301F; }
.option input { accent-color: var(--feuille); width: 1.1rem; height: 1.1rem; }
.option span { display: grid; gap: .15rem; }
.option strong { font-weight: 400; color: var(--papier); }
.option em {
  font-style: normal;
  font-family: var(--etiq);
  font-size: .72rem;
  color: var(--fumee);
}
.option b {
  font-family: var(--etiq);
  font-weight: 500;
  font-size: .95rem;
  color: var(--papier);
  white-space: nowrap;
}

/* Champs */
.champ { display: block; margin-bottom: 1.1rem; }
.champ > span {
  display: block;
  font-family: var(--etiq);
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--papier-om);
  margin-bottom: .45rem;
}
.champ small { color: var(--fumee); }
.champ input, .champ textarea {
  width: 100%;
  font-family: var(--texte);
  font-size: 1rem;
  color: var(--papier);
  background: var(--encre-2);
  border: 1px solid var(--trait);
  border-radius: 3px;
  padding: .8rem .9rem;
}
.champ input:focus, .champ textarea:focus {
  border-color: var(--feuille);
  outline: 2px solid transparent;
  outline-offset: 0;
}
.champ textarea { resize: vertical; min-height: 6rem; }
.champ--court input { max-width: 8rem; }
.champ--court small { display: block; margin-top: .4rem; font-size: .8rem; }

.grille-deux { display: grid; gap: 0 1rem; }

/* Cases à cocher */
.case {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .75rem;
  align-items: start;
  margin: 1.25rem 0 0;
  font-size: .95rem;
  color: var(--papier-om);
  cursor: pointer;
}
.case input { accent-color: var(--feuille); width: 1.05rem; height: 1.05rem; margin-top: .3rem; }

.note {
  font-family: var(--etiq);
  font-size: .74rem;
  line-height: 1.6;
  color: var(--fumee);
  margin: 1rem 0 0;
}

.pot-de-miel {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.formulaire button { border: 0; cursor: pointer; font-family: var(--etiq); }

@media (min-width: 40rem) {
  .grille-deux { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------ Sélection des ouvrages -- */

.ligne-livre {
  display: grid;
  grid-template-columns: 3.75rem 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.1rem;
  margin-bottom: .7rem;
  background: var(--encre-2);
  border: 1px solid var(--trait);
  border-radius: 3px;
}
.ligne-livre img {
  background: var(--papier);
  padding: .25rem;
  border-radius: 1px;
}
.ligne-livre__texte { display: grid; gap: .2rem; }
.ligne-livre__texte strong { font-weight: 400; color: var(--papier); }
.ligne-livre__texte em {
  font-style: normal;
  font-family: var(--etiq);
  font-size: .72rem;
  color: var(--fumee);
}
.ligne-livre__qte select {
  font-family: var(--etiq);
  font-size: 1.05rem;
  color: var(--papier);
  background: var(--encre);
  border: 1px solid var(--trait);
  border-radius: 3px;
  padding: .55rem .7rem;
  min-width: 3.75rem;
}
.ligne-livre__qte select:focus { border-color: var(--feuille); }

.option b small {
  display: block;
  font-size: .68rem;
  font-weight: 400;
  color: var(--fumee);
  letter-spacing: 0;
}

.visuellement-cache {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
}

/* ---------------------------------------------------------- Récapitulatif -- */

.recap {
  background: var(--papier);
  color: #2A2E27;
  font-family: var(--etiq);
  border-radius: 3px;
  padding: 1.25rem 1.35rem;
  margin: 0 0 2.25rem;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .45);
}
.recap dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .4rem 1rem;
  margin: 0;
  font-size: .82rem;
}
.recap dt { color: #55604B; }
.recap dd { margin: 0; text-align: right; }
.recap__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: .95rem;
  padding-top: .85rem;
  border-top: 1px solid #CFC8B8;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #55604B;
}
.recap__total strong {
  font-size: 1.55rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #2A2E27;
}

/* Case à cocher de sélection d'un ouvrage */
.ligne-livre__case { display: flex; align-items: center; padding-inline: .5rem; }
.ligne-livre__case input {
  accent-color: var(--feuille);
  width: 1.4rem; height: 1.4rem;
  cursor: pointer;
}
.ligne-livre:has(input:checked) { border-color: var(--feuille); background: #23301F; }

/* ------------------------------------------------------------ Page maison -- */

.deux-colonnes { display: grid; gap: 1.5rem; }

.valeurs { display: grid; gap: 1.1rem; margin-top: 2rem; }
.valeur {
  background: var(--encre-2);
  border: 1px solid var(--trait);
  border-radius: 3px;
  padding: 1.25rem 1.25rem;
}
.valeur__num {
  font-family: var(--etiq);
  font-size: .72rem;
  letter-spacing: .2em;
  color: var(--feuille-cl);
  display: block;
  margin-bottom: .8rem;
}
.valeur h3 { font-size: 1.15rem; margin-bottom: .55rem; }
.valeur p { font-size: .95rem; color: var(--papier-om); margin: 0; }

/* Chronologie du catalogue */
.chronologie { margin-top: 1.75rem; display: grid; gap: 0; }
.jalon {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 1.35rem;
  padding: 1.35rem 0;
  border-top: 1px solid var(--trait);
  position: relative;
}
.jalon:last-child { border-bottom: 1px solid var(--trait); }
.jalon__date {
  font-family: var(--etiq);
  font-size: .8rem;
  color: var(--papier);
  padding-top: .15rem;
}
.jalon h3 { font-size: 1.3rem; margin: .3rem 0 .5rem; }
.jalon h3 a { color: var(--papier); text-decoration: none; }
.jalon h3 a:hover { color: var(--feuille-cl); }
.jalon p { color: var(--papier-om); font-size: .97rem; margin: 0; }
.jalon--ouvert .jalon__date { color: var(--fumee); }
.jalon--ouvert h3 { color: var(--papier-om); }

@media (min-width: 46rem) {
  .deux-colonnes { grid-template-columns: 1fr 1.35fr; gap: 2.5rem; }
  .valeurs { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------------------------ Pages légales -- */

.texte-legal { margin-top: 2.5rem; }
.texte-legal h2 {
  font-size: 1.15rem;
  margin: 2.5rem 0 .75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--trait);
}
.texte-legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.texte-legal p { color: var(--papier-om); font-size: .97rem; }

/* Menu : défilement horizontal discret sur petits écrans */
.navigation {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin-right: calc(var(--marge) * -1);
  padding-right: var(--marge);
}
.navigation::-webkit-scrollbar { display: none; }
.navigation a { white-space: nowrap; flex: none; }

/* Liste des raisons de lire */
.raisons { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 1rem; }
.raisons li {
  color: var(--papier-om);
  font-size: .98rem;
  padding-left: 1.4rem;
  position: relative;
}
.raisons li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: .5rem; height: 1px;
  background: var(--feuille);
}

/* Diptyque des deux romans, page auteur */
.diptyque { display: grid; gap: 1.25rem; margin-top: 1.85rem; }
.volet {
  display: block;
  padding: 1.6rem 1.5rem;
  background: var(--encre-2);
  border: 1px solid var(--trait);
  border-radius: 3px;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s ease, transform .2s ease;
}
.volet:hover { border-color: var(--feuille); transform: translateY(-2px); }
.volet--zeste:hover { border-color: var(--zeste); }
.volet img {
  background: var(--papier);
  padding: .4rem;
  border-radius: 1px;
  margin-bottom: 1.15rem;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .5);
  max-width: 9rem;
}
.volet h3 { margin: .35rem 0 .6rem; }
.volet p { color: var(--papier-om); font-size: .95rem; margin: 0; }

@media (min-width: 46rem) {
  .diptyque { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------- Portrait auteur -- */

.portrait-grille { display: grid; gap: clamp(2.25rem, 6vw, 3.5rem); align-items: center; }
.portrait { margin: 0; justify-self: center; display: flex; justify-content: center; width: 100%; }
.portrait .planche { max-width: 18rem; }
.portrait img { border-radius: 1px; }
.portrait figcaption { padding-bottom: 1.15rem; }

@media (min-width: 46rem) {
  .portrait-grille { grid-template-columns: 1.1fr .9fr; }
  .portrait { justify-self: end; }
}

/* ------------------------------------------------- Librairies partenaires -- */

.librairies { display: grid; gap: 1rem; margin-top: 1.5rem; }
.librairie {
  background: var(--encre-2);
  border: 1px solid var(--trait);
  border-radius: 3px;
  padding: 1.25rem 1.3rem;
}
.librairie h3 { font-size: 1.1rem; margin-bottom: .3rem; }
.librairie__ville {
  font-family: var(--etiq);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--feuille-cl);
  margin: 0 0 .75rem;
}
.librairie__ligne { font-size: .92rem; color: var(--papier-om); margin: 0 0 .25rem; }
.librairie__date {
  font-family: var(--etiq);
  font-size: .78rem;
  color: var(--papier);
  margin: .6rem 0 0;
}

/* Champ de dépôt de fichier */
.champ input[type="file"] {
  padding: .9rem;
  font-family: var(--etiq);
  font-size: .85rem;
  cursor: pointer;
}
.champ input[type="file"]::file-selector-button {
  font-family: var(--etiq);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--encre);
  background: var(--feuille);
  border: 0;
  border-radius: 2px;
  padding: .55rem 1rem;
  margin-right: 1rem;
  cursor: pointer;
}

@media (min-width: 40rem) {
  .librairies { grid-template-columns: 1fr 1fr; }
}

/* Menu à sept entrées : on resserre légèrement sur les écrans intermédiaires */
@media (max-width: 68rem) and (min-width: 46rem) {
  .navigation { gap: 1.1rem; }
  .navigation a { font-size: .82rem; }
}