/* ══════════════════════════════════════════════════
   laurent.bellenguez.fr — feuille du site
   ──────────────────────────────────────────────────
   ⚠️ Les couleurs ne sont PAS ici. Elles sont calculées
   par inc/theme.php depuis l'unique accent choisi par
   Laurent, et injectées dans un <style> avant ce
   fichier. Ne jamais coder une couleur en dur : elle
   ne suivrait ni le thème clair, ni son choix.
   ══════════════════════════════════════════════════ */

:root {
  /* ── Mise en page ──
     Rien de coloré ici : la colonne de contenu et la gouttière. --inset sert
     de padding-inline à la nav, au hero, aux sections et au pied de page, si
     bien que tout s'aligne sur la même colonne centrée pendant que les barres
     pleine largeur (nav, fond de section) le restent. */
  --gutter: clamp(24px, 5vw, 72px);
  --page:   1180px;
  --inset:  max(var(--gutter), calc((100% - var(--page)) / 2 + var(--gutter)));

  /* ── Dérivés de confort ──
     Ils se recalculent tout seuls quand l'accent change, puisqu'ils ne font
     que doser les triplets posés par inc/theme.php. */
  --amber-pale: rgba(var(--accent-rgb), .12);
  --dim:        rgba(var(--fg-rgb), calc(.45 * var(--fg-k)));
  --line:       rgba(var(--fg-rgb), calc(.08 * var(--fg-k)));
  --card:       rgba(var(--fg-rgb), calc(.02 * var(--fg-k)));
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--cream);
  font-family: 'Playpen Sans', 'Segoe UI', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
}
@font-face { font-family: 'Sorren'; src: local('Sorren'); }
::selection { background: var(--amber); color: var(--on-accent); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ── Grille de fond (identique au site d'Enzo) ── */
body { --mx: 50%; --my: 40%; }
.hero-grid { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero-grid-base,
.hero-grid-active {
  position: absolute;
  inset: -60px;
  background-image:
    linear-gradient(to right,  rgba(var(--fg-rgb), calc(.085 * var(--fg-k))) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--fg-rgb), calc(.085 * var(--fg-k))) 1px, transparent 1px);
  background-size: 46px 46px;
  animation: gridDrift 9.2s linear infinite;
}
@keyframes gridDrift { to { background-position: 46px 46px; } }
.hero-grid-active {
  background-image:
    linear-gradient(to right,  rgba(var(--accent-rgb), .55) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--accent-rgb), .55) 1px, transparent 1px);
  opacity: 0;
  transition: opacity .4s ease;
  -webkit-mask-image: radial-gradient(circle 305px at var(--mx) var(--my), #000 0%, transparent 68%);
  mask-image: radial-gradient(circle 305px at var(--mx) var(--my), #000 0%, transparent 68%);
}
.hero-grid-glow {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity .45s ease;
  background: radial-gradient(circle 535px at var(--mx) var(--my),
    rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .05) 42%, transparent 70%);
}
body.grid-hot .hero-grid-active,
body.grid-hot .hero-grid-glow { opacity: 1; }

/* ── Nav ── */
nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 32px);
  padding: 20px var(--inset);
  background: rgba(var(--ink-rgb), .85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(var(--fg-rgb), calc(.05 * var(--fg-k)));
}
.nav-logo {
  font-family: 'Sorren', 'Modern Antiqua', Georgia, serif;
  font-size: 1rem;
  letter-spacing: .1em;
  margin-inline-end: auto;
}
.nav-links { display: flex; align-items: center; gap: clamp(16px, 1.9vw, 30px); list-style: none; }
.nav-links a {
  font-size: .65rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--dim);
  transition: color .2s;
}
.nav-links a:hover { color: var(--cream); }

/* Lien sortant : la flèche part vers le haut à droite, et s'en éloigne au survol. */
.nav-ext { display: inline-flex; align-items: center; gap: 6px; }
.nav-ext svg {
  width: 11px; height: 11px; flex-shrink: 0;
  transition: transform .2s ease;
}
.nav-ext:hover svg { transform: translate(2px, -2px); }

/* LinkedIn : pastille carrée, le logo officiel en SVG inline */
.nav-in {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border: 1px solid rgba(var(--fg-rgb), calc(.14 * var(--fg-k)));
  border-radius: 8px;
  color: var(--dim);
  transition: color .2s, border-color .2s, background .2s;
}
.nav-in:hover { color: var(--amber-hot); border-color: rgba(var(--accent-rgb), .45); background: var(--amber-pale); }
.nav-in svg { width: 15px; height: 15px; fill: currentColor; }

