/* ===================== RESET ===================== */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: Arial, sans-serif; line-height:1.6; color:#333; }

/* ===================== FOND DE MER ===================== */
.ocean-background {
  position: fixed;
  top:0; left:0;
  width:100%; height:100%;
  background: linear-gradient(to bottom, #81D4FA 0%, #0288D1 60%, #01579B 100%);
  z-index:-5; /* toujours derrière */
}

/* ===================== HEADER ===================== */
header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 20px;
  position: relative;
  z-index:10; /* au-dessus de tout pour rester visible */
  background: rgba(255,255,255,0.8);
}
.logo img { height:60px; }
header nav ul {
  list-style:none;
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}
header nav a { color:#0288D1; text-decoration:none; font-weight:bold; }
header nav a:hover { text-decoration:underline; }

/* ===================== CIEL ===================== */
.sky {
  position: relative;
  height:200px;
  z-index:5; /* au-dessus du fond mais derrière la deep-box */
  text-align:right;
}
.sun, .cloud, .bird { position:absolute; }
.sun { top:30px; right:30px; font-size:3em; color:#FFD54F; }
.cloud { top:60px; left:10%; font-size:3em; opacity:0.8; animation:drift 30s infinite linear; }
.cloud2 { top:100px; left:70%; animation-duration:40s; }
.bird { top:80px; left:20%; font-size:2em; animation:fly 6s infinite ease-in-out; }

@keyframes drift { 0% { transform: translateX(0);} 100% { transform: translateX(200px);} }
@keyframes fly { 0% { transform: translateX(0);} 100% { transform: translateX(200px);} }

/* ===================== VAGUES + BATEAU ===================== */
.surface {
  position: relative;
  height:120px;
  text-align:center;
  z-index:3;
}
.wave { font-size:2em; animation:moveWave 6s infinite linear; }
.boat { position:absolute; top:-20px; left:50%; transform:translateX(-50%); font-size:5em; z-index:4; }

@keyframes moveWave { 0% { transform: translateX(0);} 100% { transform: translateX(100px);} }

/* ===================== MER ET POISSONS ===================== */
.underwater {
  position: relative;
  height:200px;
  z-index:2; /* derrière la deep-box */
}
.fish { position:absolute; font-size:2em; animation:swim 8s infinite linear; }
.fish2 { top:60%; left:80%; animation-duration:10s; }
@keyframes swim { 0% { transform: translateX(0);} 100% { transform: translateX(300px);} }

/* ===================== CASE BLANCHE ===================== */
.deep-box {
  background: rgba(255,255,255,0.7);
  max-width:800px;
  margin: -100px auto 50px auto; /* remonte légèrement pour chevaucher poissons/vagues */
  padding:30px;
  border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,0.3);
  text-align:center;
  color:#222;
  position: relative;
  z-index:6; /* au-dessus de tout sauf header */
}
.deep-box h2 { font-size:2em; color:#01579B; margin-bottom:20px; }
.deep-box p { font-size:1.2em; line-height:1.8; margin-bottom:15px; }

/* ===================== FOOTER ===================== */
footer {
  background:#0288D1;
  height:200px;
  text-align:center;
  padding-top:20px;
  color:#fff;
  font-weight:bold;
  position: relative;
  z-index:5;
}
.corals {
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  font-size:2em;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width:768px){
  header { flex-direction:column; text-align:center; }
  header nav ul { flex-direction:column; align-items:center; gap:10px; }
  .deep-box { margin: -80px 20px 50px 20px; }
}