/* ============================================================================
   "To Infinity… and Back to School" / "Vers l'infini… et la rentrée"
   Toy Story 2026 contest — shared chrome + reusable state primitives.

   The pre-launch holding page is fully self-styled inside content-prelaunch.php
   (its own fixed .tsp overlay). Everything below styles the *interior* states
   (age / default / registration / thankyou / postlaunch / forbidden / rules),
   which share a common chrome: a Toy Story background (blue-pattern or yellow),
   a blue arch at the top, the KV logo lockup, a language toggle and a red
   3-link footer.

   Design tokens (see also contest brand memo):
     --ts-blue        #1b9fe6  bright cyan background base
     --ts-navy        #113d68  primary dark-blue text
     --ts-arch-blue   #0e6bb2  arch / outline blue
     --ts-yellow      #fdee02  yellow background
     --ts-gold        #ffe264  headline gold fill
     --ts-red         #f04b46  buttons + footer
   ========================================================================== */

:root{
  --ts-blue:#1b9fe6;
  --ts-navy:#113d68;
  --ts-arch-blue:#0e6bb2;
  --ts-yellow:#ffe264;
  --ts-gold:#ffe264;
  --ts-red:#f04b46;
  --ts-red-dark:#d83b36;
  --ts-footer-h:44px;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}

body{
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ts-navy);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  opacity:1;
}
/* The page template fades the body in after the age-gate check. */
img{max-width:100%;}

/* ── Backgrounds ─────────────────────────────────────────────────────────── */
/* Blue-pattern states */
body.default,
body.registration{ background:var(--ts-blue); }
body.default::before,
body.registration::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:url('bg-pattern-blue.jpg') repeat;
  background-size:520px auto;
}
/* Yellow states — flat gold base + the curved "hill" background image (bottom) */
body.age,
body.thankyou,
body.postlaunch,
body.forbidden,
body.rules{ background:var(--ts-yellow); }
body.age::before,
body.thankyou::before,
body.postlaunch::before,
body.forbidden::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:url('bg-yellow.jpg') no-repeat center bottom;
  background-size:100% auto;
}
/* Rules is a long scrolling page — tile the faint icon pattern down the whole page */
body.rules{ background:var(--ts-yellow) url('bg-pattern-yellow.jpg') repeat; background-size:600px auto; }

/* Shared blue arch pinned to the very top (over the background, under content) */
.ts-arch{
  position:fixed;top:0;left:0;width:100%;height:auto;z-index:-1;
  pointer-events:none;user-select:none;display:block;
}
/* On the blue-pattern states the arch blends into the background, so a plain
   darker band reads better than the shadowed cut-out PNG. */
body.default .ts-arch,
body.registration .ts-arch{ opacity:.85; }
/* Registration: raise the blue dome so its curve sits higher (matches Figma —
   the arch shouldn't reach down near the coin/form). */
body.registration .ts-arch{ top:min(-40px,-6vw); }

/* ── Language toggle (top-right) ─────────────────────────────────────────── */
.top-bar{position:relative;z-index:40;}
.language__switcher{
  position:fixed;top:12px;right:14px;z-index:40;
  display:flex;align-items:center;gap:4px;
  font-family:"Arial Black","Arial Bold",Arial,sans-serif;font-weight:900;
  font-size:13px;letter-spacing:.5px;text-transform:uppercase;
}
.language__switcher a{
  color:#fff;text-decoration:none;line-height:1;
  padding:5px 9px;border-radius:20px;opacity:.9;transition:opacity .15s ease;
}
.language__switcher a:hover{opacity:1;}
.language__switcher a.active{color:var(--ts-navy);background:var(--ts-gold);opacity:1;}

/* ── Layout column ───────────────────────────────────────────────────────── */
.content{
  position:relative;z-index:1;
  min-height:100vh;
  display:flex;flex-direction:column;
  padding:0 18px calc(var(--ts-footer-h) + 24px);
}
.container{
  width:100%;max-width:1120px;margin:0 auto;
  flex:1 0 auto;display:flex;flex-direction:column;align-items:center;
}

/* KV logo lockup — straddles the arch on every interior state */
.logo-container{
  position:relative;z-index:5;
  display:flex;flex-direction:column;align-items:center;
  width:100%;padding-top:14px;
}
.logo-container .kv-logo-link{
  display:block;width:min(74%,440px);margin:0 auto;
}
.logo-container .kv-logo{
  display:block;width:100%;height:auto;
}
/* Scrolling pages (rules) get a little breathing room above the logo on mobile. */
.rules .logo-container{padding-top:22px;}

