/* ==========================================================================
   Page continue (avec JS et mouvement permis) : une seule toile derrière le site,
   chaleur du four sur le marine, voile d'après-midi chaud sur le crème.
   Aucun bord entre les sections : tout se fond dans les lueurs des transitions.
   ========================================================================== */

:root { --fade: 210px; }
@media (max-width: 899px) { :root { --fade: 150px; } }

/* ---------- Espacements réservés dès le premier affichage (aucun décalage) ---------- */
/* Le texte du hero reste au-dessus du fondu vers le crème */
.js .hero__content { padding-bottom: calc(var(--fade) * 1.25 + 28px); }
@media (max-width: 899px) { .js .hero__content { padding-bottom: calc(var(--fade) * 1.25 + 36px); } }
.js .pizza { padding-bottom: calc(var(--section-y) + var(--fade) * 0.8); }
.js .menu { padding-block: calc(var(--section-y) + var(--fade) * 0.8); }
.js .place { padding-top: calc(var(--section-y) + var(--fade) * 0.8); }
.js .visit { padding-bottom: calc(var(--section-y) + var(--fade) * 0.8); }
.js .site-footer__grid { padding-top: calc(clamp(48px, 6vw, 72px) + var(--fade) * 0.8); }

/* ---------- Les sections n'ont plus de fond ni de bord : la toile peint tout ---------- */
.seamless .pizza, .seamless .menu, .seamless .place, .seamless .visit, .seamless .site-footer { background: transparent !important; }
.seamless .menu::before, .seamless .menu::after,
.seamless .site-footer::before, .seamless .site-footer::after,
.seamless .pizza::before, .seamless .pizza::after, .seamless .place::after, .seamless .visit::after,
.seamless .checker-band { display: none !important; }

