/**
 * Fond typique des Caraïbes pour le site Voyage en Guadeloupe
 * Utilisant l'image de fond Caraibes.jpg
 */

/* Variables de couleurs des Caraïbes */
:root {
    --caribbean-blue: #00c3e3; /* Bleu turquoise des Caraïbes */
    --deep-blue: #005c8f; /* Bleu profond de l'océan */
    --sand-color: #f2d0a4; /* Couleur sable */
    --tropical-green: #4cb944; /* Vert tropical */
    --hibiscus-pink: #ff5a5f; /* Rose hibiscus */
    --palm-green: #2a9d8f; /* Vert palmier */
    --sunset-orange: #ff9a5c; /* Orange coucher de soleil */
}

/* Fond principal avec l'image de plage des Caraïbes */
body {
    background-image: url('../images/Caraibes.jpg') !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    background-position: center center !important;
    position: relative !important;
    overflow-x: hidden !important;
}

/* Overlay pour améliorer la lisibilité */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.75); /* Augmentation de l'opacité pour plus de luminosité */
    z-index: -1;
}

/* Overlay spécifique pour la version ordinateur */
@media (min-width: 992px) {
    body::before {
        background-color: rgba(255, 255, 255, 0.8); /* Encore plus lumineux pour les ordinateurs */
        backdrop-filter: brightness(1.1); /* Augmentation de la luminosité */
    }
}

/* Bordures décoratives pour les éléments */
.info-box {
    border-left: 5px solid var(--caribbean-blue);
    border-right: 5px solid var(--tropical-green);
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

table {
    border-top: 4px solid var(--caribbean-blue);
    border-bottom: 4px solid var(--tropical-green);
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(5px);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

/* Amélioration des en-têtes de tableau */
th {
    background: linear-gradient(135deg, var(--caribbean-blue), var(--deep-blue));
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    border-bottom: 2px solid var(--sand-color);
}

/* Amélioration des étiquettes de jour */
.day-label {
    background: linear-gradient(135deg, var(--sand-color), var(--tropical-green));
    color: var(--deep-blue);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border: 1px solid rgba(255,255,255,0.5);
}

/* Vagues au bas de la page */
footer::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 100%;
    height: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 30' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C150,40 350,0 500,20 C650,40 800,10 1000,30 C1100,40 1200,10 1200,10 L1200,30 L0,30 Z' fill='rgba(255,255,255,0.8)'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* Adaptation pour les appareils mobiles */
@media (max-width: 768px) {
    /* Améliorer la lisibilité sur le fond */
    .info-box, table {
        background-color: rgba(255, 255, 255, 0.92);
    }
    
    /* Renforcer les bordures décoratives pour plus de visibilité */
    .info-box {
        border-left-width: 4px;
        border-right-width: 4px;
    }
    
    /* Améliorer le contraste des étiquettes de jour */
    .day-label {
        font-weight: 700;
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
    }
}