/* =========================
   THEME: AquaVenture
   Ambiance: Aventure & Exploration Sous-Marine
   Compatible avec la structure existante (header, navbar, logo, blocs, responsive)
   ========================= */

/* ===== VARIABLES ===== */
:root{
  --sea-deep: #021827;         /* très profond */
  --sea-mid: #003f5c;          /* bleu profond */
  --sea-light: #007ea7;        /* cyan moyen */
  --sea-sheen: #39c5cf;        /* lumière bleue */
  --accent-warm: #ffd166;      /* accent corail/chaud (petits éléments) */
  --foam: #e8f6f9;             /* texte clair léger */
  --muted: rgba(232,246,249,0.06);
  --glass: rgba(255,255,255,0.03);
  --border-radius: 10px;
  --shadow-deep: 0 12px 30px rgba(0,0,0,0.6);
  --font-main: "Montserrat", sans-serif;
  --font-secondary: "Roboto", sans-serif;
}

/* ===== RESET ===== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font-main);
  background: radial-gradient(circle at 20% 10%, rgba(0,60,80,0.6) 0%, var(--sea-deep) 30%, #000 100%);
  color:var(--foam);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ===== BACKDROP: particules & light cone (subtiles) ===== */
.aqua-backdrop {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

/* light cone (lampe de plongée) */
.aqua-backdrop::before {
  content: "";
  position: absolute;
  left: 12%;
  top: -20%;
  width: 600px;
  height: 1200px;
  background: radial-gradient(ellipse at center, rgba(60,200,220,0.15) 0%, rgba(0,0,0,0) 60%);
  transform: rotate(-18deg);
  filter: blur(28px);
  mix-blend-mode: screen;
  animation: slowSway 8s ease-in-out infinite;
  opacity: 0.85;
}

/* particules suspendues */
.aqua-particles {
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 120px 120px, 60px 60px;
  background-position: 0 0, 30px 40px;
  opacity: 0.45;
  filter: blur(0.6px);
  animation: particlesMove 18s linear infinite;
}

/* ===== HEADER ===== */
.header {
  background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,20,30,0.6));
  border-bottom: 1px solid rgba(255,255,255,0.03);
  box-shadow: var(--shadow-deep);
  position:relative;
  z-index: 20;
}

.header .headerContainer{
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 22px;
  gap:12px;
  flex-wrap:nowrap;
}

/* logo */
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:1.1rem;
  color:var(--sea-sheen);
  text-shadow: 0 2px 12px rgba(57,197,207,0.12);
  flex-shrink:0;
}
.logo img{
  width:56px;height:auto;border-radius:8px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.6), 0 0 14px rgba(57,197,207,0.08);
  transform: translateZ(0);
}

/* ===== NAVIGATION ===== */
.navbar{flex:1;display:flex;justify-content:center}
.nav-menu{
  list-style:none;display:flex;gap:24px;align-items:center;margin:0;padding:0;
}
.nav-menu li a{
  text-decoration:none;color:var(--foam);font-weight:600;letter-spacing:0.4px;
  padding:8px 10px;border-radius:6px;transition: all 0.28s ease;
  display:inline-block;
  font-family:var(--font-secondary);
}
.nav-menu li a:hover{
  background: linear-gradient(90deg, rgba(57,197,207,0.06), rgba(0,126,167,0.06));
  color:var(--sea-sheen);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,126,167,0.12);
}

/* ===== ICONS & SELECT ===== */
.lang-select { background: var(--glass); color:var(--foam); padding:6px 8px; border-radius:6px; border:1px solid rgba(255,255,255,0.03) }
.shopCardIcon, .notifyMenu{
  position:relative; display:block; font-size:15px; cursor:pointer; color:var(--foam); flex-shrink:0;
  padding:6px;border-radius:6px;background:transparent;
}
.cart-count, .notify-count{
  position:absolute; top:-6px; right:-8px; background:var(--accent-warm); color:#032; font-size:11px; padding:2px 6px; border-radius:999px;
  font-weight:700;
}

/* ===== MENU BURGER ===== */
.menu-toggle{
  display:none;font-size:24px;cursor:pointer;color:var(--sea-sheen);flex-shrink:0;
}