/* ── Reusable primitives ─────────────────────────────────────────────────── */
/* Gold headline (on blue backgrounds) */
.ts-headline{
  font-family:"Arial Black","Arial Bold",Arial,sans-serif;font-weight:900;
  color:var(--ts-gold);-webkit-text-stroke:0.14em var(--ts-arch-blue);
  paint-order:stroke fill;text-transform:uppercase;
  line-height:1.15;margin:0;text-align:center;
  font-size:clamp(24px,6vw,40px);letter-spacing:.5px;
}
/* Blue headline (on yellow backgrounds) */
.ts-headline--navy{
  color:var(--ts-arch-blue);-webkit-text-stroke:0.08em #fff;
}
/* Body copy */
.ts-copy{
  color:var(--ts-navy);font-weight:700;line-height:1.35;margin:0;text-align:center;
  font-size:clamp(14px,2.4vw,18px);max-width:520px;
}
.ts-copy--light{color:#fff;}

/* Red pill button (PARTICIPER / CONFIRMER / …) */
.btn-red{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:"Arial Black","Arial Bold",Arial,sans-serif;font-weight:900;
  text-transform:uppercase;text-decoration:none;letter-spacing:.5px;
  color:#fff;background:var(--ts-red);
  border:none;border-radius:40px;cursor:pointer;
  padding:15px 42px;font-size:clamp(17px,2.4vw,22px);line-height:1;
  transition:background .12s ease;
}
.btn-red:hover{background:#f2635f;}
.btn-red:active{background:var(--ts-red-dark);}

/* Yellow prize badge (image) */
.ts-badge{display:block;width:min(58%,300px);height:auto;}

/* Small "Histoire de Jouets 5" lockup */
.ts-jouets{display:block;width:150px;height:auto;}

/* "Histoire de Jouets 5" logo pinned to the bottom-right corner (yellow states) */
.ts-jouets-corner{
  position:fixed;right:12px;bottom:calc(var(--ts-footer-h) + 8px);z-index:6;
  width:82px;height:auto;pointer-events:none;
}
@media (min-width:768px){
  .ts-jouets-corner{right:18px;width:104px;}
}

/* ── Footer (shared, red, 3 links) ───────────────────────────────────────── */
footer{
  position:fixed;left:0;bottom:0;width:100%;z-index:30;
  background:var(--ts-red);color:#fff;min-height:var(--ts-footer-h);
}
footer .container{
  flex:0 0 auto;flex-direction:row;flex-wrap:wrap;justify-content:center;
  gap:6px 30px;max-width:1120px;
  padding:9px 18px;position:relative;
}
footer nav{display:contents;}
footer a{
  color:#fff;text-decoration:none;font-weight:700;
  font-size:clamp(11px,1.4vw,14px);white-space:nowrap;text-align:center;
}
footer a:hover{text-decoration:underline;}
footer .footer-disney{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:52px;height:auto;
}

/* Mobile: stack the small Disney·Pixar mark centred beneath the two links */
@media (max-width:767px){
  footer .container{flex-direction:column;gap:6px;padding:8px 18px;}
  footer nav{display:flex;flex-direction:row;justify-content:center;gap:30px;}
  footer .footer-disney{
    position:static;transform:none;right:auto;top:auto;
    width:46px;margin:0;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   DEFAULT state — welcome / "Participate"
   Mobile-first stacked column: [KV logo] badge · jouets5 · button · Buzz
   ══════════════════════════════════════════════════════════════════════════ */
#default{
  width:100%;display:flex;flex-direction:column;align-items:center;gap:10px;
  padding-top:0;
}
/* Mobile default: the large prize coin tucks up BEHIND the top brand lockup
   (z-index below the logo, matching the Figma). The movie logo stays compact
   so the Participate button rides higher up the screen. */
#default .ts-badge{
  width:min(72%,330px);position:relative;z-index:1;margin-top:min(-38px,-8vw);
}
#default .inner{
  display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
}
#default .default-jouets{width:min(38%,172px);height:auto;}
#default .default-buzz{width:min(66%,280px);height:auto;}

/* ══════════════════════════════════════════════════════════════════════════
   AGE gate — date-of-birth confirmation (yellow state)
   ══════════════════════════════════════════════════════════════════════════ */
/* Mobile: modest breathing room above the logo, then the form + Slinky flow
   as one vertically-centred group. The Slinky is IN-FLOW (below the form) so
   it can never overlap the Confirmer button, and there's no reserved padding
   that would waste space / force scrolling on short viewports. */
.age .logo-container{padding-top:clamp(12px,3vh,34px);}
#age{
  position:relative;width:100%;flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(22px,4vh,40px);padding:clamp(8px,2vh,18px) 0 clamp(14px,3vh,28px);
}
.age-inner{
  display:flex;flex-direction:column;align-items:center;gap:18px;
  width:100%;max-width:430px;
}
.age-heading{
  margin:0;text-align:center;color:#1f4767;
  font-family:Arial,Helvetica,sans-serif;font-weight:700;
  font-size:clamp(18px,3.4vw,24px);
}
.age-form{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;}
.age-fields{display:flex;gap:12px;width:100%;justify-content:center;}
.age-select{position:relative;flex:1 1 0;min-width:0;}
.age-select select{
  appearance:none;-webkit-appearance:none;
  width:100%;padding:13px 32px 13px 15px;
  border:2px solid #e2d79f;border-radius:12px;background:#fff1b2;
  color:#5f7180;font-family:Arial,Helvetica,sans-serif;
  font-size:15px;font-weight:600;cursor:pointer;line-height:1.1;
}
.age-select select:focus{outline:none;border-color:#c9b96a;}
.age-select::after{
  content:"";position:absolute;right:14px;top:50%;
  width:9px;height:9px;border-right:2px solid #1f4767;
  border-bottom:2px solid #1f4767;
  transform:translateY(-70%) rotate(45deg);pointer-events:none;
}
.age-submit{width:100%;margin-top:2px;}
.age-error{color:var(--ts-red-dark);font-weight:700;min-height:1.1em;text-align:center;font-size:14px;}
/* Slinky (left) + Jessie (right) flank the form on desktop; on mobile only
   Slinky shows, centred below the form. */
.age-jessie{display:none;}
.age-slinky{width:min(56%,250px);height:auto;margin:0;}

/* ══════════════════════════════════════════════════════════════════════════
   THANK-YOU + POST-LAUNCH (yellow states with a headline, copy + character)
   ══════════════════════════════════════════════════════════════════════════ */
/* Mobile: modest logo breathing room + vertically-centred content group
   (headline, copy, coin/character all in-flow — no reserved padding). */
.thankyou .logo-container,.postlaunch .logo-container{padding-top:clamp(12px,3vh,34px);}
#thankyou,#postlaunch{
  position:relative;width:100%;flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(22px,4vh,38px);padding:clamp(8px,2vh,18px) 0 clamp(14px,3vh,28px);
}
.ty-inner,.pl-inner{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  max-width:560px;text-align:center;
}
.ts-headline--navy{font-size:clamp(23px,5.4vw,38px);}
.ty-heading,.pl-heading{font-size:clamp(22px,5vw,38px);}
/* Mobile: coin sits ABOVE the Slinky (Figma 4028-1646). DOM order is
   Slinky→coin, so column-reverse puts the coin on top; desktop resets to row. */
