/* =========================================================================
   PLEINS ET DÉLIÉS — design system « cahier d’écolier », préfixe pd-
   Vocabulaire : la marge (bord du cahier), le cartouche (en-tête de cahier),
   le pupitre (navigation), l’ardoise (couverture double page), le fil
   (chemin de lecture), le feuillet (rubrique numérotée, quadrillé quand il
   porte le flux), l’étiquette (surtitre en capitales), le sous-main (grille
   asymétrique de blocs), la fiche (carte tenue par le filet de marge), le
   cadre (cadrage photo aux ratios imposés), le cartel (légende de la fiche),
   le buvard et la trace (flux daté), le jour (date), l’attaque (ouverture
   d’article) et ses mentions, le frontispice (image d’ouverture), la colonne
   (lecture, 34 rem) et le rail (renvois, à droite), le tableau, l’encrier
   (bloc encre), la note, la vérification, l’ensuite (à lire ensuite),
   l’interligne (séparateur CSS pur), le répertoire et ses entrées, les
   repères (grille de dates), le pied.
   Palette : papier feuille, buvard rosé, encre violette des cahiers, marge
   rouge. Le bleu de réglure (--seyes) et la marge rouge (--marge-rouge) ne
   portent jamais de texte : ce sont des filets, pas des couleurs de plume.
   Deux piles de polices, pas trois : Perpetua pour les titres, Candara pour
   la lecture. Rayons nuls partout, aucune ombre portée, aucun dégradé
   décoratif : la réglure Seyès est le seul ornement, tracée en dégradé
   répété, et le filet de marge rouge tient chaque fiche. Mode sombre
   automatique. Aucune requête externe.
   ========================================================================= */

:root {
  color-scheme: light dark;

  /* ---- 1. COULEURS · le cahier et l’encre ---------------------------------- */
  --feuille:          #f9f4f1;  /* papier de toutes les pages                 */
  --buvard:           #ecdcd8;  /* réserves, flux, pied                       */
  --fiche:            #fffcfa;  /* papier très clair des encadrés             */
  --plume:            #241f33;  /* encre du texte                             */
  --plume-douce:      #5d5570;  /* mentions, légendes, sous-titres            */
  --violette:         #4b3f96;  /* encre violette des cahiers : liens, repères */
  --violette-appuyee: #372c7a;  /* appui, survol                              */
  --violette-claire:  #b8a9f2;  /* violette sur fonds sombres                 */
  --seyes:            #b7c9e6;  /* réglure : filet, jamais texte              */
  --marge-rouge:      #a93b31;  /* filet de marge : filet, jamais texte       */
  --trait:            #e0d3ce;  /* filets fins sur papier                     */

  /* Mode sombre : la table d’écriture du soir. */
  --nuit-feuille: #1b1826;
  --nuit-buvard:  #241f33;
  --nuit-fiche:   #2c2540;
  --nuit-plume:   #eae5f2;
  --nuit-douce:   #a79fb8;
  --nuit-trait:   #3a3348;
  --nuit-seyes:   #3b4a68;
  --nuit-marge:   #c4564a;

  /* ---- 2. TIPO · deux piles seulement ------------------------------------- */
  --police-titre: Perpetua, Marion, "Nimbus Roman", "Times New Roman", serif;
  --police-texte: Candara, Skia, "Gill Sans", "Trebuchet MS", sans-serif;

  --titre-graisse: 700;
  --titre-interlettrage: 0.005em;
  --caps-interlettrage: 0.16em;

  --corps-taille: clamp(1.05rem, 1rem + 0.28vw, 1.18rem);
  --corps-interligne: 1.62;
  --echelle-h1: clamp(1.85rem, 1.25rem + 2.2vw, 2.9rem);
  --echelle-h2: clamp(1.3rem, 1.12rem + 0.8vw, 1.72rem);
  --echelle-h3: clamp(1.08rem, 1rem + 0.35vw, 1.28rem);
  --echelle-h4: 1.02rem;

  /* ---- 3. RYTHME --------------------------------------------------------- */
  --mesure:        34rem;      /* colonne de lecture                         */
  --mesure-chapo:  30rem;      /* chapô de l’attaque                         */
  --rail:          17rem;      /* renvois, à droite                          */
  --mesure-large:  1360px;
  --marge-page: clamp(1.1rem, 4vw, 4rem);
  --gouttiere:   clamp(0.85rem, 2.2vw, 2rem);
  --souffle:     clamp(2.2rem, 5.5vw, 5rem);
  --decal:       clamp(1.1rem, 3vw, 3rem);

  /* ---- 4. PARTICULARITÉS ------------------------------------------------- */
  --vitesse: 140ms ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --feuille:     var(--nuit-feuille);
    --buvard:      var(--nuit-buvard);
    --fiche:       var(--nuit-fiche);
    --plume:       var(--nuit-plume);
    --plume-douce: var(--nuit-douce);
    --violette:    var(--violette-claire);
    --violette-appuyee: #d3c8fa;
    --trait:       var(--nuit-trait);
    --seyes:       var(--nuit-seyes);
    --marge-rouge: var(--nuit-marge);
  }
}

