#cache_top_paprika {
position:absolute;
width:100%;
z-index:1000;
height:auto;
top:0;
left:0
}

#cache_bottom_paprika {
position:absolute;
width:100%;
z-index:1000;
height:auto;
bottom:0;
left:0
}

/* ====================================================================== */
/* ======== HERO ======================================================== */
/* ====================================================================== */

#game_home {
display:block;
position:relative;
z-index:1;
width:100%;
overflow:hidden;
background-image:url('/img/Summervibes/summervibes_edito.jpg');
background-repeat:no-repeat;
background-size:cover;
background-position:top center;
background-color:#fff;
margin:-1px 0 0 0;
padding:250px 40px 175px
}

#game_home::before,
#cache_top_paprika::before {
content:'';
position:absolute;
display:block;
z-index:9990;
width:100%;
height:6px;
background-color:#63cbdf;
top:-3px;
left:0
}

.contest_content {
position:relative;
display:flex;
z-index:5000;
align-items:center;
gap:50px;
width:100%;
max-width:1000px;
background:rgba(5, 117, 68, 0.85);
backdrop-filter:blur(3px);
border-radius:20px;
box-shadow:0 15px 35px rgba(0,0,0,0.2);
margin:0 auto;
padding:50px
}

.contest_eyebrow {
font-size:1.1rem;
font-weight:700;
color:#f5c518;
margin:0 0 10px 0;
padding:0
}

.contest_title {
font-size:2.2rem;
font-weight:700;
font-family:cronos-pro, sans-serif;
color:#fff;
line-height:1.1;
margin:0 0 16px 0;
padding:0
}

.contest_text {
font-size:1.05rem;
color:#fff;
line-height:1.6;
margin:0 0 28px 0;
padding:0
}

.contest_text strong { color:#f5c518 }

.contest_text_block {
flex:1;
text-align:left
}

.contest_image {
flex-shrink:0;
width:280px;
height:auto;
object-fit:contain;
filter:drop-shadow(0 10px 20px rgba(0,0,0,0.15))
}


@media(max-width:768px) {
	.contest_content {
	flex-direction:column;
	gap:30px;
	text-align:center;
	padding:35px 25px
	}
	
	.contest_text_block { text-align:center }
	
	.contest_image { width:180px }
	
	.contest_title { font-size:1.8rem }
}

:root {
--summer-sea-h:clamp(160px,26vh,300px)
}

#summer_wave {
position:fixed;
z-index:9998;
width:100%;
height:auto;
overflow:hidden;
opacity:0;
bottom:0;
left:0;
pointer-events:none;
transition:opacity .6s ease;
animation:summer_fade 1.8s cubic-bezier(.25,.46,.45,.94) forwards
}

#summer_sea {
position:fixed;
z-index:9999;
width:100%;
height:var(--summer-sea-h);
overflow:hidden;
opacity:0;
bottom:0;
left:0;
pointer-events:none;
transition:opacity .6s ease;
animation:summer_fade 1.8s cubic-bezier(.25,.46,.45,.94) forwards
}

#summer_waveDrift {
display:block;
width:fit-content;
backface-visibility:hidden;
will-change:transform;
animation:summer_waveDrift 11s linear infinite;
margin:0 auto
}

#summer_waveImg {
display:block;
width:auto;
height:clamp(264px,41vh,480px);
transform:rotate(-3deg);
transform-origin:50% 100%;
backface-visibility:hidden;
will-change:transform;
animation:summer_waveTilt 3s ease-in-out infinite alternate
}

#summer_close {
position:fixed;
z-index:10000;
display:flex;
align-items:center;
justify-content:center;
width:30px;
height:30px;
background:rgba(255,255,255,.55);
border:none;
border-radius:50%;
box-shadow:0 2px 6px rgba(0,0,0,.15);
opacity:.45;
font-size:15px;
color:#1E6B3C;
line-height:1;
right:14px;
bottom:calc(var(--summer-sea-h) + 12px);
cursor:pointer;
pointer-events:auto;
transition:opacity .25s ease, transform .25s ease
}

#summer_close:hover {
opacity:1;
transform:scale(1.08)
}

#summer_close:focus-visible {
opacity:1;
outline:2px solid #3DBFCA;
outline-offset:2px
}

.summer_off {
opacity:0 !important;
pointer-events:none
}

#summer_seaWave {
position:absolute;
width:200%;
height:100%;
background:url(/img/Summervibes/sea.png) repeat-x bottom left;
background-size:auto 100%;
bottom:0;
left:0;
backface-visibility:hidden;
will-change:transform;
animation:summer_seaDrift 45s linear infinite
}

@keyframes summer_fade {
to { opacity:1 }
}

@keyframes summer_seaDrift {
from { transform:translate3d(-50%,0,0) }
to { transform:translate3d(0,0,0) }
}

