/* ==========================================================================
   FridgEat — la scène du héros : le frigo mascotte qui s'ouvre (accueil FR/EN).
   Animée par /assets/js/accueil.js (états : .is-ready, .is-open, .is-happy, .is-blink).
   Tout est dessiné en CSS + SVG aux couleurs de la mascotte de l'app ; les tailles du frigo sont en cqw
   (pourcentage de sa largeur) pour garder ses proportions à toutes les tailles.
   Sans JavaScript ou avec « réduire les animations » : frigo fermé, aliments posés autour, rien ne bouge.
   ========================================================================== */

.scene {
  --navy: #1C2240;
  --fridge-1: #C4E8FE;
  --fridge-2: #7EC3F2;
  position: relative;
  width: min(100%, 470px);
  aspect-ratio: 1 / 1.02;
  margin-inline: auto;
  isolation: isolate;
  user-select: none;
  -webkit-user-select: none;
}
/* Petit écran : la scène passe avant le titre, plus compacte, pour que le frigo s'ouvre dès le premier écran. */
@media (max-width: 879.98px) {
  .home-hero .hero__media { order: -1; margin-top: 4px; }
  .scene { width: min(72vw, 280px); }
  .scene__bubble { max-width: 66%; padding: 8px 11px 9px; }
}

/* Disque citron derrière, et le halo de lumière quand la porte s'ouvre */
.scene__disc {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 17%;
  aspect-ratio: 1;
  background: var(--citron);
  border: var(--border) solid #111111;
  border-radius: 50%;
  box-shadow: 6px 6px 0 var(--shadow);
  z-index: -2;
}
.scene__rays {
  position: absolute;
  left: 50%;
  top: 60%;
  width: 150%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.55) 0deg 7deg, transparent 7deg 22deg);
  -webkit-mask: radial-gradient(closest-side, #000 30%, transparent 72%);
  mask: radial-gradient(closest-side, #000 30%, transparent 72%);
  opacity: 0;
  scale: 0.6;
  z-index: -1;
  pointer-events: none;
  transition: opacity 0.5s ease, scale 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.scene.is-open .scene__rays { opacity: 1; scale: 1; }

/* ---------- Le frigo ---------- */
.fridge, .mini-fridge, .end-fridge {
  --navy: #1C2240;
  --fridge-1: #C4E8FE;
  --fridge-2: #7EC3F2;
}
.fridge {
  all: unset;
  position: absolute;
  left: 50%;
  bottom: 1%;
  width: 50%;
  aspect-ratio: 100 / 150;
  translate: -50% 0;
  container-type: inline-size;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform-origin: 50% 100%;
}
.fridge:focus-visible { outline: 4px solid var(--focus); outline-offset: 10px; border-radius: 30px; }
.fridge__lean { position: absolute; inset: 0; transform-origin: 50% 100%; transition: rotate 0.6s cubic-bezier(0.3, 1.4, 0.5, 1); }

.fridge__feet i {
  position: absolute;
  bottom: 0;
  width: 16cqw;
  height: 26cqw;
  background: var(--navy);
  border-radius: 6cqw;
}
.fridge__feet i:first-child { left: 17cqw; }
.fridge__feet i:last-child { right: 17cqw; }

.fridge__shell {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 134cqw;
  background: var(--navy);
  border-radius: 24cqw;
  box-shadow: 2.4cqw 3cqw 0 rgba(17, 17, 17, 0.22);
}
.fridge__top {
  position: absolute;
  left: 8cqw;
  right: 8cqw;
  top: 8cqw;
  height: 52cqw;
  overflow: hidden;
  background: linear-gradient(160deg, var(--fridge-1), var(--fridge-2));
  border-radius: 17cqw 17cqw 3cqw 3cqw;
  box-shadow: inset 0 0 0 0.9cqw #E6F5FF;
}
.fridge__top::after { /* reflet */
  content: "";
  position: absolute;
  left: 6cqw;
  top: 6cqw;
  width: 4cqw;
  height: 20cqw;
  border-radius: 4cqw;
  background: rgba(255, 255, 255, 0.55);
}
.face { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.face * { transition: opacity 0.18s ease; }
.face__eye { transform-box: fill-box; transform-origin: center; transition: scale 0.09s ease-in; }
.is-blink .face__eye { scale: 1 0.08; }
.face__pupil { transition: translate 0.12s ease-out; }
.face__happy, .face__wow { opacity: 0; }
.is-happy .face__happy { opacity: 1; }
.is-happy .face__open, .is-happy .face__smile { opacity: 0; }
.is-open:not(.is-happy) .face__smile { opacity: 0; }
.is-open:not(.is-happy) .face__wow { opacity: 1; }
.face__brow { transform-box: fill-box; transform-origin: center; transition: translate 0.25s ease; }
.is-open .face__brow { translate: 0 -2.5px; }

.fridge__bottom {
  position: absolute;
  left: 8cqw;
  right: 8cqw;
  top: 66cqw;
  height: 60cqw;
  perspective: 520cqw;
}
.fridge__inside {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 3cqw 3cqw 17cqw 17cqw;
  background: radial-gradient(120% 90% at 50% 0%, #FFFFFF 0%, #FFF6D6 55%, #F6D97A 100%);
  box-shadow: inset 0 1.5cqw 0 rgba(28, 34, 64, 0.35);
}
.fridge__shelf {
  position: absolute;
  left: 3cqw;
  right: 3cqw;
  height: 1.6cqw;
  background: rgba(28, 34, 64, 0.28);
  border-radius: 1cqw;
}
.fridge__shelf--1 { top: 18cqw; }
.fridge__shelf--2 { top: 36cqw; }
.fridge__shelf--3 { top: 53cqw; }
.fridge__item { position: absolute; width: 13cqw; height: auto; }
.fridge__item { width: 14cqw; }
.fridge__item--1 { left: 7cqw; top: 4cqw; }
.fridge__item--2 { left: 25cqw; top: 4.5cqw; }
.fridge__item--3 { left: 46cqw; top: 4cqw; width: 16cqw; }
.fridge__item--4 { left: 10cqw; top: 22cqw; }
.fridge__item--5 { left: 30cqw; top: 22cqw; }
.fridge__item--6 { left: 50cqw; top: 21cqw; }
.fridge__item--7 { left: 14cqw; top: 39.5cqw; width: 16cqw; }
.fridge__item--8 { left: 40cqw; top: 39cqw; width: 15cqw; }

.fridge__door {
  position: absolute;
  inset: 0;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
  transition: transform 0.85s cubic-bezier(0.34, 1.42, 0.55, 1);
}
.is-open .fridge__door { transform: rotateY(-104deg); transition-duration: 0.62s; transition-timing-function: cubic-bezier(0.3, 1.25, 0.5, 1); }
.fridge__door-front, .fridge__door-back {
  position: absolute;
  inset: 0;
  border-radius: 3cqw 3cqw 17cqw 17cqw;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.fridge__door-front {
  background: linear-gradient(170deg, var(--fridge-1), var(--fridge-2));
  box-shadow: inset 0 0 0 0.9cqw #E6F5FF;
}
.fridge__door-front::before { /* poignée */
  content: "";
  position: absolute;
  right: 6cqw;
  top: 6cqw;
  width: 15cqw;
  height: 28cqw;
  background: var(--navy);
  border-radius: 8cqw;
}
.fridge__door-front::after {
  content: "";
  position: absolute;
  right: 11.5cqw;
  top: 11cqw;
  width: 4cqw;
  height: 18cqw;
  background: #FFFFFF;
  border-radius: 2cqw;
}
.fridge__door-back { /* l'intérieur de la porte, avec ses balconnets */
  transform: rotateY(180deg);
  background: linear-gradient(170deg, #E9F6FF, #B9DDF5);
  box-shadow: inset 0 0 0 1.2cqw var(--navy);
}
.fridge__door-back::before, .fridge__door-back::after {
  content: "";
  position: absolute;
  left: 4cqw;
  right: 4cqw;
  height: 5cqw;
  border: 1cqw solid var(--navy);
  border-top: 0;
  border-radius: 0 0 2cqw 2cqw;
  background: rgba(255, 255, 255, 0.6);
}
.fridge__door-back::before { top: 14cqw; }
.fridge__door-back::after { top: 34cqw; }

/* Le froid qui s'échappe */
.mist { position: absolute; left: 50%; top: 66%; width: 0; height: 0; pointer-events: none; z-index: 3; }
.mist i {
  position: absolute;
  width: 46px;
  height: 46px;
  margin: -23px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 70%);
  opacity: 0;
}

/* ---------- Les aliments qui jaillissent ---------- */
.pop {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 15%;
  height: auto;
  rotate: var(--r, 0deg);
  filter: drop-shadow(3px 3px 0 rgba(17, 17, 17, 0.2));
  z-index: 2;
  pointer-events: none;
}
.pop--1 { --x: 2%; --y: 30%; --r: -12deg; }
.pop--2 { --x: 80%; --y: 24%; --r: 10deg; }
.pop--3 { --x: 0%; --y: 64%; --r: 14deg; }
.pop--4 { --x: 84%; --y: 56%; --r: -9deg; }
.pop--5 { --x: 14%; --y: 86%; --r: 8deg; width: 13%; }
.pop--6 { --x: 74%; --y: 85%; --r: -14deg; width: 13%; }

/* ---------- La bulle ---------- */
.scene__bubble {
  position: absolute;
  top: 1%;
  right: 0;
  max-width: 62%;
  margin: 0;
  padding: 11px 15px 12px;
  font-family: var(--font-display);
  font-size: clamp(0.9375rem, 0.82rem + 0.5vw, 1.1875rem);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: #111111;
  background: #FFFFFF;
  border: var(--border-thin) solid #111111;
  border-radius: 18px 18px 18px 4px;
  box-shadow: 3px 3px 0 var(--shadow);
  rotate: 2.5deg;
  transform-origin: 0% 100%;
  z-index: 4;
}
.scene__hint {
  position: absolute;
  left: 50%;
  bottom: -3%;
  translate: -50% 0;
  margin: 0;
  padding: 5px 11px;
  font-family: var(--font-display);
  font-size: 0.875rem;
  color: #111111;
  white-space: nowrap;
  background: var(--citron);
  border: var(--border-thin) solid #111111;
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--shadow);
  rotate: -4deg;
  opacity: 0;
  z-index: 4;
  pointer-events: none;
}

/* ==========================================================================
   Mouvement (seulement si le visiteur ne demande pas de réduire les animations, et si le JS tourne)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js-motion .scene .pop { opacity: 0; }
  .js-motion .scene .scene__bubble { opacity: 0; scale: 0.4; }

  .js-motion .scene.is-ready .fridge__lean { animation: fridge-wake 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
  .js-motion .scene.is-talking .scene__bubble { animation: bubble-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
  .js-motion .scene.is-hinting .scene__hint { animation: hint-in 0.4s ease both, hint-nudge 1.6s 0.4s ease-in-out infinite; }

  /* Aliments : jaillissent du frigo (point de départ --sx/--sy calculé en JS), rebondissent, puis flottent */
  .js-motion .scene.has-popped .pop {
    opacity: 1;
    animation:
      pop-out 0.85s cubic-bezier(0.2, 1.3, 0.4, 1) var(--d, 0s) both,
      bob 4.4s ease-in-out calc(var(--d, 0s) + 0.85s) infinite;
  }
  .js-motion .scene.is-jumping .pop { animation: pop-jump 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) var(--d, 0s) both, bob 4.4s ease-in-out calc(var(--d, 0s) + 0.6s) infinite; }

  .js-motion .scene.is-open .mist i { animation: mist 1.6s ease-out var(--md, 0s) both; }
  .mist i:nth-child(1) { --mx: -70px; --my: -40px; --md: 0.05s; }
  .mist i:nth-child(2) { --mx: 60px; --my: -60px; --md: 0.15s; }
  .mist i:nth-child(3) { --mx: -20px; --my: -90px; --md: 0.25s; }
  .mist i:nth-child(4) { --mx: 90px; --my: 10px; --md: 0.1s; }
  .mist i:nth-child(5) { --mx: -95px; --my: 20px; --md: 0.2s; }

  .js-motion .scene.is-wiggle .fridge__lean { animation: wiggle 0.5s ease-in-out; }
}

@keyframes fridge-drop {
  0% { opacity: 0; translate: -50% -60%; scale: 0.9 1.1; }
  55% { opacity: 1; translate: -50% 0; scale: 1.12 0.86; }
  75% { scale: 0.95 1.06; }
  100% { opacity: 1; translate: -50% 0; scale: 1 1; }
}
@keyframes fridge-wake {
  0% { scale: 1; }
  35% { scale: 1.06 0.93; }
  70% { scale: 0.97 1.04; }
  100% { scale: 1; }
}
@keyframes bubble-pop {
  from { opacity: 0; scale: 0.4; }
  to { opacity: 1; scale: 1; }
}
@keyframes pop-out {
  0% { opacity: 0; translate: var(--sx, 0) var(--sy, 0); scale: 0.15; rotate: 0deg; }
  20% { opacity: 1; }
  60% { scale: 1.18; }
  100% { opacity: 1; translate: 0 0; scale: 1; rotate: var(--r, 0deg); }
}
@keyframes pop-jump {
  0%, 100% { translate: 0 0; }
  40% { translate: 0 -26px; scale: 1.1; }
}
@keyframes bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -9px; }
}
@keyframes mist {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
  25% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(var(--mx), var(--my)) scale(2.2); }
}
@keyframes wiggle {
  25% { rotate: -4deg; }
  60% { rotate: 3deg; }
  85% { rotate: -1deg; }
}
@keyframes hint-in { from { opacity: 0; translate: -50% 10px; } to { opacity: 1; translate: -50% 0; } }
@keyframes hint-nudge { 50% { scale: 1.07; } }

