:root {
    --bg: #0b0b0f;
    --card: #16161e;
    --text: #e0e0e0;
    --accent: #ffffff;
    --accent-hover: #00ffaa;
    --border: #2a2a35;
    --visited: #00cc88;
    --cloud: #00bfff;
    --danger: #ff4444;
    --warning: #ffa500;
}

body.light {
    --bg: #f8f9fa;
    --card: #ffffff;
    --text: #1f1f1f;
    --accent: #000000;
    --accent-hover: #006633;
    --border: #d1d5db;
    --visited: #008866;
    --cloud: #0077cc;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--bg);
    color: var(--text);
    margin: 0;
    padding: 0;
    transition: background-color 0.3s, color 0.3s;
}

#loadingStatus { 
    display: none; 
    position: sticky;
    top: 10px; 
    z-index: 150;
    background: var(--bg);
    color: var(--visited);
    padding: 12px; 
    text-align: center;
    font-weight: bold;
    border-radius: 8px;
    max-width: 400px;
    margin: 10px auto;
    /*box-shadow: 0 4px 15px rgba(0,0,0,0.4);*/
}

/* ==========================================
   OPTIMISATION MOBILE (Smartphones & Tablettes)
========================================== */
@media (max-width: 768px) {
    /* 1. Header & Layout */
    .header-container { flex-direction: row; gap: 10px; padding: 0 15px; }
    .logo { font-size: 1.1rem; }
    .main-container { padding: 0 10px; }

    /* 2. Écran d'accueil adapté */
    .welcome-content { padding: 30px 20px; border-radius: 16px; border-width: 1px; width: 100%; box-sizing: border-box; }
    .welcome-content h2 { font-size: 1.4rem; }
    .giant-btn { flex-direction: column; text-align: center; gap: 10px; padding: 15px; }
    .giant-btn .icon { margin-right: 0; font-size: 2rem; }
    .giant-btn .text strong { font-size: 1.1rem; }

    /* 3. Cache les outils PC complétement */
    .pc-tools { display: none !important; }

    /* 4. Structure de la Modale "Ajuster la vue" (Bottom Sheet) */
/* En-tête de la modale centré */
    .bottom-sheet-modal .modal-header {
        border-bottom: 1px solid var(--border);
        padding: 15px 20px;
        display: flex;
        justify-content: center; /* Centre le titre */
        position: relative;
    }
    .bottom-sheet-modal .modal-header h3 { margin: 0; }
    .bottom-sheet-modal .close-modal {
        position: absolute;
        right: 20px; /* Garde la croix à droite */
        top: 50%;
        transform: translateY(-50%);
    }

    .bottom-sheet-modal .modal-content {
        padding: 20px;
        overflow-y: auto;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    /* Groupes d'outils mobile centrés */
    .mobile-toolbar-group {
        border-bottom: 1px dashed var(--border);
        padding-bottom: 15px;
        display: flex;
        flex-direction: column;
        align-items: center; /* Centre les éléments horizontalement */
        text-align: center;
    }
    .mobile-toolbar-group h4 {
        margin: 0 0 10px 0;
        color: var(--accent);
        font-size: 1.1rem;
        width: 100%;
    }

    /* Navigation mobile centrée */
    .nav-group-mobile {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }
    .nav-group-mobile .nav-anchor-btn {
        width: 100%;
        justify-content: center; /* Centre le texte du bouton */
        text-align: center;
        border-radius: 8px;
        padding: 12px;
        background: rgba(255,255,255,0.05);
    }

    .close-tools-btn {
        width: 100%;
        margin-top: auto;
        justify-content: center;
        padding: 15px;
        border-radius: 12px;
    }

    /* 5. Inversion : Floating Action Bar sticks to Top on Mobile */
    .floating-action-bar.visible {
        bottom: auto; /* Annule la position du bas */
        top: 70px; /* Descend sous le header mobile */
    }

    .fab-content { 
        flex-direction: column; gap: 12px; padding: 15px; 
        border-radius: 20px; width: 92%; max-width: 350px; text-align: center; 
    }
    .fab-info { width: 100%; justify-content: center; }
    .fab-buttons { 
        width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; 
    }
    #fabCancelBtn { grid-column: span 2; padding: 12px; font-weight: bold; }

    /* 6. Grille d'images (1 seule colonne) */
    .media-grid { grid-template-columns: 1fr; gap: 15px; padding: 10px 0; }
    .media-container { height: auto; aspect-ratio: 4/3; }

    /* 7. Accordéons aérés */
    .accordion-header { gap: 10px; padding: 12px 15px; flex-wrap: wrap; }
    .accordion-header label { margin-left: 0 !important; width: 100%; justify-content: center; margin-top: 5px; }

    /* Boutons en-tête qui dépassaient */
    .mobile-tools-btn, .header-actions .btn { display: inline-flex; }

    /* Lightbox */
    .nav-btn { padding: 15px 10px; background: rgba(0,0,0,0.5); }
    .lightbox-footer { width: 95%; flex-direction: column; }
    .lightbox-footer .btn { width: 100%; justify-content: center; }
}

/* Sur PC, on cache le bouton outils mobile */
@media (min-width: 769px) {
    .mobile-tools-btn { display: none !important; }
}

/* ==========================================
   LAYOUT PRINCIPAL & ZONE FIXE
========================================== */
.sticky-top-area {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--bg);
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
    transition: background-color 0.3s;
}