/* =========================================================================
   BASE
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--feuille);
  color: var(--plume);
  font-family: var(--police-texte);
  font-size: var(--corps-taille);
  line-height: var(--corps-interligne);
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  font-weight: var(--titre-graisse);
  letter-spacing: var(--titre-interlettrage);
  line-height: 1.14;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--echelle-h1); }
h2 { font-size: var(--echelle-h2); }
h3 { font-size: var(--echelle-h3); }
h4 { font-size: var(--echelle-h4); }

p, ul, ol, dl, figure { margin: 0 0 1.05em; }
a {
  color: var(--violette);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--vitesse);
}
a:hover { color: var(--violette-appuyee); }
:focus-visible {
  outline: 2px solid var(--violette);
  outline-offset: 3px;
}
hr { border: 0; border-top: 1px solid var(--trait); margin: var(--souffle) 0; }

::selection { background: var(--violette); color: var(--fiche); }

/* Chiffres, dates et mesures en tabulaire : un cahier s’aligne. */
.pd-tableau, .pd-encrier, .pd-note, .pd-verification, .pd-jour, .pd-mentions,
.pd-reperes, .pd-feuillet__ordinal, .pd-ardoise__kicker, .pd-entree__vue,
.pd-fiche__indication {
  font-variant-numeric: tabular-nums;
}

/* =========================================================================
   ÉCHAFAUDAGE : saut, marge
   ========================================================================= */

.pd-saut {
  position: absolute; left: -9999px; top: 0;
  background: var(--plume); color: var(--feuille);
  padding: 0.7rem 1.15rem; z-index: 60;
}
.pd-saut:focus { left: 0.6rem; top: 0.6rem; }

.pd-marge {
  width: 100%;
  max-width: var(--mesure-large);
  margin-inline: auto;
  padding-inline: var(--marge-page);
}

/* =========================================================================
   LE CARTOUCHE · en-tête de cahier : wordmark, filière, pupitre
   ========================================================================= */

.pd-cartouche {
  background: var(--fiche);
  border-bottom: 2px solid var(--plume);
}
.pd-cartouche__rang {
  display: flex; flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: clamp(0.75rem, 1.8vw, 1.2rem);
}
.pd-cartouche__nom {
  font-family: var(--police-titre);
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem);
  font-weight: var(--titre-graisse);
  color: var(--plume);
  text-decoration: none;
  line-height: 1;
  letter-spacing: 0.01em;
}
.pd-cartouche__nom:hover { color: var(--violette-appuyee); }
/* Le nom du magazine en capitales interlettrées : les pleins restent en
   graisse 700, les déliés passent en 400. Le mot montre ce qu'il désigne. */
