/* ============================================================
   L'OUVRAGE — pour Princess · 23
   Crochet / ajouré · clair-obscur velours · deux mondes
   ============================================================ */

:root {
  /* Monde A — CHANDELLE (intime) */
  --aubergine:#23181B; --prune:#51312D; --lys:#6B514E;
  --peau:#8F6559;     --mauve:#AD998E; --parchemin:#E5CCB9;
  /* Monde B — MINUIT VELOURS (désir) */
  --oxblood:#240F12; --vin:#5C2022; --garance:#8C3130;
  --neon:#E6435E;    --chair:#C79089; --or:#E8C98E;
  /* Accents « ses ouvrages » */
  --olive:#4D5335; --orange:#E9510D;

  /* Trois scalaires découplés, pilotés au scroll (0..1) */
  --world: 0;   /* A -> B */
  --heat: 0.2;  /* chaleur du halo / néon */
  --warmth: 0;  /* tendresse finale */

  /* Couleurs interpolées */
  --bg:   color-mix(in oklab, var(--aubergine), var(--oxblood) calc(var(--world)*100%));
  --bg2:  color-mix(in oklab, var(--prune),     var(--vin)     calc(var(--world)*100%));
  --halo: color-mix(in oklab, var(--prune),     var(--garance) calc(var(--world)*100%));
  --accent: color-mix(in oklab, var(--garance), var(--neon) calc(var(--heat)*100%));
  --ink: var(--parchemin);

  --display:"Fraunces", Georgia, serif;
  --body:"Hanken Grotesk", system-ui, sans-serif;
  --patron:"Spline Sans Mono","Courier Prime", monospace;

  --gut: clamp(22px, 5.5vw, 110px);
}

* { box-sizing: border-box; }

/* barre de défilement masquée — la boucle infinie doit rester invisible */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  cursor: none;
  transition: background-color .25s linear;
}

/* ---- Éclairage : bougie qui respire, derrière tout ---- */
.candle {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(80% 60% at 50% 42%,
      color-mix(in oklab, var(--halo) 78%, transparent) 0%,
      color-mix(in oklab, var(--halo) 22%, transparent) 38%,
      transparent 70%);
  opacity: calc(0.32 + var(--heat) * 0.55);
  animation: breathe 7s ease-in-out infinite;
  transition: opacity .25s linear;
}
.candle.gold {
  background: radial-gradient(46% 34% at 50% 40%,
    color-mix(in oklab, var(--or) 40%, transparent) 0%, transparent 62%);
  opacity: calc(0.10 + var(--warmth) * 0.34);
  animation: flicker 5.5s ease-in-out infinite;
}
@keyframes breathe { 0%,100%{ transform:scale(1); opacity:calc(.30 + var(--heat)*.5);} 50%{ transform:scale(1.05); opacity:calc(.40 + var(--heat)*.55);} }
@keyframes flicker { 0%,100%{opacity:calc(.10+var(--warmth)*.30)} 45%{opacity:calc(.16+var(--warmth)*.40)} 70%{opacity:calc(.09+var(--warmth)*.28)} }

/* ---- Grain film + vignette ---- */
.grain {
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
  background-image: url("grain.svg"); background-size: 200px 200px;
  opacity: .5; mix-blend-mode: overlay;
}
.vignette {
  position: fixed; inset: 0; z-index: 41; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 45%, transparent 48%, rgba(8,3,5,.78) 100%);
}

/* ---- Le chemin de fil : le fil unique qui descend la page ---- */
#thread-layer {
  position: absolute; top: 0; left: 0;
  width: 100%; z-index: 2;
  pointer-events: none;
}
#thread-layer svg { display: block; width: 100%; height: 100%; }
#fil-main  { stroke: url(#fil-grad); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: url(#fil-shadow); }
#fil-twist { stroke: url(#fil-grad); stroke-width: 5.2; stroke-linecap: round; stroke-linejoin: round; opacity: .16; }
#fil-head  { filter: drop-shadow(0 0 4px rgba(230,67,94,.5)); }

