/* ==========================================================================
   Deux Couverts — couche d'immersion
   Profondeur, lumière, vapeur, braises et transitions. Chargée après styles.css,
   sans le remplacer : les règles responsives et d'accessibilité restent celles de base.
   Tout mouvement est conditionné à .dc-motion (posée par immersion.js) ET à
   prefers-reduced-motion: no-preference.
   ========================================================================== */

/* ---------- Toujours actif : stabilité du mode cuisine (aucun clignotement) ---------- */
.timer[data-state="done"] .timer__digits { animation: none !important; }
body.has-alarm[data-route="cuisine"] .cook__bg::after { animation: none !important; }
.alarm { animation: alarm-in .5s cubic-bezier(.34, 1.56, .64, 1), alarm-breathe 2.8s ease-in-out infinite; }
.alarm__icon svg { animation-duration: 2.6s; }
@keyframes alarm-breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(226, 163, 58, .45); } 50% { box-shadow: 0 0 0 12px rgba(226, 163, 58, 0); } }

/* ---------- Texte découpé en mots (structure sans effet si pas de mouvement) ---------- */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .1em .12em 0; margin: 0 -.1em -.12em 0; }
.w__i { display: inline-block; }

/* ---------- Service final (présent aussi sans mouvement, statique) ---------- */
.cook--done { overflow: hidden; }
.serve { position: relative; width: min(300px, 68vw); aspect-ratio: 1; margin: 0 auto 6px; }
.serve__halo { position: absolute; inset: -16%; border-radius: 50%; background: radial-gradient(closest-side, rgba(226, 163, 58, .32), rgba(163, 54, 31, .12) 60%, transparent 72%); }
.serve__plate { position: absolute; inset: 8%; border-radius: 50%; overflow: hidden; background: var(--cast-3); box-shadow: 0 0 0 10px #FBF7F1, 0 0 0 11px rgba(33, 26, 21, .25), 0 34px 60px -18px rgba(0, 0, 0, .75); }
.serve__plate img { width: 100%; height: 100%; object-fit: cover; }
.serve__cloche, .serve__steam { display: none; }
.credit--done { justify-content: center; color: var(--cream-muted); }
.credit--done a { color: inherit; }
.credit--collage { margin-top: 10px; justify-content: center; text-align: center; font-size: .74rem; gap: 4px 12px; }
/* Crédits repliables : discrets, attribution complète à un geste */
details.credit { display: block; text-align: center; }
details.credit > summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 2px 12px; border-radius: 999px;
  border: 1px solid var(--line); cursor: pointer; list-style: none;
}
details.credit > summary::-webkit-details-marker { display: none; }
details.credit > summary::after { content: "+"; font-weight: 700; }
details.credit[open] > summary::after { content: "–"; }
details.credit ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
details.credit p { margin-top: 8px; }
details.credit a { color: inherit; text-underline-offset: 3px; }
details.credit--done > summary { border-color: rgba(243, 233, 218, .22); }

/* ---------- Décors injectés : neutres hors mouvement ---------- */
.read-progress, .ambient, .fx-layer { pointer-events: none; }
html:not(.dc-motion) .read-progress, html:not(.dc-motion) .ambient { display: none; }