.paper { position: absolute; left: 0; right: 0; top: 0; z-index: -2; pointer-events: none; }
.paper::after {
  content: ""; position: absolute; inset: 0; background: var(--grain-dark);
  /* Le grain apparaît progressivement sous l'accueil (aucune ligne où il commence) */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent var(--hb, 0px), #000 calc(var(--hb, 0px) + var(--fade)));
  mask-image: linear-gradient(180deg, transparent 0, transparent var(--hb, 0px), #000 calc(var(--hb, 0px) + var(--fade)));
}

/* ---------- Scène fixe : chaleur du four (marine) et chaleur dorée (pizzeria) ---------- */
.stage { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sw { position: absolute; opacity: 0; will-change: opacity; }
.sw > i { position: absolute; inset: 0; display: block; border-radius: 50%; will-change: transform; }
.e1 { left: -25vw; right: -25vw; bottom: -42vh; height: 88vh; }
.e1 > i {
  background: radial-gradient(closest-side, rgba(226, 110, 52, 0.38), rgba(184, 50, 42, 0.2) 42%, rgba(120, 36, 40, 0.08) 70%, rgba(120, 36, 40, 0) 100%);
  transform-origin: 50% 100%;
}
.e2 { left: -22vw; top: 30vh; width: 64vmax; height: 64vmax; }
.e2 > i { background: radial-gradient(closest-side, rgba(232, 140, 70, 0.15), rgba(232, 140, 70, 0)); }
.e3 { right: -24vw; top: -14vh; width: 58vmax; height: 58vmax; }
.e3 > i { background: radial-gradient(closest-side, rgba(184, 50, 42, 0.13), rgba(184, 50, 42, 0)); }
/* Chaleur dorée : monte du bas de l'écran dans « La pizzeria », avant le rouge du four */
.g1 { left: -30vw; right: -30vw; bottom: -46vh; height: 96vh; }
.g1 > i {
  background: radial-gradient(closest-side, rgba(236, 170, 84, 0.42), rgba(236, 170, 84, 0.2) 45%, rgba(236, 170, 84, 0.06) 75%, rgba(236, 170, 84, 0));
  transform-origin: 50% 100%;
}
@keyframes heat { from { transform: scale(1, 0.9); opacity: 0.72; } to { transform: scale(1.06, 1.1); opacity: 1; } }
@keyframes pool-a { to { transform: translate3d(30vw, -12vh, 0) scale(1.15); } }
@keyframes pool-b { from { transform: scale(1.1); } to { transform: translate3d(-26vw, 20vh, 0) scale(0.9); } }
.motion .e1 > i { animation: heat 6.5s ease-in-out infinite alternate; }
.motion .g1 > i { animation: heat 7.5s ease-in-out -2s infinite alternate; }
.motion .e2 > i { animation: pool-a 21s ease-in-out infinite alternate; }
.motion .e3 > i { animation: pool-b 26s ease-in-out infinite alternate; }

/* ---------- Hero : étincelles au-dessus de la photo, sous le texte ---------- */
.hero-heat { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-heat canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__content { position: relative; z-index: 1; }

/* Jonction hero → crème : fondu chaud par-dessus le bas de la photo, et lueur du four sur la ligne */
/* Présent dans le HTML dès le premier affichage (pas de nouvel élément après le chargement,
   qui retarderait la mesure d'affichage) ; masqué sans JavaScript */
html:not(.js) .hero-seam { display: none; }
.hero-seam { position: relative; z-index: 1; height: 0; pointer-events: none; }
.hero-seam__fade {
  /* Hauteur d'écran : Chrome ne le prend pas pour le plus grand élément affiché (LCP) ;
     le dégradé n'occupe que le bas */
  position: absolute; left: 0; right: 0; bottom: 0; height: 100vh;
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% calc(var(--fade) * 1.3);
  background-image: linear-gradient(180deg,
    color-mix(in oklab, color-mix(in oklab, #1B2A47 100.0%, #BCA792) 0.0%, transparent) 0.0%,
    color-mix(in oklab, color-mix(in oklab, #1B2A47 96.8%, #BCA792) 3.0%, transparent) 8.3%,
    color-mix(in oklab, color-mix(in oklab, #1B2A47 88.1%, #BCA792) 11.2%, transparent) 16.7%,
    color-mix(in oklab, color-mix(in oklab, #1B2A47 74.8%, #BCA792) 23.2%, transparent) 25.0%,
    color-mix(in oklab, color-mix(in oklab, #1B2A47 58.2%, #BCA792) 37.6%, transparent) 33.3%,
    color-mix(in oklab, color-mix(in oklab, #1B2A47 39.3%, #BCA792) 53.1%, transparent) 41.7%,
    color-mix(in oklab, color-mix(in oklab, #1B2A47 19.4%, #BCA792) 68.4%, transparent) 50.0%,
    color-mix(in oklab, color-mix(in oklab, #BCA792 99.0%, #F1ECE1) 82.0%, transparent) 58.3%,
    color-mix(in oklab, color-mix(in oklab, #BCA792 68.2%, #F1ECE1) 92.6%, transparent) 66.7%,
    color-mix(in oklab, color-mix(in oklab, #BCA792 41.1%, #F1ECE1) 98.9%, transparent) 75.0%,
    color-mix(in oklab, color-mix(in oklab, #BCA792 19.5%, #F1ECE1) 100.0%, transparent) 83.3%,
    color-mix(in oklab, color-mix(in oklab, #BCA792 5.2%, #F1ECE1) 100.0%, transparent) 91.7%,
    color-mix(in oklab, color-mix(in oklab, #BCA792 0.0%, #F1ECE1) 100.0%, transparent) 100.0%);
}
.hero-seam__glow { position: absolute; left: 0; right: 0; top: calc(var(--fade) * -1.1); height: calc(var(--fade) * 1.9); }
.hero-seam__glow > i {
  position: absolute; inset: 0; border-radius: 50%;
  border-radius: 0;
  background: radial-gradient(ellipse 72% 50% at 50% 50%, rgba(226, 118, 56, 0.3), rgba(206, 110, 58, 0.14) 45%, rgba(206, 110, 58, 0.04) 75%, rgba(206, 110, 58, 0));
  will-change: transform;
}
/* Respire en hauteur seulement : reste dans la largeur de l'écran, animé par la carte graphique */
@keyframes heat-y { from { transform: scaleY(0.9); opacity: 0.72; } to { transform: scaleY(1.1); opacity: 1; } }
.motion .hero-seam__glow > i { animation: heat-y 6.8s ease-in-out infinite alternate; }

/* ---------- Fonds crème : voile d'après-midi chaud, vivant ---------- */
.veil {
  position: absolute; left: 0; right: 0; overflow: hidden; pointer-events: none;
  /* Fondu aux deux bouts : le voile naît et s'éteint dans les lueurs des transitions */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--fade) * 1.3), #000 calc(100% - var(--fade) * 1.3), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 calc(var(--fade) * 1.3), #000 calc(100% - var(--fade) * 1.3), transparent 100%);
}
.veil i, .veil b { position: absolute; display: block; }
/* Lumière chaude qui entre en haut à gauche, ombre ambrée en bas à droite */
.veil__base {
  inset: 0;
  background:
    radial-gradient(ellipse 75% 55% at 0% 0%, rgba(255, 240, 206, 0.9), rgba(255, 240, 206, 0) 70%),
    radial-gradient(ellipse 70% 60% at 100% 100%, rgba(196, 140, 78, 0.26), rgba(196, 140, 78, 0) 72%),
    linear-gradient(125deg, rgba(222, 180, 118, 0.1) 0%, rgba(200, 150, 90, 0.16) 55%, rgba(176, 124, 70, 0.22) 100%);
}
.veil--lieu .veil__base {
  background:
    radial-gradient(ellipse 75% 50% at 100% 0%, rgba(255, 240, 206, 0.9), rgba(255, 240, 206, 0) 70%),
    radial-gradient(ellipse 70% 55% at 0% 100%, rgba(196, 140, 78, 0.26), rgba(196, 140, 78, 0) 72%),
    linear-gradient(235deg, rgba(222, 180, 118, 0.1) 0%, rgba(200, 150, 90, 0.16) 55%, rgba(176, 124, 70, 0.22) 100%);
}
/* Nappes de lumière chaude qui dérivent (scène fixe, fondues selon la couleur de la page) */
.v1 { left: -18vw; top: -12vh; width: 70vmax; height: 70vmax; }
.v1 > i { background: radial-gradient(closest-side, rgba(255, 246, 224, 0.95), rgba(255, 246, 224, 0)); }
.v2 { right: -24vw; top: 26vh; width: 64vmax; height: 64vmax; }
.v2 > i { background: radial-gradient(closest-side, rgba(226, 164, 96, 0.36), rgba(226, 164, 96, 0)); }
.v3 { left: 22vw; bottom: -30vh; width: 58vmax; height: 58vmax; }
.v3 > i { background: radial-gradient(closest-side, rgba(255, 226, 172, 0.55), rgba(255, 226, 172, 0)); }
@keyframes veil-a { from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.8; } to { transform: translate3d(16vw, 8vh, 0) scale(1.16); opacity: 1; } }
@keyframes veil-b { from { transform: translate3d(0, 0, 0) scale(1.08); opacity: 1; } to { transform: translate3d(-14vw, -10vh, 0) scale(0.92); opacity: 0.7; } }
@keyframes veil-c { from { transform: translate3d(-10vw, 0, 0); opacity: 0.65; } to { transform: translate3d(10vw, -8vh, 0) scale(1.12); opacity: 1; } }
.motion .v1 > i { animation: veil-a 17s ease-in-out infinite alternate; }
.motion .v2 > i { animation: veil-b 22s ease-in-out -4s infinite alternate; }
.motion .v3 > i { animation: veil-c 26s ease-in-out -9s infinite alternate; }