/* ============================================================
   PLIS — composition velours
   ============================================================ */
main { position: relative; z-index: 5; }

.pli {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-content: center;
  padding: clamp(90px,15vh,190px) var(--gut);
  gap: 40px;
}
.pli__inner { max-width: 620px; position: relative; }
.pli[data-side="right"] .pli__inner { margin-left: auto; text-align: right; }
.pli[data-side="center"] .pli__inner { margin-inline: auto; justify-self: center; text-align: center; }

/* annotation patron */
.patron {
  font-family: var(--patron);
  font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase;
  color: color-mix(in oklab, var(--ink) 64%, transparent);
  display: inline-flex; align-items: center; gap: 12px;
}
.patron::before {
  content:""; width: 50px; height: 1px;
  background-image: linear-gradient(90deg, currentColor 0 4px, transparent 4px 9px);
  background-size: 9px 1px;
}
.pli[data-side="right"] .patron { flex-direction: row-reverse; }
.pli[data-side="center"] .patron { justify-content: center; }

/* display */
.h {
  font-family: var(--display);
  font-weight: 430; font-optical-sizing: auto;
  font-variation-settings: "SOFT" 50, "WONK" 1;
  font-size: clamp(2.7rem, 7.5vw, 6rem);
  line-height: .98; letter-spacing: -.018em;
  margin: .28em 0 .5em; color: var(--ink);
  text-wrap: balance;
}
.h em { font-style: italic; font-variation-settings:"SOFT" 90,"WONK" 1; color: color-mix(in oklab, var(--ink), var(--accent) 35%); }

.body {
  font-size: clamp(1.12rem, 2vw, 1.5rem); line-height: 1.5;
  max-width: 34ch; color: color-mix(in oklab, var(--ink) 92%, transparent);
  margin: 0 0 1em; text-wrap: pretty;
}
.pli[data-side="right"] .body { margin-left: auto; }
.pli[data-side="center"] .body { margin-inline: auto; }

.sig {
  font-family: var(--display); font-style: italic;
  font-size: clamp(1.4rem,3.2vw,2.3rem);
  color: color-mix(in oklab, var(--or), var(--ink) 30%);
}

/* ---- Néon : accents EN tirés de SES boards ---- */
.neon {
  font-family: var(--display); font-style: italic; font-weight: 500;
  color: color-mix(in oklab, var(--neon) 85%, white);
  text-shadow:
    0 0 calc(4px + var(--heat)*6px) color-mix(in oklab, var(--neon) 90%, transparent),
    0 0 calc(12px + var(--heat)*22px) color-mix(in oklab, var(--neon) 70%, transparent),
    0 0 calc(28px + var(--heat)*44px) color-mix(in oklab, var(--neon) 40%, transparent);
  white-space: nowrap;
}
.neon.lower { text-transform: lowercase; }

/* ============================================================
   RÉVÉLATION « drape » — le tissu retombe (pas de fade-up)
   piloté par --rev (0->1), scroll-driven sous le pli.
   ============================================================ */
@property --rev { syntax:"<number>"; inherits:false; initial-value:0; }
.js .reveal {
  --rev: 0;
  clip-path: inset(calc((1 - var(--rev)) * 112%) -0.06em 0 -0.06em);
  transform: translateY(calc((1 - var(--rev)) * -14px));
}
.js .reveal.shown { --rev: 1; }   /* déjà visible au chargement : statique */

/* ============================================================
   MEDIA PLI — portrait sous ajouré qui s'écarte
   ============================================================ */
