/* Lotfi Benyelles — site
   Visual language pulled directly from the reference: bold geometric grotesque,
   generous whitespace, lavender pill on the active nav. We use "Geist" for the
   body & a heavier weight for the wordmark, both via Google Fonts. */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&display=swap");

:root {
  --ink: #0f1115;
  --ink-2: #2a2d33;
  --ink-3: #5a5e66;
  --ink-4: #8a8e96;
  --rule: #ececef;          /* cool neutral hairline */
  --rule-2: #d6d6db;        /* cool neutral border */
  --paper: #ffffff;         /* page background — pur */
  --paper-2: #f4f4f6;       /* placeholders — gris très clair, neutre froid */
  --accent: #f3d6f6;        /* lavande (accent actif) */
  --accent-2: #eef0f4;      /* gris froid neutre (accent secondaire) */
  --terracotta: #9c4a26;    /* brun terracotta — couleur des liens « Lire » (raccord page article crème) */
  --terracotta-wash: #f6ece1; /* crème terracotta clair pour hovers */
  --max: 1320px;
  --pad-x: clamp(28px, 5vw, 88px);
  --nav-h: 88px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); }
body {
  font-family: "Geist", "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "ss02";
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; }

/* Layout shell */
.shell { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad-x); }

/* Top nav */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: var(--paper);
  padding-top: 32px; padding-bottom: 24px;
}
.nav-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.nav-group { display: flex; align-items: center; gap: 28px; }
.nav-link {
  font-weight: 500;
  font-size: 17px;
  color: var(--ink);
  padding: 4px 10px;
  border-radius: 6px;
  transition: background 140ms ease, color 140ms ease;
  cursor: pointer;
  background: transparent;
  border: 0;
  font-family: inherit;
}
.nav-link:hover { background: var(--paper-2); }
.nav-link.is-active { background: var(--accent); color: var(--ink); }
.nav-sep { width: 1px; height: 18px; background: var(--rule); }

/* Hamburger — masqué par défaut (desktop). Visible sous 900px. */
.nav-burger {
  display: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: -10px -8px -10px 0;
  border-radius: 6px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background 140ms ease;
}
.nav-burger:hover { background: var(--paper-2); }
.nav-burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 2px;
}

/* Panneau mobile — masqué par défaut. Affiché + fondu sous 900px. */
.nav-mobile-panel { display: none; }
.nav-mobile-top { display: none; }
.nav-mobile-list { display: none; }

/* Wordmark / page hero */
.hero {
  padding-top: clamp(24px, 5vw, 56px);
  padding-bottom: clamp(56px, 9vw, 120px);
}
.wordmark {
  font-family: "Geist", sans-serif;
  font-weight: 800;
  font-size: clamp(56px, 11vw, 168px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.eyebrow {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 22px;
}
.hero-sub {
  margin-top: 28px;
  max-width: 680px;
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--ink-2);
  line-height: 1.45;
  text-wrap: pretty;
}

/* Filter sub-row */
.filter-row {
  display: flex; gap: 10px; align-items: center;
  margin-top: 28px; flex-wrap: wrap;
}
.filter-pill {
  font-size: 14px; font-weight: 500;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--rule);
  color: var(--ink-2); background: var(--paper);
  cursor: pointer; font-family: inherit;
}
.filter-pill.is-on { background: var(--ink); color: white; border-color: var(--ink); }

/* Timeline — three sizes. Year label lives in a sticky left rail that
   travels with its year and fades out as the next year arrives. */
.timeline {
  padding: 0 0 160px;
  max-width: var(--max);
  margin: 0 auto;
}
.year-block {
  display: grid;
  grid-template-columns: 140px 1fr;
  column-gap: clamp(20px, 3vw, 56px);
  padding: 0 var(--pad-x) 80px;
  position: relative;
}
.year-block + .year-block { border-top: 1px solid var(--rule); padding-top: 32px; }

