:root {
    --badge-osint: #ff0000;
    --badge-socmint: #1f6feb;
    --badge-geoint: #238636;
    --badge-imint: #8957e5;
    --badge-chronos: #ffb300;
    --badge-tech: #d29922;
    --badge-techint: #ff00f2;
    --badge-humint: #ffd988;
    --badge-finint: #2ea043;
    --badge-sigint: #1eff00;
    --badge-masint: #0095ff;
}

/* ==========================================================================
   FIX LISIBILITÉ : SUPPRESSION FILTRE + RENDU NET + STABILITÉ IMAGES
   ========================================================================== */

/* 1. Suppression du filtre "télé" (scanlines) hérité de style-standart.css */
body::before, 
body::after,
.container::before,
.container::after,
.section-card::after {
    display: none !important;
    content: none !important;
    background: none !important;
    backdrop-filter: none !important;
}

/* 2. Rendu d'image net et suppression du zoom au survol */
.section-card img, 
.screenshot {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 20px auto;
    
    /* Rendu net pour les captures OSINT */
    image-rendering: auto !important; 
    
    /* Style visuel fixe */
    border: 2px solid #811e1e;
    box-shadow: 4px 4px 0px #000;
    
    /* On force la suppression de toute transition ou transformation */
    transition: none !important;
    transform: none !important;
}

/* Sécurité pour le survol spécifique */
.screenshot:hover {
    transform: none !important;
    border-color: #811e1e !important; /* On garde la couleur d'origine */
}

/* 3. Neutralisation des filtres globaux */
body {
    filter: none !important;
}

/* --- FIX DIMENSIONS IMAGES --- */
.section-card img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px auto;
}

/* ==========================================================================
   STYLE SPÉCIFIQUE AUX WRITEUPS (CONTENU UNIQUEMENT)
   ========================================================================== */

/* NOTE TECHNIQUE : 
   Ce fichier ne contient AUCUNE règle pour .navbar, .nav-container ou footer.
   Ces éléments héritent directement de style-standart.css pour garantir 
   le rendu visuel de tes photos de référence.
*/

.container {
    max-width: 1200px; /* On élargit un peu pour que les cases de 400px respirent */
}

/* --- GRILLE DE SÉLECTION --- */
.writeup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); 
    gap: 35px;
    margin-top: 40px;
}

/* --- STYLE DES CARTES (Boîtes rouges RPG) --- */
.writeup-card {
    background: var(--card-bg);
    border: 4px solid var(--accent-color);
    padding: 40px;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    min-height: 350px;
    /* Effet double bordure pixel */
    box-shadow: 0 0 0 4px var(--bg-color), 0 0 0 8px var(--accent-color);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    z-index: 1;
}

/* Effet au survol */
.writeup-card:hover {
    transform: scale(1.03);
    border-color: #ffffff;
    box-shadow: 0 0 0 4px var(--bg-color), 0 0 0 8px #ffffff;
    color: #ffffff;
    z-index: 10;
}

/* --- TYPOGRAPHIE DES CARTES --- */
.writeup-card h3 {
    font-size: 1.8rem;
    margin: 20px 0 15px 0;
    color: var(--accent-hover);
    text-transform: uppercase;
}

.writeup-card p {
    font-size: 1.8rem; /* TAILLE AGRANDIE DEMANDÉE */
    line-height: 1.6;
    color: var(--header-color);
    text-shadow: 2px 2px 0px #000; /* Lisibilité sur le GIF animé */
}

/* --- BADGES --- */
.card-badges {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.card-badges .badge {
    font-size: 1.1rem;
    padding: 5px 15px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    font-weight: bold;
    background: rgba(0,0,0,0.4);
}

/* Couleurs spécifiques des badges */
.badge.osint    { color: var(--badge-osint) !important;   border-color: var(--badge-osint) !important; } 
.badge.socmint  { color: var(--badge-socmint) !important; border-color: var(--badge-socmint) !important; } 
.badge.geoint   { color: var(--badge-geoint) !important;  border-color: var(--badge-geoint) !important; } 
.badge.imint    { color: var(--badge-imint) !important;   border-color: var(--badge-imint) !important; } 
.badge.chronos  { color: var(--badge-chronos) !important; border-color: var(--badge-chronos) !important; } 
.badge.tech     { color: var(--badge-tech) !important;    border-color: var(--badge-tech) !important; } 
.badge.techint  { color: var(--badge-techint) !important; border-color: var(--badge-techint) !important; } 
.badge.humint   { color: var(--badge-humint) !important;  border-color: var(--badge-humint) !important; } 
.badge.finint   { color: var(--badge-finint) !important;  border-color: var(--badge-finint) !important; } 
.badge.sigint   { color: var(--badge-sigint) !important;  border-color: var(--badge-sigint) !important; } 
.badge.masint   { color: var(--badge-masint) !important;  border-color: var(--badge-masint) !important; }

/* --- FOOTER INTERNE À LA CARTE --- */
.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.4rem;
    border-top: 1px solid var(--border-color);
    padding-top: 15px;
    margin-top: auto;
}

.date-tag {
    color: var(--accent-color);
    font-weight: bold;
}

.ascii-subtitle {
    font-size: 1.8rem; /* Taille augmentée */
    text-align: center;
    color: #ff5e5e; /* Utilise le rouge #811e1e */
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-top: 15px;
    font-weight: bold;
    text-shadow: 2px 2px 0px #000;
}


/* --- HEADER & LOGO --- */

/* On garde le reste pour la grille et les cartes */
.writeup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); 
    gap: 35px;
    margin-top: 40px;
}


