/* =====================================================================
   Mémothèque — système visuel du site public

   Rien d'institutionnel n'est écrit en dur, ici pas plus qu'ailleurs :
   la plateforme est destinée à servir à d'autres établissements, et le
   nom, le logo et les couleurs se saisissent depuis le back-office.

   PALETTE
   Le cramoisi reste la signature de l'établissement, mais il ne couvre
   plus la page : il est réservé à la bannière, aux boutons et aux
   petits repères. Les grandes surfaces passent à l'ivoire et à l'encre,
   et un vert olive profond prend le relais du rouge sur le bandeau
   institutionnel. Le citron n'intervient qu'en micro-touches.

   Toutes les nuances dérivent de --accent et de --vert : les changer
   depuis le back-office recalcule l'ensemble.
   ===================================================================== */

:root {
  /* ---- Signature cramoisie ---------------------------------------- */
  --accent:         #CE0040;
  --accent-vif:     #E6004A;
  --accent-profond: #8E0030;
  --accent-nuit:    #4A0019;
  --accent-voile:   rgba(206, 0, 64, 0.07);

  /* ---- Vert olive : la couleur d'accompagnement -------------------- */
  --vert:         #46562A;
  --vert-profond: #2C3818;
  --vert-clair:   #6B7F3C;
  --vert-voile:   rgba(70, 86, 42, 0.08);

  /* ---- Citron, en micro-touches seulement ------------------------- */
  --citron:       #C8D44E;
  --citron-sombre:#9DA82F;

  /* ---- Neutres : ivoire et encre ----------------------------------- */
  --encre:        #16140F;
  --texte:        #1E1B15;
  --texte-doux:   #6A6358;
  --texte-tenu:   #968E80;

  --ivoire:       #FCF9F4;
  --papier:       #F4EDE2;
  --blanc:        #FFFFFF;
  --bordure:      #E8DFD1;
  --bordure-fine: rgba(22, 20, 15, 0.07);

  /* ---- Dégradés de couverture -------------------------------------
     Quatre familles, dont une seule rouge : c'est ce qui fait baisser
     la température générale de la page. */
  --deg-cramoisi: linear-gradient(145deg, #8E0030 0%, #CE0040 55%, #E6004A 100%);
  --deg-olive:    linear-gradient(145deg, #2C3818 0%, #46562A 55%, #6B7F3C 100%);
  --deg-ocre:     linear-gradient(145deg, #8A5A14 0%, #C08A2A 48%, #D9A842 100%);
  --deg-encre:    linear-gradient(145deg, #16140F 0%, #343029 55%, #4E4840 100%);
  --deg-sarcelle: linear-gradient(145deg, #0E3A3D 0%, #1F5A5E 55%, #2E7A7F 100%);
  --deg-prune:    linear-gradient(145deg, #3A1631 0%, #5B2A4E 55%, #7C3C6A 100%);

  --deg-banniere: linear-gradient(135deg, var(--accent-nuit), var(--accent-profond) 55%, var(--accent));

  /* ---- Ombres chaudes, jamais grises ------------------------------- */
  --ombre-xs: 0 1px 2px rgba(45, 28, 10, 0.05);
  --ombre-sm: 0 2px 10px rgba(45, 28, 10, 0.06);
  --ombre-md: 0 10px 30px -10px rgba(45, 28, 10, 0.16);
  --ombre-lg: 0 24px 56px -18px rgba(45, 28, 10, 0.26);

  --rayon-sm: 8px;
  --rayon:    14px;
  --rayon-lg: 22px;
  --rayon-xl: 30px;
  --rayon-plein: 999px;

  --gouttiere: 20px;
  --max: 1200px;
  --entete-h: 68px;

  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --ressort: 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  /* Sans cela, une ancre se glisse sous l'en-tête collant. */
  scroll-padding-top: calc(var(--entete-h) + 16px);
}

body {
  margin: 0;
  background: var(--ivoire);
  color: var(--texte);
  font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--texte);
}

p { margin: 0; }
img { max-width: 100%; display: block; }

a { color: var(--accent); text-decoration: none; transition: color var(--transition); }

:focus-visible {
  outline: 2px solid var(--accent-vif);
  outline-offset: 3px;
  border-radius: 4px;
}

.conteneur {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gouttiere);
}

.saut {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--encre);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--rayon) 0;
  z-index: 100;
}
.saut:focus { left: 0; }

/* =====================================================================
   ANIMATIONS
   Discrètes et courtes : sur un site documentaire, l'animation sert à
   guider le regard, pas à faire le spectacle.
   ===================================================================== */

.revele {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--retard, 0ms);
}

.revele.vu { opacity: 1; transform: none; }

/* Trois composants déclarent plus bas leur propre `transition` en
   raccourci, pour l'effet de survol : `.carte`, `.guide` et
   `.champ-recherche`. Le raccourci remplace la transition entière, y
   compris le `transition-delay` de `.revele` : quand l'un d'eux porte
   aussi `.revele`, il perd son fondu d'apparition ET sa place dans la
   cascade. Les cartes surgissaient d'un bloc au lieu de se révéler
   l'une après l'autre.

   Une animation ne se fait pas écraser par une transition. Le mode
   `backwards` tient l'état de départ pendant le délai, puis rend la
   main : l'effet de survol de chaque composant reste intact. */
.carte.revele.vu,
.guide.revele.vu,
.champ-recherche.revele.vu {
  animation: apparaitre 620ms cubic-bezier(0.22, 1, 0.36, 1) var(--retard, 0ms) backwards;
}

@keyframes apparaitre {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* Si JavaScript ne s'exécute pas, rien ne doit rester invisible. */
.sans-js .revele { opacity: 1; transform: none; }

/* =====================================================================
   EN-TÊTE
   Aucun lien vers l'administration (§5).
   ===================================================================== */

/* Fond opaque plutôt que translucide et flouté. Un flou d'arrière-plan
   oblige le navigateur à recapturer ce qui passe dessous à chaque
   image : sur une page qui défile vite, au-dessus de photographies,
   c'est la première cause de saccade. L'opacité seule coûte zéro. */
.entete {
  background: var(--encre);
  position: sticky;
  top: 0;
  z-index: 60;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  transition: background var(--transition), box-shadow var(--transition);
}

.entete--pose { box-shadow: 0 8px 20px -16px rgba(0, 0, 0, 0.9); }

/* Un filet des deux couleurs de la charte souligne l'en-tête. Il
   n'apparaît qu'une fois la page défilée, quand la barre se détache. */
.entete::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(200, 212, 78, 0.65) 22%,
    rgba(206, 0, 64, 0.70) 58%,
    transparent 100%);
  opacity: 0;
  transition: opacity var(--transition);
}

.entete--pose::after { opacity: 1; }

.entete__barre {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: var(--entete-h);
}

/* La marque reçoit un logo PNG blanc, sans fond ni cadre. Tant qu'il
   n'est pas fourni, seul le nom s'affiche. */
.marque {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.24rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-right: auto;
}

.marque__logo { height: 34px; width: auto; }

.menu { display: flex; align-items: center; gap: 30px; }

.menu a {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.93rem;
  font-weight: 450;
  position: relative;
  padding: 6px 0;
}

.menu a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  background: var(--citron);
  transition: right var(--ressort);
}

.menu a:hover { color: #fff; }
.menu a:hover::after,
.menu a[aria-current="page"]::after { right: 0; }
.menu a[aria-current="page"] { color: #fff; }

.bouton-recherche {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: var(--rayon-plein);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.bouton-recherche:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.32);
  color: #fff;
}

.burger { display: none; }

/* =====================================================================
   BANNIÈRE
   Seule grande surface cramoisie de la page.
   ===================================================================== */

.banniere {
  position: relative;
  color: #fff;
  overflow: hidden;
  isolation: isolate;

  background-color: var(--accent-nuit);
  background-image:
    /* 1. voile cramoisi, dense à gauche, presque nul à droite */
    linear-gradient(98deg,
      rgba(58, 0, 20, 0.95) 0%,
      rgba(78, 0, 27, 0.92) 30%,
      rgba(104, 0, 36, 0.84) 48%,
      rgba(150, 0, 49, 0.56) 64%,
      rgba(192, 0, 60, 0.26) 82%,
      rgba(214, 0, 67, 0.12) 100%),
    /* 2. vignette : les angles s'assombrissent, le centre respire */
    radial-gradient(120% 95% at 72% 42%,
      rgba(20, 6, 10, 0) 36%, rgba(20, 6, 10, 0.42) 100%),
    /* 3. assombrissement général, léger */
    linear-gradient(0deg, rgba(22, 8, 12, 0.20), rgba(22, 8, 12, 0.20)),
    var(--banniere-image, url("../img/banniere-collections.jpg"));
  background-size: cover, cover, cover, cover;
  background-position: center, center, center, center 46%;
  background-repeat: no-repeat;
}

/* Le bas de la bannière se fond vers l'ivoire : la rupture nette entre
   la photo et la section suivante faisait « bandeau collé ». */
/* Trame décorative : de fines verticales qui évoquent des dos de
   livres rangés, plus deux halos diffus. Le tout est très peu
   contrasté — il s'agit de donner de la matière, pas un motif. */
.banniere::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 58% at 18% 12%, rgba(255, 180, 120, 0.13), transparent 70%),
    radial-gradient(38% 52% at 86% 88%, rgba(200, 212, 78, 0.10), transparent 72%),
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.055) 0 1px,
      transparent 1px 34px);
}

/* Le fondu du bas : derrière le contenu, jamais devant. Il doit
   enfoncer la photographie, pas voiler le texte. */
.banniere::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 170px;
  z-index: 0;
  background: linear-gradient(0deg,
    rgba(44, 0, 15, 0.94) 0%,
    rgba(58, 0, 20, 0.60) 44%,
    rgba(74, 0, 25, 0) 100%);
  pointer-events: none;
}

/* Le contenu passe au-dessus des deux couches décoratives. */
.banniere__grille { position: relative; z-index: 1; }

/* L'en-tête flotte au-dessus de la bannière : il faut de l'air entre
   le logo et le premier texte, sinon les deux se touchent. */
.banniere__grille { padding-block: 96px 82px; }
.banniere__contenu { max-width: 720px; }

.etiquette {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px;
  border-radius: var(--rayon-plein);
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #fff;
}

.etiquette::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--citron);
  box-shadow: 0 0 0 3px rgba(200, 212, 78, 0.25);
}

.banniere h1 {
  color: #fff;
  font-size: clamp(2rem, 3.9vw, 3.1rem);
  max-width: 22ch;
  margin: 24px 0 18px;
  text-wrap: balance;      /* répartit les lignes au lieu d'en laisser une orpheline */
}