.year-rail { position: relative; }
.year-rail-sticky {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  padding-top: 8px;
  animation: year-fade linear both;
  animation-timeline: view();
  animation-range: exit -20% exit 70%;
}
@keyframes year-fade {
  to { opacity: 0; transform: translateY(-12px); }
}
.year-label-inner {
  font-size: clamp(32px, 3vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  display: inline-block;
  padding: 6px 14px;
  border-radius: 6px;
  color: var(--ink);
}
.year-block.is-current .year-label-inner { background: var(--accent); }

/* Image hover — grow then settle. Applies to every variant. */
.entry-thumb, .entry-feat-img, .entry-arch-thumb {
  overflow: hidden;
  background: var(--paper-2);
  border-radius: 2px;
  position: relative;
}
.entry-thumb image-slot,
.entry-feat-img image-slot,
.entry-arch-thumb image-slot {
  --is-bg: var(--paper-2);
  --is-border: 1px dashed var(--rule-2);
  --is-color: var(--ink-3);
  transition: transform 520ms cubic-bezier(.2,.7,.2,1);
  transform-origin: center;
}
.entry:hover .entry-thumb image-slot,
.entry-feat:hover .entry-feat-img image-slot,
.entry-arch:hover .entry-arch-thumb image-slot {
  transform: scale(1.045);
}

/* ─── XL feature (most recent) ────────────────────────────────────────── */
.year-feat-wrap { margin-bottom: 56px; }
.entry-feat { padding: 8px 0 24px; }
.entry-feat-img {
  width: auto;
  aspect-ratio: 16/9;
  margin-bottom: 28px;
  margin-left: calc(-1 * (var(--pad-x) + 140px + clamp(20px, 3vw, 56px)));
  margin-right: calc(-1 * var(--pad-x));
}
.entry-feat-body {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}
.entry-feat-title {
  font-size: clamp(34px, 4.4vw, 64px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}
.entry-feat-title.is-xxl {
  font-size: clamp(48px, 7vw, 104px);
  letter-spacing: -0.035em;
  line-height: 1.0;
  grid-column: 1 / -1;
  max-width: 18ch;
}
.entry-feat-text {
  font-size: clamp(17px, 1.3vw, 20px);
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 56ch;
  margin: 0;
}
.entry-feat.no-image .entry-feat-body { grid-template-columns: 1fr; }
.entry-feat.no-image { padding-top: 56px; }



/* ─── L medium (rest of current year) ─────────────────────────────────── */
.year-medium { padding-top: 24px; }
.entry {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: clamp(28px, 5vw, 72px);
  padding: 28px 0 28px;
  align-items: start;
}
.entry + .entry { border-top: 1px solid var(--rule); }
.entry-thumb {
  width: 320px;
  aspect-ratio: 4/3;
}
/* placeholder textures — small, earned, no AI-slop gradients */
.tone-warm   { background: linear-gradient(160deg, #b8b1a3 0%, #6b6359 60%, #3a352e 100%); }
.tone-warm2  { background: linear-gradient(150deg, #cfc6b6 0%, #8a8174 55%, #4d463c 100%); }
.tone-cool   { background: linear-gradient(170deg, #88a3a8 0%, #5a7a82 60%, #2c3a40 100%); }
.tone-mono   { background: linear-gradient(165deg, #d6d3cd 0%, #7a7872 55%, #2a2a28 100%); }
.tone-mono2  { background: linear-gradient(170deg, #c3bfb6 0%, #6b685f 55%, #1f1d18 100%); }
.tone-mono3  { background: linear-gradient(155deg, #adaba4 0%, #54524d 55%, #161514 100%); }

.entry-body { padding-top: 6px; }
.entry-title {
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.18;
  margin: 0 0 20px;
  text-wrap: pretty;
  max-width: 28ch;
}
.entry-text {
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.55;
  max-width: 56ch;
  margin: 0;
}
.entry-tags {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 18px;
}
.tag {
  font-size: 12px; font-weight: 500; letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  background: var(--paper-2); color: var(--ink-3);
}

/* ─── M archive (older years, 2-per-row grid) ─────────────────────────── */
.year-archive {
  padding-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px clamp(40px, 5vw, 80px);
}
.entry-arch {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.entry-arch-thumb {
  width: 100%;
  aspect-ratio: 4/3;
}
.entry-arch.no-image .entry-arch-thumb { display: none; }
.entry-arch-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.25;
  margin: 4px 0 4px;
  text-wrap: pretty;
  max-width: 32ch;
}
.entry-arch-text {
  font-size: 15px;
  color: var(--ink-3);
  line-height: 1.5;
  max-width: 56ch;
  margin: 0;
}
.entry-arch .entry-tags { margin-top: 6px; }



/* Bio page */
.bio-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  padding-bottom: 160px;
}
.bio-portrait {
  aspect-ratio: 3/4;
  background: var(--paper-2);
  border-radius: 2px;
  position: sticky; top: 120px;
  align-self: start;
  overflow: hidden;
}
.bio-portrait image-slot { width: 100%; height: 100%; display: block; }
.bio-prose p {
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 1.2em;
  text-wrap: pretty;
  max-width: 56ch;
}
.bio-prose p.lead {
  font-size: clamp(22px, 1.9vw, 30px);
  line-height: 1.35;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.012em;
  max-width: 28ch;
  margin-bottom: 1.4em;
}
.bio-section {
  margin-top: 80px;
  border-top: 1px solid var(--rule);
  padding-top: 40px;
}
.bio-section h3 {
  font-size: 20px; font-weight: 700; margin: 0 0 28px;
  letter-spacing: -0.01em;
}
.bio-list { list-style: none; padding: 0; margin: 0; }
.bio-list li {
  display: grid; grid-template-columns: 80px 1fr;
  gap: 20px; padding: 14px 0;
  border-top: 1px solid var(--rule);
  font-size: 17px; color: var(--ink-2);
  line-height: 1.45;
}
.bio-list li:first-child { border-top: 0; }
.bio-list .y { font-weight: 600; color: var(--ink); }
.bio-flat { columns: 2; column-gap: 40px; font-size: 17px; color: var(--ink-2); }
.bio-flat li { break-inside: avoid; padding: 8px 0; list-style: none; }

/* Médias page */
.media-list { padding-bottom: 160px; }
.media-row {
  display: grid;
  grid-template-columns: 90px 1.2fr 2fr 140px 24px;
  gap: 28px;
  padding: 26px 0;
  border-top: 1px solid var(--rule);
  align-items: baseline;
  cursor: pointer;
  transition: background 140ms ease;
}
.media-row:hover { background: var(--paper-2); }
.media-row:hover .media-arrow { transform: translate(2px, -2px); }
.media-row .y { font-weight: 600; color: var(--ink); font-size: 17px; }
.media-row .src { font-weight: 600; color: var(--ink); font-size: 17px; letter-spacing: -0.01em; }
.media-row .ttl {
  font-size: clamp(18px, 1.4vw, 22px);
  font-weight: 500; color: var(--ink);
  letter-spacing: -0.012em; line-height: 1.3;
  text-wrap: pretty;
}
.media-row .kind { font-size: 13px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; }
.media-arrow { transition: transform 180ms ease; color: var(--ink); }

/* Contact page */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 120px);
  padding-bottom: 160px;
  align-items: start;
}
.contact-block h3 {
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 14px;
}
.contact-block .big {
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 600; letter-spacing: -0.022em;
  line-height: 1.15; margin: 0 0 4px;
  text-wrap: pretty;
}
.contact-block + .contact-block { margin-top: 64px; }
.contact-block a.big:hover { background: var(--accent); }

.form {
  border: 1px solid var(--rule);
  padding: 36px;
  border-radius: 2px;
  background: var(--paper);
  position: sticky; top: 120px;
}
.form label { display: block; margin-bottom: 18px; font-size: 14px; color: var(--ink-3); font-weight: 500; }
.form input, .form textarea, .form select {
  display: block; width: 100%;
  margin-top: 6px;
  font: inherit;
  font-size: 16px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  transition: border-color 140ms ease;
}
.form input:focus, .form textarea:focus, .form select:focus {
  outline: 0; border-color: var(--ink);
}
.form textarea { min-height: 140px; resize: vertical; }
.btn {
  display: inline-block; cursor: pointer;
  background: var(--ink); color: var(--paper);
  font: inherit; font-size: 15px; font-weight: 500;
  padding: 14px 22px; border-radius: 2px;
  border: 0;
  transition: background 140ms ease;
}
.btn:hover { background: var(--ink-2); }
.btn[disabled] { background: var(--ink-4); cursor: default; }

.form-note {
  margin-top: 14px; padding: 12px 14px;
  background: var(--accent-2);
  font-size: 14px; border-radius: 2px;
  color: var(--ink-2);
}

/* Footer */
.foot {
  border-top: 1px solid var(--rule);
  padding: 32px 0 60px;
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 14px; color: var(--ink-3);
  flex-wrap: wrap; gap: 16px;
}
.foot a:hover { color: var(--ink); }

/* ── Légendes optionnelles sous les images ────────────────────────────
   Off par défaut. Pour activer, passer --captions-display à `block`
   (ou supprimer cette ligne). Le texte vient de `e.caption` dans data.js. */
:root {
  --captions-display: none;
  --captions-color: var(--ink-3);
  --captions-size: 13px;
}
.entry-caption {
  display: var(--captions-display);
  font-size: var(--captions-size);
  color: var(--captions-color);
  line-height: 1.4;
  margin-top: 8px;
  font-style: italic;
  letter-spacing: 0.005em;
  max-width: 56ch;
}
.entry-thumb-fig, .entry-arch-fig, .entry-feat-fig { display: block; min-width: 0; }
@media (max-width: 720px) {
  .entry-caption { font-size: 12.5px; margin-top: 6px; }
}

/* Page transitions — quiet */
.page { animation: fade 280ms ease both; }
@keyframes fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Responsive — tablet + mobile breakpoints */

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
  :root { --pad-x: clamp(20px, 4vw, 56px); --nav-h: 76px; }
  .year-block { grid-template-columns: 110px 1fr; column-gap: 28px; padding-bottom: 64px; }
  .year-label-inner { font-size: clamp(28px, 3.4vw, 38px); padding: 5px 11px; }
  .entry { grid-template-columns: 260px 1fr; gap: 32px; }
  .entry-thumb { width: 260px; }
  .entry-feat-img { margin-left: calc(-1 * (var(--pad-x) + 110px + 28px)); }
  .entry-feat-body { grid-template-columns: 1fr 1fr; gap: 36px; }
  .entry-feat-title.is-xxl { font-size: clamp(44px, 6.4vw, 88px); }
  .bio-grid { gap: 56px; }
  .contact-grid { gap: 56px; }
  .media-row { grid-template-columns: 70px 1fr 1.6fr 110px 18px; gap: 20px; }
  .form { padding: 28px; }
}

/* Mobile + tablette (≤ 900px) — menu hamburger */
@media (max-width: 900px) {
  /* Barre : on garde l'orientation horizontale. Les liens desktop disparaissent,
     seul « L.B. » à gauche et le hamburger à droite restent. */
  .nav { padding-top: 24px; padding-bottom: 20px; }
  .nav-desktop-only { display: none !important; }
  .nav-sep { display: none; }
  .nav-burger { display: flex; }

  /* Panneau plein écran qui descend du haut. Fondu 120ms. */
  .nav-mobile-panel {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--paper);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav-mobile-panel.is-open {
    opacity: 1;
    pointer-events: auto;
  }
  .nav-mobile-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    padding-bottom: 20px;
  }
  .nav-close {
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--ink-3);
    padding: 6px 10px;
    margin-right: -10px;
    border-radius: 6px;
    transition: background 140ms ease, color 140ms ease;
  }
  .nav-close:hover { background: var(--paper-2); color: var(--ink); }
  .nav-mobile-list {
    display: flex;
    flex-direction: column;
    list-style: none;
    padding: 24px 0 80px;
    margin: 0;
    gap: 2px;
  }
  .nav-mobile-link {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    font-family: inherit;
    font-size: clamp(30px, 7vw, 44px);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--ink);
    padding: 16px 0;
    cursor: pointer;
    display: flex;
    align-items: baseline;
    gap: 18px;
  }
  .nav-mobile-mark {
    display: inline-block;
    width: 28px;
    height: 2px;
    background: var(--ink);
    border-radius: 2px;
    transform: translateY(-0.35em);
    opacity: 0;
    transition: opacity 140ms ease;
    flex-shrink: 0;
  }
  .nav-mobile-link.is-active { font-weight: 700; }
  .nav-mobile-link.is-active .nav-mobile-mark { opacity: 1; }
  .nav-mobile-link:not(.is-active) .nav-mobile-mark { background: transparent; }
}

/* Mobile (≤ 720px) */
@media (max-width: 720px) {
  :root { --pad-x: 20px; --nav-h: auto; }
  body { font-size: 16px; }

  .nav { padding-top: 22px; padding-bottom: 18px; }
  .nav-link { font-size: 15px; padding: 4px 8px; }

  /* Hero / wordmark */
  .hero { padding-top: 16px; padding-bottom: 56px; }
  .wordmark { font-size: clamp(44px, 13.5vw, 56px); letter-spacing: -0.025em; line-height: 1.0; }
  .hero-sub { font-size: 17px; margin-top: 20px; max-width: none; }
  .eyebrow { font-size: 12px; margin-bottom: 14px; }

  /* Filtres */
  .filter-row { gap: 8px; margin-top: 20px; }
  .filter-pill { font-size: 13px; padding: 6px 12px; }

  /* Timeline — année au-dessus, image pleine largeur, texte dessous */
  .timeline { padding-bottom: 80px; }
  .year-block {
    grid-template-columns: 1fr;
    row-gap: 18px;
    padding: 0 var(--pad-x) 56px;
  }
  .year-block + .year-block { padding-top: 28px; }
  .year-rail { position: relative; }
  .year-rail-sticky {
    position: relative; top: 0;
    animation: none;
    padding-top: 4px;
  }
  .year-label-inner {
    font-size: 26px;
    padding: 4px 10px;
  }

  /* XL feature — image pleine largeur (déborde des paddings) */
  .year-feat-wrap { margin-bottom: 36px; }
  .entry-feat { padding: 0 0 8px; }
  .entry-feat-img {
    margin-left: calc(-1 * var(--pad-x));
    margin-right: calc(-1 * var(--pad-x));
    aspect-ratio: 4/3;
    margin-bottom: 22px;
  }
  .entry-feat-body { grid-template-columns: 1fr; gap: 16px; }
  .entry-feat-title { font-size: 28px; line-height: 1.15; }
  .entry-feat-title.is-xxl { font-size: 36px; line-height: 1.05; max-width: none; }
  .entry-feat-text { font-size: 16px; max-width: none; }
  .entry-feat.no-image { padding-top: 24px; }

  /* L medium — vertical, image puis texte */
  .entry { grid-template-columns: 1fr; gap: 16px; padding: 22px 0; }
  .entry-thumb { width: 100%; max-width: none; aspect-ratio: 4/3; }
  .entry-title { font-size: 22px; max-width: none; margin-bottom: 14px; }
  .entry-text { font-size: 16px; max-width: none; }

  /* M archive — 1 colonne */
  .year-archive { grid-template-columns: 1fr; gap: 32px; padding-top: 18px; }
  .entry-arch-title { font-size: 18px; max-width: none; }
  .entry-arch-text { font-size: 14.5px; max-width: none; }

  /* Bio */
  .bio-grid { grid-template-columns: 1fr; gap: 36px; padding-bottom: 80px; }
  .bio-portrait { position: static; aspect-ratio: 4/5; max-width: 320px; }
  .bio-prose p { font-size: 16.5px; max-width: none; }
  .bio-prose p.lead { font-size: 22px; max-width: none; }
  .bio-section { margin-top: 56px; padding-top: 28px; }
  .bio-list li { grid-template-columns: 64px 1fr; gap: 14px; padding: 12px 0; font-size: 15.5px; }
  .bio-flat { columns: 1; font-size: 16px; }

  /* Médias — empilé, sans flèche */
  .media-list { padding-bottom: 80px; }
  .media-row {
    grid-template-columns: 56px 1fr;
    gap: 4px 14px;
    padding: 18px 0;
  }
  .media-row .y { grid-column: 1; grid-row: 1; font-size: 15px; }
  .media-row .src { grid-column: 2; grid-row: 1; font-size: 15px; }
  .media-row .ttl { grid-column: 1 / -1; grid-row: 2; font-size: 17px; padding-top: 4px; }
  .media-row .kind { grid-column: 1 / -1; grid-row: 3; font-size: 11px; padding-top: 2px; }
  .media-arrow { display: none; }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr; gap: 40px; padding-bottom: 80px; }
  .contact-block .big { font-size: 24px; }
  .contact-block + .contact-block { margin-top: 36px; }
  .form { position: static; padding: 22px; border-radius: 2px; }
  .form input, .form textarea, .form select { font-size: 16px; padding: 11px 12px; }
  .btn { padding: 13px 20px; font-size: 15px; }

  /* Footer */
  .foot { padding: 24px 0 36px; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 13px; }
}

/* Très petit (≤ 380px) — quelques ajustements supplémentaires */
@media (max-width: 380px) {
  .wordmark { font-size: 40px; }
  .nav-link { font-size: 14px; }
}

/* ─────────────────────────────────────────────────────────────────────
   Articles — gabarit Textes
   3 mises en page : carnet (défaut, bichromie crème), sobre, illustrée
   ───────────────────────────────────────────────────────────────────── */

/* Lien « Lire → » sur les entrées timeline (page d'accueil) — pastille claire,
   texte brun. Format inverse de celui des fiches Projets / Expositions, et de
   taille uniforme quelle que soit la variante (Feature / Medium / Archive). */
.entry-readmore {
  display: inline-block;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--terracotta);
  background: var(--terracotta-wash);
  padding: 3px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.entry-readmore:hover { background: var(--terracotta); color: var(--terracotta-wash); }
/* Les entrées archive sont en flex-column → les enfants s'étirent par défaut.
   On force la pastille à se rétracter à son contenu. */
.entry-arch > .entry-readmore { align-self: flex-start; }

/* Liste en ligne — Projets / Expositions */
.entry-list { padding-bottom: 160px; display: grid; gap: 0; }
.entry-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: background 140ms ease;
}
.entry-row.is-link { cursor: pointer; }
.entry-row.is-link:hover { background: var(--paper-2); }
.entry-row-thumb {
  aspect-ratio: 4/3;
  background: var(--paper-2);
  overflow: hidden;
  border-radius: 2px;
}
.entry-row-thumb.is-empty { background: transparent; }
.entry-row-thumb image-slot { transition: transform 520ms cubic-bezier(.2,.7,.2,1); }
.entry-row.is-link:hover .entry-row-thumb image-slot { transform: scale(1.045); }
.entry-row-body { padding-top: 4px; display: flex; flex-direction: column; }
.entry-row-year {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 8px;
}
.entry-row-title {
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 600;
  line-height: 1.18;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.entry-row-text {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0 0 14px;
  max-width: 64ch;
}
.entry-row-meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.entry-row-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.entry-row-readmore {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--terracotta);
  background: var(--terracotta-wash);
  white-space: nowrap;
  padding: 3px 11px;
  margin-left: 8px;
  border-radius: 999px;
  vertical-align: 2px;
  transition: background 140ms ease, color 140ms ease;
}
.entry-row.is-link:hover .entry-row-readmore { background: var(--terracotta); color: var(--terracotta-wash); }
@media (max-width: 720px) {
  .entry-row { grid-template-columns: 1fr; gap: 16px; padding: 24px 0; }
  .entry-row-thumb.is-empty { display: none; }
  .entry-row-title { font-size: 22px; }
  .entry-row-text { font-size: 15px; }
}

/* Listing « Textes » */
.textes-list { padding-bottom: 160px; display: grid; gap: 0; }
.texte-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(28px, 4vw, 56px);
  padding: 36px 0;
  border-top: 1px solid var(--rule);
  align-items: start;
  cursor: pointer;
  transition: background 140ms ease;
}
.texte-row:hover { background: var(--paper-2); }
.texte-row-thumb {
  aspect-ratio: 4/3;
  background: var(--paper-2);
  overflow: hidden;
  border-radius: 2px;
}
.texte-row-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 520ms cubic-bezier(.2,.7,.2,1); }
.texte-row:hover .texte-row-thumb img { transform: scale(1.045); }
.texte-row-body { padding-top: 6px; }
.texte-row-title {
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 8px 0 14px;
  text-wrap: pretty;
  max-width: 24ch;
}
.texte-row-excerpt {
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.5;
  max-width: 56ch;
  margin: 0 0 12px;
}
.texte-row-meta {
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
  font-weight: 500;
}
@media (max-width: 720px) {
  .texte-row { grid-template-columns: 1fr; gap: 16px; padding: 24px 0; }
  .texte-row-title { font-size: 24px; max-width: none; }
  .texte-row-excerpt { font-size: 16px; max-width: none; }
}

/* ── Article — toolbar (retour + toggle layout) ────────────────────── */
.article-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 32px;
  gap: 16px;
  flex-wrap: wrap;
}

/* Toolbar sticky — quand la galerie est activée, la barre d'outils suit
   le scroll pour rester à portée pendant qu'on parcourt la galerie.
   Elle vient se loger sous la nav (qui est déjà sticky). Le `.nav` a un
   padding 32+24 + ~36px de contenu ≈ 92px → on prend 88px. */
.article-toolbar.is-sticky {
  position: sticky;
  top: calc(var(--nav-h, 88px) + 8px);
  z-index: 15;
  background: var(--paper);
  margin-top: -8px;
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
  /* Effet "feuilleté" : un léger flou pour que le texte qui passe en
     dessous reste lisible si jamais l'opacité du fond varie. */
  backdrop-filter: blur(8px) saturate(115%);
  -webkit-backdrop-filter: blur(8px) saturate(115%);
  /* Le shell limite la largeur — on a besoin d'un fond qui couvre
     toute la viewport, donc on déborde via box-shadow */
  box-shadow: 0 1px 0 var(--rule);
}
/* En version carnet (fond crème), adapter le fond du bandeau sticky. */
.article-carnet .article-toolbar.is-sticky {
  background: var(--paper-cream);
  border-bottom-color: var(--rule-cream);
  box-shadow: 0 1px 0 var(--rule-cream);
}
/* Pour que le bandeau couvre la pleine largeur (pas juste .shell),
   on étend le fond via un pseudo-élément qui déborde latéralement. */
.article-toolbar.is-sticky::before {
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: inherit;
  border-bottom: inherit;
  z-index: -1;
  backdrop-filter: inherit;
  -webkit-backdrop-filter: inherit;
}
.article-toolbar.is-sticky > * { position: relative; z-index: 1; }
@media (max-width: 720px) {
  .article-toolbar.is-sticky {
    top: 0;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* Toggle éditorial — bascule la galerie de cet article on/off.
   Style : pastille discrète façon "tag de statut", se place à droite
   de la toolbar (opposée au lien retour). État on = pastille
   terracotta, off = pastille gris froid. */
.article-edit-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px 6px 12px;
  border: 1px solid var(--rule-2);
  background: var(--paper);
  color: var(--ink-2);
  border-radius: 999px;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
  letter-spacing: 0.01em;
}
.article-edit-toggle:hover {
  background: var(--paper-2);
  border-color: var(--ink-4);
  color: var(--ink);
}
.article-edit-toggle .aet-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink-4);
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px transparent;
  transition: background 140ms ease, box-shadow 140ms ease;
}
.article-edit-toggle .aet-lbl {
  color: var(--ink);
  font-weight: 600;
}
.article-edit-toggle .aet-state {
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.article-edit-toggle.is-on {
  background: var(--terracotta-wash);
  border-color: transparent;
  color: var(--terracotta);
}
.article-edit-toggle.is-on .aet-lbl,
.article-edit-toggle.is-on .aet-state {
  color: var(--terracotta);
}
.article-edit-toggle.is-on .aet-dot {
  background: var(--terracotta);
  box-shadow: 0 0 0 3px rgba(156, 74, 38, 0.15);
}
.article-edit-toggle.is-on:hover {
  background: var(--terracotta);
  color: var(--terracotta-wash);
}
.article-edit-toggle.is-on:hover .aet-lbl,
.article-edit-toggle.is-on:hover .aet-state { color: var(--terracotta-wash); }
.article-edit-toggle.is-on:hover .aet-dot {
  background: var(--terracotta-wash);
  box-shadow: 0 0 0 3px rgba(246, 236, 225, 0.25);
}

/* En version carnet (fond crème) on adapte un peu */
.article-carnet .article-edit-toggle {
  border-color: var(--rule-cream);
  background: transparent;
}
.article-carnet .article-edit-toggle:hover {
  background: rgba(31, 26, 20, 0.04);
}

/* Conteneur des outils éditoriaux à droite de la toolbar */
.article-edit-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Variante "cycle" : même tag pillule, mais l'état est neutre
   (gris) car on cycle entre plusieurs valeurs au lieu d'on/off. */
.article-edit-toggle.is-cycle .aet-dot {
  background: var(--ink-3);
  box-shadow: none;
}
.article-edit-toggle.is-cycle .aet-state {
  color: var(--ink);
  font-weight: 500;
}

@media (max-width: 720px) {
  .article-edit-tools { gap: 6px; }
}
.article-back {
  font-size: 14px;
  color: var(--ink-3);
  font-weight: 500;
  padding: 4px 10px;
  margin-left: -10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.article-back:hover { background: var(--paper-2); color: var(--ink); }
.article-layout-toggle {
  display: inline-flex;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 3px;
  background: var(--paper);
}
.article-layout-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background 140ms ease, color 140ms ease;
}
.article-layout-btn.is-on { background: var(--ink); color: var(--paper); }
.article-layout-btn:not(.is-on):hover { color: var(--ink); }

/* ── Article — base partagée ──────────────────────────────────────── */
.article-page { padding-bottom: 120px; }
.article {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--pad-x) 80px;
}
.article-header { padding: 24px 0 36px; }
.article-eyebrow {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 18px;
}
.article-title {
  font-family: "Geist", sans-serif;
  font-weight: 800;
  font-size: clamp(48px, 8vw, 128px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 0 0 28px;
  text-wrap: balance;
}
.article-meta {
  font-size: 14px;
  color: var(--ink-3);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  letter-spacing: 0.02em;
}
.article-meta-dot { color: var(--ink-4); }

.article-cover { margin: 0 0 56px; width: 100%; position: relative; }
.article-cover img,
.article-cover image-slot {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 2px;
  --is-bg: var(--paper-2);
  --is-border: 1px dashed var(--rule-2);
  --is-color: var(--ink-3);
}
/* Aspect-ratio par défaut tant que la photo n'est pas chargée — sera
   remplacé en inline par le ratio naturel de la photo. */
.article-cover { aspect-ratio: 16/10; }
.article-cover img { aspect-ratio: 16/10; object-fit: cover; }
.article-cover figcaption {
  font-size: 12.5px;
  color: var(--ink-3);
  font-style: italic;
  margin-top: 10px;
  letter-spacing: 0.005em;
  max-width: 70ch;
  line-height: 1.4;
}

.article-inline-img { margin: 36px 0; }

/* Wrapper qui contient l'image-slot + les contrôles d'édition flottants.
   L'aspect-ratio par défaut donne une taille raisonnable tant que la
   photo n'est pas chargée ; il est remplacé inline par le ratio naturel
   dès que l'image est lue (cf. useEffect dans PageArticle). */
.aii-frame {
  position: relative;
  width: 100%;
  background: var(--paper-2);
  border-radius: 2px;
  overflow: hidden;
  aspect-ratio: 4/3;
}
.aii-frame image-slot {
  --is-bg: var(--paper-2);
  --is-border: 1px dashed var(--rule-2);
  --is-color: var(--ink-3);
  width: 100%;
  height: 100%;
  display: block;
}

/* Contrôles éditoriaux flottants sur chaque image inline.
   Visibles au survol — donc toujours disponibles sans toggle. */
.aii-controls {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
}
.article-inline-img:hover .aii-controls { opacity: 1; pointer-events: auto; }
.aii-btn {
  appearance: none;
  border: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(15, 17, 21, 0.78);
  color: #fff;
  font: 600 14px/1 "Geist", ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 140ms ease, background 140ms ease;
  backdrop-filter: blur(8px);
  user-select: none;
}
.aii-btn:hover { background: rgba(15,17,21,.92); transform: scale(1.06); }
.aii-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.aii-btn:disabled:hover { background: rgba(15, 17, 21, 0.78); transform: none; }

.aii-size {
  appearance: none;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px 0 9px;
  border-radius: 999px;
  background: rgba(15, 17, 21, 0.78);
  color: #fff;
  font: 600 12px/1 "Geist", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 140ms ease, background 140ms ease;
  backdrop-filter: blur(8px);
  user-select: none;
}
.aii-size:hover { background: rgba(15,17,21,.92); transform: scale(1.04); }
.aii-size-icon { font-size: 13px; font-weight: 700; opacity: 0.85; }
.aii-size-lbl { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Conservation des anciennes classes (backward compat depuis data.js).
   Les ratios sont des FALLBACKS uniquement : l'aspect-ratio inline calculé
   depuis la photo réelle (cf. useEffect) prend le dessus. */
.article-inline-img.article-inline-left .aii-frame,
.article-inline-img.article-inline-right .aii-frame,
.article-inline-img.article-inline-small-left .aii-frame,
.article-inline-img.article-inline-small-right .aii-frame {
  aspect-ratio: 4/5;
}
.article-inline-img.article-inline-medium .aii-frame { aspect-ratio: 4/3; }
.article-inline-img.article-inline-full   .aii-frame { aspect-ratio: 16/9; }

.article-inline-img figcaption {
  font-size: 12.5px;
  color: var(--ink-3);
  font-style: italic;
  margin-top: 10px;
  letter-spacing: 0.005em;
  line-height: 1.4;
}

.article-footer-note {
  margin-top: 72px;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  color: var(--ink-3);
}
.article-footer-note p { margin: 0 0 6px; }

/* ─── Variante CARNET — bichromie crème, photos en marge, pagination ─── */
.article-carnet {
  --paper-cream: #f4ecdb;
  --rule-cream: #d9cfb9;
  --ink-cream: #1f1a14;
  background: var(--paper-cream);
}
.article-carnet .nav,
.article-carnet ~ .foot { background: var(--paper-cream); }
.article-carnet .article-toolbar { color: var(--ink-cream); }
.article-carnet .article-back:hover { background: rgba(31, 26, 20, 0.06); }
.article-carnet .article-layout-toggle { border-color: var(--rule-cream); background: transparent; }
.article-carnet .article-layout-btn.is-on { background: var(--ink-cream); color: var(--paper-cream); }

.article-carnet .article {
  max-width: 1240px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 660px) minmax(0, 1fr);
  column-gap: 0;
}
.article-carnet .article-header,
.article-carnet .article-cover,
.article-carnet .article-body,
.article-carnet .article-footer-note { grid-column: 2 / 3; }

.article-carnet .article-title {
  color: var(--ink-cream);
  font-weight: 700;
  font-size: clamp(44px, 6.6vw, 96px);
  letter-spacing: -0.03em;
}
.article-carnet .article-eyebrow,
.article-carnet .article-meta { color: rgba(31, 26, 20, 0.55); }

.article-carnet .article-cover img,
.article-carnet .article-cover image-slot {
  border-radius: 0;
  filter: contrast(1.02) saturate(0.85);
}
.article-carnet .article-cover figcaption,
.article-carnet .article-inline-img figcaption {
  color: rgba(31, 26, 20, 0.55);
  font-family: "Source Serif 4", Georgia, serif;
  font-style: italic;
  font-size: 13px;
}

.article-carnet .article-body {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 18.5px;
  line-height: 1.65;
  color: var(--ink-cream);
}
.article-carnet .article-p {
  margin: 0 0 1.4em;
  text-indent: 1.6em;
  text-wrap: pretty;
  position: relative;
}
.article-carnet .article-p:first-of-type { text-indent: 0; }
.article-carnet .article-p.has-dropcap::first-letter {
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 600;
  font-size: 3.4em;
  line-height: 0.92;
  float: left;
  padding: 0.04em 0.08em 0 0;
  margin-top: 0.04em;
  color: var(--ink-cream);
}

/* Pagination visible — numéros en marge */
.article-carnet .article-p::before {
  content: attr(data-pn);
  position: absolute;
  left: -110px;
  top: 0.45em;
  font-family: "Geist", sans-serif;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(31, 26, 20, 0.4);
  text-indent: 0;
  white-space: nowrap;
  font-weight: 500;
}
.article-carnet .article-p:not(:first-of-type)::before { display: none; }
.article-carnet .article-p:nth-of-type(3n+1)::before { display: block; }

/* Photos décalées en marge — débordent dans la colonne de droite ou gauche */
.article-carnet .article-inline-img {
  width: calc(100% + 220px);
  margin: 48px 0;
}
.article-carnet .article-inline-right,
.article-carnet .article-inline-small-right { margin-left: -40px; }
.article-carnet .article-inline-left,
.article-carnet .article-inline-small-left {
  margin-left: -180px;
}
/* Tailles supplémentaires en carnet : moyenne (centrée, légèrement plus
   large que le texte) et pleine (déborde des deux côtés) */
.article-carnet .article-inline-medium {
  width: calc(100% + 80px);
  margin-left: -40px;
}
.article-carnet .article-inline-full {
  width: calc(100% + 320px);
  margin-left: -160px;
}
.article-carnet .article-inline-img .aii-frame {
  border-radius: 0;
}
.article-carnet .article-inline-img .aii-frame image-slot {
  filter: contrast(1.02) saturate(0.85);
}
.article-carnet .article-inline-img figcaption { padding: 0 8px; }

.article-carnet .article-footer-note {
  border-top: 1px solid var(--rule-cream);
  color: rgba(31, 26, 20, 0.6);
  font-family: "Source Serif 4", Georgia, serif;
}
.article-carnet .article-footer-note em { font-style: italic; }

/* ─── Variante SOBRE — colonne unique étroite, blanc, photos en pied ─── */
.article-sobre .article {
  max-width: 720px;
}
.article-sobre .article-title {
  font-size: clamp(40px, 5.6vw, 80px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.0;
}
.article-sobre .article-cover { margin-bottom: 64px; }
.article-sobre .article-body {
  font-family: "Geist", sans-serif;
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-2);
}
.article-sobre .article-p {
  margin: 0 0 1.3em;
  max-width: 60ch;
  text-wrap: pretty;
}
.article-sobre .article-p.has-dropcap::first-letter {
  font-weight: 700;
  font-size: 2.4em;
  line-height: 0.95;
  float: left;
  padding: 0.06em 0.1em 0 0;
  color: var(--ink);
}
.article-sobre .article-inline-img {
  margin: 56px 0;
}

/* ─── Variante ILLUSTRÉE — colonne + photos full-width intercalées ─── */
.article-illustree .article {
  max-width: 820px;
}
.article-illustree .article-title {
  font-size: clamp(44px, 6vw, 96px);
}
.article-illustree .article-body {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink);
}
.article-illustree .article-p {
  margin: 0 0 1.2em;
  max-width: 62ch;
  text-wrap: pretty;
}
.article-illustree .article-p.has-dropcap::first-letter {
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 600;
  font-size: 3em;
  line-height: 0.95;
  float: left;
  padding: 0.06em 0.1em 0 0;
  color: var(--ink);
}
.article-illustree .article-inline-img {
  width: calc(100% + 200px);
  margin-left: -100px;
  margin-top: 56px;
  margin-bottom: 56px;
}
.article-illustree .article-cover img { aspect-ratio: 16/9; }

/* Responsive — articles ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .article-carnet .article {
    grid-template-columns: minmax(0, 1fr) minmax(0, 600px) minmax(0, 1fr);
  }
  .article-carnet .article-p::before { left: -90px; font-size: 10px; }
  .article-carnet .article-inline-img { width: calc(100% + 120px); }
  .article-carnet .article-inline-right,
  .article-carnet .article-inline-small-right { margin-left: -20px; }
  .article-carnet .article-inline-left,
  .article-carnet .article-inline-small-left { margin-left: -100px; }
  .article-carnet .article-inline-medium { width: calc(100% + 40px); margin-left: -20px; }
  .article-carnet .article-inline-full   { width: calc(100% + 200px); margin-left: -100px; }
  .article-illustree .article-inline-img { width: calc(100% + 100px); margin-left: -50px; }
}
@media (max-width: 720px) {
  .article-page { padding-bottom: 60px; }
  .article { padding: 0 var(--pad-x) 56px; }
  .article-header { padding: 8px 0 24px; }
  .article-cover { margin-bottom: 36px; }
  .article-cover img { aspect-ratio: 4/3; }
  .article-meta { font-size: 13px; gap: 6px; }
  .article-toolbar { padding-bottom: 20px; }

  .article-carnet .article {
    grid-template-columns: 1fr;
    max-width: 720px;
  }
  .article-carnet .article-header,
  .article-carnet .article-cover,
  .article-carnet .article-body,
  .article-carnet .article-footer-note { grid-column: 1 / -1; }
  .article-carnet .article-p::before { display: none !important; }
  .article-carnet .article-inline-img {
    width: 100%;
    margin-left: calc(-1 * var(--pad-x));
    margin-right: calc(-1 * var(--pad-x));
    width: calc(100% + 2 * var(--pad-x));
  }
  .article-carnet .article-inline-img figcaption { padding: 0 var(--pad-x); }

  .article-sobre .article-body,
  .article-illustree .article-body { font-size: 16.5px; }

  .article-illustree .article-inline-img {
    width: calc(100% + 2 * var(--pad-x));
    margin-left: calc(-1 * var(--pad-x));
  }
}

/* ─────────────────────────────────────────────────────────────────────
   GALERIE EN BAS D'ARTICLE
   On bascule dans un espace galerie : sortie du grid étroit du carnet,
   pleine largeur, fond contrasté, sous-titres visibles (italique serif).
   3 variantes via Tweaks : fond (papier/crème/encre), rythme (régulier/
   varié), ratio (43/32/mixte).
   ───────────────────────────────────────────────────────────────────── */
.article-gallery {
  --ag-paper: #ffffff;
  --ag-ink: #0f1115;
  --ag-rule: #ececef;
  --ag-cap: #5a5e66;
  --ag-cap-dim: #8a8e96;
  --ag-eyebrow: #5a5e66;
  --ag-accent: var(--terracotta, #9c4a26);
  /* Sortie de la grille étroite "carnet". On déborde du grid parent en
     remettant la largeur à 100% du parent et en s'inscrivant sur les
     trois colonnes (grille du .article-carnet). */
  grid-column: 1 / -1 !important;
  margin: 96px calc(-1 * var(--pad-x)) 0;
  padding: 0;
  background: var(--ag-paper);
  color: var(--ag-ink);
  position: relative;
  isolation: isolate;
}
.article-gallery::before {
  /* La ligne / seuil : on voit qu'on bascule */
  content: "";
  display: block;
  height: 1px;
  background: var(--ag-rule);
  margin: 0 var(--pad-x);
}
.ag-shell {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 96px) var(--pad-x) clamp(72px, 9vw, 120px);
}

/* Header de la galerie : eyebrow + titre + sous-titre / méta à droite */
.ag-head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: end;
  gap: clamp(24px, 4vw, 56px);
  padding-bottom: clamp(40px, 5vw, 64px);
  margin-bottom: clamp(32px, 4vw, 48px);
  border-bottom: 1px solid var(--ag-rule);
}
.ag-eyebrow {
  font-family: "Geist", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ag-eyebrow);
  margin: 0 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.ag-eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--ag-accent);
}
.ag-title {
  font-family: "Geist", sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
  color: var(--ag-ink);
  text-wrap: balance;
  max-width: 18ch;
}
.ag-sub {
  font-family: "Source Serif 4", Georgia, serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ag-cap);
  margin: 0;
  max-width: 36ch;
}
.ag-head-r {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  text-align: right;
}
.ag-count {
  font-family: "Geist", sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--ag-ink);
  font-variant-numeric: tabular-nums;
}
.ag-count-dim {
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ag-cap-dim);
  margin-left: 6px;
  vertical-align: 12px;
}
.ag-project {
  font-family: "Geist", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ag-cap);
}

