/* ==========================================================================
   STYLE DE BASE (MODE SOMBRE PAR DÉFAUT)
   ========================================================================== */

/* --- CONTENEUR PRINCIPAL (Carte Combattant) --- */
.fighter-main-card {
    /* Fond sombre par défaut avec un léger dégradé pour le volume */
    background: linear-gradient(145deg, #1e2126, #2a2e35);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* Ombre marquée en mode sombre */
    color: #ffffff; /* Texte blanc par défaut */
    overflow: visible;
    transition: all 0.3s ease;
}
#template-combattant .fighter-main-card .text-muted{
color: #ffffff !important; 
}

/* --- LIGNES DE DONNÉES (Structure Flex) --- */
#template-combattant .data-row {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

#template-combattant .data-row:last-child { border-bottom: none; }

/* Colonne Label (Gauche) */
#template-combattant .data-label {
    float: left;
    width: 200px; /* Largeur fixe pour que tout soit aligné verticalement */
    font-weight: 600;
    color: #adb5bd;
    clear: left; /* Force le retour à la ligne pour le label suivant */
    padding-right: 10px;
}

/* Colonne Valeur (Droite) */
#template-combattant .data-value {
    display: block;
    margin-left: 200px;
	text-align: left;      /* Force l'alignement à gauche */
}

/* --- L'IMAGE FLOTTANTE --- */
#template-combattant .fighter-float-img {
    float: right;
    width: 200px; /* Taille max de l'image */
    margin-left: 20px;
    margin-bottom: 15px;
	
    text-align: center;
    clear: right;
}

/* Force l'image à remplir le conteneur de 150px */
#template-combattant .fighter-float-img img {
    width: 100%;
	border-radius:100px;
	border: 3px solid var(--gold);
    height: auto;
    display: block; /* Évite les petits espaces sous l'image */
}


/* --- BADGES & ÉLÉMENTS --- */
/* Badges gris par défaut (pour le mode sombre) */
#template-combattant .rank-badge-neutral {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 5px 12px; border-radius: 5px; font-size: 0.8rem; font-weight: 700;
    text-decoration: none !important; transition: transform 0.2s;
    
    /* Style sombre par défaut */
    background-color: #3a3f45; 
    color: #e9ecef !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Autres badges colorés (restent similaires) */
#template-combattant .rank-badge {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 5px 12px; border-radius: 5px; font-size: 0.8rem; font-weight: 700;
    color: #fff !important; box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    text-decoration: none !important; transition: transform 0.2s;
}
#template-combattant .rank-badge:hover, .rank-badge-neutral:hover { transform: translateY(-2px); opacity: 0.9; }
/*.rank-badge.red  { background-color: var(--rouge); }*/
#template-combattant .rank-badge.blue { background-color: #0d6efd; }
#template-combattant .rank-badge.gold { background: linear-gradient(135deg, #FFD700, #FDB931); color: #000 !important; }

/* Boutons d'action */
#template-combattant .action-btn {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid transparent; background-color: transparent; color: inherit;
    transition: all 0.2s;
}
#template-combattant .action-btn:hover { background-color: rgba(255,255,255,0.1); }



/* --- STYLE CAPSULE (Défaut = Mode Sombre) --- */
#template-combattant .vote-capsule {
    display: inline-flex;
    align-items: center;
    /* Fond sombre par défaut (transparence blanche légère)background-color: rgba(255, 255, 255, 0.1);*/
    background-color: var(--gold);
    border-radius: 50px;
    padding: 4px 6px 4px 15px;
    border: 3px solid rgba(255, 255, 255, 0.1);
}

#template-combattant .vote-score {
    font-weight: 800;
    font-size: 1rem;
    color: var(--rouge); /* Rouge Bootstrap */
    margin-right: 12px;
    display: flex; align-items: center; gap: 5px;
}
#template-combattant .votecomb-resultat{
font-weight: 800;
    font-size: 0.9rem;
}
#template-combattant .vote-actions {
    display: flex; gap: 2px;
}

