/* ==========================================
   1. STRUCTURE DU WRAPPER (PLEINE LARGEUR)
   ========================================== */
.box-container-archive-masonry {
width: 100%;
max-width: none;
padding-left: 40px;
padding-right: 40px;
margin-bottom: 40px;
min-height: 100vh;
box-sizing: border-box;
margin-top: 70px;
}

/* 1. Conteneur parent : le conteneur Masonry */
.daily-masonry-container {
    position: relative;
    width: 100%;
    /* On cache le contenu tant que Masonry n'est pas prêt */
    visibility: hidden; 
    opacity: 0;
    transition: opacity 0.4s ease;
    will-change: opacity;
}

.daily-masonry-container.is-ready {
    visibility: visible;
    opacity: 1;
}

/* 2. Éléments enfants : Supprimez la transition individuelle ici */
.box-content-daily {
    display: block;
    float: left;
    position: relative;
    width: calc((100% - 80px) / 3);
    /* Retirez transition: opacity 0.8s ici pour gagner en performance */
}

/* On n'a plus besoin de la classe .visible sur les enfants 
   car le conteneur parent gère l'affichage global */

/* ==========================================
   2. RÈGLE PAR DÉFAUT : 3 COLONNES
   (Ordinateurs et Tablettes)
   ========================================== */
.box-content-daily {
    display: block;
    float: left; /* Aide à l'alignement initial avant le calcul JS */
    position: relative;
    width: calc((100% - 80px) / 3); /* (100% - 2 espaces de 40px) / 3 */
    opacity: 0; /* L'élément commence invisible */
    transition: opacity 0.8s ease; /* Transition fluide */
}

/* Lorsque l'élément devient visible */
.box-content-daily.visible {
    opacity: 1; /* Devient visible */
}


/* Double colonne sur une grille de 3 */
.box-content-daily.size-2-col {
    width: calc(((100% - 80px) / 3) * 2 + 40px);
}

/* ==========================================
   3. MOBILES (max 768px) : 1 COLONNE
   ========================================== */
@media (max-width: 768px) {
    .box-content-daily,
    .box-content-daily.size-2-col {
        width: 100%;
        margin-bottom: 0px; /* Moins d'espace vertical sur petit écran */
    }
}

/* ==========================================
   4. RÉGLAGE IMAGES
   ========================================== */
/* 1. Le conteneur de l'image (TRÈS IMPORTANT) */
.box-content-daily {
    overflow: hidden; /* Empêche l'image de dépasser du cadre lors du zoom */
}

/* 2. Ta base d'image modifiée */
.box-content-daily img {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    /* On ajoute une transition fluide pour l'effet */
    transition: transform 0.8s ease-in-out; 
}

/* 3. L'effet Hover (Le léger zoom) */
.box-content-daily:hover img {
    /* 1.05 signifie un zoom de 5%. C'est léger et élégant. */
    transform: scale(1.01); 
}

/* ==========================================
   5. TOOLTIP (ACCÉLÉRATION GPU)
   ========================================== */
#custom-tooltip {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    background: #fff;
    color: #111;
    padding: 5px 10px;
    letter-spacing: 0.3px;
    font-size: 15px;
    line-height: 20px;
    white-space: nowrap;
    pointer-events: none; /* La souris traverse l'élément */
    
    will-change: transform;
    transform: translate3d(0, 0, 0); /* Force l'accélération matérielle */
    transition: opacity 0.2s ease;
}
/* Cet élément ne contient rien, il sert juste de règle de calcul pour le JS */
.grid-sizer {
    width: calc((100% - 80px) / 3); /* Pile la taille d'une colonne simple */
}