.pd-cartouche__nom { text-transform: uppercase; letter-spacing: 0.045em; }
.pd-cartouche__nom b { font-weight: 400; }
.pd-cartouche__nom span {
  display: block;
  font-family: var(--police-texte);
  font-weight: 400;
  font-size: 0.66rem;
  letter-spacing: var(--caps-interlettrage);
  text-transform: uppercase;
  color: var(--plume-douce);
  margin-top: 0.4rem;
}
.pd-pupitre ul {
  display: flex; flex-wrap: wrap;
  gap: 0.35rem 1.2rem;
  list-style: none; margin: 0; padding: 0;
}
.pd-pupitre a {
  color: var(--plume-douce);
  text-decoration: none;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  padding-block: 0.28rem;
  border-bottom: 2px solid transparent;
  transition: color var(--vitesse), border-color var(--vitesse);
}
.pd-pupitre a:hover { color: var(--violette-appuyee); border-bottom-color: var(--marge-rouge); }

/* =========================================================================
   LE FIL · chemin de lecture
   ========================================================================= */

.pd-fil { padding-block: clamp(0.8rem, 1.8vw, 1.25rem); }
.pd-fil ol {
  display: flex; flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  list-style: none; margin: 0; padding: 0;
  font-size: 0.82rem;
  color: var(--plume-douce);
}
.pd-fil li + li::before {
  content: "/";
  margin-right: 0.55rem;
  color: var(--marge-rouge);
}
.pd-fil a { color: var(--plume-douce); }
.pd-fil a:hover { color: var(--violette-appuyee); }
.pd-fil [aria-current="page"] { color: var(--plume); font-weight: 600; }

/* =========================================================================
   L’ARDOISE · couverture double page : une moitié photo à fond perdu, une
   moitié papier réglé Seyès avec sa marge rouge. Aucun voile, aucune ombre :
   les deux pages se lisent côte à côte comme un cahier ouvert. Bande courte,
   pour que la grille des feuillets commence sous les 700 px de hauteur.
   ========================================================================= */

.pd-ardoise {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: clamp(13rem, 30vh, 21rem);
  border-bottom: 1px solid var(--trait);
}
/* La page photo : l'image se positionne dans sa moitié, pour que la hauteur
   de la double page vienne du papier et jamais des dimensions intrinsèques
   du fichier. */
.pd-ardoise__page {
  position: relative;
  min-height: inherit;
}
.pd-ardoise__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* La page de droite : papier, réglure Seyès tracée en dégradé répété,
   marge rouge verticale à 3 rem du bord. */
.pd-ardoise__papier {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.4rem) clamp(1.6rem, 4vw, 3.5rem) clamp(1.4rem, 2.6vw, 2rem) calc(3rem + clamp(1.6rem, 4vw, 3.5rem));
  background:
    linear-gradient(to right, transparent 0 2.4rem, var(--marge-rouge) 2.4rem calc(2.4rem + 2px), transparent calc(2.4rem + 2px)),
    repeating-linear-gradient(to bottom,
      transparent 0 0.55em,
      var(--seyes) 0.55em calc(0.55em + 1px),
      transparent calc(0.55em + 1px) 2.2em,
      var(--seyes) 2.2em calc(2.2em + 1px),
      transparent calc(2.2em + 1px) 2.75em);
  background-color: var(--feuille);
}
.pd-ardoise__kicker {
  font-size: 0.76rem;
  letter-spacing: var(--caps-interlettrage);
  text-transform: uppercase;
  color: var(--marge-rouge);
  margin: 0 0 1rem;
}
.pd-ardoise__papier h1 {
  max-width: 20ch;
  font-size: clamp(1.8rem, 1.3rem + 1.9vw, 2.5rem);
}
.pd-ardoise__papier > p:not([class]) {
  font-size: clamp(1.02rem, 0.96rem + 0.35vw, 1.18rem);
  line-height: 1.55;
  max-width: var(--mesure-chapo);
  color: var(--plume);
  margin: 1rem 0 0;
}
/* Ligne d’édition : capitales posées sur la réglure, séparées par un point. */
.pd-ardoise__edition {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.5rem 1rem;
  margin-top: 1.6rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--trait);
  font-size: 0.74rem;
  letter-spacing: var(--caps-interlettrage);
  text-transform: uppercase;
  color: var(--plume-douce);
}
.pd-ardoise__edition em { font-style: normal; color: var(--marge-rouge); }

/* =========================================================================
   LES FEUILLETS · rubriques numérotées, le flux sur feuille quadrillée
   ========================================================================= */