@keyframes summer_waveDrift {
from { transform:translate3d(calc(-50vw - 50%),0,0) }
to { transform:translate3d(calc(50vw + 50%),0,0) }
}

@keyframes summer_waveTilt {
from { transform:rotate(-6deg) }
to { transform:rotate(6deg) }
}

@media(max-width:768px) {
	:root { --summer-sea-h:clamp(120px,20vh,200px) }
	
	#summer_waveImg { height:clamp(180px,26vh,300px) }
}

@media(prefers-reduced-motion:reduce) {
	#summer_waveDrift, #summer_waveImg, #summer_seaWave { animation:none }
}

.ballBounce_wrap {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 160px;
  /* Calcule l'espace maximal de voyage vertical */
  --max-up: calc(160px - var(--ball-size, 80px));
}

/* --- 1. MOUVEMENT HORIZONTAL (Linéaire et constant) --- */
.ballBounce_trackX {
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--ball-size, 80px);
  height: var(--ball-size, 80px);
  animation: ballMoveX var(--ball-duration, 4s) linear infinite;
}

@keyframes ballMoveX {
  0%, 100% { left: 0; }
  50% { left: calc(100% - var(--ball-size, 80px)); }
}

/* --- 2. MOUVEMENT VERTICAL (Courbes de gravité personnalisées) --- */
.ballBounce_trackY {
  width: 100%;
  height: 100%;
  animation: ballBounceY var(--ball-duration, 4s) infinite;
}

@keyframes ballBounceY {
  /* ALLER : Gauche vers Droite */
  0%   { transform: translateY(0); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* Propulsé vers le haut */
  10%  { transform: translateY(calc(-1 * var(--max-up) * 0.9)); animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } /* Sommet 1 (Haut) */
  20%  { transform: translateY(0); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* Sol */
  28%  { transform: translateY(calc(-1 * var(--max-up) * 0.55)); animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } /* Sommet 2 (Moyen) */
  36%  { transform: translateY(0); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* Sol */
  42%  { transform: translateY(calc(-1 * var(--max-up) * 0.25)); animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } /* Sommet 3 (Bas) */
  48%  { transform: translateY(0); animation-timing-function: linear; } /* Arrivée au sol, transition douce */
  
  52%  { transform: translateY(0); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* Roulement léger au mur droit */
  
  /* RETOUR : Droite vers Gauche (Inversé) */
  58%  { transform: translateY(calc(-1 * var(--max-up) * 0.25)); animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); }
  64%  { transform: translateY(0); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  72%  { transform: translateY(calc(-1 * var(--max-up) * 0.55)); animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); }
  80%  { transform: translateY(0); animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  90%  { transform: translateY(calc(-1 * var(--max-up) * 0.9)); animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); }
  100% { transform: translateY(0); }
}

/* --- 3. SQUASH & STRETCH (S'écrase toujours bien à plat sur le sol) --- */
.ballBounce_squash {
  width: 100%;
  height: 100%;
  transform-origin: center bottom;
  animation: ballSquash var(--ball-duration, 4s) ease-in-out infinite;
}

@keyframes ballSquash {
  /* Écrasement synchronisé uniquement aux moments des impacts au sol (0%, 20%, 36%, 48%...) */
  0%, 20%, 36%, 64%, 80%, 100% { transform: scale(1.15, 0.85); }
  /* Reprise de forme rapide juste après l'impact */
  3%, 23%, 39%, 61%, 77%, 97% { transform: scale(1, 1); }
  /* Forme normale en l'air et pendant qu'il roule aux extrémités */
  10%, 17%, 28%, 33%, 42%, 47%, 48%, 52%, 53%, 58%, 72%, 90% { transform: scale(1, 1); }
}

/* --- 4. ROTATION (Le ballon tourne sur lui-même) --- */
.ballBounce_ball {
  width: 100%;
  height: 100%;
  animation: ballRotate var(--ball-duration, 4s) linear infinite;
}

.ballBounce_ball img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes ballRotate {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(420deg); } /* Allez : tourne vers la droite */
  100% { transform: rotate(0deg); }  /* Retour : tourne en sens inverse nativement */
}

/* Accessibilité */
@media(prefers-reduced-motion: reduce) {
  .ballBounce_trackX, .ballBounce_trackY, .ballBounce_squash, .ballBounce_ball { 
    animation: none !important; 
  }
}

.sunFixed_wrap {
position:fixed;
z-index:50;
width:var(--sun-size, 340px);
height:var(--sun-size, 340px);
pointer-events:none;
top:0;
right:0
}

.sunFixed_img {
display:block;
width:100%;
height:100%;
object-fit:contain;
will-change:transform;
backface-visibility:hidden;
transform:translate3d(0,0,0);
animation:sunFixed_spin var(--sun-duration, 60s) linear infinite
}

@keyframes sunFixed_spin {
0%   { transform:rotate(0deg) }
100% { transform:rotate(360deg) }
}