:root{--cream:#fffaf2;--plum:#650875;--violet:#900fa4;--lavender:#f2dcfa;--gold:#ffd46a;--ink:#520764;--line:#e9e0dc;--teal:#c6e6df;--apricot:#ffe3ce;--page:1440px;--body:"Trebuchet MS","Verdana",sans-serif;--heading:"Fredoka","Trebuchet MS",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:105px}body{margin:0;background:var(--cream);color:var(--ink);font:17px/1.5 var(--body)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:not(.button){border:0}button:focus-visible,a:focus-visible{outline:3px solid #0d8279;outline-offset:5px}img{display:block;max-width:100%;height:auto}h1,h2,h3,p{margin:0}h1,h2,h3,.news-heading{font-family:var(--heading);font-weight:900;letter-spacing:-.04em;line-height:1.12}h2{font-size:clamp(28px,3.5vw,49px)}.wrap{width:min(var(--page),calc(100% - 72px));margin-inline:auto}.section{margin-block:74px}.section-intro{margin-top:10px;font-weight:700}.button{display:inline-flex;justify-content:center;align-items:center;min-height:50px;padding:13px 25px;border-radius:99px;border:2px solid var(--violet);background:var(--violet);color:white;font-size:18px;font-weight:800;line-height:1.2;text-align:center;transition:transform .2s,box-shadow .2s,background .2s}.button:hover{transform:translateY(-2px);box-shadow:0 5px 13px #6a087525;background:#750b87}.button.secondary{background:transparent;color:var(--plum)}.button.secondary:hover{background:#f4e3f6}.button.small{min-height:38px;padding:6px 22px;font-size:16px}.text-link{font-weight:800;text-decoration:underline;text-underline-offset:4px;background:none;padding:0;font-size:17px;text-align:left}.text-link span{margin-left:12px;text-decoration:none;display:inline-block;font-size:27px;vertical-align:-2px}.site-header{display:flex;align-items:center;justify-content:space-between;gap:35px;min-height:102px}.brand{width:250px;flex:none}.site-header nav{display:flex;justify-content:flex-end;align-items:center;gap:clamp(10px,2.2vw,34px);font-size:15px;font-weight:800}.site-header nav a{white-space:nowrap;padding:5px 9px;border-radius:40px}.site-header nav a:hover,.site-header nav a.active{background:#efd1f5}.hero{display:grid;grid-template-columns:33% 67%;align-items:center;position:relative;min-height:700px;padding-block:24px}.hero-copy{position:relative;z-index:1;padding-right:15px}.eyebrow{display:inline-block;background:#efd0f7;border-radius:14px;padding:7px 13px;font-size:15px;font-weight:800;white-space:nowrap;margin-bottom:26px}h1{font-size:clamp(42px,4.75vw,70px);letter-spacing:-.055em}.hero-description{max-width:420px;margin-top:23px;font-size:16px;font-weight:600}.hero-actions{display:flex;align-items:flex-start;flex-direction:column;gap:14px;margin-top:28px}.hero-art{margin-right:-35px;align-self:stretch;display:flex;align-items:center;overflow:hidden;mask-image:linear-gradient(90deg,transparent 0%,black 9%,black 100%)}.hero-art img{width:100%;height:100%;min-height:670px;object-fit:cover;object-position:50% 50%;border-radius:100px 0 0 110px}.coloring-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:28px}.coloring-card{display:grid;grid-template-columns:58% 42%;align-items:center;overflow:hidden;background:#fffefa;border:1px solid var(--line);border-radius:17px;min-height:270px;box-shadow:0 3px 6px #59217112}.coloring-card>img{width:100%;height:270px;object-fit:contain;mix-blend-mode:multiply}.coloring-card>div{padding:15px 14px 15px 0}.badge{display:inline-block;padding:3px 12px;font-size:13px;font-weight:800;background:var(--gold);border-radius:99px}.coloring-card h3{font-size:27px;margin:12px 0 19px}.download{display:inline-flex;align-items:center;background:linear-gradient(110deg,#b567d3,#9b43c4);color:#fff;border-radius:40px;padding:8px 14px;font-size:14px;font-weight:800;white-space:nowrap}.download:hover{background:var(--violet)}.section-tail{display:flex;justify-content:flex-end;margin-top:17px}.birthday-section{display:grid;grid-template-columns:43% 57%;align-items:center;min-height:390px;border-radius:35px;background:linear-gradient(115deg,#f7e4fc,#eecaf8);padding:35px 45px;overflow:visible;isolation:isolate;position:relative}.birthday-copy h2{font-size:clamp(32px,3.7vw,54px)}.birthday-copy p{font-size:18px;margin:23px 0 29px}.birthday-copy .button{font-size:17px}.birthday-art{height:360px;position:relative;margin-left:30px}.characters-section{display:grid;grid-template-columns:minmax(0,36fr) minmax(0,64fr);align-items:center;gap:20px}.characters-copy h2{font-size:clamp(27px,3vw,42px);margin-bottom:20px}.characters-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.character{background:transparent;position:relative;padding:0 0 18px;transition:transform .2s}.character:hover{transform:translateY(-5px)}.portrait {
  display: grid;
  place-items: end center;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  isolation: isolate;
}
.portrait::before {
  content: "";
  position: absolute;
  inset: 17% 0 0;
  background-color: var(--portrait-color);
  border-radius: 50%;
  z-index: -1;
}
.portrait.lilo { --portrait-color: #feebc0; }
.portrait.troy { --portrait-color: #c5e4e1; }
.portrait.faker { --portrait-color: #fcd2b1; }
.portrait img {
  width: 100%;
  height: auto;
  clip-path: inset(0 round 0 0 48% 48% / 0 0 32% 32%);
}
.portrait.faker img { width: 94%; }
.character-label{display:block;position:relative;background:#fff0be;padding:7px 20px;border-radius:16px;margin:-10px auto 0;max-width:125px;font-size:24px;font-weight:900;line-height:1.1}.news-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:27px}.news-card{display:grid;grid-template-columns:61% 39%;padding:0;text-align:left;border:1px solid var(--line)!important;overflow:hidden;border-radius:20px;min-height:235px;background:transparent;transition:box-shadow .2s}.news-card:hover{box-shadow:0 5px 15px #6a087518}.news-image{display:block;min-height:235px;background-image:url('assets/images/hero-village.png');background-repeat:no-repeat}.village-image{background-size:260%;background-position:97% 0}.friends-image{background-size:220%;background-position:96% 60%}.news-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:20px}.news-heading{font-size:26px}.round-arrow{display:grid;place-items:center;background:#edcff6;border-radius:50%;width:42px;height:42px;font-size:28px;margin-top:20px}.contact-section{display:grid;grid-template-columns:1fr 1fr;gap:25px}.newsletter,.contact-box{display:flex;gap:28px;align-items:center;justify-content:center;padding:26px;border-radius:24px;background:#f3dbf7;min-height:140px}.contact-box{background:#fff0e2}.contact-section h2{font-size:clamp(24px,2.75vw,37px);margin-bottom:8px}.contact-section p{font-size:16px;font-weight:700}.contact-icon{font-size:72px;line-height:1;color:#8d35ac;text-shadow:2px 4px 4px #762d7a22}.contact-icon.speech{font-size:48px;line-height:1;letter-spacing:1px;background:#d7b2ee;padding:0 12px 17px;border-radius:50%}.site-footer{border-top:1px solid #a660b3;display:flex;align-items:center;justify-content:space-between;padding:12px 25px 30px;margin-top:-35px}.site-footer img{width:175px}.site-footer nav{display:flex;align-items:center;gap:20px;font-size:13px;font-weight:700}.site-footer button{background:transparent;padding:0}.site-footer nav>*+*{border-left:1px solid #ae6cba;padding-left:20px}dialog{border:1px solid #dac4e0;color:var(--ink);background:var(--cream);border-radius:24px;padding:40px;max-width:800px;width:calc(100% - 36px);max-height:85vh;box-shadow:0 20px 80px #35014044}dialog::backdrop{background:#22002a77;backdrop-filter:blur(4px)}dialog h2{font-size:34px;margin-right:20px;margin-bottom:20px}dialog p{margin:15px 0}dialog li{margin-block:8px}.dialog-close{position:absolute;top:8px;right:14px;background:none;font-size:30px;line-height:1;padding:10px}.dialog-wide{width:100%;max-height:300px;object-fit:cover;border-radius:14px}.pack-dialog-grid{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:15px}.pack-dialog-grid>img{width:100%;height:100%;object-fit:contain}.notice{border-radius:12px;padding:12px;background:var(--lavender);font-weight:700}.sr-only,.skip-link:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.skip-link:focus{position:fixed;top:10px;left:10px;background:white;padding:12px;z-index:20}
@media(min-width:1600px){.hero{min-height:770px}}
@media(max-width:1150px){.wrap{width:calc(100% - 40px)}.brand{width:190px}.site-header{gap:15px}.site-header nav{gap:7px;font-size:12px}.site-header nav a{padding-inline:6px}.hero{min-height:590px}.hero-art img{min-height:570px}.eyebrow{font-size:12px}.hero-description{font-size:14px}.button{font-size:15px}.coloring-card{min-height:220px}.coloring-card>img{height:220px}.download{font-size:11px;padding:7px 9px}.birthday-section{padding:26px}.birthday-copy p{font-size:16px}.birthday-copy .button{font-size:14px}.birthday-art{margin-left:20px}.news-heading{font-size:21px}.news-copy{padding:13px}}
@media(max-width:800px){html{scroll-padding-top:20px}.site-header{flex-direction:column;gap:8px;padding-block:14px}.brand{width:185px}.site-header nav{width:100%;justify-content:flex-start;overflow-x:auto;padding:5px 0 12px;gap:12px;font-size:12px}.hero{grid-template-columns:1fr;min-height:auto;padding-top:15px}.hero-copy{padding:0}.hero h1{font-size:clamp(40px,8vw,62px);max-width:600px}.hero h1 br{display:none}.hero-description{font-size:16px;max-width:600px}.hero-actions{flex-direction:row;flex-wrap:wrap;gap:10px;margin-top:20px}.hero-art{margin:20px -20px 0;mask-image:none}.hero-art img{min-height:0;max-height:450px;object-fit:contain;border-radius:0}.section{margin-block:44px}.coloring-grid{gap:12px}.coloring-card{display:flex;flex-direction:column;min-height:0}.coloring-card>img{height:200px}.coloring-card>div{padding:5px 10px 15px;text-align:center}.coloring-card h3{font-size:23px;margin:8px 0}.birthday-section{grid-template-columns:1fr;gap:15px}.birthday-copy h2{font-size:38px}.birthday-copy h2 br{display:none}.birthday-art{max-width:520px;width:100%;margin:0 auto;height:300px}.characters-section{grid-template-columns:1fr;gap:25px}.characters-copy h2{font-size:32px}.characters-grid{max-width:650px;width:100%;margin:auto}.news-card{grid-template-columns:1fr;min-height:0}.news-image{min-height:180px;background-size:240%}.news-heading{font-size:23px}.news-copy{padding:20px}.contact-section{grid-template-columns:1fr}.contact-section h2{font-size:29px}.contact-section p{font-size:14px}.site-footer{margin-top:0;padding-inline:0}.site-footer img{width:135px}.site-footer nav{gap:10px;font-size:11px}.site-footer nav>*+*{padding-left:10px}.pack-dialog-grid{grid-template-columns:1fr}.pack-dialog-grid>img{max-height:240px}.pack-dialog-grid ul{padding-left:22px}}
@media(max-width:450px){.wrap{width:calc(100% - 32px)}.coloring-grid{gap:7px}.coloring-card>img{height:145px}.download{font-size:10px;padding:8px 6px}.badge{font-size:11px}.coloring-card>div{padding-inline:4px}.characters-grid{gap:8px}.character-label{font-size:20px;max-width:90px;padding:6px 12px}.news-grid{grid-template-columns:1fr;gap:18px}.news-card{grid-template-columns:56% 44%}.news-heading{font-size:21px}.news-image{min-height:180px}.news-copy{padding:12px}.contact-icon{font-size:52px}.newsletter,.contact-box{padding:20px 15px;gap:18px}.site-footer{flex-direction:column;gap:15px}.birthday-copy h2{font-size:34px}.birthday-art{height:255px}.birthday-section{padding:22px}.button{min-height:45px;font-size:14px;padding:11px 18px}.eyebrow{white-space:normal}.section-tail .text-link{font-size:14px}dialog{padding:32px 22px}dialog h2{font-size:28px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* Shared page gutter also sets the full-bleed illustration edge. */
:root { --page-gutter: 36px; }
@media (max-width: 1150px) { :root { --page-gutter: 20px; } }
@media (max-width: 450px) { :root { --page-gutter: 16px; } }
.wrap { width: min(var(--page), calc(100% - 2 * var(--page-gutter))); }
.hero-art { margin-right: calc(-1 * var(--page-gutter)); }

@media (min-width: 801px) {
  .site-header { min-height: clamp(65px, 7.5vw, 92px); gap: 14px; }
  .brand { width: clamp(158px, 18.5vw, 230px); }
  .site-header nav { flex: 1; justify-content: space-between; max-width: 70%; }
  .hero { min-height: 0; padding-block: 0; }
  .hero-art { height: clamp(444px, 58vw, 640px); }
  .hero-art img { min-height: 0; border-radius: 12% 0 0 12%; }
  .hero-copy { padding-right: 8px; }
  .eyebrow { margin-bottom: clamp(12px, 1.6vw, 22px); }
  .hero-actions { margin-top: clamp(15px, 2vw, 26px); gap: 10px; }
  .hero-description { margin-top: 12px; }
  .section { margin-block: clamp(24px, 2.8vw, 40px); }
  .section-intro { margin-top: 3px; }
  .coloring-grid { gap: clamp(12px, 1.6vw, 22px); margin-top: 12px; }
  .coloring-card { min-height: 0; }
  .coloring-card > img { height: clamp(157px, 20.3vw, 230px); }
  .section-tail { margin-top: 5px; }
  .birthday-section { min-height: 0; padding: clamp(16px, 2.2vw, 29px); }
  .birthday-art { height: clamp(206px, 24vw, 290px); }
  
  
  .birthday-copy p { margin-block: 13px 16px; }
  .characters-grid { gap: 14px; justify-items: center; }
  .character { width: min(100%, 180px); padding-bottom: 0; }
  .character-label { font-size: clamp(17px, 2vw, 23px); padding: 4px 12px; }
  .news-grid { gap: 20px; margin-top: 14px; }
  .news-card, .news-image { min-height: clamp(145px, 17vw, 205px); }
  .news-copy { padding: clamp(9px, 1.3vw, 18px); }
  .round-arrow { width: 32px; height: 32px; font-size: 21px; margin-top: 10px; }
  .newsletter, .contact-box { min-height: clamp(82px, 9.5vw, 118px); padding: 10px; gap: 16px; }
  .contact-section h2 { margin-bottom: 4px; }
  .contact-icon { font-size: 48px; }
  .site-footer { margin-top: 0; padding: 6px 12px 10px; }
  .site-footer img { width: clamp(110px, 13vw, 150px); }
}

@media (max-width: 800px) {
  .hero-art { margin-left: calc(-1 * var(--page-gutter)); }
  .hero-art img { height: auto; }
  .hero { padding-bottom: 0; }
  .eyebrow { margin-bottom: 16px; }
  .hero-description { margin-top: 12px; }
  .section { margin-block: 32px; }
}

@font-face {
  font-family: "Fredoka";
  src: url("assets/fonts/Fredoka.ttf") format("truetype");
  font-weight: 300 700;
  font-stretch: 75% 125%;
  font-display: swap;
}
h1, h2, h3, .news-heading, .character-label {
  font-family: var(--heading);
  font-weight: 680;
  font-stretch: 94%;
  letter-spacing: -.025em;
}
h1 { font-weight: 700; line-height: 1.04; }
.news-heading { line-height: 1.13; }







.news-image {
  background-size: cover;
  background-position: center;
  border-radius: 13px;
}
.village-image { background-image: url("assets/images/actualites-village.webp"); }
.friends-image { background-image: url("assets/images/actualites-troy-faker.webp"); }
@media (min-width: 801px) {
  .hero h1 { font-size: clamp(45px, 5.25vw, 73px); }
  .birthday-copy h2 { font-size: clamp(36px, 4.4vw, 56px); }
  .birthday-section { grid-template-columns: 39% 61%; }
}
@media (max-width: 450px) {
  .news-card { grid-template-columns: 60% 40%; }
  .news-image { min-height: clamp(128px, 37vw, 162px); }
  .news-copy { padding: 10px; }
  .news-heading { font-size: clamp(17px, 5vw, 21px); }
  .birthday-art { height: clamp(174px, 52vw, 220px); }
}


/* A wide screen needs enough height for the antennae and the foreground shoes. */
@media (min-width: 801px) {
  .hero-art {
    position: relative;
    width: calc(100% + var(--page-gutter));
    min-width: 0;
    height: auto;
    min-height: clamp(444px, 58vw, 640px);
    aspect-ratio: 1.32;
    mask-image: linear-gradient(90deg, transparent, black 4%, black);
  }
  .hero-art img {
    position: absolute;
    inset: 0;
    object-position: 50% 40%;
    border-radius: 12% 0 0 6%;
  }
}

/* The two tilted sheets are a promotional preview of the printed pack. */
.birthday-art {
  display: grid;
  place-items: center;
  container-type: size;
  min-width: 0;
}
.birthday-display {
  position: relative;
  width: min(100cqw, 204cqh);
  aspect-ratio: 2.04;
  container-type: inline-size;
  isolation: isolate;
}
.birthday-sheet {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fffcf6;
  border: max(2px, .9cqw) solid white;
  border-radius: 2.8cqw;
  outline: 1px solid #8b418428;
  box-shadow: 0 .9cqw 1.5cqw #56144832;
  overflow: hidden;
}
.birthday-sheet::after {
  content: "";
  position: absolute;
  inset: 0;
  border: max(1px, .2cqw) solid #982698a6;
  border-radius: 1.9cqw;
  pointer-events: none;
}
.birthday-cover {
  left: 7%;
  top: 2%;
  width: 49%;
  height: 97%;
  transform: rotate(-3deg);
  z-index: 2;
}
.birthday-puzzle {
  right: 3.8%;
  top: 9%;
  width: 40%;
  height: 91%;
  transform: rotate(5deg);
  z-index: 1;
}
.birthday-cover .sheet-logo { width: 43%; height: 14%; margin: .5% auto; object-fit: contain; }
.birthday-cover .cake-art { width: 100%; flex: 1; min-height: 0; object-fit: cover; }
.birthday-puzzle .sheet-logo { width: 45%; height: 11%; margin: 2% auto 0; object-fit: contain; }
.puzzle-title { font-family: var(--heading); font-size: 4.15cqw; font-weight: 700; line-height: 1.05; letter-spacing: -.03em; color: #4d0750; white-space: nowrap; }
.puzzle-scene { width: 100%; min-height: 0; flex: 1; margin-top: 2%; object-fit: cover; object-position: 50% 48%; }
.puzzle-legend { width: 96%; height: auto; margin: 1.4% 0 1% 2%; }
.birthday-balloons { position: absolute; height: auto; z-index: 3; pointer-events: none; }
.balloons-left { width: 16%; left: -.5%; top: -8%; transform: rotate(-5deg); }
.balloons-right { width: 13%; right: -1%; top: 3%; transform: rotate(7deg); }
.birthday-confetti { position: absolute; width: 1.05%; height: 3.7%; border-radius: 3px; background: #ffca36; transform: rotate(-38deg); }
.birthday-confetti:nth-of-type(2n) { background: #c75bc0; transform: rotate(31deg); }
.confetti-a { left: .4%; top: 23%; } .confetti-b { left: 3%; top: 52%; }
.confetti-c { left: 2%; top: 72%; } .confetti-d { left: 18%; top: .5%; }
.confetti-e { right: 2%; top: 48%; } .confetti-f { right: .2%; top: 68%; }
.confetti-g { right: 3%; top: 87%; } .confetti-h { right: 11%; top: 0; }
@media (min-width: 801px) {
  .birthday-art { height: clamp(218px, 26vw, 325px); margin-left: 0; }
}
@media (max-width: 800px) {
  .birthday-art { height: auto; aspect-ratio: 2.04; margin: 8px auto 2px; }
}

/* Portrait links retain the layout of the homepage character cards. */
a.character { display: block; text-align: center; }

.coloring-links { justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; }
.coloring-card h3 a:hover { text-decoration: underline; }

#offre-anniversaire { width: min(520px, calc(100% - 28px)); padding: clamp(22px, 4vw, 36px); }
#offre-anniversaire h2 { font-size: clamp(27px, 4vw, 36px); padding-right: 23px; }
.offre-contenu { padding-left: 21px; margin: 14px 0; }
.offre-contenu li { margin-block: 5px; }
.offre-paiement { margin-top: 18px; padding-top: 17px; border-top: 1px solid #dfcde2; }
.offre-paiement .button:disabled { background: #76587b; border-color: #76587b; cursor: not-allowed; transform: none; box-shadow: none; }
#offre-statut { margin: 7px 0 0; color: #604966; font-size: 15px; }