.ty-scene{
  display:flex;flex-direction:column-reverse;align-items:center;justify-content:center;
  gap:24px;width:100%;
}
.ty-slinky{width:min(72%,320px);height:auto;}
.ty-badge{width:min(56%,230px);height:auto;}
.pl-jessie{width:min(56%,290px);height:auto;}

/* ══════════════════════════════════════════════════════════════════════════
   FORBIDDEN — under-18 / not eligible (yellow hero + Buzz on the right)
   ══════════════════════════════════════════════════════════════════════════ */
/* Mobile: modest logo breathing room + vertically-centred group. Buzz is
   IN-FLOW below the button, so it can never cover the Return button. */
.forbidden .logo-container{padding-top:clamp(12px,3vh,34px);}
#forbidden{
  position:relative;width:100%;flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(20px,3.5vh,34px);padding:clamp(8px,2vh,18px) 0 clamp(14px,3vh,28px);
}
.fb-inner{
  display:flex;flex-direction:column;align-items:center;gap:18px;
  max-width:560px;text-align:center;
}
.fb-heading{font-size:clamp(20px,3.8vw,34px);overflow-wrap:break-word;}
.fb-sub{max-width:420px;}
.fb-return{margin-top:2px;}
.fb-buzz{width:min(52%,220px);height:auto;margin:0;}

