@charset "UTF-8";
/* ==========================================================================
   Thomas Nicol — feuille de style
   Direction : salle obscure / super 8. Pourpre-noir de projection, blanc
   écran argenté, or tungstène (la lampe du projecteur), Courier de scénario
   pour les métadonnées.

   → Pour changer la palette ou les polices : tout est ici, dans :root.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables
   -------------------------------------------------------------------------- */
:root {
  --ink:        #140d13;   /* pourpre-noir, fond général            */
  --ink-2:      #1c131b;   /* panneaux                              */
  --ink-3:      #261a25;   /* surfaces survolées                    */
  --bone:       #ece3e6;   /* blanc écran, texte principal          */
  --bone-soft:  #c9bac4;   /* paragraphes                           */
  --dim:        #a08e9b;   /* métadonnées                           */
  --dimmer:     #8b7a88;   /* légendes, mentions                    */
  --signal:     #d9a648;   /* or tungstène : accents, liens         */
  --signal-hi:  #e4b258;   /* or au survol                          */
  --signal-dim: #8a6522;   /* soulignements discrets                */
  --rec:        #e5484d;   /* rouge REC (mode projection)           */
  --rule:       rgba(236, 227, 230, .13);
  --rule-soft:  rgba(236, 227, 230, .07);

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Newsreader", Georgia, "Times New Roman", serif;
  --font-mono:    "Courier Prime", "Courier New", Courier, monospace;

  --shell:   min(1320px, 100% - 2 * var(--gutter));
  --gutter:  clamp(1.25rem, 5vw, 5rem);
  --prose:   68ch;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   2. Réinitialisation
   -------------------------------------------------------------------------- */
/* Les réglages globaux s'arrêtent à la porte du lecteur cassette (.cp-root) :
   il se positionne en pourcentages d'une scène virtuelle, une règle img,
   button ou box-sizing globale suffirait à le décaler. :where() garde ces
   règles à spécificité nulle, comme avant. */
:where(:not(.cp-root *)),
:where(:not(.cp-root *))::before,
:where(:not(.cp-root *))::after { box-sizing: border-box; }
:where(:not(.cp-root *)) { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--dimmer) var(--ink);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

:where(img, svg, iframe, video):where(:not(.cp-root *)) { display: block; max-width: 100%; }
:where(img):where(:not(.cp-root *)) { height: auto; }

:where(a):where(:not(.cp-root *)) { color: inherit; text-decoration: none; }

:where(button):where(:not(.cp-root *)) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--signal); color: var(--ink); }

:where(:focus-visible):where(:not(.cp-root *)) {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Grain argentique — la pellicule qui vit, très discret. */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 9999;
  pointer-events: none;
  opacity: .034;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
}
@media (prefers-reduced-motion: no-preference) {
  body::after { animation: grain 1.1s steps(6) infinite; }
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-2%, 1%); }
  40%  { transform: translate(1%, -2%); }
  60%  { transform: translate(-1%, 2%); }
  80%  { transform: translate(2%, 1%); }
  100% { transform: translate(0, 0); }
}

/* Vignettage — les coins sombres d'une projection. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background: radial-gradient(ellipse 108% 96% at 50% 44%,
              transparent 58%, rgba(8, 4, 8, .42) 100%);
}

/* --------------------------------------------------------------------------
   3. Typographie
   -------------------------------------------------------------------------- */
:where(h1, h2, h3, h4):where(:not(.cp-root *)) {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.display-xl { font-size: clamp(3rem, 1.4rem + 7.2vw, 8.5rem); line-height: .92; letter-spacing: -.03em; font-weight: 350; }
.display-l  { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.75rem); line-height: 1; letter-spacing: -.022em; }
.display-m  { font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.9rem); }
.display-s  { font-size: clamp(1.35rem, 1.15rem + .85vw, 1.85rem); }

em, i { font-style: italic; }

/* Newsreader n'est chargée que jusqu'à la graisse 600 : sans cette règle le
   navigateur en synthétise une plus lourde, qui jure avec le reste. */
strong, b { font-weight: 600; color: var(--bone); }

/* Étiquette monospace : « 01 / Sélection » */
.label {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
}
.label--signal { color: var(--signal); }

.meta {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--dim);
  line-height: 1.7;
}

.lede {
  font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem);
  line-height: 1.5;
  color: var(--bone);
  text-wrap: pretty;
}

/* Sous-titre des pages intérieures. Volontairement discret : le visiteur
   vient pour les projets, pas pour une phrase de présentation. */
.sous-titre {
  font-size: clamp(.92rem, .88rem + .2vw, 1.02rem);
  line-height: 1.55;
  color: var(--dim);
  max-width: 54ch;
  text-wrap: pretty;
}

/* Lien de texte : soulignement fin qui se recolore au survol. */
.link {
  background-image: linear-gradient(var(--signal), var(--signal));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  border-bottom: 1px solid var(--rule);
  transition: background-size .38s var(--ease), color .2s;
  padding-bottom: 1px;
}
.link:hover, .link:focus-visible { background-size: 100% 1px; }

