/* Explain: Layout utilities and sea-themed visual styles for the homepage. */
.section-pad {
    padding-top: clamp(5rem, 9vw, 8rem);
    padding-bottom: clamp(5rem, 9vw, 8rem);
}

.hero-split {
    background:
        linear-gradient(115deg, rgba(211, 228, 244, 0.84) 0%, rgba(211, 228, 244, 0.58) 52%, rgba(88, 129, 87, 0.12) 100%);
}

.orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(8px);
    opacity: 0.5;
    pointer-events: none;
    z-index: -1;
}

.orb-sage {
    width: 24rem;
    height: 24rem;
    right: 8%;
    top: 10%;
    background: rgba(88, 129, 87, 0.2);
}

.orb-terracotta {
    width: 18rem;
    height: 18rem;
    left: 4%;
    bottom: 10%;
    background: rgba(163, 177, 138, 0.25);
}

.contact-section {
    background:
        radial-gradient(circle at 8% 16%, rgba(163, 177, 138, 0.2), transparent 24rem),
        linear-gradient(180deg, var(--background-color), var(--surface-color));
}

/* Fond marin — page d'accueil */
.sea-home {
    background: transparent;
}

.sea-home main {
    --background-color: rgba(186, 214, 238, 0.82);
    --surface-color: rgba(168, 200, 228, 0.74);
}

.sea-backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(193, 216, 236, 0.9) 0%,
        rgba(138, 184, 216, 0.95) 45%,
        rgba(56, 126, 175, 0.98) 100%
    );
}

.sea-backdrop::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200vw;
    height: min(45vh, 450px);
    background-repeat: repeat-x;
    background-size: 50% 100%;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0,60 C300,120 300,0 600,60 C900,120 900,0 1200,60 L1200,120 L0,120 Z" fill="rgba(255, 255, 255, 0.15)"/></svg>');
    animation: wave-move 22s linear infinite;
    z-index: 1;
}

.sea-backdrop::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200vw;
    height: min(35vh, 350px);
    background-repeat: repeat-x;
    background-size: 50% 100%;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0,80 C300,20 300,140 600,80 C900,20 900,140 1200,80 L1200,120 L0,120 Z" fill="rgba(33, 137, 194, 0.25)"/></svg>');
    animation: wave-move-rev 18s linear infinite;
    z-index: 2;
}

@keyframes wave-move {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes wave-move-rev {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}