/* Un seul mot du titre prend la seconde couleur de la charte, souligné
   d'un trait fin. Au-delà d'un mot, l'effet devient criard. */
.accentue {
  color: var(--citron);
  position: relative;
  white-space: nowrap;
}

.accentue::after {
  content: "";
  position: absolute;
  left: 2%; right: 2%;
  bottom: 0.06em;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(200, 212, 78, 0.9), rgba(200, 212, 78, 0.25));
}

.banniere__intro {
  font-size: 1.04rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.84);
  max-width: 56ch;
  margin-bottom: 30px;
}

.champ-recherche {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--blanc);
  border-radius: var(--rayon-plein);
  padding: 7px 7px 7px 20px;
  max-width: 540px;
  box-shadow: var(--ombre-lg);
  transition: box-shadow var(--transition), transform var(--transition);
}

.champ-recherche:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 30px 64px -20px rgba(45, 0, 18, 0.5);
}

.champ-recherche svg { flex: none; color: var(--texte-tenu); }

.champ-recherche input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.95rem;
  color: var(--texte);
  padding: 10px 0;
}

.champ-recherche input::placeholder { color: var(--texte-tenu); }
.champ-recherche input:focus { outline: none; }

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 26px;
  border: 0;
  border-radius: var(--rayon-plein);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.bouton:hover {
  background: var(--accent-vif);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px rgba(206, 0, 64, 0.55);
}

.bouton--clair { background: #fff; color: var(--vert-profond); }
.bouton--clair:hover { background: var(--citron); color: var(--vert-profond); box-shadow: 0 10px 24px -8px rgba(200,212,78,0.5); }

/* ---- Chiffres clés ------------------------------------------------ */

/* ---- Chiffres clés ------------------------------------------------
   Pas de cadre : trois colonnes posées à même la bannière, tenues
   ensemble par un court trait citron au-dessus de chacune. Les
   chiffres passent en Fraunces « wonk », l'axe fantaisiste de la
   police : empattements évasés et terminaisons obliques. Sur trois
   nombres isolés, ce caractère se voit ; dans un paragraphe entier, il
   fatiguerait. */

.chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 56px;
  margin-top: 48px;
}

.chiffre {
  position: relative;
  text-align: center;
  padding-bottom: 18px;
}

/* Le trait ferme la colonne par le bas, centré sous l'intitulé. */
.chiffre::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 2px;
  border-radius: 1px;
  background: var(--citron);
}

.chiffre__valeur {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: clamp(2.1rem, 3.1vw, 2.7rem);
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}

/* Le suffixe reste en citron : il signale le « plus de » sans qu'il
   faille grossir le nombre. */
.chiffre__suffixe { color: var(--citron); font-weight: 400; }

/* La chasse fixe des chiffres suffit à stabiliser la largeur pendant
   le décompte : aucun saut de mise en page. */
.compteur { font-variant-numeric: lining-nums tabular-nums; }

.chiffre__libelle {
  font-size: 0.73rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 10px;
}

@media (max-width: 620px) {
  .chiffres { gap: 20px 36px; }
  .chiffre__libelle { letter-spacing: 0.07em; }
}

/* =====================================================================
   EMPILEMENT DES SECTIONS
   Chaque bloc se cale sous l'en-tête et le suivant glisse par-dessus,
   comme des feuilles que l'on pose l'une sur l'autre. L'effet n'est
   qu'esthétique : sans lui, la page reste parfaitement lisible.
   ===================================================================== */

/* Le socle : une bande sombre, de la hauteur du rayon, collée sous
   l'en-tête et placée derrière les feuilles. Sans lui, les angles
   arrondis de la feuille qui arrive laissent voir la feuille
   précédente — un liseré clair qui clignote à chaque défilement. Avec
   lui, ce qui apparaît dans l'arrondi est la couleur de l'en-tête :
   la barre semble se prolonger sous la courbe, et les deux s'emboîtent.

   Hauteur nulle en flux : le socle ne décale rien. */
.socle {
  position: sticky;
  top: var(--entete-h);
  height: var(--rayon-xl);
  margin-bottom: calc(-1 * var(--rayon-xl));
  background: var(--encre);
  pointer-events: none;
}

/* Les feuilles sont des frères suivants : elles se peignent par-dessus
   le socle, qui ne reste visible que dans les arrondis. */
.empilement > .feuille {
  position: sticky;
  top: var(--entete-h);
  border-radius: var(--rayon-xl) var(--rayon-xl) 0 0;
  box-shadow: 0 -14px 28px -22px rgba(45, 28, 10, 0.5);

  /* Chaque feuille couvre au moins la hauteur visible : sans cela, on
     aperçoit la feuille précédente sous celle qui est posée, et la
     superposition devient un défaut au lieu d'un effet. */
  min-height: calc(100vh - var(--entete-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* La dernière feuille ne colle pas : elle doit libérer le pied de page. */
/* La dernière feuille ne colle pas : elle doit libérer le pied de page.
   Elle garde en revanche la hauteur commune, maintenant qu'elle porte
   les ressources et le contact — sans quoi elle paraissait rabougrie
   entre deux sections pleine page. */
.empilement > .feuille:last-child { position: relative; top: auto; }

.section { padding: 84px 0; }

/* Dans l'empilement, chaque feuille doit tenir dans la hauteur visible :
   ce qui dépasse est recouvert par la feuille suivante avant d'avoir pu
   être lu. Les marges y sont donc resserrées. */
.empilement .section { padding: 26px 0; }
.empilement .section__tete { margin-bottom: 14px; }
.section--ivoire { background: var(--ivoire); }
.section--papier { background: var(--papier); }

/* Section sur photographie : texte sombre, donc photo très effacée. */
.section--photo {
  background-color: var(--papier);
  background-image:
    linear-gradient(rgba(246, 240, 230, 0.93), rgba(246, 240, 230, 0.93)),
    linear-gradient(180deg, rgba(70, 86, 42, 0.07), rgba(206, 0, 64, 0.04)),
    var(--section-image, url("../img/fond-rayonnages.jpg"));
  background-size: cover, cover, cover;
  background-position: center;
  background-repeat: no-repeat;
}

.section__tete {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 38px;
}

.surtitre {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--vert);
  margin-bottom: 12px;
}

.surtitre::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: var(--citron);
}

.section__tete h2 { font-size: clamp(1.7rem, 2.9vw, 2.25rem); }

.section__note {
  font-size: 0.89rem;
  color: var(--texte-doux);
  max-width: 44ch;
  line-height: 1.6;
}

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--vert);
  white-space: nowrap;
}

.lien-fleche:hover { color: var(--vert-clair); }
.lien-fleche svg { transition: transform var(--ressort); }
.lien-fleche:hover svg { transform: translateX(4px); }

/* =====================================================================
   CARTES DE MÉMOIRE
   ===================================================================== */

.une {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 16px;
}

.une__secondaires {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.carte {
  /* `.lien-couvrant::after` rend toute la carte cliquable avec
     `inset: 0`. Sans `position` ici, il se dimensionne sur le plus
     proche ancêtre positionné — la feuille collée — et l'overlay
     couvre la section entière : le survol allume la mauvaise carte, et
     le clic ouvre le mauvais mémoire. Mesuré : 8 cartes sur 9
     répondaient pour une autre qu'elles-mêmes. */
  position: relative;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--ressort), box-shadow var(--ressort), border-color var(--transition);
}

.carte:hover {
  transform: translateY(-5px);
  box-shadow: var(--ombre-lg);
  border-color: rgba(70, 86, 42, 0.3);
}

/* La couverture est un aplat dégradé, jamais une image : il n'y aura
   pas de visuel pour deux mille mémoires. */
.couverture {
  position: relative;
  background: var(--deg-encre);
  padding: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.couverture--grande { aspect-ratio: 16 / 4.6; }

/* Une couverture peut recevoir une image, choisie depuis l'écran
   « Mémoires à la une ». Sans image, l'aplat de la filière reste
   affiché : le catalogue garde son allure même sans visuel fourni. */
.couverture--image {
  background-image: var(--image);
  background-size: cover;
  background-position: center;
}

/* La teinte de la filière se pose SUR l'image, en voile : la carte
   reste reconnaissable comme appartenant à sa filière, et le jeton
   blanc garde son contraste quelle que soit la photographie déposée.
   L'opacité est volontairement partielle — l'image doit rester lisible.

   `--voile` porte le dégradé de la filière ; il est repris de la règle
   de teinte par `.couverture--image` plus bas. */
.couverture--image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--voile, var(--deg-encre));
  opacity: 0.62;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Puis un dégradé sombre du bas vers le haut : il assoit le jeton et
   la note, sans noircir le sujet de la photographie. */
.couverture--image::after {
  background:
    linear-gradient(180deg, rgba(16, 7, 10, 0.55) 0%, rgba(16, 7, 10, 0) 42%),
    linear-gradient(0deg, rgba(16, 7, 10, 0.42) 0%, rgba(16, 7, 10, 0) 48%),
    linear-gradient(118deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 44%);
}
.couverture--petite { aspect-ratio: 16 / 3.2; padding: 10px; }

/* Les dépôts récents ne souffraient d'aucun défaut de hauteur : leurs
   cartes gardent les proportions d'origine, plus généreuses. */
.couverture--recent { aspect-ratio: 16 / 7.2; padding: 16px; }
.carte--recent .carte__corps { padding: 20px 22px 22px; }
.carte--recent .carte__pied { padding-top: 15px; }

.couverture::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, rgba(255,255,255,0.17) 0%, rgba(255,255,255,0) 44%);
  pointer-events: none;
}

/* Trois traits en bas de la couverture, comme les premières lignes
   d'un article. Ils donnent à l'aplat la tenue d'une page écrite, là
   où une couleur seule paraîtrait vide. Décoratifs : ils ne portent
   aucune information, et disparaissent dès qu'une image est posée. */
.couverture--recent:not(.couverture--image)::before {
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 14px;
  height: 20px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.34) 0 68%, transparent 68%) top left / 100% 3px no-repeat,
    linear-gradient(90deg, rgba(255,255,255,.24) 0 86%, transparent 86%) center left / 100% 3px no-repeat,
    linear-gradient(90deg, rgba(255,255,255,.16) 0 44%, transparent 44%) bottom left / 100% 3px no-repeat;
  border-radius: 2px;
  pointer-events: none;
}