/* --- STYLE DE LA LOUPE --- */
.magnifier {
    width: 250px;
    height: 250px;
    position: absolute;
    border: 4px solid #811e1e;
    border-radius: 50%;
    cursor: none;
    display: none; /* Masqué par défaut */
    background-repeat: no-repeat;
    background-color: #000;
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
    z-index: 10000;
    pointer-events: none;
    image-rendering: auto !important; /* Pour que le zoom soit net */
}

/* On garde l'image de base fixe et nette */
.screenshot {
    cursor: crosshair !important;
    transition: none !important;
    transform: none !important;
    image-rendering: auto !important;
}

/* ============================================================
   OPTIMISATION LISIBILITÉ - WRITEUPS
   ============================================================ */

/* 1. Corps du texte : Passage au blanc pour le confort visuel */
.section-card p, 
.section-card li {
    font-size: 1.6rem !important;
    line-height: 1.8;             /* Plus d'espace entre les lignes */
    margin-bottom: 25px;          /* Plus d'espace entre les paragraphes */
    color: #e0e0e0 !important;    /* Blanc cassé pour ne pas agresser l'oeil */
    text-align: justify;          /* Aligné des deux côtés pour un look pro */
}

/* 2. Mise en évidence des mots importants */
.section-card strong {
    color: var(--accent-hover);   /* Tes <strong> seront en rouge vif #ff5e5e */
    font-weight: bold;
}

/* 3. Titres : On garde le rouge pour la structure */
.section-card h2 {
    font-size: 2.8rem !important;
    color: var(--accent-hover) !important;
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 10px;
    margin-top: 40px;
    margin-bottom: 30px;
    text-transform: uppercase;
}

/* 4. Style des listes (<li>) */
.section-card li {
    margin-left: 30px;            /* Retrait pour les listes */
    list-style-type: "» ";        /* Puce personnalisée rétro */
    color: var(--header-color) !important;
}

/* 5. Liens : Plus visibles */
.writeup-link {
    font-size: 1.6rem !important;
    text-decoration: underline;
    transition: all 0.2s;
}
.writeup-link:hover {
    color: #ffffff;
    text-shadow: 0 0 8px var(--accent-hover);
}

/* --- SYSTÈME ANTI-SPOIL FLAG --- */

.flag-box {
    background: rgba(129, 30, 30, 0.1);
    border: 2px dashed var(--accent-color);
    padding: 20px;
    text-align: center;
    margin-top: 20px;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

/* L'effet de flou sur le texte du flag */
.flag-text {
    filter: blur(8px); /* Flou important pour masquer */
    transition: filter 0.3s ease;
    user-select: none; /* Empêche de copier sans cliquer */
    font-family: var(--font-pixel);
    font-size: 1.8rem;
    color: var(--accent-hover);
}

/* Quand on clique (active), on enlève le flou */
.flag-box:active .flag-text,
.flag-box.revealed .flag-text {
    filter: blur(0);
    user-select: text;
}

/* Petit texte d'indication au-dessus */
.flag-box::before {
    content: "[ CLIQUEZ POUR RÉVÉLER LE FLAG ]";
    display: block;
    font-size: 0.9rem;
    color: var(--accent-color);
    margin-bottom: 10px;
    transition: opacity 0.3s;
}

.flag-box.revealed::before {
    content: "[ FLAG RÉVÉLÉ ]";
    opacity: 0.5;
}

/* --- RESET STYLE POUR LES GIFS --- */

/* On cible spécifiquement les classes que tu as déjà dans ton HTML */
.kuromi-gif, 
.doom-gif {
    border: none !important;         /* Enlève le rectangle rouge */
    box-shadow: none !important;      /* Enlève l'ombre portée */
    margin: 20px 0 !important;        /* Aligne à gauche (marge 0 à droite/gauche) */
    display: inline-block !important; /* Permet l'alignement à gauche au lieu du centrage */
    max-width: 40px !important;      /* Ajuste la taille si besoin */
    image-rendering: pixelated !important; /* Garde l'aspect rétro net */
}

/* On s'assure que le conteneur du GIF ne force pas le centrage */
.gif-container {
    text-align: left !important;
    width: 100%;
}

/* ============================================================
   SYSTÈME DE BADGES THÉMATIQUES (CADRES ET COULEURS)
   ============================================================ */

/* 1. Style de base des cadres (Identique à la grille de sélection) */
.badge {
    display: inline-block;
    padding: 6px 15px;
    font-size: 1.2rem !important; 
    font-family: var(--font-pixel);
    font-weight: bold;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.7); /* Fond noir semi-transparent */
    border: 2px solid;            /* Cadre imposé */
    margin: 5px;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

/* 2. Couleurs spécifiques par thématique */
.badge.osint    { color: #ff0000 !important; border-color: #ff0000 !important; } 
.badge.socmint  { color: #1f6feb !important; border-color: #1f6feb !important; } 
.badge.geoint   { color: #238636 !important; border-color: #238636 !important; } 
.badge.imint    { color: #8957e5 !important; border-color: #8957e5 !important; } 
.badge.chronos  { color: #ffb300 !important; border-color: #ffb300 !important; } 
.badge.tech     { color: #d29922 !important; border-color: #d29922 !important; } 
.badge.techint  { color: #ff00f2 !important; border-color: #ff00f2 !important; } 
.badge.humint   { color: #ffd988 !important; border-color: #ffd988 !important; } 
.badge.finint   { color: #2ea043 !important; border-color: #2ea043 !important; } 
.badge.sigint   { color: #1eff00 !important; border-color: #1eff00 !important; } 
.badge.masint   { color: #0095ff !important; border-color: #0095ff !important; } 

/* 3. Conteneur pour l'alignement dans le header */
.badge-container {
    margin: 20px 0;
    display: flex;
    flex-wrap: wrap;       
    justify-content: center; 
    gap: 10px;
}