#template-combattant .btn-vote {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: none;
    /* Bouton sombre par défaut */
    background: #3a3f45; 
    color: #e9ecef;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: transform 0.2s, background 0.2s;
}

/* Couleurs au survol (Mode Sombre) */
#template-combattant .btn-vote.up:hover { background: var(--vert); color: #fff; } /* Vert */
#template-combattant .btn-vote.down:hover { background: var(--rouge); color: #fff; } /* Rouge */

#template-combattant .btn-vote:hover { transform: scale(1.1); }



/* --- SURCHARGE MODE CLAIR (body.light-mode) --- */
body.light-mode #template-combattant .vote-capsule {
    /* Fond clair (transparence noire légère) */
   /* background-color: rgba(0, 0, 0, 0.05);*/
   /* border-color: rgba(0, 0, 0, 0.1);*/
}

body.light-mode #template-combattant .btn-vote {
    /* Bouton blanc sur fond clair */
    /*background: #ffffff;*/
    /*color: #212529;*/
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Couleurs au survol (Mode Clair) */
/*body.light-mode #template-combattant .btn-vote.up:hover { background: rgba(25, 135, 84, 0.1); color: #198754; }
body.light-mode #template-combattant .btn-vote.down:hover { background: rgba(220, 53, 69, 0.1); color: #dc3545; }*/

/* --- ANIMATION DES POUCES --- */

/* 1. Transition fluide avec effet "rebond" (cubic-bezier) */
#template-combattant .btn-vote i {
    display: inline-block; /* Nécessaire pour le transform */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 2. Au survol : Le pouce grossit et pivote légèrement */
#template-combattant .btn-vote:hover i {
    transform: scale(1.3) rotate(-24deg);
}

/* 3. Spécifique : Le pouce vers le bas pivote dans l'autre sens */
.btn-vote.down:hover i {
    transform: scale(1.3) rotate(24deg);
}

/* 4. Au clic (Active) : Effet d'appui (rétrécit) */
.btn-vote:active i {
    transform: scale(0.9);
    transition-duration: 0.1s;
}


/* --- BADGES CHANGEMENT CLASSEMENT --- */
.rank-change {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 6px; /* Forme arrondie */
    font-size: 0.9rem;
    font-weight: 800;
    margin-left: 6px;
    vertical-align: middle;
	/*line-height: 1;*/
}

/* Montée (Vert) */
.rank-change.up {
    background-color: var(--vert); /* Vert */
    color: #fff;
}

/* Chute (Rouge) */
.rank-change.down {
    background-color: var(--rouge); /* Fond rouge transparent */
    color: #fff; /* Rouge lumineux pour fond sombre */
}

/* --- CORRECTION OPTIQUE ALIGNEMENT --- */

/* On cible l'icône (i) UNIQUEMENT dans le badge vert (.up) */
.rank-change.up i {
    transform: translateY(1px); /* Remonte l'icône d'un pixel */
}

/* Si jamais la rouge te semble aussi décalée, tu peux ajuster ici : */
.rank-change.down i {
    /* transform: translateY(0px); Par défaut c'est souvent bon */
}

/* AJUSTEMENT MODE CLAIR 
body.light-mode .rank-change.up {
    background-color: var(--vert); 
    color: #fff;
}
body.light-mode .rank-change.down {
    color: #dc3545;
    background-color: rgba(220, 53, 69, 0.1);
}
*/

/* ==========================================================================
   SURCHARGE MODE CLAIR (LIGHT MODE) - Selon ton exemple
   ========================================================================== */
body.light-mode .fighter-main-card {
    /* 1. Fond blanc dégradé comme ton exemple */
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    /* 2. Bordure grise claire */
    border-color: #dee2e6;
    /* 3. Texte principal en noir */
    color: #212529;
    /* Ombre plus douce en mode clair */
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}
body.light-mode #template-combattant .fighter-main-card .text-muted{
color: #212529 !important; 
}