.media-pli { grid-template-columns: 1fr; }
@media (min-width: 920px) {
  .media-pli { grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: clamp(30px,5vw,80px); }
  .media-pli[data-media="left"] .pli__inner { order: 2; }
  .media-pli[data-media="left"] .media { order: 1; }
}
.media {
  position: relative;
  margin: 0;
  border-radius: 2px;
  aspect-ratio: 3 / 4;
  max-height: 78vh;
  overflow: hidden;
  box-shadow:
    0 30px 80px -30px rgba(0,0,0,.8),
    0 0 0 1px color-mix(in oklab, var(--ink) 12%, transparent);
}
.media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.92) contrast(1.02);
}
/* teinte du monde par dessus la photo (duotone calé sur --world) */
.media::after {
  content:""; position: absolute; inset: 0; pointer-events: none;
  background: color-mix(in oklab, var(--halo) 30%, transparent);
  mix-blend-mode: soft-light;
}
/* les deux pans d'ajouré (SVG injecté) */
.veil {
  position: absolute; top: -2%; height: 104%; width: 56%;
  pointer-events: none; z-index: 3;
  transition: transform .1s linear;
}
.veil.l { left: -1%;  }
.veil.r { right: -1%; }
.veil svg { width: 100%; height: 100%; display: block; }

/* légende mono sous un média */
.cap { font-family: var(--patron); font-size: 11px; letter-spacing:.16em; text-transform: uppercase; color: color-mix(in oklab, var(--ink) 55%, transparent); margin-top: 14px; }

/* galerie crochet (pli 1) */
.ouvrages { display: flex; gap: 18px; margin-top: 30px; }
.ouvrage { position: relative; width: 150px; flex: 0 0 auto; }
.ouvrage img { width: 100%; height: 210px; object-fit: cover; border-radius: 2px; display:block;
  box-shadow: 0 16px 40px -18px rgba(0,0,0,.8), 0 0 0 1px color-mix(in oklab, var(--ink) 10%, transparent); }
.ouvrage figcaption { font-family: var(--patron); font-size: 10px; letter-spacing:.14em; text-transform: uppercase; color: color-mix(in oklab,var(--ink) 50%, transparent); margin-top: 9px; }
.ouvrage .picot { color: var(--olive); }
.ouvrage.orange .picot { color: var(--orange); }

/* ---- glyphes de couture (petites illustrations de section) ---- */
.patron .g {
  width: 16px; height: 16px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; opacity: .85;
}

/* ---- Gourmande : la photo (poulet) sous cadre crochet ---- */
.media.food { aspect-ratio: 4 / 5; background: color-mix(in oklab, var(--prune) 50%, var(--oxblood)); }
.media.food image-slot { width: 100%; height: 100%; display: block; }
.food-cap {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 14px 16px; text-align: left; z-index: 4;
  background: linear-gradient(0deg, rgba(10,4,6,.72), transparent);
  color: color-mix(in oklab, var(--ink) 82%, white);
}

/* ---- Famille : carré de grand-mère, chaud au centre, effiloché (la peur) ---- */
.famille-illu-wrap { margin: 4px 0 26px; }
.famille-illu { width: clamp(220px, 44vw, 320px); height: auto; display: block; overflow: visible; }
.pli[data-side="right"] .famille-illu { margin-left: auto; }
.gs rect { fill: none; stroke-linecap: round; stroke-dasharray: 1.6 7; }
.gs .gs1 { stroke: var(--peau);    stroke-width: 3; }
.gs .gs2 { stroke: var(--or);      stroke-width: 3; }
.gs .gs3 { stroke: var(--garance); stroke-width: 3; }
.gs .gs4 { stroke: var(--chair);   stroke-width: 3; }
.gs-heart { fill: color-mix(in oklab, var(--garance), var(--neon) 30%); }
.fray path { fill: none; stroke: color-mix(in oklab, var(--vin), var(--oxblood) 25%); stroke-width: 2.4; stroke-linecap: round; }

/* ---- l'invite à boucler (final) ---- */
.loop-hint {
  font-family: var(--patron); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: color-mix(in oklab, var(--ink) 42%, transparent); margin: 30px 0 0;
}
.pli[data-side="center"] .loop-hint { margin-inline: auto; }