.pd-feuillet { padding-block: clamp(1.8rem, 4.4vw, 3.4rem); }
/* Feuillet quadrillé : réglure fine et discrète, buvard en fond. */
.pd-feuillet--quadrille {
  background:
    repeating-linear-gradient(to bottom,
      transparent 0 1.35em,
      var(--seyes) 1.35em calc(1.35em + 1px));
  background-color: var(--buvard);
}
.pd-feuillet__tete {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 2rem;
  border-bottom: 1px solid var(--plume);
  padding-bottom: 0.55rem;
  margin-bottom: clamp(1.2rem, 2.6vw, 1.9rem);
}
.pd-feuillet__ordinal {
  font-family: var(--police-titre);
  font-weight: var(--titre-graisse);
  font-size: 0.92rem;
  letter-spacing: 0.3em;
  color: var(--marge-rouge);
  margin-right: 0.7rem;
}
.pd-feuillet__titre { font-size: var(--echelle-h2); }
.pd-feuillet__note {
  margin: 0;
  color: var(--plume-douce);
  font-size: 0.92rem;
  max-width: 44ch;
}

/* L’interligne : séparateur CSS pur entre les grands feuillets. Deux filets
   de réglure et un trait de marge rouge, comme entre deux lignes d’un
   cahier. Aucun SVG, aucun angle arrondi. */
.pd-interligne {
  display: flex; align-items: center; justify-content: center;
  gap: 0.9rem;
  padding-block: clamp(0.5rem, 1.4vw, 1rem);
  color: var(--seyes);
}
.pd-interligne::before, .pd-interligne::after {
  content: "";
  flex: 0 1 12rem;
  max-width: 12rem;
  border-top: 1px solid currentColor;
}
.pd-interligne span {
  flex: 0 0 1.6rem;
  border-top: 2px solid var(--marge-rouge);
}

/* L’étiquette : surtitre en capitales, encre violette. */
.pd-etiquette {
  font-size: 0.72rem;
  letter-spacing: var(--caps-interlettrage);
  text-transform: uppercase;
  color: var(--violette);
  margin: 0 0 0.55rem;
}

/* =========================================================================
   LE SOUS-MAIN · grille asymétrique de fiches, tenues par le filet de marge
   ========================================================================= */

.pd-sous-main {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--gouttiere);
  list-style: none; margin: 0; padding: 0;
}
.pd-fiche { margin: 0; }
.pd-fiche--plein   { grid-column: span 6; }
.pd-fiche--grand   { grid-column: span 4; }
.pd-fiche--moitie  { grid-column: span 3; }
.pd-fiche--petit   { grid-column: span 2; }
.pd-fiche--decal   { transform: translateY(var(--decal)); }
.pd-fiche--decal2  { transform: translateY(calc(var(--decal) * 0.5)); }
.pd-sous-main--dense { padding-bottom: var(--decal); }

.pd-fiche__cadre {
  overflow: hidden;
  border: 1px solid var(--trait);
  background: var(--buvard);
}
.pd-fiche__cadre--pano     { aspect-ratio: 21 / 9; }
.pd-fiche__cadre--paysage  { aspect-ratio: 4 / 3; }
.pd-fiche__cadre--carre    { aspect-ratio: 1 / 1; }
.pd-fiche__cadre--portrait { aspect-ratio: 3 / 4; }
.pd-fiche__vue {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
}
.pd-fiche:hover .pd-fiche__vue,
.pd-fiche:focus-within .pd-fiche__vue { transform: scale(1.015); }

/* Le cartel : la marge rouge du cahier tient la fiche, à gauche. */
.pd-fiche__cartel {
  padding: 0.7rem 0 0 calc(0.75rem + 2px);
  border-left: 2px solid var(--marge-rouge);
  margin-left: 0.75rem;
}
.pd-fiche__titre { margin: 0 0 0.3rem; }
.pd-fiche__lien {
  color: var(--plume);
  text-decoration: none;
  border-bottom: 2px solid var(--seyes);
  transition: border-color var(--vitesse), color var(--vitesse);
}
.pd-fiche__lien:hover { color: var(--violette-appuyee); border-bottom-color: var(--marge-rouge); }
.pd-fiche__note {
  margin: 0;
  color: var(--plume-douce);
  font-size: 0.92rem;
  line-height: 1.5;
}
.pd-fiche__indication {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.68rem;
  letter-spacing: var(--caps-interlettrage);
  text-transform: uppercase;
  color: var(--violette);
  border: 1px solid currentColor;
  padding: 0.14rem 0.5rem;
}

