/* ======================================================================== */
/* === STYLES FUSIONNÉS DE TOUTES LES PAGES TUTOPURTOUS (styles.css) === */
/* ======================================================================== */

/* ---------------------------------- */
/* 1. VARIABLES & RESET GLOBAL (Basé sur 'cybersecurite.html' et 'vie-privee.html') */
/* ---------------------------------- */
:root {
    /* Couleurs */
    --primary-color: #00ffaa; /* Vert néon */
    --background-color: #1a1a1a;
    --background-dark: #121212;
    --background-med: #222222; /* Utilisé comme card-bg */
    --text-color: #f0f0f0;
    --text-color-secondary: #aaaaaa;
    
    /* Variables de Séquence (issues du fichier d'accueil initial) */
    --a: var(--primary-color);
    --b: #030303; 
    --c: #101010; 
    --d: var(--text-color); 
    --e: var(--text-color-secondary);
    --f: rgba(255, 255, 255, 0.07); /* Border/Separator */
    --g: 'Inter', sans-serif;
    
    /* Autres */
    --border-color: #333333;
    --shadow-color: rgba(0, 255, 170, 0.2);
    --font-body: 'Inter', sans-serif;
    --font-code: 'Fira Code', monospace;
    --transition-fast: all 0.3s ease-in-out;
    --border-radius-md: 0.75rem;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Styles de désélection pour les pages d'accueil */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Styles de désélection spécifiques (issus du fichier initial) */
::selection { background: transparent; color: inherit; }
::-moz-selection { background: transparent; color: inherit; }

html {
    scroll-behavior: smooth;
    height: 100%;
}

body {
    /* Le fond du body utilise la couleur la plus sombre possible pour les pages de contenu */
    background-color: var(--background-dark); 
    color: var(--text-color);
    font-family: var(--font-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex; /* Utilisé pour le layout min-h-screen */
    flex-direction: column;
    min-height: 100%;
    position: relative;
    overflow-x: hidden;
}

main {
    flex-grow: 1;
}

/* Styles globaux pour le contenu article/légal */
h1, h2, h3 { font-family: var(--font-body); font-weight: 900; }
p, li { color: var(--text-color-secondary); }
strong { color: var(--primary-color); font-weight: 700; }
a {
    text-decoration: none;
    color: var(--primary-color);
    transition: var(--transition-fast);
}
a:hover {
    text-shadow: 0 0 5px var(--primary-color);
}
:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

/* ---------------------------------- */
/* 2. STYLES DU FICHIER D'ACCUEIL INITIAL (classes obfusquées) */
/* ---------------------------------- */
#h { position:fixed;top:0;left:0;width:100%;height:100%;background:var(--b);z-index:1000;display:flex;justify-content:center;align-items:center;transition:opacity .8s ease,visibility .8s ease; }
#h.i { opacity:0;visibility:hidden; }
.j { animation:k 1.5s infinite ease-in-out; }
@keyframes k{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.05);opacity:.8;}}
#l { position:fixed;top:0;left:0;height:3px;background:var(--a);width:0%;z-index:1000; }
#m, #n { position:fixed;top:0;left:0;pointer-events:none;z-index:9999;border-radius:50%;transition:transform .2s ease-out,opacity .2s ease; }
#m { width:8px;height:8px;background-color:var(--a); }
#n { width:40px;height:40px;border:1px solid var(--a); }
.o #n { transform:scale(1.5); }
html { cursor:none; } /* Retiré le cursor:none pour les pages article */

/* Classes CSS principales obfusquées */
.q{ background-color:rgba(3,3,3,.6);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--f); }
.r{ padding:2rem;border-bottom:1px solid var(--f); }
.s{ display:flex;justify-content:space-between;align-items:center;padding:1.5rem 0;font-size:1.25rem;font-weight:700;cursor:pointer;list-style:none;}
.s::after{content:'\f067';font-family:'Font Awesome 6 Free';font-weight:900;transition:transform .3s ease;}
.t{ padding-bottom:1.5rem;color:var(--e);max-width:90%; }
.u { background:var(--c);border:1px solid var(--f);position:relative;overflow:hidden;transition:transform .4s ease,box-shadow .4s ease; }
.u:hover { transform:translateY(-8px);box-shadow:0 0 40px -15px rgba(0,255,170,.2); }
.u .v { position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle 300px at var(--w, 50%) var(--x, 50%),rgba(255,255,255,.05),transparent 80%); }
.y { opacity:0;transform:translateY(40px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1); }
.y.z { opacity:1;transform:translateY(0); }
.aa { display:inline-block;opacity:0;transform:translateY(40px) rotate(5deg);animation:ab 1s forwards cubic-bezier(.16,1,.3,1); }
@keyframes ab{to{opacity:1;transform:translateY(0) rotate(0deg);}}

