:root {
    --bg:      #121214;
    --surface: #18191f;
    --night:   #141828;
    --text:    #f4f0ea;
    --sub:     #ffecde;
    --muted:   #d4ae8e;
    --dim:     #8a6a4a;
    --signal:  #e04880;
    --line:    rgba(255,236,222,.07);

    /* Durées */
    --dur-instant: 0.15s;
    --dur-fast:    0.22s;
    --dur-base:    0.38s;
    --dur-slow:    0.55s;
    --dur-xslow:   0.85s;

    /* Easings */
    --ease-ui:      cubic-bezier(.4,0,.2,1);
    --ease-out:     cubic-bezier(.2,0,.1,1);
    --ease-spring:  cubic-bezier(.34,1.56,.64,1);
    --ease-power:   cubic-bezier(.4,0,.2,1);
  }


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

  /* ── Utilitaires accessibilité ── */
  .sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  .skip-link {
    position: absolute; top: -100%; left: 1rem; z-index: 9999;
    padding: .5rem 1rem;
    background: var(--signal); color: #fff;
    font: 500 14px/1.5 'DM Sans', sans-serif;
    text-decoration: none; border-radius: 0 0 4px 4px;
    transition: top .15s;
  }
  .skip-link:focus { top: 0; }

  /* ── Scrollbar globale — fuchsia ── */
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--signal) transparent;
  }
  ::-webkit-scrollbar { width: 5px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--signal);
    border-radius: 2px;
  }
  ::-webkit-scrollbar-thumb:hover { background: rgba(224,72,128,.7); }

  html { scroll-behavior: smooth; }


  body {
    background:
      radial-gradient(ellipse 70% 50% at 12% 95%, rgba(190,110,55,.06) 0%, transparent 55%),
      radial-gradient(ellipse 50% 40% at 85% 10%, rgba(140,80,180,.04) 0%, transparent 50%),
      #111113;
    color: var(--text);
    font-family: 'DM Sans', system-ui, sans-serif;
    padding-top: 0;
    overflow-x: hidden;
    cursor: auto;
    transition: background-color .45s ease, color .3s ease;
  }

  /* ── Grain organique (film/paper texture) ── */
  body::after {
    content: '';
    position: fixed; inset: 0; z-index: 9990;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23g)'/%3E%3C/svg%3E");
    opacity: .055;
    /* mix-blend-mode retiré — forçait une recomposition CPU pleine page
       à chaque frame d'animation (60fps cursor) */
  }

/* ── Curseur premium orbital + œil ── */
@keyframes ring-pop {
  0%   { transform: translate(-50%,-50%) scale(1); }
  35%  { transform: translate(-50%,-50%) scale(1.14); }
  68%  { transform: translate(-50%,-50%) scale(0.96); }
  100% { transform: translate(-50%,-50%) scale(1); }
}
@keyframes eye-breathe {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.035); }
}

#cursor-ring {
  position: fixed; pointer-events: none; z-index: 9998;
  top: 0; left: 0;
  width: 42px; height: 42px;
  border-radius: 50%;
  overflow: hidden;
  border: 1.1px solid rgba(255,236,222,.42);
  background: rgba(13,13,20,.34);
  transform: translate3d(-220px,-220px,0) translate(-50%,-50%) scale(1);
  will-change: transform, opacity;
  transition: border-color .24s ease, background .24s ease, box-shadow .24s ease, opacity .16s linear;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
}
#cursor-ring.ring-pop { animation: ring-pop .42s cubic-bezier(.4,0,.2,1); }


#cursor-label {
    font: 300 7.5px 'DM Sans', sans-serif;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--signal);
    opacity: 0;
    transition: opacity .2s ease;
    white-space: nowrap;
    pointer-events: none;
  }
#cursor-dot {
  position: fixed; pointer-events: none; z-index: 9999;
  top: 0; left: 0;
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.92);
  transform: translate3d(-220px,-220px,0) translate(-50%,-50%);
  opacity: 0; /* caché jusqu'au 1er mousemove */
  mix-blend-mode: difference;
  box-shadow: 0 0 4px rgba(224,72,128,.35);
  will-change: transform, opacity;
  transition: opacity .16s linear, background .2s ease;
}
#cursor-eye {
  opacity: 0;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .2s ease;
  pointer-events: none;
}
#eye-svg {
  width: 38px;
  height: 26px;
  stroke: rgba(255,248,242,.98);
  filter: drop-shadow(0 0 8px rgba(0,0,0,.42));
}
body.strip-hover #eye-svg {
  animation: eye-breathe 2.6s ease-in-out infinite;
}

  /* ── Cils : cachés (glissent sous paupière fermée) ── */
  #eye-lashes {
    transform: translateY(9px);
    opacity: 0;
    transition: transform .44s cubic-bezier(.34,1.56,.64,1),
                opacity .22s ease;
  }

  /* ── Paupières ouvertes (défaut visible) ── */
  #eye-lid-top { d: path("M2 17C10 10 38 10 46 17"); transition: d .44s cubic-bezier(.4,0,.2,1); }
  #eye-lid-bot { d: path("M2 17C10 24 38 24 46 17"); transition: d .44s cubic-bezier(.4,0,.2,1); }

  /* ── Survol strip : œil ouvert ── */
  body.strip-hover #eye-lid-top { d: path("M2 17C10 6 38 6 46 17"); }
  body.strip-hover #eye-lid-bot { d: path("M2 17C10 24 38 24 46 17"); }
  body.strip-hover #eye-lashes  { transform: translateY(0); opacity: 1; }

  /* ── Clic : écarquillé ── */
  body.eye-open #eye-lid-top { d: path("M2 17C10 2 38 2 46 17"); transition-duration: .16s; }
  body.eye-open #eye-lid-bot { d: path("M2 17C10 30 38 30 46 17"); transition-duration: .16s; }
  body.eye-open #eye-lashes  { transform: translateY(-3px); }

  /* ── Clignement express ── */
  body.eye-blink #eye-lid-top { d: path("M2 17C10 17 38 17 46 17") !important; transition-duration: .07s !important; }
  body.eye-blink #eye-lid-bot { d: path("M2 17C10 17 38 17 46 17") !important; transition-duration: .07s !important; }
  body.eye-blink #eye-lashes  { transform: translateY(9px) !important; opacity:0 !important; transition-duration: .07s !important; }

body.hovering #cursor-ring {
  border-color: rgba(224,72,128,.58);
  background: rgba(224,72,128,.06);
  box-shadow: 0 0 12px rgba(224,72,128,.11);
}
body.hovering #cursor-label { opacity: 1; }

body.strip-hover #cursor-ring {
  border-color: rgba(224,72,128,.98);
  background: rgba(8,9,18,.46);
  box-shadow: 0 0 18px rgba(224,72,128,.24),
              0 0 32px rgba(224,72,128,.11),
              inset 0 0 12px rgba(224,72,128,.12);
}
body.strip-hover #cursor-eye   { opacity: 1; }
body.strip-hover #cursor-label { opacity: 0; }

body.eye-open #cursor-ring {
  border-color: rgba(224,72,128,1);
  background: rgba(8,9,18,.54);
  box-shadow: 0 0 20px rgba(224,72,128,.3),
              inset 0 0 12px rgba(224,72,128,.14);
}

/* ── Glow souris fuchsia ── */
#mouse-glow {
  position: fixed; pointer-events: none; z-index: 9;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224,72,128,.08) 0%, transparent 72%);
  transform: translate3d(-220px,-220px,0) translate(-50%,-50%);
  will-change: transform, opacity;
  transition: opacity .2s linear;
  opacity: 0;
}

  /* ── Site header ── */
  .site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 96px;
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 0 7vw 0 calc(7vw + 6px);
    z-index: 500;
    background: rgba(13,13,18,.97);
    border-bottom: 1px solid rgba(255,236,222,.05);
  }
  .site-header__logo {
    display: flex; align-items: center; gap: 0;
    text-decoration: none;
  }
  .logo-svg {
    height: 44px; width: auto; flex-shrink: 0;
    color: rgba(255,236,222,.92);
    margin-right: 1rem;
  }
  .logo-brand {
    font: 600 18px 'DM Sans', sans-serif;
    letter-spacing: .28em; text-transform: uppercase;
    color: rgba(255,236,222,.96);
  }
  .logo-sep {
    font: 300 18px 'DM Sans', sans-serif;
    color: var(--signal);
    margin: 0 .7rem;
  }
  .logo-name {
    font: 300 16px 'DM Sans', sans-serif;
    letter-spacing: .06em;
    color: rgba(255,236,222,.72);
  }

  /* ── Navigation ── */
  .site-nav {
    display: flex; gap: 4.5rem; align-items: center;
  }
  .site-nav a {
    font-family: 'DM Sans', sans-serif;
    font-size: 15px; font-weight: 400;
    letter-spacing: .22em; text-transform: uppercase;
    color: rgba(255,236,222,.78); text-decoration: none;
    position: relative; transition: color .25s;
    padding-bottom: 4px;
  }
  .site-nav a::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 100%;
    height: 1px; background: var(--signal);
    transition: right .32s cubic-bezier(.4,0,.2,1);
  }
  .site-nav a:hover { color: var(--text); }
  .site-nav a:hover::after { right: 0; }

  /* ── Scroll indicator ── */
  @keyframes scrollPulse {
    0%, 100% { transform: scaleY(0); opacity: 0; }
    20% { opacity: 1; }
    80% { transform: scaleY(1); opacity: 1; }
  }

  /* ══════════════════════════════════════════
     SECTION 1 — HERO
  ══════════════════════════════════════════ */
  @keyframes fadeIn { to { opacity: 1; } }
  @keyframes slideUp { to { opacity: 1; transform: translateY(0); } }
  @keyframes heroReveal { to { clip-path: inset(0 -2% 0 0); } }
  @keyframes expandLine { from { width: 0; } to { width: 100px; } }
  @keyframes pulseGlow { 0%,100% { opacity: .4; } 50% { opacity: 1; } }

  .s-ouverture {
    position: relative; z-index: 1;
    height: 88vh; height: 88svh; min-height: 620px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 0 4vh 10vw;
  }
  .hero__text { position: relative; z-index: 2; display: flex; flex-direction: column; }
  .s-ouverture > * { position: relative; z-index: 2; }

  /* Radial glow — fuchsia ambiance */
  .s-ouverture::before {
    content: '';
    position: absolute; inset: 0; z-index: 0;
    background: radial-gradient(ellipse 60% 70% at 72% 45%, rgba(240,54,106,.07) 0%, transparent 65%);
    animation: pulseGlow 5s ease-in-out infinite;
    pointer-events: none;
  }

  /* hero__art : supprimé */

  /* ── Hero — 5 niveaux hiérarchiques ── */

  /* L1 — FREDC : marque massive, pas italic */
