/* ============================================================
   MEKAITE · couche « magie enfantine »
   Chargée en dernier : harmonise typographie, tailles, espacements
   et donne au site un style rond, joyeux et vivant.
   ============================================================ */
@font-face{font-family:'Fredoka';font-weight:300 500;font-display:swap;src:url(fonts/fredoka-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Fredoka';font-weight:600;font-display:swap;src:url(fonts/fredoka-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Fredoka';font-weight:700 900;font-display:swap;src:url(fonts/fredoka-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-weight:300 450;font-display:swap;src:url(fonts/nunito-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-weight:451 600;font-display:swap;src:url(fonts/nunito-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-weight:601 700;font-display:swap;src:url(fonts/nunito-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Nunito';font-weight:701 900;font-display:swap;src:url(fonts/nunito-latin-800-normal.woff2) format('woff2')}
:root{
  --ink:#2a1f4a;--purple:#7844df;--purple-deep:#5a2fb8;--muted:#6e6585;--cream:#fffaf2;
  --gold:#ffbc45;--gold-deep:#e59a12;--pink:#ff7eb6;--mint:#3ccfa4;--sky:#59b8ff;--red:#ef4a6a;
  --title:'Fredoka','Baloo 2',ui-rounded,'Trebuchet MS',sans-serif;
  --body:'Nunito',ui-rounded,'Trebuchet MS',Arial,sans-serif;
  --pop:0 6px 0 #00000014;
}
html{font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{font-family:var(--body);font-size:16px;color:var(--ink);background:var(--cream)}
button,input,select,textarea{font-family:var(--body)}
h1,h2,h3,.logo,.btn,.price-new,.offer-price b,.pick-name,.countdown-big b,.review-who b,.game-tabs button,.play-hud h3,.win-card h3,summary,.promo-bar b,.gc-body h2{font-family:var(--title);letter-spacing:-.3px}
h1{font-weight:700;letter-spacing:-1px}
h2{font-weight:700;font-size:clamp(32px,4vw,48px);letter-spacing:-.6px;line-height:1.12}
h3{font-weight:600}
p{line-height:1.7}

/* --- petits titres de section : pastilles colorées et lisibles --- */
.eyebrow{display:inline-block;font-family:var(--title);font-weight:600;font-size:13px;letter-spacing:.6px;color:var(--purple-deep);background:#efe5ff;padding:7px 14px;border-radius:30px;transform:rotate(-1.5deg)}
.hero .eyebrow{background:#fff3cf;color:#8a5b00}

/* --- mots en couleur soulignés « au crayon » --- */
h2 em,h1>span{position:relative;color:var(--purple);white-space:nowrap}
h2 em:after{content:'';position:absolute;left:0;right:0;bottom:-.12em;height:.32em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14 C 40 4, 80 4, 120 11 S 180 16, 197 7' fill='none' stroke='%23ffbc45' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;z-index:-1}
h1>span:after{border-top-width:6px;border-color:var(--gold)}

/* --- boutons ronds, épais, qui rebondissent --- */
.btn{font-weight:600;font-size:16px;padding:18px 28px;border-radius:60px;transition:transform .18s cubic-bezier(.3,1.6,.5,1),box-shadow .18s}
.btn.primary{background:linear-gradient(180deg,#8b5cf0,#7040dc);box-shadow:0 6px 0 #4f25a6,0 14px 28px #7844df40}
.btn.primary:hover{transform:translateY(-3px) scale(1.03)}
.btn.primary:active{transform:translateY(4px);box-shadow:0 2px 0 #4f25a6}
.btn.secondary{background:#fff;border:2px solid #e2d4f6;box-shadow:0 5px 0 #e2d4f6}
.btn.secondary:hover{transform:translateY(-2px) rotate(-1deg)}
.btn.big{font-size:18px;padding:22px 34px}
.btn.small{font-size:14px;padding:13px 20px}
.btn.primary.big{animation:wiggle 5s ease-in-out infinite}
@keyframes wiggle{0%,86%,100%{transform:none}89%{transform:rotate(-2deg) scale(1.03)}92%{transform:rotate(2deg) scale(1.03)}95%{transform:rotate(-1deg)}}

/* --- en-tête --- */
header{height:86px}
.logo{font-weight:700;letter-spacing:-1.5px}
.logo>b{display:inline-block;animation:spin-star 6s ease-in-out infinite}
@keyframes spin-star{0%,100%{transform:rotate(8deg)}50%{transform:rotate(-14deg) scale(1.1)}}
nav{font-family:var(--title);font-weight:500;font-size:15px;gap:26px}
nav a{padding:6px 10px;border-radius:20px;transition:.15s}
nav a:hover{background:#efe5ff;color:var(--purple)}

/* --- bandeau promo --- */
.promo-bar{font-size:14px;padding:9px 16px}
.promo-bar b{font-weight:600}

/* --- accueil --- */
.hero{padding-top:44px}
h1{font-size:clamp(46px,5.4vw,80px);line-height:1.04;margin:20px 0 26px}
.intro{font-size:21px;line-height:1.5}
.hero .muted{font-size:16px}
.hero .notes{font-size:13px;color:#5d5072}
.hero .notes span{background:#ffffffc7;border-radius:20px;padding:6px 11px}
.hero .notes .xmas-note{background:#ffe4ea}
.price-new{font-weight:700;font-size:46px}
.price-badge{font-family:var(--title);font-weight:600;font-size:13px;letter-spacing:.5px;padding:8px 14px;box-shadow:0 4px 0 #b8304c}
.hero-review{font-size:14px;padding:9px 16px}
.hero-ground{font-family:var(--title);font-weight:600}
.hero-bottom{font-size:13px}
.hero-bottom a{font-family:var(--title);font-size:15px}
.photo-card,.mission,.age{box-shadow:6px 8px 0 #2a1f4a14,0 14px 30px #4f366d1f}
.photo-card small{font-size:9px}.photo-card p{font-size:11px}
.mission p{font-size:11px}.mission b{font-size:13px;font-family:var(--title)}
.age{font-family:var(--title)}
.art-label{font-family:var(--title);font-size:15px}

/* --- étoiles et nuages qui flottent --- */
.section,.world-section,.playground-section,.offers-section,.reviews-section{position:relative}
.floaty{position:absolute;pointer-events:none;z-index:0;animation:floaty 7s ease-in-out infinite;opacity:.9}
@keyframes floaty{50%{transform:translateY(-14px) rotate(8deg)}}

/* --- ruban --- */
.ribbon{font-family:var(--title);font-size:14px;font-weight:600;letter-spacing:.3px;padding:18px 10px;background:linear-gradient(90deg,#ffd6ea,#e6d6ff,#cdf3e6)}

/* --- sections : espacements réguliers --- */
.section{padding:96px 40px}
.title p,.row p{font-size:17px;color:var(--muted)}
.title h2{margin:16px 0 14px}
.caption{font-size:14px;color:#7a6f8e}

/* --- vagues entre les sections colorées --- */
.world-section,.playground-section{--wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V30c120-28 240-28 360 0s240 28 360 0 240-28 360 0 240 28 360 0v30z' fill='black'/%3E%3C/svg%3E")}
.world-section:before,.playground-section:before{content:'';position:absolute;left:0;right:0;top:-38px;height:40px;background:inherit;-webkit-mask:var(--wave) center/100% 100% no-repeat;mask:var(--wave) center/100% 100% no-repeat;pointer-events:none}
.world-section{background:linear-gradient(#efe4fc,#f5ecff);padding-top:90px;padding-bottom:90px}
.playground-section{background:#fff4dc;padding-top:90px}

/* --- 3 cartes concept : autocollants --- */
.features{gap:26px}
.features article{border:3px solid #fff;border-radius:30px;box-shadow:8px 10px 0 #2a1f4a12;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.features article:nth-child(1){transform:rotate(-1.2deg)}
.features article:nth-child(2){transform:rotate(1deg) translateY(10px)}
.features article:nth-child(3){transform:rotate(-.6deg)}
.features article:hover{transform:rotate(0) translateY(-6px) scale(1.02)}
.features h3{font-size:26px;line-height:1.15}
.features p{font-size:15px}
.icon{font-size:30px!important;width:62px;height:62px;display:grid!important;place-items:center;background:#fff;border-radius:20px;box-shadow:0 5px 0 #00000012;transform:rotate(-6deg)}
.butter .icon{transform:rotate(5deg)}
.mini-choice{font-family:var(--title);font-size:14px;padding:13px 15px;border-radius:14px;box-shadow:0 3px 0 #e9d9b3}
.tags span{font-family:var(--title);font-size:13px;background:#fff;border:2px solid #b9e6cf;color:#2f7a5b}

/* --- univers --- */
.title.row{align-items:center}
.title.row p{max-width:360px;margin:0}
.world{border-radius:28px;border:4px solid #fff;box-shadow:8px 10px 0 #6a3d8714,0 16px 34px #6a3d871f;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.world:nth-child(1){transform:rotate(-1deg)}.world:nth-child(3){transform:rotate(1deg)}
.world:hover{transform:translateY(-8px) rotate(0) scale(1.02)}
.world-info small{font-family:var(--title);font-size:12px;letter-spacing:.5px;color:var(--purple)}
.world-info strong{font-family:var(--title);font-size:21px;font-weight:600}
.world-info>span{font-size:14px}
.scene-play{font-family:var(--title);font-size:13px;padding:10px 14px}

/* --- mini-jeux --- */
.game-tabs button{font-weight:600;font-size:15px;padding:13px 22px;border-width:2px;box-shadow:0 4px 0 #e5d6f5}
.game-tabs button.active{box-shadow:0 4px 0 #4f25a6}
.playground{border-radius:34px;border:6px solid #fff;box-shadow:10px 12px 0 #2a1f4a14,0 20px 44px #64427d2b}
.play-hud small{font-size:11px}.play-hud h3{font-size:22px}
.mini-bottom p{font-size:14px}.mini-bottom button{font-size:13px;font-family:var(--title)}

/* --- étapes : grosses bulles numérotées --- */
.steps{gap:30px;margin-top:46px}
.steps article{background:#fff;border-radius:28px;padding:30px 26px 26px;border:3px solid #f1e8fb;box-shadow:6px 8px 0 #2a1f4a0d;text-align:center}
.steps article:nth-child(2){transform:translateY(14px)}
.steps article>span{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;font-family:var(--title);font-weight:700;font-size:28px;color:#fff;letter-spacing:0;background:var(--purple);box-shadow:0 5px 0 #4f25a6;margin-bottom:6px}
.steps article:nth-child(2)>span{background:var(--pink);box-shadow:0 5px 0 #c94c86}
.steps article:nth-child(3)>span{background:var(--mint);box-shadow:0 5px 0 #219174}
.steps article:not(:last-child):after{content:'➜';right:-26px;top:44%;font-size:30px;color:#d7c4f0}
.steps h3{font-size:22px;margin:12px 0 8px}
.steps p{font-size:15px}
.promise{border-radius:30px;border:3px dashed #e4d2fa}
.promise h3{font-size:26px}
.promise p{font-size:16px}

/* --- démo --- */
.demo-section{border-radius:40px;padding-top:72px;padding-bottom:72px;overflow:visible}
.demo-section h2{font-size:clamp(38px,4.4vw,54px)}
.demo-section p{font-size:16px}
.demo-section small{font-size:13px}
.phone{transform:rotate(6deg);margin:10px 10px 10px 0}
.phone-story h3{font-family:var(--title)}

/* --- avis --- */
.review-card{border-radius:28px;border:3px solid #f1e8fb;box-shadow:6px 8px 0 #2a1f4a0f}
.reviews .review-card:nth-child(1){transform:rotate(-1deg)}.reviews .review-card:nth-child(3){transform:rotate(1deg)}
.review-card blockquote{font-size:16px}
.review-who b{font-weight:600;font-size:16px}

/* --- offres --- */
.offers-section{padding-top:80px}
.cd-label{font-family:var(--title);font-size:17px}
.countdown-big span{border-radius:20px;border:3px solid #efe3fb;box-shadow:0 5px 0 #efe3fb;font-size:11px}
.countdown-big b{font-family:var(--title);font-size:32px}
.offer{border-radius:30px;border:3px solid #f1e8fb;box-shadow:6px 8px 0 #2a1f4a0d}
.offer.featured{border:4px solid var(--purple);box-shadow:8px 10px 0 #7844df33,0 24px 50px #7844df2e}
.offer h3{font-size:24px}
.offer-badge{font-family:var(--title);font-size:14px;padding:9px 18px;box-shadow:0 4px 0 #b8304c}
.offer-stories span{font-size:13px}
.offer-each{font-size:13px}
.offer li{font-size:15px}
.gift-banner{border-radius:28px;border:3px dashed #f3c97a}
.gift-banner b{font-family:var(--title);font-weight:600;font-size:22px}
.gift-banner span{font-size:15px}
.reassure{font-size:14px;gap:12px}
.reassure span{background:#fff;border:2px solid #f1e8fb;padding:9px 14px;border-radius:30px}

/* --- FAQ : bulles --- */
.faq{max-width:900px}
.faq details{background:#fff;border:2px solid #f1e8fb;border-radius:22px;padding:18px 24px;margin-bottom:12px;box-shadow:0 4px 0 #f1e8fb}
.faq details[open]{border-color:#dcc8f7;box-shadow:0 4px 0 #dcc8f7}
summary{font-weight:600;font-size:17px;align-items:center}
summary:after{display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;border-radius:50%;background:#efe5ff;color:var(--purple);font-size:22px;font-weight:600}
details p{font-size:15px;margin:12px 0 0}

/* --- dernier appel : carte lisible --- */
.final-cta{padding:90px 20px}
.final-cta>*{position:relative}
.final-cta:after{content:'';position:absolute;inset:50px 50%;transform:translateX(-50%);width:min(760px,calc(100% - 32px));background:#fffaf2e8;border-radius:40px;box-shadow:0 20px 50px #2a1f4a22;z-index:0}
.final-cta{position:relative}
.final-cta>span,.final-cta .eyebrow,.final-cta h2,.final-cta .price-tag,.final-cta .btn,.final-cta p{position:relative;z-index:1}
.final-cta h2{font-size:clamp(34px,4vw,50px)}
.final-cta p{font-size:14px;color:#5d5072}

/* --- pied de page --- */
footer{font-size:13px;flex-wrap:wrap}
footer .text-btn,footer a.text-btn{font-size:13px}
footer>span{font-size:13px}

/* --- fenêtres (commande, démo) --- */
dialog{border-radius:32px}
dialog h2{font-family:var(--title);font-size:32px}
label{font-family:var(--title);font-weight:500;font-size:15px}
label small{font-family:var(--body)}
input,select,textarea{border-radius:14px!important;border-width:2px!important;font-size:16px}
.pick{border-radius:18px!important;border-width:3px!important}
.pick-name{font-weight:600;font-size:16px}
.pick-sub{font-size:13px}
.pick-price b{font-family:var(--title)}
.idea{font-size:13px;padding:7px 12px;font-family:var(--title)}
.world-hint,.xmas-line{font-size:13px!important}
.pay-trust{font-size:13px}.pay-quote{font-size:13px!important}.fine{font-size:12px!important}
.gift-toggle button{font-family:var(--title);font-weight:600;font-size:15px}
.choice{font-family:var(--title);font-weight:500;font-size:16px;border-radius:16px;border-width:2px;box-shadow:0 4px 0 #ece1f8}
.choice:hover{transform:translateY(-2px)}
.chapter{font-family:var(--title);font-size:12px}
.game-badge{font-family:var(--title);font-size:11px}
.hero-name label{font-size:14px}

/* --- barre d'achat mobile --- */
.sticky-cta{border-radius:24px;border:3px solid #ede1fb}
.sticky-cta b{font-family:var(--title);font-weight:600;font-size:17px}
.sticky-cta small{font-size:12px}

/* ================= tablette ================= */
@media(max-width:1000px){
  .steps article:nth-child(2){transform:none}
  .features article:nth-child(2){transform:rotate(1deg)}
}

/* ================= mobile ================= */
@media(max-width:700px){
  body{font-size:16px}
  .section{padding:64px 20px}
  h2{font-size:32px}
  /* bandeau promo : une seule ligne */
  .promo-bar{flex-wrap:nowrap;justify-content:space-between;gap:8px;padding:8px 10px;font-size:12px}
  .promo-bar>span:first-of-type{display:none}
  .promo-timer{font-size:12px;padding:5px 10px;white-space:nowrap}
  #countdown-label{display:none}
  .promo-timer:before{content:'🎄 Noël : '}
  .promo-gift-btn{display:none}
  .promo-cta{font-size:12px;padding:8px 12px;white-space:nowrap}
  header{height:72px}
  .eyebrow{font-size:12px}
  h1{font-size:46px;letter-spacing:-.8px}
  .intro{font-size:19px}
  .hero .muted{font-size:15px}
  .hero .notes{font-size:12px;gap:6px}
  .price-new{font-size:40px}
  .hero-bottom{display:none}
  .hero-art{margin-bottom:10px}
  .hero-ground{bottom:0}
  .ribbon{font-size:12px;padding:14px 8px}
  .photo-card p{font-size:9px}.mission b{font-size:11px}
  .features article,.features article:nth-child(n){transform:none}
  .features h3{font-size:24px}
  .world:nth-child(n),.reviews .review-card:nth-child(n){transform:none}
  .title.row p{max-width:none;margin-top:10px}
  .world-section:before,.playground-section:before{top:-22px;height:24px}
  .game-tabs button{font-size:13px;padding:10px 14px}
  .play-hud h3{font-size:16px}.play-hud small{font-size:9px}
  .mini-bottom p{font-size:12px}
  .steps article{text-align:left;padding:24px 22px 22px 98px}
  .steps article>span{position:absolute;left:20px;top:22px;width:58px;height:58px;font-size:24px}
  .steps h3{margin-top:0}
  .demo-section{padding:52px 22px 60px;border-radius:30px}
  .demo-section h2{font-size:38px}
  .phone{margin:0 auto}
  .final-cta{padding:60px 14px}
  .final-cta:after{inset:30px 50%}
  .final-cta h2{font-size:32px}
  footer{justify-content:center;text-align:center;gap:14px 20px}
  footer .logo{width:100%;text-align:center}
  summary{font-size:16px}
  .faq details{padding:16px 18px}
  .reassure span{font-size:13px}
  dialog h2{font-size:28px}
}
@media(prefers-reduced-motion:reduce){.btn.primary.big,.logo>b,.floaty{animation:none!important}}

/* --- correctifs après relecture visuelle --- */
.demo-section .eyebrow,.final-cta .eyebrow{font-size:13px;line-height:1.3;margin-top:0}
.final-cta>span{display:block;margin:0 auto 6px}
.world-section .eyebrow,.playground-section .eyebrow,.demo-section .eyebrow{background:#fff}
.hero-bottom{display:none}
.hero{padding-bottom:20px}
.faq{padding-bottom:70px}
.offers-section{padding-bottom:70px}
@media(max-width:700px){
  .promo-bar>span[data-alt]{display:none}
  .ribbon span:not(:first-child){display:none}
  .ribbon{justify-content:center}
  .floaty{display:none}
  .demo-section p br,.title p br{display:none}
  .cd-label{font-size:15px}
}
@media(max-width:700px){.hero .btn{font-size:16px;padding:17px 20px}.hero .btn.big{font-size:17px}}
.order-card .eyebrow{display:table;margin:12px 0 0}
.order-card.gift-mode .eyebrow,.order-card:has(.state-icon) .eyebrow{margin:12px auto 0}
.order-card{border-radius:34px;border:3px solid #f1e8fb}
.order-card h1{font-family:var(--title);font-weight:700}
.block h2{font-family:var(--title);font-weight:600}
/* « L'aventure commence ici » : pastille lisible au lieu d'un texte sur le feuillage */
.art-label{top:6px;right:12%;background:#fffdf8f0;color:var(--purple-deep);font-weight:600;font-size:15px;padding:8px 16px;border-radius:30px;box-shadow:0 5px 0 #2a1f4a14,0 10px 24px #4f366d22;transform:rotate(4deg);z-index:3}
@media(max-width:700px){.art-label{font-size:12px;padding:6px 12px;right:4%;top:0}}
@media(max-width:700px){h2 em{white-space:normal}}