.prose a:not(.link):not(.btn):where(:not(.cp-root *)) {
  border-bottom: 1px solid var(--signal-dim);
  transition: border-color .2s, color .2s;
}
.prose a:not(.link):not(.btn):where(:not(.cp-root *)):hover { color: var(--signal); border-color: var(--signal); }

/* --------------------------------------------------------------------------
   4. Mise en page générique
   -------------------------------------------------------------------------- */
.shell { width: var(--shell); margin-inline: auto; }

.section { padding-block: clamp(4rem, 9vw, 8.5rem); }
.section + .section { padding-top: 0; }

.section-head {
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-bottom: 1.15rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.section-head h2 { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.35rem); }
.section-head .label { flex: none; padding-top: .35em; }
.section-head .head-link { margin-left: auto; flex: none; }

.rule { border: 0; border-top: 1px solid var(--rule); }

/* Onde — signature graphique. Barres verticales de hauteurs variables. */
.wave { display: flex; align-items: flex-end; gap: 3px; height: 26px; }
.wave span {
  width: 2px;
  background: currentColor;
  opacity: .55;
  transform-origin: bottom;
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { transform: scaleY(.35); }
  50%      { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .wave span { animation: none; }
}

/* --------------------------------------------------------------------------
   5. En-tête
   -------------------------------------------------------------------------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--signal); color: var(--ink); padding: .7rem 1.1rem;
  font-family: var(--font-mono); font-size: .78rem;
}
.skip:focus { left: 1rem; top: 1rem; }

.site-header {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background-color .35s var(--ease), border-color .35s var(--ease),
              backdrop-filter .35s var(--ease);
}
.site-header.is-stuck {
  background: rgba(20, 13, 19, .84);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: var(--rule);
}

.header-inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 4.5rem;
}

.wordmark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  letter-spacing: -.01em;
  line-height: 1;
  white-space: nowrap;
}
.wordmark span { color: var(--signal); }

.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: clamp(.4rem, 1.6vw, 1.4rem); list-style: none; padding: 0; }
.site-nav a {
  display: block;
  padding: .45rem .3rem;
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bone-soft);
  position: relative;
  transition: color .22s;
}
.site-nav a::after {
  content: ""; position: absolute; left: .3rem; right: .3rem; bottom: .15rem;
  height: 1px; background: var(--signal);
  transform: scaleX(0); transform-origin: left;
  transition: transform .32s var(--ease);
}
.site-nav a:hover { color: var(--bone); }
.site-nav a:hover::after { transform: scaleX(1); }
.site-nav a[aria-current="page"] { color: var(--bone); }
.site-nav a[aria-current="page"]::after { transform: scaleX(1); background: var(--bone); opacity: .45; }

.lang-switch {
  display: flex; align-items: center; gap: .35rem;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em;
  padding-left: clamp(.5rem, 1.5vw, 1.25rem);
  margin-left: clamp(.25rem, 1vw, .75rem);
  border-left: 1px solid var(--rule);
}
.lang-switch a { color: var(--dimmer); transition: color .2s; }
.lang-switch a:hover { color: var(--bone); }
.lang-switch [aria-current="true"] { color: var(--bone); }
.lang-switch .sep { color: var(--dimmer); }

.nav-toggle { display: none; }

/* --------------------------------------------------------------------------
   6. Hero d'accueil
   -------------------------------------------------------------------------- */
.hero { position: relative; padding-block: clamp(2.5rem, 7vw, 6rem) clamp(3rem, 7vw, 6.5rem); }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, .68fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
}

.hero h1 { margin-bottom: clamp(1.25rem, 3vw, 2.25rem); }
.hero h1 .given { display: block; color: var(--bone); }
.hero h1 .family {
  display: block;
  font-style: italic;
  margin-left: .06em;
  color: var(--bone);
}

.hero-role {
  font-family: var(--font-mono);
  font-size: clamp(.72rem, .66rem + .22vw, .84rem);
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: clamp(1.4rem, 3vw, 2rem);
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
}
.hero-role .wave { color: var(--signal); height: 15px; }

.hero-lede { max-width: 46ch; margin-bottom: 1rem; }
.hero-proof {
  font-family: var(--font-mono); font-size: .8rem; color: var(--dim);
  letter-spacing: .02em;
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.hero-portrait { position: relative; }
.hero-portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;
  filter: saturate(.85) contrast(1.05) brightness(.94);
}
.hero-portrait::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--ink) 2%, transparent 42%);
  pointer-events: none;
}
.hero-portrait figcaption {
  position: absolute; left: 0; bottom: .6rem;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim);
}