/* =========================================================================
   LE BUVARD · le flux daté de la home
   ========================================================================= */

.pd-buvard {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: calc(var(--gouttiere) * 1.5);
}
.pd-trace {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 1.05rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--trait);
  margin: 0;
}
.pd-buvard .pd-trace:nth-last-child(-n+2) { border-bottom: 0; }
.pd-trace__vue {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--trait);
}
.pd-jour {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  letter-spacing: var(--caps-interlettrage);
  text-transform: uppercase;
  color: var(--violette);
}
.pd-trace h3 { margin: 0 0 0.3rem; }
.pd-trace h3 a { color: var(--plume); text-decoration: none; }
.pd-trace h3 a:hover { color: var(--violette-appuyee); text-decoration: underline; }
.pd-trace p:not([class]) { margin: 0; color: var(--plume-douce); font-size: 0.93rem; }

/* =========================================================================
   L’ATTAQUE · ouverture d’un texte : étiquette, titre, chapô, mentions
   ========================================================================= */

.pd-attaque {
  padding-block: clamp(0.4rem, 1.5vw, 1.1rem) clamp(1.3rem, 3vw, 2rem);
  max-width: 60rem;
}
.pd-attaque__sous-titre {
  font-size: clamp(1.05rem, 0.98rem + 0.45vw, 1.26rem);
  line-height: 1.55;
  color: var(--plume-douce);
  max-width: var(--mesure-chapo);
  margin: 0.9rem 0 0;
}
.pd-mentions {
  display: flex; flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  list-style: none; margin: 1rem 0 0; padding: 0;
  font-size: 0.8rem;
  color: var(--plume-douce);
  border-top: 1px solid var(--trait);
  padding-top: 0.75rem;
}
.pd-mentions a { color: var(--plume-douce); }
.pd-mentions a:hover { color: var(--violette-appuyee); }

.pd-frontispice { margin: 0; }
.pd-frontispice__vue {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--trait);
}

/* =========================================================================
   LA COLONNE ET LE RAIL · lecture à 34 rem, renvois à droite au delà de
   1080 px. Sur l’écran étroit le rail repasse sous la colonne.
   ========================================================================= */

.pd-tableau-lecture {
  display: grid;
  grid-template-columns: minmax(0, var(--mesure)) var(--rail);
  gap: calc(var(--gouttiere) * 2);
  align-items: start;
  justify-content: center;
}
.pd-colonne {
  max-width: var(--mesure);
  padding-block: clamp(1.5rem, 3.4vw, 2.4rem) clamp(1.9rem, 4.4vw, 3.1rem);
}
.pd-colonne > * + * { margin-top: 0.85em; }
.pd-colonne h2 {
  margin-top: 1.7em;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--seyes);
}
.pd-colonne h3 { margin-top: 1.3em; }
.pd-colonne ul, .pd-colonne ol { padding-left: 1.4rem; }
.pd-colonne li + li { margin-top: 0.45em; }
.pd-colonne strong { color: var(--violette-appuyee); }

/* La note : rappel de méthode sur papier très clair, réglure discrète. */
.pd-note {
  background: var(--fiche);
  border: 1px solid var(--trait);
  border-left: 3px solid var(--violette);
  padding: 1rem 1.2rem;
  font-size: 0.95em;
}
.pd-note p { margin: 0; }

/* La vérification : liste de contrôle aux carrés de réglure. */
.pd-verification, .pd-colonne ul.pd-verification {
  background: var(--fiche);
  border: 1px solid var(--trait);
  padding: 1rem 1.25rem 1rem 2rem;
  font-size: 0.97em;
}
.pd-verification li::marker { color: var(--marge-rouge); }