.theme-toggle {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border: 1px solid rgba(var(--fg-rgb), calc(.14 * var(--fg-k)));
  border-radius: 100px;
  background: rgba(var(--fg-rgb), calc(.03 * var(--fg-k)));
  cursor: pointer;
  color: var(--dim);
  transition: color .2s, border-color .2s;
}
.theme-toggle:hover { color: var(--amber-hot); border-color: rgba(var(--accent-rgb), .45); }
.theme-toggle svg { width: 14px; height: 14px; }
.theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun  { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }

.burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.burger span { display: block; width: 22px; height: 1.5px; background: var(--cream); transition: transform .3s, opacity .3s; }
.burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
#mob-menu {
  display: none;
  position: fixed; inset: 0; z-index: 99;
  background: rgba(var(--ink-rgb), .97);
  flex-direction: column; align-items: center; justify-content: center; gap: 40px;
}
#mob-menu.open { display: flex; }
#mob-menu a {
  font-family: 'Sorren', 'Modern Antiqua', Georgia, serif;
  font-size: clamp(2.2rem, 9vw, 4.5rem);
  color: var(--cream); opacity: .6;
  transition: opacity .2s, color .2s;
}
#mob-menu a:hover { opacity: 1; color: var(--amber-hot); }
@media (max-width: 820px) {
  .nav-links li:not(.nav-keep) { display: none; }
  .burger { display: flex; }
}

/* ── Hero ── */
#hero {
  min-height: 100svh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 72px);
  padding-block-start: 100px;
  padding-block-end: clamp(60px, 8vw, 100px);
  padding-inline: var(--inset);
}
.hero-text { min-width: 0; max-width: 62ch; }

/* ── Portrait ──
   Un dessin au crayon sur papier, encadré comme les cartes du site. Surtout
   pas d'inversion en thème sombre : ce n'est pas un trait sur fond blanc mais
   un modelé complet, l'inverser en fait un négatif photographique. On garde
   donc le dessin tel quel, à peine adouci sur fond sombre — une feuille
   épinglée sur un mur noir. L'image est carrée, on la laisse carrée. */
.hero-portrait { flex: 0 0 auto; }
.hero-portrait .portrait-img {
  width: clamp(190px, 25vw, 310px);
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--line);
}
[data-theme="dark"] .hero-portrait .portrait-img { filter: brightness(.93); }
.hero-eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: .6rem; letter-spacing: .38em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 18px;
}
.hero-eyebrow::before { content: ''; flex-shrink: 0; width: 28px; height: 1px; background: var(--amber); }
h1.hero-name {
  font-family: 'Sorren', 'Modern Antiqua', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -.005em;
  color: var(--cream);
  margin-bottom: 24px;
}
.hero-sub {
  font-size: clamp(.82rem, 1.2vw, .95rem);
  color: var(--dim);
  line-height: 1.95;
  max-width: 540px;
  margin-bottom: 40px;
}
.hero-sub strong { color: var(--cream); font-weight: 400; }
/* Les deux associations : mises en avant comme l'était le gras, et cliquables. */
.lien-fort {
  color: var(--cream);
  border-bottom: 1px solid rgba(var(--accent-rgb), .45);
  transition: color .2s, border-color .2s;
}
.lien-fort:hover { color: var(--amber-hot); border-color: rgba(var(--accent-rgb), .9); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.btn-outline {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 26px;
  border: 1px solid rgba(var(--fg-rgb), calc(.15 * var(--fg-k)));
  border-radius: 100px;
  font-family: 'Playpen Sans', 'Segoe UI', sans-serif;
  font-size: .65rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--cream);
  transition: border-color .25s, background .25s;
}
.btn-outline:hover { border-color: rgba(var(--accent-rgb), .5); background: var(--amber-pale); }
.btn-outline svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ── Sections ── */
.divider { border: none; border-top: 1px solid rgba(var(--fg-rgb), calc(.06 * var(--fg-k))); }
.pad {
  padding-block: clamp(80px, 10vw, 140px);
  padding-inline: var(--inset);
}
#textes { background: var(--ink-2); }
.section-label {
  display: flex; align-items: center; gap: 14px;
  font-size: .58rem; letter-spacing: .4em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 18px;
}
.section-label::before { content: ''; flex-shrink: 0; width: 28px; height: 1px; background: var(--amber); }
.sec-title {
  font-family: 'Sorren', 'Modern Antiqua', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.05;
  color: var(--cream);
  margin-bottom: 16px;
}
.sec-intro { font-size: .84rem; line-height: 2; color: var(--dim); max-width: 560px; margin-bottom: 56px; }
/* Sans paragraphe d'introduction, le titre collerait à la grille. */
.sec-title + .books,
.sec-title + .texts,
.sec-title + .videos,
.sub-title + .texts { margin-top: 44px; }