body.light .sticky-top-area { box-shadow: 0 10px 30px rgba(0,0,0,0.08); }

.main-header {
    background-color: var(--card);
    border-bottom: 1px solid var(--border);
    padding: 15px 0;
}

.toolbars-container {
    padding-top: 20px;
    max-height: 1000px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.toolbars-container.collapsed {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    pointer-events: none;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.logo { margin: 0; font-size: 1.5rem; font-weight: bold; }
.header-actions { display: flex; gap: 10px; align-items: center; }

.main-container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;
}

/* ==========================================
   BOUTONS ET TOOLBARS
========================================== */
.toolbar {
    display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 20px;
    background: var(--card); padding: 15px; border-radius: 12px;
    border: 1px solid var(--border); justify-content: space-between; align-items: center;
}

.filter-toolbar { background: transparent; border: none; padding: 0; margin-bottom: 0; }
.toolbar-group { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.btn {
    padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer;
    font-weight: 600; font-size: 0.9rem; transition: all 0.2s;
    display: inline-flex; align-items: center; gap: 8px;
}

.grok-link-btn {
    background: var(--cloud); color: #000 !important; border: none; border-radius: 8px;
    padding: 10px; font-weight: 800; cursor: pointer; text-align: center;
    text-decoration: none; display: inline; padding: 10px 20px;
}

.primary-btn { background: var(--accent); color: var(--bg); }
.primary-btn:hover { background: var(--accent-hover); transform: translateY(-2px); }

.secondary { background: transparent; border: 1px solid var(--border); color: var(--text); }
.secondary:hover { border-color: var(--accent); }

.action-btn { background: var(--visited) !important; color: #000; }
.action-btn:hover { filter: brightness(1.1); transform: translateY(-2px); }

.danger-btn { background: transparent; border: 1px solid var(--danger); color: var(--danger); }
.danger-btn:hover { background: var(--danger); color: #fff; }

.outline-btn { border: 1px solid var(--border); }
.outline-btn:hover:not(:disabled) { border-color: var(--text); }
.outline-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.exportjson-btn { background: transparent; border: 1px dashed green; color: var(--visited); font-weight: 500; }
.exportjson-btn:hover { border-color: var(--accent); }

.icon-btn {
    background: transparent; border: 1px solid var(--border); color: var(--text);
    width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-size: 1.2rem; cursor: pointer; transition: all 0.2s;
}
.icon-btn:hover { background: var(--border); }
.icon-btn.warning { border-color: var(--warning); color: var(--warning); }
.icon-btn.warning:hover { background: rgba(255, 165, 0, 0.1); }

.modern-select {
    padding: 10px 15px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--card); color: var(--text); font-size: 0.9rem; cursor: pointer; outline: none;
    text-align: center; /* Centre le texte */
    text-align-last: center; /* Centre l'option sélectionnée */
}
.modern-select:focus { border-color: var(--accent); }

.nav-anchor-btn {
    background: var(--card); border: 1px solid var(--border); color: var(--text);
    padding: 8px 15px; border-radius: 20px; cursor: pointer; font-weight: bold;
    display: flex; align-items: center; gap: 8px; transition: 0.2s;
}
.nav-anchor-btn:hover { border-color: var(--accent); }
.nav-anchor-btn.active { background-color: var(--accent); color: var(--bg); border-color: var(--accent); }
.nav-anchor-btn.active .count-badge { background: rgba(0, 0, 0, 0.2); color: var(--bg); }
body.light .nav-anchor-btn.active .count-badge { background: rgba(255, 255, 255, 0.4); color: var(--bg); }

.count-badge { background: rgba(255,255,255,0.1); padding: 2px 8px; border-radius: 12px; font-size: 0.75rem; }
body.light .count-badge { background: rgba(0,0,0,0.1); }

/* ==========================================
   ÉCRAN D'ACCUEIL (ONBOARDING)
========================================== */
.welcome-screen {
    display: flex; justify-content: center; align-items: center;
    min-height: 80vh; animation: fadeIn 0.5s ease;
}

.welcome-content {
    background: var(--card); padding: 50px; border-radius: 24px;
    border: 2px dashed var(--border); max-width: 600px; text-align: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

body.light .welcome-content { box-shadow: 0 20px 40px rgba(0,0,0,0.05); }
.welcome-content h2 { margin-top: 0; font-size: 2rem; color: var(--accent); }
.big-actions { display: flex; flex-direction: column; gap: 15px; }

.giant-btn {
    display: flex; align-items: center; text-align: left; padding: 20px 25px;
    border-radius: 16px; background: var(--bg); border: 1px solid var(--border);
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; cursor: pointer;
}
.giant-btn.primary-btn { background: var(--accent); color: var(--bg); border: none; }
.giant-btn .icon { font-size: 2.5rem; margin-right: 20px; }
.giant-btn .text strong { display: block; font-size: 1.2rem; margin-bottom: 5px; }
.giant-btn .text span { font-size: 0.9rem; font-weight: normal; opacity: 0.8; }
.giant-btn:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0,0,0,0.15); }

@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================
   BARRE FLOTTANTE D'ACTION (MAGIQUE)
   Par défaut en haut pour descendre sur mobile
========================================== */
.floating-action-bar {
    position: fixed;
    top: -200px; /* Cachée en haut par défaut */
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 9999;
    transition: top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Effet rebond doux */
    pointer-events: none; /* Ne bloque pas le clic quand elle est cachée */
}

.floating-action-bar.visible {
    top: 70px; /* Descend sous le header sur mobile */
    pointer-events: auto;
}

.fab-content {
    background: var(--card);
    border: 2px solid var(--accent);
    padding: 15px 30px;
    border-radius: 50px; /* Forme de pilule très douce */
    display: flex;
    align-items: center;
    gap: 30px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
}

body.light .fab-content {
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.fab-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fab-count {
    background: var(--accent);
    color: var(--bg);
    font-size: 1.2rem;
    font-weight: bold;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.fab-text {
    font-weight: 600;
    font-size: 1.1rem;
}

.fab-buttons {
    display: flex;
    gap: 10px;
}

/* ==========================================
   AFFICHAGE DES MÉDIAS ET CHARGEMENT (SPINNER)
========================================== */

/* 1. Le Spinner (Cercle qui tourne) en arrière-plan */
.media-container::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--visited); /* Le vert de sélection */
    border-radius: 50%;
    animation: spinnerRotate 1s linear infinite;
    z-index: 0;
}

@keyframes spinnerRotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 2. Paramètres de base de l'image et de la vidéo */
.media-container img, 
.media-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: low-quality; 
    filter: contrast(95%); 
    position: relative;
    z-index: 1; /* L'image passe par-dessus le spinner */
}

/* 3. On cache l'image par défaut pour éviter l'icône brisée */
.media-container img {
    opacity: 0;
    transition: opacity 0.4s ease-in-out; /* Apparition douce */
    background-color: var(--bg); /* Couvre parfaitement le fond */
}

/* 4. Quand l'image est enfin chargée, elle apparaît en fondu */
.media-container img.loaded { 
    opacity: 1; 
}

/* 5. Arrêter et masquer définitivement le spinner une fois le média chargé ou réparé */
.media-container:has(img.loaded)::before,
.media-container:has(video)::before {
    display: none;
    animation: none;
}

/* ==========================================
   GALERIE & CARTES
========================================== */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; padding: 20px 0; }