/* clone de boucle : purement visuel */
[data-loop-clone] { pointer-events: none; }

/* ---- Le nœud têtu (résistance scroll sur « têtue ») ---- */
.knot-stage { position: relative; margin: 26px 0; min-height: 150px; }
.knot-svg { width: clamp(220px, 36vw, 300px); height: auto; overflow: visible; display: block; }
.pli[data-side="right"] .knot-svg { margin-left: auto; }
.force-hint {
  position: absolute; left: 0; bottom: -2px;
  font-family: var(--patron); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--neon); display: inline-flex; align-items: center; gap: 10px;
  transition: opacity .5s ease;
}
.pli[data-side="right"] .force-hint { left: auto; right: 0; flex-direction: row-reverse; }
.force-hint .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--neon); animation: forcepulse 1.1s ease-in-out infinite; }
@keyframes forcepulse { 0%,100%{ opacity:.3; transform:scale(.8);} 50%{ opacity:1; transform:scale(1.3);} }
.knot-released .force-hint { opacity: 0; }

/* ============================================================
   FESTONS (scallops) — séparateurs de pli
   ============================================================ */
.scallop { position: relative; height: 26px; margin: 0 var(--gut); z-index: 5; }
.scallop svg { width: 100%; height: 100%; display:block; overflow: visible; }
.scallop path { fill: none; stroke: color-mix(in oklab, var(--accent), var(--or) 30%); stroke-width: 2; stroke-linecap: round; }

/* ============================================================
   CŒUR cousu (seuil + pli peur->amour)
   ============================================================ */
.heart-seuil { display:inline-block; width: 30px; height: 30px; vertical-align: -4px; margin-left: 10px; }
.heart-seuil path { fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; }

.heart-stage { margin: 18px 0 8px; }
.heart-stage svg { width: clamp(150px, 30vw, 240px); height: auto; overflow: visible; display:block; }
.pli[data-side="center"] .heart-stage svg { margin-inline: auto; }
.heart-line { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px color-mix(in oklab, var(--neon) 50%, transparent)); }
.heart-fill { fill: color-mix(in oklab, var(--garance), var(--neon) 40%); opacity: 0; }

/* ============================================================
   SEUIL — bouton d'entrée
   ============================================================ */
.enter {
  -webkit-appearance:none; appearance:none; cursor:none;
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--accent) 80%, transparent);
  color: color-mix(in oklab, var(--ink), var(--accent) 30%);
  font-family: var(--patron); font-size: 12px; letter-spacing:.2em; text-transform: uppercase;
  padding: 16px 32px; border-radius: 999px; margin-top: 34px;
  transition: background .4s, color .4s, letter-spacing .4s, box-shadow .4s;
}
.enter:hover {
  background: var(--accent); color: var(--oxblood); letter-spacing:.27em;
  box-shadow: 0 0 30px -4px color-mix(in oklab, var(--neon) 70%, transparent);
}

/* ============================================================
   CURSEUR — aiguille à crochet + fil
   ============================================================ */
#cursor-layer { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0; transition: opacity .35s; }
#cursor-layer svg { width: 100%; height: 100%; display:block; }
#cthread { fill:none; stroke: color-mix(in oklab, var(--accent), var(--or) 25%); stroke-width: 1.5; stroke-linecap: round; opacity:.85; }
#chook { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }

/* ============================================================
   AUDIO + progression
   ============================================================ */
