@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;
    -webkit-user-select: none;
    user-select: none;
  }
  /* 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; }

  /* 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: linear-gradient(180deg, #5c2531 0%, #3a1720 100%);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    padding: 5vh 24px;
    overflow-y: auto;
    text-align: center;
    color: #f2ede4;
  }
  .share-view.visible { display: flex; }
  .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: 320px;
  }
  .share-ingredients li {
    background: rgba(242,237,228,0.08);
    border: none;
    border-radius: var(--compact-control-radius);
    padding: 6px 14px;
    font-size: 13px;
    color: #e8c9ce;
  }
  .share-recipe {
    width: min(100%, 620px);
    padding: 18px;
    border-radius: 10px;
    background: rgba(242,237,228,0.07);
    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;
    height: 100vh;
    height: 100dvh;
    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;
    transition: background-position 0.9s cubic-bezier(.22,.61,.36,1), background-size 0.9s cubic-bezier(.22,.61,.36,1), filter 0.9s ease;
  }
  .scene.transitioning { filter: brightness(1.25) saturate(1.15); }

  .scene::before {
    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.9s cubic-bezier(.22,.61,.36,1), opacity 0.9s ease;
    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%);
  }

  /* Support : panneau plein qui occupe le bas de l'écran (la "table" sur
     laquelle repose le blender), avec un arrondi doux sur toute la largeur
     du haut — pas un cercle dont on ne voit qu'un bord, un vrai socle. */
  .halo-support {
    position: absolute;
    z-index: 1;
    left: -4vw;
    right: -4vw;
    bottom: -6vh;
    height: 44vh;
    border-radius: 50% 50% 0 0 / 9vh 9vh 0 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(120,45,55,0.55) 0%, rgba(95,32,42,0.68) 30%, rgba(75,22,32,0.78) 100%);
    opacity: 0;
    transition: transform 0.9s cubic-bezier(.22,.61,.36,1), opacity 0.7s ease;
  }
  .halo-support.visible { opacity: 1; }

  /* 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.6s ease, transform 0.6s cubic-bezier(.22,.61,.36,1);
    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) --- */
  .name-field { margin-top: 24px; 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; }

  /* --- Écran 3 : sélecteur de thème façon bottom-sheet mobile --- */
  .theme-trigger {
    font-family: inherit;
    margin-top: 24px;
    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 0 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 {
    display: block; margin: 0 auto;
    background: rgba(242,237,228,0.13);
    border: none;
    color: #f2ede4;
    padding: 11px 26px;
    border-radius: var(--control-radius);
    font-size: 14px;
    cursor: pointer;
  }
  .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);
    }
    /* 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;
    }
    .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: absolute;
    bottom: calc(36px + env(safe-area-inset-bottom) + 2vh);
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    opacity: 0.5;
    animation: bob 1.8s ease-in-out infinite;
  }
  .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 {
    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-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: clamp(18px, 3vw, 23px);
    line-height: 1.45;
  }
  .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: 17px;
    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: 500px; }
    .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; }
  }

  /* --- Styles repris de la mécanique blender/carrousel --- */
  #stage { width: min(70vw, 34vh, 280px); position: relative; }
  /* 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 { 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-counter {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: rgba(242,237,228,0.65);
    font-variant: small-caps;
    transform-origin: center;
  }
  .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;
    }
  }

  .hashtag-line {
    position: relative;
    width: 100%;
    min-height: 1.25em;
    overflow: hidden;
    color: #ff8fa8;
    font-weight: 700;
    font-size: clamp(14px, 3vw, 17px);
    line-height: 1.25;
    margin-top: -8px;
    white-space: nowrap;
    contain: layout paint;
    isolation: isolate;
  }
  .hashtag-text {
    display: block;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 180ms ease, transform 180ms cubic-bezier(.22,.61,.36,1);
  }
  .hashtag-text.leaving { opacity: 0; transform: translateY(-4px); }
  .hashtag-text.entering { opacity: 0; transform: translateY(4px); }

  #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;
  }
  #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;
  }
  .ing-btn.centered { z-index: 2; }
  .ing-btn.hidden-from-carousel { display: none; }
  .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: 9px; 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%; }

  #next-btn {
    background: linear-gradient(135deg, #ff8fa8 0%, #ff5f87 100%);
    border: none;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    padding: 14px 30px;
    border-radius: var(--control-radius);
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(255,95,135,0.4);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    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); }
  #next-btn svg { width: 17px; height: 17px; flex-shrink: 0; }