.hero__brand {
  font-family: 'Cormorant Garamond', serif;
  font-style: normal; font-weight: 300;
  font-size: clamp(5.6rem, 20vw, 24rem);
  line-height: .93;
  letter-spacing: .01em;
  color: var(--text);
  text-shadow: 0 2px 20px rgba(0,0,0,.35);
  margin-bottom: .06em;
  opacity: 0;
}
.hero__brand-chars { white-space: nowrap; }
.hero__brand-chars span { margin-right: -.012em; }
.hero__brand-chars span:last-child { margin-right: 0; }
  .hero__brand-name {
    font-size: clamp(1.4rem, 2.6vw, 2.4rem);
    font-weight: 300;
    letter-spacing: .1em;
    color: color-mix(in srgb, var(--sub) 68%, transparent);
    display: block;
    margin-top: .4em;
  }

  /* Slogan — phrase poétique, présente */
  .hero__slogan-block {
    margin-bottom: 2rem;
    opacity: 0;
  }
  .hero__slogan {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic; font-weight: 300;
    font-size: clamp(1.6rem, 3.2vw, 3.5rem);
    letter-spacing: .04em;
    line-height: 1.1;
    color: rgba(255,236,222,.64);
    margin-bottom: .6rem;
  }
  .slogan-char { display: inline; }

  /* Ligne fuchsia draw-on — animée par GSAP (scaleX = compositor-only, zéro reflow) */
  .hero__slogan-line {
    display: block; height: 1.5px;
    width: 100%;
    background: var(--signal);
    transform: scaleX(0);
    transform-origin: left center;
  }

  /* Eyebrow — identité principale, affirmée */
  .hero__eyebrow {
    font: 400 16px/1 'DM Sans', sans-serif;
    letter-spacing: .18em; text-transform: uppercase;
    color: rgba(255,236,222,.94);
    margin-bottom: 1.8rem;
    opacity: 0;
  }

  /* Bio — lisible, contemporaine */
.hero__bio {
  font: 300 clamp(15px, .86vw, 16.5px)/1.75 'DM Sans', sans-serif;
  color: rgba(255,236,222,.88);
  max-width: 62ch;
  margin-bottom: 1.8rem;
  opacity: 0;
}

  /* L5 — Catégories nav : fuchsia inline */
  .hero__cats {
    display: flex; align-items: center;
    gap: .9rem; flex-wrap: wrap;
    opacity: 0;
  }
  .hero__cat {
    font: 400 11px 'DM Sans', sans-serif;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--signal);
    transition: opacity .2s;
  }
  .hero__cat[data-filter] { cursor: pointer; }
  .hero__cat[data-filter]:hover { opacity: .7; }
  .hero__cat--static {
    color: rgba(255,236,222,.38);
    cursor: default;
  }
  body.day .hero__cat--static { color: rgba(20,15,8,.32); }
  .hero__cats-sep {
    color: rgba(224,72,128,.35);
    font-size: 11px;
    line-height: 1;
  }

  /* Hero CTAs — principal + secondaire */
  .hero__ctas {
    display: flex; align-items: center; gap: 2rem;
    margin-top: 1.8rem;
    opacity: 0;
  }
  .hero__cta-primary {
    font: 400 12px/1 'DM Sans', sans-serif;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--text);
    text-decoration: none;
    border: 1px solid rgba(244,240,234,.42);
    padding: .9rem 2.2rem;
    transition: border-color var(--dur-fast) var(--ease-ui),
                color var(--dur-fast) var(--ease-ui),
                background var(--dur-fast) var(--ease-ui);
  }
  .hero__cta-primary:hover {
    border-color: var(--signal);
    color: var(--signal);
    background: rgba(224,72,128,.06);
  }
  .hero__cta-secondary {
    font: 400 12px/1 'DM Sans', sans-serif;
    letter-spacing: .16em; text-transform: uppercase;
    color: rgba(255,236,222,.78);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-ui);
  }
  .hero__cta-secondary:hover { color: var(--text); }
  .hero__cta-secondary::after { content: ' →'; }

  .hero__cta-primary::after { content: ' →'; }

  body.day .hero__cta-primary  { color: rgba(20,15,8,.85); border-color: rgba(20,15,8,.25); }
  body.day .hero__cta-primary:hover { border-color: var(--signal); color: var(--signal); }
  body.day .hero__cta-secondary { color: rgba(20,15,8,.72); }
  body.day .hero__cta-secondary:hover { color: rgba(20,15,8,.92); }

  /* ══════════════════════════════════════════
     SECTION 2 — SÉQUENCE DES ŒUVRES
  ══════════════════════════════════════════ */
  .s-sequence {
    padding-left: 3px;
    position: relative; z-index: 1;
  }

  .strip-divider {
    width: 100%;
    height: 1px;
    background: var(--line);
  }

  /* ── Section œuvres — works-hdr ── */
  .works-hdr {
    padding: 6.5rem 8vw 0;
    margin-bottom: 2.5rem;
  }
  .works-hdr__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1.2rem;
  }
  .works-hdr__title {
    font: 300 clamp(4.5rem, 9vw, 9rem)/1 'Cormorant Garamond', serif;
    color: var(--text);
    margin: 0;
    letter-spacing: -.01em;
  }
  .works-hdr__count {
    font: 600 11px/1 'DM Sans', sans-serif;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--signal);
  }
  .works-hdr__period {
    font: 400 11px/1 'DM Sans', sans-serif;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,236,222,.38);
  }
  /* Filter row — intégré au header */
  .works-hdr__filters {
    border-top: 1px solid rgba(255,236,222,.08);
    padding-top: 1.1rem;
  }
  .filter-bar__btns {
    position: relative;
    display: flex; align-items: flex-end; gap: 0;
  }
  .filter-btn {
    font: 400 12px/1 'DM Sans', sans-serif;
    letter-spacing: .2em; text-transform: uppercase;
    padding: .75rem 2rem .65rem;
    min-height: 44px;
    border: none;
    background: transparent;
    color: rgba(255,236,222,.45);
    cursor: pointer;
    transition: color .22s ease;
    white-space: nowrap;
  }
  .filter-btn:first-child { padding-left: 0; }
  .filter-btn:hover  { color: rgba(255,236,222,.82); }
  .filter-btn.active {
    color: var(--text);
    font-weight: 500;
  }

  #filter-indicator {
    position: absolute;
    bottom: -1px; left: 0; width: 0;
    height: 2px;
    background: var(--signal);
    box-shadow: 0 0 10px rgba(224,72,128,.55), 0 0 22px rgba(224,72,128,.2);
    transition: left .38s cubic-bezier(.4,0,.2,1), width .38s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
  }

  /* ── Strips ── */
  .strip {
    display: grid;
    grid-template-columns: 52vw 1fr;
    align-items: center;
    padding: 7vw 0;
    position: relative;
    overflow: hidden;
    transition: background .5s ease;
  }
  .strip--reversed { grid-template-columns: 1fr 52vw; }
  .strip:hover { background: rgba(224,72,128,.018); }
  .strip { cursor: pointer; }
  .strip__hit {
    position: absolute;
    inset: 0;
    z-index: 2;
  }
  .strip__hit:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: -3px;
  }
  .strip__image-col,
  .strip__text-col {
    position: relative;
    z-index: 3;
  }

  /* Ligne fuchsia gauche — pousse vers le bas au survol */
  .strip::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--signal) 0%, rgba(224,72,128,.3) 100%);
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform .5s cubic-bezier(.4,0,.2,1);
    z-index: 2;
  }
  .strip:hover::before { transform: scaleY(1); }

  /* Soulignement fuchsia sur le titre au hover */
  .strip__title {
    position: relative;
    display: inline-block;
  }
  .strip__title::after {
    content: '';
    position: absolute;
    left: 0; bottom: -.2em;
    height: 1px;
    width: 0;
    background: var(--signal);
    transition: width .4s cubic-bezier(.4,0,.2,1) .1s;
  }
  .strip:hover .strip__title::after { width: 100%; }

  .strip__image-col {
    display: flex; align-items: center; justify-content: center;
    padding: 0 5vw;
  }
  .strip__image-col figure { margin: 0; }
  .strip__caption {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  .strip--reversed .strip__image-col { order: 2; }
  .strip--reversed .strip__text-col { order: 1; }

  .strip__image-col img {
    max-height: 72vh; max-width: 100%;
    width: auto; height: auto; object-fit: contain; display: block;
    transition: transform .7s cubic-bezier(.4,0,.2,1);
  }
  .strip:hover .strip__image-col img { transform: scale(1.025); }

  .strip__placeholder {
    width: 280px; height: 380px;
    background: var(--surface);
    border: 1px solid rgba(255,236,222,.06);
    display: flex; align-items: center; justify-content: center;
  }
  .strip__placeholder span {
    font: 200 9px 'DM Sans', sans-serif;
    letter-spacing: .2em; text-transform: uppercase;
    color: rgba(255,236,222,.2);
  }

  .strip__text-col {
    padding: 0 5vw 0 3vw;
    display: flex; flex-direction: column; justify-content: center;
  }
  .strip__inner { display: flex; flex-direction: column; gap: 1.4rem; }

  /* AWARD badge */
  .strip__award {
    display: inline-flex; align-items: center; gap: .5rem;
    font: 400 10px 'DM Sans', sans-serif;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--signal);
    border: 1px solid color-mix(in srgb, var(--signal) 30%, transparent);
    padding: .35rem .8rem;
    margin-bottom: .2rem;
  }

  /* CATEGORY — fuchsia signal, small caps */
  .strip__cat {
    font: 500 14px 'DM Sans', sans-serif;
    letter-spacing: .28em; text-transform: uppercase;
    color: var(--signal);
  }

  /* TITLE — massive, architectural */
  .strip__title {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(2.6rem, 5vw, 5.5rem);
    font-weight: 300;
    color: var(--text);
    line-height: .95;
    letter-spacing: -.01em;
  }

  /* SUBTITLE — Instrument Serif, medium size */
  .strip__subtitle {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-size: clamp(1rem, 1.4vw, 1.3rem);
    color: var(--sub);
    line-height: 1.4;
    letter-spacing: .01em;
    display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem;
  }
  .strip__meta {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-size: clamp(1rem, 1.4vw, 1.3rem);
    font-weight: 300;
    letter-spacing: .01em;
    color: rgba(255,236,222,.45);
    white-space: nowrap;
  }

  /* LINE — signal color */
  .strip__line {
    width: 36px; height: 1px;
    background: rgba(224,72,128,.45);
    flex-shrink: 0;
  }

  /* SYNOPSIS — readable */
  .strip__synopsis {
    font: 300 18px/1.78 'DM Sans', sans-serif;
    color: rgba(255,236,222,.94);
    margin-bottom: 1.1rem;
  }

  /* QUOTE sous synopsis — italic serif */
  .strip__quote {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(1.4rem, 2vw, 1.9rem);
    line-height: 1.55;
    color: rgba(255,236,222,.70);
    border-left: 2px solid rgba(224,72,128,.45);
    padding-left: 1rem;
    margin-bottom: 1.4rem;
  }