/* ── Livres ── */
.books {
  display: grid;
  /* 230px : le seuil sous lequel les quatre livres tiennent sur une ligne
     dans la colonne de contenu, plutôt que 3 + 1 orphelin. */
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}
.book {
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  overflow: hidden;
  transition: border-color .25s, transform .25s;
}
.book:hover { border-color: rgba(var(--accent-rgb), .4); transform: translateY(-4px); }
/* Les trois couvertures n'ont pas le même format. Plutôt que de les forcer
   dans un cadre commun — ce qui laisse des marges vides, ou rogne le titre —
   chaque cadre prend le format de SON image (--r, posé dans le HTML). Rien
   n'est coupé, rien n'est bordé. La couverture est un lien : elle mène au
   même endroit que le bouton « Acheter ». */
.book-cover {
  display: block;
  aspect-ratio: var(--r, 3 / 4);
  overflow: hidden;
}
.book-cover img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform .35s ease;
}
.book:hover .book-cover img { transform: scale(1.035); }
.book-body { display: flex; flex-direction: column; flex: 1; padding: 26px 24px 24px; }
.book-meta {
  font-size: .55rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 12px;
}
.book h3 {
  font-family: 'Sorren', 'Modern Antiqua', Georgia, serif;
  font-weight: 400; font-size: 1.5rem; line-height: 1.15;
  color: var(--cream); margin-bottom: 6px;
}
.book-sub { font-size: .68rem; color: var(--dim); letter-spacing: .04em; margin-bottom: 16px; }
.lien-fin {
  color: var(--amber);
  border-bottom: 1px solid rgba(var(--accent-rgb), .35);
  transition: color .2s, border-color .2s;
}
.lien-fin:hover { color: var(--amber-hot); border-color: rgba(var(--accent-rgb), .8); }
.book p { font-size: .78rem; line-height: 1.95; color: var(--dim); margin-bottom: 24px; }
/* Quatre colonnes = cartes étroites : le libellé du bouton ne doit pas
   passer à la ligne au milieu d'un prix. */
.book .btn-outline {
  margin-top: auto;
  align-self: flex-start;
  padding: 10px 18px;
  letter-spacing: .14em;
  white-space: nowrap;
}

/* Les contributions de Laurent à un ouvrage collectif. */
.contributions {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.contributions a {
  position: relative;
  display: block;
  padding-left: 16px;
  font-size: .72rem;
  line-height: 1.65;
  color: var(--dim);
  transition: color .2s;
}
.contributions a::before {
  content: '';
  position: absolute;
  left: 0; top: .62em;
  width: 7px; height: 1px;
  background: var(--amber);
}
.contributions a:hover { color: var(--cream); }
.fmt {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border: 1px solid rgba(var(--accent-rgb), .35);
  border-radius: 100px;
  font-size: .5rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--amber);
  white-space: nowrap;
  vertical-align: 1px;
}

/* ── Sous-section à l'intérieur d'une section ── */
.sub-title {
  font-family: 'Sorren', 'Modern Antiqua', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.15;
  color: var(--cream);
  margin-top: clamp(64px, 8vw, 104px);
  margin-bottom: 12px;
}
.sub-intro {
  font-size: .82rem;
  line-height: 2;
  color: var(--dim);
  max-width: 560px;
  margin-bottom: 40px;
}
.sub-intro em, .text-card em { font-style: italic; }

/* ── Textes ── */
.texts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.text-card {
  display: flex; flex-direction: column;
  padding: 26px 26px 24px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  transition: border-color .25s, background .25s, transform .25s;
}
.text-card:hover { border-color: rgba(var(--accent-rgb), .4); background: var(--amber-pale); transform: translateY(-3px); }
/* Illustration en tête de carte : marges négatives pour qu'elle touche les
   bords, sans avoir à changer la structure des cartes non illustrées. */