.media-card {
    background: var(--card); border-radius: 12px; overflow: hidden;
    border: 1px solid var(--border); transition: all 0.3s ease;
    display: flex; flex-direction: column; position: relative;
}
.media-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
.media-card.visited { border-color: var(--visited) !important; }
.media-card.viewed { opacity: 0.8; border-color: var(--visited); }

.media-card.visited::after {
    content: "✓ VISITÉS"; position: absolute; top: 10px; right: 10px; padding: 4px 10px; border-radius: 12px; font-size: 0.7rem; font-weight: bold; background: var(--visited); color: #000; z-index: 10; pointer-events: none;
}
.media-card.viewed::after {
    content: "👁️ VUE"; position: absolute; top: 10px; right: 10px; padding: 4px 10px; border-radius: 12px; font-size: 0.7rem; font-weight: bold; background: var(--accent); color: var(--bg); z-index: 10; pointer-events: none;
}
.media-card.visited.viewed::after { content: "✓ VISITÉS"; background: var(--visited); color: #000; }

.media-container { height: 250px; background: #000; position: relative; cursor: pointer; }

.badge {
    position: absolute; top: 10px; left: 10px; padding: 4px 8px; border-radius: 6px;
    font-size: 0.7rem; font-weight: bold; z-index: 2; background: rgba(0,0,0,0.6); color: white;
}
.badge.cloud { background: var(--cloud); color: #fff; }
.badge.local { background: #ffaa00; color: #000; }

/* ==========================================
   ACCORDÉONS & UTILITAIRES
========================================== */
.accordion-header {
    background: var(--card); padding: 15px 20px; border-radius: 12px; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--border); margin-top: 20px; transition: 0.2s;
}
.accordion-header:hover { border-color: var(--accent); }
.accordion-header h2 { margin: 0; font-size: 1.2rem; display: flex; align-items: center; gap: 10px; }
.accordion-icon { transition: transform 0.3s; }
.accordion-header.collapsed .accordion-icon { transform: rotate(-90deg); }
.hidden { display: none !important; }

input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--visited); cursor: pointer; }

.dropzone-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0, 204, 136, 0.15); backdrop-filter: blur(5px); z-index: 9999; border: 4px dashed var(--visited); align-items: center; justify-content: center; flex-direction: column; pointer-events: none;
}
.dropzone-icon { font-size: 5rem; margin-bottom: 20px; }
.dropzone-overlay h2 { color: var(--visited); font-size: 2rem; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }

/* Modales & Lightbox */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 2000; align-items: center; justify-content: center; backdrop-filter: blur(5px); }
.modal-container { background: var(--card); padding: 20px; border-radius: 12px; width: 90%; max-width: 600px; border: 1px solid var(--border); box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.modal-header {border-bottom: 1px solid var(--border);padding-bottom: 15px;display: flex;justify-content: space-between;}
.close-modal { cursor: pointer; font-size: 1.5rem; transition: 0.2s; }
.close-modal:hover { color: var(--danger); }
.session-table { width: 100%; border-collapse: collapse; margin-top: 15px; font-size: 0.9rem; }
.session-table th, .session-table td { padding: 10px; text-align: left; border-bottom: 1px solid var(--border); }

#lightbox { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 3000; justify-content: center; align-items: center; }
.close-btn { position: absolute; top: 20px; right: 30px; font-size: 40px; color: white; cursor: pointer; z-index: 3001; }
.nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); color: white; border: none; font-size: 30px; padding: 20px; cursor: pointer; border-radius: 10px; z-index: 3001; transition: 0.2s; }
.nav-btn:hover { background: rgba(255,255,255,0.3); }
.prev-btn { left: 20px; }
.next-btn { right: 20px; }
#lightboxContent img, #lightboxContent video { max-width: 90vw; max-height: 80vh; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.lightbox-footer { position: absolute; bottom: 75px; width: 100%; text-align: center; }
.lightbox-counter { position: absolute; bottom: 20px; color: white; background: rgba(0,0,0,0.5); padding: 5px 15px; border-radius: 20px; }