/* CTA strip — ergonomie premium (desktop + touch) */
.strip__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .58rem;
  margin-top: .8rem;
}
.strip__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 42px;
  margin-top: .95rem;
  padding: .62rem .94rem;
  font: 500 10.5px/1 'DM Sans', sans-serif;
  letter-spacing: .11em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255,236,222,.84);
  background: rgba(255,236,222,.02);
  border: 1px solid rgba(255,236,222,.18);
  border-radius: 999px;
  transition: color .22s, border-color .22s, background-color .22s, box-shadow .22s, transform .22s;
}
.strip__cta::after {
  content: '→';
  font-size: .9rem;
  line-height: 1;
  transition: transform .22s;
}
.strip__cta:hover {
  color: var(--text);
  border-color: rgba(255,236,222,.34);
  background: rgba(255,236,222,.06);
}
.strip__cta:hover::after { transform: translateX(4px); }
.strip__cta:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--signal) 78%, transparent);
  outline-offset: 2px;
}
.strip__cta--primary {
  color: var(--text);
  background: color-mix(in srgb, var(--signal) 14%, transparent);
  border-color: color-mix(in srgb, var(--signal) 40%, rgba(255,236,222,.22));
}
.strip__cta--primary:hover {
  color: rgba(255,245,236,.96);
  background: color-mix(in srgb, var(--signal) 42%, #101018);
  border-color: color-mix(in srgb, var(--signal) 60%, transparent);
  box-shadow: 0 6px 16px rgba(224,72,128,.16);
}
.strip__cta--secondary {
  color: rgba(255,236,222,.8);
  background: rgba(255,236,222,.02);
  border-color: rgba(255,236,222,.2);
}
.strip__actions .strip__cta { margin-top: 0; }

  /* Relation inter-œuvres */
  .strip__relation {
    margin-top: .9rem;
    font: 400 11px/1 'DM Sans', sans-serif;
    letter-spacing: .06em;
  }
  .strip__relation a {
    color: rgba(255,236,222,.62);
    text-decoration: none;
    transition: color .2s;
  }
  .strip__relation a::after { content: ' →'; }
  .strip__relation a:hover { color: rgba(255,236,222,.72); }

  /* Works header — sous-titre */
  .works-hdr__sub {
    font-style: italic;
    font-weight: 300;
    font-size: .55em;
    color: rgba(255,236,222,.38);
    letter-spacing: .01em;
    margin-left: -.12em;
  }

  /* Données tuile — toujours visibles */
  .strip__tile-data {
    display: flex; gap: 0; flex-wrap: wrap;
    padding-top: .9rem;
    margin-top: .2rem;
    border-top: 1px solid rgba(255,236,222,.05);
  }
  .strip__tile-data span {
    font: 300 11px 'DM Sans', sans-serif;
    letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255,236,222,.65);
    display: flex; align-items: center;
  }
  .strip__tile-data span + span::before {
    content: '·';
    margin: 0 .7rem;
    color: rgba(224,72,128,.35);
  }


  /* ══════════════════════════════════════════
     SECTION 3 — À PROPOS (redesign)
  ══════════════════════════════════════════ */
  .s-apropos {
    background: #0d0d10;
    padding: 0 0 8vw;
    border-top: 1px solid rgba(255,236,222,.04);
    overflow: hidden;
    position: relative; z-index: 1;
  }

  /* Grille unique : nom gauche | tout à droite */
  .apropos__grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5vw;
    padding: 5vw 8vw 7vw;
    align-items: start;
    position: relative;
  }
  .apropos__grid::before {
    content: ''; position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(to right, var(--signal) 0%, rgba(224,72,128,.1) 50%, transparent 100%);
  }

  .apropos__big-name {
    font-family: 'Cormorant Garamond', serif;
    font-style: normal;
    font-size: clamp(3.7rem, 8.2vw, 8.8rem);
    font-weight: 300; color: var(--text);
    line-height: .9; letter-spacing: -.02em;
    padding-top: .1em;
  }
  .apropos__big-name em {
    font-style: italic;
    color: rgba(200,176,140,.58);
    font-size: .6em;
    display: block; margin-top: .35em;
  }

  /* Panneau droit — tags + bio + CTA */
  .apropos__panel {
    display: flex; flex-direction: column;
    gap: 1.6rem;
  }
  .apropos__tags {
    font: 300 17px/1.6 'DM Sans', sans-serif;
    letter-spacing: .14em; text-transform: uppercase;
    color: rgba(255,236,222,.82);
    padding-bottom: 1.6rem;
    border-bottom: 1px solid rgba(255,236,222,.05);
  }
  .apropos__bios {
    display: flex; flex-direction: column;
    gap: .9rem;
  }
  .apropos__section-label {
    font: 500 12px 'DM Sans', sans-serif;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--signal);
    margin: 1.2rem 0 0;
  }
  .apropos__section-label:first-child { margin-top: 0; }