/* L’encrier : le bloc encre, sombre sur papier, capitales violette claire. */
.pd-encrier {
  margin: 1.6em 0;
  background: var(--plume);
  color: var(--nuit-plume);
  padding: 1.15rem 1.3rem 1.2rem;
  border: 1px solid var(--plume);
}
.pd-encrier h2, .pd-encrier h3, .pd-encrier h4 {
  font-family: var(--police-texte);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: var(--caps-interlettrage);
  text-transform: uppercase;
  color: var(--violette-claire);
  margin: 0 0 0.7rem;
  border: 0;
  padding: 0;
}
.pd-encrier p, .pd-encrier ul { margin: 0; font-size: 0.95rem; color: var(--nuit-plume); }
.pd-encrier strong { color: #fff; }

/* Le tableau : capitales en tête, zébrures de papier très clair. */
.pd-tableau {
  overflow-x: auto;
  margin: 1.5em 0;
  border: 1px solid var(--trait);
}
.pd-tableau table {
  border-collapse: collapse;
  width: 100%;
  min-width: 32rem;
  font-size: 0.92em;
}
.pd-tableau th, .pd-tableau td {
  text-align: left;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--trait);
  vertical-align: top;
}
.pd-tableau caption {
  caption-side: top;
  text-align: left;
  padding: 0.6rem 0.85rem;
  font-size: 0.74rem;
  letter-spacing: var(--caps-interlettrage);
  text-transform: uppercase;
  color: var(--violette);
  border-bottom: 1px solid var(--trait);
}
.pd-tableau thead th {
  background: var(--plume);
  color: var(--nuit-plume);
  font-size: 0.74rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
}
.pd-tableau tbody tr:last-child td { border-bottom: 0; }
.pd-tableau tbody tr:nth-child(even) { background: var(--fiche); }

/* À lire ensuite, et le rail qui le porte. */
.pd-rail { padding-top: clamp(1.5rem, 3.4vw, 2.4rem); }
.pd-ensuite {
  border-top: 2px solid var(--plume);
  padding-top: 1rem;
}
.pd-ensuite h2 {
  font-size: 1.12rem;
  margin: 0 0 0.6rem;
}
.pd-ensuite ul { list-style: none; margin: 0; padding: 0; }
.pd-ensuite li { padding: 0.35rem 0; font-size: 0.94rem; }
.pd-ensuite li::before {
  content: "·";
  color: var(--marge-rouge);
  margin-right: 0.55rem;
  font-weight: 700;
}
.pd-rail .pd-note { margin-top: 1.4rem; font-size: 0.9em; }

/* =========================================================================
   LE RÉPERTOIRE · la ressource signature : familles et entrées
   ========================================================================= */

.pd-repertoire { display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); }
.pd-repertoire__famille { margin: 0; }
.pd-repertoire__famille > h3 {
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--plume);
  margin-bottom: 0.4rem;
}
.pd-repertoire__famille > p {
  color: var(--plume-douce);
  font-size: 0.9rem;
  max-width: 52ch;
}
.pd-entrees {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: var(--gouttiere);
  list-style: none; margin: 0.6rem 0 0; padding: 0;
}
.pd-entree {
  background: var(--fiche);
  border: 1px solid var(--trait);
  border-left: 2px solid var(--marge-rouge);
  padding: 0.85rem 1rem 0.9rem calc(0.9rem + 2px);
  margin: 0;
}
.pd-entree h4 {
  font-family: var(--police-titre);
  font-size: 1.08rem;
  margin: 0 0 0.35rem;
}
.pd-entree h4 a { color: var(--plume); text-decoration: none; }
.pd-entree h4 a:hover { color: var(--violette-appuyee); text-decoration: underline; }
.pd-entree dt {
  font-size: 0.68rem;
  letter-spacing: var(--caps-interlettrage);
  text-transform: uppercase;
  color: var(--violette);
  margin-top: 0.55rem;
}
.pd-entree dd { margin: 0.1rem 0 0; font-size: 0.9rem; line-height: 1.5; }
.pd-entree__vue {
  margin-top: 0.65rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--plume-douce);
}