/* Grille — 12 colonnes, spans variables */
.ag-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(20px, 2.4vw, 36px);
  row-gap: clamp(48px, 6vw, 80px);
}
.ag-item { margin: 0; min-width: 0; }
.ag-span-wide        { grid-column: span 12; }
.ag-span-two-thirds  { grid-column: span 8;  }
.ag-span-third       { grid-column: span 4;  }
.ag-span-half        { grid-column: span 6;  }

.ag-img {
  position: relative;
  width: 100%;
  background: var(--ag-rule);
  overflow: hidden;
  border-radius: 2px;
  aspect-ratio: 4/3;
  transition: aspect-ratio 380ms cubic-bezier(.2,.7,.2,1);
}
.ag-img image-slot {
  --is-bg: var(--ag-rule);
  --is-border: 1px dashed rgba(0,0,0,0.18);
  --is-color: var(--ag-cap-dim);
  transition: transform 520ms cubic-bezier(.2,.7,.2,1);
}
.ag-item:hover .ag-img image-slot { transform: scale(1.035); }

/* Mode "Cadre Auto" : chaque .ag-img a son aspect-ratio inline calculé
   depuis l'image réelle. On désactive le contain visuel sur l'image-slot
   pour qu'elle remplisse exactement le cadre, et on met une couleur de
   fond neutre pour les cas où l'aspect inline ne s'est pas encore calé. */