.apropos__bio {
  font: 300 18px/1.8 'DM Sans', sans-serif;
  color: rgba(255,236,222,.88);
  max-width: 60ch;
  margin: 0;
}
  .apropos__em { font-style: italic; color: rgba(240,224,190,.9); }
  .apropos__link {
    color: var(--signal); text-decoration: none;
    border-bottom: 1px solid rgba(224,72,128,.3);
    transition: border-color .2s;
  }
  .apropos__link:hover { border-color: var(--signal); }
  .apropos__highlight {
    color: rgba(255,236,222,.94);
    background: rgba(224,72,128,.12);
    border: 1px solid rgba(224,72,128,.34);
    border-radius: .42rem;
    padding: .06rem .38rem .08rem;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }

  .apropos__cta {
    display: inline-flex; align-items: center; gap: .75rem;
    font: 400 13px 'DM Sans', sans-serif;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--signal); text-decoration: none;
    border: 1px solid rgba(224,72,128,.3);
    padding: .9rem 1.8rem;
    margin-top: .4rem; align-self: flex-start;
    transition: background .2s, gap .2s;
  }
  .apropos__cta::after { content: '→'; transition: transform .2s; }
  .apropos__cta:hover { background: rgba(224,72,128,.07); gap: 1.1rem; }
  .apropos__cta:hover::after { transform: translateX(4px); }

  /* ══════════════════════════════════════════
     SCROLL ANIMATIONS
  ══════════════════════════════════════════ */
  .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .7s ease, transform .7s ease;
  }
  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* ══════════════════════════════════════════
     SECTION LABELS
  ══════════════════════════════════════════ */
  .section-label {
    padding: 5rem 0 0 15vw;
    font: 300 9px 'DM Sans', sans-serif;
    letter-spacing: .28em; text-transform: uppercase;
    color: var(--signal); opacity: 1;
    display: flex; align-items: center; gap: 1rem;
  }
  .section-label::before {
    content: ''; width: 20px; height: 1px;
    background: var(--signal); opacity: .5;
  }

  /* ══════════════════════════════════════════
     FICHE OVERLAY
  ══════════════════════════════════════════ */
  .fiche-overlay {
    position: fixed;
    inset: 28px 0 0 0;
    background: #0c0c0f;
    z-index: 700;
    display: grid;
    grid-template-columns: 55% 45%;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity .4s ease, transform .4s ease;
    overflow: hidden;
  }
  .fiche-overlay.open {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
  }

  /* Barre top avec nav */
  .fiche-nav {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 52px;
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 0 3vw;
    border-bottom: 1px solid rgba(255,236,222,.06);
    background: rgba(12,12,15,.95);
    z-index: 10;
  }
  .fiche-nav__back {
    font: 300 11px 'DM Sans', sans-serif;
    letter-spacing: .18em; text-transform: uppercase;
    color: rgba(255,236,222,.78);
    cursor: pointer;
    display: flex; align-items: center; gap: .8rem;
    transition: color .2s;
    background: none; border: none; padding: 0;
  }
  .fiche-nav__back::before {
    content: '←';
    font-style: normal;
    color: var(--signal);
    font-size: 1.1em;
    transition: transform .2s;
  }
  .fiche-nav__back:hover { color: var(--text); }
  .fiche-nav__back:hover::before { transform: translateX(-3px); }
  .fiche-nav__proj-arrows {
    display: flex; gap: 1.5rem; align-items: center;
  }
  .fiche-nav__arr {
    font: 300 11px 'DM Sans', sans-serif;
    letter-spacing: .16em; text-transform: uppercase;
    color: rgba(255,236,222,.65);
    cursor: pointer;
    transition: color .2s;
    background: none; border: none; padding: 0;
  }
  .fiche-nav__arr:hover { color: var(--signal); }

  /* Colonne image */
  .fiche-img-col {
    display: flex; align-items: center; justify-content: center;
    background: #090910;
    padding: 72px 4vw 4vw;
    border-right: 1px solid rgba(255,236,222,.04);
  }
  .fiche-img-col img {
    max-height: calc(100vh - 130px);
    max-height: calc(100dvh - 130px);
    max-width: 100%;
    width: auto; height: auto;
    object-fit: contain;
    display: block;
  }

  /* Colonne contenu */
  .fiche-content-col {
    padding: 72px 4vw 4vw 3.5vw;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(224,72,128,.2) transparent;
  }
  .fiche-content-col::-webkit-scrollbar { width: 3px; }
  .fiche-content-col::-webkit-scrollbar-thumb { background: rgba(224,72,128,.2); }

  .fiche-eyebrow {
    font: 300 11px 'DM Sans', sans-serif;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--signal);
    display: flex; align-items: center; gap: 1rem;
    margin-bottom: 1.5rem;
  }
  .fiche-eyebrow__sep {
    color: rgba(255,236,222,.45);
    font-style: normal;
  }

  .fiche-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(1.6rem, 2.8vw, 2.6rem);
    font-weight: 400;
    color: var(--text);
    line-height: 1.15;
    letter-spacing: -.01em;
    margin-bottom: 1.8rem;
  }

  .fiche-quote {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: clamp(1.25rem, 1.8vw, 1.65rem);
    color: rgba(255,236,222,.88);
    line-height: 1.65;
    max-width: 38ch;
    border-left: 2px solid rgba(224,72,128,.4);
    padding-left: 1.4rem;
    margin-bottom: 2.2rem;
  }

  .fiche-award {
    display: inline-flex; align-items: center; gap: .6rem;
    font: 300 9px 'DM Sans', sans-serif;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--signal);
    border: 1px solid rgba(224,72,128,.25);
    background: rgba(224,72,128,.06);
    padding: 5px 12px;
    margin-bottom: 2rem;
  }
  .fiche-award::before { content: '◆'; font-size: .6em; }

  .fiche-section-label {
    font: 300 10px 'DM Sans', sans-serif;
    letter-spacing: .2em; text-transform: uppercase;
    color: rgba(255,236,222,.58);
    margin-bottom: .8rem;
    margin-top: 1.5rem;
  }

  .fiche-body {
    font: 300 17px/1.88 'DM Sans', sans-serif;
    color: rgba(255,236,222,.88);
    max-width: 52ch;
  }
  .fiche-body + .fiche-body { margin-top: 1rem; }

  .fiche-keywords {
    margin-top: .9rem;
    font: 400 11px/1 'DM Sans', sans-serif;
    letter-spacing: .14em;
    color: var(--signal);
    opacity: .72;
  }

  .fiche-synopsis {
    font: 300 17px/1.85 'DM Sans', sans-serif;
    color: rgba(255,236,222,.9);
    max-width: 52ch;
    margin-bottom: 1.4rem;
  }
  .fiche-synopsis em { font-style: italic; color: rgba(255,236,222,.85); font-weight: 400; }

  .fiche-note {
    margin-top: 1.2rem;
    font: 300 italic 12px/1.7 'DM Sans', sans-serif;
    color: rgba(255,236,222,.65);
    max-width: 52ch;
  }

  .fiche-tags {
    display: flex; gap: .5rem; flex-wrap: wrap;
    margin-top: 1.8rem;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(255,236,222,.05);
  }
  .fiche-tag {
    font: 300 10px 'DM Sans', sans-serif;
    letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255,236,222,.6);
    border: 1px solid rgba(255,236,222,.14);
    padding: 3px 9px;
  }

  .fiche-meta-grid {
    border-top: 1px solid rgba(255,236,222,.06);
    border-left: 1px solid rgba(255,236,222,.06);
  }
  .fiche-meta-row {
    display: grid; grid-template-columns: 42% 58%;
    border-bottom: 1px solid rgba(255,236,222,.06);
    border-right: 1px solid rgba(255,236,222,.06);
  }
  .fiche-meta-row dt, .fiche-meta-row dd {
    font: 300 11px/1.4 'DM Sans', sans-serif;
    padding: .6rem .8rem;
  }
  .fiche-meta-row dt { color: rgba(255,236,222,.55); border-right: 1px solid rgba(255,236,222,.06); }
  .fiche-meta-row dd { color: rgba(255,236,222,.88); }
  .fiche-meta-link {
    color: rgba(224,72,128,.92);
    text-decoration: none;
    font: 300 10px 'DM Sans', sans-serif;
    letter-spacing: .04em;
    transition: color .2s;
  }
  .fiche-meta-link:hover { color: var(--signal); }

  /* ── Galerie de planches ── */
  .fiche-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 3px;
    margin-top: .8rem;
  }
  .fiche-gallery-thumb {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    cursor: pointer;
    background: #0a0a0d;
    border: 1px solid transparent;
    transition: border-color .15s, transform .15s;
    position: relative;
  }
  .fiche-gallery-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    opacity: .65;
    transition: opacity .2s;
  }
  .fiche-gallery-thumb:hover img { opacity: 1; }
  .fiche-gallery-thumb:hover { border-color: rgba(255,236,222,.2); }
  .fiche-gallery-thumb.active { border-color: var(--signal); }
  .fiche-gallery-thumb.active img { opacity: 1; }
  .fiche-gallery-thumb .thumb-label {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(to top, rgba(0,0,0,.7), transparent);
    padding: .4rem .3rem .25rem;
    font: 300 7px 'DM Sans', sans-serif;
    letter-spacing: .08em;
    color: rgba(255,236,222,.55);
    opacity: 0; transition: opacity .2s;
  }
  .fiche-gallery-thumb:hover .thumb-label { opacity: 1; }

  /* ══════════════════════════════════════════
     FOOTER — Moment de marque
  ══════════════════════════════════════════ */
  .site-footer {
    background: #09090d;
    position: relative; z-index: 1;
  }

  /* ════════════════════════════════════════
     FOOTER — design épuré gallery split
     ════════════════════════════════════════ */

  /* ── Bloc haut : identité + navigation ── */
  .ft-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 3.5vw 8vw 2.5vw;
    border-bottom: 1px solid rgba(255,236,222,.07);
  }
  .ft-name {
    font: 300 clamp(2rem, 4vw, 3.6rem)/1 'Cormorant Garamond', Georgia, serif;
    color: var(--text);
    letter-spacing: -.01em;
    margin: 0 0 .55rem;
  }
  .ft-tagline {
    font: 400 12px/1.5 'DM Sans', sans-serif;
    letter-spacing: .04em;
    color: rgba(255,236,222,.55);
    margin: 0;
  }
  .ft-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .65rem;
  }
  .ft-nav a {
    font: 400 13px/1 'DM Sans', sans-serif;
    letter-spacing: .03em;
    color: rgba(255,236,222,.72);
    text-decoration: none;
    transition: color .2s;
  }
  .ft-nav a:hover { color: var(--signal); }

  /* ── Présence numérique — bande avec label ── */
  .ft-presence {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    padding: 1.4rem 8vw 1.6rem;
    border-bottom: 1px solid rgba(255,236,222,.07);
  }
  .ft-presence-label {
    font: 500 10px 'DM Sans', sans-serif;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--signal);
    margin: 0;
  }
  .ft-presence-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .25rem 0;
  }
  .ft-presence-links a {
    font: 400 12px/1.5 'DM Sans', sans-serif;
    letter-spacing: .04em;
    color: rgba(255,236,222,.65);
    text-decoration: none;
    transition: color .2s;
    white-space: nowrap;
  }
  .ft-presence-links a:hover { color: rgba(255,236,222,.96); }
  /* Séparateurs via pseudo-éléments */
  .ft-presence-links a + a::before {
    content: '·';
    margin: 0 .9rem;
    color: rgba(255,236,222,.22);
    pointer-events: none;
  }

  /* ── Bande légale ── */
  .ft-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .9rem 8vw 1.1rem;
  }
  .ft-bottom p {
    font: 400 11px/1.5 'DM Sans', sans-serif;
    letter-spacing: .03em;
    color: rgba(255,236,222,.58);
    margin: 0;
  }

  .footer__line {
    width: 100%; height: 2px;
    background: linear-gradient(to right, transparent 0%, var(--signal) 25%, rgba(224,72,128,.25) 65%, transparent 100%);
  }

  /* ── Back to top — rond, bas gauche ── */
  .back-to-top {
    position: fixed;
    bottom: 2.8rem; right: 2.8rem;
    width: 46px; height: 46px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(13,13,16,.88);
    border: 1px solid rgba(224,72,128,.35);
    color: var(--signal);
    cursor: pointer;
    opacity: 0; pointer-events: none;
    transform: translateY(10px);
    transition: opacity .35s ease, transform .35s ease,
                background .2s, border-color .2s, box-shadow .2s;
    z-index: 400;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .back-to-top.visible {
    opacity: 1; pointer-events: all;
    transform: translateY(0);
  }
  .back-to-top:hover {
    background: rgba(224,72,128,.14);
    border-color: var(--signal);
    box-shadow: 0 0 18px rgba(224,72,128,.25);
  }

  /* ══════════════════════════════════════════
     COSMOS TEST — tuiles flottantes + fond points
     Isolé ici, facile à supprimer
  ══════════════════════════════════════════ */

/* Curseur custom actif seulement sur desktop à pointeur fin */
@media (hover: hover) and (pointer: fine) {
  body.cursor-ready,
  body.cursor-ready * {
    cursor: none !important;
  }
}

  /* GSAP — états initiaux hero (invisibles avant animation) */
  .hero__brand-chars span { display: inline-block; }
  .hero__brand-name,
  .hero__slogan-block,
  .hero__eyebrow,
  .hero__bio { will-change: opacity, transform; }

  /* GSAP — strip reveal : overflow caché pour slide propre */
  .strip { overflow: hidden; }

  /* Curseur œil — pupille rose */
  #eye-pupil { fill: rgb(224, 72, 128) !important; }

  /* Canvas étoiles — hero (révèle au scroll) */
  #hero-stars {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none; z-index: 1;
    opacity: 0;
  }

  /* Canvas étoiles Three.js — fond fixe toute la page */
  #oeuvres { position: relative; }

  #cosmos-stars {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: 0;
    display: block;
    animation: cosmos-fadein 2.5s ease 1.2s both;
  }
  @keyframes cosmos-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Tout le contenu au-dessus du canvas étoiles */
  .s-ouverture, .s-sequence, .s-apropos, .site-footer {
    position: relative;
    z-index: 1;
  }