/* Adaptation des lignes et labels en mode clair */
body.light-mode #template-combattant .data-row {
    border-bottom-color: #e9ecef; /* Séparateur gris clair */
}
body.light-mode #template-combattant .data-label {
    color: #6c757d; /* Gris plus foncé pour être lisible sur fond blanc */
}
/* Adaptation des textes secondaires Bootstrap */
body.light-mode #template-combattant .text-secondary {
    color: #6c757d !important;
}

/* Adaptation des badges neutres pour le fond blanc */
body.light-mode #template-combattant .rank-badge-neutral {
   /* background-color: #e9ecef; *//* Fond gris très clair */
    /*color: #495057 !important;*/ /* Texte gris foncé */
    box-shadow: none; 
	/*border: 1px solid #dee2e6;*/
}
body.light-mode #template-combattant .rank-badge {
	box-shadow: none;
}
/* Adaptation boutons survol mode clair */
body.light-mode #template-combattant .action-btn:hover {
    background-color: rgba(0,0,0,0.05);
}






/* --- GRILLE DES CLASSEMENTS (Tuiles) --- */
#template-combattant .ranking-grid {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-bottom: 10px; padding-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

#template-combattant .ranking-tile {
    flex: 1 1 auto; min-width: 90px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; padding: 10px;
    text-align: center; text-decoration: none !important;
    transition: transform 0.2s, background 0.2s;
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
}

#template-combattant .ranking-tile:hover { transform: translateY(-3px); background: rgba(255,255,255,0.1); }

#template-combattant .tile-label {
    font-size: 0.75rem; text-transform: uppercase; color: #adb5bd;
    font-weight: 700; margin-bottom: 5px;
	white-space: nowrap;      /* Interdit le retour à la ligne */
    overflow: hidden;         /* Cache ce qui dépasse */
    text-overflow: ellipsis;  /* Ajoute automatiquement "..." à la fin */
    
    /* Force la coupe si ça dépasse la largeur de la tuile */
    max-width: 150px;          
    display: block;           /* Nécessaire pour que ça marche */
    margin: 0 auto 5px auto;  /* Garde le centrage */
}

#template-combattant .tile-value {
    font-size: 1.4rem; font-weight: 800; color: #fff;
    line-height: 1; display: flex; align-items: center; gap: 5px;
}

/* Couleurs spécifiques *//* ffc107 Or *//*Rouge dc3545*//* Bleu 0d6efd**/
#template-combattant .tile-ufc .tile-value { color: #ffc107; }  
#template-combattant .tile-p4p .tile-value { color: #ffc107; } 
/*.tile-div .tile-value { color: #0d6efd; } */

/* MODE CLAIR (Light Mode) - On force le style "Sombre" pour les tuiles */
body.light-mode #template-combattant  .ranking-tile {
    /* On met un vrai gris foncé opaque au lieu du transparent */
    background: #2b3035; 
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15); /* Une ombre pour les détacher du fond blanc */
}

/* On force le texte à rester clair (comme en mode sombre) */
body.light-mode #template-combattant .tile-label { color: #adb5bd; }
body.light-mode #template-combattant .tile-value { color: #fff; }

body.light-mode #template-combattant .tile-ufc .tile-value { color: #ffc107; }  
body.light-mode #template-combattant .tile-p4p .tile-value { color: #ffc107; } 








/* ==========================================================================
   HEADER ACCORDÉON MODERNE
   ========================================================================== */
/* 1. On rend le mouvement fluide */
#template-combattant .anim-icon {
    transition: transform 0.3s ease;
	font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

/* 2. Quand le menu est ouvert (Bootstrap met aria-expanded="true") -> On tourne */
#template-combattant [aria-expanded="true"]  .anim-icon {
    transform: rotate(180deg);
	color: var(--gold, #FFD700);
}



/* ==========================================================================
   LISTE DES COMBATS (Tableau Moderne)
   ========================================================================== */
#template-combattant  .quick-grey{background: #ccc !important;}
#template-combattant  .quick-grey a{color: #212529;}