/* ===== FULL-WIDTH SECTIONS ===== */
.full-first, .full-seco, .full-terc{
  padding:36px 22px;margin-bottom:22px;border-radius:var(--border-radius);
  box-shadow: var(--shadow-deep);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.03);
}
.full-first{
  background: linear-gradient(180deg, rgba(0,40,50,0.55), rgba(0,30,35,0.6));
  border-top: 5px solid var(--sea-light);
}
.full-seco{
  background: linear-gradient(180deg, rgba(0,32,40,0.45), rgba(0,20,25,0.6));
  border-top: 4px dashed rgba(57,197,207,0.06);
}
.full-terc{
  background: linear-gradient(180deg, rgba(0,20,25,0.45), rgba(0,10,12,0.6));
  border: 1px solid rgba(57,197,207,0.04);
}

/* ===== BLOCS ===== */
.block-first, .block-seco, .block-terc{
  padding:22px;margin-bottom:18px;border-radius:10px;background:linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.06));
  transition:all 0.32s ease; position:relative; overflow:hidden;border-left:4px solid rgba(57,197,207,0.08);
}
.block-first{ border-left-color: var(--sea-light) }
.block-seco{ border-left-color: var(--sea-sheen) }
.block-terc{ border-left-color: rgba(255,209,102,0.08) }

/* hover subtle lift */
.block-hover:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,24,36,0.6); }

/* light caustics overlay (subtile) */
.block-first::after, .block-seco::after, .block-terc::after{
  content:""; position:absolute; inset:0; pointer-events:none; background-image: radial-gradient(circle at 10% 20%, rgba(57,197,207,0.02), transparent 15%), radial-gradient(circle at 80% 70%, rgba(0,126,167,0.015), transparent 20%);
  mix-blend-mode: overlay; opacity:0.9;
}

/* ===== HEADINGS & TYPOGRAPHY ===== */
h1,h2,h3,h4{
  font-family:var(--font-secondary); color:var(--sea-sheen); margin-bottom:12px; text-shadow: 0 6px 18px rgba(0,126,167,0.08);
}
h1{ font-size:2.4rem; border-bottom:2px solid rgba(57,197,207,0.08); padding-bottom:8px }
h2{ color:var(--sea-light); font-size:1.6rem; text-transform:uppercase; letter-spacing:0.8px; }
p{ margin-bottom:14px; color: var(--foam); font-family:var(--font-secondary); line-height:1.7 }

/* ===== TABLES ===== */
.grid{
  width:100%; border-collapse:collapse; margin:20px 0; font-size:15px; border-radius:10px; overflow:hidden;
  background: linear-gradient(180deg, rgba(0,10,12,0.6), rgba(0,5,8,0.6));
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
.grid th{
  background: linear-gradient(90deg, rgba(0,60,80,0.9), rgba(0,90,110,0.9));
  color:var(--foam); padding:12px; font-family:var(--font-secondary); text-transform:uppercase; font-weight:700;
}
.grid td{ padding:12px; border-bottom:1px solid rgba(255,255,255,0.03); color:var(--foam); text-align:center; }
.grid tr:nth-child(even){ background: rgba(255,255,255,0.02) }
.grid tr:hover{ background: rgba(57,197,207,0.03) }

/* ===== BUTTONS ===== */
.button{
  display:inline-block; background: linear-gradient(180deg, var(--sea-light), var(--sea-sheen));
  color:#012; padding:12px 22px; border-radius:10px; text-transform:uppercase; font-weight:700;
  letter-spacing:1px; border:none; cursor:pointer; box-shadow: 0 12px 30px rgba(0,126,167,0.16);
  transition: all 0.26s ease; font-family:var(--font-secondary);
}
.button:hover{ transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,126,167,0.26) }
.button.outline{ background: transparent; color:var(--sea-sheen); border:1px solid rgba(57,197,207,0.12) }

/* decorative beam on button */
.button::before{
  content:""; position:absolute; left:-60%; top:0; width:40%; height:100%; transform:skewX(-18deg);
  background: linear-gradient(90deg, rgba(255,255,255,0.18), rgba(255,255,255,0.02));
  opacity:0.12; transition: all 0.9s ease;
}
.button:hover::before{ left:130%; opacity:0.22 }

/* ===== DIALOG ===== */
#dialog{
  display:none; position:fixed; inset:0; background: rgba(0,6,8,0.82); z-index:3000; justify-content:center; align-items:center;
}
#dialog.show{ display:flex }
#dialog .dialog-content{
  background: linear-gradient(180deg, rgba(0,22,28,0.95), rgba(0,12,15,0.95));
  padding:24px; border-radius:12px; max-width:640px; width:92%;
  box-shadow: 0 24px 60px rgba(0,0,0,0.7), 0 0 40px rgba(0,126,167,0.08);
  border-top: 6px solid var(--sea-light);
}