#cursor-ring { z-index: 9998; }
#cursor-dot { z-index: 9999; }
  .back-to-top { z-index: 400; }

  /* Works header — dans le flux */
  .works-hdr { position: relative; }

  /* Tuiles : cartes flottantes opaques — PAS de will-change ni z-index */
  .strip {
    margin: 3vh 3vw;
    border-radius: 4px;
    border: 1px solid rgba(255,236,222,.08);
    background: rgba(16, 16, 20, 0.96);
    box-shadow:
      0 20px 80px rgba(0,0,0,.72),
      0 4px 16px rgba(0,0,0,.5),
      inset 0 1px 0 rgba(255,236,222,.04);
    z-index: 0;
    translate: 0 0;
    transition: translate .4s cubic-bezier(.2,0,.1,1), box-shadow .3s ease;
  }
  /* Override .reveal pour strips : fade uniquement, pas de translateY */
  .strip.reveal {
    opacity: 0;
    transition: opacity .9s ease, translate .4s cubic-bezier(.2,0,.1,1), box-shadow .3s ease;
  }
  .strip.reveal.visible { opacity: 1; }
  /* Hover : maintien fond opaque (override le rose translucide du main CSS) */
  .strip:hover { background: rgba(16, 16, 20, 0.96); }

  /* Colonnes de contenu — au-dessus du glow ::after */
  .strip__image-col,
  .strip__text-col { position: relative; z-index: 3; }


  /* Image zoom — profondeur au rollover */
  .strip__image-col img {
    transition: transform 1.4s cubic-bezier(.2,0,.1,1), filter .7s ease;
  }
  .strip:hover .strip__image-col img,
  .strip--lift .strip__image-col img {
    transform: scale(1.055);
    filter: brightness(1.07);
  }

  /* Effet lumière ambiance — radial glow fuchsia côté image (derrière contenu) */
  .strip::after {
    content: '';
    position: absolute; inset: 0; z-index: 0;
    background: radial-gradient(ellipse 60% 55% at 36% 50%, rgba(224,72,128,.22) 0%, transparent 68%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .55s ease;
  }
  .strip--reversed::after {
    background: radial-gradient(ellipse 60% 55% at 64% 50%, rgba(224,72,128,.22) 0%, transparent 68%);
  }
  .strip--lift::after { opacity: 1; }

  /* Hover lift */
  .strip--lift {
    translate: 0 -12px;
    box-shadow:
      0 36px 100px rgba(0,0,0,.82),
      0 6px 24px rgba(0,0,0,.55),
      inset 0 1px 0 rgba(255,236,222,.07);
  }

  /* ══════════════════════════════════════════
     THEME TOGGLE BUTTON
  ══════════════════════════════════════════ */
  #theme-toggle {
    background: none;
    border: 1.5px solid rgba(255,236,222,.18);
    border-radius: 50%;
    width: 34px; height: 34px;
    cursor: pointer;
    color: rgba(255,236,222,.65);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: color .3s ease, border-color .3s ease, background .3s ease, transform .2s ease;
    margin-left: .5rem;
  }
  #theme-toggle:hover {
    color: var(--signal);
    border-color: var(--signal);
    transform: rotate(20deg);
  }

  /* ══════════════════════════════════════════
     MODE JOUR — palette "Stone & Feu"
     Fond : stone chaud #eae8e4  (zinc + légère chaleur)
     Texte : #140f08  (near-black chaud, contrast 15:1 ✓ AAA)
     Gris chaud : #5a5650 (contrast 5.4:1 ✓ WCAG AA)
     Signal rouge feu : #b8351a (contrast 4.8:1 ✓ WCAG AA)
  ══════════════════════════════════════════ */
  body.day {
    --bg:      #eae8e4;
    --surface: #e0dcd7;
    --night:   #d5d0ca;
    --text:    #140f08;
    --sub:     #2a2318;
    --muted:   #5a5650;
    --dim:     #8a8278;
    --signal:  #b8351a;
    --line:    rgba(20,15,8,.09);
    background:
      radial-gradient(ellipse 70% 55% at 5% 100%,  rgba(184,53,26,.05) 0%, transparent 55%),
      radial-gradient(ellipse 55% 45% at 92% 5%,   rgba(90,86,80,.04) 0%, transparent 50%),
      #eae8e4;
    color: var(--text);
  }

  /* Canvas étoiles — masqué en mode jour */
  body.day #cosmos-stars { opacity: 0 !important; animation: none; transition: opacity .6s ease; }

  /* Grain — mode multiplicatif sur fond clair */
  body.day::after { opacity: .10; }

  /* ── Header ── */
  body.day .site-header {
    background: rgba(234,232,228,.97);
    border-bottom: 1px solid rgba(20,15,8,.09);
  }
  body.day .logo-svg   { color: rgba(20,15,8,.82); }
  body.day .logo-brand { color: rgba(20,15,8,.92); }
  body.day .logo-sep   { color: var(--signal); }
  body.day .logo-name  { color: rgba(20,15,8,.72); }
  body.day .site-nav a { color: rgba(20,15,8,.70); }
  body.day .site-nav a:hover { color: var(--text); }
  body.day #theme-toggle {
    border-color: rgba(20,15,8,.18);
    color: rgba(20,15,8,.60);
  }
  body.day #theme-toggle:hover {
    color: var(--signal); border-color: var(--signal);
  }

  /* ── Curseur ── */
  body.day #cursor-ring {
    border-color: rgba(20,15,8,.22);
    background: rgba(234,232,228,.42);
  }
  body.day #cursor-dot { background: #140f08; box-shadow: none; mix-blend-mode: normal; }

  /* ── Hero ── */
  body.day .hero__brand-name { color: rgba(20,15,8,.58); }
  body.day .hero__slogan     { color: rgba(20,15,8,.76); }
  body.day .hero__eyebrow    { color: rgba(20,15,8,.64); }
  body.day .hero__bio        { color: rgba(20,15,8,.82); }
  body.day .hero__cats-sep   { color: rgba(184,53,26,.32); }

  /* ── Works header — mode clair ── */
  body.day .works-hdr__title  { color: var(--text); }
  body.day .works-hdr__period { color: rgba(20,15,8,.38); }
  body.day .works-hdr__filters { border-top-color: rgba(20,15,8,.08); }
  body.day .filter-btn         { color: rgba(20,15,8,.45); }
  body.day .filter-btn:hover   { color: rgba(20,15,8,.78); }
  body.day .filter-btn.active  { color: var(--text); }

  /* ── Tuiles strip ── */
  body.day .strip {
    background: rgba(224,220,214,.97);
    border: 1px solid rgba(20,15,8,.08);
    box-shadow: 0 20px 80px rgba(20,15,8,.09), 0 4px 16px rgba(20,15,8,.04);
  }
  body.day .strip--lift {
    box-shadow: 0 36px 100px rgba(20,15,8,.13), 0 6px 24px rgba(20,15,8,.07);
  }
  body.day .strip__title    { color: #140f08 !important; }
  body.day .strip__subtitle { color: rgba(42,35,24,.82) !important; }
  body.day .strip__meta     { color: rgba(20,15,8,.50) !important; }
  body.day .strip__synopsis { color: rgba(20,15,8,.82) !important; }
  body.day .strip__quote {
    color: rgba(20,15,8,.68) !important;
    border-left-color: rgba(184,53,26,.40) !important;
  }
  body.day .strip__tile-data span  { color: rgba(90,86,80,.75) !important; }
  body.day .strip__line { background: rgba(184,53,26,.45) !important; }
  body.day .strip__tile-data { border-top-color: rgba(20,15,8,.07) !important; }
body.day .strip__cta {
  color: rgba(20,15,8,.76);
  border-color: rgba(20,15,8,.2);
  background: rgba(20,15,8,.02);
}
body.day .strip__cta:hover {
  color: rgba(20,15,8,.88);
  border-color: rgba(20,15,8,.34);
  background: rgba(20,15,8,.07);
}
body.day .strip__cta--primary {
  color: rgba(20,15,8,.82);
  background: rgba(184,53,26,.08);
  border-color: rgba(184,53,26,.34);
}
body.day .strip__cta--primary:hover {
  color: #fff6f2;
  background: rgba(184,53,26,.62);
  border-color: rgba(184,53,26,.72);
}
body.day .strip__relation a { color: rgba(20,15,8,.32); }
body.day .strip__relation a:hover { color: rgba(20,15,8,.65); }
body.day .works-hdr__sub { color: rgba(20,15,8,.30); }

  /* ── Fiche overlay ── */
  body.day .fiche-overlay {
    background: #eae8e4 !important;
  }
  body.day .fiche-nav {
    background: rgba(224,220,214,.98) !important;
    border-bottom: 1px solid rgba(20,15,8,.09) !important;
  }
  body.day .fiche-nav__back  { color: rgba(20,15,8,.72) !important; }
  body.day .fiche-nav__arr   { color: rgba(90,86,80,.68) !important; }
  body.day .fiche-img-col {
    background: #d5d0ca !important;
    border-right: 1px solid rgba(20,15,8,.06) !important;
  }
  body.day .fiche-content-col {
    background: #eae8e4 !important;
    color: #140f08 !important;
  }
  body.day .fiche-eyebrow__sep  { color: rgba(90,86,80,.58) !important; }
  body.day .fiche-title         { color: #140f08 !important; }
  body.day .fiche-subtitle      { color: rgba(20,15,8,.76) !important; }
  body.day .fiche-synopsis,
  body.day .fiche-synopsis em   { color: rgba(20,15,8,.88) !important; }
  body.day .fiche-quote {
    color: rgba(20,15,8,.74) !important;
    border-left-color: rgba(184,53,26,.40) !important;
  }
  body.day .fiche-body          { color: rgba(20,15,8,.84) !important; }
  body.day .fiche-keywords      { color: var(--signal); opacity: .85; }
  body.day .fiche-section-label { color: rgba(90,86,80,.65) !important; }
  body.day .fiche-award {
    color: var(--signal) !important;
    border-color: rgba(184,53,26,.28) !important;
    background: rgba(184,53,26,.05) !important;
  }
  body.day .fiche-note          { color: rgba(90,86,80,.72) !important; }
  body.day .fiche-tags          { border-top-color: rgba(20,15,8,.07) !important; }
  body.day .fiche-tag {
    color: rgba(90,86,80,.68) !important;
    border-color: rgba(20,15,8,.13) !important;
  }
  body.day .fiche-meta-grid {
    border-top:  1px solid rgba(20,15,8,.08) !important;
    border-left: 1px solid rgba(20,15,8,.08) !important;
  }
  body.day .fiche-meta-row {
    border-bottom: 1px solid rgba(20,15,8,.08) !important;
    border-right:  1px solid rgba(20,15,8,.08) !important;
  }
  body.day .fiche-meta-row dt {
    color: rgba(90,86,80,.62) !important;
    border-right: 1px solid rgba(20,15,8,.08) !important;
  }
  body.day .fiche-meta-row dd   { color: rgba(20,15,8,.88) !important; }
  body.day .fiche-gallery-thumb { background: #d5d0ca !important; }
  body.day .fiche-gallery-thumb:hover { border-color: rgba(20,15,8,.26) !important; }
  body.day .fiche-gallery-thumb .thumb-label {
    background: linear-gradient(to top, rgba(185,178,170,.9), transparent) !important;
    color: rgba(20,15,8,.62) !important;
  }

  /* ── Section À propos ── */
  body.day .s-apropos {
    background: #dedad4;
    border-top: 1px solid rgba(20,15,8,.07);
  }
  body.day .apropos__grid::before {
    background: linear-gradient(to right, var(--signal) 0%, rgba(184,53,26,.08) 55%, transparent 100%);
  }
  body.day .apropos__big-name    { color: rgba(20,15,8,.28); }
  body.day .apropos__big-name em { color: rgba(20,15,8,.20); }
  body.day .apropos__tags {
    color: rgba(20,15,8,.62);
    border-bottom-color: rgba(20,15,8,.07);
  }
  body.day .apropos__section-label { color: var(--signal); }
  body.day .apropos__bio  { color: rgba(20,15,8,.82); }
  body.day .apropos__em   { color: rgba(20,15,8,.88); }
  body.day .apropos__link {
    color: var(--signal);
    border-bottom-color: rgba(184,53,26,.30);
  }
  body.day .apropos__highlight {
    color: rgba(20,15,8,.9);
    background: rgba(184,53,26,.12);
    border-color: rgba(184,53,26,.38);
  }
  body.day .apropos__cta {
    color: var(--signal);
    border-color: rgba(184,53,26,.30);
  }
  body.day .apropos__cta:hover { background: rgba(184,53,26,.06); }

  /* ── Footer — mode jour ── */
  body.day .site-footer {
    background: #d5d0ca;
    border-top: 1px solid rgba(20,15,8,.08);
  }
  body.day .ft-top        { border-bottom-color: rgba(20,15,8,.08); }
  body.day .ft-name       { color: rgba(20,15,8,.88); }
  body.day .ft-tagline    { color: rgba(20,15,8,.58); }
  body.day .ft-nav a      { color: rgba(20,15,8,.70); }
  body.day .ft-nav a:hover { color: var(--signal); }
  body.day .ft-presence         { border-bottom-color: rgba(20,15,8,.08); }
  body.day .ft-presence-links a { color: rgba(20,15,8,.62); }
  body.day .ft-presence-links a:hover { color: rgba(20,15,8,.92); }
  body.day .ft-presence-links a + a::before { color: rgba(20,15,8,.22); }
  body.day .ft-bottom p   { color: rgba(20,15,8,.48); }
  body.day .footer__line {
    background: linear-gradient(to right, transparent 0%, var(--signal) 25%, rgba(184,53,26,.18) 65%, transparent 100%);
  }

  /* ── Scrollbar — mode jour ── */
  body.day { scrollbar-color: var(--signal) transparent; }
  body.day ::-webkit-scrollbar-thumb { background: var(--signal); }
  body.day ::-webkit-scrollbar-thumb:hover { background: rgba(184,53,26,.7); }

  /* ── Back to top ── */
  body.day .back-to-top {
    background: rgba(224,220,214,.92);
    border-color: rgba(184,53,26,.38);
  }
  body.day .back-to-top:hover { background: rgba(184,53,26,.09); }


  /* ══════════════════════════════════════════
     FOCUS VISIBLE — navigation clavier
  ══════════════════════════════════════════ */
  :focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 3px;
  }
  .strip:focus-visible,
  .filter-btn:focus-visible { outline-offset: -2px; }

  /* ══════════════════════════════════════════
     PREFERS-REDUCED-MOTION — WCAG 2.3
  ══════════════════════════════════════════ */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; }
    #hero-stars, #cosmos-stars { display: none; }
    .hero__brand, .hero__slogan-block, .hero__eyebrow,
    .hero__bio, .hero__cats, .hero__ctas { opacity: 1 !important; transform: none !important; }
    .hero__slogan-line { transform: scaleX(1) !important; }
  }

  /* ══════════════════════════════════════════
     RESPONSIVE — TABLET (≤ 1024px)
  ══════════════════════════════════════════ */
  @media (max-width: 1024px) {
    .site-header { padding: 0 5vw; }

    .strip { grid-template-columns: 48vw 1fr; }
    .strip--reversed { grid-template-columns: 1fr 48vw; }

    .apropos__grid { grid-template-columns: 1fr; gap: 3vw; }
    .apropos__big-name { font-size: clamp(3.5rem, 8vw, 8rem); }
  }

  /* ══════════════════════════════════════════
     RESPONSIVE — MOBILE (≤ 768px)
  ══════════════════════════════════════════ */
  @media (max-width: 768px) {

    /* ── Header ── */
    .site-header {
      height: 64px;
      padding: 0 5vw;
    }
    .logo-sep, .logo-name { display: none; }
    .logo-svg { height: 36px; }
    .site-nav { gap: 1.8rem; }
    .site-nav a { font-size: 12px; letter-spacing: .14em; padding-block: .65rem; }
    .fiche-nav__back { min-height: 44px; }
    .fiche-nav__arr  { min-height: 44px; padding: 0 .5rem; display: inline-flex; align-items: center; }

    /* ── Hero ── */
    .s-ouverture {
      padding: 0 0 8vh 6vw;
      min-height: 100svh;
    }
    .hero__brand { font-size: clamp(4.5rem, 18vw, 10rem); }
  .hero__bio { font-size: 15px; max-width: 100%; }

    /* ── Works header — tablette ── */
    .works-hdr { padding: 3.5rem 5vw 0; margin-bottom: 2.5rem; }
    .works-hdr__title { font-size: clamp(3.5rem, 10vw, 6rem); }
    .filter-bar__btns { flex-wrap: wrap; gap: 0; }
    .filter-btn { padding: .7rem 1.4rem .6rem; font-size: 11px; }

    /* ── Strips — colonne unique ── */
    .strip,
    .strip--reversed {
      grid-template-columns: 1fr;
      padding: 6vw 4vw;
      margin: 2vh 3vw;
    }
    .strip--reversed .strip__image-col,
    .strip--reversed .strip__text-col { order: unset; }

    .strip__image-col {
      padding: 0 0 3vw;
      justify-content: flex-start;
    }
    .strip__image-col img {
      max-height: 52vw;
      max-width: 80%;
      margin: 0 auto;
      display: block;
    }
  .strip__text-col { padding: 0; }
  .strip__title { font-size: clamp(2rem, 7vw, 3.5rem); }
  .strip__actions {
    flex-direction: column;
    align-items: stretch;
    gap: .6rem;
  }
  .strip__actions .strip__cta {
    width: 100%;
    margin-top: 0;
    justify-content: space-between;
  }

  /* ── À propos ── */
  .apropos__grid {
      grid-template-columns: 1fr;
      padding: 6vw 5vw 8vw;
    }
    .apropos__big-name { font-size: clamp(3rem, 14vw, 6rem); padding-bottom: .5em; }
    .apropos__bio { max-width: 100%; }

    /* ── Fiche overlay — colonne unique ── */
    .fiche-overlay {
      inset: 0;
      grid-template-columns: 1fr;
      grid-template-rows: 44vw 1fr;
      overflow-y: auto;
    }
    .fiche-nav { position: sticky; }
    .fiche-img-col {
      padding: 52px 4vw 3vw;
      border-right: none;
      border-bottom: 1px solid rgba(255,236,222,.06);
    }
    .fiche-img-col img { max-height: 38vw; }
    .fiche-content-col {
      padding: 3vw 5vw 6vw;
      overflow-y: visible;
    }
    .fiche-gallery-grid {
      grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    }

    /* ── Footer ── */
    .ft-top {
      flex-direction: column;
      align-items: flex-start;
      gap: 1.8rem;
      padding: 7vw 6vw 2.5vw;
    }
    .ft-nav { align-items: flex-start; }
    .ft-presence { padding: 1.4rem 6vw 1.6rem; }
    .ft-presence-links { gap: .2rem 0; }
    .ft-bottom { flex-direction: column; gap: .3rem; padding: .8rem 6vw 1.1rem; }

    /* ── Back to top ── */
    .back-to-top { bottom: 1.5rem; right: 1.5rem; width: 40px; height: 40px; }

    /* ── Curseur — masqué sur touch ── */
    #cursor-ring, #cursor-dot, #mouse-glow { display: none; }
  }

  @media (max-height: 950px) {
    .hero__brand { font-size: clamp(5rem, 13vw, 14rem); }
  }
  @media (max-height: 820px) {
    .hero__brand { font-size: clamp(4.4rem, 11vw, 11.5rem); }
  }


  /* ══════════════════════════════════════════
     RESPONSIVE — PETIT MOBILE (≤ 480px)
  ══════════════════════════════════════════ */
  @media (max-width: 480px) {
    .logo-brand { font-size: 15px; letter-spacing: .2em; }
    .site-nav { gap: 1.2rem; }
    .site-nav a { font-size: 11px; }

    .works-hdr { padding: 2.8rem 5vw 0; }
    .works-hdr__title { font-size: clamp(3rem, 13vw, 4.5rem); }
    .filter-btn { padding: .6rem .9rem .5rem; font-size: 10px; letter-spacing: .12em; }

    .strip__title { font-size: clamp(1.8rem, 9vw, 3rem); }
    .strip__synopsis { font-size: 14px; }

    .fiche-overlay { grid-template-rows: 52vw 1fr; }
    .fiche-img-col img { max-height: 46vw; }
    .fiche-title { font-size: clamp(1.3rem, 5vw, 1.8rem); }
  }