/* Mode sombre : le disque garde son bord clair comme les autres cartes colorées */
@media (prefers-color-scheme: dark) {
  .scene__disc { border-color: #F4F0FF; }
}

/* ---------- Mini-frigo du dernier appel : s'ouvre au survol de la carte ---------- */
.end-fridge {
  --navy: #1C2240;
  --fridge-1: #C4E8FE;
  --fridge-2: #7EC3F2;
  position: relative;
  width: 96px;
  aspect-ratio: 100 / 150;
  margin-bottom: 12px;
  rotate: -4deg;
}
.end-fridge .fridge { position: absolute; inset: 0; left: 0; bottom: 0; width: 100%; translate: none; cursor: default; }
.home-cta:hover .end-fridge .fridge__door,
.home-cta:focus-within .end-fridge .fridge__door { transform: rotateY(-104deg); }
.home-cta:hover .end-fridge .face__open,
.home-cta:focus-within .end-fridge .face__open { opacity: 0; }
.home-cta:hover .end-fridge .face__happy,
.home-cta:focus-within .end-fridge .face__happy { opacity: 1; }

/* ---------- Mini-frigo (pages intérieures, 404, défi, invitation) ---------- */
.mini-fridge { position: relative; display: block; width: 110px; aspect-ratio: 100 / 150; flex: none; }
.mini-fridge.mascot--md, .mini-fridge.duel__mascot, .mini-fridge.join__mascot { width: 128px; }
.mini-fridge.duel-card__mascot { width: 64px; }
.mini-fridge .fridge { position: absolute; inset: 0; left: 0; bottom: 0; width: 100%; translate: none; cursor: default; }
.mini-fridge:hover .fridge__door { transform: rotateY(-104deg); }
.mini-fridge:hover .face__open { opacity: 0; }
.mini-fridge:hover .face__happy { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .mini-fridge .fridge__door { animation: door-peek 2.2s ease 0.5s both; }
  .mini-fridge .face__eye { animation: blink 4s ease 1.6s 2; }
}
@keyframes door-peek {
  0%, 100% { transform: rotateY(0deg); }
  30%, 62% { transform: rotateY(-100deg); }
}
@keyframes blink {
  0%, 92%, 100% { scale: 1 1; }
  95% { scale: 1 0.08; }
}
/* Pages de texte : la mascotte à droite du titre */
.doc__header { position: relative; }
.mini-fridge--doc { float: right; width: 92px; margin: 0 0 12px 18px; rotate: 4deg; }
@media (max-width: 600px) { .mini-fridge--doc { width: 70px; margin-left: 12px; } }

/* ---------- Mini-frigo du dernier appel : il entrouvre aussi sa porte en arrivant à l'écran (iPhone) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js-motion .home-cta.is-in .end-fridge .fridge__door { animation: door-peek 2.4s ease 0.3s both; }
}

/* ---------- Pause des animations (WCAG 2.2.2) ---------- */
.motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 6px 12px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--muted);
  background: transparent;
  border: 2px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.motion-toggle:hover { color: var(--ink); border-color: var(--ink); }