.is-fit-auto .ag-img { aspect-ratio: 4/3; }
.is-fit-auto .ag-img image-slot { --is-bg: var(--ag-rule); }

/* Poignée de drag — affichée seulement en mode Réorganiser, dans le coin
   sup-gauche de chaque image. */
.ag-handle {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 4;
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 17, 21, 0.78);
  color: #fff;
  border-radius: 8px;
  cursor: grab;
  font-size: 14px;
  letter-spacing: -0.05em;
  font-weight: 700;
  user-select: none;
  -webkit-user-select: none;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
  transition: transform 140ms ease, background 140ms ease;
}
.ag-handle:hover { transform: scale(1.06); background: rgba(15,17,21,.92); }
.ag-handle:active { cursor: grabbing; }

/* Bouton "retirer" — visible seulement en mode Réorganiser. */
.ag-remove {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 4;
  width: 28px; height: 28px;
  border: 0;
  border-radius: 50%;
  background: rgba(15, 17, 21, 0.78);
  color: #fff;
  font: 18px/1 ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 140ms ease, background 140ms ease;
  backdrop-filter: blur(8px);
}
.ag-remove:hover { background: #b3361b; transform: scale(1.06); }

/* Bouton "taille" — cycle la largeur du cadre dans la grille
   (1/3 → 1/2 → 2/3 → Plein). Visible seulement en mode Réorganiser, en bas
   à droite de chaque vignette. */
.ag-size {
  position: absolute;
  bottom: 10px; right: 10px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px 0 9px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 17, 21, 0.78);
  color: #fff;
  font: 600 12px/1 "Geist", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 140ms ease, background 140ms ease, opacity 140ms ease;
  backdrop-filter: blur(8px);
  user-select: none;
}
.ag-size:hover { background: rgba(15,17,21,.92); transform: scale(1.04); }
.ag-size:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.ag-size:disabled:hover { background: rgba(15, 17, 21, 0.78); transform: none; }
.ag-size-icon {
  font-size: 13px;
  font-weight: 700;
  opacity: 0.85;
}
.ag-size-lbl {
  font-variant-numeric: tabular-nums;
}