/* Les repères : la grille de dates du carnet. */
.pd-reperes { display: grid; gap: 0.5rem; }

/* =========================================================================
   LE PIED · dernière page du cahier, papier buvard régluré
   ========================================================================= */

.pd-pied {
  margin-top: var(--souffle);
  background:
    repeating-linear-gradient(to bottom,
      transparent 0 1.35em,
      var(--seyes) 1.35em calc(1.35em + 1px));
  background-color: var(--buvard);
  border-top: 2px solid var(--plume);
  color: var(--plume);
}
.pd-pied__rang {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--gouttiere) * 1.5);
  padding-block: clamp(1.9rem, 4.4vw, 3rem);
}
.pd-pied h2 {
  font-family: var(--police-texte);
  font-weight: 600;
  font-size: 0.76rem;
  letter-spacing: var(--caps-interlettrage);
  text-transform: uppercase;
  color: var(--marge-rouge);
  margin-bottom: 0.7rem;
}
.pd-pied ul { list-style: none; margin: 0; padding: 0; }
.pd-pied li { padding-block: 0.22rem; }
.pd-pied a { color: var(--plume-douce); text-decoration: none; transition: color var(--vitesse); }
.pd-pied a:hover { color: var(--violette-appuyee); text-decoration: underline; }
.pd-pied__bas {
  border-top: 1px solid var(--trait);
  padding-block: 1.05rem;
  font-size: 0.78rem;
  color: var(--plume-douce);
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 1080px) {
  .pd-fiche--grand { grid-column: span 6; }
  .pd-fiche--moitie { grid-column: span 3; }
  .pd-fiche--petit { grid-column: span 3; }
  .pd-fiche--decal, .pd-fiche--decal2 { transform: none; }
  .pd-sous-main--dense { padding-bottom: 0; }
  .pd-tableau-lecture { grid-template-columns: minmax(0, 1fr); }
  .pd-rail { max-width: var(--mesure); }
}

@media (max-width: 900px) {
  /* L’ardoise se referme : la photo passe au dessus du papier. */
  .pd-ardoise { grid-template-columns: 1fr; }
  .pd-ardoise__page { min-height: 14rem; }
  .pd-ardoise__papier {
    background:
      linear-gradient(to right, transparent 0 2.4rem, var(--marge-rouge) 2.4rem calc(2.4rem + 2px), transparent calc(2.4rem + 2px)),
      repeating-linear-gradient(to bottom,
        transparent 0 0.55em,
        var(--seyes) 0.55em calc(0.55em + 1px),
        transparent calc(0.55em + 1px) 2.2em,
        var(--seyes) 2.2em calc(2.2em + 1px),
        transparent calc(2.2em + 1px) 2.75em);
    background-color: var(--feuille);
  }
}

@media (max-width: 760px) {
  .pd-sous-main { grid-template-columns: repeat(2, 1fr); }
  .pd-fiche--grand, .pd-fiche--moitie, .pd-fiche--petit { grid-column: span 2; }
  .pd-buvard { grid-template-columns: 1fr; }
  .pd-trace { grid-template-columns: 118px 1fr; }
  .pd-pied__rang { grid-template-columns: 1fr; }
  .pd-feuillet__tete { flex-direction: column; gap: 0.3rem; }
}

@media (max-width: 480px) {
  .pd-trace { grid-template-columns: 1fr; }
  .pd-pupitre ul { gap: 0.35rem 0.95rem; }
}

/* Courtoisie du mouvement. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .pd-fiche:hover .pd-fiche__vue { transform: none; }
}

/* Impression : le cahier sur papier blanc, sans réglures. */
@media print {
  .pd-cartouche, .pd-pied, .pd-saut, .pd-fil, .pd-interligne { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .pd-ardoise__papier, .pd-feuillet--quadrille, .pd-pied { background: none; }
  .pd-colonne, .pd-tableau-lecture { max-width: none; grid-template-columns: 1fr; }
  .pd-encrier { background: #fff; color: #000; border: 1pt solid #000; }
}