/* La note de la grande carte : pourquoi ce mémoire a été choisi.

   Elle est posée AVANT le pied, qui porte `margin-top: auto` : elle
   occupe donc l'espace libre de la carte au lieu de l'allonger. La
   feuille garde sa hauteur validée, et l'emboîtement au défilement
   continue de fonctionner. Deux lignes au plus, pour la même raison. */
.carte__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 4px 0 0;
  padding: 9px 11px;
  border-radius: var(--rayon-sm);
  background: rgba(70, 86, 42, 0.08);
  border-left: 3px solid var(--vert);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--texte-doux);
}

.carte__note svg { flex: none; margin-top: 1px; color: var(--vert); }

.carte__note span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.couverture--cramoisi { background: var(--deg-cramoisi); --voile: var(--deg-cramoisi); }
.couverture--olive    { background: var(--deg-olive);    --voile: var(--deg-olive); }
.couverture--ocre     { background: var(--deg-ocre);     --voile: var(--deg-ocre); }
.couverture--encre    { background: var(--deg-encre);    --voile: var(--deg-encre); }
.couverture--sarcelle { background: var(--deg-sarcelle); --voile: var(--deg-sarcelle); }
.couverture--prune    { background: var(--deg-prune);    --voile: var(--deg-prune); }

/* L'image déposée doit l'emporter sur la teinte de la filière.
   Ces six règles de teinte sont déclarées APRÈS `.couverture--image`,
   et leur raccourci `background` remplaçait l'image par le dégradé :
   déposer une image ne changeait rien à l'écran. La règle qui suit est
   plus spécifique, elle gagne quel que soit l'ordre. */
.couverture.couverture--image {
  background-image: var(--image);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--encre);
}

.jeton {
  /* `.couverture::after` se peint APRÈS les enfants : sans cela, le
     dégradé sombre passait par-dessus le jeton et le ternissait. */
  position: relative;
  z-index: 2;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: var(--rayon-plein);
  background: rgba(255, 255, 255, 0.95);
  color: var(--encre);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.jeton--citron { background: var(--citron); color: var(--vert-profond); }

/* Un intitulé de filière peut faire cinquante signes : la pastille
   doit pouvoir passer à la ligne plutôt que de déborder de la carte. */
.jeton--filiere {
  max-width: 100%;
  white-space: normal;
  text-align: left;
  line-height: 1.3;
}

.carte__corps {
  padding: 14px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}

.carte__filiere {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vert);
}

.carte__titre {
  font-family: "Work Sans", sans-serif;
  font-size: 1.03rem;
  font-weight: 600;
  line-height: 1.38;
  color: var(--texte);
}

/* Le titre entier est cliquable. Sans cette règle, le lien reprend la
   couleur générale des liens — le rouge d'accent — et toutes les cartes
   se retrouvent avec un titre rouge au lieu de l'encre validée. */
.carte__titre a { color: inherit; }
.carte__titre a:hover { color: var(--accent); }

/* Les maquettes ont été validées avec des titres courts. Les vrais
   titres de mémoire font souvent quatre lignes, ce qui gonflait la
   carte, donc la feuille, qui renonçait alors à l'emboîtement. On
   borne le nombre de lignes : la géométrie validée tient quelles que
   soient les données. Le titre entier reste dans l'attribut et sur la
   fiche. */
.carte__titre {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.carte:not(.carte--grande) .carte__titre {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.carte--grande .carte__titre { font-size: 1.14rem; }

.carte__meta { font-size: 0.86rem; color: var(--texte-doux); }

.carte__pied {
  margin-top: auto;
  padding-top: 11px;
  border-top: 1px solid var(--bordure);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.8rem;
  color: var(--texte-tenu);
}

.rond {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--vert);
  color: #fff;
  display: grid;
  place-items: center;
  flex: none;
  transition: background var(--transition), transform var(--ressort);
}

.carte:hover .rond { background: var(--accent); transform: translateX(3px); }

/* La flèche et le signet ne reçoivent pas le clic.
   Ils sont décoratifs : c'est la carte entière qui est le lien, par
   `.lien-couvrant::after`. Or un `transform` non nul crée un contexte
   d'empilement, et le rond passait alors AU-DESSUS de ce calque — au
   survol, c'est-à-dire au seul moment où l'on peut cliquer. Mesuré avec
   `elementFromPoint` : au repos le point sous la flèche atteint le lien,
   au survol il n'atteint plus rien. La flèche paraissait cassée.

   C'est le même piège que celui des cartes qui ouvraient le mauvais
   mémoire, sous une autre forme : un empilement qu'on ne voit pas. */
.rond, .signet { pointer-events: none; }

.signet { color: var(--texte-tenu); display: grid; place-items: center; transition: color var(--transition); }
.signet:hover { color: var(--accent); }

/* =====================================================================
   FILIÈRES
   ===================================================================== */

.filieres {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.filiere {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding: 18px 20px;
  border-radius: var(--rayon-lg);
  /* Un voile de la teinte propre à la filière, sur fond blanc : assez
     pour colorer la mosaïque, pas assez pour gêner la lecture. */
  background:
    linear-gradient(140deg, var(--voile, transparent) 0%, rgba(255, 255, 255, 0) 62%),
    var(--blanc);
  border: 1px solid var(--bordure);
  overflow: hidden;
  transition: transform var(--ressort), box-shadow var(--ressort), border-color var(--transition);
}

/* Un filet de la teinte court le long du bord gauche. */
.filiere::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--teinte, var(--accent));
  opacity: 0;
  transition: opacity var(--transition), top var(--ressort), bottom var(--ressort);
}

.filiere:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -18px color-mix(in srgb, var(--teinte, var(--accent)) 45%, transparent);
  border-color: color-mix(in srgb, var(--teinte, var(--accent)) 40%, var(--bordure));
}

.filiere:hover::before { opacity: 1; top: 0; bottom: 0; }

/* La pastille porte la couleur pleine, le sigle s'y écrit en blanc. */
.filiere__icone {
  width: 50px;
  height: 54px;
  border-radius: 4px 10px 10px 4px;
  background: linear-gradient(150deg,
    var(--teinte-fonce, var(--accent-nuit)) 0%,
    var(--teinte, var(--accent)) 72%);
  flex: none;
  position: relative;
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--teinte, var(--accent)) 70%, transparent);
  display: grid;
  place-items: center;
  padding-left: 5px;
  color: #fff;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: transform var(--ressort);
}

.filiere:hover .filiere__icone { transform: scale(1.05) rotate(-2deg); }

/* Le mors du livre. */
.filiere__icone::after {
  content: "";
  position: absolute;
  left: 6px; top: 9px; bottom: 9px;
  width: 2px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.5);
}

.filiere__nom {
  display: block;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--texte);
  line-height: 1.3;
}

.filiere__compte {
  display: block;
  font-size: 0.79rem;
  color: var(--texte-tenu);
  margin-top: 3px;
}

/* =====================================================================
   CARTE « GUIDE DE RÉDACTION »
   Un étudiant qui arrive ici ne cherche pas seulement à lire : il
   cherche à écrire. C'est l'appel à l'action le plus utile de la page.
   ===================================================================== */

.guide {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  min-width: 320px;
  max-width: 420px;
  border-radius: var(--rayon-lg);
  background: var(--deg-olive);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--ombre-md);
  transition: transform var(--ressort), box-shadow var(--ressort);
}

.guide:hover { transform: translateY(-4px); box-shadow: var(--ombre-lg); }

/* Dans le bandeau d'avant-pied, la carte est l'appel à l'action
   principal : elle gagne en surface et en contraste. */
.guide--grand {
  min-width: 340px;
  max-width: 400px;
  padding: 26px 28px;
  background: var(--blanc);
  color: var(--texte);
  box-shadow: var(--ombre-lg);
}

.guide--grand .guide__icone {
  background: var(--deg-olive);
  border-color: transparent;
  color: #fff;
}

.guide--grand .guide__sur   { color: var(--vert); }
.guide--grand .guide__titre { color: var(--texte); font-size: 1.2rem; }
.guide--grand .guide__note  { color: var(--texte-doux); }
.guide--grand .guide__fleche { color: var(--vert); }
.guide--grand:hover .guide__fleche { color: var(--accent); }
.guide--grand::after { background: linear-gradient(110deg, transparent 38%, rgba(70,86,42,0.10) 50%, transparent 62%); }

/* Un trait de lumière traverse la carte au survol. */
.guide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,0.16) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.guide:hover::after { transform: translateX(120%); }

.guide__icone {
  width: 48px;
  height: 52px;
  flex: none;
  border-radius: 4px 9px 9px 4px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  display: grid;
  place-items: center;
  color: var(--citron);
}

.guide__sur {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--citron);
  margin-bottom: 5px;
}

.guide__titre {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.22;
  color: #fff;
}

.guide__note {
  display: block;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 5px;
}

.guide__fleche {
  margin-left: auto;
  flex: none;
  color: rgba(255, 255, 255, 0.75);
  transition: transform var(--ressort), color var(--transition);
}

.guide:hover .guide__fleche { transform: translateX(4px); color: var(--citron); }

/* =====================================================================
   SECTION DES FILIÈRES — une mosaïque colorée, sur fond clair

   Le fond rouge uni ne fonctionnait pas : les cartes translucides y
   disparaissaient et la photographie placée derrière devenait du bruit.
   La section repasse en clair, et c'est chaque filière qui porte sa
   couleur. Six teintes empruntées aux reliures anciennes de la
   bannière — bordeaux, olive, ocre, encre, sarcelle, prune — réparties
   sur les douze filières.
   ===================================================================== */

.section--filieres {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(90% 68% at 10% 0%, rgba(230, 0, 74, 0.22), transparent 60%),
    radial-gradient(80% 60% at 96% 100%, rgba(255, 120, 70, 0.12), transparent 62%),
    linear-gradient(152deg, #3E0016 0%, #650024 36%, #930031 68%, #B8003E 100%);
  color: #fff;
}

/* Trame de points et fines verticales : le même rappel de dos de livres
   que la bannière, pour que le rouge ne soit pas un aplat. */
.section--filieres::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(112deg, transparent 34%, rgba(255, 255, 255, 0.05) 50%, transparent 66%),
    radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 40px);
  background-size: auto, 24px 24px, auto;
  background-position: center, -12px -12px, center;
}

/* Seuls les titres de la section changent de couleur : les cartes
   restent exactement telles quelles. */