/* Boutons — rectangles sobres. Le caractère vient de la typo et de l'or,
   pas de la forme : filet d'un pixel, remplissage au survol. */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: 1rem;
  padding: 1rem 1.9rem;
  font-family: var(--font-mono); font-size: .78rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid var(--rule);
  background: transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease),
              color .3s var(--ease);
}
.btn:hover, .btn:focus-visible {
  background: var(--bone); border-color: var(--bone); color: var(--ink);
}
/* Encre pourpre sur or tungstène : 8,7:1. */
.btn--primary { background: var(--signal); border-color: var(--signal); color: var(--ink); }
.btn--primary:hover, .btn--primary:focus-visible {
  background: var(--signal-hi); border-color: var(--signal-hi); color: var(--ink);
}
.btn .arrow { transition: transform .3s var(--ease); }
.btn:hover .arrow { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   7. Bandeau de références
   -------------------------------------------------------------------------- */
.refs {
  border-block: 1px solid var(--rule);
  padding-block: clamp(1.1rem, 2.4vw, 1.75rem);
}
.refs ul {
  display: flex; flex-wrap: wrap; list-style: none; padding: 0;
  gap: .5rem clamp(1rem, 3vw, 2.75rem);
  font-family: var(--font-mono); font-size: .76rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--dim);
}
.refs li { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.75rem); }
.refs li:not(:last-child)::after {
  content: ""; width: 3px; height: 3px; border-radius: 50%;
  background: var(--dimmer); flex: none;
}

/* --------------------------------------------------------------------------
   8. Projets en vedette (accueil)
   -------------------------------------------------------------------------- */
.features { display: grid; gap: clamp(3rem, 7vw, 6rem); }

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: center;
}
.feature:nth-child(even) .feature-media { order: 2; }

.feature-media { position: relative; overflow: hidden; background: var(--ink-2); }
.feature-media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  filter: saturate(.55) contrast(1.05) brightness(.88);
  transition: transform .9s var(--ease), filter .7s var(--ease);
}
.feature:hover .feature-media img,
.feature:focus-within .feature-media img {
  transform: scale(1.035);
  filter: saturate(1) contrast(1.02) brightness(1);
}
.feature-idx {
  position: absolute; top: 0; left: 0; z-index: 2;
  padding: .55rem .8rem;
  background: var(--ink);
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .16em;
  color: var(--signal);
}

.feature-body h3 { margin-bottom: .85rem; }
.feature-body h3 a { display: inline; }
.feature-body h3 a::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
}
.feature-body { position: relative; }
.feature-tags {
  display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-bottom: 1rem;
  font-family: var(--font-mono); font-size: .74rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
}
.feature-tags .tag--year { color: var(--bone-soft); }
.feature-tags .tag--broadcaster { color: var(--signal); }
.feature-role { color: var(--bone-soft); margin-bottom: 1rem; }
.feature-synopsis { color: var(--dim); font-size: .95rem; max-width: 52ch; }
.feature-cta {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.2rem;
  font-family: var(--font-mono); font-size: .74rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--bone);
}
.feature-cta .arrow { transition: transform .3s var(--ease); }
.feature:hover .feature-cta .arrow { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   9. Grille de projets (page /projets)
   -------------------------------------------------------------------------- */
.grid-works {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem);
  list-style: none; padding: 0;
}
.card { position: relative; }
.card-media { overflow: hidden; background: var(--ink-2); margin-bottom: 1.1rem; }
.card-media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  filter: saturate(.55) brightness(.87);
  transition: transform .8s var(--ease), filter .6s var(--ease);
}
.card:hover .card-media img, .card:focus-within .card-media img {
  transform: scale(1.04); filter: saturate(1) brightness(1);
}
.card h3 { font-size: 1.45rem; margin-bottom: .5rem; }
.card h3 a::after { content: ""; position: absolute; inset: 0; }
.card .meta { display: flex; flex-wrap: wrap; gap: .3rem .8rem; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; }
.card .meta .year { color: var(--bone-soft); }
.card-role { color: var(--dim); font-size: .92rem; margin-top: .55rem; }

/* --------------------------------------------------------------------------
   10. Index (filmographie, distinctions)
   -------------------------------------------------------------------------- */
.index-group + .index-group { margin-top: clamp(2rem, 4vw, 3rem); }
.index-group > h3 {
  font-family: var(--font-mono); font-size: .74rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--signal);
  padding-bottom: .75rem; border-bottom: 1px solid var(--rule); margin-bottom: .5rem;
}

.index-list { list-style: none; padding: 0; }
.index-list > li { border-bottom: 1px solid var(--rule-soft); }

.index-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0 clamp(.9rem, 2vw, 1.5rem);
  padding-block: .58rem;
  align-items: baseline;
  transition: background-color .3s var(--ease);
}
.index-row .year {
  font-family: var(--font-mono); font-size: .74rem; letter-spacing: .06em;
  color: var(--dim); padding-top: .25em;
}
.index-row .title { font-family: var(--font-display); font-size: 1.12rem; line-height: 1.2; }
.index-row .detail {
  color: var(--dim); font-size: .82rem; line-height: 1.45; margin-top: .1rem;
}

a.index-row { position: relative; }
a.index-row:hover { background: var(--ink-2); }
a.index-row:hover .title { color: var(--signal); }
a.index-row .title::after {
  content: " ↗"; font-family: var(--font-mono); font-size: .62em;
  color: var(--dimmer); vertical-align: .35em;
  transition: color .25s;
}
a.index-row:hover .title::after { color: var(--signal); }

/* Distinctions */
.awards { list-style: none; padding: 0; }
.awards li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0 clamp(.9rem, 2vw, 1.5rem);
  padding-block: .58rem;
  border-bottom: 1px solid var(--rule-soft);
  align-items: baseline;
}
.awards .year { font-family: var(--font-mono); font-size: .74rem; color: var(--signal); }
.awards .place { font-family: var(--font-display); font-size: 1.12rem; line-height: 1.2; }
.awards .what { color: var(--dim); font-size: .82rem; line-height: 1.45; margin-top: .1rem; }

