/* -------------------------------------------------------------------------
   VARIABLES DÉDIÉES AU HERO (ADAPTATIVES)
------------------------------------------------------------------------- */
:root { 
    --wave-ground: #0b0f14; 
}

html[data-theme="dark"]  { --wave-ground: #0b0f14; }
html[data-theme="light"] { --wave-ground: #f5f6fa; }

@media (prefers-color-scheme: light) {
    :root { --wave-ground: #f5f6fa; }
}

/* -------------------------------------------------------------------------
   SECTION HERO - STRUCTURE ET TEXTE
------------------------------------------------------------------------- */
.hero-section {
    position: relative;
    height: 90vh;
    min-height: 500px;
    background: var(--main-blue);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-top: 64px;
}

.hero-inner {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px 160px;
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.hero-title {
    font-size: clamp(3.5rem, 10vw, 9rem);
    font-weight: 800;
    font-family: calibri;
    color: #ffffff;
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1;
}

.hero-subtitle {
    font-size: clamp(1.1rem, 3vw, 2rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    letter-spacing: 0.08em;
}

.hero-logo {
    width: clamp(120px, 18vw, 260px);
    margin-top: 16px;
    filter: drop-shadow(0 6px 30px rgba(0, 0, 0, 0.4));
}

/* -------------------------------------------------------------------------
   ANIMATION DES VAGUES (SVG)
------------------------------------------------------------------------- */
.waves-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 180px;
    overflow: hidden;
    pointer-events: none;
}

.wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 200%;
    height: 100%;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

@keyframes wave-loop {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

.wave-1 { animation: wave-loop 22s linear infinite; }
.wave-2 { animation: wave-loop 15s linear infinite; }
.wave-3 { animation: wave-loop 10s linear infinite; }
.wave-4 {
    animation: wave-loop 7s linear infinite;
    shape-rendering: geometricPrecision;
}