@media (prefers-reduced-motion: no-preference) {

  /* ======================================================================
     Transitions entre les vues (View Transitions) — courtes et non bloquantes
     ====================================================================== */
  ::view-transition { pointer-events: none; }
  ::view-transition-old(root), ::view-transition-new(root) {
    animation-duration: .38s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); mix-blend-mode: normal;
  }
  html[data-vt="forward"]::view-transition-old(root) { animation-name: vt-recede; }
  html[data-vt="forward"]::view-transition-new(root) { animation-name: vt-rise; }
  html[data-vt="back"]::view-transition-old(root) { animation-name: vt-drop; }
  html[data-vt="back"]::view-transition-new(root) { animation-name: vt-return; }
  html[data-vt="cook"]::view-transition-old(root) { animation: vt-dim .55s cubic-bezier(.6, 0, .2, 1) both; }
  html[data-vt="cook"]::view-transition-new(root) { animation: vt-iris .6s cubic-bezier(.6, 0, .2, 1) both; }
  html[data-vt="out"]::view-transition-old(root) { animation: vt-iris-close .48s cubic-bezier(.6, 0, .3, 1) both; z-index: 2; }
  html[data-vt="out"]::view-transition-new(root) { animation: vt-under .48s cubic-bezier(.2, .8, .2, 1) both; }

  .recipe-hero__media { view-transition-name: dc-photo; }
  html[data-vt="cook"] .recipe-hero__media, html[data-vt="out"] .recipe-hero__media { view-transition-name: none; }
  ::view-transition-group(dc-photo) { animation-duration: .52s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  ::view-transition-old(dc-photo), ::view-transition-new(dc-photo) { width: 100%; height: 100%; object-fit: cover; overflow: clip; }
  .topbar { view-transition-name: dc-topbar; }
  .tabbar { view-transition-name: dc-tabbar; }

  @keyframes vt-recede { to { opacity: 0; transform: scale(.965) translateY(-12px); } }
  @keyframes vt-rise { from { opacity: 0; transform: translateY(40px) scale(1.01); } }
  @keyframes vt-drop { to { opacity: 0; transform: translateY(34px) scale(.985); } }
  @keyframes vt-return { from { opacity: 0; transform: translateY(-20px) scale(1.02); } }
  @keyframes vt-dim { to { opacity: .15; transform: scale(1.05); } }
  @keyframes vt-iris { from { clip-path: circle(0% at var(--vt-x, 50%) var(--vt-y, 50%)); } to { clip-path: circle(150% at var(--vt-x, 50%) var(--vt-y, 50%)); } }
  @keyframes vt-iris-close { from { clip-path: circle(150% at 50% 50%); } to { clip-path: circle(0% at 50% 50%); } }
  @keyframes vt-under { from { opacity: .35; transform: scale(.96); } }

  /* ======================================================================
     Ambiance globale
     ====================================================================== */
  .dc-motion .ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
  .dc-motion .ambient i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; opacity: .55; will-change: transform; }
  .dc-motion .ambient i:nth-child(1) { left: -30vmax; top: -30vmax; background: radial-gradient(closest-side, rgba(226, 163, 58, .22), transparent); animation: drift-a 34s ease-in-out infinite alternate; }
  .dc-motion .ambient i:nth-child(2) { right: -35vmax; top: 20vh; background: radial-gradient(closest-side, rgba(163, 54, 31, .13), transparent); animation: drift-b 41s ease-in-out infinite alternate; }
  .dc-motion .ambient i:nth-child(3) { left: 10vw; bottom: -45vmax; background: radial-gradient(closest-side, rgba(61, 90, 56, .12), transparent); animation: drift-a 47s ease-in-out infinite alternate-reverse; }
  html[data-view="cuisine"] .ambient, html[data-view="cuisine"] .read-progress { display: none; }
  @keyframes drift-a { to { transform: translate(18vw, 14vh) scale(1.15); } }
  @keyframes drift-b { to { transform: translate(-16vw, 20vh) scale(.9); } }

  .dc-motion .read-progress { position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: 3px; }
  .dc-motion .read-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--paprika), var(--saffron)); transform-origin: 0 50%; transform: scaleX(0); box-shadow: 0 0 10px rgba(226, 163, 58, .6); }

  .dc-motion .topbar { transition: box-shadow .4s, background-color .4s; }
  .dc-motion.is-scrolled .topbar { box-shadow: 0 12px 30px -20px rgba(33, 26, 21, .55); }
  .dc-motion .brand__mark { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
  .dc-motion.is-scrolled .brand__mark { transform: rotate(-8deg) scale(.92); }
  .dc-motion .brand:hover .brand__mark { transform: rotate(6deg) scale(1.08); }

  .dc-motion .fx-layer { position: fixed; inset: 0; z-index: 95; overflow: hidden; }
  .dc-motion .spark { position: absolute; width: 7px; height: 7px; border-radius: 50%; }
  .dc-motion .fly-dish {
    position: absolute; width: 64px; height: 64px; border-radius: 50%; background: var(--saffron) center / cover no-repeat;
    box-shadow: 0 0 0 3px #FBF7F1, 0 16px 30px -10px rgba(33, 26, 21, .6);
  }

  /* Ondes au toucher */
  .dc-motion .btn, .dc-motion .chip, .dc-motion .icon-btn, .dc-motion .ing-chip, .dc-motion .seg button,
  .dc-motion .other-timer, .dc-motion .tabbar a, .dc-motion .tabbar button { position: relative; overflow: hidden; isolation: isolate; }
  .dc-motion .ripple { position: absolute; z-index: -1; border-radius: 50%; background: currentColor; pointer-events: none; }
  .dc-motion .btn { transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), background .2s, box-shadow .25s, border-color .2s, translate .25s ease-out; }
  .dc-motion .btn:active { transform: scale(.96); }
  .dc-motion .chip[aria-pressed="true"] { animation: pop .42s cubic-bezier(.34, 1.56, .64, 1); }
  .dc-motion .tabbar [aria-current="page"] svg { animation: pop .5s cubic-bezier(.34, 1.56, .64, 1); }
  .dc-motion .recipe-actions .btn--primary, .dc-motion .today__cta .btn--primary, .dc-motion .resume .btn--primary {
    background-image: linear-gradient(110deg, transparent 35%, rgba(255, 236, 200, .38) 50%, transparent 65%);
    background-size: 260% 100%; animation: shimmer 4.8s ease-in-out infinite;
  }
  @keyframes pop { 0% { transform: scale(.9); } 55% { transform: scale(1.08); } 100% { transform: scale(1); } }
  @keyframes shimmer { 0%, 55% { background-position: 160% 0; } 100% { background-position: -60% 0; } }

  /* Filets des surtitres */
  .dc-motion .section-head .eyebrow::before, .dc-motion .hero .eyebrow::before, .dc-motion .page-head .eyebrow::before, .dc-motion .today .eyebrow::before, .dc-motion .adapt .eyebrow::before {
    content: ""; width: 26px; height: 2px; border-radius: 2px; background: currentColor; transform-origin: left; animation: line-draw .9s cubic-bezier(.2, .8, .2, 1) .2s both;
  }
  @keyframes line-draw { from { transform: scaleX(0); } }

  /* Mots révélés */
  .dc-motion .hero__title .w__i, .dc-motion .page-head h1 .w__i, .dc-motion .recipe-hero h1 .w__i, .dc-motion .done h1 .w__i {
    animation: word-up .95s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(120ms + var(--wi, 0) * 60ms);
  }
  .dc-motion .split-io .w__i { transform: translateY(108%) rotate(3deg); transition: transform .85s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--wi, 0) * 45ms); }
  .dc-motion .split-io.is-shown .w__i { transform: none; }
  @keyframes word-up { from { transform: translateY(110%) rotate(4deg); } to { transform: none; } }

  /* Boucles en pause hors écran ou onglet masqué */
  [data-loop].is-off, [data-loop].is-off *, [data-loop].is-off *::before, [data-loop].is-off *::after,
  html.dc-paused *, html.dc-paused *::before, html.dc-paused *::after { animation-play-state: paused !important; }

  /* ======================================================================
     Accueil — arrivée cinématographique
     ====================================================================== */
  .dc-motion .hero { isolation: isolate; }
  .dc-motion .hero__inner { position: relative; z-index: 2; }
  .dc-motion .hero::after {
    content: ""; position: absolute; z-index: 0; width: 70vmax; height: 70vmax; right: -28vmax; top: -30vmax; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(163, 54, 31, .16), rgba(226, 163, 58, .08) 55%, transparent); animation: drift-b 22s ease-in-out infinite alternate; pointer-events: none;
  }
  .hero__light { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
  .hero__light .beam {
    position: absolute; top: -30%; left: -40%; width: 45%; height: 160%; transform: rotate(16deg);
    background: linear-gradient(90deg, transparent, rgba(255, 238, 205, .55), transparent); animation: beam 11s ease-in-out 1.2s infinite;
  }
  .hero__light .mote {
    position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%;
    background: rgba(226, 163, 58, .8); box-shadow: 0 0 6px rgba(226, 163, 58, .6); opacity: 0; animation: mote var(--d) linear var(--dl) infinite;
  }
  @keyframes beam { 0% { transform: translateX(0) rotate(16deg); opacity: 0; } 15% { opacity: 1; } 60%, 100% { transform: translateX(380%) rotate(16deg); opacity: 0; } }
  @keyframes mote { 0% { transform: translate(0, 20px); opacity: 0; } 20% { opacity: .8; } 80% { opacity: .5; } 100% { transform: translate(40px, -120px); opacity: 0; } }

  .dc-motion .hero__text .eyebrow { animation: rise .8s cubic-bezier(.2, .8, .2, 1) .05s both; }
  .dc-motion .hero__text .lead { animation: rise .9s cubic-bezier(.2, .8, .2, 1) .5s both; }
  .dc-motion .hero__cta { animation: rise .9s cubic-bezier(.2, .8, .2, 1) .65s both; }
  .dc-motion .hero__stats > div { animation: rise .8s cubic-bezier(.2, .8, .2, 1) both; }
  .dc-motion .hero__stats > div:nth-child(1) { animation-delay: .78s; }
  .dc-motion .hero__stats > div:nth-child(2) { animation-delay: .86s; }
  .dc-motion .hero__stats > div:nth-child(3) { animation-delay: .94s; }
  .dc-motion .hero__figure { animation: figure-in 1.25s cubic-bezier(.2, .8, .2, 1) .08s both; }
  .dc-motion .hero__media img { animation: photo-in 1.7s cubic-bezier(.2, .8, .2, 1) both, kenburns 26s ease-in-out 1.7s infinite alternate; translate: calc(var(--mx, 0) * -14px) calc(var(--my, 0) * -10px); transition: opacity .7s, translate .8s cubic-bezier(.2, .8, .2, 1); }
  .dc-motion .hero__media::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(115deg, transparent 38%, rgba(255, 240, 215, .32) 50%, transparent 62%); background-size: 320% 100%; animation: sweep 8s ease-in-out 1.8s infinite;
  }
  .dc-motion .arch { will-change: transform; }
  @keyframes rise { from { opacity: 0; transform: translateY(26px); } }
  @keyframes figure-in { from { opacity: 0; transform: translateY(70px) scale(.9) rotate(-3deg); } }
  @keyframes photo-in { from { transform: scale(1.38); filter: saturate(.5) brightness(1.15); } to { transform: scale(1.02); } }
  @keyframes kenburns { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.13) translate(-2.5%, -2%); } }
  @keyframes sweep { 0%, 50% { background-position: 130% 0; } 100% { background-position: -40% 0; } }

  .arch__steam { position: absolute; left: 0; right: 0; top: -16%; height: 64%; z-index: 3; pointer-events: none; }
  .arch__steam--recipe { top: auto; bottom: 0; height: 75%; z-index: 1; }
  .steam-canvas { display: block; width: 100%; height: 100%; }

  /* Collage d'assiettes */
  .plates { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
  .plate { position: absolute; display: block; width: var(--size); aspect-ratio: 1; border-radius: 50%; pointer-events: auto; will-change: transform; }
  .plate--1 { --size: 38%; --pi: 0; top: 3%; left: -27%; }
  .plate--2 { --size: 31%; --pi: 1; top: 46%; right: -21%; }
  .plate--3 { --size: 25%; --pi: 2; bottom: 5%; left: -15%; }
  .plate__float { display: block; width: 100%; height: 100%; animation: plate-float 7.5s ease-in-out infinite; }
  .plate--2 .plate__float { animation-duration: 8.8s; animation-delay: -2.4s; --r0: 4deg; --r1: -3deg; }
  .plate--3 .plate__float { animation-duration: 6.6s; animation-delay: -4s; --r0: -6deg; --r1: 2deg; }
  .plate__in {
    display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: var(--card);
    box-shadow: 0 0 0 7px #FBF7F1, 0 0 0 8px rgba(33, 26, 21, .14), 0 26px 44px -16px rgba(33, 26, 21, .6);
    animation: plate-in 1.15s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(.55s + var(--pi) * .15s);
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), box-shadow .4s;
  }
  .plate img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); translate: calc(var(--mx, 0) * 16px) calc(var(--my, 0) * 16px); transition: translate .8s cubic-bezier(.2, .8, .2, 1); }
  .plate:hover .plate__in, .plate:focus-visible .plate__in { transform: scale(1.08) rotate(-4deg); box-shadow: 0 0 0 7px #FBF7F1, 0 0 0 8px rgba(163, 54, 31, .4), 0 34px 54px -16px rgba(33, 26, 21, .65); }
  .plate:focus-visible { outline-offset: 12px; border-radius: 50%; }
  @keyframes plate-float { 0%, 100% { transform: translateY(0) rotate(var(--r0, -3deg)); } 50% { transform: translateY(-12px) rotate(var(--r1, 3deg)); } }
  @keyframes plate-in { from { opacity: 0; transform: translate(calc(60px - var(--pi) * 40px), 80px) scale(.35) rotate(-60deg); } }

  .hero__cue { position: absolute; z-index: 3; left: 50%; bottom: 18px; width: 2px; height: 46px; margin-left: -1px; background: var(--line-strong); border-radius: 2px; overflow: hidden; animation: rise .8s 1.2s both; pointer-events: none; }
  .hero__cue i { position: absolute; left: 0; top: 0; width: 2px; height: 14px; background: var(--paprika); animation: cue 2s ease-in-out infinite; }
  @keyframes cue { from { transform: translateY(-14px); } to { transform: translateY(46px); } }

  /* Ruban des plats */
  .ribbon { position: relative; overflow: hidden; padding: 22px 0 34px; margin-top: -14px; }
  .ribbon__band { width: 112%; margin-left: -6%; padding: 15px 0; background: var(--ink); color: var(--paper); transform: rotate(-2deg); box-shadow: 0 18px 40px -22px rgba(33, 26, 21, .7); will-change: transform; }
  .ribbon__track { display: inline-flex; align-items: center; gap: 26px; white-space: nowrap; animation: marquee 70s linear infinite; font: italic 500 clamp(1.25rem, 2.6vw, 2.1rem)/1.1 var(--serif); }
  .ribbon__track b { color: var(--saffron); font-style: normal; font-size: .8em; }
  @keyframes marquee { to { transform: translateX(-50%); } }

  /* Chapitres */
  .dc-motion .chapters.is-in .chapters__list li { animation: chapter-in 1s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 90ms); }
  .dc-motion .chapter__media img { animation: kenburns 22s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -4s); }
  .dc-motion .chapter__num { transition: transform .6s cubic-bezier(.34, 1.56, .64, 1), letter-spacing .6s; }
  .dc-motion .chapter:hover .chapter__num, .dc-motion .chapter.is-center .chapter__num { transform: translateY(-6px) scale(1.15); letter-spacing: .3em; }
  .dc-motion .chapter.is-center { transform: scale(1.03); box-shadow: var(--shadow-2); }
  .dc-motion .chapter:active { transform: scale(.97); }
  @keyframes chapter-in { from { opacity: 0; transform: translateY(80px) rotate(-5deg) scale(.9); } }

  /* Plat du jour */
  .today-badge { position: absolute; z-index: 3; right: -16px; top: -18px; width: 128px; height: 128px; pointer-events: none; }
  .today-badge::before { content: ""; position: absolute; inset: 7%; border-radius: 50%; background: var(--saffron-soft); box-shadow: 0 14px 30px -14px rgba(33, 26, 21, .55); }
  .today-badge svg { position: relative; width: 100%; height: 100%; animation: spin 28s linear infinite; overflow: visible; }
  .today-badge text { font: 700 9.4px var(--sans); letter-spacing: .2em; text-transform: uppercase; fill: var(--ink); }
  .today-badge i { position: absolute; inset: 39%; border-radius: 50%; background: var(--paprika); animation: flicker 3s ease-in-out infinite; }
  .dc-motion .today.is-in .today__media { animation: unveil 1.3s cubic-bezier(.7, 0, .2, 1) both; }
  .dc-motion .today.is-in .today__text > * { animation: rise .9s cubic-bezier(.2, .8, .2, 1) both; }
  .dc-motion .today.is-in .today__text > :nth-child(2) { animation-delay: .1s; }
  .dc-motion .today.is-in .today__text > :nth-child(3) { animation-delay: .2s; }
  .dc-motion .today.is-in .today__text > :nth-child(4) { animation-delay: .3s; }
  .dc-motion .today.is-in .today__text > :nth-child(n+5) { animation-delay: .4s; }
  @keyframes unveil { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

  /* Mosaïque : entrée rythmée, photos en profondeur, inclinaison au pointeur */
  .mosaic .card:nth-child(3n+1) { --rot: -2.2deg; }
  .mosaic .card:nth-child(3n) { --rot: 2deg; }
  .dc-motion.js-ready .card[data-reveal] { opacity: 0; transform: translateY(70px) rotate(var(--rot, 0deg)) scale(.95); }
  .dc-motion.js-ready .card[data-reveal].is-in {
    opacity: 1; transform: none;
    transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform 1.05s cubic-bezier(.2, .9, .25, 1.1); transition-delay: calc(var(--i, 0) * 60ms);
  }
  .dc-motion .media img.px { transition: opacity .7s cubic-bezier(.2, .7, .2, 1); will-change: transform; }
  .dc-motion .card__link:active { transform: scale(.985); transition-duration: .12s; }
  .dc-motion .rows .row { animation: rise .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 30ms); }
  .dc-motion .media-flag { animation: rise .6s .4s both; }

  /* ======================================================================
     Fiche recette
     ====================================================================== */
  .dc-motion .recipe-hero__text::before { animation: sheet-rise .9s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes sheet-rise { from { transform: translateY(60px); opacity: 0; } }
  .ing-meter { display: block; height: 6px; margin: -4px 0 12px; border-radius: 6px; background: var(--paper-2); overflow: hidden; }
  .ing-meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--olive), #8FB480); transform-origin: 0 50%; transform: scaleX(0); transition: transform .7s cubic-bezier(.34, 1.56, .64, 1); }
  .ing-meter.is-full i { background: linear-gradient(90deg, var(--olive), var(--saffron)); }
  .dc-motion .ing__name, .dc-motion .ing__qty, .dc-motion .shop-item__name, .dc-motion .shop-item__qty { text-decoration: line-through; text-decoration-color: transparent; transition: color .35s, text-decoration-color .45s; }
  .dc-motion .ing input:checked ~ .ing__qty, .dc-motion .ing input:checked ~ .ing__name { text-decoration-color: rgba(33, 26, 21, .4); }
  .dc-motion .ing--dark input:checked ~ .ing__qty, .dc-motion .ing--dark input:checked ~ .ing__name { text-decoration-color: rgba(243, 233, 218, .45); }
  .dc-motion .shop-item.is-done .shop-item__name, .dc-motion .shop-item.is-done .shop-item__qty { text-decoration-color: rgba(33, 26, 21, .4); }
  .dc-motion .ing:hover .ing__box { transform: scale(1.08); }

  .dc-motion .steps::after {
    content: ""; position: absolute; left: 36px; top: 12px; bottom: 40px; width: 3px; border-radius: 3px; pointer-events: none;
    background: linear-gradient(var(--saffron), var(--paprika)); transform-origin: top; transform: scaleY(var(--draw, 0));
  }
  .dc-motion .step[data-reveal] .step__num { opacity: 0; transform: translateY(45%) rotate(-10deg); transition: opacity .8s, transform .9s cubic-bezier(.34, 1.56, .64, 1); }
  .dc-motion .step.is-in .step__num { opacity: 1; transform: none; }
  .dc-motion .step[data-reveal] .dial { opacity: 0; transform: translateY(14px) scale(.94); transition: opacity .5s, transform .6s cubic-bezier(.34, 1.56, .64, 1); }
  .dc-motion .step.is-in .dial { opacity: 1; transform: none; transition-delay: calc(220ms + var(--di, 0) * 55ms); }
  .dial:nth-child(2) { --di: 1; } .dial:nth-child(3) { --di: 2; } .dial:nth-child(4) { --di: 3; }
  .dial:nth-child(5) { --di: 4; } .dial:nth-child(6) { --di: 5; } .dial:nth-child(7) { --di: 6; }
  .dc-motion .adapt__card::before { animation: breathe 9s ease-in-out infinite; }
  .dc-motion .adapt.is-in .adapt__list li { animation: rise .7s cubic-bezier(.2, .8, .2, 1) both; }
  .dc-motion .adapt.is-in .adapt__list li:nth-child(2) { animation-delay: .1s; }
  .dc-motion .adapt.is-in .adapt__list li:nth-child(3) { animation-delay: .2s; }
  .dc-motion .adapt.is-in .adapt__list li:nth-child(n+4) { animation-delay: .3s; }
  @keyframes breathe { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.12); opacity: 1; } }

  /* ======================================================================
     Mode cuisine — chaleur et braises (derrière le texte, jamais dessus)
     ====================================================================== */
  .dc-motion .cook__bg img { animation: bg-drift 34s ease-in-out infinite alternate; }
  @keyframes bg-drift { from { transform: scale(1.2); } to { transform: scale(1.32) translate(-2%, -2%); } }
  .heat { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
  .heat__glow {
    position: absolute; left: 50%; bottom: -38vh; width: 150vw; height: 72vh; transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(232, 120, 48, .36), rgba(163, 54, 31, .14) 58%, transparent); animation: heat-breathe 7s ease-in-out infinite;
  }
  .heat i {
    position: absolute; bottom: -12px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%;
    background: #FFB25C; box-shadow: 0 0 8px 2px rgba(255, 150, 60, .55); opacity: 0; animation: ember var(--d) linear var(--dl) infinite;
  }
  @keyframes heat-breathe { 0%, 100% { opacity: .55; transform: translateX(-50%) scale(1); } 50% { opacity: .9; transform: translateX(-50%) scale(1.06); } }
  @keyframes ember { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: .85; } 70% { opacity: .4; } 100% { transform: translate(var(--drift, 0), -72vh); opacity: 0; } }

  .dc-motion .cook__stage.slide-next .stage, .dc-motion .cook__stage.slide-prev .stage { animation: none; }
  .dc-motion .stage__count { perspective: 600px; }
  .dc-motion .stage__num { display: inline-block; transform-origin: 50% 100%; text-shadow: 0 0 40px rgba(226, 163, 58, .35); }
  .dc-motion .cook__nav .btn--accent:not(:disabled) { box-shadow: 0 12px 34px -14px rgba(226, 163, 58, .75); }
  .dc-motion .robot-panel { transition: box-shadow .6s; }
  .dc-motion .robot-panel:not(.robot-panel--off) { box-shadow: inset 0 1px 0 rgba(243, 233, 218, .06), 0 24px 50px -30px rgba(226, 120, 48, .55); }

  /* Anneau du chrono vivant */
  .timer__dial::before {
    content: ""; position: absolute; inset: 4%; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .6s;
    background: radial-gradient(closest-side, rgba(226, 163, 58, .3), transparent 72%);
  }
  .timer[data-state="running"] .timer__dial::before { opacity: 1; animation: ring-breathe 3.2s ease-in-out infinite; }
  .timer[data-state="done"] .timer__dial::before { opacity: 1; background: radial-gradient(closest-side, rgba(232, 120, 90, .32), transparent 72%); animation: ring-breathe 4.6s ease-in-out infinite; }
  @keyframes ring-breathe { 0%, 100% { transform: scale(.95); opacity: .6; } 50% { transform: scale(1.05); opacity: 1; } }
  .timer__tip { position: absolute; inset: 0; pointer-events: none; transform: rotate(calc(var(--ratio, 1) * 360deg)); transition: transform .3s linear; }
  .timer__tip i { position: absolute; left: 50%; top: calc(5% - 7px); width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #FFD08A; box-shadow: 0 0 14px 4px rgba(226, 163, 58, .7); opacity: 0; transition: opacity .4s; }
  .timer[data-state="running"] .timer__tip i, .timer[data-state="paused"] .timer__tip i { opacity: 1; }
  .timer[data-state="paused"] .timer__tip i { background: var(--cream-muted); box-shadow: none; }
  .timer__wisps { position: absolute; left: 50%; top: -12%; width: 64px; height: 54px; transform: translateX(-50%); opacity: 0; transition: opacity .8s; pointer-events: none; }
  .timer[data-state="running"] .timer__wisps { opacity: 1; }
  .timer__wisps i { position: absolute; bottom: 0; width: 10px; height: 42px; border-left: 2px solid rgba(243, 233, 218, .35); border-radius: 10px; opacity: 0; animation: steam 3.8s ease-in-out infinite; }
  .timer__wisps i:nth-child(1) { left: 14px; }
  .timer__wisps i:nth-child(2) { left: 30px; animation-delay: 1.2s; height: 50px; }
  .timer__wisps i:nth-child(3) { left: 46px; animation-delay: 2.4s; }
  .dc-motion .cook__progress button.is-current::before { animation: seg-glow 2.6s ease-in-out infinite; }
  @keyframes seg-glow { 0%, 100% { box-shadow: 0 0 8px rgba(226, 163, 58, .45); } 50% { box-shadow: 0 0 18px rgba(226, 163, 58, .85); } }

  /* Service final */
  .dc-motion .serve__halo { animation: halo 5s ease-in-out 1.6s infinite; }
  .dc-motion .serve__plate { animation: plate-serve 1.1s cubic-bezier(.2, .8, .2, 1) .15s both; }
  .dc-motion .serve__cloche { display: block; position: absolute; z-index: 3; left: -8%; width: 116%; bottom: 2%; transform-origin: 50% 100%; animation: cloche-lift 1.4s cubic-bezier(.6, 0, .2, 1) .7s both; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .5)); }
  .dc-motion .serve__steam { display: block; position: absolute; z-index: 2; left: 30%; right: 30%; top: -6%; height: 40%; }
  .dc-motion .serve__steam i { position: absolute; bottom: 0; width: 12px; height: 70px; border-left: 2px solid rgba(243, 233, 218, .5); border-radius: 12px; opacity: 0; animation: steam 4s ease-in-out 1.8s infinite; }
  .dc-motion .serve__steam i:nth-child(1) { left: 10%; }
  .dc-motion .serve__steam i:nth-child(2) { left: 45%; animation-delay: 3s; height: 86px; }
  .dc-motion .serve__steam i:nth-child(3) { left: 80%; animation-delay: 4.2s; }
  .dc-motion .done > p, .dc-motion .done__cta { animation: rise .9s cubic-bezier(.2, .8, .2, 1) 1.5s both; }
  .herbs { position: fixed; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; }
  .herbs i { position: absolute; top: -20px; left: var(--x); width: 12px; height: 7px; border-radius: 0 100% 0 100%; background: var(--c); opacity: 0; animation: herb-fall var(--d) cubic-bezier(.3, .1, .4, 1) var(--dl) 1 both; }
  @keyframes plate-serve { from { opacity: 0; transform: scale(.7) rotate(-20deg); } }
  @keyframes cloche-lift { 0% { transform: none; opacity: 1; } 35% { transform: translateY(-6%) rotate(-2deg); opacity: 1; } 100% { transform: translate(22%, -150%) rotate(18deg); opacity: 0; } }
  @keyframes halo { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.08); opacity: 1; } }
  @keyframes herb-fall { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 10% { opacity: .95; } 100% { opacity: 0; transform: translate(30px, 104vh) rotate(var(--r)); } }

  /* ======================================================================
     Courses
     ====================================================================== */
  .dc-motion .page-head--shop .eyebrow::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--saffron); animation: flicker 2.4s ease-in-out infinite; }

  /* ======================================================================
     Ajustements par format
     ====================================================================== */
  @media (min-width: 901px) {
    .dc-motion .hero { min-height: min(900px, calc(100svh - var(--topbar-h))); display: flex; align-items: center; }
    .dc-motion .hero__inner { width: 100%; }
  }
  @media (max-width: 900px) {
    .plate--1 { --size: 32%; top: 4%; left: -12%; }
    .plate--2 { --size: 27%; top: 50%; right: -10%; }
    .plate--3 { --size: 22%; bottom: 8%; left: -6%; }
    .hero__cue { display: none; }
  }
  @media (max-width: 760px) {
    .today-badge { width: 100px; height: 100px; right: 6px; top: -14px; }
    .dc-motion .steps::after { left: 20px; top: 8px; }
    .ribbon { padding: 16px 0 24px; }
  }
  @media (hover: hover) and (pointer: fine) {
    .dc-motion .card__link.is-tilting, .dc-motion .today__media-link.is-tilting {
      transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px);
      transition: transform .16s ease-out, box-shadow .4s; box-shadow: 0 34px 60px -26px rgba(33, 26, 21, .5);
    }
    .dc-motion .chapter.is-tilting { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-8px); transition: transform .16s ease-out; }
    .dc-motion .card__link::before {
      content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
      background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 244, 225, .24), transparent 42%);
    }
    .dc-motion .card__link.is-tilting::before { opacity: 1; }
  }
}

