/* My Little Coffee House — site public.
   Reprend le kit « café chaleureux » des menus du jeu (electron/ui/styles/cozy.css) : cadre en bois laqué arrondi,
   panneaux crème, pilules, touches bleues des consignes, cœurs bleus. Aucune dépendance, aucun style en ligne (CSP). */
@font-face {
    font-family:Fredoka;
    src:url('/assets/fredoka.woff2') format('woff2');
    font-display:swap;
    font-weight:300 700;
    unicode-range:U+0000-024F, U+02BB-02DC, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+FEFF, U+FFFD
}
@font-face {
    font-family:Gochi;
    src:url('/assets/gochi-hand.woff2') format('woff2');
    font-display:swap;
    unicode-range:U+0000-024F, U+02BB-02DC, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+FEFF, U+FFFD
}
:root {
    /* Bois laqué du jeu (merisier miel) */
    --wood-hi:#f3ae6a;
    --wood:#dc8644;
    --wood-mid:#b9652c;
    --wood-lo:#8c461c;
    --wood-edge:#5e2a12;
    /* Crème des panneaux */
    --panel:#fff6ec;
    --panel-lo:#fcebdd;
    --row:#fffbf6;
    --row-line:#f3dccb;
    --row-shadow:#ebcdb8;
    /* Encres */
    --title:#6b2b2e;
    --text:#7a1f3d;
    --ink:#5a3a33;
    --muted:#9a6a68;
    /* Accents */
    --blue:#6b93ec;
    --blue-hi:#8fb0f6;
    --blue-lo:#3f66c9;
    --key:#d6e4fc;
    --key-line:#a9c3f2;
    --pink:#f28db2;
    --rose:#f7d4d5;
    --mint:#bfe0c8;
    --bg:#fbe7dc;
    --font:Fredoka,ui-rounded,system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;
    --hand:Gochi,var(--font);
    --ease-pop:cubic-bezier(.34,1.56,.64,1);
    --ease-soft:cubic-bezier(.2,.8,.2,1)
}
/* Une pile par écriture : une police japonaise dessinerait le cyrillique en pleine chasse */
:lang(ja) {
    --font:Fredoka,"Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,"Noto Sans JP",sans-serif
}
:lang(zh) {
    --font:Fredoka,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif
}
:lang(ko) {
    --font:Fredoka,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif
}
:lang(zh),:lang(ja),:lang(ko),:lang(ru) {
    --hand:var(--font);
    font-family:var(--font)
}
/* Coupures par groupes de mots en japonais, sans couper les mots coréens */
:lang(ja) {
    word-break:auto-phrase
}
:lang(ko) {
    word-break:keep-all
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:96px
}
body {
    margin:0;
    color:var(--ink);
    font-family:var(--font);
    font-size:17px;
    line-height:1.6;
    background:
        radial-gradient(1200px 700px at 85% -10%, #fde3ea 0, transparent 60%),
        radial-gradient(900px 600px at -10% 30%, #fff2e3 0, transparent 60%),
        radial-gradient(1000px 800px at 110% 70%, #e9f3e6 0, transparent 55%),
        var(--bg)
}
/* Rubans pivotés, cartes qui glissent, abeille : rien ne dépasse sur les côtés (clip garde le sticky) */
main {
    overflow-x:clip
}
/* Pois discrets, comme les papiers peints du jeu */
body::before {
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background-image:radial-gradient(rgba(242,141,178,.16) 2px, transparent 2.5px);
    background-size:34px 34px
}
a {
    color:inherit;
    text-underline-offset:4px
}
a:focus-visible,summary:focus-visible {
    outline:3px solid var(--blue);
    outline-offset:4px;
    border-radius:999px
}
img {
    display:block;
    max-width:100%;
    height:auto
}
h1,h2,h3 {
    text-wrap:balance;
    color:var(--title);
    font-weight:700;
    line-height:1.08;
    letter-spacing:-.5px;
    margin:0
}
p {
    margin:0
}
.wrap {
    max-width:1320px;
    margin-inline:auto;
    padding-inline:40px
}
.skip {
    position:fixed;
    left:16px;
    top:12px;
    z-index:50;
    padding:10px 18px;
    border-radius:999px;
    background:var(--panel);
    color:var(--text);
    font-weight:600;
    transform:translateY(-150%);
    transition:transform .2s
}
.skip:focus {
    transform:none
}

/* ---------- Cadre en bois ---------- */
.frame {
    --pad:12px;
    --r:30px;
    position:relative;
    margin:0;
    padding:var(--pad);
    border-radius:var(--r);
    background:
        linear-gradient(180deg, rgba(255,240,220,.35), rgba(255,255,255,0) 30%, rgba(94,42,18,.12)),
        repeating-linear-gradient(96deg, transparent 0 22px, rgba(140,70,28,.13) 22px 24px, transparent 24px 41px, rgba(255,214,170,.18) 41px 43px),
        linear-gradient(135deg, var(--wood-hi), var(--wood) 42%, var(--wood-mid));
    box-shadow:
        inset 0 3px 0 rgba(255,226,190,.75),
        inset 0 -4px 0 var(--wood-lo),
        0 0 0 2px rgba(94,42,18,.55),
        0 22px 44px -14px rgba(122,60,30,.45)
}
.frame img {
    width:100%;
    border-radius:calc(var(--r) - var(--pad));
    border:3px solid var(--panel);
    background:var(--panel)
}

/* ---------- Pilules, boutons, touches ---------- */
.pill {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:9px 18px;
    border-radius:999px;
    background:linear-gradient(180deg, #fff, var(--row));
    border:2px solid var(--row-line);
    box-shadow:0 3px 0 var(--row-shadow);
    color:var(--text);
    font-weight:600;
    font-size:15px;
    text-decoration:none;
    cursor:pointer;
    transition:transform .2s var(--ease-pop), box-shadow .2s
}
.pill:hover {
    transform:translateY(-2px);
    box-shadow:0 5px 0 var(--row-shadow)
}
.btn {
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:15px 28px;
    border-radius:999px;
    background:linear-gradient(180deg, var(--blue-hi), var(--blue) 55%, #5a83e2);
    color:#fff;
    font-weight:700;
    font-size:18px;
    text-decoration:none;
    text-shadow:0 1px 0 rgba(40,70,150,.35);
    box-shadow:inset 0 2px 0 rgba(255,255,255,.45), 0 5px 0 var(--blue-lo), 0 14px 26px -8px rgba(63,102,201,.55);
    transition:transform .2s var(--ease-pop), box-shadow .2s
}
.btn:hover {
    transform:translateY(-3px);
    box-shadow:inset 0 2px 0 rgba(255,255,255,.45), 0 8px 0 var(--blue-lo), 0 18px 30px -8px rgba(63,102,201,.6)
}
.btn:active {
    transform:translateY(3px);
    box-shadow:inset 0 2px 0 rgba(255,255,255,.45), 0 2px 0 var(--blue-lo)
}
.key {
    display:inline-grid;
    place-items:center;
    min-width:40px;
    height:36px;
    padding:0 10px;
    border-radius:10px;
    background:var(--key);
    border:2px solid var(--key-line);
    box-shadow:0 3px 0 var(--key-line);
    color:#2e4a8a;
    font-weight:600;
    font-size:17px
}
.chip {
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:5px 14px 5px 12px;
    border-radius:999px;
    background:var(--blue);
    color:#fff;
    font-weight:600;
    font-size:13px;
    letter-spacing:.3px;
    box-shadow:0 3px 0 var(--blue-lo)
}
.chip::before {
    content:"♥";
    font-size:12px
}
.eyebrow,.note {
    font-family:var(--hand);
    color:var(--text);
    font-size:24px;
    line-height:1.2
}

/* ---------- En-tête ---------- */
.header {
    position:sticky;
    top:0;
    z-index:20;
    padding-block:14px;
    transition:padding .3s var(--ease-soft)
}
.header::before {
    content:"";
    position:absolute;
    inset:0;
    opacity:0;
    background:
        repeating-linear-gradient(96deg, transparent 0 22px, rgba(140,70,28,.13) 22px 24px, transparent 24px 41px),
        linear-gradient(180deg, var(--wood-hi), var(--wood) 60%, var(--wood-mid));
    box-shadow:inset 0 -3px 0 var(--wood-lo), 0 10px 24px -12px rgba(94,42,18,.5);
    transition:opacity .3s
}
.header.is-scrolled {
    padding-block:6px
}
.header.is-scrolled::before {
    opacity:1
}
.header-bar {
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px
}
.wordmark {
    display:block;
    width:150px;
    flex-shrink:0;
    transition:width .3s var(--ease-soft)
}
.header.is-scrolled .wordmark {
    width:96px
}
.wordmark img {
    width:100%;
    filter:drop-shadow(0 4px 6px rgba(94,42,18,.18))
}
.nav {
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end
}
.lang {
    position:relative
}
.lang summary {
    list-style:none
}
.lang summary::-webkit-details-marker {
    display:none
}
.lang-globe {
    color:var(--blue);
    font-size:18px;
    line-height:1
}
.lang-menu {
    position:absolute;
    right:0;
    top:calc(100% + 10px);
    margin:0;
    padding:8px;
    list-style:none;
    min-width:180px;
    border-radius:22px;
    background:var(--panel);
    border:6px solid var(--wood);
    box-shadow:0 0 0 2px rgba(94,42,18,.5), 0 18px 34px -10px rgba(94,42,18,.45);
    display:grid;
    gap:2px
}
.lang-menu a {
    display:block;
    padding:8px 14px;
    border-radius:12px;
    color:var(--text);
    font-weight:600;
    text-decoration:none
}
.lang-menu a:hover,.lang-menu a[aria-current="true"] {
    background:var(--key);
    color:#2e4a8a
}

/* ---------- Accueil ---------- */
.hero {
    display:grid;
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    align-items:center;
    gap:56px;
    padding-block:40px 90px
}
.hero-copy {
    position:relative;
    padding:44px 44px 40px;
    border-radius:36px;
    background:linear-gradient(180deg, #fffdf8, var(--panel));
    border:2px solid var(--row-line);
    box-shadow:0 6px 0 var(--row-shadow), 0 26px 50px -24px rgba(122,60,30,.4)
}
.hero-copy::after {
    /* petit visage kawaii en haut de la plaque */
    content:"";
    position:absolute;
    right:34px;
    top:-18px;
    width:70px;
    height:36px;
    border-radius:18px;
    background:
        radial-gradient(circle at 24px 15px, #4a1f1f 4px, transparent 4.5px),
        radial-gradient(circle at 46px 15px, #4a1f1f 4px, transparent 4.5px),
        radial-gradient(ellipse 7px 4px at 15px 23px, rgba(242,141,178,.8) 99%, transparent),
        radial-gradient(ellipse 7px 4px at 55px 23px, rgba(242,141,178,.8) 99%, transparent),
        var(--rose);
    border:2px solid #f0b9c0;
    box-shadow:0 4px 0 #ebb0b8
}
.hero h1 {
    font-size:clamp(40px, 4.8vw, 70px);
    margin-block:10px 20px
}
.hero h1 em {
    font-style:normal;
    color:var(--blue);
    position:relative;
    white-space:nowrap
}
.hero h1 em::after {
    content:"";
    position:absolute;
    left:2%;
    right:2%;
    bottom:.02em;
    height:.18em;
    border-radius:99px;
    background:rgba(242,141,178,.45);
    z-index:-1
}
.intro {
    font-size:19px;
    color:var(--ink);
    max-width:34em
}
.hero-actions {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:16px 22px;
    margin-top:30px
}
.hero-actions .note {
    font-size:22px;
    color:var(--muted);
    transform:rotate(-3deg)
}
.hero-art {
    position:relative;
    margin:0
}
.frame-tilt {
    transform:rotate(1.6deg) translateY(var(--y, 0px))
}
.float {
    position:absolute;
    pointer-events:none;
    transform:translateY(var(--y, 0px))
}
.heart {
    width:34px;
    height:34px
}
.heart::before {
    content:"♥";
    display:block;
    font-size:inherit;
    color:var(--blue);
    text-shadow:0 3px 0 var(--blue-lo);
    animation:bob 4s ease-in-out infinite
}
.heart.h1 {
    left:-28px;
    top:-14px;
    font-size:46px
}
.heart.h2 {
    right:12%;
    bottom:-44px;
    font-size:34px
}
.heart.h2::before {
    animation-delay:-1.3s
}
.heart.h3 {
    right:-18px;
    top:18%;
    font-size:26px
}
.heart.h3::before {
    animation-delay:-2.4s;
    color:var(--pink);
    text-shadow:0 3px 0 #d9658f
}
/* Petite plante en pot rose, posée au coin du cadre comme dans les menus */
.plant {
    left:-34px;
    bottom:-30px;
    width:64px;
    height:84px
}
.plant::before {
    content:"";
    position:absolute;
    left:12px;
    bottom:0;
    width:40px;
    height:36px;
    border-radius:6px 6px 14px 14px;
    background:linear-gradient(180deg, #f6a9bf, #e57f9f);
    box-shadow:inset 0 4px 0 #fbc6d4, 0 4px 0 #c75f80
}
.plant::after {
    content:"";
    position:absolute;
    left:4px;
    bottom:30px;
    width:56px;
    height:50px;
    background:
        radial-gradient(ellipse 13px 22px at 16px 26px, #7fbf86 98%, transparent),
        radial-gradient(ellipse 13px 22px at 40px 26px, #6aad74 98%, transparent),
        radial-gradient(ellipse 12px 20px at 28px 18px, #8fd096 98%, transparent);
    transform-origin:50% 100%;
    animation:sway 5s ease-in-out infinite
}
@keyframes bob {
    50% { transform:translateY(-8px) rotate(-6deg) }
}
@keyframes sway {
    50% { transform:rotate(5deg) }
}

/* ---------- Ruban ---------- */
.ribbon {
    overflow:hidden;
    padding-block:18px;
    background:
        repeating-linear-gradient(96deg, transparent 0 22px, rgba(140,70,28,.13) 22px 24px, transparent 24px 41px),
        linear-gradient(180deg, var(--wood-hi), var(--wood) 60%, var(--wood-mid));
    box-shadow:inset 0 3px 0 rgba(255,226,190,.7), inset 0 -4px 0 var(--wood-lo);
    transform:rotate(-1.2deg);
    margin-inline:-20px
}
.ribbon-track {
    display:flex;
    align-items:center;
    gap:34px;
    width:max-content;
    white-space:nowrap;
    color:var(--panel);
    font-weight:700;
    font-size:26px;
    text-shadow:0 2px 0 var(--wood-lo);
    transform:translateX(calc(var(--rx, 0) * -1px))
}
.ribbon-track b {
    color:#fff;
    font-size:22px
}

/* ---------- Chapitres épinglés ---------- */
.chapter,.duo,.decor,.outside {
    padding-block:120px 40px
}
.chapter-head,.section-head {
    text-align:center;
    margin-bottom:40px
}
.chapter-head h2,.section-head h2,.travel-copy h2 {
    font-size:clamp(36px, 4.4vw, 60px);
    margin-top:16px
}
.section-head p {
    max-width:40em;
    margin:18px auto 0;
    font-size:19px
}
.chapter-body {
    display:grid;
    grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
    gap:56px;
    align-items:start
}
.chapter-flip .chapter-body {
    grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)
}
.chapter-flip .steps {
    order:2
}
.step {
    min-height:78vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:14px
}
.step > .key {
    align-self:flex-start
}
.step h3 {
    font-size:clamp(28px, 2.8vw, 38px)
}
.step p {
    font-size:19px;
    max-width:26em
}
.step-shot {
    display:none
}
.js .step {
    opacity:.28;
    transform:translateX(-14px);
    transition:opacity .5s var(--ease-soft), transform .6s var(--ease-soft)
}
.js .chapter-flip .step {
    transform:translateX(14px)
}
.js .step.is-active {
    opacity:1;
    transform:none
}
.stage {
    position:sticky;
    top:max(100px, calc(50vh - 15vw));
    margin-block:9vh
}
.stage-frame {
    --pad:14px;
    --r:36px;
    aspect-ratio:1600/1024;
    transform:rotate(-1deg)
}
.chapter-flip .stage-frame {
    transform:rotate(1deg)
}
.stage-img {
    position:absolute;
    inset:var(--pad);
    width:calc(100% - 2 * var(--pad)) !important;
    height:calc(100% - 2 * var(--pad));
    object-fit:cover;
    opacity:0;
    transform:scale(1.06);
    transition:opacity .7s var(--ease-soft), transform 1.2s var(--ease-soft)
}
.stage-img.is-active,html:not(.js) .stage-img:first-child {
    opacity:1;
    transform:none
}
.stage-dots {
    position:absolute;
    left:50%;
    bottom:-22px;
    transform:translateX(-50%);
    display:flex;
    gap:8px;
    padding:8px 12px;
    border-radius:999px;
    background:var(--panel);
    border:2px solid var(--row-line);
    box-shadow:0 3px 0 var(--row-shadow)
}
.stage-dots i {
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--row-line);
    transition:background .3s, transform .3s var(--ease-pop)
}
.stage-dots i.is-active {
    background:var(--blue);
    transform:scale(1.35)
}

/* ---------- Barista et compagnons ---------- */
.duo-cards {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    align-items:center;
    max-width:1240px;
    margin-inline:auto
}
.duo-card {
    margin:0
}
/* Les menus du jeu ont déjà leur cadre en bois : pas de second cadre, une ombre douce suffit */
.duo-card img {
    width:100%;
    border-radius:34px;
    box-shadow:0 26px 50px -20px rgba(122,60,30,.45)
}
.duo-card.left {
    z-index:1;
    transform:translateX(calc((1 - var(--p, 1)) * -18vw + 3%)) rotate(calc(-2.5deg - (1 - var(--p, 1)) * 6deg))
}
.duo-card.right {
    transform:translateX(calc((1 - var(--p, 1)) * 18vw - 3%)) translateY(40px) rotate(calc(2.5deg + (1 - var(--p, 1)) * 6deg))
}
.pets {
    list-style:none;
    margin:90px auto 0;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px;
    max-width:980px
}
.pets li {
    display:grid;
    justify-items:center;
    width:96px;
    padding:8px 6px 10px;
    border-radius:20px;
    background:var(--row);
    border:2px solid var(--row-line);
    box-shadow:0 4px 0 var(--row-shadow);
    color:var(--text);
    font-weight:600;
    font-size:14px;
    text-align:center;
    line-height:1.2
}
.pets img {
    width:72px;
    border-radius:14px;
    mix-blend-mode:multiply
}
.js .pets li {
    opacity:0;
    transform:translateY(24px) scale(.6);
    transition:opacity .4s, transform .6s var(--ease-pop);
    transition-delay:calc(var(--i, 0) * 70ms)
}
.js .pets.is-in li {
    opacity:1;
    transform:none
}
.pets li:hover img {
    animation:hop .5s var(--ease-pop)
}
@keyframes hop {
    40% { transform:translateY(-10px) rotate(-6deg) }
}

/* ---------- Aménagement ---------- */
.decor-stack {
    position:relative;
    padding-bottom:12%
}
.decor-back {
    --pad:14px;
    --r:36px;
    width:78%;
    transform:rotate(-1.4deg) scale(calc(.94 + var(--p, 1) * .06))
}
.decor-front {
    --pad:10px;
    --r:28px;
    position:absolute;
    right:0;
    bottom:0;
    width:44%;
    opacity:calc(.2 + var(--p, 1) * .8);
    transform:translateY(calc((1 - var(--p, 1)) * 220px)) rotate(calc(2.5deg + (1 - var(--p, 1)) * 8deg))
}

/* ---------- Dehors ---------- */
.outside {
    position:relative
}
.outside-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:start;
    gap:40px
}
.outside-grid .frame:nth-child(2) {
    margin-top:70px
}
.frame figcaption {
    position:absolute;
    left:50%;
    bottom:-20px;
    transform:translateX(-50%);
    padding:7px 20px;
    border-radius:999px;
    background:var(--panel);
    border:2px solid var(--row-line);
    box-shadow:0 3px 0 var(--row-shadow);
    color:var(--text);
    font-weight:600;
    white-space:nowrap
}
.js .wipe img {
    clip-path:inset(0 100% 0 0 round 20px);
    transition:clip-path 1.2s var(--ease-soft) .15s
}
.js .wipe.is-in img {
    clip-path:inset(0 0 0 0 round 20px)
}
/* Abeille qui traverse la section au fil du défilement */
.bee {
    position:absolute;
    top:160px;
    left:0;
    width:30px;
    height:22px;
    pointer-events:none;
    transform:translateX(calc(var(--p, 0) * 86vw)) translateY(calc(sin(var(--p, 0) * 12rad) * 40px))
}
.bee::before {
    content:"";
    position:absolute;
    inset:4px 0 0;
    border-radius:50%;
    background:repeating-linear-gradient(90deg, #f6c94c 0 6px, #5a3a1f 6px 9px);
    box-shadow:inset -3px -2px 0 rgba(0,0,0,.12)
}
.bee::after {
    content:"";
    position:absolute;
    left:7px;
    top:-6px;
    width:14px;
    height:12px;
    border-radius:50% 50% 40% 40%;
    background:rgba(214,228,252,.9);
    border:1px solid var(--key-line);
    animation:buzz .12s linear infinite alternate
}
@keyframes buzz {
    to { transform:scaleY(.6) }
}
.travel {
    display:grid;
    grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
    gap:60px;
    align-items:center;
    margin-top:150px
}
.travel-shot {
    --pad:14px;
    --r:36px;
    transform:rotate(-1.5deg)
}
.travel-copy p {
    font-size:19px;
    margin-top:18px
}

/* ---------- Contact ---------- */
.contact {
    padding-block:130px 70px
}
.contact-frame {
    --pad:18px;
    --r:44px
}
.contact-plaque {
    display:flex;
    align-items:center;
    gap:30px;
    padding:38px 44px;
    border-radius:30px;
    background:linear-gradient(180deg, #fffdf8, var(--panel));
    border:3px solid #fff
}
.contact-plaque > div {
    flex:1
}
.contact h2 {
    font-size:clamp(30px, 3.4vw, 44px);
    margin-block:4px 10px
}
.mug {
    position:relative;
    flex-shrink:0;
    width:84px;
    height:84px;
    border-radius:16px 16px 26px 26px;
    background:linear-gradient(180deg, #fff, #f6ece4);
    border:3px solid #f0dccd;
    box-shadow:0 5px 0 #e5cdbb;
    animation:beat 1.6s ease-in-out infinite
}
.mug::after {
    content:"";
    position:absolute;
    right:-22px;
    top:18px;
    width:22px;
    height:34px;
    border:6px solid #f0dccd;
    border-left:0;
    border-radius:0 18px 18px 0
}
.mug i,.cup-face {
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 34% 50%, #4a1f1f 4px, transparent 4.5px),
        radial-gradient(circle at 66% 50%, #4a1f1f 4px, transparent 4.5px),
        radial-gradient(ellipse 8px 4px at 22% 64%, rgba(242,141,178,.85) 99%, transparent),
        radial-gradient(ellipse 8px 4px at 78% 64%, rgba(242,141,178,.85) 99%, transparent)
}
@keyframes beat {
    0%,100% { transform:scale(1) }
    15% { transform:scale(1.08) rotate(-3deg) }
    30% { transform:scale(1) }
}

/* ---------- Tasse qui se remplit au fil de la page ---------- */
.cup-progress {
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:15;
    opacity:0;
    transform:translateY(20px);
    transition:opacity .4s, transform .4s var(--ease-pop)
}
.cup-progress.is-on {
    opacity:1;
    transform:none
}
.cup {
    position:relative;
    display:block;
    width:52px;
    height:50px;
    border-radius:10px 10px 18px 18px;
    background:#fff;
    border:3px solid #f0dccd;
    box-shadow:0 4px 0 #e5cdbb, 0 10px 20px -8px rgba(94,42,18,.4);
    overflow:hidden
}
.cup-progress::after {
    content:"";
    position:absolute;
    right:-12px;
    top:12px;
    width:14px;
    height:22px;
    border:5px solid #f0dccd;
    border-left:0;
    border-radius:0 12px 12px 0
}
.cup-fill {
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:100%;
    background:linear-gradient(180deg, #e9c9a6 0 6px, #a86a43 6px);
    transform-origin:50% 100%;
    transform:scaleY(var(--page, 0))
}

/* ---------- Pied de page ---------- */
.footer {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding-block:34px 44px;
    border-top:2px dashed var(--row-line);
    font-size:14px;
    color:var(--muted)
}
.footer p:first-child {
    color:var(--title);
    font-weight:600
}
.footer p span {
    font-weight:400;
    color:var(--muted)
}
.footer nav {
    display:flex;
    gap:22px
}
.footer-note {
    font-family:var(--hand);
    font-size:20px
}

/* ---------- Apparitions ---------- */
.js [data-reveal] {
    opacity:0;
    transform:translateY(34px) scale(.98);
    transition:opacity .8s var(--ease-soft), transform .9s var(--ease-pop)
}
.js [data-reveal].is-in {
    opacity:1;
    transform:none
}
.js .hero-art[data-reveal] {
    transform:translateY(40px) rotate(3deg)
}
.js .hero-art[data-reveal].is-in {
    transform:none
}
.js .travel-shot[data-reveal].is-in {
    transform:rotate(-1.5deg)
}

/* ---------- Confidentialité ---------- */
.legal {
    max-width:900px;
    margin:20px auto 80px;
    padding:50px 56px 60px;
    border-radius:36px;
    background:linear-gradient(180deg, #fffdf8, var(--panel));
    border:2px solid var(--row-line);
    box-shadow:0 6px 0 var(--row-shadow), 0 26px 50px -24px rgba(122,60,30,.35)
}
.legal .eyebrow {
    font-size:22px
}
.legal h1 {
    font-size:48px;
    margin-block:6px 10px
}
.legal .lead {
    font-size:19px;
    color:var(--muted);
    margin-top:14px
}
.legal h2 {
    font-size:27px;
    margin-top:40px;
    margin-bottom:12px
}
.legal p,.legal li {
    font-size:16px;
    margin-bottom:12px
}
.legal .date {
    font-size:13px;
    color:var(--muted)
}
.legal a {
    color:#3f66c9
}
.legal ul {
    padding-left:22px
}
.legal table {
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    font-size:14px;
    margin-block:25px;
    border:2px solid var(--row-line);
    border-radius:18px;
    overflow:hidden
}
.legal th,.legal td {
    text-align:left;
    vertical-align:top;
    padding:14px;
    border-bottom:1px solid var(--row-line)
}
.legal tr:last-child td {
    border-bottom:0
}
.legal th {
    background:var(--panel-lo);
    color:var(--title)
}
.legal .email {
    display:inline-block;
    font-weight:700;
    margin-bottom:12px
}
.legal-note {
    display:none;
    margin-top:16px;
    padding:10px 16px;
    border-radius:14px;
    background:var(--key);
    color:#2e4a8a;
    font-weight:600
}
.legal-note.is-on {
    display:block
}

/* ---------- Écrans moyens ---------- */
@media(max-width:1060px) {
    .wrap {
        padding-inline:28px
    }
    .hero {
        gap:40px
    }
    .hero-copy {
        padding:36px 32px 32px
    }
    .chapter-body {
        gap:36px
    }
}

/* ---------- Mobile : pas d'épinglage, image au-dessus du texte ---------- */
@media(max-width:760px) {
    body {
        font-size:16px
    }
    .wrap {
        padding-inline:18px
    }
    .header {
        padding-block:10px
    }
    .wordmark {
        width:104px
    }
    .header.is-scrolled .wordmark {
        width:80px
    }
    .nav .pill:not(summary) {
        display:none
    }
    .hero {
        grid-template-columns:1fr;
        padding-block:20px 70px;
        gap:46px
    }
    .hero-copy {
        padding:32px 22px 26px;
        text-align:center
    }
    .hero-actions {
        justify-content:center
    }
    .intro,.step p,.section-head p,.travel-copy p {
        font-size:17px
    }
    .heart.h1 {
        left:-6px
    }
    .heart.h3 {
        right:-4px
    }
    .plant {
        left:-6px
    }
    .ribbon-track {
        font-size:20px
    }
    .chapter,.duo,.decor,.outside {
        padding-block:80px 20px
    }
    .chapter-body,.chapter-flip .chapter-body {
        grid-template-columns:1fr
    }
    .stage {
        display:none
    }
    .step {
        min-height:0;
        margin-bottom:56px
    }
    .js .step,.js .chapter-flip .step {
        opacity:1;
        transform:none
    }
    .step-shot {
        display:block;
        --pad:8px;
        --r:24px;
        margin-top:10px;
        order:-1
    }
    .duo-cards {
        grid-template-columns:1fr;
        gap:28px
    }
    .duo-card.left,.duo-card.right {
        transform:rotate(calc((1 - var(--p, 1)) * -4deg))
    }
    .pets {
        margin-top:50px;
        gap:10px
    }
    .pets li {
        width:84px;
        font-size:13px
    }
    .decor-stack {
        padding-bottom:18%
    }
    .decor-back {
        width:92%
    }
    .decor-front {
        width:56%
    }
    .outside-grid {
        grid-template-columns:1fr;
        gap:48px
    }
    .outside-grid .frame:nth-child(2) {
        margin-top:0
    }
    .travel {
        grid-template-columns:1fr;
        gap:36px;
        margin-top:100px
    }
    .contact {
        padding-block:90px 50px
    }
    .contact-plaque {
        flex-direction:column;
        text-align:center;
        padding:30px 20px
    }
    .contact .btn {
        font-size:15px;
        padding-inline:20px
    }
    .footer {
        flex-direction:column;
        text-align:center
    }
    .cup-progress {
        right:12px;
        bottom:12px;
        scale:.72;
        transform-origin:100% 100%
    }
    .legal {
        padding:30px 22px 40px;
        margin-inline:12px
    }
    .legal h1 {
        font-size:36px
    }
    .legal table {
        font-size:12px
    }
    .legal th,.legal td {
        padding:9px
    }
}

/* ---------- Mouvement réduit : tout visible, rien ne bouge ---------- */
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    *,*::before,*::after {
        animation:none !important;
        transition:none !important
    }
    .js [data-reveal],.js .step,.js .pets li,.js .hero-art[data-reveal] {
        opacity:1;
        transform:none
    }
    .js .wipe img {
        clip-path:none
    }
    .stage,.bee,.float {
        display:none
    }
    .step {
        min-height:0;
        margin-bottom:56px
    }
    .step-shot {
        display:block;
        --pad:10px;
        --r:26px;
        max-width:720px
    }
    .chapter-body,.chapter-flip .chapter-body {
        grid-template-columns:1fr
    }
    .duo-card.left,.duo-card.right,.decor-back,.decor-front,.frame-tilt,.ribbon-track {
        transform:none;
        opacity:1
    }
}

/* Le temps d'appliquer la langue choisie (i18n.js), pour éviter un éclair en français */
.i18n-wait body {
    opacity:0
}