/* --------------------------------------------------------------------------
   11. Fiche projet
   -------------------------------------------------------------------------- */
.article-hero { position: relative; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.article-hero img {
  width: 100%; max-height: 62vh; object-fit: cover;
  filter: brightness(.74) saturate(.75);
}
.article-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, var(--ink) 1%, rgba(20,13,19,.15) 55%);
  pointer-events: none;
}

.breadcrumb {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim);
  padding-block: 1.5rem .5rem;
}
.breadcrumb a:hover { color: var(--bone); }
.breadcrumb .sep { color: var(--dimmer); padding-inline: .5rem; }

.article-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.article-head h1 { margin-bottom: 1.1rem; }
.article-tags {
  display: flex; flex-wrap: wrap; gap: .4rem 1.1rem;
  font-family: var(--font-mono); font-size: .76rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
}
.article-tags .tag--year { color: var(--bone-soft); }
.article-tags .tag--broadcaster { color: var(--signal); }

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.credits {
  position: sticky; top: 6rem;
  border-top: 1px solid var(--rule);
  padding-top: 1.1rem;
}
.credits h2 {
  font-family: var(--font-mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--signal);
  margin-bottom: 1rem;
}
.credits ul { list-style: none; padding: 0; }
.credits li {
  font-family: var(--font-mono); font-size: .78rem; line-height: 1.6;
  color: var(--bone-soft); padding-block: .3rem;
}
.credits .external { margin-top: 1.35rem; display: grid; gap: .5rem; }
.credits .external a {
  font-family: var(--font-mono); font-size: .76rem; color: var(--dim);
  display: flex; gap: .5rem; transition: color .22s;
}
.credits .external a:hover { color: var(--signal); }

/* Corps d'article */
.prose > * + * { margin-top: 1.35rem; }
.prose p:where(:not(.cp-root *)) { max-width: var(--prose); color: var(--bone-soft); }
.prose h2:where(:not(.ditm *)) {
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2.1rem);
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  color: var(--bone);
}
.prose h2 + p { margin-top: 1rem; }
.prose figure { margin-top: clamp(2rem, 4vw, 3rem); }
.prose figure img:where(:not(.ditm *)) { width: 100%; }
.prose figcaption {
  font-family: var(--font-mono); font-size: .72rem; color: var(--dimmer);
  margin-top: .6rem; letter-spacing: .04em;
}

.pullquote {
  border-left: 2px solid var(--signal);
  padding: .2rem 0 .2rem clamp(1.15rem, 2.5vw, 1.9rem);
  margin-block: clamp(1.5rem, 3vw, 2.25rem);
  max-width: var(--prose);
}
.pullquote p {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.2rem, 1.05rem + .65vw, 1.6rem);
  line-height: 1.35; color: var(--bone); max-width: none;
}
.pullquote cite {
  display: block; margin-top: .8rem; font-style: normal;
  font-family: var(--font-mono); font-size: .74rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
}

.embed { position: relative; height: 0; overflow: hidden; background: var(--ink-2); }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed-audio { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

/* Navigation projet suivant / précédent */
.pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--rule); border-block: 1px solid var(--rule);
  margin-top: clamp(3.5rem, 8vw, 6rem);
}
.pager a {
  background: var(--ink); padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.75rem);
  transition: background-color .3s var(--ease);
}
.pager a:hover { background: var(--ink-2); }
.pager .dir {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim); display: block; margin-bottom: .5rem;
}
.pager .name { font-family: var(--font-display); font-size: 1.3rem; }
.pager a:hover .name { color: var(--signal); }
.pager .next { text-align: right; }

/* --------------------------------------------------------------------------
   12. Écoute
   -------------------------------------------------------------------------- */
.listen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  list-style: none; padding: 0;
}
.listen-item h3 { font-size: 1.35rem; margin-bottom: .35rem; }
.listen-item .note { color: var(--dim); font-size: .88rem; margin-bottom: 1rem; }

/* --------------------------------------------------------------------------
   13. Blocs de texte (à propos, contact)
   -------------------------------------------------------------------------- */
.two-col {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.two-col figure img { width: 100%; filter: saturate(.8) contrast(1.05); }

/* La photo de contact fait 960 px de large : au-delà, elle ne doit pas
   rester collée à gauche. */
.contact-photo picture { display: block; }
.contact-photo img { margin-inline: auto; }
.two-col figcaption {
  font-family: var(--font-mono); font-size: .72rem; color: var(--dimmer);
  margin-top: .7rem;
}
.bio-block + .bio-block { margin-top: clamp(2.25rem, 4vw, 3.25rem); }
.bio-block h2 {
  font-family: var(--font-mono); font-size: .74rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--signal);
  margin-bottom: 1rem;
}
.bio-block p { color: var(--bone-soft); max-width: var(--prose); }
.bio-block p + p { margin-top: 1.1rem; }

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1px; background: var(--rule);
  border: 1px solid var(--rule);
}
.contact-card { background: var(--ink); padding: clamp(1.5rem, 3vw, 2.25rem); }
.contact-card h3 {
  font-family: var(--font-mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--dim);
  margin-bottom: .9rem;
}
/* Une adresse e-mail est plus large qu'une carte : on l'autorise à passer
   à la ligne plutôt que de la laisser déborder. */