.illu {
  margin: -26px -26px 20px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(var(--fg-rgb), calc(.04 * var(--fg-k)));
}
.illu img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform .35s ease;
}
.text-card:hover .illu img { transform: scale(1.04); }

.tag {
  align-self: flex-start;
  padding: 4px 10px;
  border: 1px solid rgba(var(--accent-rgb), .35);
  border-radius: 100px;
  font-size: .5rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 16px;
}
.text-card h3 {
  font-size: .92rem; font-weight: 400; line-height: 1.5;
  color: var(--cream); margin-bottom: 10px;
}
.text-card p { font-size: .76rem; line-height: 1.9; color: var(--dim); margin-bottom: 20px; }
.text-card sup { font-size: .7em; }
/* Une carte peut proposer deux accès (l'article en ligne ET le PDF) : dans ce
   cas la carte n'est plus un lien, ce sont les deux liens du bas qui le sont. */
.text-actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.text-actions .text-go { margin-top: 0; }
.text-actions .text-go:hover { color: var(--amber-hot); }

.text-go {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .58rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--amber);
}
.text-card:hover .text-go { color: var(--amber-hot); }
.text-go svg { width: 12px; height: 12px; }

/* ── Interventions ── */
.videos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.video {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  overflow: hidden;
  transition: border-color .25s;
}
.video:hover { border-color: rgba(var(--accent-rgb), .4); }

/* 16/9 pour les deux lecteurs, l'iframe comme la balise <video> : sans ça
   l'un et l'autre se calent sur des hauteurs différentes. */
.video-frame {
  aspect-ratio: 16 / 9;
  background: #000;
}
.video-frame iframe,
.video-frame video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-body { padding: 24px 24px 26px; }
.video-meta {
  font-size: .55rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 12px;
}
.video h3 {
  font-family: 'Sorren', 'Modern Antiqua', Georgia, serif;
  font-weight: 400; font-size: 1.35rem; line-height: 1.2;
  color: var(--cream); margin-bottom: 12px;
}
.video p { font-size: .78rem; line-height: 1.95; color: var(--dim); }
.video-source {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px;
  font-size: .58rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--amber);
  transition: color .2s;
}
.video-source:hover { color: var(--amber-hot); }
.video-source svg { width: 11px; height: 11px; transition: transform .2s ease; }
.video-source:hover svg { transform: translate(2px, -2px); }

/* ── Ressources : la forme « liste » ──
   Volontairement PAS des cartes. Les textes plus haut sont des objets qu'on
   choisit — chacun mérite son bloc, son étiquette, son illustration. Une
   ressource, elle, se parcourt : on descend la liste jusqu'à celle qu'on
   cherche. D'où le filet fin plutôt que le cadre, et la colonne unique
   plutôt que la grille : l'œil n'a qu'une seule ligne à suivre.
   Deux lignes par entrée : le titre, qui est le lien, et une phrase. */
/* Titre de groupe de ressources — « Sitographie », « Textes & dossiers ».
   Volontairement plus discret qu'un .sub-title : ce n'est pas une sous-partie
   du site, c'est une étiquette de rangement au-dessus d'une liste. Elle doit
   se lire d'un coup d'œil quand on cherche, sans couper la section en deux. */
.res-groupe {
  display: flex; align-items: center; gap: 14px;
  max-width: 780px;
  margin-top: clamp(32px, 3.4vw, 48px);
  font-family: inherit;
  font-size: .6rem; font-weight: 500;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--amber);
}
.res-groupe::after { content: ''; flex: 1; height: 1px; background: var(--line); }
/* Le premier groupe suit l'en-tête de section : c'est elle qui donne l'air. */
.sec-title + .res-groupe, .sec-intro + .res-groupe { margin-top: 0; }
.res-groupe + .liste-res { margin-top: 14px; }

.liste-res {
  list-style: none;
  max-width: 780px;
  margin-top: 28px;
  padding: 0;
  border-top: 1px solid var(--line);
}
.liste-res li {
  position: relative;
  border-bottom: 1px solid var(--line);
}

.res-titre {
  /* Resserré le 2026-08-24 : 24 px au-dessus du titre + 24 px sous la phrase
     faisaient près de 60 px par entrée. Sur une sitographie de quinze liens,
     la liste ne tenait plus dans un écran et perdait son intérêt : voir d'un
     coup ce qu'elle contient. */
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-top: 15px;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--cream);
  transition: color .2s;
}
.liste-res li:hover .res-titre { color: var(--amber-hot); }