#audio-toggle {
  position: fixed; bottom: 22px; right: 26px; z-index: 70;
  display: inline-flex; align-items: center; gap: 12px;
  background: color-mix(in oklab, var(--oxblood) 60%, transparent);
  backdrop-filter: blur(4px);
  border: 1px solid color-mix(in oklab, var(--ink) 18%, transparent);
  border-radius: 999px; padding: 9px 15px; cursor: none;
  font-family: var(--patron); font-size: 11px; letter-spacing:.16em; text-transform: uppercase; color: var(--ink);
}
#audio-toggle .eq { display:flex; align-items:flex-end; gap:2px; height:13px; }
#audio-toggle .eq i { width:2px; height:4px; background: var(--accent); }
#audio-toggle.playing .eq i { animation: eq 1s ease-in-out infinite; }
#audio-toggle.playing .eq i:nth-child(2){animation-delay:.18s}
#audio-toggle.playing .eq i:nth-child(3){animation-delay:.36s}
#audio-toggle.playing .eq i:nth-child(4){animation-delay:.1s}
@keyframes eq {0%,100%{height:4px}50%{height:13px}}
#progress { position: fixed; top:0; left:0; height:2px; width:0%; background: var(--accent); z-index:70;
  box-shadow: 0 0 10px color-mix(in oklab, var(--neon) 70%, transparent); transition: width .05s linear; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 920px) {
  .pli[data-side="right"] .pli__inner { margin: 0; text-align: left; }
  .pli[data-side="right"] .patron { flex-direction: row; }
  .pli[data-side="right"] .body { margin-left: 0; }
  .media { max-height: 64vh; margin: 0 auto; width: 100%; max-width: 420px; }
  .ouvrages { flex-wrap: wrap; }
}
@media (max-width: 560px) {
  body { font-size: 17px; }
  .ouvrage { width: 130px; }
}

/* ============================================================
   REDUCED MOTION — ouvrage déjà ouvert
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { --rev: 1 !important; clip-path:none !important; transform:none !important; }
  .candle, .candle.gold { animation: none !important; }
  body { cursor: auto; }
  #cursor-layer { display: none; }
}

/* ---- lecteur YouTube caché (piste de fond) ---- */
/* taille réelle rendue (sinon YouTube refuse de lancer le flux), mais
   invisible : opacité quasi nulle, derrière tout, non cliquable, clippé */
#yt-host {
  position: fixed; bottom: 0; right: 0;
  width: 320px; height: 180px;
  opacity: 0.012; pointer-events: none;
  z-index: -1;
}

/* ---- crédit du morceau, discret, apparaît quand ça joue ---- */
#track-credit {
  position: fixed; bottom: 54px; right: 26px;
  z-index: 69;
  font-family: var(--patron);
  font-size: 11px; letter-spacing: .06em;
  color: color-mix(in oklab, var(--ink) 70%, transparent);
  opacity: 0; transform: translateY(6px);
  transition: opacity .6s ease, transform .6s ease;
  pointer-events: none;
}
#track-credit.show { opacity: 1; transform: translateY(0); }
#track-credit .tc-mark { color: var(--neon); }
#track-credit em { font-style: italic; color: var(--ink); }

/* ============================================================
   LOADER — « l'ouvrage se monte » · fil d'or cousu, velours
   ============================================================ */
#loader {
  position: fixed; inset: 0; z-index: 999;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 90% at 50% 18%, color-mix(in oklab, var(--prune) 60%, transparent), transparent 60%),
    radial-gradient(140% 120% at 50% 120%, var(--oxblood), var(--aubergine) 70%);
  transition: opacity 1.1s ease, visibility 1.1s ease;
}
#loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
#loader .veil-grain { position: absolute; inset: 0; background: url("grain.svg"); opacity: .06; mix-blend-mode: overlay; pointer-events: none; }

.ld-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 30px; padding: 0 24px; text-align: center; }