.contact-card .value {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, .95rem + .35vw, 1.3rem);
  line-height: 1.25;
  overflow-wrap: break-word;
}
.contact-card .value a { border-bottom: 1px solid var(--rule); transition: border-color .25s, color .25s; }
.contact-card .value a:hover { color: var(--signal); border-color: var(--signal); }
.contact-card .sub { color: var(--dim); font-size: .85rem; margin-top: .5rem; }

/* --------------------------------------------------------------------------
   14. Appel à contact
   -------------------------------------------------------------------------- */
/* Bloc de fin de page : l'intitulé, l'adresse, l'éditeur. Volontairement
   sobre — pas d'accroche, pas de bouton. */
.cta {
  border-top: 1px solid var(--rule);
  padding-block: clamp(2.75rem, 6vw, 5rem);
}
.cta .label { display: block; margin-bottom: 1.1rem; }
.contact-mail {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1rem + 1.5vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  overflow-wrap: break-word;
}
.contact-mail a {
  border-bottom: 1px solid var(--rule);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.contact-mail a:hover { color: var(--signal); border-color: var(--signal); }
.contact-editeur {
  margin-top: 1.15rem;
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--dim);
}

/* --------------------------------------------------------------------------
   15. Pied de page
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: clamp(2.5rem, 5vw, 4rem) 2rem;
  margin-top: clamp(3rem, 7vw, 6rem);
}
.footer-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.footer-col h2 {
  font-family: var(--font-mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--dimmer);
  margin-bottom: 1rem;
}
.footer-col ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
.footer-col a { color: var(--bone-soft); font-size: .92rem; transition: color .22s; }
.footer-col a:hover { color: var(--signal); }
.footer-brand .wordmark { margin-bottom: .9rem; }
.footer-brand p { color: var(--dim); font-size: .88rem; max-width: 30ch; }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: .75rem 2rem; align-items: center;
  border-top: 1px solid var(--rule-soft); padding-top: 1.5rem;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em;
  color: var(--dimmer);
}
.footer-bottom .wave { color: var(--dimmer); height: 13px; margin-left: auto; }

/* --------------------------------------------------------------------------
   16. Apparition au défilement
   -------------------------------------------------------------------------- */
/* L'état masqué n'est appliqué que si JavaScript s'exécute : sans lui,
   tout le contenu reste visible. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(22px); }
  .js .reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity .8s var(--ease), transform .8s var(--ease);
  }
  .js .reveal.is-in:nth-child(2) { transition-delay: .07s; }
  .js .reveal.is-in:nth-child(3) { transition-delay: .14s; }
  .js .reveal.is-in:nth-child(4) { transition-delay: .21s; }

  /* Entrée de page, échelonnée */
  .js .stagger > * { animation: rise .9s var(--ease) both; }
  .js .stagger > :nth-child(1) { animation-delay: .05s; }
  .js .stagger > :nth-child(2) { animation-delay: .13s; }
  .js .stagger > :nth-child(3) { animation-delay: .21s; }
  .js .stagger > :nth-child(4) { animation-delay: .29s; }
  .js .stagger > :nth-child(5) { animation-delay: .37s; }
  @keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
}

/* --------------------------------------------------------------------------
   17. Adaptatif
   -------------------------------------------------------------------------- */
@media (max-width: 62rem) {
  .hero-grid { grid-template-columns: 1fr; align-items: start; }
  .hero-portrait { order: -1; max-width: 22rem; }
  .hero-portrait img { aspect-ratio: 1; }
  .feature, .article-layout, .two-col { grid-template-columns: 1fr; }
  .feature:nth-child(even) .feature-media { order: 0; }
  .credits { position: static; }

}

@media (max-width: 48rem) {
  .nav-toggle {
    display: inline-flex; align-items: center; gap: .55rem;
    margin-left: auto;
    font-family: var(--font-mono); font-size: .74rem;
    letter-spacing: .14em; text-transform: uppercase;
    padding: .5rem 0;
  }
  .nav-toggle .bars { display: grid; gap: 4px; width: 18px; }
  .nav-toggle .bars i { display: block; height: 1px; background: currentColor; transition: transform .3s var(--ease), opacity .3s; }
  .nav-toggle[aria-expanded="true"] .bars i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bars i:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .bars i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

  .site-nav {
    position: fixed; inset: 4.5rem 0 auto 0;
    background: rgba(20,13,19,.97);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--rule);
    padding: 1rem var(--gutter) 2rem;
    margin-left: 0;
    display: none;
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a {
    padding: .95rem 0; font-size: .9rem; letter-spacing: .12em;
    border-bottom: 1px solid var(--rule-soft);
  }
  .site-nav a::after { display: none; }

  .lang-switch { order: 3; }
  .header-inner { flex-wrap: wrap; }

  .index-row { grid-template-columns: 1fr; gap: .35rem; }
  .index-row .year { order: -1; }
  .awards { }
  .awards li { grid-template-columns: 1fr; gap: .3rem; }
  .pager { grid-template-columns: 1fr; }
  .pager .next { text-align: left; }
  .article-hero img { max-height: 45vh; }
}