/* Classes utilitaires complexes (Tailwind remplacé) */
.ac{display:flex;align-items:center;gap:0.75rem;}
.ad{font-size:1.5rem;font-weight:900;}
.ae{font-size:1.5rem;font-weight:700;}
.af{padding-top:8rem;padding-bottom:10rem;}
.ag{max-width:56rem;margin-left:auto;margin-right:auto;}
.ah{font-size:3rem;font-weight:900;letter-spacing:-0.05em;}
.ai{font-size:4.5rem;font-weight:900;letter-spacing:-0.05em;}
.aj{max-width:48rem;}
.ak{font-size:1.125rem;}
.al{margin-bottom:3rem;}
.am{padding-top:3rem;padding-bottom:3rem;}
.an{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem;}
.ao{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;}
.ap{font-size:1.875rem;font-weight:700;}
.aq{font-size:2.25rem;font-weight:700;}
.ar{border-right:1px solid var(--f);padding-right:1rem;}
.as{padding:1.5rem 2.5rem;border-radius:0.5rem;font-size:1.125rem;}
.at{font-size:2.25rem;margin-bottom:1.5rem;}
.au{font-size:1.5rem;font-weight:700;margin-bottom:0.75rem;}
.av{padding-top:6rem;padding-bottom:6rem;}
.aw{margin-top:4rem;padding-top:3rem;padding-bottom:3rem;border-top:1px solid var(--f);}

/* Media Queries pour l'obfuscation responsive */
@media (min-width: 768px) {
    .an{grid-template-columns:repeat(4,minmax(0,1fr));}
    .ah{font-size:5rem;}
}
@media (min-width: 1024px) {
    .al{max-width:50%;text-align:left;}
}

/* ---------------------------------- */
/* 3. STYLES DES PAGES DE CONTENU (Basé sur 'cybersecurite.html', 'vie-privee.html', 'confidentialite.html', 'securite.html') */
/* ---------------------------------- */

/* --- HEADER / NAVIGATION (Styles plus détaillés de 'cybersecurite.html') --- */
.main-header {
    /* La propriété q du fichier d'accueil est remplacée par la version main-header */
    background-color: rgba(18, 18, 18, 0.7); /* Plus sombre */
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 50;
    flex-shrink: 0;
}
.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 4.5rem; /* Utilisé dans les pages article */
}

/* Classes spécifiques pour les headers d'article/légal */
.logo { display: flex; align-items: center; gap: 0.5rem; }
.logo-title { font-size: 1.25rem; font-weight: 700; color: var(--primary-color); }
.logo-tagline { font-size: 0.75rem; color: var(--text-color-secondary); display: none; }
.mobile-menu-btn { display: block; background: none; border: none; cursor: pointer; padding: 0.5rem; z-index: 1000; color: var(--primary-color); font-size: 1.5rem; }
.menu-icon { font-weight: 700; }
.nav-open .menu-icon { transform: rotate(90deg); }
.main-nav {
    position: fixed; top: 4.5rem; left: 0; width: 100%; height: calc(100vh - 4.5rem); 
    background-color: var(--background-dark); transform: translateX(-100%); 
    transition: transform 0.3s ease-in-out; overflow-y: auto; visibility: hidden;
}
.nav-open .main-nav { transform: translateX(0); visibility: visible; }
.main-nav .nav-list { list-style: none; }
.main-nav .nav-list a {
    display: block; padding: 1.25rem 1.5rem; font-size: 1rem; font-weight: 500; 
    border-bottom: 1px solid var(--border-color); transition: var(--transition-fast); 
    color: var(--text-color);
}
.main-nav .nav-list a:hover { background-color: var(--background-med); color: var(--primary-color); }