.ld-mark { width: clamp(150px, 30vw, 230px); height: auto; overflow: visible; }
.ld-mark .stitch { fill: none; stroke: var(--or); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 2px 6px color-mix(in oklab, var(--garance) 50%, transparent)); }
.ld-mark .heart {
  stroke-dasharray: 520; stroke-dashoffset: 520;
  animation: ld-draw 2.4s cubic-bezier(.6,.02,.2,1) forwards;
}
.ld-mark .baseline {
  stroke: color-mix(in oklab, var(--or) 70%, transparent); stroke-width: 1.4;
  stroke-dasharray: 4 7; stroke-dashoffset: 240;
  animation: ld-run 2.6s linear forwards;
}
.ld-mark .needle {
  stroke: var(--or); stroke-width: 2; stroke-linecap: round;
  transform-box: fill-box; transform-origin: 50% 0%;
  opacity: 0; animation: ld-needle 2.6s ease forwards;
}
.ld-mark .needle .eye { fill: none; stroke: var(--or); stroke-width: 1.4; }

@keyframes ld-draw { to { stroke-dashoffset: 0; } }
@keyframes ld-run  { to { stroke-dashoffset: 0; } }
@keyframes ld-needle {
  0%   { opacity: 0; transform: rotate(-7deg) translateY(-4px); }
  35%  { opacity: .9; }
  60%  { transform: rotate(4deg) translateY(0); }
  100% { opacity: .9; transform: rotate(0deg); }
}

.ld-title {
  font-family: var(--display); font-optical-sizing: auto;
  font-size: clamp(38px, 9vw, 86px); line-height: .95; font-weight: 360;
  color: var(--ink); letter-spacing: .005em;
  opacity: 0; transform: translateY(14px);
  animation: ld-rise 1.3s ease .9s forwards;
}
.ld-title em { font-style: italic; color: var(--or); }
.ld-sub {
  font-family: var(--patron); font-size: 12px; letter-spacing: .42em; text-transform: uppercase;
  color: color-mix(in oklab, var(--ink) 64%, transparent);
  opacity: 0; animation: ld-rise 1.3s ease 1.35s forwards;
}
.ld-thread-line {
  width: min(280px, 64vw); height: 1px; position: relative; overflow: hidden;
  background: color-mix(in oklab, var(--ink) 14%, transparent);
}
.ld-thread-line::after {
  content: ""; position: absolute; inset: 0; width: 40%;
  background: linear-gradient(90deg, transparent, var(--or), transparent);
  animation: ld-shimmer 1.5s ease-in-out infinite;
}
@keyframes ld-rise { to { opacity: 1; transform: translateY(0); } }
@keyframes ld-shimmer { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }

@media (prefers-reduced-motion: reduce) {
  .ld-mark .heart, .ld-mark .baseline, .ld-mark .needle { animation-duration: .01s; }
  .ld-title, .ld-sub { animation-delay: .1s; }
}

/* ============================================================
   GOURMANDE — le poulet calé dans le velours (duotone clair-obscur)
   l'image vit dans le shadow DOM de <image-slot> : on la grade via ::part
   ============================================================ */
.media.food {
  background: color-mix(in oklab, var(--oxblood) 72%, #000);
  box-shadow:
    0 30px 80px -30px rgba(0,0,0,.85),
    inset 0 0 70px 10px rgba(8,3,5,.8),
    0 0 0 1px color-mix(in oklab, var(--or) 24%, transparent);
}
/* le grade de base : moins « photo stock », chaud, assombri, contrasté */
.food-slot::part(image) {
  filter: saturate(.7) contrast(1.12) brightness(.78) sepia(.28) hue-rotate(-8deg);
}
/* duotone : ombres oxblood, lumières garance — fondu multiply */
.media.food::before {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:
    radial-gradient(120% 95% at 50% 16%,
      color-mix(in oklab, var(--garance) 58%, #1c0b0d) 0%,
      color-mix(in oklab, var(--oxblood) 82%, #000) 66%,
      #100608 100%);
  mix-blend-mode: multiply;
  opacity: calc(.62 + var(--heat) * .26);
}
/* filet de lumière chaude en haut (comme la chandelle) par-dessus */
.media.food::after {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:
    radial-gradient(85% 55% at 50% 4%, color-mix(in oklab, var(--or) 60%, transparent), transparent 58%);
  mix-blend-mode: soft-light;
  opacity: .9;
}