/* --------------------------------------------------------------------------
   18. La couche projectionniste — sons, pellicule
   -------------------------------------------------------------------------- */

/* Perforations super 8 sur les visuels vedettes et les bandeaux d'articles. */
.feature-media::after,
.article-hero::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 15px;
  z-index: 2;
  pointer-events: none;
  background-color: rgba(12, 6, 11, .88);
  background-image: radial-gradient(3px 4.5px at 7.5px 11px,
                    rgba(236, 227, 230, .32) 97%, transparent 100%);
  background-size: 15px 22px;
  background-repeat: repeat-y;
}
/* Sous le fondu du bas de bandeau (le ::after du .article-hero). */
.article-hero::before { z-index: 0; }

/* Transitions entre pages — le fondu enchaîné du projecteur.
   Les vignettes se prolongent en bandeau d'article (View Transitions API ;
   les navigateurs sans prise en charge naviguent normalement). */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .22s ease both; }
::view-transition-new(root) { animation: vt-in .34s ease both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in  { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* Mode « projection privée » — code Konami. Grain lourd et scintillement ;
   le point du logotype passe au rouge, seul indice visible. */
html.projection body::after { opacity: .085; }
html.projection body::before { animation: flicker 3.2s steps(1) infinite; }
html.projection .wordmark span { color: var(--rec); }
@keyframes flicker {
  0%, 100% { opacity: 1; }
  7%  { opacity: .82; }
  9%  { opacity: 1; }
  54% { opacity: .88; }
  56% { opacity: 1; }
  81% { opacity: .8; }
  83% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html.projection body::before { animation: none; }
}

/* --------------------------------------------------------------------------
   19. Fond vidéo de l'accueil — séance d'enregistrement
   --------------------------------------------------------------------------
   Le flou et l'étalonnage sont incrustés dans le fichier, pas appliqués en
   CSS : un filter: blur() sur une vidéo se recalcule à chaque image, plein
   écran, et c'est le premier poste de dépense sur un appareil modeste.
   Ici le navigateur ne fait que décoder et composer une opacité.           */

.hero { position: relative; isolation: isolate; }

/* Pleine largeur de fenêtre (le body coupe déjà tout débord horizontal),
   puis un masque fond l'image dans le noir sur les côtés et en haut : aucun
   bord franc, quelle que soit la largeur d'écran. Le bas est déjà fondu par
   le voile. */
.hero-fond {
  position: absolute;
  top: -2rem; bottom: 0;
  left: 50%; width: 100vw; margin-left: -50vw;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 16%, #000 84%, transparent),
    linear-gradient(to bottom, transparent, #000 14%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 16%, #000 84%, transparent),
    linear-gradient(to bottom, transparent, #000 14%);
  mask-composite: intersect;
}
.hero-fond video,
.hero-fond img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  opacity: .5;
}

/* Voile DIRECTIONNEL, volontairement léger : il ne fait qu'accompagner la
   colonne de texte. La lisibilité est assurée par le halo posé sous chaque
   ligne (plus bas), si bien que les zones vides laissent voir la séance. */
.hero-fond::after {
  content: "";
  position: absolute; inset: 0;
  background:
    /* colonne de texte, à gauche */
    linear-gradient(to right,
      rgba(20, 13, 19, .45) 0%,
      rgba(20, 13, 19, .25) 40%,
      rgba(20, 13, 19, .08) 60%,
      transparent 75%),
    /* sous l'en-tête, puis fondu dans la page pour n'avoir aucune arête */
    linear-gradient(to bottom,
      rgba(20, 13, 19, .42) 0%,
      transparent 18%,
      transparent 56%,
      var(--ink) 100%);
}

/* Halo : une ombre floue couleur encre, collée aux lettres. Elle protège le
   texte là où il est, et seulement là — entre les lignes et autour du
   bloc, l'image reste pleinement visible. Deux couches : une serrée pour le
   contraste, une large pour adoucir la transition. */
.hero-role,
.hero h1,
.hero-lede {
  text-shadow:
    0 0 .45em rgba(20, 13, 19, .65),
    0 0 1.4em rgba(20, 13, 19, .55);
}
/* Le bouton secondaire, transparent, reçoit un fond d'encre translucide. */
.hero-actions .btn:not(.btn--primary) {
  background: rgba(20, 13, 19, .62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.hero-actions .btn:not(.btn--primary):hover,
.hero-actions .btn:not(.btn--primary):focus-visible { background: var(--bone); }

/* Sans vidéo — mobile, animations réduites, économiseur de données — c'est
   l'image d'affiche qui reste, un peu plus discrète. */
.hero-fond video:not([src]) { opacity: .35; }

/* --------------------------------------------------------------------------
   20. Lecteur cassette interactif (fiche Dog in the Machine)
   --------------------------------------------------------------------------
   Le lecteur pèse ~48 Mo : à l'arrivée, seul un aperçu flouté est affiché,
   aux dimensions exactes du lecteur pour qu'il prenne sa place sans saut.
   Il passe en portrait sous 620 px de conteneur, comme le lecteur. Le flou
   est incrusté dans les images, pas appliqué en CSS.                       */

/* Le lecteur est le final de la fiche : sa propre section, sous l'article,
   sur toute la largeur. */
.article-wide { margin-top: clamp(4rem, 9vw, 7rem); }
.cassette {
  container-type: inline-size;
  padding-top: clamp(3rem, 6vw, 4.5rem);
  border-top: 1px solid var(--rule);
  scroll-margin-top: 4.5rem;         /* l'ancre #lecteur s'arrête sous l'en-tête */
}
.cassette-head {
  max-width: 40rem; margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.cassette-head h2 { margin: .6rem 0 1rem; }
.cassette-head p { color: var(--bone-soft); }

/* Version compacte (page Écouter) : même encombrement que les lecteurs
   Bandcamp et Spotify voisins, aperçu paysage quelle que soit la largeur. */
.cassette--compact { padding-top: 0; border-top: 0; }
.cassette--compact .cassette-apercu { width: 100%; height: 380px; aspect-ratio: auto; }
.cassette--compact .cassette-apercu-l { display: block; }
.cassette--compact .cassette-apercu-p { display: none; }
.credits-appel { width: 100%; justify-content: space-between; margin-bottom: 2.25rem; }
html:not(.js) .cassette { display: none; }   /* rien à faire sans JavaScript */

.cassette-apercu {
  position: relative;
  width: min(100%, 900px, calc((100vh - 120px) * 1600 / 1720));
  width: min(100%, 900px, calc((100svh - 120px) * 1600 / 1720));
  aspect-ratio: 1600 / 1720;
  margin-inline: auto;
  overflow: hidden;
  background: var(--ink-2);
}
.cassette-apercu img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .5;
}
.cassette-apercu-p { display: none; }
.cassette-apercu::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 45% at 50% 50%,
    rgba(20, 13, 19, .72) 0%, transparent 100%);
}
.cassette-appel {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .9rem; padding: 1rem; text-align: center;
}
.cassette .cassette-note {
  font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
  margin: 0;
}
.cassette-go[disabled] { cursor: progress; }

/* En portrait, le lecteur n'est pas réduit pour tenir en hauteur (son texte
   deviendrait illisible) : il prend toute la largeur, la page défile. */
@container (max-width: 619px) {
  .cassette-apercu {
    width: 100%;
    aspect-ratio: 1000 / 2120;
  }
  .cassette-apercu-l { display: none; }
  .cassette-apercu-p { display: block; }
}

/* Le lecteur est monté : l'aperçu lui laisse la place. */
.cassette.is-live .cassette-apercu { display: none; }

/* --------------------------------------------------------------------------
   21. Schéma « De la partition au jeu » (fiche Dog in the Machine)
   --------------------------------------------------------------------------
   Repris du visuel fourni (Communication DiTM), tout est confiné sous
   .ditm. Il vit dans la colonne de texte : les étiquettes sont courtes et
   ne descendent pas sous 11 px. Survol volontairement sobre : la carte
   grossit un peu et passe devant, rien de plus. Le balisage est dans
   _src/blocs/ditm-cascade.<langue>.html.                                   */

.ditm {
  --ditm-arrow: #FFD23F;
  --ditm-tag: #FF5AD9;
  --ditm-bg: #0A0D1F;
  --ditm-ink: #F4F6FD;
  --ditm-soft: #B8C4FF;
  --ditm-kicker: #8EA0FF;
  container-type: inline-size;
  margin: 0;
  font-family: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif;
  color: var(--ditm-ink);
}
.ditm *, .ditm *::before, .ditm *::after { box-sizing: border-box; }

.ditm-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--ditm-bg);
  background-image:
    linear-gradient(rgba(120,140,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,140,255,0.07) 1px, transparent 1px);
  background-size: 2.083cqw 2.083cqw;
}

.ditm-head {
  position: absolute; right: 4.1667%; top: 5.926%;
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.625cqw;
  text-align: right;
}
.ditm-kicker { font-size: 1.042cqw; font-weight: 600; line-height: 1; letter-spacing: 0.18em; color: var(--ditm-kicker); }
.ditm-title { margin: 0; font-size: 4.167cqw; font-weight: 700; line-height: 0.95; letter-spacing: -0.01em; color: var(--ditm-ink); }
.ditm-title span { color: var(--ditm-arrow); }

.ditm-steps { list-style: none; margin: 0; padding: 0; }

.ditm-step {
  position: absolute;
  left: var(--l); top: var(--t);
  width: 33.333%; height: 55.556%;
  z-index: var(--z);
  outline: none;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), filter .35s ease;
}
.ditm-card {
  position: absolute; inset: 0;
  overflow: hidden;
  background: var(--bgc, #111);
  border: 0.156cqw solid #05060F;
  outline: 0.104cqw solid rgba(160,180,255,0.25);
  box-shadow: -1.25cqw 1.25cqw 2.5cqw rgba(0,0,0,0.65), -0.3125cqw 0.3125cqw 0.625cqw rgba(0,0,0,0.5);
  transition: box-shadow .4s ease, outline-color .3s ease;
}
.ditm-card img {
  position: absolute;
  left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  max-width: none;
  display: block;
  transition: left .55s cubic-bezier(.2,.7,.2,1), top .55s cubic-bezier(.2,.7,.2,1), width .55s cubic-bezier(.2,.7,.2,1), height .55s cubic-bezier(.2,.7,.2,1);
}

.ditm-tag {
  position: absolute; z-index: 2;
  left: 2.5%; top: 3.333%; width: 39.06%;
  padding: 0.729cqw 0.9375cqw 0.9375cqw;
  background: rgba(8,10,26,0.92);
  border: max(1px, 0.104cqw) solid var(--c, var(--ditm-tag));
  box-shadow: 0.3125cqw 0.3125cqw 0 var(--c, var(--ditm-tag));
  display: flex; flex-direction: column; gap: 0.52cqw;
}
.ditm-num { font-family: 'Pixelify Sans', 'Courier New', monospace; font-size: 2.083cqw; font-weight: 700; line-height: 1; color: var(--c, var(--ditm-tag)); }
.ditm-what { font-size: 1.146cqw; font-weight: 600; line-height: 1.2; }
.ditm-tool { font-size: 0.833cqw; font-weight: 600; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ditm-soft); }
.ditm-badge { font-size: 0.781cqw; font-weight: 700; line-height: 1; letter-spacing: 0.12em; color: var(--ditm-arrow); }