/* La flèche reste COLLÉE au titre plutôt que poussée en bout de ligne : sur une
   entrée au titre court, une flèche à 700 px de là flotte toute seule et
   n'appartient plus à rien. C'est elle qui dit « ça mène ailleurs » — encore
   faut-il qu'on voie de quoi elle parle. La zone cliquable, elle, reste toute
   la largeur de la ligne. */
.res-fleche {
  flex-shrink: 0;
  width: 12px; height: 12px;
  color: var(--amber);
  transition: transform .2s ease;
}
.res-fleche.bas { width: 14px; height: 14px; }
.liste-res li:hover .res-fleche.sortant { transform: translate(2px, -2px); }
.liste-res li:hover .res-fleche.bas     { transform: translateY(2px); }

/* Le mot « Télécharger » n'apparaît qu'au survol, à côté de l'icône : au repos
   la liste doit rester une liste de titres, pas une colonne de boutons. Il est
   toujours dans le texte de la page, donc toujours lu par les lecteurs d'écran
   et par les moteurs — on ne cache que l'encombrement, pas l'information. */
.res-dire {
  flex-shrink: 0;
  font-size: .58rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--amber);
  opacity: 0; transform: translateX(-4px);
  transition: opacity .2s ease, transform .2s ease;
}
.liste-res li:hover .res-dire, .res-titre:focus-visible .res-dire {
  opacity: .85; transform: none;
}
@media (hover: none) { .res-dire { opacity: .7; transform: none; } }

.res-desc {
  padding: 4px 0 15px;
  font-size: .77rem;
  line-height: 1.6;
  color: var(--dim);
  max-width: 62ch;
}

/* Sur écran étroit, la pastille de format passe sous le titre plutôt que de
   comprimer celui-ci sur trois lignes. */
@media (max-width: 560px) {
  .res-titre { flex-wrap: wrap; gap: 8px; }
}

/* ── Section encore vide ── */
.a-venir {
  font-family: 'Sorren', 'Modern Antiqua', Georgia, serif;
  font-size: 1.15rem;
  color: var(--dim);
  padding: clamp(36px, 5vw, 56px) 0;
  border-top: 1px solid var(--line);
  margin-top: 36px;
}

/* ── Contact ── */
#contact { text-align: center; }
#contact .section-label { justify-content: center; }
#contact .sec-intro { margin-inline: auto; margin-bottom: 40px; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

footer {
  padding: 34px var(--inset);
  border-top: 1px solid rgba(var(--fg-rgb), calc(.06 * var(--fg-k)));
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between;
  font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim);
}
footer a:hover { color: var(--amber-hot); }

@media (max-width: 820px) {
  #hero {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: clamp(18px, 5vw, 36px);
  }
  .hero-portrait { order: -1; align-self: center; }
  .hero-portrait .portrait-img { width: clamp(150px, 42vw, 230px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-grid-base, .hero-grid-active { animation: none; }
  .book, .text-card { transition: none; }
}


/* ── Galeries repliées ──
   Au-delà du seuil réglé dans le panneau, les éléments sont présents dans la
   page (donc lus par les moteurs) mais masqués jusqu'au clic. */
.est-replie { display: none; }
.voir-tout {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 36px; padding: 11px 26px;
  border: 1px solid rgba(var(--fg-rgb), calc(.15 * var(--fg-k)));
  border-radius: 100px; background: none; cursor: pointer;
  font-family: 'Playpen Sans', 'Segoe UI', sans-serif;
  font-size: .65rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cream);
  transition: border-color .25s, background .25s;
}
.voir-tout:hover { border-color: rgba(var(--accent-rgb), .5); background: var(--amber-pale); }
.voir-tout svg { width: 13px; height: 13px; transition: transform .3s ease; }
.voir-tout.ouvert svg { transform: rotate(180deg); }

/* ── Pied de page : l'accès à l'espace d'administration ──
   Discret au point de ne pas attirer l'œil d'un visiteur, mais toujours au
   même endroit pour que Laurent n'ait jamais à taper une adresse. */
.pied-liens { display: inline-flex; align-items: center; gap: 22px; }
.pied-admin { color: rgba(var(--fg-rgb), calc(.3 * var(--fg-k))); transition: color .2s; }
.pied-admin:hover { color: var(--amber-hot); }