/* ── Tokens — identiques au produit (src/index.css) ─────────────────── */
    :root {
      --onyx: rgb(13 10 8);           /* scène V3 */
      --ivory: rgb(245 240 232);
      --gold: rgb(199 141 83);        /* caramel V3 */
      --gold-light: rgb(214 163 110);
      --champagne: rgb(232 215 183);
      --marble: rgb(23 19 15);        /* espressoDeep V3 */
      --marble-light: rgb(38 30 24);  /* espresso V3 */
      --charcoal: rgb(58 52 46);
      --shadow-luxe: 0 20px 60px -15px rgba(199,141,83,.15), 0 8px 24px -8px rgba(0,0,0,.3);
      --shadow-luxe-hover: 0 32px 80px -20px rgba(199,141,83,.25), 0 12px 32px -8px rgba(0,0,0,.4);
      --tracking-luxe: .15em;
      --ease: cubic-bezier(.22,.61,.36,1);
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--onyx);
      color: var(--ivory);
      font-family: 'Inter', system-ui, sans-serif;
      font-weight: 300;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    img { display: block; max-width: 100%; }
    a { color: inherit; }
    :focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; border-radius: 2px; }

    .small-caps { font-variant: small-caps; letter-spacing: var(--tracking-luxe); text-transform: lowercase; }
    .serif { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; letter-spacing: -0.02em; }

    /* ── Grain photographique global ────────────────────────────────────── */
    .grain {
      position: fixed; inset: -50%; width: 200%; height: 200%;
      pointer-events: none; z-index: 90; opacity: .028;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    /* ── Reveals au scroll ──────────────────────────────────────────────── */
    /* Hidden state is gated on .js: no-JS (and any script failure) renders
       the page fully visible. iOS Safari's IntersectionObserver is too lazy
       to drive this — see the deterministic scroll sweep at the bottom. */
    .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
    .js .reveal.visible { opacity: 1; transform: none; }
    .reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; }
    .reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }

    /* ── Nav ────────────────────────────────────────────────────────────── */
    .nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      display: flex; align-items: center; justify-content: space-between;
      padding: .8rem clamp(1.25rem, 4vw, 3rem);
      padding-top: calc(.8rem + env(safe-area-inset-top));
      background: rgba(13,10,8,.6);
      -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
      border-bottom: 1px solid rgba(243,235,224,.07);
    }
    .nav-brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
    .nav-brand > svg { width: 28px; height: 28px; }
    .brand-text { display: flex; flex-direction: column; line-height: 1.05; }
    .brand-name { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: 1.3rem; color: var(--ivory); letter-spacing: -0.01em; }
    .brand-tag { display: none; font-size: .5rem; font-weight: 500; color: var(--gold); font-variant: small-caps; text-transform: lowercase; letter-spacing: .3em; }
    /* sheen: one golden sweep across the toque at load */
    .logo-sheen { animation: sheen 1.4s .8s var(--ease) 1 both; }
    @keyframes sheen { from { transform: translateX(-70px); } to { transform: translateX(70px); } }

    .nav-links { display: none; }
    .nav-actions { display: flex; align-items: center; gap: .6rem; }

    /* Language dropdown (details/summary — works without JS) */
    .lang-menu { position: relative; }
    .lang-menu summary {
      list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem;
      font-size: .7rem; font-weight: 600; letter-spacing: .08em; color: var(--champagne);
      border: 1px solid rgba(199,141,83,.3); border-radius: 99px; padding: .42rem .75rem;
      transition: border-color .3s var(--ease), background .3s var(--ease);
    }
    .lang-menu summary::-webkit-details-marker { display: none; }
    .lang-menu summary:hover { border-color: rgba(199,141,83,.6); background: rgba(199,141,83,.08); }
    .lang-menu summary .flag { width: 17px; height: 12px; border-radius: 2px; display: block; box-shadow: 0 0 0 .5px rgba(245,240,232,.25); }
    .lang-menu summary .chev { font-size: .55rem; color: var(--gold); transition: transform .3s var(--ease); }
    .lang-menu[open] summary .chev { transform: rotate(180deg); }
    .lang-list {
      position: absolute; right: 0; top: calc(100% + .6rem); min-width: 11rem; z-index: 110;
      background: rgba(23,19,15,.92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
      border: 1px solid rgba(199,141,83,.25); border-radius: 6px; padding: .35rem;
      box-shadow: 0 18px 50px -12px rgba(0,0,0,.7);
    }
    .lang-list a {
      display: flex; align-items: center; gap: .65rem; text-decoration: none;
      font-size: .82rem; color: rgba(245,240,232,.8); padding: .55rem .7rem; border-radius: 4px;
      transition: background .25s var(--ease);
    }
    .lang-list a:hover { background: rgba(199,141,83,.12); color: var(--ivory); }
    .lang-list a .flag { width: 19px; height: 13px; border-radius: 2px; box-shadow: 0 0 0 .5px rgba(245,240,232,.25); }
    .lang-list a.active { color: var(--champagne); }
    .lang-list a.active::after { content: '✓'; margin-left: auto; color: var(--gold-light); font-size: .75rem; }

    .nav-login {
      display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap;
      font-size: .78rem; font-weight: 600; color: var(--onyx);
      background: var(--gold); border: 1px solid var(--gold);
      padding: .5rem 1rem; border-radius: 3px; transition: background .3s var(--ease);
    }
    .nav-login:hover { background: var(--gold-light); border-color: var(--gold-light); }
    .nav-login .label-l { display: none; }
    .nav-cta { display: none; }

    @media (min-width: 920px) {
      .nav { padding-top: calc(1.05rem + env(safe-area-inset-top)); padding-bottom: 1.05rem; }
      .nav-brand > svg { width: 36px; height: 36px; }
      .brand-name { font-size: 1.45rem; }
      .brand-tag { display: block; }
      .nav-links { display: flex; gap: 1.8rem; position: absolute; left: 50%; transform: translateX(-50%); }
      .nav-links a {
        position: relative; text-decoration: none; font-size: .8rem; color: rgba(245,240,232,.65);
        padding: .3rem 0; transition: color .3s var(--ease);
      }
      .nav-links a::after {
        content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
        background: var(--gold); transition: right .35s var(--ease);
      }
      .nav-links a:hover { color: var(--champagne); }
      .nav-links a:hover::after { right: 0; }
      .nav-login {
        background: transparent; color: var(--champagne); border-color: rgba(199,141,83,.45);
        font-weight: 500;
      }
      .nav-login:hover { background: rgba(199,141,83,.1); color: var(--ivory); border-color: var(--gold); }
      .nav-login .label-s { display: none; }
      .nav-login .label-l { display: inline; }
      .nav-cta {
        display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap;
        font-size: .78rem; font-weight: 600; color: var(--onyx);
        background: var(--gold); padding: .5rem 1.15rem; border-radius: 3px;
        box-shadow: 0 6px 20px -6px rgba(199,141,83,.5);
        transition: background .3s var(--ease), transform .3s var(--ease);
      }
      .nav-cta:hover { background: var(--gold-light); transform: translateY(-1px); }
    }

    /* ── Hero ───────────────────────────────────────────────────────────── */
    .hero {
      position: relative; min-height: 100svh;
      display: flex; flex-direction: column; justify-content: center;
      padding: calc(5rem + env(safe-area-inset-top)) clamp(1.25rem, 5vw, 4rem) 4rem;
      max-width: 1200px; margin: 0 auto;
    }
    .hero-glow {
      position: absolute; pointer-events: none;
      width: 60vw; height: 60vw; max-width: 700px; max-height: 700px;
      border-radius: 50%; filter: blur(80px);
      background: radial-gradient(circle, rgba(199,141,83,.14), transparent 65%);
      top: -10%; right: -15%;
    }
    .hero-grid { display: grid; gap: 3.5rem; align-items: center; }
    @media (min-width: 920px) { .hero-grid { grid-template-columns: 1.1fr .9fr; gap: 2rem; } }

    .eyebrow {
      font-size: .68rem; color: var(--gold); font-weight: 500;
      font-variant: small-caps; text-transform: lowercase; letter-spacing: .22em;
      display: flex; align-items: center; gap: .8rem; margin-bottom: 1.6rem;
    }
    .eyebrow::before { content: ''; width: 2.2rem; height: 1px; background: var(--gold); opacity: .6; }

    h1 {
      font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600;
      font-size: clamp(2.6rem, 6.5vw, 4.4rem); line-height: 1.08; letter-spacing: -0.02em;
      margin-bottom: 1.4rem; text-wrap: balance;
    }
    .underline-gold { position: relative; white-space: nowrap; }
    .underline-gold svg {
      position: absolute; left: 0; right: 0; bottom: -0.12em; width: 100%; height: .28em;
      overflow: visible;
    }
    .underline-gold svg path {
      fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; opacity: .75;
      stroke-dasharray: 320; stroke-dashoffset: 320; animation: draw 1.4s .7s var(--ease) forwards;
    }
    @keyframes draw { to { stroke-dashoffset: 0; } }

    .hero-sub { color: rgba(245,240,232,.68); font-size: clamp(1rem, 1.6vw, 1.13rem); max-width: 36ch; margin-bottom: 2.2rem; }

    .h1-gold { color: var(--gold-light); }
    .cta-row { display: flex; flex-wrap: wrap; gap: .9rem; align-items: stretch; margin-bottom: .9rem; }
    .btn-account {
      display: inline-flex; align-items: center; gap: .6rem; text-decoration: none;
      color: var(--champagne); font-weight: 500; font-size: .88rem;
      border: 1px solid rgba(199,141,83,.45); border-radius: 2px;
      padding: .95rem 1.5rem; transition: all .3s var(--ease);
    }
    .btn-account:hover { background: rgba(199,141,83,.1); border-color: var(--gold); color: var(--ivory); }
    .btn-account svg { width: 17px; height: 17px; opacity: .8; }
    .cta-how { margin-bottom: 1.6rem; }
    .cta-how .btn-ghost { padding: .2rem 0; font-size: .82rem; }
    .btn-gold {
      display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
      background: var(--gold); color: var(--onyx); font-weight: 600; font-size: .88rem;
      padding: .95rem 1.8rem; border-radius: 2px; transition: all .3s var(--ease);
      box-shadow: var(--shadow-luxe);
    }
    .btn-gold:hover { background: var(--gold-light); transform: translateY(-1px); box-shadow: var(--shadow-luxe-hover); }
    .btn-ghost {
      display: inline-flex; align-items: center; gap: .45rem; text-decoration: none;
      color: rgba(245,240,232,.75); font-size: .88rem; font-weight: 400;
      padding: .95rem 1.2rem; border-radius: 2px; transition: color .3s var(--ease);
    }
    .btn-ghost:hover { color: var(--champagne); }
    .btn-ghost .arrow { transition: transform .3s var(--ease); }
    .btn-ghost:hover .arrow { transform: translateY(3px); }

    /* Official store badges (untouched artwork per brand guidelines) */
    .stores { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .8rem; margin-bottom: 2.2rem; }
    .stores img { height: 46px; width: auto; display: block; border-radius: 7px; transition: opacity .3s var(--ease); }
    .store-item { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
    .store-link { display: block; border-radius: 7px; }
    .store-link:hover img { opacity: .85; }
    .store-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
    /* iOS has no listing yet: the badge stays, dimmed and non-clickable, with a status caption. */
    .store-item--soon img { opacity: .55; }
    .store-status { font-size: .62rem; letter-spacing: .13em; font-variant: small-caps; text-transform: lowercase; color: rgba(245,240,232,.55); }

    .cred { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.5rem; }
    .cred-item { display: flex; align-items: center; gap: .5rem; white-space: nowrap; font-size: .7rem; color: rgba(245,240,232,.6); font-variant: small-caps; text-transform: lowercase; letter-spacing: .13em; }
    .cred-item strong { color: var(--champagne); font-weight: 600; }
    .cred-ico { color: var(--gold); font-size: .6rem; }

    /* ── Mockup iPhone ──────────────────────────────────────────────────── */
    /* align-items must not be left at stretch: WebKit resolves a stretched
       flex item's aspect-ratio against the (circular) line height and renders
       the phone ~5% too tall vs Chromium. center lets width drive the ratio. */
    .phone-stage { position: relative; display: flex; justify-content: center; align-items: center; }
    .iphone {
      position: relative; width: min(300px, 76vw); aspect-ratio: 9 / 18.2;
      border-radius: 46px; padding: 11px;
      background: linear-gradient(145deg, #261E18, #0D0A08 40%, #1D1712);
      box-shadow: var(--shadow-luxe-hover), inset 0 0 0 1.5px rgba(245,240,232,.08);
      animation: floaty 7s ease-in-out infinite;
    }
    @keyframes floaty { 0%,100% { transform: translateY(0) rotate(-.4deg); } 50% { transform: translateY(-12px) rotate(.4deg); } }
    /* The screen is absolutely positioned (inset = frame padding) so its
       content can never inflate the frame past its aspect-ratio — WebKit
       grows aspect-ratio boxes to fit min-content height, Chromium doesn't. */
    .iphone .screen {
      position: absolute; inset: 11px; border-radius: 36px; overflow: hidden;
      background: var(--onyx); display: flex; flex-direction: column;
    }
    .island { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 32%; height: 21px; border-radius: 12px; background: #000; z-index: 5; }
    .scr-status { display: flex; justify-content: space-between; padding: 12px 22px 4px; font-size: .6rem; color: rgba(245,240,232,.7); font-weight: 500; }
    .scr-photo { position: relative; margin: 10px 12px 0; border-radius: 14px; overflow: hidden; aspect-ratio: 4/3.4; }
    .scr-photo img { width: 100%; height: 100%; object-fit: cover; }
    .scr-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,10,8,.55), transparent 45%); }
    .scr-body { padding: 14px 16px 0; flex: 1; }
    .scr-title { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: 1.18rem; line-height: 1.15; margin-bottom: 8px; }
    .scr-meta { display: flex; gap: 6px; margin-bottom: 12px; }
    .scr-chip { font-size: .55rem; color: rgba(245,240,232,.65); border: 1px solid var(--charcoal); border-radius: 99px; padding: 2.5px 8px; }
    .scr-ings { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
    .scr-ing { display: flex; align-items: center; gap: 7px; font-size: .62rem; color: rgba(245,240,232,.78); }
    .scr-ing::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); flex: none; }
    .scr-more { font-size: .58rem; color: rgba(245,240,232,.4); padding-left: 11px; }
    .scr-cta { margin: auto 14px 16px; background: var(--gold); color: var(--onyx); text-align: center; font-size: .68rem; font-weight: 600; padding: 10px; border-radius: 4px; }

    .chip-float {
      position: absolute; z-index: 6;
      display: inline-flex; align-items: center; gap: .45rem;
      background: rgba(23,19,15,.6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
      border: 1px solid rgba(199,141,83,.35); border-radius: 99px;
      padding: .5rem .9rem; font-size: .66rem; font-weight: 400; color: var(--champagne);
      box-shadow: 0 12px 32px -8px rgba(0,0,0,.5);
      animation: floaty 7s ease-in-out infinite;
    }
    .chip-float .mono { font-family: 'JetBrains Mono', monospace; font-size: .6rem; color: var(--gold-light); }
    .chip-ia { top: 17%; left: max(-14px, -3vw); animation-delay: -2.5s; }
    .chip-frigo { bottom: 26%; right: max(-18px, -3.5vw); animation-delay: -4.5s; }
    .chip-verified { bottom: -3.5%; left: max(-14px, -2vw); animation-delay: -1.2s; max-width: 86%; }

    /* Real food photography (cropped from the brand reference) behind the phone */
    .food-col { display: none; position: absolute; pointer-events: none; z-index: 0; }
    .food-tom {
      position: absolute; pointer-events: none; z-index: 0;
      width: min(200px, 46vw); height: auto; right: max(-30px, -6vw); bottom: -6%;
      opacity: .9;
    }
    @media (min-width: 920px) {
      .food-tom { display: none; }
      .food-col {
        display: block; width: 215px; height: auto;
        right: -120px; top: 50%; transform: translateY(-50%);
        opacity: .95;
      }
      .phone-stage { padding-right: 60px; }
    }
    @media (min-width: 1180px) { .food-col { right: -150px; width: 246px; } }

    /* Vapeur */
    .steam { position: absolute; top: -34px; left: 50%; transform: translateX(-50%); width: 60px; height: 44px; opacity: .5; }
    .steam path { fill: none; stroke: var(--champagne); stroke-width: 1.5; stroke-linecap: round; opacity: 0; animation: steam 4.5s ease-in-out infinite; }
    .steam path:nth-child(2) { animation-delay: 1.4s; }
    .steam path:nth-child(3) { animation-delay: 2.8s; }
    @keyframes steam {
      0% { opacity: 0; transform: translateY(8px); }
      35% { opacity: .55; }
      100% { opacity: 0; transform: translateY(-14px); }
    }

    /* ── Sections communes ──────────────────────────────────────────────── */
    section { position: relative; padding: clamp(4.5rem, 10vw, 7.5rem) clamp(1.25rem, 5vw, 4rem); }
    .wrap { max-width: 1100px; margin: 0 auto; }
    .sec-eyebrow { font-size: .66rem; color: var(--gold); font-variant: small-caps; text-transform: lowercase; letter-spacing: .22em; text-align: center; margin-bottom: 1rem; }
    .sec-title {
      font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600;
      font-size: clamp(1.9rem, 4.5vw, 2.9rem); line-height: 1.15; text-align: center;
      letter-spacing: -0.02em; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); text-wrap: balance;
    }

    /* ── §2 Comment ça marche ───────────────────────────────────────────── */
    .sec-marble { background: var(--marble); border-top: 1px solid rgba(199,141,83,.1); border-bottom: 1px solid rgba(199,141,83,.1); }
    .steps { display: grid; gap: 2.6rem; max-width: 420px; margin: 0 auto; }
    @media (min-width: 880px) {
      .steps { grid-template-columns: repeat(4, 1fr); gap: 2rem; max-width: none; position: relative; }
      .steps::before {
        content: ''; position: absolute; top: 1.6rem; left: 11%; right: 11%; height: 1px;
        background-image: linear-gradient(to right, var(--gold) 35%, transparent 0%);
        background-size: 9px 1px; background-repeat: repeat-x; opacity: .35;
      }
    }
    .step { display: flex; gap: 1.2rem; }
    @media (min-width: 880px) { .step { flex-direction: column; text-align: center; align-items: center; gap: .9rem; } }
    .step-num {
      font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500;
      font-size: 2.6rem; line-height: 1; color: var(--gold); flex: none;
      width: 3.2rem; height: 3.2rem; display: flex; align-items: center; justify-content: center;
      border: 1px solid rgba(199,141,83,.3); border-radius: 50%; background: var(--onyx);
      position: relative; z-index: 1; font-size: 1.5rem;
    }
    .step h3 { font-size: .95rem; font-weight: 500; margin-bottom: .3rem; }
    .step p { font-size: .85rem; color: rgba(245,240,232,.55); max-width: 24ch; }
    @media (min-width: 880px) { .step p { margin: 0 auto; } }

    /* ── §2bis La visite — product tour ─────────────────────────────────── */
    /* Native scroll-snap carousel on mobile (no library), static 4-up grid on
       desktop. The dots are progressive enhancement — hidden without JS. */
    .tour-track {
      display: flex; gap: clamp(1.4rem, 5vw, 2rem);
      overflow-x: auto; overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding: .5rem max(1rem, calc(50% - min(132px, 37vw))) 1.2rem;
    }
    .tour-track::-webkit-scrollbar { display: none; }
    .tour-slide { flex: 0 0 auto; width: min(264px, 74vw); scroll-snap-align: center; margin: 0; }
    .tour-slide .iphone { width: 100%; animation: none; border-radius: 40px; padding: 9px; }
    .tour-slide .screen { border-radius: 32px; inset: 9px; }
    .tour-cap { margin: 1.2rem 0 0; text-align: center; }
    .tour-cap .tour-num { display: block; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; color: var(--gold); font-size: .95rem; margin-bottom: .25rem; }
    .tour-cap h3 { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: 1.3rem; letter-spacing: -0.01em; margin-bottom: .3rem; }
    .tour-cap p { font-size: .83rem; color: rgba(245,240,232,.55); max-width: 26ch; margin: 0 auto; }
    .tour-dots { display: flex; justify-content: center; gap: .45rem; }
    .tour-dot { width: 26px; height: 26px; border: 0; background: transparent; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
    .tour-dot::after { content: ''; width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(199,141,83,.6); transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); }
    .tour-dot[aria-current="true"]::after { background: var(--gold); border-color: var(--gold); transform: scale(1.3); }
    html:not(.js) .tour-dots { display: none; }
    @media (min-width: 1020px) {
      .tour-track { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; padding: .5rem 0 0; }
      .tour-slide { width: 100%; }
      .tour-dots { display: none; }
    }

    /* In-screen tour UI — same visual language as the hero mockup */
    .tscr { padding: 38px 13px 0; flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: hidden; }
    .tscr--center { justify-content: center; text-align: center; gap: 11px; padding-bottom: 10px; }
    .tscr-label { font-size: .5rem; font-variant: small-caps; text-transform: lowercase; letter-spacing: .18em; color: var(--gold); }
    .tscr-title { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: 1.12rem; line-height: 1.1; }
    .tscr-chips { display: flex; flex-wrap: wrap; gap: 5px; }
    .tscr-row {
      display: flex; align-items: center; gap: 8px; padding: 8px 9px;
      border: 1px solid var(--charcoal); border-radius: 10px; background: rgba(23,19,15,.55);
    }
    .tscr-thumb {
      width: 30px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center;
      font-size: .95rem; border-radius: 8px; border: 1px solid rgba(199,141,83,.3);
      background: radial-gradient(circle at 30% 25%, rgba(214,163,110,.35), rgba(199,141,83,.1));
    }
    .tscr-row b { display: block; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: .84rem; line-height: 1.15; color: var(--ivory); }
    .tscr-row i { display: block; font-style: normal; font-size: .55rem; color: rgba(245,240,232,.5); margin-top: 2px; }
    .tscr-day { width: 26px; flex: none; font-size: .5rem; font-variant: small-caps; text-transform: lowercase; letter-spacing: .12em; color: var(--gold-light); }
    .tscr-meal { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: .8rem; color: rgba(245,240,232,.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tscr-row.today { border-color: rgba(199,141,83,.55); background: rgba(199,141,83,.08); }
    .tscr-item { display: flex; align-items: center; gap: 8px; padding: 6px 2px; font-size: .64rem; color: rgba(245,240,232,.85); border-bottom: 1px solid rgba(58,52,46,.6); }
    .tscr-check { width: 13px; height: 13px; flex: none; border: 1px solid rgba(199,141,83,.5); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: .5rem; color: var(--onyx); }
    .tscr-item.done .tscr-check { background: var(--gold); border-color: var(--gold); }
    .tscr-item.done span:last-child { text-decoration: line-through; opacity: .45; }
    .tscr-timer {
      display: inline-flex; align-items: center; gap: .4rem; margin: 0 auto;
      font-family: 'JetBrains Mono', monospace; font-size: .8rem; color: var(--champagne);
      border: 1px solid rgba(199,141,83,.4); border-radius: 99px; padding: .45rem .95rem;
      background: rgba(199,141,83,.07);
    }
    .tscr-step-text { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: .98rem; line-height: 1.3; color: rgba(245,240,232,.92); }
    .tscr-progress { width: 64%; height: 3px; margin: 0 auto; border-radius: 99px; background: var(--charcoal); overflow: hidden; }
    .tscr-progress i { display: block; height: 100%; width: 33%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); }
    .tscr-note { font-size: .54rem; color: rgba(245,240,232,.45); letter-spacing: .08em; }

    /* ── §3 Fonctionnalités ─────────────────────────────────────────────── */
    .cards { display: grid; gap: 1.1rem; }
    @media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
    .card .ico svg { width: 21px; height: 21px; stroke: var(--gold-light); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
    .card {
      background: var(--marble); border: 1px solid var(--charcoal); border-radius: 4px;
      padding: 1.8rem 1.6rem; transition: border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
    }
    .card:hover { border-color: rgba(199,141,83,.45); box-shadow: var(--shadow-luxe); transform: translateY(-3px); }
    .card .ico {
      width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
      font-size: 1.25rem; background: rgba(199,141,83,.08); border: 1px solid rgba(199,141,83,.25); margin-bottom: 1.1rem;
      transition: background .4s var(--ease);
    }
    .card:hover .ico { background: rgba(199,141,83,.18); }
    .card h3 { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: 1.35rem; margin-bottom: .45rem; letter-spacing: -0.01em; }
    .card p { font-size: .87rem; color: rgba(245,240,232,.58); }

    /* ── §4 La phrase ───────────────────────────────────────────────────── */
    .quote-sec { padding-top: clamp(6rem, 14vw, 10rem); padding-bottom: clamp(6rem, 14vw, 10rem); text-align: center; position: relative; overflow: hidden; }
    .quote-sec .hero-glow { top: 30%; left: 50%; transform: translate(-50%, -50%); right: auto; opacity: .8; }
    .quote {
      position: relative; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500;
      font-size: clamp(2rem, 6vw, 4rem); line-height: 1.2; letter-spacing: -0.02em;
      max-width: 18ch; margin: 0 auto; text-wrap: balance;
    }
    .quote em { font-style: inherit; color: var(--gold-light); }

    /* ── §5 Appareils ───────────────────────────────────────────────────── */
    .devices { display: flex; justify-content: center; align-items: flex-end; gap: 0; margin-bottom: 3rem; }
    .devices .iphone { width: min(250px, 56vw); animation: none; z-index: 2; }
    .android {
      position: relative; width: min(235px, 50vw); aspect-ratio: 9 / 18.4; margin-left: -2.2rem;
      border-radius: 28px; padding: 9px; transform: translateY(1.6rem) rotate(1.2deg);
      background: linear-gradient(145deg, #2e2a24, #14110e 45%, #262019);
      box-shadow: var(--shadow-luxe), inset 0 0 0 1.5px rgba(245,240,232,.07); z-index: 1;
    }
    .android .screen { position: absolute; inset: 9px; border-radius: 20px; overflow: hidden; background: var(--onyx); display: flex; flex-direction: column; }
    .punch { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 11px; height: 11px; border-radius: 50%; background: #000; z-index: 5; }
    .pills { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
    .pill {
      display: inline-flex; align-items: center; gap: .5rem;
      font-size: .68rem; font-variant: small-caps; text-transform: lowercase; letter-spacing: .14em;
      color: var(--champagne); background: rgba(23,19,15,.6);
      -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
      border: 1px solid rgba(199,141,83,.3); border-radius: 99px; padding: .55rem 1.15rem;
    }
    .pill svg { width: 13px; height: 13px; fill: var(--gold-light); }

    /* ── §6 Premium ─────────────────────────────────────────────────────── */
    .premium-card {
      position: relative; max-width: 640px; margin: 0 auto; text-align: center;
      background: linear-gradient(170deg, rgba(199,141,83,.07), rgba(13,10,8,0) 45%), var(--marble);
      border: 1px solid rgba(199,141,83,.45); border-radius: 6px;
      padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 5vw, 3.5rem);
      box-shadow: var(--shadow-luxe);
      overflow: hidden;
    }
    .premium-card::before {
      content: ''; position: absolute; inset: 7px; border: 1px solid rgba(199,141,83,.18); border-radius: 3px; pointer-events: none;
    }
    .premium-card::after {
      content: ''; position: absolute; top: -60%; left: 50%; transform: translateX(-50%);
      width: 130%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
      background: radial-gradient(circle, rgba(232,201,122,.07), transparent 60%);
    }
    .premium-star { color: var(--gold-light); font-size: 1.3rem; margin-bottom: .8rem; }
    .premium-card h2 { font-size: .78rem; font-weight: 500; font-variant: small-caps; text-transform: lowercase; letter-spacing: .26em; color: var(--gold-light); margin-bottom: 1.1rem; }
    .premium-card .serif-line { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: clamp(1.5rem, 3.5vw, 2.1rem); line-height: 1.25; margin-bottom: 1.8rem; text-wrap: balance; }
    .premium-list { list-style: none; display: flex; flex-direction: column; gap: .8rem; margin: 0 auto 2.2rem; max-width: 320px; text-align: left; }
    .premium-list li { display: flex; gap: .8rem; align-items: baseline; font-size: .92rem; color: rgba(245,240,232,.8); }
    .premium-list li::before { content: '✦'; color: var(--gold); font-size: .7rem; flex: none; }

    /* ── §7 FAQ ─────────────────────────────────────────────────────────── */
    .faq { max-width: 720px; margin: 0 auto; }
    .faq details { border-bottom: 1px solid var(--charcoal); }
    .faq summary {
      cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
      padding: 1.3rem .2rem; font-size: .98rem; font-weight: 400; transition: color .3s var(--ease);
    }
    .faq summary::-webkit-details-marker { display: none; }
    .faq summary:hover { color: var(--champagne); }
    .faq summary .chev { flex: none; color: var(--gold); transition: transform .35s var(--ease); font-size: .8rem; }
    .faq details[open] summary .chev { transform: rotate(45deg); }
    .faq details p { padding: 0 .2rem 1.4rem; font-size: .89rem; color: rgba(245,240,232,.6); max-width: 60ch; }
    .faq details p a { color: var(--gold-light); }

    /* ── Footer ─────────────────────────────────────────────────────────── */
    footer {
      border-top: 1px solid rgba(199,141,83,.12); background: var(--marble);
      padding: 3.5rem clamp(1.25rem, 5vw, 4rem) calc(2.5rem + env(safe-area-inset-bottom));
    }
    .foot-wrap { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 2rem; }
    .foot-brand { display: flex; align-items: center; gap: .7rem; }
    .foot-brand svg { width: 34px; height: 34px; }
    .foot-brand b { font-weight: 500; font-variant: small-caps; text-transform: lowercase; letter-spacing: var(--tracking-luxe); font-size: .9rem; }
    .foot-desc { font-size: .85rem; color: rgba(245,240,232,.55); max-width: 52ch; }
    .foot-links { display: flex; flex-wrap: wrap; gap: 1.4rem 2rem; font-size: .8rem; }
    .foot-links a { color: rgba(245,240,232,.65); text-decoration: none; transition: color .3s var(--ease); }
    .foot-links a:hover { color: var(--champagne); }
    .foot-legal { font-size: .72rem; color: rgba(245,240,232,.35); display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
    .foot-legal .mono { font-family: 'JetBrains Mono', monospace; font-size: .65rem; }

    /* ── Reduced motion ─────────────────────────────────────────────────── */
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .iphone, .chip-float { animation: none; }
      .steam path { animation: none; opacity: .3; }
      .underline-gold svg path { animation: none; stroke-dashoffset: 0; }
      .logo-sheen { animation: none; opacity: 0; }
      .reveal { transition: none; opacity: 1; transform: none; }
    }
:root{--color-espresso:38 30 24;--color-espressoDeep:23 19 15;--color-cream:243 235 224;--color-caramel:199 141 83;--color-sage:156 166 134;--color-onyx:23 19 15;--color-ivory:243 235 224;--color-gold:199 141 83;--color-goldLight:216 165 112;--color-champagne:228 205 172;--color-marble:38 30 24;--color-marbleLight:52 42 34;--color-charcoal:70 58 46;--color-danger:178 84 64;--color-stage:13 10 8}.font-display{font-family:Cormorant Garamond,serif;letter-spacing:-.02em}.font-mono{font-family:JetBrains Mono,monospace}.small-caps{font-variant:small-caps;letter-spacing:.15em;word-spacing:.25em;text-transform:uppercase;font-weight:600;font-size:.7rem}.glass-v3{background:rgb(var(--color-espressoDeep)/.55);backdrop-filter:blur(24px) saturate(1.75);border:1px solid rgb(var(--color-cream)/.09);box-shadow:inset 0 1px 0 rgb(var(--color-cream)/.07),0 10px 30px rgba(0,0,0,.32)}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.bottom-10{bottom:2.5rem}.right-3{right:.75rem}.z-10{z-index:10}.mx-auto{margin-left:auto;margin-right:auto}.-mt-7{margin-top:-1.75rem}.mb-1\.5{margin-bottom:.375rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-2{margin-left:.5rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3\.5{margin-top:.875rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.block{display:block}.flex{display:flex}.grid{display:grid}.h-8{height:2rem}.h-\[46vh\]{height:46vh}.h-\[5px\]{height:5px}.h-full{height:100%}.min-h-\[280px\]{min-height:280px}.w-10{width:2.5rem}.w-8{width:2rem}.w-9{width:2.25rem}.w-full{width:100%}.max-w-3xl{max-width:48rem}.max-w-\[62ch\]{max-width:62ch}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-5{gap:1.25rem}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.rounded-\[26px\]{border-radius:26px}.rounded-full{border-radius:9999px}.rounded-xl{border-radius:.75rem}.rounded-t-\[30px\]{border-top-left-radius:30px;border-top-right-radius:30px}.border{border-width:1px}.border-t{border-top-width:1px}.border-charcoal{--tw-border-opacity:1;border-color:rgb(var(--color-charcoal)/var(--tw-border-opacity,1))}.border-cream\/\[0\.07\]{border-color:rgb(var(--color-cream)/.07)}.border-gold\/30{border-color:rgb(var(--color-gold)/.3)}.bg-cream\/\[0\.045\]{background-color:rgb(var(--color-cream)/.045)}.bg-cream\/\[0\.07\]{background-color:rgb(var(--color-cream)/.07)}.bg-cream\/\[0\.14\]{background-color:rgb(var(--color-cream)/.14)}.bg-gold{--tw-bg-opacity:1;background-color:rgb(var(--color-gold)/var(--tw-bg-opacity,1))}.bg-gold\/10{background-color:rgb(var(--color-gold)/.1)}.bg-marble{--tw-bg-opacity:1;background-color:rgb(var(--color-marble)/var(--tw-bg-opacity,1))}.bg-onyx{--tw-bg-opacity:1;background-color:rgb(var(--color-onyx)/var(--tw-bg-opacity,1))}.bg-onyx\/60{background-color:rgb(var(--color-onyx)/.6)}.bg-success\/60{background-color:rgb(var(--color-gold)/.6)}.object-cover{-o-object-fit:cover;object-fit:cover}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pb-1{padding-bottom:.25rem}.pb-3{padding-bottom:.75rem}.pb-6{padding-bottom:1.5rem}.pt-1{padding-top:.25rem}.pt-1\.5{padding-top:.375rem}.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-5{padding-top:1.25rem}.text-center{text-align:center}.text-right{text-align:right}.font-display{font-family:Cormorant Garamond,serif}.font-mono{font-family:JetBrains Mono,monospace}.font-sans{font-family:Inter,system-ui,sans-serif}.\!text-\[9px\]{font-size:9px!important}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[13px\]{font-size:13px}.text-\[15px\]{font-size:15px}.text-\[31px\]{font-size:31px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.italic{font-style:italic}.not-italic{font-style:normal}.leading-\[1\.06\]{line-height:1.06}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-luxe{letter-spacing:.15em}.tracking-wide{letter-spacing:.025em}.text-champagne\/80{color:rgb(var(--color-champagne)/.8)}.text-gold{--tw-text-opacity:1;color:rgb(var(--color-gold)/var(--tw-text-opacity,1))}.text-goldLight{--tw-text-opacity:1;color:rgb(var(--color-goldLight)/var(--tw-text-opacity,1))}.text-ivory{--tw-text-opacity:1;color:rgb(var(--color-ivory)/var(--tw-text-opacity,1))}.text-ivory\/20{color:rgb(var(--color-ivory)/.2)}.text-ivory\/35{color:rgb(var(--color-ivory)/.35)}.text-ivory\/40{color:rgb(var(--color-ivory)/.4)}.text-ivory\/50{color:rgb(var(--color-ivory)/.5)}.text-ivory\/55{color:rgb(var(--color-ivory)/.55)}.text-ivory\/60{color:rgb(var(--color-ivory)/.6)}.text-ivory\/65{color:rgb(var(--color-ivory)/.65)}.text-ivory\/75{color:rgb(var(--color-ivory)/.75)}.text-ivory\/80{color:rgb(var(--color-ivory)/.8)}.text-ivory\/90{color:rgb(var(--color-ivory)/.9)}.text-onyx{--tw-text-opacity:1;color:rgb(var(--color-onyx)/var(--tw-text-opacity,1))}.line-through{text-decoration-line:line-through}.decoration-gold\/40{text-decoration-color:rgb(var(--color-gold)/.4)}.shadow-\[0_-18px_40px_rgba\(0\2c 0\2c 0\2c 0\.35\)\]{--tw-shadow:0 -18px 40px rgba(0,0,0,.35);--tw-shadow-colored:0 -18px 40px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_8px_24px_rgba\(199\2c 141\2c 83\2c 0\.25\)\]{--tw-shadow:0 8px 24px rgba(199,141,83,.25);--tw-shadow-colored:0 8px 24px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-cream\/10{--tw-ring-color:rgb(var(--color-cream)/0.1)}.ring-ivory\/5{--tw-ring-color:rgb(var(--color-ivory)/0.05)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hover\:bg-cream\/10:hover{background-color:rgb(var(--color-cream)/.1)}.hover\:bg-gold\/20:hover{background-color:rgb(var(--color-gold)/.2)}.hover\:bg-goldLight:hover{--tw-bg-opacity:1;background-color:rgb(var(--color-goldLight)/var(--tw-bg-opacity,1))}.hover\:text-gold:hover{--tw-text-opacity:1;color:rgb(var(--color-gold)/var(--tw-text-opacity,1))}@media (min-width:1024px){.lg\:bottom-3{bottom:.75rem}.lg\:mx-auto{margin-left:auto;margin-right:auto}.lg\:mt-0{margin-top:0}.lg\:hidden{display:none}.lg\:h-hero{height:420px}.lg\:w-full{width:100%}.lg\:max-w-4xl{max-width:56rem}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:rounded-none{border-radius:0}.lg\:rounded-xl{border-radius:.75rem}.lg\:bg-transparent{background-color:transparent}.lg\:p-7{padding:1.75rem}.lg\:px-8{padding-left:2rem;padding-right:2rem}.lg\:pt-6{padding-top:1.5rem}.lg\:text-2xl{font-size:1.5rem;line-height:2rem}.lg\:text-5xl{font-size:3rem;line-height:1}.lg\:text-base{font-size:1rem;line-height:1.5rem}.lg\:shadow-none{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}}
/* ── /recetas/ — components that only exist on recipe pages ────────────────
   Built on the landing's own tokens and classes (prepended to this file at build time from
   public/es.html): --onyx --marble --marble-light --charcoal --gold --gold-light --champagne
   --ivory --shadow-luxe --ease; .nav .btn-gold .btn-ghost .sec-marble .sec-eyebrow .sec-title
   .steps .step .step-num .card .faq .premium-card .iphone .scr-chip .tscr* .pill .store-* footer. */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.receta { padding-bottom: calc(5.2rem + env(safe-area-inset-bottom)); }
@media (min-width: 920px) { body.receta { padding-bottom: 0; } }

/* Lead */
.r-lead { max-width: 62ch; margin: 0 auto; font-size: clamp(1.02rem, 1.7vw, 1.15rem); color: rgba(245,240,232,.78); text-align: center; }
.r-soft { text-align: center; margin-top: 1.4rem; font-size: .88rem; color: rgba(245,240,232,.6); }
.r-soft a { color: var(--gold-light); text-decoration: none; border-bottom: 1px solid rgba(199,141,83,.4); }
section.r-tight { padding-top: clamp(2.5rem, 6vw, 4rem); padding-bottom: clamp(2.5rem, 6vw, 4rem); }

/* "5 ideas": the landing's "cuatro tiempos" steps, five of them */
.sec-title em { font-style: inherit; color: var(--gold-light); }
@media (min-width: 880px) {
  .steps.steps--5 { grid-template-columns: repeat(5, 1fr); }
  .steps.steps--5::before { left: 9%; right: 9%; }
}
.steps--5 .step h3 { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: 1.22rem; letter-spacing: -0.01em; }
.steps--5 .step p { max-width: 30ch; }

/* CTA section: the landing hero's copy + store badges, with the fridge screen */
.r-cta { overflow: hidden; }
.r-cta-grid { display: grid; gap: 3rem; align-items: center; max-width: 1100px; margin: 0 auto; }
@media (min-width: 920px) { .r-cta-grid { grid-template-columns: 1.1fr .9fr; } }
.r-cta h2 { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 1.1rem; text-wrap: balance; }
.r-cta h2 em { font-style: inherit; color: var(--gold-light); }
.r-cta .hero-sub { max-width: 44ch; }
.r-cta .stores { margin: 1.4rem 0 0; }
.r-cta .iphone { width: min(270px, 68vw); }
.r-cta .chip-frigo { bottom: 18%; }

/* Substitutions | variations, two columns */
.r-two { display: grid; gap: 3rem; max-width: 1100px; margin: 0 auto; }
@media (min-width: 880px) { .r-two { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.r-two h2 { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: clamp(1.7rem, 3.6vw, 2.3rem); letter-spacing: -0.02em; margin-bottom: 1.6rem; }
.r-vars p { font-size: .87rem; color: rgba(245,240,232,.58); margin-top: .3rem; }
.r-vars { list-style: none; display: flex; flex-direction: column; gap: 1.5rem; }
.r-vars .tour-num { display: block; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; color: var(--gold); font-size: .95rem; }
.r-vars h3 { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: 1.3rem; letter-spacing: -0.01em; }

/* Related pages, final CTA, index */
.r-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; max-width: 900px; margin: 0 auto; }
.r-pills a.pill { text-decoration: none; font-variant: normal; text-transform: none; letter-spacing: 0; font-size: .86rem; transition: border-color .3s var(--ease), background .3s var(--ease); }
.r-pills a.pill:hover { border-color: var(--gold); background: rgba(199,141,83,.12); }
.r-end .stores { justify-content: center; margin: 1.4rem 0 0; }
.r-index-group { max-width: 900px; margin: 0 auto 2.6rem; }
.r-index-group h2 { text-align: center; font-size: .72rem; font-weight: 500; color: var(--gold); font-variant: small-caps; text-transform: lowercase; letter-spacing: .22em; margin-bottom: 1rem; }

/* Sticky "Probar gratis en Google Play" on phones */
.r-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); background: rgba(13,10,8,.82); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border-top: 1px solid rgba(199,141,83,.2); }
.r-sticky .btn-gold { width: 100%; justify-content: center; padding: .9rem 1rem; }
@media (min-width: 920px) { .r-sticky { display: none; } }

/* The app's recipe screen under the landing's fixed nav */
.receta-app .r-top { padding-top: 0; }
@media (min-width: 920px) { .receta-app .r-top { padding-top: calc(5.4rem + env(safe-area-inset-top)); } }
@media (max-width: 919px) { .receta-app .r-top > div { border-radius: 0; } }

/* Portions stepper without JavaScript: radios #pz-1…8 before .pz-scope, CSS shows the state */
.pz-m, .pz-p, .pz-n, .q, .pz-off, .pz-max { display: none; }
#pz-1:checked ~ .pz-scope .pz-off, #pz-8:checked ~ .pz-scope .pz-max { display: inline-flex; }
#pz-1:checked ~ .pz-scope :is(.pz-m-1, .pz-p-1, .pz-n-1) { display: inline-flex; }
#pz-1:checked ~ .pz-scope .q-1 { display: inline; }
#pz-2:checked ~ .pz-scope :is(.pz-m-2, .pz-p-2, .pz-n-2) { display: inline-flex; }
#pz-2:checked ~ .pz-scope .q-2 { display: inline; }
#pz-3:checked ~ .pz-scope :is(.pz-m-3, .pz-p-3, .pz-n-3) { display: inline-flex; }
#pz-3:checked ~ .pz-scope .q-3 { display: inline; }
#pz-4:checked ~ .pz-scope :is(.pz-m-4, .pz-p-4, .pz-n-4) { display: inline-flex; }
#pz-4:checked ~ .pz-scope .q-4 { display: inline; }
#pz-5:checked ~ .pz-scope :is(.pz-m-5, .pz-p-5, .pz-n-5) { display: inline-flex; }
#pz-5:checked ~ .pz-scope .q-5 { display: inline; }
#pz-6:checked ~ .pz-scope :is(.pz-m-6, .pz-p-6, .pz-n-6) { display: inline-flex; }
#pz-6:checked ~ .pz-scope .q-6 { display: inline; }
#pz-7:checked ~ .pz-scope :is(.pz-m-7, .pz-p-7, .pz-n-7) { display: inline-flex; }
#pz-7:checked ~ .pz-scope .q-7 { display: inline; }
#pz-8:checked ~ .pz-scope :is(.pz-m-8, .pz-p-8, .pz-n-8) { display: inline-flex; }
#pz-8:checked ~ .pz-scope .q-8 { display: inline; }
.pz:focus-visible ~ .pz-scope .pz-n { outline: 2px solid var(--gold-light); outline-offset: 3px; border-radius: 4px; }
/* Links styled as the app's buttons and chips: no underline (the landing only sets color: inherit) */
.receta-app a { text-decoration: none; }
.receta-app .small-caps { white-space: nowrap; }