@font-face {
    font-family: 'DynaPuff';
    src: url('/assets/fonts/dynapuff-latin-variable.woff2') format('woff2');
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
  }

  :root {
    --control-radius: 8px;
    --compact-control-radius: 6px;
    --footer-space: calc(32px + env(safe-area-inset-bottom));
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-user-select: none;
    user-select: none;
  }
  /* Safari peut encore faire glisser élastiquement une page non scrollable.
     L'application reste donc arrimée au viewport ; la page À propos, qui a
     son propre défilement vertical, est volontairement exclue. */
  body:not(.about-page) {
    position: fixed;
    inset: 0;
    width: 100%;
  }
  /* Les champs de saisie restent sélectionnables/éditables normalement. */
  input, textarea { -webkit-user-select: text; user-select: text; }
  body { font-family: -apple-system, sans-serif; color: #f2ede4; background: #5c2531; }
  .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  /* Sur téléphone, la recette reste volontairement en portrait. Un site web
     ne peut pas verrouiller l'orientation hors plein écran : cet écran prend
     donc le relais tant que le mobile est tenu en paysage. */
  .portrait-required { display: none; }
  @media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
    .portrait-required {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 24px;
      background: #5c2531;
      text-align: center;
      color: #f2ede4;
    }
    .portrait-required svg {
      width: 58px;
      height: 58px;
      margin-bottom: 4px;
      fill: none;
      stroke: #ff8fa8;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .portrait-required strong {
      font-family: 'DynaPuff', -apple-system, sans-serif;
      font-size: clamp(24px, 7vh, 34px);
      line-height: 1;
    }
    .portrait-required span {
      max-width: 390px;
      color: #e8c9ce;
      font-size: 14px;
      line-height: 1.35;
    }
  }

  /* --- Écran de partage (URL directe) --- */
  .share-view {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 500;
    background-color: #5c2531;
    background-image:
      radial-gradient(ellipse at 50% 0%, rgba(90,40,48,0.12) 0%, rgba(60,22,30,0.4) 70%),
      linear-gradient(45deg, #8a3a48 25%, transparent 25%),
      linear-gradient(-45deg, #8a3a48 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #8a3a48 75%),
      linear-gradient(-45deg, transparent 75%, #8a3a48 75%);
    background-size: 100% 100%, 64px 64px, 64px 64px, 64px 64px, 64px 64px;
    background-position: center, 0 0, 0 32px, 32px -32px, -32px 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    padding: 5vh 24px calc(5vh + var(--footer-space));
    overflow-y: auto;
    text-align: center;
    color: #f2ede4;
  }
  .share-view.visible { display: flex; }
  .share-view.visible ~ .site-footer { z-index: 510; }
  .share-glass-wrap { width: min(60vw, 250px); }
  .share-glass-wrap svg { width: 100%; height: auto; display: block; }
  .share-title {
    font-family: 'DynaPuff', -apple-system, sans-serif;
    font-weight: 650;
    font-size: clamp(22px, 6vw, 30px);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: #fff;
  }
  .share-ingredients {
    list-style: none;
    padding: 0;
    margin: 0 0 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 420px;
  }
  .share-ingredients li {
    display: flex;
  }
  .share-ingredient {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    background: rgba(58,23,32,0.9);
    border: 1px solid rgba(242,237,228,0.2);
    border-radius: var(--compact-control-radius);
    padding: 5px 12px 5px 7px;
    font-size: 13px;
    color: #e8c9ce;
    font-family: inherit;
    cursor: pointer;
  }
  .share-ingredient:hover { background: rgba(74,31,40,0.98); border-color: rgba(255,143,168,0.5); }
  .share-ingredient:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .share-ingredient-icon { width: 32px; height: 32px; flex: 0 0 32px; }
  .floating-share-ingredient {
    position: fixed;
    z-index: 520;
    pointer-events: none;
    filter: drop-shadow(0 4px 7px rgba(16, 4, 8, 0.28));
  }
  .share-recipe {
    width: min(100%, 620px);
    padding: 18px;
    border-radius: 10px;
    background: rgba(58,23,32,0.92);
    border: 1px solid rgba(242,237,228,0.18);
    color: #f2ede4;
    font-size: 14px;
    line-height: 1.55;
    text-align: left;
    white-space: pre-wrap;
    -webkit-user-select: text;
    user-select: text;
  }
  .share-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: linear-gradient(135deg, #ff8fa8 0%, #ff5f87 100%);
    border: none;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    padding: 14px 28px;
    border-radius: var(--control-radius);
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(255,95,135,0.4);
  }
  .share-cta svg { width: 17px; height: 17px; }

  .scene {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    overflow: clip;
    height: 100vh;
    height: 100dvh;
    background-color: #5c2531;
    --pattern-scale: 1;
    --pattern-y: 0px;
  }

  /* Le damier vit sur son propre calque : son zoom entre les slides est une
     transformation compositée, pas un redessin complet du fond à chaque
     image. Le motif et sa profondeur restent strictement les mêmes. */
  .scene::before {
    content: "";
    position: absolute;
    inset: -12vh -12vw;
    z-index: 0;
    background-color: #5c2531;
    background-image:
      linear-gradient(45deg, #8a3a48 25%, transparent 25%),
      linear-gradient(-45deg, #8a3a48 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #8a3a48 75%),
      linear-gradient(-45deg, transparent 75%, #8a3a48 75%);
    background-size: 64px 64px;
    background-position: 0 0, 0 32px, 32px -32px, -32px 0px;
    transform: translate3d(0, var(--pattern-y), 0) scale(var(--pattern-scale));
    transition: transform 0.68s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
    backface-visibility: hidden;
    pointer-events: none;
  }

  .scene::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(90,40,48,0.12) 0%, rgba(60,22,30,0.4) 70%);
    pointer-events: none;
    z-index: 1;
  }

  /* --- Halo à deux cercles : donne un support visuel au blender et une
     impression de profondeur (façon poursuite de scène) qui se décale à
     chaque étape, les deux cercles se croisant au fil du scroll. --- */
  .halo {
    position: absolute;
    z-index: 2;
    border-radius: 50%;
    pointer-events: none;
    transition: transform 0.68s cubic-bezier(.22,.61,.36,1), opacity 0.58s ease;
    will-change: transform, opacity;
    mix-blend-mode: screen;
  }
  .halo-1 {
    width: 62vh; height: 62vh;
    left: 50%; top: 54%;
    margin-left: -31vh; margin-top: -31vh;
    background: radial-gradient(circle, rgba(255,180,150,0.20) 0%, rgba(255,180,150,0.08) 45%, transparent 72%);
  }
  .halo-2 {
    width: 44vh; height: 44vh;
    left: 50%; top: 54%;
    margin-left: -22vh; margin-top: -22vh;
    background: radial-gradient(circle, rgba(150,210,255,0.18) 0%, rgba(150,210,255,0.07) 45%, transparent 72%);
  }

  /* Le plateau n'apparaît que sur l'écran de composition. Son arête très
     lumineuse, sa nappe rose centrale et ses bords sombres donnent au blender
     un vrai point d'appui sans concurrencer le damier. */
  .halo-support {
    position: absolute;
    z-index: 1;
    left: -4vw;
    right: -4vw;
    /* L'arête est calée par le JavaScript sur le début du tiers inférieur des
       voyants du blender. Le repli évite tout saut avant la première mesure. */
    top: var(--table-edge-y, 67vh);
    bottom: -6vh;
    height: auto;
    border-top: 1px solid rgba(255, 183, 194, 0.58);
    pointer-events: none;
    overflow: visible;
    background:
      linear-gradient(90deg,
        rgba(255, 255, 255, 0) 7%,
        rgba(255, 158, 176, 0.12) 31%,
        rgba(255, 205, 211, 0.56) 50%,
        rgba(255, 158, 176, 0.12) 69%,
        rgba(255, 255, 255, 0) 93%) top / 100% 2px no-repeat,
      radial-gradient(ellipse 54% 28% at 50% 2%,
        rgba(232, 82, 108, 0.38) 0%,
        rgba(162, 44, 65, 0.2) 46%,
        rgba(70, 17, 28, 0) 78%),
      linear-gradient(180deg,
        #862d3d 0%,
        #6d202f 18%,
        #4c1421 60%,
        #2d0b13 100%);
    box-shadow:
      inset 0 2px 0 rgba(255, 119, 144, 0.18),
      inset 0 20px 38px rgba(255, 93, 122, 0.08),
      0 -14px 34px rgba(255, 87, 117, 0.08);
    /* Ce niveau imperceptible force la préparation graphique du plateau
       pendant l'introduction sans le rendre visible avant le slide 4. */
    opacity: 0.001;
    /* Le plateau reste à sa position finale sur tous les slides. Déplacer ce
       très grand calque en même temps que son fondu saturait le compositeur. */
    transition: opacity 0.58s ease;
    will-change: opacity;
  }
  .halo-support::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -32vh;
    width: min(112vw, 1180px);
    height: 32vh;
    transform: translateX(-50%);
    background:
      radial-gradient(ellipse 34% 58% at 50% 100%,
        rgba(255, 116, 142, 0.38) 0%,
        rgba(222, 67, 96, 0.22) 42%,
        rgba(151, 37, 58, 0.08) 68%,
        transparent 100%),
      radial-gradient(ellipse 58% 76% at 50% 100%,
        rgba(237, 79, 106, 0.14) 0%,
        rgba(139, 32, 53, 0.06) 58%,
        transparent 100%);
  }
  .halo-support::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -2px;
    width: min(58vw, 640px);
    height: 8px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse,
      rgba(255, 221, 224, 0.72) 0%,
      rgba(255, 127, 151, 0.26) 43%,
      rgba(255, 127, 151, 0) 76%);
  }
  .halo-support.visible { opacity: 1; }
  @media (min-width: 701px) {
    /* Sur desktop, le dégradé vertical très léger reste vectoriel et s'étire
       sans limite. Le halo, le reflet et les ombres complexes sont une seule
       texture déjà rasterisée : aucun grand dégradé radial n'est calculé au
       premier passage vers la composition. */
    .halo-support {
      background:
        linear-gradient(90deg,
          rgba(255, 255, 255, 0) 7%,
          rgba(255, 158, 176, 0.12) 31%,
          rgba(255, 205, 211, 0.42) 50%,
          rgba(255, 158, 176, 0.12) 69%,
          rgba(255, 255, 255, 0) 93%) top / 100% 2px no-repeat,
        linear-gradient(180deg,
          #862d3d 0%,
          #6d202f 18%,
          #4c1421 60%,
          #2d0b13 100%);
      box-shadow: none;
    }
    .halo-support::before {
      top: max(-476px, -44vh);
      width: min(112vw, 1180px);
      height: min(65vh, 700px);
      background: url('/assets/images/halo-reflet-ombres.webp') center / 100% 100% no-repeat;
    }
    .halo-support::after { display: none; }
  }

  /* Cœurs qui s'échappent du bas de l'écran au scroll vers l'avant — même
     forme que le futur logo Love-Recette, pour poser une cohérence visuelle. */
  .floating-heart {
    position: fixed;
    z-index: 50;
    pointer-events: none;
    width: 22px;
    height: 22px;
    filter: drop-shadow(0 0 6px rgba(255,140,170,0.55));
  }
  .floating-heart svg { width: 100%; height: 100%; }

  .steps {
    position: absolute;
    inset: 0 0 var(--footer-space);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .step {
    position: absolute;
    text-align: center;
    max-width: 560px;
    padding: 0 1.5rem;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
    pointer-events: none;
  }
  .step.active { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .step.leaving { opacity: 0; transform: translateY(-40px); }
  .step h2 {
    font-family: 'DynaPuff', -apple-system, sans-serif;
    font-weight: 650;
    font-size: clamp(28px, 6vw, 46px);
    line-height: 1.08;
    margin-bottom: 14px;
    letter-spacing: -0.02em;
    color: #ffffff;
  }
  .step-eyebrow {
    font-weight: 700;
    font-size: clamp(15px, 3vw, 20px);
    letter-spacing: 0.1em;
    font-variant: small-caps;
    text-transform: capitalize;
    color: rgba(253,246,238,0.8);
    margin-bottom: 4px;
  }
  .step p { font-size: clamp(15px, 2.4vw, 18px); color: #e8c9ce; font-weight: 500; }
  .step-desc {
    font-size: clamp(14px, 2.2vw, 17px);
    font-weight: 400;
    color: #e8c9ce;
    max-width: 420px;
    margin: 18px auto 0;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(.22,.61,.36,1);
  }
  .step-desc.in { opacity: 1; transform: translateY(0); }
  .word, .word-group { display: inline-block; }

  /* --- Écran 2 : saisie du prénom, sans look SaaS (pas de boîte, un
     simple soulignement qui s'anime au focus) --- */
  .step-choice-row {
    width: min(92vw, 560px);
    margin: 24px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  .name-field {
    min-width: 0;
    width: 100%;
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  .name-input {
    background: none;
    border: none;
    border-bottom: 2px solid rgba(242,237,228,0.3);
    font-family: inherit;
    font-size: clamp(20px, 5vw, 26px);
    font-weight: 600;
    color: #fff;
    text-align: center;
    padding: 8px 4px 10px;
    width: min(78vw, 320px);
    transition: border-color 0.3s ease;
  }
  .name-input:focus { outline: none; border-bottom-color: #ff8fa8; }
  .name-input::placeholder { color: rgba(242,237,228,0.4); font-weight: 500; }
  .name-input:disabled { opacity: 0.35; }

  .self-toggle {
    font-family: inherit;
    background: rgba(242,237,228,0.09);
    border: none;
    color: rgba(242,237,228,0.8);
    padding: 12px 22px;
    border-radius: var(--control-radius);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.25s, color 0.25s, transform 0.15s;
    max-width: 84vw;
  }
  .self-toggle:active { transform: scale(0.96); }
  .self-toggle.active { background: rgba(255,143,168,0.28); color: #fff; }

  .step-continue {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    max-width: 0;
    min-height: 48px;
    padding: 0;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transform: translateX(-8px);
    border: 0;
    border-radius: var(--control-radius);
    background: #ff8fa8;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(255,95,135,0.24);
    transition: max-width 260ms ease, padding 260ms ease, opacity 180ms ease, transform 260ms cubic-bezier(.22,.61,.36,1), visibility 0s linear 260ms;
  }
  .step-choice-row.ready .step-continue {
    max-width: 140px;
    padding: 0 18px;
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0s;
  }
  .step-continue:active { transform: scale(0.97); }
  .step-continue:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
  .step-continue span { font-size: 11px; line-height: 1; }

  /* --- Écran 3 : sélecteur de thème façon bottom-sheet mobile --- */
  .theme-trigger {
    font-family: inherit;
    min-width: 0;
    max-width: 430px;
    background: rgba(242,237,228,0.13);
    border: none;
    color: #fff;
    padding: 15px 26px;
    border-radius: var(--control-radius);
    font-size: clamp(15px, 3.6vw, 17px);
    font-weight: 600;
    font-variant: small-caps;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: background 0.2s, transform 0.15s;
  }
  .theme-trigger:active { transform: scale(0.97); }
  .theme-trigger .chevron { font-size: 12px; opacity: 0.7; transition: transform 0.3s; }
  .theme-trigger.open .chevron { transform: rotate(180deg); }
  .theme-sheet {
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
  }
  .theme-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15,6,8,0.55);
    opacity: 0;
    transition: opacity 0.35s ease;
  }
  .theme-sheet-panel {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    max-height: 78vh;
    overflow-y: auto;
    background: linear-gradient(180deg, #4a1f28 0%, #3a1720 100%);
    border-radius: 12px 12px 0 0;
    padding: 10px 6px calc(18px + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(.22,.61,.36,1);
    box-shadow: 0 -8px 30px rgba(0,0,0,0.4);
  }
  .theme-sheet.open { pointer-events: auto; }
  .theme-sheet.open .theme-sheet-backdrop { opacity: 1; }
  .theme-sheet.open .theme-sheet-panel { transform: translateY(0); }
  .theme-sheet-handle {
    width: 36px; height: 4px;
    background: rgba(242,237,228,0.3);
    border-radius: 2px;
    margin: 6px auto 14px;
  }
  .theme-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: calc(100% - 12px);
    margin: 4px 6px;
    font-family: inherit;
    background: rgba(242,237,228,0.055);
    border: none;
    border-radius: var(--compact-control-radius);
    color: #f2ede4;
    text-align: left;
    padding: 16px 14px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
  }
  .theme-option:active { background: rgba(255,143,168,0.18); }
  .theme-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    color: #ffb2c3;
  }
  .theme-icon svg { width: 100%; height: 100%; display: block; }
  .theme-trigger .theme-icon { width: 19px; height: 19px; flex-basis: 19px; }

  /* --- Panneau de résultat de la recette --- */
  .result-sheet { position: fixed; inset: 0; z-index: 250; pointer-events: none; }
  .result-sheet-backdrop { position: absolute; inset: 0; background: rgba(15,6,8,0.6); opacity: 0; transition: opacity 0.35s ease; }
  .result-sheet-panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    max-height: 82vh;
    overflow-y: auto;
    background: linear-gradient(180deg, #4a1f28 0%, #3a1720 100%);
    border-radius: 12px 12px 0 0;
    padding: 10px 24px calc(24px + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(.22,.61,.36,1);
    box-shadow: 0 -8px 30px rgba(0,0,0,0.4);
  }
  .result-sheet.open { pointer-events: auto; }
  .result-sheet.open .result-sheet-backdrop { opacity: 1; }
  .result-sheet.open .result-sheet-panel { transform: translateY(0); }
  .result-title { font-family: 'DynaPuff', -apple-system, sans-serif; font-size: 22px; font-weight: 650; color: #fff; margin: 8px 44px 14px; text-align: center; }
  .result-text {
    width: 100%;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.6;
    color: #f2ede4;
    background: rgba(0,0,0,0.18);
    border: 1px solid rgba(242,237,228,0.15);
    border-radius: var(--control-radius);
    padding: 14px;
    resize: vertical;
    min-height: 160px;
    margin-bottom: 16px;
  }
  .result-text:focus { outline: none; border-color: rgba(255,143,168,0.5); }
  .result-share {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%;
    background: linear-gradient(135deg, #ff8fa8 0%, #ff5f87 100%);
    border: none;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    padding: 14px;
    border-radius: var(--control-radius);
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(255,95,135,0.4);
    margin-bottom: 10px;
  }
  .result-share svg { width: 17px; height: 17px; }
  .result-close {
    position: absolute;
    top: 12px;
    right: 14px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0 0 3px;
    background: transparent;
    border: none;
    color: #f2ede4;
    border-radius: 50%;
    font-family: Arial, sans-serif;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
  }
  .result-close:hover { background: rgba(242,237,228,0.1); }
  .result-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .restart-confirm {
    position: fixed;
    inset: 0;
    z-index: 270;
    display: grid;
    place-items: center;
    padding: 20px;
    pointer-events: none;
  }
  .restart-confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15,6,8,0.68);
    opacity: 0;
    transition: opacity 0.22s ease;
  }
  .restart-confirm-panel {
    position: relative;
    width: min(100%, 390px);
    padding: 26px;
    border: 1px solid rgba(242,237,228,0.16);
    border-radius: 16px;
    background: linear-gradient(160deg, #57232f 0%, #35131b 100%);
    color: #f2ede4;
    text-align: center;
    box-shadow: 0 18px 55px rgba(0,0,0,0.46);
    opacity: 0;
    transform: translateY(10px) scale(0.97);
    transition: opacity 0.2s ease, transform 0.24s cubic-bezier(.22,.61,.36,1);
  }
  .restart-confirm.open { pointer-events: auto; }
  .restart-confirm.open .restart-confirm-backdrop { opacity: 1; }
  .restart-confirm.open .restart-confirm-panel { opacity: 1; transform: none; }
  .restart-confirm-title {
    font-family: 'DynaPuff', -apple-system, sans-serif;
    font-size: 22px;
    font-weight: 650;
    color: #fff;
  }
  .restart-confirm-panel p { margin: 9px 0 22px; line-height: 1.45; }
  .restart-confirm-actions { display: flex; justify-content: center; gap: 9px; }
  .restart-confirm-actions button {
    min-height: 44px;
    border: none;
    border-radius: var(--control-radius);
    padding: 10px 16px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }
  .restart-confirm-cancel { background: rgba(242,237,228,0.14); color: #f2ede4; }
  .restart-confirm-ok { background: #ff8fa8; color: #35131b; }
  .restart-confirm-actions button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
  .letter { display: inline-block; will-change: transform, opacity; }

  /* L'écran de composition a besoin de bien plus d'espace, sans le cadre "carte". */
  .step-compose {
    max-width: none;
    width: min(94vw, 460px);
    max-height: 92vh;
    background: transparent;
    border: none;
    backdrop-filter: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .brand {
    position: absolute;
    top: 3vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px;
    display: block;
    width: min(46vw, 170px);
    transition: top 0.9s cubic-bezier(.22,.61,.36,1), width 0.9s cubic-bezier(.22,.61,.36,1), transform 0.9s cubic-bezier(.22,.61,.36,1), opacity 0.2s ease;
  }
  .scene.logo-intro .brand {
    top: 50%;
    width: min(88vw, 420px);
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .scene.logo-intro .arrow,
  .scene.logo-settling .arrow { visibility: hidden; }
  @media (min-width: 701px) {
    .scene.logo-intro .brand { width: min(38vw, 420px); }
    .brand {
      top: clamp(20px, 3vh, 32px);
      width: clamp(220px, 19vw, 300px);
    }
    .scene:not(.last-step):not(.logo-intro):not(.logo-settling) .brand {
      transition: transform 0.42s cubic-bezier(.22,.61,.36,1), opacity 0.28s ease;
    }
    /* Le blender devient l'élément principal : le logo reste présent sur
       desktop, mais quitte l'axe central et se fait plus discret. */
    .scene.last-step .brand {
      top: 18px;
      left: 22px;
      width: clamp(150px, 14vw, 190px);
      transform: none;
      transition: transform 0.42s cubic-bezier(.22,.61,.36,1), opacity 0.28s ease;
    }
    /* 3 → 4 : le logo conserve sa géométrie d'en-tête et sort uniquement
       avec une transformation compositée. Aucun top/left/width n'est animé. */
    .scene.composition-entering .brand {
      top: clamp(20px, 3vh, 32px);
      left: 50%;
      width: clamp(220px, 19vw, 300px);
      transform: translate(-50%, -145%);
      opacity: 0;
      transition: transform 0.32s cubic-bezier(.4,0,.7,1), opacity 0.2s ease;
    }
    .scene.brand-corner-prep .brand {
      top: 18px;
      left: 22px;
      width: clamp(150px, 14vw, 190px);
      transform: translate3d(-34px, 0, 0);
      opacity: 0;
      transition: none;
    }
    /* 4 → 3 : la sortie se fait par la gauche avant le retour à la position
       d'en-tête, préparée hors champ sans changement de géométrie visible. */
    .scene.composition-leaving .brand {
      top: 18px;
      left: 22px;
      width: clamp(150px, 14vw, 190px);
      transform: translate3d(-34px, 0, 0);
      opacity: 0;
      transition: transform 0.28s cubic-bezier(.4,0,.7,1), opacity 0.18s ease;
    }
    .scene.brand-header-prep .brand {
      top: clamp(20px, 3vh, 32px);
      left: 50%;
      width: clamp(220px, 19vw, 300px);
      transform: translate(-50%, -145%);
      opacity: 0;
      transition: none;
    }
    .theme-sheet-panel {
      left: 50%;
      right: auto;
      width: min(520px, calc(100vw - 40px));
      transform: translate(-50%, 100%);
    }
    .theme-sheet.open .theme-sheet-panel { transform: translate(-50%, 0); }
    .result-sheet-panel {
      left: 50%;
      right: auto;
      width: min(680px, calc(100vw - 40px));
      transform: translate(-50%, 100%);
    }
    .result-sheet.open .result-sheet-panel { transform: translate(-50%, 0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .brand { transition-duration: 1ms; }
  }
  .brand svg { width: 100%; height: auto; display: block; }
  .brand:hover { opacity: 0.85; }
  .brand:focus-visible { outline: 2px solid #f2ede4; outline-offset: 3px; }
  @media (max-width: 700px) {
    .scene.last-step .brand { display: none; }
  }
  .arrow {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 44px;
    min-height: 44px;
    padding: 3px 8px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: #f2ede4;
    font: inherit;
    cursor: pointer;
    opacity: 0.5;
  }
  .arrow:hover,
  .arrow:focus-visible { background: rgba(242,237,228,0.08); }
  .arrow:focus-visible { outline: 2px solid #f2ede4; outline-offset: 2px; }
  .arrow-down {
    bottom: calc(36px + env(safe-area-inset-bottom) + 2vh);
    animation: bob-down 1.8s ease-in-out infinite;
  }
  .arrow-up {
    top: clamp(112px, 11vh, 156px);
    animation: bob-up 1.8s ease-in-out infinite;
  }
  .scene.last-step .arrow-up { top: calc(env(safe-area-inset-top) + 2vh); }
  .arrow svg { width: 20px; height: 20px; flex-shrink: 0; }
  .arrow-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #f2ede4;
  }
  @keyframes bob-down {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.35; }
    50% { transform: translateX(-50%) translateY(6px); opacity: 0.65; }
  }
  @keyframes bob-up {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.35; }
    50% { transform: translateX(-50%) translateY(-6px); opacity: 0.65; }
  }
  .arrow.hidden { display: none; }

  /* Bandeau commun aux pages, compact mais toujours au-dessus de la zone
     réservée par iOS. Les panneaux et modales conservent un z-index supérieur. */
  .site-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    min-height: 32px;
    padding: 7px 12px calc(7px + env(safe-area-inset-bottom));
    background: #050505;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 7px;
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 0.02em;
  }
  .site-footer a {
    color: #fff;
    text-decoration-color: rgba(255,255,255,0.55);
    text-underline-offset: 2px;
  }
  .site-footer a:hover { text-decoration-color: #fff; }

  /* Page éditoriale construite dans le même univers visuel. */
  body.about-page {
    min-height: 100vh;
    min-height: 100dvh;
    overflow-y: auto;
    background: #5c2531;
    color: #f2ede4;
    -webkit-user-select: text;
    user-select: text;
  }
  .about-main {
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(24px, 5vw, 68px) 20px calc(86px + env(safe-area-inset-bottom));
    background-image:
      linear-gradient(45deg, #8a3a48 25%, transparent 25%),
      linear-gradient(-45deg, #8a3a48 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #8a3a48 75%),
      linear-gradient(-45deg, transparent 75%, #8a3a48 75%);
    background-size: 88px 88px;
    background-position: 0 0, 0 44px, 44px -44px, -44px 0;
  }
  .about-card {
    width: min(100%, 940px);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(242,237,228,0.15);
    border-radius: clamp(22px, 4vw, 36px);
    background: rgba(58,23,32,0.96);
    box-shadow: 0 24px 80px rgba(0,0,0,0.32);
  }
  .about-hero {
    position: relative;
    min-height: 470px;
    padding: clamp(30px, 7vw, 72px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background:
      radial-gradient(circle at 82% 15%, rgba(255,143,168,0.82) 0 7%, transparent 7.3%),
      radial-gradient(circle at 77% 26%, rgba(255,143,168,0.2) 0 18%, transparent 18.3%),
      linear-gradient(150deg, #4c1c28 20%, #752b3b 100%);
  }
  .about-hero::before,
  .about-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
    transform: rotate(18deg);
  }
  .about-hero::before {
    width: 190px;
    height: 190px;
    top: -74px;
    right: 18%;
    border: 28px solid rgba(255,255,255,0.08);
    border-radius: 50%;
  }
  .about-hero::after {
    width: 105px;
    height: 220px;
    right: -34px;
    bottom: -52px;
    border-radius: 80px;
    background: rgba(255,175,183,0.13);
  }
  .about-brand {
    position: absolute;
    top: clamp(26px, 5vw, 48px);
    left: clamp(30px, 7vw, 72px);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-family: 'DynaPuff', -apple-system, sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
  }
  .about-brand span { color: #ff8fa8; font-size: 19px; }
  .about-hero-copy {
    position: relative;
    z-index: 2;
    width: min(66%, 560px);
  }
  .about-hero-copy h1 { font-size: clamp(46px, 6.4vw, 60px); }
  .about-hero-blender {
    position: absolute;
    z-index: 1;
    right: clamp(12px, 3.5vw, 38px);
    bottom: clamp(28px, 5vw, 48px);
    width: clamp(250px, 35%, 320px);
    pointer-events: none;
    filter: drop-shadow(0 18px 22px rgba(0,0,0,0.28));
  }
  .about-hero-blender svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
  }
  .about-hero-blender #liquid { display: none; }
  .about-kicker {
    position: relative;
    z-index: 1;
    margin: 0 0 12px;
    color: #ffb7c5;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.3;
    text-transform: uppercase;
  }
  .about-card h1 {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #fff;
    font-family: 'DynaPuff', -apple-system, sans-serif;
    font-weight: 650;
    font-size: clamp(46px, 9vw, 88px);
    line-height: 0.94;
    letter-spacing: -0.045em;
  }
  .about-lead {
    position: relative;
    z-index: 1;
    max-width: 590px;
    margin: 26px 0 0;
    color: #f3dce1;
    font-size: 16px;
    line-height: 1.45;
  }
  .about-lead p { margin: 0; }
  .about-lead p + p { margin-top: 0.8em; }
  .about-numbers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(242,237,228,0.12);
    border-bottom: 1px solid rgba(242,237,228,0.12);
    background: #301019;
  }
  .about-numbers div {
    min-width: 0;
    padding: clamp(22px, 4vw, 38px);
  }
  .about-numbers div + div { border-left: 1px solid rgba(242,237,228,0.12); }
  .about-numbers strong {
    display: block;
    color: #ff8fa8;
    font-family: 'DynaPuff', -apple-system, sans-serif;
    font-size: clamp(35px, 6vw, 54px);
    line-height: 1;
  }
  .about-numbers span {
    display: block;
    margin-top: 8px;
    color: #dcbac1;
    font-size: 13px;
    line-height: 1.35;
  }
  .about-section {
    padding: clamp(42px, 7vw, 72px);
    border-bottom: 1px solid rgba(242,237,228,0.12);
  }
  .about-card h2 {
    max-width: 760px;
    margin: 0;
    color: #fff;
    font-family: 'DynaPuff', -apple-system, sans-serif;
    font-size: clamp(27px, 5vw, 42px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.025em;
  }
  .about-section > p:not(.about-kicker):not(.about-manifesto) {
    max-width: 750px;
    margin-top: 24px;
    color: #e8c9ce;
    font-size: 16px;
    line-height: 1.7;
  }
  .about-copy-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(24px, 5vw, 56px);
    margin-top: 32px;
  }
  .about-copy-columns p {
    color: #e8c9ce;
    font-size: 16px;
    line-height: 1.7;
  }
  .about-manifesto {
    position: relative;
    margin-top: clamp(42px, 7vw, 72px);
    padding-left: clamp(18px, 4vw, 34px);
    color: #fff;
    font-family: 'DynaPuff', -apple-system, sans-serif;
    font-size: clamp(25px, 5vw, 42px);
    line-height: 1.12;
  }
  .about-manifesto::before {
    content: "";
    position: absolute;
    left: 0;
    top: -2px;
    bottom: -2px;
    width: 9px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='24' viewBox='0 0 9 24'%3E%3Cpath d='M4.5 0C8.5 4 8.5 8 4.5 12S.5 20 4.5 24' fill='none' stroke='%23ff8fa8' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-position: center top;
    background-repeat: repeat-y;
    background-size: 9px 24px;
  }
  .about-projects {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 34px;
  }
  .about-project {
    min-height: 270px;
    padding: clamp(24px, 4vw, 34px);
    border: 1px solid rgba(242,237,228,0.14);
    border-radius: 18px;
    background: #511f2c;
    color: #fff;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
  }
  .about-project:hover {
    transform: translateY(-4px);
    border-color: rgba(255,143,168,0.7);
    background: #5d2433;
  }
  .about-project-odd { background: #24161a; }
  .about-project-odd:hover { background: #2e1b20; }
  .about-project-label {
    color: #ffb7c5;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .about-project strong {
    margin-top: 18px;
    font-family: 'DynaPuff', -apple-system, sans-serif;
    font-size: clamp(24px, 4vw, 31px);
  }
  .about-project p {
    margin-top: 14px;
    color: #e2c4ca;
    font-size: 14px;
    line-height: 1.55;
  }
  .about-project-link {
    margin-top: auto;
    padding-top: 24px;
    font-size: 13px;
    font-weight: 750;
  }
  .about-rules ul {
    margin-top: 28px;
    list-style: none;
  }
  .about-rules li {
    padding: 18px 0;
    border-top: 1px solid rgba(242,237,228,0.12);
    color: #e8c9ce;
    line-height: 1.55;
  }
  .about-rules li:last-child { border-bottom: 1px solid rgba(242,237,228,0.12); }
  .about-rules strong { color: #fff; }
  .about-credits {
    margin: 0 clamp(28px, 7vw, 72px);
    padding: 24px 0;
    border-bottom: 1px solid rgba(242,237,228,0.12);
    color: #cfaab2;
    font-size: 13px;
    line-height: 1.6;
  }
  .about-credits summary {
    color: #f2dce0;
    cursor: pointer;
    font-weight: 700;
  }
  .about-credits p { margin-top: 12px; }
  .about-card a { color: #fff; text-underline-offset: 3px; }
  .about-closing {
    padding: clamp(46px, 8vw, 80px) clamp(28px, 7vw, 72px);
    text-align: center;
  }
  .about-closing p {
    color: #fff;
    font-family: 'DynaPuff', -apple-system, sans-serif;
    font-size: clamp(29px, 6vw, 48px);
    line-height: 1.1;
  }
  .about-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 26px;
    padding: 14px 20px;
    border-radius: var(--control-radius);
    background: #ff8fa8;
    color: #301017 !important;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 9px 28px rgba(0,0,0,0.2);
    transition: transform 160ms ease, background 160ms ease;
  }
  .about-back:hover { transform: translateY(-2px); background: #ffabbc; }
  .about-card a:focus-visible,
  .about-credits summary:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 4px;
  }
  @media (max-width: 640px) {
    .about-main { padding: 0 0 calc(70px + env(safe-area-inset-bottom)); }
    .about-card { border: 0; border-radius: 0; box-shadow: none; }
    .about-hero { min-height: 700px; }
    .about-hero-copy { width: 100%; }
    .about-lead { font-size: 16px; }
    .about-hero-blender {
      top: 60px;
      right: 8px;
      bottom: auto;
      width: clamp(90px, 28vw, 120px);
      opacity: 0.9;
    }
    .about-numbers { grid-template-columns: 1fr; }
    .about-numbers div { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 16px; }
    .about-numbers div + div { border-top: 1px solid rgba(242,237,228,0.12); border-left: 0; }
    .about-numbers span { margin-top: 0; }
    .about-copy-columns,
    .about-projects { grid-template-columns: 1fr; }
    .about-project { min-height: 245px; }
    .about-section > p:not(.about-kicker):not(.about-manifesto) { font-size: 16px; }
  }
  @media (max-width: 360px) {
    .about-hero { min-height: 800px; }
  }
  /* --- Styles repris de la mécanique blender/carrousel --- */
  #stage {
    width: min(70vw, 34vh, 280px);
    position: relative;
    isolation: isolate;
  }
  #stage::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -48% -120% -36%;
    pointer-events: none;
    background:
      radial-gradient(ellipse 38% 46% at 50% 56%,
        rgba(255, 108, 137, 0.54) 0%,
        rgba(224, 69, 99, 0.31) 34%,
        rgba(155, 39, 61, 0.12) 64%,
        transparent 100%),
      radial-gradient(ellipse 54% 60% at 50% 58%,
        rgba(239, 79, 108, 0.13) 0%,
        rgba(132, 31, 51, 0.05) 62%,
        transparent 100%);
  }
  /* Sélecteur d'ENFANT DIRECT (>), pas descendant : un simple "#stage svg"
     matchait aussi les <svg> imbriqués injectés comme objets flottants dans
     le blender, les forçant à 720x780px (taille du blender entier !) au lieu
     de leurs 135 unités prévues — la cause du "survol du bocal" et de
     l'invisibilité aléatoire des objets. */
  #stage > svg { position: relative; z-index: 1; width: 100%; height: auto; display: block; pointer-events: none; }
  #floating-objects { pointer-events: all; }
  #floating-objects [data-float="1"] {
    cursor: pointer;
    pointer-events: all;
    touch-action: manipulation;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }
  #floating-objects [data-hit-area="1"] { fill: none; stroke: none; }
  #floating-objects [data-float="1"]:focus-visible > [data-hit-area="1"] {
    stroke: #f2ede4;
    stroke-width: 3px;
    stroke-dasharray: 6 5;
  }
  #floating-objects [data-object-content] {
    transform-box: fill-box;
    transform-origin: center;
  }
  #drop-target { position: fixed; width: 4px; height: 4px; pointer-events: none; z-index: -1; }

  .ingredient-undo {
    position: fixed;
    left: 50%;
    bottom: calc(45px + env(safe-area-inset-bottom));
    z-index: 220;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: calc(100vw - 28px);
    padding: 9px 10px 9px 14px;
    border-radius: var(--control-radius);
    background: #141112;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.32);
    font-size: 13px;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 10px);
    transition: opacity 180ms ease, transform 220ms cubic-bezier(.22,.61,.36,1);
  }
  .ingredient-undo.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }
  .ingredient-undo span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ingredient-undo button {
    flex: 0 0 auto;
    border: none;
    border-radius: var(--compact-control-radius);
    padding: 5px 8px;
    background: #ff8fa8;
    color: #301017;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
  }

  .ingredient-info-toggle {
    position: relative;
    display: grid;
    place-items: center;
    width: min(100%, 590px);
    min-height: 58px;
    margin-top: -8px;
    padding: 6px 14px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    contain: layout paint;
    transition: background-color 180ms ease, border-color 180ms ease;
  }
  .ingredient-info-toggle:hover,
  .ingredient-info-toggle:focus-visible {
    background: rgba(242,237,228,0.055);
    border-color: rgba(242,237,228,0.14);
  }
  .ingredient-info-toggle:focus-visible { outline: 2px solid #ffb1c1; outline-offset: 2px; }
  .ingredient-guidance,
  .ingredient-counter {
    grid-area: 1 / 1;
    transition: opacity 180ms ease, transform 220ms cubic-bezier(.22,.61,.36,1);
  }
  .ingredient-guidance {
    max-width: 570px;
    color: rgba(255,190,204,0.9);
    font-size: clamp(11.5px, 1.45vw, 14px);
    font-weight: 550;
    line-height: 1.38;
    text-wrap: balance;
    opacity: 1;
    transform: translateY(0);
  }
  .ingredient-counter {
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0.04em;
    color: rgba(242,237,228,0.82);
    font-variant: small-caps;
    transform-origin: center;
    opacity: 0;
    transform: translateY(5px);
  }
  .ingredient-info-toggle.show-counter .ingredient-guidance {
    opacity: 0;
    transform: translateY(-5px);
  }
  .ingredient-info-toggle.show-counter .ingredient-counter {
    opacity: 1;
    transform: translateY(0);
  }
  .ingredient-info-toggle.counter-locked {
    background: rgba(242,237,228,0.045);
    border-color: rgba(255,177,193,0.18);
  }
  .ingredient-counter.limit-bounce {
    color: #f2ede4;
    animation: ingredientCounterLimitBounce 620ms cubic-bezier(.22,.8,.32,1);
  }
  @keyframes ingredientCounterLimitBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    28% { transform: translateY(-5px) scale(1.18); }
    52% { transform: translateY(1px) scale(0.96); }
    74% { transform: translateY(-2px) scale(1.07); }
  }
  @media (prefers-reduced-motion: reduce) {
    .ingredient-counter.limit-bounce { animation: none; }
  }
  .see-all-btn {
    font-family: inherit;
    background: none;
    border: none;
    border-bottom: 1px dashed rgba(242,237,228,0.4);
    color: rgba(242,237,228,0.75);
    font-size: 12px;
    padding: 2px 0;
    cursor: pointer;
  }
  .see-all-btn:hover { color: #fff; border-color: #fff; }

  /* --- Modale "voir tout" : panneau borné et responsive, posé au-dessus de
     la composition au lieu de remplacer arbitrairement tout l'écran. --- */
  .all-ing-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 300;
    align-items: center;
    justify-content: center;
    padding: max(14px, env(safe-area-inset-top)) 14px max(46px, calc(14px + env(safe-area-inset-bottom)));
  }
  .all-ing-modal.open { display: flex; }
  .all-ing-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15,6,8,0.7);
    backdrop-filter: blur(4px);
  }
  .all-ing-panel {
    position: relative;
    z-index: 1;
    width: min(760px, 94vw);
    height: min(720px, 78dvh);
    min-height: min(360px, 70dvh);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    background-color: #5c2531;
    background-image:
      linear-gradient(45deg, rgba(138,58,72,0.62) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(138,58,72,0.62) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(138,58,72,0.62) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(138,58,72,0.62) 75%);
    background-size: 64px 64px;
    background-position: 0 0, 0 32px, 32px -32px, -32px 0;
    box-shadow: 0 24px 70px rgba(0,0,0,0.48);
  }
  .all-ing-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 10px;
  }
  .all-ing-title { font-family: 'DynaPuff', -apple-system, sans-serif; font-weight: 650; font-size: 20px; color: #fff; }
  .all-ing-close {
    width: 34px; height: 34px;
    border-radius: var(--compact-control-radius);
    background: rgba(242,237,228,0.13);
    border: none;
    color: #f2ede4;
    font-size: 16px;
    cursor: pointer;
  }
  .all-ing-categories {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 8px;
    padding: 4px 20px 14px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .all-ing-categories::-webkit-scrollbar { display: none; }
  .all-ing-cat-pill {
    flex: 0 0 auto;
    font-family: inherit;
    background: rgba(242,237,228,0.1);
    border: none;
    color: #e8c9ce;
    font-size: 13px;
    padding: 7px 15px;
    border-radius: var(--compact-control-radius);
    cursor: pointer;
    white-space: nowrap;
  }
  .all-ing-cat-pill.active { background: #ff8fa8; color: #fff; font-weight: 700; }
  .all-ing-grid {
    position: relative;
    z-index: 1;
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    grid-auto-rows: max-content;
    align-content: start;
    align-items: start;
    gap: 16px 10px;
    padding: 4px 20px 22px;
  }
  .all-ing-grid .ing-btn { flex: none; }
  .all-ing-grid .ing-name { color: #f2ede4; }
  .all-ing-grid .ing-btn.in-carousel { opacity: 1; }
  .all-ing-grid .ing-btn.in-carousel .ing-icon-slot {
    background: rgba(242,237,228,0.1);
    border-color: rgba(242,237,228,0.24);
  }
  .all-ing-grid .ing-btn.leaving-catalog { pointer-events: none; }
  #carousel .ing-btn.just-added .ing-icon-slot {
    animation: addedIngredientPulse 0.9s ease-out 2;
  }
  @keyframes addedIngredientPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,143,168,0); }
    45% { box-shadow: 0 0 0 7px rgba(255,143,168,0.34); }
  }
  @media (max-width: 620px) {
    .all-ing-modal { align-items: flex-end; padding-left: 8px; padding-right: 8px; }
    .all-ing-panel { width: 100%; height: min(650px, 76dvh); }
    .all-ing-grid .ing-name {
      max-width: min(92px, 100%);
      font-size: clamp(10.5px, 3vw, 12px);
      line-height: 1.2;
      color: #f2ede4;
    }
  }

  #carousel-wrap {
    position: relative;
    width: min(90vw, 380px);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    /* Hauteur fixe, calée sur l'état agrandi : sans ça, le conteneur change
       de hauteur selon l'élément centré, ce qui recentre TOUT le contenu de
       la strate (justify-content:center) et fait bouger le bocal. */
    min-height: 118px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.24s ease, transform 0.32s cubic-bezier(.22,.61,.36,1), visibility 0s linear 0.32s;
  }
  .scene.composition-details-ready #carousel-wrap {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
  }
  .scene.composition-leaving #carousel-wrap,
  .scene.composition-leaving #carousel .ing-btn {
    transition: none !important;
  }
  @media (min-width: 701px) {
    .step-compose { width: min(94vw, 620px); }
    #carousel-wrap { width: min(82vw, 540px); }
  }
  #carousel-viewport {
    position: relative;
    overflow: hidden;
    width: 100%;
    contain: layout paint;
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 28px, black calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, black 28px, black calc(100% - 28px), transparent 100%);
    cursor: grab;
    touch-action: pan-y;
  }
  #carousel-viewport.dragging { cursor: grabbing; }
  #carousel {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    transition: transform 0.45s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
    padding: 4px 0;
  }
  #carousel.no-transition { transition: none; }
  .carousel-loading {
    width: 100%;
    padding: 28px 10px;
    color: rgba(242,237,228,0.62);
    font-size: 12px;
    text-align: center;
  }
  #carousel-marker {
    position: absolute;
    left: 50%; top: -10px;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid rgba(242,237,228,0.5);
  }
  .carousel-nav {
    flex: 0 0 auto;
    width: 28px; height: 34px;
    border-radius: var(--compact-control-radius);
    border: none;
    background: rgba(242,237,228,0.1);
    color: #f2ede4;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 15px;
  }
  .carousel-nav:hover { background: rgba(242,237,228,0.15); }
  .carousel-nav:focus-visible { outline: 2px solid #f2ede4; outline-offset: 2px; }

  .ing-btn {
    /* Chaque case réserve dès le départ la largeur de son état centré. Le
       changement de taille de l'icône ne décale donc plus toute la piste au
       milieu d'un mouvement et un cran correspond toujours à un ingrédient. */
    flex: 0 0 74px;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    cursor: pointer;
    z-index: 1;
  }
  #carousel .ing-btn {
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.2s ease, transform 0.28s cubic-bezier(.22,.61,.36,1);
  }
  .scene.composition-details-ready #carousel .ing-btn {
    opacity: 1;
    transform: translateX(0);
  }
  .scene.composition-details-ready #carousel .ing-btn:nth-child(2) { transition-delay: 35ms; }
  .scene.composition-details-ready #carousel .ing-btn:nth-child(3) { transition-delay: 70ms; }
  .scene.composition-details-ready #carousel .ing-btn:nth-child(4) { transition-delay: 105ms; }
  .scene.composition-details-ready #carousel .ing-btn:nth-child(5) { transition-delay: 140ms; }
  .scene.composition-details-ready #carousel .ing-btn:nth-child(n+6) { transition-delay: 175ms; }
  .ing-btn.centered { z-index: 2; }
  .ing-btn.hidden-from-carousel { display: none; }
  .ing-btn.pending {
    pointer-events: none;
    cursor: progress;
  }
  .ing-btn.pending .ing-icon-slot {
    opacity: 0.58;
    box-shadow: 0 0 0 3px rgba(255,143,168,0.2);
  }
  .ing-icon-slot {
    width: 52px; height: 52px;
    background: rgba(242,237,228,0.06);
    border: 1px solid transparent;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    padding: 8px;
    transition: background 0.2s, border-color 0.35s ease, width 0.28s cubic-bezier(.34,1.2,.64,1), height 0.28s cubic-bezier(.34,1.2,.64,1);
    flex-shrink: 0;
  }
  .ing-btn:hover .ing-icon-slot { background: rgba(242,237,228,0.12); }
  /* Le liseré n'apparaît (en fondu) que sur l'élément survolé ou centré,
     pour éviter le conflit visuel entre vignettes voisines. */
  .ing-btn:hover .ing-icon-slot, .ing-btn.centered .ing-icon-slot { border-color: rgba(242,237,228,0.2); }
  /* Vraie augmentation de taille (pas un transform:scale) : ça réserve
     réellement l'espace et pousse les voisins au lieu de les chevaucher. */
  .ing-btn.centered .ing-icon-slot { width: 74px; height: 74px; }
  .ing-icon-slot svg { width: 100%; height: 100%; transition: opacity 0.2s; }
  .ing-name { font-size: 11px; color: #f2ede4; text-align: center; max-width: 74px; line-height: 1.15; }
  .ing-btn.used .ing-icon-slot { position: relative; background: transparent; border-style: dashed; border-color: rgba(242,237,228,0.32); }
  .ing-btn.used .ing-icon-slot svg { opacity: 0; }
  .ing-btn.used[data-kind="flask"] .ing-icon-slot::after {
    content: "×";
    position: absolute;
    top: -5px;
    right: -5px;
    width: 17px;
    height: 17px;
    border-radius: 5px;
    background: #ff8fa8;
    color: #35131b;
    font-size: 14px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
  }
  .ing-btn.used .ing-name { color: #ff8fa8; font-style: italic; }
  /* Une vignette au quota reste cliquable : son clic déclenche le rebond du
     compteur qui explique pourquoi elle ne peut pas rejoindre le blender. */
  .ing-btn.disabled { opacity: 0.3; cursor: not-allowed; }
  .ing-btn:focus-visible .ing-icon-slot { outline: 2px solid #f2ede4; outline-offset: 2px; }

  .flying-ingredient { position: fixed; width: 58px; height: 58px; z-index: 999; pointer-events: none; }
  .flying-ingredient svg { width: 100%; height: 100%; }

  .compose-actions {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    width: min(94vw, 300px);
  }
  .compose-actions button {
    min-height: 48px;
    border-radius: var(--control-radius);
    font-family: inherit;
    font-weight: 700;
    font-size: clamp(13px, 3.6vw, 15px);
    padding: 12px clamp(14px, 4vw, 25px);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
  }
  .compose-actions button svg { width: 18px; height: 18px; flex-shrink: 0; }
  #restart-btn {
    flex: 0 0 48px;
    width: 48px;
    padding: 0;
    background: rgba(242,237,228,0.1);
    border: 1px solid rgba(242,237,228,0.3);
    color: #f2ede4;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
  }
  #restart-btn:hover { background: rgba(242,237,228,0.17); border-color: rgba(242,237,228,0.48); }
  #restart-btn:active { transform: scale(0.97); }
  #restart-btn:focus-visible,
  #next-btn:focus-visible { outline: 2px solid #f2ede4; outline-offset: 3px; }
  #next-btn {
    flex: 1 1 auto;
    background: linear-gradient(135deg, #ff8fa8 0%, #ff5f87 100%);
    border: none;
    color: #fff;
    box-shadow: 0 6px 18px rgba(255,95,135,0.4);
    opacity: 0.35;
    pointer-events: none;
    filter: grayscale(0.6);
    transform: scale(0.96);
    transition: opacity 0.3s, filter 0.3s, transform 0.3s, box-shadow 0.2s;
  }
  #next-btn.ready { opacity: 1; pointer-events: auto; filter: none; transform: scale(1); }
  #next-btn:active { transform: scale(0.96); box-shadow: 0 3px 10px rgba(255,95,135,0.35); }
  @media (max-width: 380px) {
    .compose-actions { gap: 7px; }
    #next-btn { padding-inline: 11px; }
    .compose-actions button svg { width: 16px; height: 16px; }
    .restart-confirm-actions { flex-direction: column; }
  }