.section--filieres h2 { color: #fff; }
.section--filieres .surtitre { color: var(--citron); }
.section--filieres .surtitre::before { background: var(--citron); }
.section--filieres .lien-fleche { color: var(--citron); }
.section--filieres .lien-fleche:hover { color: #fff; }

/* Les six teintes. Chacune est assez sombre pour que le sigle s'écrive
   en blanc dessus : toutes dépassent 5,8:1 de contraste. */
.f--bordeaux { --teinte: #8E0030; --teinte-fonce: #5E0020; --voile: rgba(142, 0, 48, 0.055); }
.f--olive    { --teinte: #46562A; --teinte-fonce: #2C3818; --voile: rgba(70, 86, 42, 0.07); }
.f--ocre     { --teinte: #8A5A14; --teinte-fonce: #5E3C0B; --voile: rgba(138, 90, 20, 0.07); }
.f--encre    { --teinte: #3A3630; --teinte-fonce: #1F1D18; --voile: rgba(58, 54, 48, 0.06); }
.f--sarcelle { --teinte: #1F5A5E; --teinte-fonce: #0E3A3D; --voile: rgba(31, 90, 94, 0.07); }
.f--prune    { --teinte: #5B2A4E; --teinte-fonce: #3A1631; --voile: rgba(91, 42, 78, 0.07); }

/* =====================================================================
   GRILLE DES RÉCENTS
   ===================================================================== */

.grille-4 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
  gap: 24px;
}

/* =====================================================================
   BANDEAU INSTITUTIONNEL — en vert olive, pas en rouge
   ===================================================================== */

.bandeau {
  position: relative;
  color: #fff;
  overflow: hidden;
  isolation: isolate;

  background-color: var(--vert-profond);
  background-image:
    linear-gradient(100deg,
      rgba(20, 28, 11, 0.96) 0%,
      rgba(38, 50, 21, 0.93) 46%,
      rgba(70, 86, 42, 0.80) 100%),
    linear-gradient(0deg, rgba(8, 12, 5, 0.34), rgba(8, 12, 5, 0.34)),
    var(--guide-image, url("../img/ressources-ecriture.jpg"));
  background-size: cover, cover, cover;
  background-position: center, center, center 42%;
  background-repeat: no-repeat;
}

.bandeau__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  gap: 48px;
  align-items: center;
  padding-block: 72px 40px;
}

.bandeau h2 { color: #fff; font-size: clamp(1.6rem, 2.8vw, 2.1rem); margin-bottom: 16px; }

.bandeau p {
  color: rgba(255, 255, 255, 0.82);
  max-width: 60ch;
  font-size: 0.99rem;
  line-height: 1.7;
}

.bandeau .surtitre { color: var(--citron); }
.bandeau .surtitre::before { background: var(--citron); }

/* ---- Les trois ressources ---------------------------------------- */

.ressources {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ressource {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  height: 100%;
  padding: 18px 20px;
  border-radius: var(--rayon);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: background var(--transition), border-color var(--transition), transform var(--ressort);
}

.ressource:hover {
  background: rgba(255, 255, 255, 0.13);
  border-color: rgba(200, 212, 78, 0.6);
  transform: translateY(-3px);
}

.ressource__num {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.05rem;
  color: var(--citron);
  line-height: 1.2;
  flex: none;
}

.ressource__titre { display: block; color: #fff; font-weight: 600; font-size: 0.96rem; line-height: 1.35; }
.ressource__note  { display: block; color: rgba(255, 255, 255, 0.65); font-size: 0.83rem; margin-top: 4px; }

/* ---- La ligne de contact, en bas du bandeau ---------------------- */

.contact-ligne {
  margin-bottom: 36px;     /* sinon le bouton colle au pied de page */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.contact-ligne__texte { color: rgba(255, 255, 255, 0.8); font-size: 0.95rem; }
.contact-ligne__texte strong { color: #fff; font-weight: 600; }

/* =====================================================================
   PIED DE PAGE
   ===================================================================== */

.pied {
  background: var(--encre);
  color: rgba(255, 255, 255, 0.6);
  padding: 68px 0 0;
  font-size: 0.89rem;
}

.pied__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 44px;
  padding-bottom: 52px;
}

.pied .marque { margin-bottom: 16px; }
.pied__texte { max-width: 36ch; line-height: 1.6; }

.pied__colonne h2,
.pied__colonne h3 {
  font-family: "Work Sans", sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 18px;
}

.pied__colonne ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.pied__colonne a { color: rgba(255, 255, 255, 0.6); }
.pied__colonne a:hover { color: var(--citron); }

.pied__bas {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 24px 0 30px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 0.81rem;
  color: rgba(255, 255, 255, 0.42);
}

/* =====================================================================
   ADAPTATION AUX PETITS ÉCRANS
   ===================================================================== */

@media (max-width: 1040px) {
  .une { grid-template-columns: minmax(0, 1fr); }
  .bandeau__grille { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
}

@media (max-width: 860px) {
  /* Le texte occupe toute la largeur : le voile redevient dense partout,
     mais assez léger pour que la photographie reste visible. */
  .banniere {
    background-image:
      linear-gradient(168deg,
        rgba(74, 0, 25, 0.90) 0%,
        rgba(104, 0, 35, 0.83) 48%,
        rgba(150, 0, 50, 0.74) 100%),
      linear-gradient(0deg, rgba(22, 8, 12, 0.26), rgba(22, 8, 12, 0.26)),
      var(--banniere-image, url("../img/banniere-collections.jpg"));
  }
  .banniere__grille { padding-block: 72px 58px; }
  .menu, .bouton-recherche { display: none; }
  .burger {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border-radius: 11px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.08);
    color: #fff;
    cursor: pointer;
  }
  .section { padding: 60px 0; }
  .section__tete { flex-direction: column; align-items: flex-start; gap: 16px; }
  /* L'empilement est désactivé : sur un petit écran il mange la hauteur
     utile sans rien apporter. */
  .socle { display: none; }
  .empilement > .feuille {
    position: relative;
    top: auto;
    box-shadow: none;
    min-height: 0;          /* sans empilement, la hauteur d'écran n'a plus de sens */
    border-radius: 0;
  }
}

@media (max-width: 480px) {
  .champ-recherche {
    flex-wrap: wrap;
    border-radius: var(--rayon-lg);
    padding: 14px 16px;
    gap: 12px;
  }
  .champ-recherche input { flex: 1 1 60%; padding: 4px 0; }
  .champ-recherche .bouton { flex: 1 1 100%; padding: 13px 20px; }
}

@media (max-width: 620px) {
  :root { --gouttiere: 16px; }
  /* Sur un écran de 320 px, une largeur minimale de 320 px déborderait. */
  .guide { min-width: 0; max-width: none; width: 100%; }
  .une__secondaires { grid-template-columns: minmax(0, 1fr); }
  .chiffres { gap: 30px; }
  .pied__grille { grid-template-columns: minmax(0, 1fr); }
}

/* Réglage système « réduire les animations » : tout s'arrête, et
   l'empilement est abandonné. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .revele { opacity: 1; transform: none; }
  .carte.revele.vu, .guide.revele.vu, .champ-recherche.revele.vu { animation: none; }
  .empilement > .feuille { position: relative; top: auto; }
}

/* =====================================================================
   COMPOSANTS DES PAGES INTÉRIEURES
   Ajoutés après les règles de l'accueil : aucune n'est modifiée.
   ===================================================================== */

/* ---- Menu du téléphone -------------------------------------------- */

.menu-mobile { background: var(--encre); border-top: 1px solid rgba(255,255,255,0.08); }
.menu-mobile .conteneur { display: grid; padding-top: 10px; padding-bottom: 18px; }

.menu-mobile a {
  padding: 13px 2px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.98rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.menu-mobile a:last-child { border-bottom: 0; }
.menu-mobile a:hover { color: var(--citron); }
body.menu-ouvert { overflow: hidden; }

@media (min-width: 861px) { .menu-mobile { display: none !important; } }

/* ---- En-tête de page intérieure -----------------------------------
   Plus court que la bannière d'accueil : sur une page de contenu, le
   visiteur vient lire, pas contempler. */

.page-tete {
  position: relative;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--accent-nuit);
  background-image:
    linear-gradient(98deg, rgba(58,0,20,0.95) 0%, rgba(86,0,30,0.90) 42%, rgba(140,0,47,0.74) 100%),
    linear-gradient(0deg, rgba(22,8,12,0.26), rgba(22,8,12,0.26)),
    var(--page-image, url("../img/banniere-collections.jpg"));
  background-size: cover, cover, cover;
  background-position: center, center, center 46%;
}

.page-tete::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 60% at 16% 10%, rgba(255,180,120,0.12), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 34px);
}

.page-tete__grille { position: relative; z-index: 1; padding-block: 44px 54px; }
/* 22ch retenait le titre sur quatre ou cinq lignes serrées à gauche,
   la moitié droite restant vide. 34ch l'étale sur deux ou trois. */
.page-tete h1 {
  color: #fff;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  max-width: 34ch;
  margin: 14px 0 0;
  text-wrap: balance;
}
.page-tete__intro { color: rgba(255,255,255,0.84); max-width: 60ch; margin-top: 14px; font-size: 1rem; line-height: 1.65; }
.page-tete--vert {
  background-image:
    linear-gradient(98deg, rgba(20,28,11,0.96) 0%, rgba(40,52,21,0.92) 46%, rgba(70,86,42,0.78) 100%),
    linear-gradient(0deg, rgba(8,12,5,0.3), rgba(8,12,5,0.3)),
    var(--guide-image, url("../img/ressources-ecriture.jpg"));
}

/* ---- Fil d'Ariane --------------------------------------------------- */

.fil { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.82rem; }
.fil a { color: rgba(255,255,255,0.72); }
.fil a:hover { color: var(--citron); }
.fil span[aria-current] { color: rgba(255,255,255,0.55); }
.fil svg { opacity: 0.45; flex: none; }
.fil--clair a { color: var(--texte-doux); }
.fil--clair a:hover { color: var(--accent); }
.fil--clair span[aria-current] { color: var(--texte-tenu); }

/* ---- Gabarit à deux colonnes ---------------------------------------- */

.deux-colonnes {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}

.colonne-laterale { position: sticky; top: calc(var(--entete-h) + 20px); }

@media (max-width: 960px) {
  .deux-colonnes { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .colonne-laterale { position: static; }
}

/* ---- Panneau de filtres ---------------------------------------------- */

.panneau {
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  padding: 20px 22px;
}

.panneau + .panneau { margin-top: 18px; }

.panneau h2 {
  font-family: "Work Sans", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin-bottom: 14px;
}

.champ { display: block; margin-bottom: 14px; }
.champ:last-child { margin-bottom: 0; }

.champ__libelle {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--texte-doux);
  margin-bottom: 6px;
}

.champ select,
.champ input,
.champ textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm);
  background: var(--ivoire);
  font: inherit;
  font-size: 0.92rem;
  color: var(--texte);
}

.champ textarea { min-height: 130px; resize: vertical; }

/* Le même parti que dans le back-office, pour que se connecter à son
   compte et entrer dans l'administration se ressemblent : la bordure
   change, un halo très doux s'ajoute, et aucun cercle rouge ne vient
   dire « erreur » là où il n'y en a pas. */
.champ select:focus,
.champ input:focus,
.champ textarea:focus {
  outline: none;
  border-color: var(--encre);
  box-shadow: 0 0 0 3px rgba(206, 0, 64, 0.12);
  background: var(--blanc);
}

/* Le formulaire d'entrée par courriel : deux champs, et c'est la porte
   du site. Mêmes proportions que la carte de connexion. */
.acces__forme .champ input {
  padding: 13px 14px;
  font-size: .95rem;
  border-radius: 10px;
}
.acces__forme .bouton { padding: 13px 22px; border-radius: 10px; }

.case { display: flex; align-items: center; gap: 9px; font-size: 0.88rem; color: var(--texte-doux); padding: 5px 0; }
.case input { width: 16px; height: 16px; accent-color: var(--accent); flex: none; }

/* ---- Puces (mots-clés, filtres actifs) -------------------------------- */

.puces { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }

.puce {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: var(--rayon-plein);
  background: var(--blanc);
  border: 1px solid var(--bordure);
  font-size: 0.83rem;
  color: var(--texte-doux);
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.puce:hover { border-color: var(--accent); color: var(--accent); }
.puce--active { background: var(--accent); border-color: var(--accent); color: #fff; }
.puce--active:hover { color: #fff; background: var(--accent-vif); }

/* ---- Barre de résultats ---------------------------------------------- */

.resultats-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--bordure);
}

.resultats-tete p { font-size: 0.92rem; color: var(--texte-doux); }
.resultats-tete strong { color: var(--texte); font-weight: 600; }
.tri { display: flex; align-items: center; gap: 9px; font-size: 0.88rem; color: var(--texte-doux); }
.tri select { padding: 7px 10px; border: 1px solid var(--bordure); border-radius: var(--rayon-sm); background: var(--blanc); font: inherit; font-size: 0.88rem; }

/* ---- Carte en liste --------------------------------------------------- */

.liste-memoires { display: grid; gap: 16px; }

.memoire-ligne {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 18px;
  padding: 18px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  transition: transform var(--ressort), box-shadow var(--ressort), border-color var(--transition);
}

.memoire-ligne:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px -18px color-mix(in srgb, var(--teinte, var(--accent)) 50%, transparent);
  border-color: color-mix(in srgb, var(--teinte, var(--accent)) 38%, var(--bordure));
}

.memoire-ligne__dos {
  border-radius: 4px 9px 9px 4px;
  background: linear-gradient(150deg, var(--teinte-fonce, var(--accent-nuit)) 0%, var(--teinte, var(--accent)) 72%);
  position: relative;
  box-shadow: 0 8px 18px -10px rgba(0,0,0,0.5);
  min-height: 96px;
}

.memoire-ligne__dos::after {
  content: "";
  position: absolute;
  left: 7px; top: 12px; bottom: 12px;
  width: 2px; border-radius: 1px;
  background: rgba(255,255,255,0.5);
}

.memoire-ligne__titre {
  font-family: "Work Sans", sans-serif;
  font-size: 1.04rem;
  font-weight: 600;
  line-height: 1.38;
  margin: 6px 0 8px;
}

.memoire-ligne__titre a { color: var(--texte); }
.memoire-ligne__titre a:hover { color: var(--accent); }
.memoire-ligne__meta { font-size: 0.86rem; color: var(--texte-doux); }

.memoire-ligne__pied {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  margin-top: 12px;
  font-size: 0.8rem;
  color: var(--texte-tenu);
}

/* Rend toute la carte cliquable sans imbriquer de liens. */
/* Le bloc qui porte un `.lien-couvrant` DOIT être `position: relative`,
   sinon cet overlay déborde jusqu'au premier ancêtre positionné. */
.lien-couvrant::after { content: ""; position: absolute; inset: 0; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--rayon-plein);
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: var(--vert-voile);
  color: var(--vert);
}

.badge--accent { background: var(--accent-voile); color: var(--accent-profond); }
.badge--embargo { background: rgba(138, 90, 20, 0.12); color: #7A4E10; }

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

.pagination { display: flex; justify-content: center; gap: 6px; margin-top: 36px; list-style: none; padding: 0; }

.pagination a,
.pagination span {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--rayon-sm);
  border: 1px solid var(--bordure);
  background: var(--blanc);
  color: var(--texte-doux);
  font-size: 0.9rem;
}

.pagination a:hover { border-color: var(--accent); color: var(--accent); }
.pagination [aria-current] { background: var(--accent); border-color: var(--accent); color: #fff; }
.pagination .ellipse { border: 0; background: none; }

/* ---- Texte long (à propos, mentions, normes) ---------------------------- */

.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-top: 1.9em; }
.prose h3 { font-size: 1.1rem; margin-top: 1.5em; }
.prose p, .prose li { color: var(--texte-doux); line-height: 1.75; }
.prose strong { color: var(--texte); font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.2em; display: grid; gap: 0.5em; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

.prose blockquote {
  border-left: 3px solid var(--citron);
  padding: 4px 0 4px 18px;
  color: var(--texte);
  font-style: italic;
}

.sommaire {
  background: var(--papier);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  padding: 20px 22px;
}

.sommaire ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: s; }
.sommaire li { counter-increment: s; }

.sommaire a { display: flex; gap: 10px; font-size: 0.9rem; color: var(--texte-doux); }
.sommaire a::before { content: counter(s, decimal-leading-zero); color: var(--citron-sombre); font-weight: 600; }
.sommaire a:hover { color: var(--accent); }

/* ---- Notice d'un mémoire ------------------------------------------------ */

.notice { display: grid; gap: 0; margin: 0; }

.notice__ligne {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--bordure);
}

.notice__ligne:last-child { border-bottom: 0; }
.notice dt { font-size: 0.84rem; color: var(--texte-tenu); }
.notice dd { margin: 0; font-size: 0.94rem; color: var(--texte); }

@media (max-width: 600px) {
  .notice__ligne { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

.jury { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.jury caption { text-align: left; font-size: 0.84rem; color: var(--texte-tenu); padding-bottom: 10px; }
.jury th, .jury td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--bordure); }
.jury thead th { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texte-tenu); font-weight: 600; }
.jury tbody th { font-weight: 500; color: var(--texte-doux); }
.jury td { color: var(--texte); }
.jury tr:last-child th, .jury tr:last-child td { border-bottom: 0; }

@media (max-width: 680px) {
  .jury, .jury tbody, .jury tr, .jury td, .jury th { display: block; }
  .jury thead { display: none; }
  .jury tr { padding: 12px 0; border-bottom: 1px solid var(--bordure); }
  .jury th, .jury td { border: 0; padding: 2px 0; }
  .jury tbody th { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--texte-tenu); }
}

/* Lecteur de document : l'aperçu n'affiche qu'un cadre d'attente, le
   fichier restant sur Drive. */
.lecteur {
  aspect-ratio: 16 / 11;
  border-radius: var(--rayon-lg);
  border: 1px solid var(--bordure);
  background:
    repeating-linear-gradient(135deg, rgba(22,20,15,0.02) 0 10px, transparent 10px 20px),
    var(--papier);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 28px;
  color: var(--texte-doux);
}

.lecteur__note { font-size: 0.88rem; max-width: 42ch; margin-top: 10px; }

/* Le lecteur du document.

   Trois exigences qui se contrarient : tenir dans la hauteur de
   l'écran, montrer la page assez grande pour qu'on la lise, et ne
   laisser paraître aucune des bandes sombres dont le lecteur de Drive
   entoure la page.

   Un cadre à la proportion d'une page résolvait les deux premières,
   mais la page n'y faisait que 488 px de large : trop petit pour lire.
   Le cadre prend donc toute la largeur de la colonne, et la page est
   calée sur cette largeur — elle dépasse en hauteur, et l'on fait
   défiler pour lire la suite, comme dans n'importe quelle liseuse.

   On ne peut pas styler l'intérieur d'un iframe d'un autre domaine :
   pour chasser les bandes sombres, on agrandit le cadre de Drive
   au-delà du nôtre et l'on coupe ce qui dépasse.

   --marge-drive  ce qu'on rogne à gauche et à droite. Il doit valoir
                  au moins la marge interne de Drive, qu'on ne peut pas
                  lire depuis ici. Au-delà, on entame la marge blanche
                  du document, qui est large : sans conséquence.
   --proportion   la hauteur du cadre de Drive, en multiple de sa
                  largeur. Au-dessus de 1,414 — la proportion d'une
                  page — Drive cale la page sur la LARGEUR, ce qui est
                  tout l'objet : la page remplit le cadre d'un bord à
                  l'autre.

   On ne rogne RIEN en hauteur. Un essai de remonter la page pour
   coller son bord haut au cadre a coupé l'en-tête du document : le
   lecteur de Drive ajoute au-dessus de la page une barre dont on ne
   connaît pas la hauteur d'ici. Mieux vaut un bandeau sombre au-dessus
   et au-dessous qu'une page de garde amputée — le logo et le titre
   sont la première chose qu'on vient voir. */
.lecteur-cadre {
  --marge-drive: 60px;
  --proportion: 1.46;

  position: relative;
  overflow: hidden;
  width: 100%;
  height: min(calc(100vh - 170px), 820px);
  border-radius: var(--rayon-lg);
  border: 1px solid var(--bordure);
  background: var(--papier);
  box-shadow: 0 14px 34px -24px rgba(45, 28, 10, 0.6);
}

.lecteur-drive {
  display: block;
  border: 0;
  background: var(--papier);

  width: calc(100% + 2 * var(--marge-drive));
  aspect-ratio: 1 / 1.46;
  margin-left: calc(-1 * var(--marge-drive));

  margin-top: 0;
}

@media (max-width: 760px) {
  .lecteur-cadre {
    height: min(calc(100vh - 140px), 640px);
    --marge-drive: 34px;
  }
}

.citation {
  background: var(--papier);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  padding: 20px 22px;
}

.citation__texte {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--texte);
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm);
  padding: 14px 16px;
  margin: 12px 0 14px;
}

.bouton--fin {
  padding: 9px 18px;
  font-size: 0.86rem;
  background: var(--vert);
}

.bouton--fin:hover { background: var(--vert-clair); box-shadow: 0 8px 20px -8px rgba(70,86,42,0.6); }
.bouton--fin.est-copie { background: var(--citron-sombre); }

/* ---- Étapes numérotées (guide) ------------------------------------------ */

.etapes { display: grid; gap: 16px; list-style: none; margin: 0; padding: 0; counter-reset: e; }

.etape {
  counter-increment: e;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 18px;
  padding: 22px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
}

.etape::before {
  content: counter(e, decimal-leading-zero);
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "WONK" 1;
  font-size: 1.5rem;
  color: var(--citron-sombre);
  line-height: 1.1;
}

.etape h3 { font-family: "Work Sans", sans-serif; font-size: 1.02rem; font-weight: 600; margin-bottom: 6px; }
.etape p { color: var(--texte-doux); font-size: 0.93rem; line-height: 1.65; }

/* ---- Liste de téléchargements -------------------------------------------- */

.fichiers { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }

.fichier {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px 18px;
  background: var(--blanc);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  transition: border-color var(--transition), transform var(--ressort);
}

.fichier:hover { border-color: var(--vert); transform: translateX(3px); }
.fichier__icone { width: 40px; height: 44px; border-radius: 3px 8px 8px 3px; background: var(--deg-olive); display: grid; place-items: center; color: #fff; flex: none; font-size: 0.6rem; font-weight: 600; }
.fichier__nom { display: block; font-weight: 600; font-size: 0.95rem; color: var(--texte); }
.fichier__poids { display: block; font-size: 0.8rem; color: var(--texte-tenu); margin-top: 2px; }
.fichier__fleche { margin-left: auto; color: var(--texte-tenu); flex: none; }

/* ---- Formulaire ------------------------------------------------------------ */

.formulaire { display: grid; gap: 4px; }
.formulaire__duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 600px) { .formulaire__duo { grid-template-columns: minmax(0, 1fr); } }

.note-info {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--rayon);
  background: var(--vert-voile);
  border: 1px solid rgba(70, 86, 42, 0.22);
  font-size: 0.88rem;
  color: var(--texte-doux);
  line-height: 1.6;
}