/* --- FOOTER --- */
.main-footer {
    padding: 3rem 1rem;
    background-color: var(--background-med); /* Utilisation de la variable -background-med de la page article */
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}
.footer-copyright {
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-color-secondary);
}

/* --- ARTICLES / CONTENU LÉGAL --- */
.article-content, .legal-content {
    padding: 2rem;
    background-color: var(--background-med);
    border-radius: var(--border-radius-md);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    margin-top: 2.5rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.legal-content a, .article-content a { text-decoration: underline; }
.article-content h1 {
    font-size: clamp(2.5rem, 5vw, 3rem);
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 2rem;
    line-height: 1.2;
}
.article-content h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-color);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}
.article-content h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}
.article-content .breadcrumb, .legal-content .breadcrumb {
    font-size: 0.9rem;
    color: var(--text-color-secondary);
    margin-bottom: 2rem;
    text-align: left;
}
.article-content .breadcrumb a, .legal-content .breadcrumb a {
    color: var(--primary-color);
    text-decoration: underline;
}
.article-content ul, .article-content ol {
    padding-left: 2rem;
    margin-bottom: 1rem;
}

/* --- COMPOSANTS SPÉCIFIQUES --- */
.article-card { 
    background-color: var(--background-med); border: 1px solid var(--border-color); transition: var(--transition-fast); 
}
.article-card:hover { 
    transform: translateY(-8px); border-color: var(--primary-color); 
    box-shadow: 0 10px 30px -10px rgba(0, 255, 170, 0.15); 
}
.hero-title { text-shadow: 0 0 15px rgba(0, 255, 170, 0.2); } /* Index Catégorie */

.concept-item { /* Cybersecurite.html */
    display: flex; align-items: flex-start; margin-bottom: 1rem; background-color: var(--background-med); 
    padding: 1rem; border: 1px solid var(--border-color); border-radius: var(--border-radius-md); 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.concept-item i { font-size: 1.5rem; margin-right: 1rem; color: var(--primary-color); flex-shrink: 0; }
.concept-item div { flex-grow: 1; }
.concept-item p { color: var(--text-color-secondary); }

.info-box { /* Vie-privee.html */
    background-color: rgba(0, 255, 170, 0.1); border-left: 4px solid var(--primary-color); padding: 1rem; 
    margin-top: 2rem; margin-bottom: 2rem; color: var(--primary-color);
}
.info-box strong { color: var(--primary-color); }

.callout { /* Vie-privee.html */
    background-color: rgba(255, 255, 0, 0.1); border-left: 4px solid yellow; padding: 1rem; 
    margin-top: 2rem; font-style: italic; color: yellow;
}
.callout strong { color: yellow; }

.security-tip-card { /* securite.html */
    background-color: rgba(0, 255, 170, 0.1); border-left: 4px solid var(--primary-color); padding: 1rem 1.5rem; 
    border-radius: 0.5rem; margin-bottom: 1rem; color: var(--primary-color);
}
.security-tip-card p { color: var(--primary-color); }

.warning-card { /* securite.html */
    background-color: rgba(255, 0, 0, 0.1); border-left: 4px solid red; padding: 1rem 1.5rem; 
    border-radius: 0.5rem; margin-bottom: 1rem; color: red;
}
.warning-card p { color: red; }

/* Styles Desktop (>= 1024px) pour la navigation des pages de contenu */
@media (min-width: 1024px) {
    .logo-tagline { display: block; }
    .mobile-menu-btn { display: none; }
    .main-nav {
        position: static; width: auto; height: auto; background: none; 
        transform: none; transition: none; overflow-y: visible; visibility: visible;
    }
    .main-nav .nav-list { display: flex; gap: 0.5rem; }
    .main-nav .nav-list a {
        padding: 0.5rem 0.75rem; border-bottom: none; border-radius: 0.375rem; 
        color: var(--text-color-secondary);
    }
    .main-nav .nav-list a:hover { color: var(--primary-color); background-color: transparent; }
}

/* Styles pour le tableau de la page urgence.php (si nécessaire) */
/* ... Les styles complexes du tableau 'urgence.php' devraient être gérés via des classes Tailwind dans le HTML ou une feuille de style spécifique si nécessaire, car leur inclusion ici alourdit considérablement le fichier global. Cependant, si vous ne modifiez pas le HTML, ces classes ne seront pas utilisées. */