/* État du drag : la vignette tirée s'estompe, la cible se met en surbrillance */
.ag-item.is-dragging .ag-img { opacity: 0.35; }
.ag-item.is-dragging .ag-cap { opacity: 0.4; }

/* Barre d'insertion — indique précisément OÙ la vignette sera déposée
   (avant ou après la cible survolée). Plus naturel que d'encadrer la
   cible elle-même. */
.ag-item.is-drop-target { position: relative; }
.ag-item.is-drop-target::before {
  content: "";
  position: absolute;
  background: var(--terracotta, #9c4a26);
  z-index: 5;
  pointer-events: none;
  border-radius: 6px;
  animation: ag-pulse 1.2s ease-in-out infinite;
  box-shadow: 0 0 0 3px rgba(156, 74, 38, 0.18);
}
/* Vignette "normale" (pas pleine largeur) → barre VERTICALE
   sur le bord gauche (insert avant) ou droit (insert après) */
.ag-item.is-drop-target.is-drop-before::before {
  left: -10px; right: auto;
  top: 4px; bottom: 4px;
  width: 4px;
}
.ag-item.is-drop-target.is-drop-after::before {
  right: -10px; left: auto;
  top: 4px; bottom: 4px;
  width: 4px;
}
/* Pour une vignette pleine largeur (wide), barre HORIZONTALE */
.ag-item.is-drop-target.ag-span-wide.is-drop-before::before {
  left: 4px; right: 4px;
  top: -10px; bottom: auto;
  width: auto; height: 4px;
}
.ag-item.is-drop-target.ag-span-wide.is-drop-after::before {
  left: 4px; right: 4px;
  bottom: -10px; top: auto;
  width: auto; height: 4px;
}
.is-fond-encre .ag-item.is-drop-target::before {
  background: #f4d6b6;
  box-shadow: 0 0 0 3px rgba(244, 214, 182, 0.22);
}
@keyframes ag-pulse {
  0%, 100% { opacity: 1; transform: scaleY(1); }
  50%      { opacity: 0.7; transform: scaleY(0.92); }
}
.ag-item.is-drop-target.ag-span-wide::before {
  animation: ag-pulse-h 1.2s ease-in-out infinite;
}
@keyframes ag-pulse-h {
  0%, 100% { opacity: 1; transform: scaleX(1); }
  50%      { opacity: 0.7; transform: scaleX(0.95); }
}

/* En mode Réorganiser, on annonce visuellement qu'on est dans un mode
   différent : très léger fond contrasté sur les vignettes, le curseur
   au survol indique grab. */
.article-gallery.is-reordering .ag-item .ag-img {
  cursor: default;
}
.article-gallery.is-reordering .ag-item {
  transition: transform 200ms cubic-bezier(.2,.7,.2,1);
}
/* L'image-slot ignore désormais nativement les drags qui ne portent pas de
   fichier (voir image-slot.js), donc plus besoin de désactiver ses
   pointer-events en mode Réorganiser. Le drag de la poignée passe à la
   figure parente, et un drop fichier est toujours accepté par le slot. */

/* Vignette "+ Ajouter une photo" — apparaît en fin de grille en mode édition.
   Style proche d'une image-slot vide mais explicitement bouton. */
.ag-add {
  appearance: none;
  border: 1.5px dashed var(--ag-cap-dim);
  background: transparent;
  border-radius: 2px;
  aspect-ratio: 4/3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  color: var(--ag-cap);
  font: inherit;
  text-align: center;
  padding: 28px 32px;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease;
  min-height: 200px;
}
.ag-add:hover {
  border-color: var(--ag-ink);
  color: var(--ag-ink);
  background: rgba(0,0,0,0.02);
  transform: translateY(-1px);
}
.is-fond-encre .ag-add { border-color: rgba(244,244,246,0.35); color: rgba(244,244,246,0.7); }
.is-fond-encre .ag-add:hover { border-color: rgba(244,244,246,0.85); color: #fff; background: rgba(255,255,255,0.04); }
.is-fond-creme .ag-add:hover { background: rgba(31, 26, 20, 0.04); }
.ag-add-plus {
  font-size: 38px;
  font-weight: 300;
  line-height: 1;
  color: inherit;
}
.ag-add-lbl {
  font-family: "Geist", sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  color: inherit;
}
.ag-add-hint {
  font-family: "Source Serif 4", Georgia, serif;
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ag-cap-dim);
  max-width: 28ch;
}

/* État désactivé pour le bouton Ratio (en mode Cadre Auto) */
.article-edit-toggle.is-disabled {
  opacity: 0.42;
  cursor: not-allowed;
}
.article-edit-toggle.is-disabled:hover {
  background: var(--paper);
  border-color: var(--rule-2);
  color: var(--ink-2);
}

@media (max-width: 720px) {
  .ag-add { min-height: 160px; padding: 22px; }
  .ag-handle { width: 28px; height: 28px; top: 8px; left: 8px; }
  .ag-remove { width: 24px; height: 24px; top: 8px; right: 8px; font-size: 16px; }
}

/* ─────────────────────────────────────────────────────────────────────
   LIGHTBOX — clic sur une photo → ouverture en plein écran avec légende
   ───────────────────────────────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 17, 21, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 4vw, 80px);
  cursor: zoom-out;
  animation: lightbox-fade 220ms ease both;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
@keyframes lightbox-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.lightbox-close {
  position: absolute;
  top: 24px;
  right: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 0;
  font: 22px/1 ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
  transition: background 140ms ease, transform 140ms ease;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.22); transform: scale(1.06); }
.lightbox-stage {
  max-width: min(96vw, 1600px);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 1.4vw, 22px);
  cursor: default;
  animation: lightbox-rise 280ms cubic-bezier(.2,.7,.2,1) both;
}
@keyframes lightbox-rise {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.lightbox-img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 220px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox-cap {
  margin: 0;
  max-width: 70ch;
  font-family: "Source Serif 4", Georgia, serif;
  font-style: italic;
  font-size: clamp(13.5px, 1vw, 15.5px);
  line-height: 1.5;
  color: rgba(244, 244, 246, 0.78);
  text-align: center;
  text-wrap: pretty;
  letter-spacing: 0.005em;
}
@media (max-width: 720px) {
  .lightbox { padding: 20px; }
  .lightbox-close { top: 12px; right: 12px; width: 38px; height: 38px; }
  .lightbox-img { max-height: calc(100vh - 160px); }
  .lightbox-cap { font-size: 13px; }
}

/* Curseur "zoom-in" sur les images cliquables (hors mode éditorial) */
.ag-img,
.aii-frame,
.article-cover {
  cursor: zoom-in;
}
.article-gallery.is-reordering .ag-img { cursor: default; }
image-slot[data-reframe] ~ * .ag-img,
.aii-frame:has(image-slot[data-reframe]),
.article-cover:has(image-slot[data-reframe]) {
  cursor: default;
}

/* Ratios */
.is-ratio-43 .ag-img { aspect-ratio: 4/3; }
.is-ratio-32 .ag-img { aspect-ratio: 3/2; }
.is-ratio-mixte .ag-span-wide .ag-img       { aspect-ratio: 21/9; }
.is-ratio-mixte .ag-span-two-thirds .ag-img { aspect-ratio: 4/3; }
.is-ratio-mixte .ag-span-third .ag-img      { aspect-ratio: 3/4; }
.is-ratio-mixte .ag-span-half .ag-img       { aspect-ratio: 4/5; }

/* Rythme régulier — tous en 1/2, ratio uniforme */
.is-rythme-regulier .ag-grid {
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(20px, 2.4vw, 36px);
  row-gap: clamp(40px, 5vw, 64px);
}
.is-rythme-regulier .ag-item { grid-column: auto / auto !important; }
.is-rythme-regulier .ag-img { aspect-ratio: 4/3; }
.is-rythme-regulier.is-ratio-32 .ag-img { aspect-ratio: 3/2; }

/* Sous-titres — même DNA que les figcaption d'article (italique serif),
   préfixés d'un numéro en Geist. Visibles par défaut dans la galerie. */
.ag-cap {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  margin-top: 14px;
  align-items: baseline;
}
.ag-cap-n {
  font-family: "Geist", sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ag-cap-dim);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
  border-top: 1px solid var(--ag-rule);
}
.ag-cap-t {
  font-family: "Source Serif 4", Georgia, serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ag-cap);
  max-width: 52ch;
  text-wrap: pretty;
}

