/* Maryane · coming soon — maryane.co */

@font-face{font-family:"Baloo 2";src:url("../fonts/baloo2-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../fonts/montserrat-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../fonts/montserrat-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Kaushan Script";src:url("../fonts/kaushan-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --bleu:#0B2E8A;
  --bleu-900:#071E5E;
  --creme:#FFF5E6;
  --creme-200:#F9E8CF;
  --soleil:#FFC938;
  --framboise:#D72652;
  --chocolat:#5A2E1F;
  --bordeaux:#7B1424;
  --f-display:"Baloo 2","Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;
  --f-body:"Montserrat","Segoe UI",system-ui,sans-serif;
  --f-script:"Kaushan Script","Brush Script MT",cursive;
  /* Layout : écran d'accueil bleu plein cadre, cookies flottants en périphérie, contenu centré ; puis bandes crème → bleu → framboise */
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--creme);color:var(--chocolat);font-family:var(--f-body);font-weight:500;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{text-wrap:balance}
:focus-visible{outline:3px solid var(--soleil);outline-offset:4px;border-radius:8px}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(1160px,100% - 40px);margin-inline:auto}

.eyebrow{display:inline-flex;align-items:center;gap:14px;margin:0;font-size:12.5px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--soleil)}
.eyebrow::before,.eyebrow::after{content:"";width:34px;height:2px;border-radius:2px;background:currentColor;opacity:.7}
.eyebrow-dark{color:var(--bordeaux)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 26px;border-radius:999px;font-family:var(--f-display);font-weight:800;font-size:18px;letter-spacing:.01em;text-decoration:none;position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,background-color .2s}
.btn svg{width:22px;height:22px;flex:none}
.btn-ig{background:var(--soleil);color:var(--bleu-900);box-shadow:0 6px 0 #D9A21A}
.btn-ig::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);transition:left .6s ease}
.btn-ig:hover{transform:translateY(-2px);box-shadow:0 8px 0 #D9A21A}
.btn-ig:hover::after{left:120%}
.btn-ig:active{transform:translateY(3px);box-shadow:0 3px 0 #D9A21A}
.btn-tt{color:var(--creme);box-shadow:inset 0 0 0 2px rgba(255,245,230,.85)}
.btn-tt:hover{background:rgba(255,245,230,.12);transform:translateY(-2px)}
.ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}

/* ================= HERO ================= */
.hero{position:relative;isolation:isolate;min-height:clamp(660px,100svh,1040px);display:grid;place-items:center;padding:clamp(70px,9vh,110px) 20px clamp(190px,22vh,240px);overflow:hidden;color:var(--creme);background:radial-gradient(1100px 680px at 50% 40%,#1C46B0 0%,var(--bleu) 55%,#092674 100%)}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.sun{position:absolute;top:-130px;right:-110px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle at 38% 38%,#FFE39A 0,var(--soleil) 58%);box-shadow:0 0 0 46px rgba(255,201,56,.12),0 0 0 100px rgba(255,201,56,.05);animation:sun-breathe 9s ease-in-out infinite}
@keyframes sun-breathe{50%{box-shadow:0 0 0 58px rgba(255,201,56,.1),0 0 0 120px rgba(255,201,56,.04)}}
.flower{position:absolute;color:var(--framboise)}
.f1{top:11%;left:23%;width:58px;animation:spin 36s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sprinkle{position:absolute;width:30px;height:11px;border-radius:6px;animation:twinkle 5s ease-in-out infinite}
.s1{top:22%;left:41%;background:var(--creme);transform:rotate(28deg)}
.s2{top:30%;right:27%;background:var(--framboise);transform:rotate(-32deg);animation-delay:-1.4s}
.s3{top:64%;left:24%;background:var(--soleil);transform:rotate(64deg);animation-delay:-2.6s}
.s4{top:70%;right:30%;background:var(--creme);transform:rotate(-20deg);animation-delay:-3.3s}
.s5{top:8%;left:62%;background:var(--soleil);transform:rotate(12deg);animation-delay:-.7s;width:22px;height:9px}
@keyframes twinkle{50%{opacity:.35}}

.floaters{position:absolute;inset:0;z-index:0;pointer-events:none}
.floater{position:absolute;transform:translate3d(calc(var(--mx,0) * var(--depth,0) * 1px),calc(var(--my,0) * var(--depth,0) * 1px),0);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.floater img{width:100%;filter:drop-shadow(0 22px 22px rgba(3,14,55,.45));animation:appear 1.1s cubic-bezier(.2,.8,.2,1) both,bob var(--dur,7s) ease-in-out var(--delay,0s) infinite alternate}
@keyframes appear{from{opacity:0;scale:.82}}
@keyframes bob{from{translate:0 -10px;rotate:var(--r1,-4deg)}to{translate:0 12px;rotate:var(--r2,3deg)}}
.fl1{top:12%;left:4%;width:clamp(120px,14vw,230px)}
.fl1 img{--dur:7.2s;--r1:-14deg;--r2:-8deg}
.fl2{top:17%;right:6%;width:clamp(110px,13vw,210px)}
.fl2 img{--dur:8.1s;--delay:-2s;--r1:8deg;--r2:14deg;animation-delay:.15s,-2s}
.fl3{top:46%;left:-2%;width:clamp(130px,15vw,250px)}
.fl3 img{--dur:6.6s;--r1:6deg;--r2:12deg;animation-delay:.3s,-1s}
.fl4{top:45%;right:-1%;width:clamp(110px,12vw,200px)}
.fl4 img{--dur:7.7s;--r1:-10deg;--r2:-3deg;animation-delay:.45s,-3s}
.fl5{bottom:15%;left:12%;width:clamp(120px,13vw,220px)}
.fl5 img{--dur:8.6s;--r1:-6deg;--r2:2deg;animation-delay:.6s,-1.6s}
.fl6{bottom:12%;right:10%;width:clamp(140px,16vw,260px)}
.fl6 img{--dur:7s;--r1:4deg;--r2:-4deg;animation-delay:.75s,-4s}
.fl7{top:5%;left:33%;width:clamp(70px,7vw,112px)}
.fl7 img{--dur:6.2s;--r1:18deg;--r2:26deg;animation-delay:.9s,-2.4s}

.hero-content{position:relative;z-index:2;max-width:780px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.logo{display:flex;flex-direction:column;align-items:center;line-height:1;margin-bottom:6px;animation:rise .9s .1s cubic-bezier(.2,.8,.2,1) both}
.logo-bow{width:clamp(78px,9vw,116px);height:auto;color:var(--creme);margin:0 0 -6px clamp(14px,1.8vw,22px);filter:drop-shadow(0 5px 0 rgba(3,16,60,.45));transform-origin:50% 40%;animation:wiggle 6s ease-in-out 2s infinite}
@keyframes wiggle{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(-7deg)}94%{transform:rotate(5deg)}97%{transform:rotate(-2deg)}}
.logo-word{display:flex;font-family:var(--f-display);font-weight:800;font-size:clamp(62px,9vw,118px);line-height:.85;letter-spacing:-.01em;text-shadow:0 6px 0 rgba(3,16,60,.45)}
.logo-word span{display:inline-block}
.logo-word span:nth-child(1){transform:rotate(-5deg)}
.logo-word span:nth-child(2){transform:rotate(3deg) translateY(.035em)}
.logo-word span:nth-child(3){transform:rotate(-3deg)}
.logo-word span:nth-child(4){transform:rotate(5deg) translateY(.035em)}
.logo-word span:nth-child(5){transform:rotate(-3deg)}
.logo-word span:nth-child(6){transform:rotate(3deg) translateY(.02em)}
.logo-word span:nth-child(7){transform:rotate(-5deg)}
.hero .eyebrow{animation:rise .9s .25s cubic-bezier(.2,.8,.2,1) both}
.hero h1{position:relative;margin:4px 0 0;font-family:var(--f-display);font-weight:800;font-size:clamp(2.3rem,5.6vw,4.4rem);line-height:1;letter-spacing:-.005em;text-shadow:0 5px 0 rgba(3,16,60,.4);animation:rise .9s .35s cubic-bezier(.2,.8,.2,1) both}
.hero h1 .sweet{color:var(--soleil);position:relative;display:inline-block}
.hero h1 .sweet::after{content:"";position:absolute;left:4%;right:2%;bottom:.02em;height:.1em;border-radius:1em;background:var(--framboise);transform-origin:left;animation:underline 1s 1.2s cubic-bezier(.2,.8,.2,1) both;z-index:-1}
@keyframes underline{from{transform:scaleX(0)}}
.dots i{font-style:normal;display:inline-block;animation:dot 1.6s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.2s}
.dots i:nth-child(3){animation-delay:.4s}
@keyframes dot{0%,60%,100%{opacity:1;transform:none}30%{opacity:.25;transform:translateY(-.08em)}}
.hero .rays{position:absolute;left:-.62em;top:-.42em;width:.62em;height:.62em;color:var(--soleil);animation:pulse 3.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.55;transform:scale(.9)}}
.lead{max-width:52ch;margin:0;font-size:clamp(16px,1.5vw,18.5px);color:#E8ECF8;animation:rise .9s .45s cubic-bezier(.2,.8,.2,1) both}
.teaser{margin:2px 0 8px;display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;padding:8px 18px;border-radius:999px;background:rgba(255,255,255,.1);font-size:14.5px;font-weight:700;color:var(--creme);animation:rise .9s .55s cubic-bezier(.2,.8,.2,1) both}
.teaser-slot{position:relative;display:inline-block;color:var(--soleil);text-align:left}
.teaser-word{position:absolute;left:0;top:0;opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease;white-space:nowrap;pointer-events:none}
.teaser-word.is-on{position:relative;opacity:1;transform:none}
.hero .ctas{animation:rise .9s .65s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}

.scroll-hint{margin-top:14px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:rgba(255,245,230,.85);animation:rise .9s .8s cubic-bezier(.2,.8,.2,1) both}
.scroll-hint svg{width:24px;height:24px;animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(6px)}}
.waves{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(80px,11vw,160px);z-index:1}
.w-framboise{fill:var(--framboise)}
.w-creme{fill:var(--creme)}

/* ================= CONCEPT ================= */
.concept{padding:30px 0 96px}
.concept-head{max-width:720px;margin:0 auto 44px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.concept-head h2{margin:0;font-family:var(--f-display);font-weight:800;font-size:clamp(2rem,4.4vw,3.2rem);line-height:1;color:var(--bleu)}
.concept-head h2 .heart{display:inline-block;width:.62em;height:.68em;margin-left:.18em;vertical-align:-.04em;color:var(--framboise)}
.concept-head p{margin:0;font-size:17px;max-width:56ch}
.formats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.format{display:flex;flex-direction:column;background:#FFFBF4;border-radius:30px;overflow:hidden;box-shadow:0 1px 0 rgba(90,46,31,.06),0 26px 44px -32px rgba(90,46,31,.5);transition:transform .25s ease}
.format:hover{transform:translateY(-4px)}
.format-visual{height:260px;display:grid;place-items:center;overflow:hidden}
.v-gift{background:var(--creme-200)}
.v-clear{background:var(--framboise)}
.v-sachet{background:var(--bleu)}
.format-body{padding:22px 24px 26px}
.kicker{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--bordeaux)}
.format h3{margin:0 0 6px;font-family:var(--f-display);font-weight:800;font-size:27px;line-height:1.05;color:var(--bleu)}
.format-body p:last-child{margin:0;font-size:15px}

/* coffret (vue de dessus) */
.gift{position:relative;width:250px;padding:16px 0 0 16px;--ribbon:var(--bleu)}
.gift-box{position:relative;background:#F2DDBD;border-radius:18px;padding:12px 12px 40px;box-shadow:0 30px 40px -24px rgba(90,46,31,.55),inset 0 0 0 5px #FBEEDA,inset 0 -34px 0 #EBD1AA}
.gift-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;background:#FFF8EC;border-radius:10px;padding:10px;box-shadow:inset 0 4px 10px rgba(90,46,31,.18)}
.slot{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#FBEFDC 0 56%,#F0DCBE 57% 100%);box-shadow:inset 0 3px 6px rgba(90,46,31,.18)}
.slot img{width:112%;max-width:none;filter:drop-shadow(0 5px 5px rgba(90,46,31,.35))}
.gift-print{position:absolute;left:34px;right:0;bottom:7px;text-align:center;font-family:var(--f-display);font-weight:800;font-size:20px;line-height:1;color:var(--chocolat)}
.gift .bow{position:absolute;left:-12px;top:-10px;width:96px;color:var(--ribbon);z-index:3;filter:drop-shadow(0 5px 5px rgba(0,0,0,.2));transform:rotate(-28deg)}
.gift-ribbon-v{position:absolute;left:28px;top:16px;bottom:0;width:17px;background:var(--ribbon);background-image:linear-gradient(90deg,rgba(255,255,255,.28),transparent 40%,rgba(0,0,0,.18));z-index:2}
.gift-ribbon-h{position:absolute;top:28px;left:16px;right:0;height:17px;background:var(--ribbon);background-image:linear-gradient(180deg,rgba(255,255,255,.28),transparent 40%,rgba(0,0,0,.18));z-index:2}

/* box transparente */
.clear{--s:11px;--ribbon:#F4E4C8;font-size:var(--s);position:relative;width:15em;padding-top:2.6em;transform:translateX(-1.2em)}
.clear-lid{position:relative;z-index:3;height:2.2em;margin:0 -.4em;border-radius:.45em .45em .2em .2em;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.18));box-shadow:inset 0 0 0 .12em rgba(255,255,255,.9),0 .3em .6em rgba(0,0,0,.12)}
.clear-band{position:absolute;left:0;right:0;top:50%;height:1em;transform:translateY(-50%);background:var(--ribbon);background-image:linear-gradient(180deg,rgba(255,255,255,.35),transparent 45%,rgba(0,0,0,.16))}
.clear-body{position:relative;height:15.5em;border-radius:0 0 .5em .5em;background:linear-gradient(115deg,rgba(255,255,255,.34),rgba(255,255,255,.06) 42%,rgba(255,255,255,.2));box-shadow:inset 0 0 0 .12em rgba(255,255,255,.85),inset 0 0 2.4em rgba(255,255,255,.22),0 2em 2.4em -1.4em rgba(40,0,15,.55)}
.clear-body img{position:absolute;left:50%;width:88%;transform:translateX(-50%);filter:drop-shadow(0 .5em .5em rgba(60,10,20,.35))}
.clear-body .c-bottom{bottom:.5em}
.clear-body .c-top{bottom:6.7em;width:84%;transform:translateX(-50%) rotate(-3deg)}
.clear-glare{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(105deg,transparent 18%,rgba(255,255,255,.42) 22%,transparent 30%,transparent 70%,rgba(255,255,255,.18) 74%,transparent 78%)}
.clear .bow{position:absolute;z-index:4;left:50%;top:.35em;width:6.4em;transform:translateX(-50%);color:var(--ribbon);filter:drop-shadow(0 .25em .3em rgba(0,0,0,.25))}
.clear-tag{position:absolute;z-index:5;right:-4.4em;top:4.4em;width:8em;padding:.7em .5em .6em;background:#FFFCF5;border-radius:.4em;text-align:center;transform:rotate(9deg);box-shadow:0 .6em 1em -.4em rgba(0,0,0,.4);color:var(--bleu)}
.tag-names{display:block;font-family:var(--f-script);font-size:1.3em;line-height:1.1;margin-top:.2em}
.tag-date{display:block;font-size:.58em;font-weight:700;letter-spacing:.14em;color:var(--chocolat);margin-top:.25em}
.tag-heart{display:block;width:1.1em;height:1.2em;margin:.2em auto 0;color:var(--framboise)}

/* sachet */
.sachet{--s:12px;font-size:var(--s);position:relative;width:12.5em;height:17.5em}
.sachet-cookie{position:absolute;left:50%;bottom:2.6em;width:10.6em;transform:translateX(-50%) rotate(-4deg);filter:drop-shadow(0 .4em .5em rgba(0,0,0,.3))}
.sachet-bag{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sachet-sticker{position:absolute;left:50%;top:3.1em;transform:translateX(-50%) rotate(-6deg);width:5.6em;height:5.6em;border-radius:50%;background:var(--soleil);color:var(--bleu-900);display:grid;place-items:center;text-align:center;padding:.6em;font-family:var(--f-display);font-weight:800;font-size:1em;line-height:1;text-transform:uppercase;box-shadow:0 .3em .6em rgba(0,0,0,.25),inset 0 0 0 .22em rgba(255,255,255,.55)}
.sachet-brand{position:absolute;left:0;right:0;bottom:1.15em;text-align:center;font-family:var(--f-display);font-weight:800;font-size:.95em;color:var(--creme)}

/* ================= SAVEURS ================= */
.flavors{background:var(--bleu);color:var(--creme);padding:70px 0 76px;overflow:hidden}
.flavors-head{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;margin-bottom:34px}
.flavors-head h2{margin:0;font-family:var(--f-display);font-weight:800;font-size:clamp(1.9rem,4vw,2.9rem);line-height:1}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;align-items:center;gap:clamp(24px,4vw,56px);width:max-content;margin:0;padding:10px 0;list-style:none;animation:marquee 50s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track li{flex:none;display:grid;place-items:center;width:clamp(120px,13vw,170px);height:clamp(96px,10vw,130px)}
.marquee-track li img{max-width:100%;max-height:100%;width:auto;filter:drop-shadow(0 14px 14px rgba(3,14,55,.4));transition:transform .3s ease}
.marquee-track li:nth-child(odd) img{transform:rotate(-6deg)}
.marquee-track li:nth-child(even) img{transform:rotate(5deg)}
.marquee-track li:hover img{transform:rotate(0) scale(1.08)}
@keyframes marquee{to{transform:translateX(calc(-50% - clamp(24px,4vw,56px) / 2))}}

/* ================= OUTRO ================= */
.outro{background:var(--framboise);color:var(--creme);padding:80px 0 86px;text-align:center}
.outro-inner{display:flex;flex-direction:column;align-items:center;gap:14px}
.outro-bow{width:84px;height:auto;color:var(--creme)}
.outro h2{margin:0;font-family:var(--f-display);font-weight:800;font-size:clamp(2rem,4.6vw,3.3rem);line-height:1}
.outro p{margin:0 0 10px;max-width:46ch;font-size:17px;color:#FFEFF2}

.foot{background:var(--bleu-900);color:#AAB4D6;font-size:13.5px;padding:22px 0}
.foot-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px}
.foot-logo{font-family:var(--f-display);font-weight:800;font-size:24px;color:var(--creme)}

/* ================= 404 ================= */
.notfound{min-height:100svh;display:grid;place-items:center;text-align:center;padding:40px 20px;color:var(--creme);background:radial-gradient(900px 600px at 50% 40%,#1C46B0 0%,var(--bleu) 60%,#092674 100%)}
.notfound-inner{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:560px}
.notfound .crumb{width:180px;animation:bob 7s ease-in-out infinite alternate;filter:drop-shadow(0 18px 18px rgba(3,14,55,.45))}
.notfound h1{margin:0;font-family:var(--f-display);font-weight:800;font-size:clamp(2rem,6vw,3.2rem);line-height:1}
.notfound p{margin:0 0 8px;color:#E8ECF8}

/* ================= RESPONSIVE ================= */
@media (max-width:1000px){
  .formats{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
  .fl3,.fl4{top:52%}
  .fl7{display:none}
}
@media (max-width:720px){
  .hero{padding:56px 20px 200px;align-items:start}
  .hero-content{gap:14px;padding-top:44px}
  .fl1{top:1%;left:-7%;width:118px}
  .fl2{top:2%;right:-8%;width:112px}
  .fl3,.fl4{display:none}
  .fl5{bottom:9%;left:-9%;width:112px}
  .fl6{bottom:8%;right:-9%;width:122px}
  .f1{top:132px;left:12px;width:30px}
  .sun{width:240px;height:240px;top:-120px;right:-120px}
  .s1,.s3,.s4{display:none}
  .teaser{border-radius:22px}
  .teaser{flex-direction:column;gap:2px}
  .teaser-slot{text-align:center}
  .teaser-word{white-space:normal;width:100%}
  .hero .rays{left:-.3em;top:-.7em}
  .btn{font-size:17px;padding:12px 22px}
  .ctas{width:100%}
  .hero .ctas .btn-ig{flex:1 1 100%}
  .hero .ctas .btn-tt{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .marquee-track{flex-wrap:wrap;justify-content:center;width:auto;padding-inline:20px}
  .marquee-track li[aria-hidden="true"]{display:none}
  .marquee{-webkit-mask-image:none;mask-image:none}
}