#template-combattant  .quick-blue{background: #2D89EF !important;}
#template-combattant  .quick-blue a{color: #FFFFFF;}

#template-combattant  .quick-orange{background: #fecc00 !important;}
#template-combattant  .quick-orange a{color: #212529;}

#template-combattant  .quick-red{background: var(--rouge) !important;}
#template-combattant  .quick-red a{color: #FFFFFF;}

#template-combattant  .quick-green{background: var(--vert) !important;}
#template-combattant  .quick-green a{color: #FFFFFF;}

#template-combattant .badge-result{font-weight:600;width:60px;margin:auto;padding-left:5px;padding-right:5px;text-decoration:none !important;border-radius:4px;}
#template-combattant .badge-result a{text-decoration:none !important;}

/* On enlève les bordures par défaut moches */
#template-combattant .modern-table {
    width: 100%;
    border-collapse: separate; /* Permet l'espacement entre les lignes */
    border-spacing: 0; /* On gère l'espacement via le padding */
    margin-top: 10px;
}

/* LA LIGNE (ROW) */
#template-combattant .fight-row td {
    background-color: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 12px 10px;
    vertical-align: middle;
    transition: background 0.2s;
}

/* Effet au survol de la ligne */
#template-combattant .fight-row:hover td {
    background-color: rgba(255, 255, 255, 0.08);
}

/* --- COLONNES SPÉCIFIQUES --- */

/* 1. Résultat (W/L) */
#template-combattant .col-res {
    font-weight: 800;
    text-transform: uppercase;
    width: 60px;
}

/* 2. Adversaire (Le plus important) */
#template-combattant .col-opp {
    font-size: 1rem;
    color: #fff;
    width: 30%; /* On lui donne de la place */
}
#template-combattant .col-opp a {
    color: var(--gold, #FFD700);
    text-decoration: none;
}
#template-combattant .col-opp a:hover {
    color: var(--gold, #FFD700);
    text-decoration: underline;
}

/* 3. Ceinture */
#template-combattant .col-belt {
    width: 0px;
    text-align: center;
}
#template-combattant .col-belt img {
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.5)); /* Petit éclat doré */
}

/* 4. Méthode / Round / Temps */
#template-combattant .col-method {
    font-size: 0.85rem;
    color: #adb5bd;
    line-height: 1.2;
    width: 50px;
}
#template-combattant .time-badge {
    display: inline-block;
    background: rgba(255,255,255,0.1);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 0.7rem;
    margin-top: 3px;
}

#template-combattant .ufc-comb {
	font-weight:500;
}


/* 5. Événement */
#template-combattant .col-event {
    font-size: 0.85rem;
    color: #fff; /* On met l'event en couleur pour le détacher */
}

#template-combattant .col-event a {
	text-decoration:none;
	font-size: 1rem;
	font-weight:500;
	color: var(--gold, #FFD700);
}
#template-combattant .col-event a:hover {text-decoration:underline;}

/* 6. Action (Bouton œil) */
#template-combattant .col-action {
    width: 50px;
    text-align: center;
}
#template-combattant .btn-view {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: #fff;
    transition: all 0.2s;
	text-decoration:none;
}
#template-combattant .btn-view:hover {
    background: var(--gold, #FFD700);
    color: #000;
    transform: scale(1.1);
}
/* --- HEADER DU TABLEAU (Gestion Dark/Light) --- */

/* 1. Par défaut (MODE SOMBRE) */
#template-combattant .combat-header {
	--bs-table-bg: rgba(255, 255, 255, 0.07); 
    --bs-table-color: #fff;
    border-bottom: 2px solid var(--gold, #FFD700); /* Petite ligne or en dessous pour le style */
}

#template-combattant .combat-header th {
    border: none;
    padding: 12px;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

/* 2. MODE CLAIR (On remet ton gris #E5E5E5) */