/* ════════════════════════════════════════════════════════
   WIDGET ACCESSIBILITÉ — pleine hauteur, style Ally
════════════════════════════════════════════════════════ */

/* ── Bouton déclencheur ── */
#a11y-toggle {
  position: fixed;
  bottom: 2.8rem;
  left: 2.8rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid rgba(255,236,222,.16);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  transition:
    background var(--dur-fast) var(--ease-ui),
    border-color var(--dur-fast) var(--ease-ui),
    color var(--dur-fast),
    transform var(--dur-fast) var(--ease-spring);
  box-shadow: 0 2px 16px rgba(0,0,0,.5);
}
#a11y-toggle:hover {
  background: var(--night);
  border-color: var(--signal);
  color: var(--text);
  transform: scale(1.07);
}
#a11y-toggle[aria-expanded="true"] {
  background: var(--signal);
  color: #fff;
  border-color: var(--signal);
}

/* ── Panneau pleine hauteur ── */
#a11y-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 100vh;
  height: 100dvh;
  background: #14141a;
  border-right: 1px solid rgba(255,236,222,.09);
  z-index: 1199;
  display: flex;
  flex-direction: column;
  box-shadow: 14px 0 60px rgba(0,0,0,.7);
  outline: none;
  animation: a11y-slide-in var(--dur-base) var(--ease-out) both;
}
/* display:flex sur le panel surpasse le UA stylesheet — override explicite requis */
#a11y-panel[hidden] { display: none !important; }