/* dialog close btn */
#dialog .close-dialog{ position:absolute; top:14px; right:18px; font-size:22px; cursor:pointer; color:var(--foam) }

/* ===== FOOTER ===== */
footer{
  background: linear-gradient(180deg, rgba(0,6,8,0.6), rgba(0,0,0,0.9)); color:var(--foam); text-align:center; padding:18px;
  border-top: 1px solid rgba(57,197,207,0.03);
}

/* ===== SMALL UI DETAILS ===== */
.badge{
  display:inline-block; padding:6px 10px; border-radius:999px; background: linear-gradient(90deg, rgba(57,197,207,0.12), rgba(0,126,167,0.08)); color:var(--foam); font-weight:700;
  border:1px solid rgba(255,255,255,0.02);
}

/* breadcrumb */
.breadCrumb{
  display:flex; flex-wrap:wrap; padding:8px 10px; margin-bottom:1rem; list-style:none; background: rgba(0,10,12,0.45);
  border-radius:8px; color:var(--foam);
}
.breadCrumb li{ display:inline-block; padding-right:10px; color:var(--foam) }
.breadCrumb li::after{ content: " /"; color: rgba(255,255,255,0.06) }
.breadCrumb li:last-child::after{ content:"" }

/* small utility classes for content heights */
.block-height-midlle{ height:300px; margin:0 0 15px 0; overflow:auto; background: linear-gradient(180deg, rgba(0,20,25,0.25), rgba(0,10,12,0.2)); border-radius:8px; padding:10px }
.block-height-hight{ height:420px; margin:0 0 15px 0; overflow:auto; background: linear-gradient(180deg, rgba(0,20,25,0.28), rgba(0,8,10,0.22)); border-radius:8px; padding:10px }

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
  .navbar{
    z-index: 40; position: fixed; top:0; right:-100%;
    background: linear-gradient(180deg, rgba(0,10,12,0.95), rgba(0,6,8,0.98));
    width:70%; height:100vh; flex-direction:column; justify-content:flex-start; align-items:center; padding-top:48px; transition: right 0.36s ease;
    box-shadow: -6px 0 30px rgba(0,0,0,0.7);
  }
  .navbar.active{ right:0 }
  .nav-menu{ flex-direction:column; gap:20px; }
  .menu-toggle{ display:block }
  .header .headerContainer{ flex-wrap:wrap; padding-left:12px; padding-right:12px }
  .lang-select, .shopCardIcon, .notifyMenu{ order:4; margin-top:8px }
}

@media (max-width:768px){
  .full-first, .full-seco, .full-terc{ padding:20px 14px }
  .block-first, .block-seco, .block-terc{ padding:16px }
  #dialog .dialog-content{ width:94%; padding:18px }
}

@media (max-width:480px){
  .header{ padding:8px 0 }
  h1{ font-size:1.8rem }
  .button{ padding:10px 16px; font-size:14px }
}

/* ===== ANIMATIONS ===== */
@keyframes slowSway {
  0%{ transform: rotate(-18deg) translateY(-6px) }
  50%{ transform: rotate(-14deg) translateY(6px) }
  100%{ transform: rotate(-18deg) translateY(-6px) }
}
@keyframes particlesMove {
  from{ background-position: 0 0, 30px 40px }
  to{ background-position: -180px 240px, 90px -120px }
}

/* ===== ACCESSIBILITY & HIGH CONTRAST ===== */
a:focus, button:focus, input:focus { outline: 3px solid rgba(57,197,207,0.12); outline-offset: 2px; border-radius:6px; }

/* ===== UTIL: small helper for accent text ===== */
.accent { color: var(--sea-sheen); font-weight:700; text-shadow: 0 4px 18px rgba(0,126,167,0.06) }



.btn-primary{
   background-color: var(--light-color);
   border-color: var(--metal-color);
   color: var(--primary-color)
}

.btn-primary:hover{
     background-color: var(--metal-color);
   border-color: var(--dark-color);
   color: var(--primary-color)
}


#popupNotify{
    background-color:var(--sea-light);
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0px 0px 10px 15px rgb(0 0 0 / 10%);
    width: 200px;
    color:black;
}