/* ============================================================
   Pic'Nic Kids — un petit monde cartoon en deux univers
   · bleu = Kid Tacos (mascotte French tacos)
   · rose = Kid Cheese (mascotte cheeseburger)
   Section volontairement à part du reste de la carte (demande
   du 10 oct. 2026) ; le logotype officiel n'y est pas modifié
   (déclinaison noire de la planche).
   Mobile d'abord. Animations : transform / opacity uniquement,
   coupées si « réduire les animations », en pause hors écran.
   ============================================================ */

.kids {
  --k-blue: #7CC8F4;
  --k-pink: #F8B6D4;
  --k-mix: #BABFE4;          /* raccord bleu → rose */
  --k-blue-deep: #1F6FC5;    /* texte blanc 4,9:1 */
  --k-pink-deep: #C93A7A;    /* texte blanc 4,6:1 */
  --k-ink: #14121F;
  --k-font: "Fredoka", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;

  position: relative;
  margin: var(--s7) calc(50% - 50vw) 0;
  padding: 0;
  overflow: hidden;
  color: var(--k-ink);
  scroll-margin-top: var(--nav-h);
  --focus: var(--k-ink);
}

/* ---------- scène du haut : titre + deux univers ---------- */
.kids__stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "head head" "tacos cheese";
  padding-top: var(--s5);
  background: linear-gradient(90deg, var(--k-blue) 0 38%, var(--k-pink) 62% 100%);
}
.kids__head {
  grid-area: head;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  padding: 0 var(--gutter);
  text-align: center;
}
.kids__title { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0; }
.kids__logo { display: block; width: 116px; height: auto; }   /* logotype seul : ≥ 100 px */
.kids__word {
  display: flex;
  gap: .02em;
  font-family: var(--k-font);
  font-weight: 700;
  font-size: clamp(64px, 20vw, 140px);
  line-height: .95;
  letter-spacing: .01em;
}
.kids__letter {
  display: inline-block;
  -webkit-text-stroke: .11em var(--k-ink);
  paint-order: stroke fill;
  text-shadow: 0 .07em 0 var(--k-ink);
}
.kids__letter--k { color: #FF5A5F; transform: rotate(-7deg); }
.kids__letter--i { color: #FFC21A; transform: translateY(-.05em) rotate(4deg); }
.kids__letter--d { color: #2E9BF0; transform: rotate(-4deg); }
.kids__letter--s { color: #FF7AB6; transform: translateY(-.03em) rotate(7deg); }

/* Panneau en bois cartoon */
.kids__sign {
  position: relative;
  margin: 0;
  padding: 9px 20px 8px;
  border: 4px solid #6E4220;
  border-radius: 14px;
  background:
    repeating-linear-gradient(180deg, rgba(110, 66, 32, 0) 0 9px, rgba(110, 66, 32, .18) 9px 11px),
    #C98A4B;
  color: #FFF8EC;
  font-family: var(--k-font);
  font-weight: 700;
  font-size: clamp(13px, 3.6vw, 16px);
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: rotate(-2deg);
}
.kids__sign::before, .kids__sign::after {           /* clous */
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: #6E4220;
}
.kids__sign::before { left: 7px; }
.kids__sign::after { right: 7px; }

.kids__stage { position: relative; }
.kids__side { position: relative; z-index: 1; height: clamp(206px, 58vw, 262px); }
.kids__head { z-index: 2; }
.kids__side--tacos { grid-area: tacos; }
.kids__side--cheese { grid-area: cheese; }
/* le décor est rogné à son cadre ; la mascotte, jamais */
.kids__scene { position: absolute; inset: 0 0 40px; width: 100%; height: calc(100% - 40px); overflow: hidden; }
.kids__stage-hills { position: absolute; inset: auto 0 0; z-index: 0; width: 100%; height: 76px; }
.kids__mascot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;              /* debout sur la colline */
  z-index: 1;
  width: min(90%, 188px);
  margin: 0 auto;
}
.kids__hop, .kids__breath { transform-origin: 50% 100%; }
.mascot { display: block; width: 100%; height: auto; overflow: visible; }

/* ---------- ruban de nuages (fin) ---------- */
.kids__sep { position: relative; z-index: 3; height: 44px; margin: -24px 0 -20px; pointer-events: none; }
.kids__band { display: block; width: 100%; height: 100%; }

/* ---------- menus : un seul ciel qui passe du bleu au rose ---------- */
.kids__zones {
  display: grid;
  gap: var(--s4);
  padding: 34px var(--gutter) var(--s5);
  background: linear-gradient(180deg, var(--k-blue) 0 40%, var(--k-pink) 60% 100%);
}
.kids__zone { position: relative; }
.kids__zone-decor { position: absolute; inset: -24px -8px; width: calc(100% + 16px); height: calc(100% + 48px); overflow: visible; pointer-events: none; }

.kids-card {
  --c: var(--k-blue-deep);
  position: relative;
  z-index: 1;
  max-width: 440px;
  margin: 0 auto;
  padding: 14px 18px 16px;
  border: 4px solid var(--c);
  border-radius: 26px;
  background: #FFFDF8;
  box-shadow: 0 8px 22px rgba(20, 18, 31, .15);
  transition: transform .25s ease, box-shadow .25s ease;
  scroll-margin-top: calc(var(--nav-h) + var(--s4));
}
.kids-card--cheese { --c: var(--k-pink-deep); }
.kids-card::before {                                /* petite étoile */
  content: "";
  position: absolute;
  top: -13px;
  left: 22px;
  width: 26px;
  height: 26px;
  background: #FFC21A;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.kids-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.kids-card__eyebrow {
  color: var(--c);
  font-family: var(--k-font);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.kids-card__name {
  font-family: var(--k-font);
  font-weight: 700;
  font-size: clamp(26px, 7.4vw, 32px);
  line-height: 1.05;
}
.kids-card__desc { margin-top: 6px; color: rgba(20, 18, 31, .8); font-size: 15px; line-height: 1.45; }
.kids-card__plus { color: var(--c); font-weight: 800; }
.kids-card__price {
  flex: none;
  padding: 3px 14px 4px;
  border-radius: 999px;
  background: var(--c);
  color: #FFFFFF;
  font-family: var(--k-font);
  font-weight: 700;
  font-size: clamp(25px, 7vw, 30px);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform: rotate(-3deg);
}
@media (hover: hover) {
  .kids-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 16px 32px rgba(20, 18, 31, .22); }
}

/* ---------- sol du parc (bas, compact) ---------- */
.kids__ground { position: relative; height: 74px; background: var(--k-pink); }
.kids__hills { position: absolute; inset: auto 0 0 0; width: 100%; height: 64px; }
.kids__swing, .kids__slide { position: absolute; bottom: 12px; height: 60px; width: auto; }
.kids__swing { left: max(4%, 10px); }
.kids__slide { right: max(4%, 10px); }
.kids__flowers { position: absolute; left: 50%; bottom: 4px; width: min(46%, 300px); height: auto; translate: -50% 0; }

/* ---------- tablette et ordinateur ---------- */
@media (min-width: 700px) {
  .kids__zones {
    grid-template-columns: 1fr 1fr;
    gap: var(--s5);
    padding: 44px var(--s5) var(--s6);
    background: linear-gradient(90deg, var(--k-blue) 0 38%, var(--k-pink) 62% 100%);
  }
  .kids-card__name { font-size: 27px; }
  .kids-card__price { font-size: 26px; }
  .kids__zone--tacos .kids-card { margin-right: 0; }
  .kids__zone--cheese .kids-card { margin-left: 0; }
  .kids__ground { height: 96px; background: linear-gradient(90deg, var(--k-blue) 0 38%, var(--k-pink) 62% 100%); }
  .kids__hills { height: 80px; }
  .kids__swing, .kids__slide { height: 78px; }
  .kids__side { height: 280px; }
  .kids__mascot { width: min(70%, 200px); }
}
@media (min-width: 1024px) {
  .kids__stage {
    grid-template-columns: 1fr minmax(380px, 460px) 1fr;
    grid-template-areas: "tacos head cheese";
    align-items: center;
    padding-top: var(--s4);
  }
  .kids__side { height: 330px; }
  .kids__mascot { width: min(66%, 224px); }
  .kids__head { padding-bottom: var(--s6); }
  .kids-card { padding: 18px 22px 20px; }
  .kids-card__name { font-size: 32px; }
  .kids-card__price { font-size: 30px; }
  .kids__zones { padding-bottom: var(--s5); }
}

/* ============================================================
   Animations douces de dessin animé
   · entrée de la scène (≈ 1,2 s) quand la section arrive à l'écran ;
   · cartes qui apparaissent chacune à leur arrivée au défilement ;
   · ensuite : nuages, balancement, clignement des yeux, bras,
     étoiles. transform / opacity uniquement, en pause hors écran,
     coupées avec « réduire les animations ».
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .kids--armed .kids__scene { opacity: 0; }
  .kids--armed .kids-cloud__puff { translate: -18px 0; }
  .kids--armed .kids-sun { scale: .3; }
  .kids--armed .kids__mascot--tacos { translate: -130% 0; }
  .kids--armed .kids__mascot--cheese { translate: 130% 0; }
  .kids--armed .kids__head { opacity: 0; scale: .86; }
  .kids--armed .kids-card:not(.is-in) { opacity: 0; translate: 0 24px; }

  .kids .kids__scene { transition: opacity .45s ease-out; }
  .kids .kids-cloud__puff { transition: translate .9s ease-out; }
  .kids .kids-sun { transform-box: fill-box; transform-origin: center; transition: scale .5s cubic-bezier(.34, 1.56, .64, 1) .25s; }
  .kids .kids__mascot { transition: translate .62s cubic-bezier(.34, 1.4, .64, 1) .2s; }
  .kids .kids__mascot--cheese { transition-delay: .3s; }
  .kids .kids__head { transition: opacity .4s ease-out .5s, scale .5s cubic-bezier(.34, 1.56, .64, 1) .5s; }
  .kids .kids-card { transition: opacity .45s ease-out, translate .45s ease-out, transform .25s ease, box-shadow .25s ease; }
  .kids .kids-card--cheese { transition-delay: .12s, .12s, 0s, 0s; }

  .kids--armed.kids--in .kids__scene,
  .kids--armed.kids--in .kids__head { opacity: 1; }
  .kids--armed.kids--in .kids-cloud__puff,
  .kids--armed.kids--in .kids__mascot { translate: 0 0; }
  .kids--armed.kids--in .kids-sun,
  .kids--armed.kids--in .kids__head { scale: 1; }
  .kids--armed.kids--in .kids__hop { animation: kids-hop .42s ease-out .78s 1; }

  /* permanentes */
  .kids-cloud__puff { animation: kids-float 9s ease-in-out infinite alternate; }
  .kids-cloud:nth-of-type(2n) .kids-cloud__puff { animation-duration: 12s; animation-delay: -4s; }
  .kids__breath { animation: kids-sway 4.2s ease-in-out infinite; }
  .kids__mascot--cheese .kids__breath { animation-delay: -2.1s; }
  .mascot__eyes { transform-box: fill-box; transform-origin: center; animation: kids-blink 5.6s infinite; }
  .mascot--cheese .mascot__eyes { animation-delay: -2.4s; animation-duration: 6.4s; }
  .mascot__arm--wave { animation: kids-arm 3.4s ease-in-out infinite; }
  .mascot--cheese .mascot__arm--wave { animation-name: kids-arm-r; animation-delay: -1.2s; }
  .kids-star { transform-box: fill-box; transform-origin: center; animation: kids-twinkle 3.2s ease-in-out infinite; }
  .kids-star:nth-of-type(3n) { animation-delay: -1.1s; }
  .kids-star:nth-of-type(3n + 1) { animation-delay: -2.2s; }
  .kids-sun__rays { transform-box: fill-box; transform-origin: center; animation: kids-spin 48s linear infinite; }
  .kids:not(.kids--idle) :is(.kids-cloud__puff, .kids__breath, .mascot__eyes, .mascot__arm--wave, .kids-star, .kids-sun__rays) { animation-play-state: paused; }

  /* réaction du personnage au survol de sa carte */
  .kids:has(.kids-card--tacos:hover) .kids__mascot--tacos .mascot__arm--wave { animation: kids-wave-l .9s ease-in-out 2; }
  .kids:has(.kids-card--cheese:hover) .kids__mascot--cheese .mascot__arm--wave { animation: kids-wave-r .9s ease-in-out 2; }
  .kids:has(.kids-card--tacos:hover) .kids__mascot--tacos .kids__hop,
  .kids:has(.kids-card--cheese:hover) .kids__mascot--cheese .kids__hop { animation: kids-hop .42s ease-out 1; }
}

@keyframes kids-float { from { transform: translateX(0); } to { transform: translateX(14px); } }
@keyframes kids-sway { 0%, 100% { transform: rotate(-1.6deg) scale(1, 1); } 50% { transform: rotate(1.6deg) scale(1.012, 1.025); } }
@keyframes kids-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes kids-arm { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-7deg); } }
@keyframes kids-arm-r { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(7deg); } }
@keyframes kids-twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.82); } }
@keyframes kids-spin { to { transform: rotate(360deg); } }
@keyframes kids-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px); } 70% { transform: translateY(0) scale(1.04, .96); } }
@keyframes kids-wave-l { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-18deg); } 70% { transform: rotate(10deg); } }
@keyframes kids-wave-r { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(18deg); } 70% { transform: rotate(-10deg); } }

/* très petits écrans : nom et prix sur une seule ligne */
@media (max-width: 350px) {
  .kids-card { padding-inline: 14px; }
  .kids-card__name { font-size: 24px; }
  .kids-card__price { padding: 3px 11px 4px; font-size: 23px; }
}