/* ── Desktop ─────────────────────────────────────────────────────────────── */
@media (min-width:768px){
  :root{--ts-footer-h:42px;}

  .language__switcher{top:16px;right:22px;font-size:15px;}
  .language__switcher a{padding:6px 11px;}

  /* Cap the interior composition at the Figma design width and centre it so it
     never stretches edge-to-edge on wide monitors. The chrome (background, arch,
     footer) stays full-width; only the content column is bounded. */
  .content > .container{max-width:1600px;}
  /* KV logo: small header size on interior states (~408px in the 1600 design),
     large hero size only on the Default/welcome page (~688px). */
  .logo-container .kv-logo-link{width:min(27%,412px);}
  .default .logo-container .kv-logo-link{width:min(37%,580px);}

  .age .container{flex:1;justify-content:flex-start;}
  /* Push the logo down so it straddles the arch (the arch scales with viewport
     WIDTH ≈ 21vw tall), leaving blue space above it; the form then lands centred
     on the yellow just below. Keeps working across widths. */
  .age .logo-container{padding-top:clamp(20px, min(calc(15vw - 90px), 13vh), 190px);}
  #age{flex:1;gap:0;padding-top:0;justify-content:flex-start;}
  .age-inner{margin-top:clamp(10px,2.6vh,30px);}
  .age-heading{font-size:24px;}
  .age-slinky{
    position:absolute;left:max(4%,12px);bottom:2%;margin:0;z-index:3;transform:none;
    width:min(23%,360px);
  }
  .age-jessie{
    display:block;position:absolute;right:max(5%,14px);bottom:0;z-index:3;
    width:min(14%,215px);height:auto;
  }

  /* Forbidden — same arch-straddle top-spacing as Age; Buzz stands bottom-right */
  .forbidden .container{flex:1;justify-content:flex-start;}
  .forbidden .logo-container{padding-top:clamp(20px, min(calc(15vw - 90px), 13vh), 190px);}
  #forbidden{flex:1;gap:0;padding-top:0;justify-content:flex-start;}
  .fb-inner{margin-top:clamp(10px,2.6vh,30px);}
  .fb-buzz{
    position:absolute;left:auto;right:max(3%,12px);bottom:0;z-index:3;margin:0;transform:none;
    width:min(26%,390px);
  }

  #thankyou,#postlaunch{gap:30px;padding-top:24px;}
  .ty-scene{flex-direction:row;gap:44px;margin-top:4px;}
  .ty-slinky{width:min(30%,360px);}
  .ty-badge{width:min(13%,180px);}
  .pl-jessie{width:min(22%,280px);}

  /* Thank-you + Post-launch: logo straddles the arch; content flows from just
     below it with a gap, and the scene/character stays compact so it clears the
     footer even on short desktop viewports. */
  .thankyou .container,.postlaunch .container{flex:1;justify-content:flex-start;}
  .thankyou .logo-container,.postlaunch .logo-container{padding-top:clamp(20px, min(calc(15vw - 90px), 13vh), 190px);}
  #thankyou,#postlaunch{flex:1;padding-top:0;justify-content:flex-start;}
  .thankyou .ty-inner,.postlaunch .pl-inner{margin-top:clamp(8px,2vh,22px);}
  .pl-heading{white-space:nowrap;} /* short heading fits one line on desktop */

  /* Rules: long scrolling page — just straddle the logo over the arch (no centring). */
  .rules .logo-container{padding-top:clamp(20px, min(calc(15vw - 90px), 13vh), 190px);}

  /* Default composition: badge left, jouets+button centre, Buzz right — bounded
     to the 1600px stage from .content > .container above. */
  .default .container{flex:1;justify-content:flex-start;}
  #default{
    position:relative;flex:1;width:100%;gap:0;padding:0;
    justify-content:center;
  }
  #default .inner{
    z-index:4;gap:30px;margin-bottom:2vh;
  }
  #default .default-jouets{width:310px;}
  #default .ts-badge{
    position:absolute;z-index:3;left:11%;top:46%;transform:translateY(-50%);
    width:min(25vw,385px);margin-top:0;
  }
  #default .default-buzz{
    position:absolute;z-index:3;right:max(2vw,24px);bottom:0;
    width:min(28vw,390px);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   REGISTRATION — entry form (blue-pattern state)
   Translucent navy panel, white fields, gold submit; Jessie + Buzz flank it.
   ══════════════════════════════════════════════════════════════════════════ */