@keyframes a11y-slide-in {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

/* ── En-tête ── */
.a11y-hdr {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: 1.1rem 1.1rem 1rem;
  border-bottom: 1px solid rgba(255,236,222,.08);
  background: rgba(255,255,255,.03);
  flex-shrink: 0;
}
.a11y-hdr-title {
  flex: 1;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text);
}
.a11y-hdr svg { color: var(--signal); flex-shrink: 0; }

#a11y-reset, #a11y-close {
  background: none;
  border: none;
  color: var(--dim);
  cursor: pointer;
  font-size: 16px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: color var(--dur-instant), background var(--dur-instant);
  line-height: 1;
}
#a11y-reset:hover { color: var(--signal); background: rgba(224,72,128,.12); }
#a11y-close:hover { color: var(--text); background: rgba(255,255,255,.08); }

/* ── Corps scrollable ── */
.a11y-body {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,236,222,.12) transparent;
}
.a11y-body::-webkit-scrollbar { width: 4px; }
.a11y-body::-webkit-scrollbar-thumb { background: rgba(255,236,222,.12); border-radius: 2px; }

/* ── Sections ── */
.a11y-section {
  padding: 1.1rem 1.1rem .9rem;
  border-bottom: 1px solid rgba(255,236,222,.07);
}

.a11y-section-lbl {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: .9rem;
}

.a11y-sub-lbl {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: .5rem;
  margin-top: .8rem;
}
.a11y-sub-lbl:first-of-type { margin-top: 0; }

/* ── Rangée taille de texte (4 boutons) ── */
.a11y-size-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .35rem;
}
.a11y-size-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .7rem .2rem .55rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,236,222,.08);
  border-radius: 9px;
  color: var(--muted);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  text-align: center;
  transition: background .12s, color .12s, border-color .12s;
  user-select: none;
}
.a11y-size-btn:hover {
  background: rgba(255,255,255,.08);
  color: var(--text);
  border-color: rgba(255,236,222,.2);
}
.a11y-size-btn.is-active {
  background: rgba(224,72,128,.16);
  border-color: rgba(224,72,128,.6);
  color: var(--text);
}
.a11y-size-a {
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  line-height: 1;
  color: inherit;
  display: block;
  min-height: 26px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* ── Grille 2 colonnes ── */
.a11y-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem;
  margin-top: .4rem;
}
.a11y-grid-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