.note-info strong { color: var(--vert); }
.note-info--accent { background: var(--accent-voile); border-color: rgba(206, 0, 64, 0.2); }
.note-info--accent strong { color: var(--accent-profond); }

/* ---- Page introuvable ------------------------------------------------------- */

.erreur { text-align: center; padding: 90px 0 110px; }
.erreur__code { font-family: "Fraunces", Georgia, serif; font-variation-settings: "WONK" 1; font-size: clamp(4rem, 13vw, 8rem); line-height: 0.9; color: var(--accent); }
.erreur p { color: var(--texte-doux); max-width: 46ch; margin: 16px auto 28px; }

/* ---- Grille de filières (page dédiée) ---------------------------------------- */

.filieres--page { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

/* Dans un panneau latéral, la notice n'a pas la largeur pour deux
   colonnes : l'intitulé passe au-dessus de la valeur. Sans cela, un
   texte comme « Bibliothèque — nom de l'école » se coupait mot par mot. */
.panneau .notice__ligne {
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  padding: 10px 0;
}

.panneau .notice dt { font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; }
.panneau .notice dd { font-size: 0.9rem; }

/* Feuille qui ne tient pas dans la hauteur visible : elle renonce à
   l'empilement et défile normalement, plutôt que de laisser la suivante
   recouvrir son contenu. Le choix est fait en JavaScript, qui seul peut
   comparer la hauteur du contenu à celle de la fenêtre. */
.empilement > .feuille--libre {
  position: relative;
  top: auto;
  min-height: 0;
  box-shadow: none;
}

/* État transitoire, le temps d'une mesure : la contrainte de hauteur
   est levée pour connaître la hauteur réelle du contenu. */
.feuille--mesure { min-height: 0 !important; }

/* L'attribut `hidden` du HTML ne masque un élément que si aucune règle
   ne lui impose un `display`. Or .ligne-une est en flex et le rang en
   grid : les lignes filtrées restaient visibles, et un rang s'affichait
   sur une ligne décochée. Cette règle rétablit le comportement attendu
   partout. */
[hidden] { display: none !important; }

/* =====================================================================
   THÈME CLAIR — en-tête et pied de page en blanc

   Le thème est porté par `data-theme` sur <html>, posé avant le premier
   rendu pour éviter que la page ne clignote. Le visiteur bascule par le
   bouton de l'en-tête ; son choix est retenu d'une visite à l'autre.
   Le thème par défaut se règle depuis « Apparence & pages ».
   ===================================================================== */

/* ---- En-tête -------------------------------------------------------- */

html[data-theme="clair"] .entete {
  background: var(--blanc);
  border-bottom: 1px solid var(--bordure);
}

html[data-theme="clair"] .entete--pose { box-shadow: 0 6px 20px -14px rgba(45, 28, 10, 0.35); }

html[data-theme="clair"] .marque { color: var(--texte); }
html[data-theme="clair"] .menu a { color: var(--texte-doux); }
html[data-theme="clair"] .menu a:hover,
html[data-theme="clair"] .menu a[aria-current="page"] { color: var(--texte); }
html[data-theme="clair"] .menu a::after { background: var(--accent); }

/* Le bouton de compte suit les liens du menu : encre douce sur barre
   blanche. Sans cette règle, il resterait en blanc translucide sur
   fond blanc — le défaut symétrique de celui du thème sombre. */
html[data-theme="clair"] .compte {
  color: var(--texte-doux);
  /* `--texte-tenu` et non `--bordure` : celle-ci tombe à 1,32:1 sur la
     barre blanche, le bouton s'y effaçait. 3,24:1 ici. */
  border-color: var(--texte-tenu);
}
html[data-theme="clair"] .compte:hover {
  color: var(--texte);
  border-color: var(--texte-tenu);
}

html[data-theme="clair"] .bouton-recherche {
  background: var(--papier);
  border-color: var(--bordure);
  color: var(--texte-doux);
}

html[data-theme="clair"] .bouton-recherche:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

html[data-theme="clair"] .burger {
  border-color: var(--bordure);
  background: var(--papier);
  color: var(--texte);
}

/* Le filet des deux couleurs reste : il souligne la barre claire aussi
   bien que la barre sombre. */

html[data-theme="clair"] .menu-mobile {
  background: var(--blanc);
  border-top-color: var(--bordure);
}

html[data-theme="clair"] .menu-mobile a {
  color: var(--texte-doux);
  border-bottom-color: var(--bordure);
}

html[data-theme="clair"] .menu-mobile a:hover { color: var(--accent); }

/* Le socle qui remplit les angles arrondis doit suivre la couleur de
   l'en-tête, sans quoi le liseré sombre réapparaîtrait. */
html[data-theme="clair"] .socle { background: var(--blanc); }

/* ---- Pied de page ---------------------------------------------------- */

html[data-theme="clair"] .pied {
  background: var(--papier);
  color: var(--texte-doux);
  border-top: 1px solid var(--bordure);
}

html[data-theme="clair"] .pied .marque { color: var(--texte); }
html[data-theme="clair"] .pied__texte { color: var(--texte-doux); }
html[data-theme="clair"] .pied__colonne h2 { color: var(--texte); }
html[data-theme="clair"] .pied__colonne a { color: var(--texte-doux); }
html[data-theme="clair"] .pied__colonne a:hover { color: var(--accent); }

html[data-theme="clair"] .pied__bas {
  border-top-color: var(--bordure);
  color: var(--texte-tenu);
}


/* ---- Bascule de thème ------------------------------------------------ */

.bascule-theme {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.bascule-theme:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.32);
  color: #fff;
}