#registration{
  position:relative;width:100%;
  display:flex;flex-direction:column;align-items:center;gap:0;padding-top:8px;
}
/* reg-head sits ABOVE the panel (higher z-index) so the coin can overlap the
   panel's top edge (matching the Figma). */
.reg-head{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;z-index:6;}
.reg-title{font-size:clamp(22px,4.6vw,34px);max-width:12.5em;line-height:1.2;}
.reg-badge{width:min(52%,215px);margin-bottom:-46px;}

.reg-panel{
  position:relative;z-index:4;width:100%;max-width:600px;margin-top:0;
  background:rgba(11,42,84,0.62);border-radius:22px;padding:60px 26px 28px;
}
.reg-panel .fields{display:flex;flex-direction:column;}
.reg-panel label{display:block;color:#fff;font-weight:700;font-size:14px;margin:0 0 6px;}
.reg-panel .fields > input,
.reg-panel select.has-arrow,
.reg-panel .upc-code .field_upc{
  width:100%;padding:13px 16px;margin-bottom:16px;
  border:2px solid transparent;border-radius:10px;background:#fff;
  color:var(--ts-navy);font-family:Arial,Helvetica,sans-serif;font-size:15px;
  box-sizing:border-box;
}
.reg-panel input::placeholder{color:#9db3c7;}
.reg-panel input:focus,.reg-panel select:focus{outline:none;border-color:var(--ts-gold);}

.upc-code{margin-bottom:2px;}
.upc-code .heading{color:#fff;font-size:15px;font-weight:900;margin:0 0 4px;}
.upc-code .subheading{color:#dbe7f2;font-size:12.5px;font-weight:400;margin:0 0 8px;line-height:1.35;}

.reg-panel .checkbox{
  display:flex;align-items:flex-start;gap:9px;margin:8px 0;
  color:#eaf2fa;font-size:13px;line-height:1.45;
}
.reg-panel .checkbox input{margin-top:2px;flex:0 0 auto;width:16px;height:16px;accent-color:var(--ts-gold);}
.reg-panel .checkbox label{color:#eaf2fa;font-weight:400;margin:0;}
.reg-panel .checkbox a{color:#fff;text-decoration:underline;}

.reg-submit{width:100%;margin-top:14px;}
#error-messages .error-message{color:#ffd7d5;font-weight:700;margin:10px 0 0;text-align:center;font-size:14px;}
.disclaimer{color:#0a2652;font-size:11px;line-height:1.45;margin-top:14px;}
.disclaimer p{margin:4px 0;}

/* Characters — desktop only (hidden on mobile to keep the form central) */
.reg-char{display:none;}
/* On the long registration form the fixed corner logo would overlap the submit
   button on mobile, so it only shows on desktop (where Jessie occupies the side). */
.registration .ts-jouets-corner{display:none;}

/* Gold / yellow pill button (registration submit) */
.btn-yellow{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:"Arial Black","Arial Bold",Arial,sans-serif;font-weight:900;
  text-transform:uppercase;letter-spacing:.4px;
  color:var(--ts-navy);background:var(--ts-gold);
  border:none;border-radius:40px;cursor:pointer;
  padding:15px 30px;font-size:clamp(15px,2vw,19px);line-height:1;
  transition:background .12s ease;
}
.btn-yellow:hover{background:#ffe985;}
.btn-yellow:active{background:#f2d64e;}
.btn-yellow .spinner{display:none;}
.btn-yellow.btn-loading{opacity:.7;pointer-events:none;}

@media (min-width:768px){
  #registration{padding-top:14px;}
  .reg-panel{max-width:600px;}
  .reg-char{display:block;position:absolute;z-index:3;pointer-events:none;height:auto;}
  .reg-jessie{right:max(1vw,8px);top:64px;width:min(21vw,280px);}
  .reg-buzz{left:max(1vw,8px);bottom:0;width:min(19vw,250px);}
  .registration .ts-jouets-corner{display:block;}
}