/* ---------- motif cœurs (bordeaux + rose clair) ---------- */
:root{
  --hearts:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='%23F4C7D3'%3E%3Cpath opacity='.16' transform='translate(14 18) rotate(-14 12 12)' d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 4.5 6.9 4.5c2.1 0 3.6 1.2 5.1 3 1.5-1.8 3-3 5.1-3 3.9 0 6 3.9 4.5 7.3C19.5 16.4 12 21 12 21z'/%3E%3Cpath opacity='.10' transform='translate(96 12) scale(.6) rotate(12 12 12)' d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 4.5 6.9 4.5c2.1 0 3.6 1.2 5.1 3 1.5-1.8 3-3 5.1-3 3.9 0 6 3.9 4.5 7.3C19.5 16.4 12 21 12 21z'/%3E%3Cpath opacity='.13' transform='translate(118 92) scale(.85) rotate(-8 12 12)' d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 4.5 6.9 4.5c2.1 0 3.6 1.2 5.1 3 1.5-1.8 3-3 5.1-3 3.9 0 6 3.9 4.5 7.3C19.5 16.4 12 21 12 21z'/%3E%3Cpath opacity='.09' transform='translate(46 104) scale(.5) rotate(20 12 12)' d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 4.5 6.9 4.5c2.1 0 3.6 1.2 5.1 3 1.5-1.8 3-3 5.1-3 3.9 0 6 3.9 4.5 7.3C19.5 16.4 12 21 12 21z'/%3E%3Cpath opacity='.12' transform='translate(64 58) scale(.4)' d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 4.5 6.9 4.5c2.1 0 3.6 1.2 5.1 3 1.5-1.8 3-3 5.1-3 3.9 0 6 3.9 4.5 7.3C19.5 16.4 12 21 12 21z'/%3E%3C/g%3E%3C/svg%3E");
  --bx:#8C2F4B; --bx-d:#6E2139; --bx-dd:#4E1528;
}
.hearts{background-color:var(--bx);background-image:var(--hearts),radial-gradient(ellipse at 50% 0%,#A43E5E 0%,transparent 70%);background-size:160px 160px,100% 100%}
.dark{color:#FBEFF2}
.dark .muted{color:#F1CFD9}
.center{text-align:center}
.kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--bx);margin:0 0 10px;text-align:center}
.sub{margin:-10px auto 34px;max-width:56ch}
.script{font-family:var(--display);font-style:italic;font-weight:700}

/* bandeau + en-tête */
.announce{background:var(--bx-dd);color:#FBE3EA;font-size:13px;text-align:center;padding:8px 12px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap;align-items:center}
.announce span:first-child{color:#F7B7C9;font-weight:700}
.announce i{width:1px;height:12px;background:rgba(255,255,255,.3)}
.head{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--papier) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--ligne)}
.head-in{max-width:1120px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:24px}
.brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--display);font-weight:700;font-size:22px;color:var(--encre)}
.brand em{font-style:italic;color:var(--bx)}
.brand-ico{color:var(--bx)}
.brand.light{color:#fff}.brand.light em{color:#F7B7C9}
.menu{display:flex;gap:22px;margin-left:auto;font-size:15px}
.menu a{text-decoration:none;color:var(--gris)}
.menu a:hover{color:var(--bx)}
.head .btn.small{border-radius:999px}
@media (max-width:760px){.menu{display:none}.head .btn.small{margin-left:auto}}

/* hero */
.hero2{background:radial-gradient(ellipse at 50% 20%,#FBE5EB 0%,var(--papier) 60%);padding-block:28px 56px}
.hero-in{max-width:760px;margin:0 auto;padding-inline:20px;text-align:center;display:grid;justify-items:center;gap:18px}
.pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--ligne);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:500;margin:0;box-shadow:0 4px 14px -8px rgba(140,47,75,.4)}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--bx)}
.hero-media{position:relative;width:min(560px,100%);aspect-ratio:16/10;border-radius:24px;overflow:hidden;box-shadow:0 30px 60px -25px rgba(78,21,40,.55);background:#E9D7DC}
.hero-media video{width:100%;height:100%;object-fit:cover;display:block}
.listen{position:absolute;right:14px;bottom:14px;display:flex;align-items:center;gap:10px;border:0;border-radius:999px;background:#fff;padding:9px 10px 9px 16px;font:600 14px var(--body);color:var(--encre);cursor:pointer;box-shadow:0 8px 20px -8px rgba(0,0,0,.35)}
.lp{width:26px;height:26px;border-radius:50%;background:var(--bx);color:#fff;display:grid;place-items:center}
.listen.on .lp{background:var(--or);color:var(--nuit)}
.hero2 h1{font-size:clamp(36px,5.8vw,60px);max-width:17ch}
.hero2 h1 em{color:var(--bx)}
.hero2 .lead{margin:0 auto;max-width:54ch;font-size:18px}
.btn.cta{display:inline-flex;align-items:center;gap:10px;padding:17px 30px;border-radius:14px;background:linear-gradient(180deg,#A23A5A,var(--bx));box-shadow:0 14px 30px -12px rgba(140,47,75,.6);font-size:17px}
.btn.cta.wide{width:100%;justify-content:center}
.ticks{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;padding:0;margin:0;font-size:14px;color:var(--gris)}
.ticks li::before{content:"✓";color:#3F7A55;font-weight:700;margin-right:6px}
.rating{display:flex;align-items:center;gap:12px;font-size:14px}
.avs{display:flex}.avs span{width:34px;height:34px;border-radius:50%;border:2px solid #fff;margin-left:-8px;background:var(--rose);display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--bx);overflow:hidden}
.avs span:first-child{margin-left:0}.avs img{width:100%;height:100%;object-fit:cover}
.stars{color:#E0A526;letter-spacing:2px}

/* presse */
.press{display:flex;justify-content:center;align-items:center;gap:26px;flex-wrap:wrap;padding:18px 20px;border-block:1px solid var(--ligne);background:#fff}
.press span{font-family:var(--display);font-style:italic;color:var(--gris)}
.press #pressLogos{display:flex;gap:26px;align-items:center;flex-wrap:wrap;justify-content:center}
.press img{height:22px;filter:grayscale(1);opacity:.75}

/* comment ça marche */
.hearts.dark{padding-block:64px}
.hearts h2{color:#fff}
.how3{list-style:none;padding:0;margin:30px 0 34px;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media (max-width:760px){.how3{grid-template-columns:1fr}}
.how3 .n{display:grid;place-items:center;width:40px;height:40px;margin:0 auto 12px;border-radius:50%;border:1.5px solid #F7B7C9;color:#F7B7C9;font-family:var(--display);font-weight:700}
.how3 b{display:block;font-size:18px;margin-bottom:6px;color:#fff}
.how3 p{margin:0;color:#F1CFD9;font-size:15px;max-width:30ch;margin-inline:auto}
.btn.light{background:#fff;color:var(--bx);border-radius:14px}
.btn.light:hover{background:#FBE5EB}

/* comparer */
.compare{padding-block:64px}
.cmp{display:grid;grid-template-columns:repeat(3,minmax(0,170px));justify-content:center;gap:14px;margin-top:26px}
.c{position:relative;display:grid;justify-items:center;gap:6px;background:#fff;border:1px solid var(--ligne);border-radius:18px;padding:26px 12px}
.c .ci{color:var(--gris)}
.c b{font-size:15px}.c small{color:var(--gris)}
.c.best{background-color:var(--bx);background-image:var(--hearts);background-size:120px 120px;border-color:var(--bx);color:#fff;transform:translateY(-6px);box-shadow:0 18px 36px -18px rgba(140,47,75,.7)}
.c.best .ci,.c.best small{color:#F7B7C9}
.flag{position:absolute;top:-11px;background:var(--or);color:var(--nuit);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px;white-space:nowrap}
@media (max-width:520px){.cmp{grid-template-columns:1fr 1fr 1fr;gap:8px}.c{padding:20px 6px}.c b{font-size:13px}}

/* exemples */
.examples{padding-block:30px 70px}
.songs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.songs{grid-template-columns:1fr;max-width:520px;margin:0 auto}}
section[id]{scroll-margin-top:80px}
.song{position:relative;overflow:hidden;border-radius:22px;padding:24px;color:#FBEFF2;background-color:var(--bx);background-image:var(--hearts),linear-gradient(160deg,#A23A5A,var(--bx) 55%,var(--bx-d));background-size:160px 160px,100% 100%;box-shadow:0 20px 40px -24px rgba(78,21,40,.8);display:grid;gap:14px}
.song .tag{justify-self:start;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:700;letter-spacing:.04em}
.song h3{font-family:var(--display);font-style:italic;font-size:28px;margin:0;color:#fff}
.song .meta{font-size:14px;color:#F1CFD9;margin:-8px 0 0}
.song blockquote{margin:0;padding-left:14px;border-left:2px solid #F7B7C9;font-family:var(--display);font-style:italic;font-size:16px;line-height:1.5;color:#FBE3EA}
.pl{display:flex;align-items:center;gap:12px}
.pl button{flex:none;width:48px;height:48px;border-radius:50%;border:0;background:#fff;color:var(--bx);display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 16px -6px rgba(0,0,0,.4)}
.pl .bar{flex:1;height:5px;border-radius:9px;background:rgba(255,255,255,.22);overflow:hidden}
.pl .fill{height:100%;width:0;background:#F7B7C9}
.pl .time{color:#F1CFD9;width:38px;font-size:13px}

/* avis */
.reviews{padding-block:64px;background:#fff;border-block:1px solid var(--ligne)}
.rv-head{display:flex;justify-content:center;align-items:center;gap:10px;margin:-6px 0 28px;font-size:15px}
.tp{display:inline-flex;gap:2px}.tp i{width:20px;height:20px;background:#00B67A;display:grid;place-items:center;color:#fff;font-style:normal;font-size:13px}
.rv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (max-width:640px){.rv-grid{grid-template-columns:1fr}}
.rv{border:1px solid var(--ligne);border-radius:18px;padding:18px;display:grid;gap:10px;background:var(--papier)}
.rv.draft{border:2px dashed #E0A526;background:#FFFBF0}
.rv .occ{justify-self:start;background:var(--rose2);color:var(--bx);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700}
.rv p{margin:0;font-size:15px}
.rv .who{display:flex;align-items:center;gap:10px;font-size:14px}
.rv .av{width:36px;height:36px;border-radius:50%;background:var(--rose);display:grid;place-items:center;font-weight:700;color:var(--bx);overflow:hidden}
.rv .av img{width:100%;height:100%;object-fit:cover}
.rv .ver{display:block;color:#3F7A55;font-size:12px}

/* occasions */
.occ-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.tile{position:relative;display:block;border-radius:18px;overflow:hidden;aspect-ratio:3/4;background:var(--bx-d);text-decoration:none}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.23,1,.32,1)}
.tile:hover img{transform:scale(1.05)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(40,10,20,.75))}
.tile span{position:absolute;left:14px;bottom:12px;z-index:1;color:#fff;font-weight:700;font-size:16px;display:flex;align-items:center;gap:6px}
.tile span::before{content:"♥";color:#F7B7C9}
@media (max-width:640px){.occ-grid{grid-template-columns:1fr 1fr}}

/* ce que vous recevez */
.receive{padding-block:70px}
.rc{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center;max-width:920px;margin:0 auto}
.vinyl-big{aspect-ratio:1;max-width:340px;width:100%;margin:0 auto;border-radius:50%;background:repeating-radial-gradient(circle,#1b1622 0 2px,#221b2b 2px 4px);display:grid;place-items:center;box-shadow:0 30px 60px -20px rgba(0,0,0,.5);animation:spin 9s linear infinite;animation-play-state:paused}
.vinyl-big.on{animation-play-state:running}
.vinyl-big .label{width:36%;aspect-ratio:1;border-radius:50%;background-color:var(--bx);background-image:var(--hearts);background-size:60px 60px;display:grid;place-items:center;text-align:center;color:#fff;font-family:var(--display);font-style:italic;font-size:13px;line-height:1.2}
@keyframes spin{to{transform:rotate(360deg)}}
.rc-side{display:grid;gap:14px}
.now{background:#fff;border:1px solid var(--ligne);border-radius:18px;padding:16px}
.now .pl button{background:var(--bx);color:#fff}
.now .pl .bar{background:var(--ligne)}.now .pl .fill{background:var(--bx)}.now .pl .time{color:var(--gris)}
.now h4{margin:0 0 2px;font-family:var(--display);font-style:italic;font-size:19px}
.now small{color:var(--gris)}
.feat3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.feat3 div{background:#fff;border:1px solid var(--ligne);border-radius:16px;padding:14px 10px;display:grid;justify-items:center;text-align:center;gap:4px}
.feat3 .fi{width:38px;height:38px;border-radius:50%;background:var(--rose2);color:var(--bx);display:grid;place-items:center}
.feat3 b{font-size:14px}.feat3 small{color:var(--gris);font-size:12px}
@media (max-width:760px){.rc{grid-template-columns:1fr}.feat3{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.vinyl-big{animation:none}}

/* faq */
.faq2{padding-block:30px 60px}
.faq-list{max-width:720px;margin:24px auto 0;display:grid;gap:10px}
.faq-list details{background:#fff;border:1px solid var(--ligne);border-radius:14px;padding:16px 18px}
.faq-list summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq-list summary::after{content:"+";color:var(--bx);font-size:20px;line-height:1}
.faq-list details[open] summary::after{content:"–"}
.faq-list p{margin:10px 0 0;color:var(--gris)}

/* final + footer */
.final{text-align:center;padding-block:40px 80px;display:grid;justify-items:center;gap:12px}
.final .gift{color:var(--bx)}
.final h2{margin:0}
.final p{margin:0 0 8px;max-width:52ch}
.foot2{padding-block:48px 24px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.foot2 a{display:block;color:#FBE3EA;text-decoration:none;font-size:14px;margin:6px 0}
.foot2 .brand{display:inline-flex;margin:0}
.fdesc{color:#F1CFD9;font-size:14px;max-width:30ch}
.fh{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#F7B7C9;font-weight:700;margin:0 0 8px}
.fbot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;border-top:1px solid rgba(255,255,255,.18);margin-top:30px;padding-top:18px;font-size:12px;color:#F1CFD9}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.vinyl-big{max-width:230px}}