html[data-theme="clair"] .bascule-theme {
  border-color: var(--bordure);
  background: var(--papier);
  color: var(--texte-doux);
}

html[data-theme="clair"] .bascule-theme:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Une seule icône à la fois : le soleil annonce le passage au clair,
   la lune le passage au sombre. */
.bascule-theme .icone-soleil { display: none; }
.bascule-theme .icone-lune   { display: block; }
html[data-theme="clair"] .bascule-theme .icone-soleil { display: block; }
html[data-theme="clair"] .bascule-theme .icone-lune   { display: none; }

/* ---- Logo selon le thème ---------------------------------------------- */

.marque__logo { height: 34px; width: auto; }
.marque__logo--clair  { display: none; }
.marque__logo--sombre { display: block; }
html[data-theme="clair"] .marque__logo--clair  { display: block; }
html[data-theme="clair"] .marque__logo--sombre { display: none; }

/* Le nom du site ne disparaît que si un logo le remplace DANS LE THÈME
   AFFICHÉ, et seulement si on a demandé à le masquer. Un seul logo
   déposé laissait sinon la marque vide dans l'autre thème. */
.marque--a-logo-sombre:not(.marque--avec-nom) .marque__nom { display: none; }

html[data-theme="clair"] .marque--a-logo-sombre:not(.marque--a-logo-clair):not(.marque--avec-nom) .marque__nom {
  display: inline;
}
html[data-theme="clair"] .marque--a-logo-clair:not(.marque--avec-nom) .marque__nom { display: none; }
html[data-theme="clair"] .marque:not(.marque--a-logo-clair) .marque__nom { display: inline; }

@media (max-width: 860px) {
  .bascule-theme { width: 42px; height: 42px; border-radius: 11px; }
}

/* =====================================================================
   TÉLÉPHONE — 620 px et moins

   Un écran de téléphone n'est pas un écran d'ordinateur en plus petit.
   Trois principes, appliqués partout :

   1. Les corps de texte descendent d'un cran. Les tailles dessinées
      pour un écran large y paraissent énormes.
   2. Chaque section ne montre que ses premiers éléments. Le lien
      « voir tout » de son en-tête mène au reste : faire défiler douze
      filières pour atteindre la section suivante n'aide personne.
   3. Rien n'est retiré du balisage, seulement masqué. Le moteur de
      recherche et le lecteur d'écran voient la page entière, et un
      élargissement de la fenêtre la rend telle quelle.
   ===================================================================== */