body.light-mode #template-combattant .fight-row td {
    background-color: #fff; border-bottom-color: #dee2e6;
}
body.light-mode #template-combattant .fight-row:hover td {
    background-color: #f8f9fa;
}
body.light-mode #template-combattant .col-opp { color: #212529; }
body.light-mode #template-combattant .col-opp a { color: #212529; }
body.light-mode #template-combattant .col-method { color: #6c757d; }
body.light-mode #template-combattant .btn-view { background: #e9ecef; color: #495057; }
body.light-mode #template-combattant .col-event a {color: #212529;}
body.light-mode #template-combattant .col-event a:hover {text-decoration:underline;}
body.light-mode #template-combattant .col-event {color: #212529;}



/* ==========================================================================
   SECTION STATISTIQUES
   ========================================================================== */

#template-combattant .stats-container {
    background: rgba(0,0,0,0.2);
    border-radius: 2px;
    padding: 15px;
    margin-top: 0px;
	    
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* Ombre marquée en mode sombre */
}

/* Grille des colonnes (Victoires à gauche / Défaites à droite) */
#template-combattant .stats-grid {
    display: flex;
    gap: 20px;
}
#template-combattant .stats-col {
    flex: 1; /* Chaque colonne prend 50% */
}

/* Lignes de stats */
#template-combattant .stat-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.85rem;
}

#template-combattant .stat-label {
    width: 40px;
    font-weight: 700;
    text-align: right;
    margin-right: 10px;
}

#template-combattant .stat-val {
    width: 30px;
    text-align: center;
    font-weight: 700;
    margin-right: 10px;
}

/* Barres de progression */
#template-combattant .progress-track {
    flex-grow: 1;
    background-color: rgba(255,255,255,0.1);
    height: 18px; /* Hauteur de la barre */
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

#template-combattant .progress-fill {
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 5px;
    font-size: 0.7rem;
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
    transition: width 0.5s ease;
}

/* Couleurs spécifiques */
#template-combattant .txt-win { color: #20c997; }
#template-combattant .bg-win { background-color: var(--vert); }

#template-combattant .txt-loss { color: #ea868f; }
#template-combattant .bg-loss { background-color: var(--rouge); }

/* Séparateur pour mobile */
@media (max-width: 768px) {
    #template-combattant .stats-grid { flex-direction: column; gap: 0; }
    #template-combattant .stats-col { margin-bottom: 20px; }
}

/* MODE CLAIR (Adaptation) */
body.light-mode #template-combattant .stats-header {
    background-color: #e9ecef; color: #212529;
}
body.light-mode #template-combattant .stats-container {
    background: #f8f9fa; border: 1px solid #dee2e6;
}
body.light-mode #template-combattant .progress-track {
    background-color: #e9ecef;
}
body.light-mode #template-combattant .txt-win { color: var(--vert); }
body.light-mode #template-combattant .txt-loss { color: var(--rouge); }

/* AJOUT : Correction visibilité texte en mode clair */
body.light-mode #template-combattant .progress-fill {
    /* Ajoute une petite ombre noire derrière le texte pour qu'il soit lisible sur le blanc */
	color:#333;
    /*text-shadow: 0px 2px 1px rgba(0,0,0,0.1);*/ 
    font-weight: 600; /* On le met un peu plus gras pour la lisibilité */
}

/* Optionnel : On peut foncer un peu la barre vide en mode clair pour aider le contraste */
body.light-mode #template-combattant .progress-track {
    background-color: #dee2e6; /* Un gris un peu plus soutenu */
    border: 1px solid rgba(0,0,0,0.1); /* Une petite bordure pour bien délimiter */
}




/* --- KPI CARDS (Statistiques Rapides) --- */
#template-combattant .kpi-title{
color: #fff;	
}
#template-combattant .kpi-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2px;
	margin-top:10px;
    padding: 8px 10px;
    flex: 1; /* Les cartes prennent toute la largeur dispo */
    text-align: center;
    transition: transform 0.2s;
}

#template-combattant .kpi-card:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.08);
}

#template-combattant .kpi-value {
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    margin-top: 2px;
}

