/*
 * ============================================
 * CLS (Cumulative Layout Shift) FIXES
 * ============================================
 * Créé : 15 novembre 2025
 * Objectif : Corriger les problèmes de décalage de mise en page
 * Impact : Amélioration Core Web Vitals Google
 */

/* ==========================================
   1. IMAGES - Préservation de l'aspect ratio
   ========================================== */

/**
 * Problème : 189 images sans width/height causent des décalages
 * Solution : aspect-ratio automatique basé sur les dimensions naturelles
 * Impact : Réserve l'espace AVANT le chargement de l'image
 */

img {
    /* Préserve l'espace pendant le chargement */
    max-width: 100%;
    height: auto;

    /* Moderne : aspect-ratio calculé automatiquement */
    aspect-ratio: attr(width) / attr(height);
}

/* Images sans dimensions explicites : ratio 16:9 par défaut */
img:not([width]):not([height]) {
    aspect-ratio: 16 / 9;
}

/* Images responsive Bootstrap */
.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Centre les images */
.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================
   2. HEADER FIXE - Réservation d'espace
   ========================================== */

/**
 * Problème : Header fixe (position: fixed) ne réserve pas d'espace
 * Solution : Padding-top sur body pour compenser la hauteur du header
 * Impact : Évite le "jump" du contenu quand le header se charge
 */

body {
    /* Réserve l'espace pour le header fixe
     * Calcul: 40px padding-top + 20px padding-bottom + contenu ~60-80px ≈ 140px
     * Ajustement après tests visuels
     */
    padding-top: 0 !important; /* Désactivé temporairement car il y a déjà du padding dans le layout */
}

/* Alternative: wrapper pour le contenu principal */
.white_part:first-of-type,
.dark_part:first-of-type,
#content_wrapper > *:first-child {
    margin-top: 140px; /* Compense le header fixe */
}

/* Ajustement pour mobile */
@media (max-width: 768px) {
    .white_part:first-of-type,
    .dark_part:first-of-type,
    #content_wrapper > *:first-child {
        margin-top: 100px;
    }
}

/* ==========================================
   3. LAZY LOADING - Placeholder pendant le chargement
   ========================================== */

/**
 * Problème : Images lazy-loaded sans placeholder causent des sauts
 * Solution : Background placeholder pendant le chargement
 */

img[loading="lazy"] {
    /* Fond gris pendant le chargement */
    background-color: #f0f0f0;

    /* Animation douce à l'apparition */
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

img[loading="lazy"].loaded,
img[loading="lazy"]:not([src]) {
    opacity: 1;
}

/* ==========================================
   4. CAROUSEL - Hauteur fixe
   ========================================== */

/**
 * Problème : Carousel sans hauteur définie cause un énorme shift
 * Solution : Hauteur minimale fixe
 */

.carousel,
.carousel-inner,
.carousel_photo {
    /* Hauteur minimale pour réserver l'espace */
    min-height: 400px;
}

@media (max-width: 768px) {
    .carousel,
    .carousel-inner,
    .carousel_photo {
        min-height: 250px;
    }
}

/* ==========================================
   5. IFRAMES - Aspect ratio 16:9
   ========================================== */

/**
 * Problème : iframes (YouTube, maps, etc.) sans dimensions causent des shifts
 * Solution : Container avec aspect-ratio
 */

.iframe-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* Ratio 16:9 */
    height: 0;
    overflow: hidden;
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Ratio 4:3 pour certains embeds */
.iframe-container.ratio-4-3 {
    padding-bottom: 75%;
}

/* ==========================================
   6. CONTENU DYNAMIQUE - Skeleton Loaders
   ========================================== */

/**
 * Problème : Contenu chargé dynamiquement (AJAX) cause des shifts
 * Solution : Skeleton placeholders avec hauteur minimale
 */

.loading-skeleton {
    background: linear-gradient(
        90deg,
        #f0f0f0 25%,
        #e0e0e0 50%,
        #f0f0f0 75%
    );
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 4px;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Skeleton pour texte */
.skeleton-text {
    height: 16px;
    margin-bottom: 8px;
}

/* Skeleton pour images */
.skeleton-image {
    aspect-ratio: 16 / 9;
    width: 100%;
}

/* ==========================================
   7. GOOGLE FONTS - Préchargement
   ========================================== */

/**
 * Note : À ajouter dans le <head> de index.php :
 *
 * <link rel="preconnect" href="https://fonts.googleapis.com">
 * <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 * <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=PT+Sans&display=swap">
 */

/* ==========================================
   8. STAY22 WIDGET - Hauteur minimale
   ========================================== */

/**
 * Problème : Widget Stay22 se charge et pousse le contenu
 * Solution : Hauteur minimale réservée
 */

#stay22-widget,
.stay22-container {
    min-height: 600px;
    background-color: #f9f9f9;
}

@media (max-width: 768px) {
    #stay22-widget,
    .stay22-container {
        min-height: 400px;
    }
}

/* ==========================================
   9. ANIMATIONS - Pas de layout shift
   ========================================== */

/**
 * Règle : Les animations ne doivent affecter QUE transform et opacity
 * Jamais : width, height, margin, padding, top, left
 */

.animate-fade-in {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Éviter les animations qui causent des shifts */
* {
    /* Désactive les animations qui modifient la géométrie */
    animation-fill-mode: backwards;
}

/* ==========================================
   10. PUBLICITÉS - Espace réservé
   ========================================== */

/**
 * Problème : Les publicités chargées dynamiquement poussent le contenu
 * Solution : Conteneur avec hauteur fixe
 */

.ad-container {
    min-height: 250px; /* Format standard 300x250 */
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ad-container::before {
    content: '';
    display: block;
}

/* ==========================================
   11. NAVIGATION MOBILE - Hauteur fixe
   ========================================== */

/**
 * Problème : Menu mobile qui s'ouvre/ferme cause des shifts
 * Solution : Utiliser transform au lieu de height
 */

.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}

.mobile-menu.open {
    transform: translateY(0);
}

/* ==========================================
   12. PERFORMANCES - Optimisations diverses
   ========================================== */

/**
 * contain: layout - Isole les éléments pour éviter les recalculs
 * content-visibility: auto - Lazy rendering natif
 */

.card,
.hotel-card,
.offer-card {
    contain: layout style paint;
}

/* Sections non visibles : rendu différé */
section:not(:first-of-type) {
    content-visibility: auto;
    contain-intrinsic-size: 500px; /* Hauteur estimée */
}

/* ==========================================
   FIN DU FICHIER
   ========================================== */