@media (max-width: 620px) {

  /* ---- En-tête ---------------------------------------------------- */

  .marque { font-size: 1rem; gap: 9px; }
  .marque__logo { height: 26px; }
  .entete__barre { min-height: 58px; }
  :root { --entete-h: 58px; }

  /* ---- Bannière ---------------------------------------------------- */

  .banniere__grille { padding-block: 56px 44px; }

  .banniere h1 {
    font-size: 1.62rem;
    line-height: 1.18;
    letter-spacing: -0.015em;
  }

  .banniere__intro {
    font-size: 0.93rem;
    line-height: 1.6;
    /* Quatre lignes suffisent à dire de quoi il s'agit ; la suite
       pousserait le champ de recherche hors de l'écran. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
  }

  .etiquette { font-size: 0.6rem; padding: 6px 12px; }

  /* ---- Titres de section ------------------------------------------- */

  .section { padding: 44px 0; }
  .section h2, .section__tete h2 { font-size: 1.32rem; }
  .surtitre { font-size: 0.62rem; }
  .lien-fleche { font-size: 0.84rem; }

  /* ---- Mémoires à la une : un grand, deux petits ------------------- */

  .une__secondaires .carte:nth-child(n + 3) { display: none; }

  .carte__titre { font-size: 0.95rem; }
  .carte--grande .carte__titre { font-size: 1.04rem; }
  .carte__meta, .carte__pied { font-size: 0.78rem; }
  .carte__corps { padding: 12px 15px 14px; }
  .carte__note { font-size: 0.76rem; padding: 8px 10px; }

  /* ---- Filières : quatre, puis « toutes les filières » ------------- */

  .filieres li:nth-child(n + 5) { display: none; }
  .filiere { padding: 13px 15px; }
  .filiere__nom { font-size: 0.88rem; }
  .filiere__compte { font-size: 0.74rem; }
  .filiere__icone { font-size: 0.68rem; }

  /* Sur la page des filières, on les montre toutes : c'est leur page. */
  .filieres--page li:nth-child(n + 5) { display: flex; }

  /* ---- Dépôts récents : deux ---------------------------------------- */

  .grille-4 .carte--recent:nth-child(n + 3) { display: none; }

  /* ---- Bandeau ressources ------------------------------------------ */

  .bandeau h2 { font-size: 1.32rem; }
  .bandeau p { font-size: 0.9rem; }
  .ressources li:nth-child(n + 3) { display: none; }
  .ressource__titre { font-size: 0.9rem; }
  .ressource__note { font-size: 0.78rem; }
  .guide__titre { font-size: 0.95rem; }
  .guide__note { font-size: 0.78rem; }
  .contact-ligne { flex-direction: column; align-items: flex-start; gap: 14px; }
  .contact-ligne__texte { font-size: 0.88rem; }

  /* ---- Pages intérieures ------------------------------------------- */

  .page-tete__grille { padding-block: 30px 36px; }
  .page-tete h1 { font-size: 1.5rem; line-height: 1.2; }
  .page-tete__intro { font-size: 0.9rem; line-height: 1.55; }
  .fil { font-size: 0.74rem; }

  /* ---- Catalogue, filière, recherche -------------------------------- */

  .memoire-ligne { padding: 14px 15px 14px 20px; gap: 12px; }
  .memoire-ligne__titre { font-size: 0.97rem; line-height: 1.35; }
  .memoire-ligne__meta { font-size: 0.79rem; }
  .memoire-ligne__pied { font-size: 0.74rem; }
  .badge { font-size: 0.64rem; padding: 3px 9px; }
  .resultats-tete { flex-direction: column; align-items: flex-start; gap: 10px; font-size: 0.86rem; }
  .panneau { padding: 16px 17px; }
  .panneau h2 { font-size: 0.95rem; }

  /* ---- Fiche d'un mémoire ------------------------------------------- */

  .prose { font-size: 0.92rem; }
  .prose h2 { font-size: 1.18rem; }
  .prose h3 { font-size: 1rem; }
  .notice { font-size: 0.86rem; }
  .jury { font-size: 0.82rem; }
  .citation__texte { font-size: 0.86rem; }
  .puce { font-size: 0.78rem; padding: 6px 12px; }

  /* ---- Pied de page -------------------------------------------------- */

  .pied { font-size: 0.86rem; }
  .pied__colonne h2 { font-size: 0.72rem; }
}

/* Très petits écrans : un cran de plus. */
@media (max-width: 380px) {
  .banniere h1 { font-size: 1.44rem; }
  .section h2, .section__tete h2 { font-size: 1.2rem; }
  .marque { font-size: 0.92rem; }
  .marque__logo { height: 23px; }
}

/* ---- Panneau de filtres repliable ------------------------------------ */

.filtres > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.filtres > summary::-webkit-details-marker { display: none; }
.filtres > summary h2 { margin: 0; }

/* Le chevron ne paraît que là où le panneau se replie. */
.filtres > summary::after { content: none; }

@media (max-width: 620px) {
  .filtres > summary::after {
    content: "";
    width: 9px; height: 9px;
    border-right: 2px solid var(--texte-doux);
    border-bottom: 2px solid var(--texte-doux);
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--transition);
  }
  .filtres[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
  .filtres > summary { margin: -2px 0; }
}

@media (max-width: 620px) {
  /* Les puces reprennent leur marge une fois le panneau déplié. */
  .filtres[open] > .puces { margin-top: 14px; }
}

/* ---- Barre du lecteur ------------------------------------------------
   Le lecteur de Drive vient d'un autre domaine : on ne peut ni le
   piloter, ni lire son nombre de pages. Ce qu'on affiche ici vient donc
   de la notice, et les deux boutons agissent sur NOTRE cadre, pas sur
   le sien. */

.lecteur-barre {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 0.84rem;
  color: var(--texte-doux);
}

.lecteur-barre__info strong { color: var(--texte); }
.lecteur-barre__aide { margin-right: auto; color: var(--texte-tenu); }

.lecteur-barre .bouton { padding: 7px 14px; font-size: 0.8rem; gap: 7px; }

@media (max-width: 620px) {
  .lecteur-barre__aide { display: none; }
  .lecteur-barre { font-size: 0.78rem; }
}

/* ---- Lecteur agrandi -------------------------------------------------
   Le recadrage qui chasse les bandes sombres masque aussi la barre
   d'outils de Drive — numéro de page, zoom — et sa barre de défilement,
   toutes deux posées au bord de SON cadre, hors du nôtre.

   Agrandi, on renonce au recadrage : le cadre de Drive occupe la
   fenêtre, ses commandes reviennent, et l'on dispose du zoom, du saut
   de page et du défilement rapide.

   Un calque, pas l'API plein écran : celle-ci est refusée dans les
   navigateurs intégrés et ne s'applique qu'à la vidéo sur iPhone. */

.lecteur-cadre.est-agrandi {
  position: fixed;
  inset: 0;
  z-index: 200;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #1F1A17;
}

.lecteur-cadre.est-agrandi .lecteur-drive {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  margin: 0;
  border-radius: 0;
}

/* La page de dessous ne doit pas défiler pendant la lecture. */
body.lecteur-ouvert { overflow: hidden; }

.lecteur-sortie {
  position: absolute;
  top: 14px; right: 16px;
  z-index: 2;
  padding: 9px 18px;
  border: 0;
  border-radius: var(--rayon-plein);
  background: rgba(255, 255, 255, 0.94);
  color: var(--encre);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 20px -10px rgba(0, 0, 0, 0.6);
  display: none;
}

.lecteur-cadre.est-agrandi .lecteur-sortie { display: block; }
.lecteur-sortie:hover { background: #fff; }

/* ---- Chercher une filière -------------------------------------------
 *
 * La section est sur fond cramoisi : le champ y est posé en blanc
 * translucide, et son texte en blanc plein pour rester lisible.
 */

.chercher-filiere {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 560px;
  margin: 0 0 26px;
  padding: 7px 7px 7px 15px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
}
.chercher-filiere svg { color: rgba(255, 255, 255, .72); flex: 0 0 auto; }

.chercher-filiere input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  font-size: .95rem;
  padding: 7px 0;
}
.chercher-filiere input::placeholder { color: rgba(255, 255, 255, .58); }
.chercher-filiere input:focus { outline: none; }
.chercher-filiere:focus-within { border-color: rgba(255, 255, 255, .62); }

/* La croix que Safari et Chrome posent dans un input[type=search] est
   presque invisible sur ce fond : Échap vide le champ, et le bouton
   reste. */
.chercher-filiere input::-webkit-search-cancel-button { filter: invert(1); opacity: .65; }

.chercher-filiere .b {
  flex: 0 0 auto;
  border-radius: 999px;
  background: #fff;
  color: var(--accent-nuit);
  border-color: transparent;
}

.aucun-resultat--clair { color: rgba(255, 255, 255, .82); }

@media (max-width: 560px) {
  .chercher-filiere { flex-wrap: wrap; border-radius: var(--rayon, 12px); }
  .chercher-filiere .b { width: 100%; }
}

/* ---- La grille des filières qui tourne ------------------------------
 *
 * Un fondu court entre deux jeux de filières : assez pour que l'œil
 * comprenne que la grille a changé, assez bref pour ne pas donner
 * l'impression que la page charge. On anime l'opacité seule — déplacer
 * ou redimensionner ferait sauter la mise en page.
 */

.filieres { transition: opacity 240ms ease; }
.filieres--change { opacity: .15; }

@media (prefers-reduced-motion: reduce) {
  .filieres { transition: none; }
  .filieres--change { opacity: 1; }
}

/* =====================================================================
   L'ENTRÉE PAR COURRIEL — mur, compte, favoris, mon espace
   ===================================================================== */

/* Le champ piège à robots.
   Sorti du cadre plutôt qu'en display:none : certains robots ignorent
   les champs masqués, aucun n'ignore ceux qu'il voit. Et il reste hors
   du parcours au clavier, sans quoi une personne au lecteur d'écran
   remplirait le piège. */
.piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Le mur, à la place du lecteur --------------------------------- */

.mur {
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--papier);
  padding: 34px 30px;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 12px;
}
.mur__sceau { color: var(--accent); }
.mur__titre {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.22rem;
  margin: 0;
}
.mur__texte {
  max-width: 46ch;
  color: var(--texte-doux);
  font-size: .92rem;
  line-height: 1.65;
  margin: 0;
}
.mur__forme {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: flex-end;
  margin-top: 8px;
  width: 100%;
  max-width: 460px;
}
.mur__champ {
  display: grid;
  gap: 5px;
  text-align: left;
  flex: 1 1 240px;
}
.mur__champ > span {
  font-size: .76rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texte-doux);
}
.mur__champ input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm);
  background: var(--papier);
  color: var(--texte);
  font: inherit;
  font-size: .92rem;
}
.mur__note {
  font-size: .82rem;
  color: var(--texte-doux);
  margin: 6px 0 0;
}

/* ---- Le compte dans l'en-tête -------------------------------------- */