/* Mode Clair */
body.light-mode #template-combattant .kpi-card {
    background: #fff;
    border-color: #dee2e6;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
body.light-mode #template-combattant .kpi-value {
    color: #212529;
}

body.light-mode #template-combattant .kpi-title {
    color: #212529;
}


/* --- ANIMATION FEU (FINISH RATE) --- */

/* L'animation de base (scintillement) */
@keyframes burn-low {
    0% { text-shadow: 0 -2px 4px rgba(255, 215, 0, 0.4); }
    50% { text-shadow: 0 -4px 8px rgba(255, 215, 0, 0.8), 0 0 2px rgba(255, 255, 255, 0.4); }
    100% { text-shadow: 0 -2px 4px rgba(255, 215, 0, 0.4); }
}

@keyframes burn-med {
    0%   { text-shadow: 0 -2px 5px #fd7e14; }
    50%  { text-shadow: 0 -5px 15px #fd7e14, 0 -2px 5px #ffc107; transform: scale(1.05); }
    100% { text-shadow: 0 -2px 5px #fd7e14; }
}

@keyframes burn-max {
    0%   { text-shadow: 0 0 5px #dc3545, 0 -5px 10px #8B0000; }
    25%  { text-shadow: 0 0 10px #dc3545, 0 -10px 20px #ff4500, 0 -2px 5px #fff; }
    50%  { text-shadow: 0 0 5px #dc3545, 0 -15px 25px #ff0000, 0 -5px 10px #fff; transform: scale(1.1); }
    75%  { text-shadow: 0 0 10px #dc3545, 0 -10px 20px #ff4500, 0 -2px 5px #fff; }
    100% { text-shadow: 0 0 5px #dc3545, 0 -5px 10px #8B0000; }
}

/* --- APPLICATION DES CLASSES --- */

/* Niveau 1 : Petite lueur dorée calme */
#template-combattant .fire-low {
    animation: burn-low 2s infinite ease-in-out;
}

/* Niveau 2 : Feu orange moyen (plus rapide) */
#template-combattant .fire-med {
    animation: burn-med 1.5s infinite ease-in-out;
    color: #fd7e14 !important; /* Force l'orange */
}

/* Niveau 3 : L'ENFER (Feu rouge/blanc agressif) */
#template-combattant .fire-max {
    animation: burn-max 0.8s infinite alternate; /* Très rapide et saccadé */
    color: #fff !important; /* Le coeur du feu est blanc/chaud */
}









/* ==========================================================================
   GALERIE COMBATTANT
   ========================================================================== */


/* --- LE CONTENEUR --- */
.gallery-masonry {
    /* ON SUPPRIME column-count */
    display: block; 
    width: 100%;
    text-align: left; /* Force tout à gauche */
    font-size: 0; /* Supprime les micro-espaces entre les photos */
}

/* --- CHAQUE PHOTO --- */
.gallery-item {
    display: inline-block; /* Les photos se suivent horizontalement */
    vertical-align: top;
    width: calc(33.33% - 14px); /* 3 colonnes exactes */
    margin: 7px; /* L'espace entre les photos */
    
    /* Décoration */
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    /* Plus de fond noir ici, la photo remplira tout */
}

/* --- L'IMAGE --- */
.gallery-item img {
    width: 100% !important;
    height: 200px !important; /* Force une hauteur pour que tout soit aligné */
    object-fit: cover; /* Coupe l'image proprement sans la déformer */
    display: block;
    transition: transform 0.5s ease;
}

/* --- EFFET HOVER (MODERNE) --- */
.gallery-item:hover img {
    transform: scale(1.25); /* Zoom léger au survol */
    opacity: 0.9;
}

/* --- RESPONSIVE --- */
@media (max-width: 900px) {
    .gallery-item {
        width: calc(50% - 14px); /* 2 colonnes sur tablette */
    }
}

@media (max-width: 600px) {
    .gallery-item {
        width: calc(100% - 14px); /* 1 colonne sur mobile */
    }
}