.ditm-arrows {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 20; pointer-events: none;
  transition: opacity .3s ease;
}
.ditm-arrows .ditm-under { fill: none; stroke: #05060F; stroke-width: 10; }
.ditm-arrows .ditm-hop { fill: none; stroke: var(--ditm-arrow); stroke-width: 5; stroke-dasharray: 10 8; }
.ditm-arrows .ditm-head-shape { fill: var(--ditm-arrow); stroke: #05060F; stroke-width: 3; }
.ditm-arrows .ditm-start { fill: var(--ditm-arrow); stroke: #05060F; stroke-width: 3; }

/* Survol : la carte grossit un peu et passe devant, c'est tout. */
.ditm-step:hover { z-index: 10; transform: scale(1.03); }
.ditm-step:hover .ditm-card { outline-color: var(--c, var(--ditm-tag)); }

/* Dans la colonne de texte (~780 px), les tailles en cqw tomberaient sous
   9 px : plancher de lisibilité. */
.ditm-kicker { font-size: max(1.042cqw, 9px); }
.ditm-num    { font-size: max(2.083cqw, 15px); }
.ditm-what   { font-size: max(1.146cqw, 11px); }
.ditm-tool   { font-size: max(0.833cqw, 8.5px); }
.ditm-badge  { font-size: max(0.781cqw, 8px); }

/* Petits écrans : les étapes s'empilent, captures entières */
@container (max-width: 720px) {
  .ditm-stage { aspect-ratio: auto; padding: 28px 16px 32px; background-size: 24px 24px; }
  .ditm-head { position: static; align-items: flex-start; text-align: left; gap: 8px; margin-bottom: 28px; }
  .ditm-kicker { font-size: 12px; }
  .ditm-title { font-size: clamp(32px, 11cqw, 52px); }
  .ditm-steps { display: flex; flex-direction: column; gap: 32px; }
  .ditm-step { position: relative; left: auto; top: auto; width: 100%; height: auto; display: flex; flex-direction: column; gap: 14px; transform: none !important; filter: none !important; }
  .ditm-tag { position: static; width: auto; align-self: flex-start; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 6px; padding: 10px 14px 12px; border-width: 2px; box-shadow: 4px 4px 0 var(--c, var(--ditm-tag)); }
  .ditm-num { font-size: 24px; }
  .ditm-what { font-size: 17px; }
  .ditm-tool { font-size: 12px; flex-basis: 100%; }
  .ditm-badge { font-size: 12px; flex-basis: 100%; }
  .ditm-card { position: relative; inset: auto; border-width: 2px; outline-width: 1px; box-shadow: -8px 10px 20px rgba(0,0,0,0.6); }
  .ditm-arrows { display: none; }

  /* Version compacte : deux colonnes, petites captures. */
  .ditm-stage { padding: 22px 14px 24px; }
  .ditm-head { margin-bottom: 20px; }
  .ditm-title { font-size: clamp(26px, 8.5cqw, 44px); }
  .ditm-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; }
  .ditm-step { gap: 8px; }
  .ditm-tag { align-self: stretch; flex-direction: column; row-gap: 3px; padding: 7px 9px 9px; box-shadow: 3px 3px 0 var(--c, var(--ditm-tag)); }
  .ditm-num { font-size: 17px; }
  .ditm-what { font-size: 13px; }
  .ditm-tool, .ditm-badge { font-size: 9.5px; flex-basis: auto; }
  .ditm-card img { position: static; width: 100%; height: 6.5rem; object-fit: cover; object-position: left top; }
}

@media (prefers-reduced-motion: reduce) {
  .ditm-step, .ditm-card, .ditm-card img, .ditm-arrows { transition: none; }
}

/* La règle globale des titres (police Fraunces) viserait .ditm-title :
   il garde la police du schéma. */
.ditm-title { font-family: inherit; }