.ag-foot {
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: 24px;
  border-top: 1px solid var(--ag-rule);
  font-family: "Geist", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ag-cap-dim);
  text-align: center;
}

/* ── Variante FOND : papier (blanc pur) — défaut au-dessus ──────────── */
.is-fond-papier {
  --ag-paper: #ffffff;
  --ag-ink: #0f1115;
  --ag-rule: #ececef;
  --ag-cap: #5a5e66;
  --ag-cap-dim: #8a8e96;
  --ag-eyebrow: #5a5e66;
}

/* ── Variante FOND : crème inverse — rappel discret du carnet ───────── */
.is-fond-creme {
  --ag-paper: #ebe0ca;
  --ag-ink: #1f1a14;
  --ag-rule: #d2c6ad;
  --ag-cap: rgba(31, 26, 20, 0.62);
  --ag-cap-dim: rgba(31, 26, 20, 0.42);
  --ag-eyebrow: rgba(31, 26, 20, 0.62);
}
.is-fond-creme .ag-img { background: #d9cdb4; }

/* ── Variante FOND : encre (sombre) — vraie bascule, "salle d'expo" ── */
.is-fond-encre {
  --ag-paper: #0f1115;
  --ag-ink: #f4f4f6;
  --ag-rule: rgba(255,255,255,0.10);
  --ag-cap: rgba(244, 244, 246, 0.72);
  --ag-cap-dim: rgba(244, 244, 246, 0.42);
  --ag-eyebrow: rgba(244, 244, 246, 0.7);
}
.is-fond-encre .ag-img { background: #1a1d22; }
.is-fond-encre .ag-img image-slot {
  --is-bg: #1a1d22;
  --is-border: 1px dashed rgba(255,255,255,0.18);
  --is-color: rgba(244,244,246,0.5);
}

/* Quand la galerie est en encre, on prolonge le fond sous le footer
   pour que la bascule soit franche jusqu'au bas de page. */
.article-page:has(.article-gallery.is-fond-encre) ~ .foot,
.article-carnet:has(.article-gallery.is-fond-encre) ~ .foot { /* no-op fallback */ }
.article-gallery.is-fond-encre::before { background: rgba(255,255,255,0.12); }
.article-gallery.is-fond-creme::before { background: var(--ag-rule); }

/* Responsive — galerie */
@media (max-width: 1024px) {
  .ag-head { grid-template-columns: 1fr; align-items: start; }
  .ag-head-r { align-items: flex-start; text-align: left; flex-direction: row; gap: 24px; align-items: baseline; }
  .ag-count { font-size: 40px; }
  .ag-span-two-thirds { grid-column: span 12; }
  .ag-span-third { grid-column: span 6; }
}
@media (max-width: 720px) {
  .article-gallery { margin-top: 56px; }
  .ag-shell { padding-top: 48px; padding-bottom: 64px; }
  .ag-grid {
    grid-template-columns: 1fr;
    row-gap: 40px;
  }
  .ag-item { grid-column: 1 / -1 !important; }
  .ag-title { font-size: 30px; max-width: none; }
  .ag-sub { font-size: 15px; }
  .ag-count { font-size: 30px; }
  .ag-img,
  .is-ratio-mixte .ag-span-wide .ag-img,
  .is-ratio-mixte .ag-span-two-thirds .ag-img,
  .is-ratio-mixte .ag-span-third .ag-img,
  .is-ratio-mixte .ag-span-half .ag-img { aspect-ratio: 4/3; }
  .ag-cap { grid-template-columns: 28px 1fr; gap: 10px; margin-top: 10px; }
  .ag-cap-t { font-size: 13.5px; }
}


/* ─── Administration projets (panneau Tweaks) ──────────────────────── */
/* Liste éditable des projets, accessible quand le mode Tweaks est actif. */
.adm-projects {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.adm-row {
  background: rgba(0,0,0,.035);
  border-radius: 7px;
  overflow: hidden;
  transition: background .12s ease;
}
.adm-row.is-expanded { background: rgba(0,0,0,.06); }
.adm-row.is-off .adm-title-txt { color: rgba(41,38,27,.45); text-decoration: line-through; text-decoration-color: rgba(41,38,27,.25); }

.adm-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 6px;
}
.adm-title {
  flex: 1;
  min-width: 0;
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  padding: 1px 0;
  cursor: default;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.adm-title:hover .adm-title-txt { color: #29261b; }
.adm-title-txt {
  font-weight: 500;
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.adm-years {
  font-size: 10px;
  color: rgba(41,38,27,.5);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.adm-chev {
  color: rgba(41,38,27,.5);
  font-size: 9px;
  padding: 0 4px 0 0;
  flex-shrink: 0;
}

.adm-body {
  padding: 10px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  border-top: .5px solid rgba(0,0,0,.08);
}
.adm-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.adm-field > span {
  font-size: 10px;
  color: rgba(41,38,27,.62);
  font-weight: 500;
  letter-spacing: .01em;
}
.adm-field > span em {
  font-style: normal;
  color: rgba(41,38,27,.4);
  font-weight: 400;
}
.adm-field input,
.adm-field select,
.adm-field textarea {
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 5px 8px;
  border: .5px solid rgba(0,0,0,.12);
  border-radius: 6px;
  background: rgba(255,255,255,.7);
  color: inherit;
  font: inherit;
  font-size: 11px;
  outline: none;
}
.adm-field input:focus,
.adm-field select:focus,
.adm-field textarea:focus {
  border-color: rgba(0,0,0,.32);
  background: rgba(255,255,255,.92);
}
.adm-field input:disabled {
  color: rgba(41,38,27,.45);
  background: rgba(255,255,255,.35);
  cursor: not-allowed;
}
.adm-field textarea {
  resize: vertical;
  min-height: 50px;
  line-height: 1.4;
  font-family: inherit;
}
.adm-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.adm-field select {
  padding-right: 22px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='rgba(0,0,0,.5)' d='M0 0h10L5 6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.adm-stats {
  font-size: 10px;
  color: rgba(41,38,27,.6);
  padding-top: 2px;
  display: flex;
  gap: 4px;
  align-items: baseline;
  flex-wrap: wrap;
}
.adm-stats b {
  font-weight: 600;
  color: rgba(41,38,27,.85);
}
.adm-stats-sep { color: rgba(41,38,27,.3); }

.adm-delete {
  appearance: none;
  border: .5px solid rgba(180,40,40,.3);
  background: rgba(220,80,80,.08);
  color: #a02828;
  padding: 6px 10px;
  border-radius: 6px;
  font: inherit;
  font-size: 10.5px;
  font-weight: 500;
  cursor: default;
  margin-top: 4px;
  letter-spacing: 0;
}
.adm-delete:hover {
  background: rgba(220,80,80,.16);
  border-color: rgba(180,40,40,.45);
}
.adm-hint {
  font-size: 10px;
  color: rgba(41,38,27,.5);
  font-style: italic;
  line-height: 1.4;
  margin: 4px 0 0;
}


/* ─── Filtre par type (panneau Tweaks) ─────────────────────────────── */
.adm-kinds {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.adm-kind {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px 5px 6px;
  border-radius: 6px;
  background: rgba(0,0,0,.03);
}
.adm-kind.is-off { opacity: 0.55; }
.adm-kind-lbl {
  display: flex;
  flex: 1;
  align-items: baseline;
  justify-content: space-between;
  min-width: 0;
  gap: 8px;
}
.adm-kind-name {
  font-weight: 500;
  font-size: 11.5px;
  color: inherit;
}
.adm-kind.is-off .adm-kind-name {
  text-decoration: line-through;
  text-decoration-color: rgba(41,38,27,.3);
  color: rgba(41,38,27,.55);
}
.adm-kind-meta {
  font-size: 10px;
  color: rgba(41,38,27,.5);
  font-variant-numeric: tabular-nums;
}

/* ─── Variantes médias dans l'Accueil / pages filtrées ─────────────── */
/* Les médias n'ont pas de body ni d'image : le rendu se densifie pour     */
/* ne pas laisser de placeholder vide.                                    */
.entry-arch.no-image { background: rgba(0,0,0,.02); border-radius: 8px;
  padding: 16px 18px; }
.entry-arch-source,
.entry-row-source,
.entry-source {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--ink-3);
  font-style: italic;
}
.entry-arch.no-image .entry-arch-source { margin-top: 4px; }

/* ════════════════════════════════════════════════════════════════════
   BUILD PUBLIC — site de consultation (lotfi.photo en ligne)
   --------------------------------------------------------------------
   Sur le site publié, il n'y a pas d'hôte d'édition : on masque toute
   la chrome éditoriale (réglages galerie, réordonnancement, flèches et
   redimensionnement des images, ajout/retrait de photos). Le clic sur
   une image (lightbox) et le lien « ← Retour » restent actifs.
   Ce bloc n'existe que dans publish/ — le projet modifiable garde ses
   outils.
   ════════════════════════════════════════════════════════════════════ */
.article-edit-tools,
.aii-controls,
.ag-add,
.ag-handle,
.ag-remove { display: none !important; }