.motion-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.motion-toggle svg { width: 14px; height: 14px; fill: currentColor; }
.motion-toggle .is-play { display: none; }
.motion-paused .motion-toggle .is-pause { display: none; }
.motion-paused .motion-toggle .is-play { display: inline; }
.motion-paused .marquee__track,
.motion-paused .timer__arc,
.motion-paused .voice__bars i { animation-play-state: paused !important; }
.motion-paused .scene .pop { animation: none !important; opacity: 1 !important; }
.motion-paused .scene__hint { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .motion-toggle { display: none; } }

/* ---------- Texture du haut de page : halos de couleur et grain très léger ---------- */
.home-hero { position: relative; isolation: isolate; }
.home-hero::before {
  content: "";
  position: absolute;
  inset: -40px 0 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 46% at 86% 34%, rgba(255, 216, 77, 0.30), transparent 70%),
    radial-gradient(30% 40% at 6% 92%, rgba(142, 209, 255, 0.32), transparent 70%),
    radial-gradient(26% 34% at 58% 4%, rgba(255, 167, 181, 0.22), transparent 70%);
}
.home-hero::after {
  content: "";
  position: absolute;
  inset: -40px 0 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  .home-hero::before { opacity: 0.55; }
  .home-hero::after { opacity: 0.05; }
}