/* =========================================================
   galerie.css — portfolio en vignettes (/galerie/)
   Même identité que l'accueil : fond noir, Montserrat / Roboto.
   ========================================================= */

.gx{
    margin:0;
    min-height:100vh;
    background:#0b0c0e;
    color:#fff;
    font-family:"Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
    -webkit-font-smoothing:antialiased;
}
.gx *{ box-sizing:border-box; }
.gx a{ color:inherit; text-decoration:none; }

.gx-head,
.gx-grid,
.gx-foot{
    max-width:1320px;
    margin:0 auto;
    padding-left:32px;
    padding-right:32px;
}

.gx-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:16px;
    padding-top:44px;
    padding-bottom:44px;
}
.gx-name{
    font-family:"Montserrat", system-ui, sans-serif;
    font-weight:800;
    font-size:20px;
    letter-spacing:.14em;
    text-transform:uppercase;
}
.gx-links{ display:flex; gap:22px; }
.gx-links a,
.gx-foot a{
    color:rgba(255,255,255,.55);
    font-size:13px;
    letter-spacing:.04em;
    transition:color .2s;
}
.gx-links a:hover,
.gx-foot a:hover{ color:#fff; }

/* ---------- Grille ---------- */
.gx-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:44px 28px;
}
.gx-card{ display:block; }
.gx-media{
    position:relative;
    display:block;
    border-radius:10px;
    overflow:hidden;
    background:#16181c;
    box-shadow:0 0 0 1px rgba(255,255,255,.06);
    transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
}
.gx-media img{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:1200 / 630;
    object-fit:cover;
}
/* voile bas, pour que les badges restent lisibles sur toutes les vignettes */
.gx-media::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.78) 0, rgba(0,0,0,.35) 38%, rgba(0,0,0,0) 62%);
    opacity:0;
    transition:opacity .3s;
}
.gx-card:hover .gx-media,
.gx-card:focus-visible .gx-media{
    transform:translateY(-4px);
    box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 18px 40px rgba(0,0,0,.55);
}
.gx-card:focus-visible{ outline:none; }
.gx-card:hover .gx-media::after,
.gx-card:focus-visible .gx-media::after{ opacity:1; }

/* ---------- Étiquette permanente des collaborations ---------- */
.gx-collab{
    position:absolute;
    top:12px;
    left:12px;
    z-index:1;
    padding:4px 10px;
    border-radius:999px;
    background:rgba(11,12,14,.72);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    color:#fff;
    font-family:"Montserrat", system-ui, sans-serif;
    font-size:10px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
}

/* ---------- Badges au survol ---------- */
.gx-tags{
    position:absolute;
    left:14px;
    right:14px;
    bottom:14px;
    z-index:1;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    opacity:0;
    transform:translateY(8px);
    transition:opacity .3s, transform .35s cubic-bezier(.2,.7,.2,1);
}
.gx-card:hover .gx-tags,
.gx-card:focus-visible .gx-tags{ opacity:1; transform:none; }
.gx-tag{
    padding:5px 11px;
    border:1px solid rgba(255,255,255,.28);
    border-radius:999px;
    background:rgba(255,255,255,.12);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    color:#fff;
    font-size:12px;
    font-weight:500;
    line-height:1.3;
    letter-spacing:.02em;
    white-space:nowrap;
}
.gx-tag:first-child{ background:#fff; border-color:#fff; color:#0b0c0e; font-weight:600; }

/* sur écran tactile : pas de survol, les badges passent en ligne sous le nom */
.gx-line{ display:none; }
@media (hover:none){
    .gx-tags{ display:none; }
    .gx-line{
        display:block;
        margin-top:4px;
        font-size:12px;
        color:rgba(255,255,255,.42);
    }
}

.gx-cap{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:12px;
    margin-top:12px;
    font-size:14px;
    font-weight:500;
    color:rgba(255,255,255,.82);
}
.gx-cap small{
    font-size:12px;
    font-weight:400;
    color:rgba(255,255,255,.4);
    white-space:nowrap;
}
.gx-card:hover .gx-cap{ color:#fff; }

/* ---------- Pied ---------- */
.gx-foot{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:28px;
    padding-top:72px;
    padding-bottom:56px;
}

@media screen and (max-width:1000px){
    .gx-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:36px 20px; }
}
@media screen and (max-width:600px){
    .gx-head,
    .gx-grid,
    .gx-foot{ padding-left:16px; padding-right:16px; }
    .gx-head{ flex-direction:column; gap:14px; padding-top:28px; padding-bottom:28px; }
    .gx-grid{ grid-template-columns:1fr; gap:30px; }
}