/* ── Boutons d'option ── */
.a11y-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  padding: .85rem .4rem .7rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,236,222,.08);
  border-radius: 10px;
  color: var(--muted);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  min-height: 78px;
  transition: background .12s, color .12s, border-color .12s;
  user-select: none;
}
.a11y-btn:hover {
  background: rgba(255,255,255,.08);
  color: var(--text);
  border-color: rgba(255,236,222,.2);
}
.a11y-btn.is-active {
  background: rgba(224,72,128,.15);
  border-color: rgba(224,72,128,.6);
  color: var(--text);
}
.a11y-btn.is-active .a11y-ico { color: var(--signal); }

.a11y-ico {
  font-size: 26px;
  line-height: 1;
  display: block;
  color: var(--muted);
  transition: color .12s;
}

/* ── Pied de panneau ── */
.a11y-ftr {
  padding: .75rem 1.1rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  color: var(--dim);
  text-align: center;
  border-top: 1px solid rgba(255,236,222,.07);
  letter-spacing: .06em;
  flex-shrink: 0;
}

/* ── Masque de lecture ── */
#a11y-reading-mask {
  position: fixed;
  left: 0; right: 0;
  height: 80px;
  top: 0;
  background: transparent;
  box-shadow: 0 0 0 100vh rgba(0,0,0,.62);
  pointer-events: none;
  z-index: 9990;
  display: none;
}

/* ── Labels structure page ── */
.a11y-struct-lbl {
  display: inline-block;
  background: var(--signal);
  color: #fff;
  font-size: 9px;
  font-family: 'Courier New', monospace;
  padding: 1px 6px 2px;
  border-radius: 3px;
  margin-bottom: 3px;
  pointer-events: none;
  user-select: none;
  vertical-align: middle;
}

/* ════════════════════════════════════════════════════════
   EFFETS D'ACCESSIBILITÉ (data-attributes et classes sur <html>)
════════════════════════════════════════════════════════ */

/* ── Taille du texte — 4 niveaux ──
   zoom sur le contenu uniquement (pas body) pour ne pas déplacer les
   éléments position:fixed (toggle, panel, back-to-top, cursor…)      */
html[data-a11y-size="1"] { font-size: 110%; }
html[data-a11y-size="2"] { font-size: 122%; }
html[data-a11y-size="3"] { font-size: 137%; }

/* ── Alignement — tout le contenu sauf widget ── */
html[data-a11y-align="left"]  body * { text-align: left !important; }
html[data-a11y-align="right"] body * { text-align: right !important; }
/* Restaure le widget dans les deux cas */
html[data-a11y-align] #a11y-widget,
html[data-a11y-align] #a11y-widget * { text-align: left !important; }

/* ── Hauteur de ligne ── */
html.a11y-line-height p,
html.a11y-line-height li,
html.a11y-line-height dd { line-height: 2 !important; }

/* ── Police lisible ── */
html.a11y-readable-font,
html.a11y-readable-font * {
  font-family: Arial, Helvetica, sans-serif !important;
  font-style: normal !important;
  letter-spacing: .01em !important;
}

/* ── Contraste Sombre ── */
html[data-a11y-contrast="dark"] {
  --bg: #000; --surface: #0a0a0a; --night: #000;
  --text: #f0f0f0; --sub: #fff; --muted: #ccc; --dim: #999;
  --signal: #e04880;
}
html[data-a11y-contrast="dark"] body { background: #000 !important; }

/* ── Contraste Clair ──
   invert(1) + hue-rotate(180deg) préserve les teintes (fuchsia → fuchsia,
   fond sombre → fond clair). .site-header est déjà position:fixed (z:500),
   pas besoin de z-index supplémentaire.                                     */
html[data-a11y-contrast="light"] .site-header {
  filter: invert(1) hue-rotate(180deg);
}
/* #cosmos-stars (position:fixed z:0) peint par-dessus #main-content (static)
   car les éléments positionnés surpassent les éléments statiques dans le
   stacking order. On le masque et on remonte main+footer au z:1.           */
html[data-a11y-contrast="light"] #cosmos-stars {
  opacity: 0;
}
html[data-a11y-contrast="light"] #main-content,
html[data-a11y-contrast="light"] footer {
  filter: invert(1) hue-rotate(180deg);
  position: relative;
  z-index: 1;
}
/* Double inversion sur les médias → couleurs d'origine préservées.
   Sélecteur large pour couvrir les imbrications profondes
   (ex. IMG > FIGURE > DIV.strip__image-col > SECTION#main-content).  */
html[data-a11y-contrast="light"] img,
html[data-a11y-contrast="light"] canvas,
html[data-a11y-contrast="light"] video,
html[data-a11y-contrast="light"] picture {
  filter: invert(1) hue-rotate(180deg) !important;
  transition: none !important; /* annule transition: filter 0.7s qui bloque la valeur finale */
}
/* Le widget et le masque de lecture ne doivent pas être réinvertis */
html[data-a11y-contrast="light"] #a11y-widget img,
html[data-a11y-contrast="light"] #a11y-widget canvas,
html[data-a11y-contrast="light"] #a11y-reading-mask {
  filter: none !important;
}
/* Les canvas de fond (hero + cosmos) ne sont pas des illustrations —
   laisser l'inversion du parent #main-content s'appliquer normalement
   pour que le hero devienne clair et le texte FREDC visible.           */
html[data-a11y-contrast="light"] #hero-stars,
html[data-a11y-contrast="light"] #cosmos-stars {
  filter: none !important;
}

/* ── Contraste Élevé ── */
html[data-a11y-contrast="high"] {
  --bg: #000; --surface: #000; --night: #000;
  --text: #fff; --sub: #fff; --muted: #fff; --dim: #ccc;
  --signal: #ffee00; --line: rgba(255,255,255,.3);
}
html[data-a11y-contrast="high"] body   { background: #000 !important; color: #fff !important; }
html[data-a11y-contrast="high"] a      { color: #ffee00 !important; text-decoration: underline !important; }
html[data-a11y-contrast="high"] button { border-color: #fff !important; }
html[data-a11y-contrast="high"] img    { filter: contrast(1.4) brightness(1.1); }

/* ── Niveaux de gris — exclut le widget lui-même ── */
html.a11y-grayscale body > *:not(#a11y-widget):not(#a11y-reading-mask) {
  filter: grayscale(100%);
}

/* ── Masquer images + logo ── */
html.a11y-hide-images img,
html.a11y-hide-images canvas,
html.a11y-hide-images video,
html.a11y-hide-images picture          { opacity: 0 !important; }
html.a11y-hide-images .site-header__logo { opacity: 0 !important; }

/* ── Arrêter animations ── */
html.a11y-pause-anim *,
html.a11y-pause-anim *::before,
html.a11y-pause-anim *::after {
  animation-play-state: paused !important;
  transition-duration: 0.001ms !important;
}

/* ── Surligner les liens ── */
html.a11y-highlight-links a {
  color: #111 !important;
  background: #ffff00 !important;
  font-weight: 700 !important;
  outline: none !important;
  border-radius: 2px;
  padding: 0 2px;
  text-decoration: none !important;
}

/* ── Focus visible renforcé ── */
html.a11y-focus-outline *:focus,
html.a11y-focus-outline *:focus-visible {
  outline: 3px solid var(--signal) !important;
  outline-offset: 3px !important;
  border-radius: 2px;
}

/* ── Protection widget contre ses propres effets ── */
#a11y-widget, #a11y-widget * {
  font-family: 'DM Sans', sans-serif !important;
  text-align: left !important;
}
/* Panel : fond forcé dans tous les modes de contraste */
html[data-a11y-contrast] #a11y-panel {
  background: #14141a !important;
  color: #f4f0ea !important; /* évite l'héritage du noir du body en mode clair */
}
html[data-a11y-contrast="light"] #a11y-panel { background: #1a1a22 !important; }

/* Couleurs explicites des éléments du panel — ne pas laisser hériter */
html[data-a11y-contrast] #a11y-toggle              { color: #f4f0ea !important; }
html[data-a11y-contrast] .a11y-hdr-title           { color: #f4f0ea !important; }
html[data-a11y-contrast] #a11y-reset,
html[data-a11y-contrast] #a11y-close               { color: #d4ae8e !important; }
html[data-a11y-contrast] .a11y-section-lbl         { color: #e04880 !important; }
html[data-a11y-contrast] .a11y-sub-lbl             { color: #d4ae8e !important; }
html[data-a11y-contrast] .a11y-btn,
html[data-a11y-contrast] .a11y-size-btn            { color: #d4ae8e !important; }
html[data-a11y-contrast] .a11y-btn.is-active,
html[data-a11y-contrast] .a11y-size-btn.is-active  { color: #f4f0ea !important; }
html[data-a11y-contrast] .a11y-ftr                 { color: #8a6a4a !important; }

/* ≤768px */
@media (max-width: 768px) {
  #a11y-toggle {
    bottom: 1.5rem;
    left: 1.5rem;
  }
}
/* ≤540px — panneau pleine largeur */
@media (max-width: 540px) {
  #a11y-toggle { width: 42px; height: 42px; }
  #a11y-panel  { left: 0; right: 0; width: auto; }
}

/* ── Print ──────────────────────────────────────────── */
@media print {
  .site-header, .s-ouverture, #a11y-widget, #back-top,
  #hero-stars, #cosmos-stars, .fiche-overlay,
  body::before, body::after { display: none !important; }

  body { background: #fff !important; color: #111 !important; }
  .strip { break-inside: avoid; }
  .strip__title, .strip__synopsis { color: #111 !important; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: .75em; color: #555; }
}