/* =========================================================================
   Galerie filtrable Mitya — styles AUTONOMES (scopés sous .mt-gallery)
   + visionneuse (.mt-lb) + comparateur avant/après.
   Spécificité renforcée pour battre les reset.css génériques sur <button>.
   ========================================================================= */

   .mt-gallery{
	--mt-pad:clamp(20px, 5vw, 40px);
	font-family:'Oswald',sans-serif;
	color:#e8e8ec;
}
.mt-gallery *{ box-sizing:border-box; }
.mt-gallery img{ display:block; max-width:100%; }

/* ---- Barre de filtres (spécificité .mt-gallery .mt-filters .mt-f) ------- */
.mt-filters{
	display:flex; flex-wrap:wrap; gap:12px;
	padding:28px var(--mt-pad);
	border-bottom:1px solid #16161b;
	background:#0c0c0f;
}
.mt-gallery .mt-filters .mt-f{
	appearance:none; -webkit-appearance:none;
	font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:.14em;
	text-transform:uppercase; font-weight:400; line-height:1;
	padding:9px 20px; cursor:pointer;
	background:transparent !important;
	border:1px solid #2a2a32 !important;   /* inactif : gris */
	border-radius:0 !important;            /* annule le reset arrondi */
	color:#9a9aa4 !important;              /* inactif : gris */
	text-decoration:none;
	box-shadow:none !important;
	transition:color .2s, border-color .2s, background-color .2s, box-shadow .2s;
}
.mt-gallery .mt-filters .mt-f:hover{ color:#ffffff !important; border-color:#4a4a55 !important; }
.mt-gallery .mt-filters .mt-f:focus-visible{ outline:2px solid #ff2d3f; outline-offset:3px; color:#ffffff !important; }
.mt-gallery .mt-filters .mt-f.is-active{
	color:#ff5a68 !important; border-color:#ff2d3f !important;
	background:rgba(255,45,63,.14) !important;
	box-shadow:0 0 18px rgba(255,45,63,.25) !important;
}
.mt-gallery .mt-filters .mt-f.is-active:hover{ color:#ff8f99 !important; border-color:#ff2d3f !important; }

/* ---- Grille (remplissage garanti) -------------------------------------- */
.mt-grid{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
	gap:12px;
	padding:28px var(--mt-pad) 8px;
}
.mt-gallery .mt-grid .mt-item{
	--glow:255,45,63;
	position:relative; display:block;
	aspect-ratio:3/4; overflow:hidden;
	background:#0c0c0f;
	border:1px solid #1c1c22;
	border-radius:0;
	text-decoration:none;
	transition:box-shadow .3s, border-color .3s;
}
.mt-gallery .mt-grid .mt-item img{
	position:absolute; inset:0;
	width:100%; height:100%;
	object-fit:cover;
}
.mt-gallery .mt-grid .mt-item:hover{
	border-color:rgb(var(--glow));
	box-shadow:0 0 26px rgba(var(--glow), .45);
}
.mt-gallery .mt-grid .mt-item:focus-visible{ outline:2px solid rgb(var(--glow)); outline-offset:2px; }
.mt-badge{
	position:absolute; left:8px; top:8px; z-index:2; pointer-events:none;
	font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:.12em;
	text-transform:uppercase; color:#fff;
	background:rgba(255,45,63,.9); padding:4px 8px;
}

@media (max-width:560px){
	.mt-grid{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; }
	.mt-filters{ gap:8px; justify-content: center;}
	.mt-gallery .mt-filters .mt-f{ padding:8px 14px; }
}
@media (prefers-reduced-motion: reduce){
	.mt-gallery .mt-filters .mt-f, .mt-gallery .mt-grid .mt-item{ transition:none; }
}

/* =========================================================================
   Visionneuse (lightbox) + comparateur avant/après
   ========================================================================= */
.mt-lb{
	position:fixed; inset:0; z-index:99999; display:none;
	align-items:center; justify-content:center;
	background:rgba(5,5,6,.93);
	padding:clamp(16px, 4vw, 56px);
}
.mt-lb.is-open{ display:flex; }
.mt-lb-stage{ margin:0; max-width:min(1100px,100%); max-height:100%; display:flex; flex-direction:column; align-items:center; gap:14px; }
.mt-lb-content{ display:flex; max-width:100%; max-height:82vh; }
.mt-lb-img{ max-width:100%; max-height:82vh; object-fit:contain; display:block; }
.mt-lb-cap{ font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#c4c4cd; }
.mt-lb-close, .mt-lb-nav{
	position:absolute; background:none; border:0; color:#e8e8ec; cursor:pointer;
	line-height:1; opacity:.75; transition:opacity .2s; z-index:5;
}
.mt-lb-close:hover, .mt-lb-nav:hover, .mt-lb-close:focus-visible, .mt-lb-nav:focus-visible{ opacity:1; outline:none; }
.mt-lb-close{ top:16px; right:20px; font-size:34px; }
.mt-lb-nav{ bottom:1%; transform:translateY(-50%);}
.mt-lb-prev{ left:10%; }
.mt-lb-next{ right:10%; }

.mt-ba{
	position:relative; max-width:100%; max-height:82vh; overflow:hidden;
	touch-action:none; user-select:none; cursor:ew-resize; line-height:0;
}
.mt-ba-after{ display:block; max-width:100%; max-height:82vh; width:auto; }
.mt-ba-before{ position:absolute; top:0; left:0; height:100%; width:50%; overflow:hidden; }
.mt-ba-before img{ position:absolute; top:0; left:0; height:100%; width:auto; max-width:none; }
.mt-ba-divider{ position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px; background:#fff; box-shadow:0 0 12px rgba(255,255,255,.6); pointer-events:none; }
.mt-ba-divider span{ position:absolute; top:50%; left:50%; width:34px; height:34px; transform:translate(-50%,-50%); border:2px solid #fff; border-radius:50%; box-shadow:0 0 12px rgba(0,0,0,.5); }
.mt-ba-tag{
	position:absolute; top:12px; z-index:3; pointer-events:none;
	font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:.14em;
	text-transform:uppercase; color:#fff; background:rgba(10,10,12,.7); padding:4px 9px;
}
.mt-ba-tag--b{ left:12px; }
.mt-ba-tag--a{ right:12px; }
.mt-ba-range{
	position:absolute; left:5%; bottom:14px; width:90%; z-index:4;
	appearance:none; -webkit-appearance:none; height:3px; border-radius:3px;
	background:rgba(255,255,255,.4); cursor:pointer;
}
.mt-ba-range::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 0 8px rgba(0,0,0,.5); cursor:pointer; }
.mt-ba-range::-moz-range-thumb{ width:18px; height:18px; border:0; border-radius:50%; background:#fff; cursor:pointer; }