/* La couleur est posée EXPLICITEMENT, comme pour les liens du menu.
   `color: inherit` prenait celle du corps de page — l'encre sombre —
   et non celle de la barre : sur l'en-tête noir, le bouton s'affichait
   à 1,07:1 de contraste, c'est-à-dire invisible, quand les liens du
   menu sont à 18,4:1. La barre ne donne pas sa couleur à ses enfants,
   chacun la déclare. */
.compte {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px 7px 10px;
  /* 0,38 d'opacité : la bordure atteint 3,57:1 sur la barre noire,
     au-dessus du seuil de 3:1 que demande le contour d'un élément
     d'interface. À 0,22 elle était à 2:1 — on devinait le bouton
     plus qu'on ne le voyait. Mesuré, pas estimé. */
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  font-size: .84rem;
  font-weight: 500;
  white-space: nowrap;
  transition-property: border-color, background-color, color;
  transition-duration: 180ms;
}
.compte:hover { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.compte__initiales {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: .68rem;
  font-weight: 650;
  letter-spacing: .02em;
}
/* Sur un téléphone, la pastille suffit : le nom pousserait le menu. */
@media (max-width: 860px) {
  .compte__nom { display: none; }
  .compte { padding: 7px; }
}

/* ---- L'étoile des favoris ------------------------------------------ */

.favori {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  justify-content: center;
  margin-top: 10px;
  padding: 10px 14px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm);
  background: transparent;
  color: var(--texte-doux);
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.favori:hover { color: var(--texte); border-color: currentColor; }
.favori--pose { color: var(--accent); border-color: var(--accent); }
.favori--pose:hover { color: var(--accent-profond); }
.favori-forme { margin: 0; }

/* ---- La page d'entrée ---------------------------------------------- */

.acces__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 40px;
  align-items: start;
}
@media (max-width: 880px) {
  .acces__grille { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}
.acces__intro {
  color: var(--texte-doux);
  line-height: 1.7;
  margin: 0 0 22px;
}
.acces__forme { display: grid; gap: 18px; max-width: 460px; }
.acces__forme .bouton { justify-self: start; }
.acces__petit {
  font-size: .8rem;
  color: var(--texte-doux);
  line-height: 1.6;
  margin: 0;
}
.acces__aide {
  border-left: 2px solid var(--bordure);
  padding-left: 26px;
}
.acces__aide h2 {
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin: 0 0 10px;
}
.acces__aide h2:not(:first-child) { margin-top: 26px; }
.acces__aide p { font-size: .88rem; line-height: 1.7; margin: 0; }
.acces__etapes {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 10px;
  font-size: .88rem;
  line-height: 1.6;
}
@media (max-width: 880px) {
  .acces__aide { border-left: 0; border-top: 1px solid var(--bordure); padding: 24px 0 0; }
}

/* L'attente, après l'envoi du lien. */
.acces__fait {
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
  max-width: 540px;
  margin: 0 auto;
  padding: 40px 26px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
}
.acces__fait svg { color: var(--accent); }
.acces__fait h2 { margin: 0; font-size: 1.3rem; }
.acces__fait p { margin: 0; line-height: 1.7; }
.acces__renvoi { margin-top: 6px; }

/* La case à cocher du consentement : la case et son texte alignés sur
   la première ligne, et non centrés — un texte de deux lignes ferait
   flotter la case au milieu. */
.champ--case {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: .86rem;
  line-height: 1.55;
  color: var(--texte-doux);
}
.champ--case input { margin-top: 3px; }

/* ---- Mon espace ---------------------------------------------------- */

.espace__compteurs {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 36px;
}
.espace__compteur {
  flex: 1 1 140px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-sm);
  padding: 16px 18px;
  display: grid;
  gap: 2px;
}
.espace__compteur strong {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.6rem;
  line-height: 1;
}
.espace__compteur span { font-size: .8rem; color: var(--texte-doux); }

.espace__titre {
  font-size: 1.15rem;
  margin: 38px 0 16px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--bordure);
}
.espace__titre:first-of-type { margin-top: 0; }

.espace__vide {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
  padding: 38px 24px;
  border: 1px dashed var(--bordure);
  border-radius: var(--rayon);
  color: var(--texte-doux);
}
.espace__vide svg { color: var(--texte-doux); opacity: .7; }
.espace__vide p { margin: 0; max-width: 42ch; line-height: 1.65; }

/* Le bouton de retrait est collé sous sa ligne : il appartient à
   l'élément du dessus, pas à celui du dessous. */
.espace__retrait { margin: -6px 0 18px; }
.espace__retrait .favori { width: auto; margin: 0; padding: 7px 12px; font-size: .78rem; }
.espace__quand {
  margin: -6px 0 18px;
  font-size: .78rem;
  color: var(--texte-doux);
}
.espace__compte {
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 24px 26px;
  display: grid;
  gap: 18px;
  max-width: 620px;
}
.espace__petit { font-size: .84rem; color: var(--texte-doux); line-height: 1.65; margin: 0; }

/* L'annonce brève après un favori posé ou retiré. */
.annonce {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 60;
  margin: 0;
  padding: 11px 20px;
  border-radius: var(--rayon-plein);
  background: var(--encre);
  color: var(--ivoire);
  font-size: .86rem;
  box-shadow: var(--ombre-md);
  /* Chaque propriété séparément : un raccourci `transition` déclaré
     plus bas écraserait le délai. Quatre défauts de ce type sur ce
     projet. */
  transition-property: opacity, transform;
  transition-duration: 220ms;
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
}
.annonce--vue { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .annonce { transition-duration: 1ms; } }

/* Le mur sur les documents d'une page éditoriale. */
.fichiers-mur {
  border: 1px dashed var(--bordure);
  border-radius: var(--rayon);
  padding: 20px 22px;
  background: var(--papier);
}
.fichiers-mur__liste {
  margin: 0 0 14px;
  padding-left: 20px;
  display: grid;
  gap: 7px;
  font-size: .9rem;
}
.fichiers-mur__type {
  font-size: .68rem;
  letter-spacing: .06em;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bordure);
  /* `--texte` et non `--texte-doux` : sur `--bordure`, celui-ci tombe
     à exactement 4,50:1, soit le seuil au millième près pour un texte
     de 0,68 rem. Un seuil atteint de justesse n'est pas une marge : la
     moindre retouche de la palette le ferait passer dessous sans que
     personne le voie. 8,05:1 ici. */
  color: var(--texte);
}
.fichiers-mur p { margin: 0; font-size: .86rem; color: var(--texte-doux); line-height: 1.6; }

/* Une page éditoriale sans colonne latérale centre son texte.
   Sans cela, les 68 caractères de la mesure de lecture se collent à
   gauche et laissent 500 px de vide à droite : la page paraît cassée
   alors qu'elle est seulement mal calée. */
.conteneur > .prose--page { margin-left: auto; margin-right: auto; }

/* =====================================================================
   LE MODE ÉDITION
   =====================================================================
   Posé par le script, qui n'est chargé qu'avec une session
   d'administration. Rien de tout ceci n'atteint un visiteur.

   Le trait est posé en `outline` et non en `border` : une bordure
   pousserait le texte et décalerait la mise en page, et l'on ne
   corrigerait plus la page telle qu'elle est. */

/* Un anneau à DEUX TONS, et LÉGER.
   Les textes modifiables sont aussi bien sur la bannière cramoisie que
   sur l'ivoire des sections. Mesuré, aucune couleur seule ne tient :
   le citron ressort sur les fonds sombres (3,51:1 sur le cramoisi,
   11,38:1 sur l'encre) et s'efface sur les clairs (1,54:1) ; un filet
   d'encre fait l'inverse. Les deux ensemble se voient partout.

   Le premier dessin pesait 2 px de trait et 5 px de halo : sur une page
   dense, cela faisait des gros cadres partout, et l'on ne lisait plus la
   page qu'on venait corriger. Le contraste vient de la COULEUR, pas de
   l'épaisseur : deux filets d'un pixel suffisent, et l'encre à 0,55
   d'opacité donne 4,02:1 sur l'ivoire — au-dessus du seuil de 3:1 d'un
   élément d'interface, et bien plus discret.

   Les DEUX attributs : un élément du corps mis en page porte
   `data-edit-riche`, et un fragment de phrase son enveloppe. Sans eux,
   ils s'éditaient sans que rien ne les désigne. */
.mode-edition [data-edit],
.mode-edition [data-edit-riche] {
  outline: 1px dashed rgba(200, 212, 78, 0.9);
  outline-offset: 1px;
  box-shadow: 0 0 0 1px rgba(22, 20, 15, 0.55);
  border-radius: 2px;
  background: rgba(200, 212, 78, 0.06);
  cursor: text;
  /* Chaque propriété séparément : un raccourci `transition` posé plus
     bas écraserait un délai posé plus haut. */
  transition-property: outline-color, background-color, box-shadow;
  transition-duration: 140ms;
}

.mode-edition [data-edit]:hover,
.mode-edition [data-edit-riche]:hover {
  outline-style: solid;
  background: rgba(200, 212, 78, 0.18);
}

.mode-edition [data-edit]:focus,
.mode-edition [data-edit-riche]:focus {
  outline: 2px solid rgba(200, 212, 78, 1);
  outline-offset: 1px;
  box-shadow: 0 0 0 2px rgba(22, 20, 15, 0.6);
  background: rgba(200, 212, 78, 0.2);
}

/* Modifié mais pas encore enregistré : l'ocre, seule couleur de la
   charte qui dise « en attente » sans dire « erreur ». Elle garde son
   filet d'encre, pour la même raison que le trait courant — seule, elle
   tombe à 1,81:1 sur l'ivoire. */
.mode-edition [data-edit].est-modifie,
.mode-edition [data-edit-riche].est-modifie {
  outline: 2px solid #E8B44A;
  outline-offset: 1px;
  box-shadow: 0 0 0 1px rgba(22, 20, 15, 0.55);
  background: rgba(232, 180, 74, 0.22);
}

/* L'enveloppe d'un fragment de phrase. Elle n'existe qu'en mode
   édition, et doit rester EN LIGNE : un bloc couperait la phrase en
   deux. */
.mode-edition .edit-fragment { display: inline; }

.mode-edition [data-edit-inconnu] {
  outline: 1px dotted var(--accent);
  outline-offset: 2px;
}

/* En mode édition, rien ne doit emporter le clic destiné au texte. */
.mode-edition .lien-couvrant { pointer-events: none; }
.mode-edition .rond,
.mode-edition .signet { pointer-events: none; }