/* =====================================================================
   PAGE D'ACCUEIL — galerie dynamique (remplace Isotope)
   Grille CSS pure : s'affiche toujours, sans attendre le JavaScript.
   ===================================================================== */
.hg-grid{
    display:flex; flex-wrap:wrap; justify-content:center;
    gap:6px; padding:0 6px;
}
.hg-item{
    position:relative; display:block; overflow:hidden;
    flex:0 0 calc((100% - 18px) / 4);          /* 4 par ligne */
    aspect-ratio:4/3; background:#e9edf3;
}
.hg-item img{
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .6s ease;
}
.hg-overlay{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    background:rgba(37,74,147,.72);            /* bleu du thème */
    opacity:0; transition:opacity .35s ease;
}
.hg-overlay i{
    width:56px; height:56px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:2px solid rgba(255,255,255,.8); color:#fff; font-size:20px;
    transform:scale(.6); transition:transform .35s ease;
}
/* cadre blanc décoratif, repris de l'ancien style du thème */
.hg-overlay::after{
    content:''; position:absolute; inset:18px;
    border:2px solid rgba(255,255,255,.35);
    transform:scale(.9); transition:transform .45s ease;
}
.hg-item:hover img, .hg-item:focus-visible img{ transform:scale(1.08); }
.hg-item:hover .hg-overlay, .hg-item:focus-visible .hg-overlay{ opacity:1; }
.hg-item:hover .hg-overlay i, .hg-item:focus-visible .hg-overlay i{ transform:scale(1); }
.hg-item:hover .hg-overlay::after, .hg-item:focus-visible .hg-overlay::after{ transform:scale(1); }
.hg-item:focus-visible{ outline:3px solid #254a93; outline-offset:-3px; }

/* Tablette */
@media (max-width:991px){
    .hg-item{ flex-basis:calc((100% - 12px) / 3); }   /* 3 par ligne */
}
/* Mobile */
@media (max-width:767px){
    .hg-grid{ gap:4px; padding:0 4px; }
    .hg-item{ flex-basis:calc((100% - 4px) / 2); }    /* 2 par ligne */
    .hg-overlay{ display:none; }                        /* pas de survol au doigt */
}
@media (prefers-reduced-motion:reduce){
    .hg-item img, .hg-overlay, .hg-overlay i, .hg-overlay::after{ transition:none; }
}