/* ---------- Mobile : ouverture « photo d'abord » (desktop inchangé) ---------- */
@media (max-width: 760px) {
  .hero { padding-top: 14px; }
  .hero__inner { gap: 16px; }
  .hero__figure { order: -1; width: min(56vw, 212px); }
  /* Crédits centrés sur la largeur de l'écran plutôt que de l'arche compacte, sans déborder. */
  .credit--hero, details.credit--collage { position: relative; left: 50%; width: min(340px, calc(100vw - 2 * var(--gutter))); transform: translateX(-50%); }
  .credit--hero { margin-top: 12px; font-size: .72rem; }
  details.credit--collage { margin-top: 6px; }
  details.credit--collage > summary { min-height: 30px; }
  .hero__text { gap: 14px; }
  .hero__title { font-size: clamp(1.95rem, 8.4vw, 2.4rem); line-height: 1.02; }
  .hero__text .lead { font-size: .95rem; line-height: 1.45; }
  .hero__stats { padding-top: 14px; margin-top: 4px; }
  .arch__steam { top: -10%; }
  .plate--1 { --size: 46%; top: 0; left: -40%; }
  .plate--2 { --size: 40%; top: 44%; right: -38%; }
  .plate--3 { --size: 31%; bottom: 2%; left: -30%; }
}

/* ---------- Mouvement réduit : décors retirés, tout reste lisible ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__light, .plates, .ribbon, .hero__cue, .steam-canvas, .heat, .today-badge, .herbs, .timer__tip, .timer__wisps, .serve__cloche, .serve__steam, .fx-layer, .read-progress, .ambient { display: none !important; }
  .w, .w__i { transform: none !important; }
}

/* ---------- Impression ---------- */
@media print {
  .read-progress, .ambient, .fx-layer, .hero__light, .plates, .ribbon, .hero__cue, .steam-canvas, .heat, .today-badge, .herbs, .serve, .ing-meter, .timer__tip, .timer__wisps { display: none !important; }
  .w, .w__i { display: inline; overflow: visible; padding: 0; margin: 0; transform: none !important; }
}