html,
body {
    height: 100%;
    margin: 0;
    font-family: sans-serif;
    background-color: #e0f2f7; /* Un bleu très clair pour le reste de la page */
}

body > * {
    margin-bottom: 25px; /* Garde un peu d'espace entre les blocs */
}

a {
    text-decoration: none;
}

.carousel-container {
    height: 50vh; /* Hauteur de ton conteneur de carrousel */
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Important pour que les formes ne débordent pas */

    background-color: #2E64A5; /* Couleur de fond principale du conteneur */
    position: relative; /* Indispensable pour positionner les formes */
    z-index: 0;

    /* Variables CSS pour le parallax des formes (seront utilisées par JS) */
    --sea-shape-1-translateX: 0px;
    --sea-shape-1-translateY: 0px;
    --sea-shape-2-translateX: 0px;
    --sea-shape-2-translateY: 0px;
    --wind-shape-1-translateX: 0px;
    --wind-shape-1-translateY: 0px;
    --wind-shape-2-translateX: 0px;
    --wind-shape-2-translateY: 0px;
    --wind-shape-3-translateX: 0px;
    --wind-shape-3-translateY: 0px;
    --sailboat-translateX: 0px;
    --sailboat-translateY: 0px;
}

/* ⭐⭐⭐ Styles des formes de MER (sea-shapes) ⭐⭐⭐ */
.sea-shape {
    position: absolute;
    z-index: -1; /* Derrière le contenu du carrousel et le voilier */
    filter: blur(5px); /* Pour un effet plus doux, comme de l'eau */
    transition: transform 0.1s ease-out; /* Pour adoucir le mouvement JS */
}

.sea-shape-1 {
    width: 65%; /* Légèrement plus large */
    height: 90%; /* Légèrement plus haut */
    bottom: -35%; /* Descendu un peu plus */
    left: -25%; /* Déplacé un peu plus à gauche */
    background: radial-gradient(ellipse at 50% 100%, rgba(255, 255, 255, 0.45) 0%, transparent 75%);
    border-radius: 0 0 70% 70% / 0 0 120% 120%; /* Courbes plus prononcées et arrondie en bas */
    transform: translateY(var(--sea-shape-1-translateY)) translateX(var(--sea-shape-1-translateX));
}

.sea-shape-2 {
    width: 75%; /* Légèrement plus large */
    height: 100%; /* Plus haut */
    top: 45%; /* Déplacé un peu plus bas */
    right: -35%; /* Déplacé un peu plus à droite */
    background: linear-gradient(160deg, rgba(50, 100, 150, 0.35) 0%, transparent 70%);
    border-radius: 70% 30% 60% 40% / 120% 80% 90% 70%; /* Courbes complexes et asymétriques */
    transform: translateY(var(--sea-shape-2-translateY)) translateX(var(--sea-shape-2-translateX));
}


/* ⭐⭐⭐ Styles des formes de VENT (wind-shapes) ⭐⭐⭐ */
.wind-shape {
    position: absolute;
    z-index: -2; /* Encore plus derrière, effet lointain */
    filter: blur(10px); /* Augmentation du flou pour un aspect encore plus aérien et moins défini */
    transition: transform 0.1s ease-out; /* Pour adoucir le mouvement JS */
    opacity: 0.7; /* Légèrement plus visible malgré le flou */
}

.wind-shape-1 {
    width: 65%; /* Plus large */
    height: 50px; /* Plus épaisse */
    top: 10%;
    left: 5%;
    background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.25) 0%, transparent 85%);
    border-radius: 60% 40% 70% 30% / 80% 20% 90% 10%; /* Courbes très asymétriques pour un effet de gust */
    transform: rotate(-20deg) translateY(var(--wind-shape-1-translateY)) translateX(var(--wind-shape-1-translateX));
}

.wind-shape-2 {
    width: 75%; /* Plus large */
    height: 70px; /* Plus épaisse */
    top: 35%; /* Déplacé légèrement */
    right: 0%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
    border-radius: 40% 60% 50% 50% / 10% 90% 20% 80%; /* Courbes allongées et dynamiques */
    transform: rotate(15deg) translateY(var(--wind-shape-2-translateY)) translateX(var(--wind-shape-2-translateX));
}

.wind-shape-3 {
    width: 55%; /* Plus large */
    height: 40px; /* Plus épaisse */
    bottom: 15%; /* Déplacé légèrement */
    left: 30%; /* Déplacé légèrement */
    background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.15) 0%, transparent 75%);
    border-radius: 70% 30% 60% 40% / 40% 60% 70% 30%; /* Courbes très organiques et irrégulières */
    transform: rotate(30deg) translateY(var(--wind-shape-3-translateY)) translateX(var(--wind-shape-3-translateX));
}


/* ⭐⭐⭐ Le Voilier en CSS ⭐⭐⭐ */
.sailboat {
    position: absolute;
    bottom: 15%; /* Positionne le voilier par rapport au bas du conteneur */
    left: 10%; /* Ajusté pour laisser plus de place au mouvement vers la droite */
    width: 80px;
    height: 0;
    z-index: 1; /* Assure que le voilier est au-dessus des formes de fond */

    /* MODIFIÉ : Géré uniquement par JS via les variables translateX/Y */
    transform: translate(
        var(--sailboat-translateX, 0px), /* X : Juste JS */
        var(--sailboat-translateY, 0px)  /* Y : Juste JS */
    );
    
    /* MODIFIÉ : Transition plus courte et plus réactive pour le scroll */
    transition: transform 0.8s ease-out;
}

/* La coque du voilier */
.sailboat::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 30px solid #5A4B4B;
    border-radius: 5px / 15px;
    transform: translateX(-50%);
}

/* La voile du voilier */
.sailboat::after {
    content: '';
    position: absolute;
    bottom: 30px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 0px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 60px solid white;
    transform: translateX(-20px) rotate(-5deg);
    filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.3));
}


/* Le reste de ton CSS pour le carrousel (carousel-track, carousel-page, etc.) reste inchangé) */
.carousel-track {
    height: 100%;
    width: 100%;
    display: block;
}

.carousel-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1%;
    height: 100%;
    background-color: transparent;
}

.carousel-item {
    background-color: lightgray;
    border-radius: 10px;
    margin: 2px;
    overflow: hidden;

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    z-index: 1; /* Assurez-vous que les items du carrousel sont au-dessus du voilier */
}

.carousel-item .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-color: rgba(103, 102, 219, .8);
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.carousel-item:hover .overlay {
    opacity: 1;
}

.carousel-item:hover {
    transform: scale(1.03) translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.carousel-item.large {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.carousel-item.small:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}

.carousel-item.small:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
}

img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}