/* ==========================================
   MODE COMPACT
========================================== */
.media-grid.compact { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.media-grid.compact .media-card { border-radius: 8px; }
.media-grid.compact .media-container { height: 100px; }
.media-grid.compact .info { display: none !important; }
.media-grid.compact .badge { transform: scale(0.7); transform-origin: top left; }
.media-grid.compact .warning-text { display: none; }
.media-grid.compact .type-badge { display: none; }
.media-grid.compact .warning-badge { padding: 2px 5px; font-size: 14px; }

/* ==========================================
   MARQUEUR DE SCROLL
========================================== */
.scroll-marker {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(100px); 
    background: var(--bg); border: 1px solid var(--border); color: var(--text);
    padding: 10px 20px; border-radius: 30px; font-size: 0.9rem; font-weight: bold;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5); cursor: pointer; 
    z-index: 900; /* Modifié ici : 900 au lieu de 9999 pour rester derrière les modales */
    transition: transform 0.3s, background 0.2s; display: flex; align-items: center;
}
.scroll-marker.visible { transform: translateX(-50%) translateY(0); }
.scroll-marker:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }


/* ==========================================
   BARRE DE NAVIGATION BAS (STYLE APP NATIVE)
========================================== */
@media (min-width: 769px) {
    /* Sur PC, on cache la barre du bas */
    .mobile-bottom-nav { display: none !important; }
}

@media (max-width: 768px) {
    /* 1. On donne de la place au bas de page pour ne pas cacher de contenu */
    body { padding-bottom: 80px; }
    
    /* 2. En-tête : Titre centré et icône à droite */
    .header-container { position: relative; justify-content: center !important; padding: 15px; display: flex; align-items: center; }
    .logo { font-size: 1.2rem !important; text-align: center; margin: 0; padding: 0 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    
    /* Le conteneur des actions se place absolument à droite sur mobile */
    .header-actions { position: absolute; right: 15px; display: flex; align-items: center; gap: 10px; }
    .desktop-only { display: none !important; }
    
    /* On ajuste le bouton compact pour qu'il soit bien rond/petit sur mobile */
    #headerCompactBtn { padding: 6px 12px !important; font-size: 1.1rem; }
    
    /* 4. Le style de la barre de navigation fixée en bas */
    .mobile-bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: var(--card);
        border-top: 1px solid var(--border);
        display: flex;
        justify-content: space-around;
        padding: 10px 0 15px 0; /* Un peu plus de place en bas pour le confort du doigt */
        z-index: 1500;
        box-shadow: 0 -5px 15px rgba(0,0,0,0.3);
    }
    
    body.light .mobile-bottom-nav { box-shadow: 0 -5px 15px rgba(0,0,0,0.05); }
    
    /* 5. Les icônes de la barre */
    .nav-item {
        background: transparent;
        border: none;
        color: var(--text);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        font-size: 0.75rem;
        font-weight: 500;
        cursor: pointer;
        width: 33%;
        transition: color 0.2s;
    }
    .nav-item .icon { font-size: 1.4rem; }
    .nav-item:active { color: var(--accent); opacity: 0.7; }
    
    /* 6. On remonte le marqueur de scroll "🔼" pour qu'il ne touche pas la barre */
    .scroll-marker { bottom: 90px !important; }
}

/* Empêche le badge Collection de s'étirer sur toute l'image */
.badge.collection-badge {
    top: auto !important;
    left: auto !important;
}

/* S'assure que le conteneur des badges est toujours au-dessus de l'image */
.media-container > div:first-child {
    z-index: 10 !important;
}

/* Effet au survol pour le bouton rafraîchir du bas */
.bottom-floating-controls button:hover {
    background: var(--accent) !important;
    color: var(--bg) !important;
    transform: scale(1.1);
    transition: all 0.2s ease-in-out;
}

/* ==========================================
   NUMÉROTATION AUTOMATIQUE PAR SECTION
========================================== */

/* 1. On remet le compteur à zéro au début de chaque grande section */
#jsonLinks, 
#linkedLocalFiles, 
#localFiles {
    counter-reset: section-counter;
}

/* 2. Chaque carte fait avancer le compteur de 1 */
.media-card {
    counter-increment: section-counter;
}

.card-number-badge{
    opacity: 0.15 !important
}
/* 3. On injecte le numéro automatiquement dans le badge */
.card-number-badge::after {
    content: "#" counter(section-counter);

}
/* Cache temporairement le numéro au survol de la carte pour bien voir l'image */
.media-card:hover .card-number-badge {
    opacity: 0.8 !important;
}