/* ==========================================================================
   TEMPORIS - CSS DE SAUVETAGE (CLEAN & STATIC)
   ========================================================================== */

/* 1. CONFIGURATION & FONTS */
@font-face {
    font-family: 'JetBrains Mono';
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype');
}

/* 2. RESET (Indispensable pour que rien ne casse) */
*, ::before, ::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #1e293b; /* Slate 800 par défaut */
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'JetBrains Mono', monospace;
    background-color: #020617; /* Slate 950 */
    color: #e2e8f0; /* Slate 200 */
    overflow-x: hidden;
    line-height: 1.5;
}

/* 3. UTILITAIRES DE BASE (Layout) */
.container { width: 100%; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }

.hidden { display: none !important; }
.block { display: block; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-grow { flex-grow: 1; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }

/* 4. TAILLES & ESPACEMENTS (Reconstitution des classes Tailwind utilisées) */
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }
.max-w-7xl { max-width: 80rem; }
.max-w-\[1920px\] { max-width: 1920px; } /* Supporte la classe spécifique du layout */

/* Marges & Paddings */
.m-auto { margin: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-4 { margin-top: 1rem; } .mb-4 { margin-bottom: 1rem; }
.mt-8 { margin-top: 2rem; } .mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.p-4 { padding: 1rem; } .p-8 { padding: 2rem; } .p-10 { padding: 2.5rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.pt-32 { padding-top: 8rem; }
.pb-12 { padding-bottom: 3rem; }
.gap-2 { gap: 0.5rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .gap-10 { gap: 2.5rem; }

/* 5. CORRECTIF CRITIQUE SVG (Icônes géantes) */
svg { display: block; vertical-align: middle; }
.w-4 { width: 1rem; } .h-4 { height: 1rem; }
.w-5 { width: 1.25rem; } .h-5 { height: 1.25rem; }
.w-6 { width: 1.5rem; } .h-6 { height: 1.5rem; }
.w-12 { width: 3rem; } .h-12 { height: 3rem; }
.w-11 { width: 2.75rem; } .h-11 { height: 2.75rem; }
.w-24 { width: 6rem; } .h-24 { height: 6rem; }

/* 6. STYLE DES ÉLÉMENTS (Couleurs, Bordures) */
.text-center { text-align: center; }
.text-left { text-align: left; }
.uppercase { text-transform: uppercase; }
.font-bold { font-weight: 700; }
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-xl { font-size: 1.25rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }

/* Couleurs Textes */
.text-white { color: #fff; }
.text-slate-400 { color: #94a3b8; }
.text-slate-500 { color: #64748b; }
.text-cyan-400 { color: #22d3ee; }
.text-cyan-500 { color: #06b6d4; }
.text-green-500 { color: #22c55e; }
.text-red-500 { color: #ef4444; }
.text-amber-500 { color: #f59e0b; }

/* Backgrounds */
.bg-slate-900 { background-color: #0f172a; }
.bg-slate-950 { background-color: #020617; }
.bg-slate-950\/70 { background-color: rgba(2, 6, 23, 0.7); } /* Header transpa */
.bg-cyan-500 { background-color: #06b6d4; }
.bg-cyan-900\/30 { background-color: rgba(22, 78, 99, 0.3); }

/* Bordures & Arrondis */
.border { border-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-dashed { border-style: dashed; }
.border-slate-700 { border-color: #334155; }
.border-slate-800 { border-color: #1e293b; }
.border-cyan-500 { border-color: #06b6d4; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-full { border-radius: 9999px; }

/* Effets (Ombres, Flou) */
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
.backdrop-blur-xl { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* 7. HOVER EFFECTS (Groupes simplifiés) */
a:hover { transition: color 0.3s; }
.hover\:text-white:hover { color: white; }
.hover\:text-cyan-400:hover { color: #22d3ee; }
.hover\:border-cyan-500\/50:hover { border-color: rgba(6, 182, 212, 0.5); }
.group:hover .group-hover\:text-cyan-400 { color: #22d3ee; }
.group:hover .group-hover\:border-cyan-500\/50 { border-color: rgba(6, 182, 212, 0.5); }

/* 8. ANIMATIONS */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .5; } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes clock-spin { 0% { transform: translateX(-50%) rotate(0deg); } 100% { transform: translateX(-50%) rotate(360deg); } }

.animate-spin { animation: spin 4s linear infinite; }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-fade-in { animation: fadeIn 0.8s forwards; }
.animate-needle { animation: clock-spin 4s linear infinite; transform-origin: bottom center; transform-box: fill-box; }

/* 9. CORRECTIFS SPÉCIFIQUES PAGES */

/* Page OUVRIR : Input de recherche */
input[type="text"], input[name="id"] {
    width: 100%;
    background-color: rgba(2, 6, 23, 0.6);
    border: 1px solid #334155;
    color: white;
    padding: 1rem;
    font-family: inherit;
    font-size: 1.25rem;
    text-align: center;
    border-radius: 9999px; /* Pill shape */
    outline: none;
    transition: all 0.3s;
}
input[type="text"]:focus, input[name="id"]:focus {
    border-color: #06b6d4;
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.3);
    background-color: rgba(2, 6, 23, 0.9);
}

/* Page MANIFESTE : Timeline */
.timeline-line {
    border-left: 2px solid #1e293b;
    margin-left: 1rem;
    padding-left: 2rem;
    position: relative;
}
.timeline-dot {
    position: absolute;
    left: -9px;
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 2px solid #020617;
    background-color: #06b6d4; /* Default Sealed */
}
.timeline-card {
    background-color: rgba(15, 23, 42, 0.6);
    border: 1px solid #1e293b;
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

/* Scrollbar Custom */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #020617; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #06b6d4; }

/* ==========================================================================
   TEMPORIS - STYLE COMPLET (HEADER + LAYOUT + ANIMATIONS)
   ========================================================================== */

/* 1. POLICES & BASE */
@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 800;
}

*, ::before, ::after { box-sizing: border-box; }

body {
    margin: 0;
    background-color: #020617; /* Slate 950 */
    color: #e2e8f0; /* Slate 200 */
    font-family: 'JetBrains Mono', monospace;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { text-decoration: none; color: inherit; transition: all 0.3s ease; }

/* 2. LAYOUT UTILITIES (Pour remplacer Tailwind) */
.container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 1rem; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 0.5rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .gap-10 { gap: 2.5rem; }
.hidden { display: none; }
.relative { position: relative; }
.absolute { position: absolute; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.h-24 { height: 6rem; }
.pt-32 { padding-top: 8rem; } /* Espace pour le header fixe */

/* Media Queries pour le responsive */
@media (min-width: 768px) { 
    .md\:flex { display: flex; } 
    .md\:hidden { display: none; }
}

/* 3. HEADER STYLES (Le cœur du design) */

/* La barre fixe */
.fixed-header {
    position: fixed;
    top: 0; left: 0; width: 100%;
    z-index: 1000;
    background-color: rgba(2, 6, 23, 0.85); /* Fond sombre transparent */
    backdrop-filter: blur(16px); /* Effet verre */
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

/* Logo Box & Animations */
.logo-box {
    width: 2.75rem; /* w-11 */
    height: 2.75rem; /* h-11 */
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-radius: 0.75rem;
    border: 1px solid rgba(51, 65, 85, 0.5);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

.logo-group:hover .logo-box {
    border-color: rgba(6, 182, 212, 0.5); /* Cyan border */
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.3); /* Cyan Glow */
}

/* L'aiguille animée */
.needle {
    width: 2px;
    height: 12px;
    background-color: #22d3ee; /* Cyan 400 */
    top: 10px; /* Ajustement position */
    left: calc(50% - 1px);
    border-radius: 99px;
    transform-origin: bottom center;
    animation: clock-spin 4s linear infinite;
}

.center-dot {
    width: 6px; height: 6px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    z-index: 10;
    box-shadow: 0 0 5px rgba(255,255,255,0.8);
}

/* Textes Logo */
.brand-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    letter-spacing: 0.25em;
    line-height: 1;
}
.brand-subtitle {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: #64748b;
    margin-top: 4px;
}
.logo-group:hover .brand-title { color: #22d3ee; }

/* 4. NAVIGATION LINKS */
.nav-item {
    font-size: 0.75rem; /* text-xs */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #94a3b8; /* Slate 400 */
    position: relative;
    padding: 0.5rem 0;
}
.nav-item:hover { color: white; }

.nav-item-active {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #22d3ee; /* Cyan */
    text-shadow: 0 0 10px rgba(34, 211, 238, 0.5);
    position: relative;
}
.nav-item-active::after {
    content: '';
    position: absolute;
    bottom: -4px; left: 50%;
    transform: translateX(-50%);
    width: 4px; height: 4px;
    background-color: #22d3ee;
    border-radius: 50%;
    box-shadow: 0 0 8px #22d3ee;
}

/* 5. BOUTON ACTION & STATUS */
.status-badge {
    background-color: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(30, 41, 59, 0.5);
    padding: 4px 12px;
    border-radius: 99px;
}
.status-text {
    font-size: 0.55rem;
    font-weight: bold;
    letter-spacing: 0.1em;
    color: #94a3b8;
}
.ping-dot { background-color: #4ade80; }
.h-2 { height: 0.5rem; } .w-2 { width: 0.5rem; }

/* Bouton Ouvrir Capsule */
.btn-cyber {
    background-color: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(51, 65, 85, 0.5);
    color: #94a3b8;
    padding: 0.6rem 1.25rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
}
.btn-cyber:hover, .btn-cyber.active {
    border-color: rgba(6, 182, 212, 0.5);
    color: #22d3ee;
    background-color: rgba(8, 51, 68, 0.3);
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.15);
}
.btn-cyber svg { width: 1rem; height: 1rem; }

/* Séparateur & Langues */
.divider-v { width: 1px; height: 2rem; background-color: rgba(30, 41, 59, 0.5); }

.lang-link {
    font-size: 0.65rem;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    color: #475569;
}
.lang-link:hover { color: white; background-color: rgba(30, 41, 59, 0.5); }
.lang-link.active { color: white; background-color: #1e293b; }

/* 6. ANIMATIONS KEYFRAMES */
@keyframes clock-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes ping {
    75%, 100% { transform: scale(2); opacity: 0; }
}

/* 7. CLASSES UTILITAIRES POUR LE RESTE DU SITE (Input, Manifeste, etc.) */
input[type="text"], input[name="id"] {
    width: 100%;
    background-color: rgba(2, 6, 23, 0.6);
    border: 1px solid #1e293b;
    color: white;
    padding: 1rem;
    font-family: inherit;
    text-align: center;
    border-radius: 99px;
    outline: none;
    font-size: 1.2rem;
    margin-top: 2rem;
}
input:focus { border-color: #06b6d4; box-shadow: 0 0 20px rgba(6, 182, 212, 0.2); }

/* SVG Helpers */
svg { display: block; }
.w-4 { width: 1rem; } .h-4 { height: 1rem; }


/* ==========================================================================
   11. FOOTER STYLES (Cyberpunk & Trust)
   ========================================================================== */

.cyber-footer {
    width: 100%;
    background-color: #020617; /* Slate 950 */
    border-top: 1px solid rgba(30, 41, 59, 0.5); /* Slate 800/50 */
    position: relative;
    z-index: 50;
    font-family: 'JetBrains Mono', monospace;
    margin-top: auto; /* Pousse le footer en bas si la page est courte */
}

/* Grille principale */
.footer-content {
    padding: 3rem 1rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

/* Responsive Grid (4 colonnes sur Desktop) */
@media (min-width: 1024px) {
    .footer-content {
        grid-template-columns: 2fr 1fr 1fr 1.5fr;
    }
}

/* Colonne Branding */
.brand-col { display: flex; flex-direction: column; gap: 1rem; }
.footer-desc {
    font-size: 0.75rem;
    color: #64748b; /* Slate 500 */
    line-height: 1.6;
    max-width: 300px;
}

/* Badge Suisse */
.swiss-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(51, 65, 85, 0.5);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: bold;
    color: #cbd5e1;
    width: fit-content;
}
.swiss-cross {
    color: #ef4444; /* Rouge Suisse */
    font-weight: 900;
    font-size: 0.9rem;
}

/* Titres des colonnes */
.footer-heading {
    font-size: 0.7rem;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 1.5rem;
    position: relative;
    padding-left: 10px;
}
.footer-heading::before {
    content: '';
    position: absolute;
    left: 0; top: 2px; bottom: 2px;
    width: 2px;
    background-color: #22d3ee; /* Cyan */
}

/* Listes de liens */
.footer-links {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.footer-links a {
    font-size: 0.75rem;
    color: #94a3b8; /* Slate 400 */
    text-decoration: none;
    transition: all 0.2s ease;
    display: block;
}
.footer-links a:hover {
    color: #22d3ee;
    transform: translateX(4px);
}

/* Statut Système */
.system-status-box {
    background-color: rgba(2, 6, 23, 0.5);
    border: 1px solid rgba(34, 197, 94, 0.2); /* Vert subtil */
    padding: 1rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.status-indicator {
    position: relative;
    width: 12px; height: 12px;
    display: flex;
    align-items: center; justify-content: center;
}
.real-dot {
    width: 8px; height: 8px;
    background-color: #22c55e; /* Green 500 */
    border-radius: 50%;
}
.status-details { display: flex; flex-direction: column; }
.status-title {
    font-size: 0.65rem;
    font-weight: bold;
    color: #22c55e;
    letter-spacing: 0.1em;
}
.status-info {
    font-size: 0.6rem;
    color: #64748b;
}

/* Barre de Copyright (Bas de page) */
.footer-bottom {
    border-top: 1px solid rgba(30, 41, 59, 0.5);
    padding: 1.5rem 0;
    background-color: rgba(15, 23, 42, 0.3);
}
.copyright, .made-by {
    font-size: 0.65rem;
    color: #475569; /* Slate 600 */
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ==========================================================================
   12. HOME PAGE STYLES (Drag & Drop + Trust)
   ========================================================================== */

.home-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

/* Hero Section */
.hero-section { margin-bottom: 2.5rem; }
.hero-title {
    font-size: 2rem;
    font-weight: 300;
    letter-spacing: 0.05em;
    color: white;
    margin-bottom: 0.5rem;
}
.hero-desc {
    font-size: 1rem;
    font-weight: 300;
    color: #94a3b8; /* Slate 400 */
}

/* Zone de Dépôt (Drop Zone) */
.drop-zone {
    border: 2px dashed #334155; /* Slate 700 */
    background-color: rgba(15, 23, 42, 0.5); /* Slate 900/50 */
    border-radius: 1rem;
    padding: 3rem 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
}

.drop-zone:hover, .drop-zone.active {
    background-color: rgba(30, 41, 59, 0.8);
    border-color: #06b6d4; /* Cyan 500 */
    box-shadow: inset 0 0 20px rgba(6, 182, 212, 0.1);
}

.drop-content { pointer-events: none; }

.drop-icon-circle {
    width: 5rem; height: 5rem;
    background-color: #1e293b;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1rem auto;
    color: #22d3ee;
    border: 1px solid #334155;
    transition: transform 0.3s ease;
}
.drop-zone:hover .drop-icon-circle {
    transform: scale(1.1);
    border-color: rgba(6, 182, 212, 0.3);
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
}

.drop-title {
    font-size: 1.25rem;
    color: white;
    margin-bottom: 0.25rem;
    transition: color 0.3s;
}
.drop-zone:hover .drop-title { color: #22d3ee; }

.drop-subtitle {
    font-size: 0.875rem;
    color: #0891b2; /* Cyan 600 */
    font-weight: 500;
}

.drop-hint {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #1e293b;
}

/* Liste des fichiers */
.file-list-container { margin-top: 1.5rem; text-align: left; }
.file-list-header {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-bottom: 0.5rem; padding: 0 0.25rem;
}
.list-label {
    font-size: 0.75rem; font-weight: bold; color: #94a3b8;
    text-transform: uppercase; letter-spacing: 0.1em;
}
.size-counter {
    font-size: 0.75rem; font-family: 'JetBrains Mono', monospace; color: #06b6d4;
}
.text-danger { color: #ef4444 !important; }

.file-list {
    list-style: none; padding: 0; margin: 0;
    max-height: 300px; overflow-y: auto;
}
.file-item {
    display: flex; justify-content: space-between; align-items: center;
    background-color: rgba(30, 41, 59, 0.5);
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    border-radius: 0.25rem;
    border: 1px solid #334155;
    transition: border-color 0.2s;
}
.file-item:hover { border-color: #475569; }
.file-info { display: flex; align-items: center; gap: 0.75rem; overflow: hidden; }
.file-icon {
    padding: 0.5rem; background-color: #0f172a; border-radius: 0.25rem;
}
.file-details { display: flex; flex-direction: column; min-width: 0; }
.file-name {
    font-size: 0.875rem; color: #e2e8f0; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.file-size { font-size: 0.75rem; color: #64748b; }
.btn-remove {
    background: none; border: none; color: #64748b; font-size: 1.5rem; line-height: 1;
    padding: 0 0.5rem; cursor: pointer; transition: color 0.2s;
}
.btn-remove:hover { color: #ef4444; }

/* Form Actions (Date & Submit) */
.form-actions { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.5rem; }

.date-picker-box {
    background-color: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 0.75rem;
    padding: 1.25rem;
    display: flex; flex-direction: column; gap: 1rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
@media (min-width: 768px) {
    .date-picker-box { flex-direction: row; justify-content: space-between; align-items: center; }
}

.date-label-group { display: flex; align-items: center; gap: 0.75rem; text-align: left; }
.date-label { display: block; font-size: 0.75rem; font-weight: bold; color: white; letter-spacing: 0.1em; }
.date-utc { display: block; font-size: 0.65rem; color: #64748b; }

.cyber-input {
    background-color: #020617;
    border: 1px solid #334155;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-family: inherit;
    color-scheme: dark;
    outline: none;
}
.cyber-input:focus { border-color: #06b6d4; }

/* Bouton Submit */
.btn-submit {
    width: 100%;
    padding: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    border-radius: 0.5rem;
    border: 1px solid;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}
.btn-submit.disabled {
    background-color: #1e293b;
    border-color: #334155;
    color: #64748b;
    cursor: not-allowed;
}
.btn-submit.active {
    background: linear-gradient(90deg, rgba(22, 78, 99, 0.4), rgba(30, 58, 138, 0.4));
    border-color: rgba(6, 182, 212, 0.5);
    color: #22d3ee;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.1);
}
.btn-submit.active:hover { background-color: #06b6d4; color: #0f172a; }

.btn-loader {
    position: absolute; inset: 0;
    background-color: rgba(22, 78, 99, 0.8);
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    backdrop-filter: blur(4px);
    font-size: 0.875rem; letter-spacing: 0.1em; color: white;
}

/* 3. TRUST SECTION (Nouvelle section) */
.trust-section { margin-top: 3rem; border-top: 1px solid #1e293b; padding-top: 2rem; }
.trust-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
@media (min-width: 768px) { .trust-grid { grid-template-columns: repeat(3, 1fr); } }

.trust-card {
    background-color: rgba(15, 23, 42, 0.3);
    border: 1px solid rgba(30, 41, 59, 0.5);
    border-radius: 0.5rem;
    padding: 1.5rem;
    text-align: center;
    transition: border-color 0.3s;
}
.trust-card:hover { border-color: #334155; }

.trust-icon {
    width: 3rem; height: 3rem;
    margin: 0 auto 1rem auto;
    color: #06b6d4;
    background-color: rgba(6, 182, 212, 0.1);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.trust-card h4 { font-size: 0.875rem; font-weight: bold; color: white; margin-bottom: 0.5rem; letter-spacing: 0.05em; }
.trust-card p { font-size: 0.75rem; color: #94a3b8; }

/* Link Bottom */
.bottom-link { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #1e293b; }
.bottom-link p { color: #64748b; font-size: 0.875rem; margin-bottom: 0.5rem; }
.cyber-link {
    display: inline-flex; align-items: center; gap: 0.5rem;
    color: #22d3ee; font-weight: bold; text-transform: uppercase; letter-spacing: 0.1em;
    font-size: 0.875rem;
}
.cyber-link:hover { color: #67e8f9; }

/* ==========================================================================
   STYLE BOUTON "CLEAR ALL" (Petit & Sexy)
   ========================================================================== */
.btn-clear {
    display: inline-flex;
    align-items: center;
    gap: 6px; /* Espace entre icône et texte */
    
    background-color: rgba(239, 68, 68, 0.1); /* Rouge très transparent */
    border: 1px solid rgba(239, 68, 68, 0.3); /* Bordure rouge subtile */
    color: #f87171; /* Texte Rouge clair */
    
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-clear svg {
    width: 0.75rem; /* w-3 */
    height: 0.75rem; /* h-3 */
}

.btn-clear:hover {
    background-color: rgba(239, 68, 68, 0.25); /* Plus visible au survol */
    border-color: #f87171; /* Bordure s'illumine */
    color: white; /* Texte devient blanc */
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.4); /* Glow rouge */
    transform: translateY(-1px); /* Petit effet de levier */
}

/* Cache pour le JS (si pas de fichiers) */
.btn-clear.hidden { display: none; }


/* ==========================================================================
   13. PAGE SEALED (Confirmation & Succès)
   ========================================================================== */

.sealed-container {
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 4rem;
}

/* CARTE PRINCIPALE */
.success-card {
    background-color: #020617; /* Slate 950 */
    border: 1px solid rgba(34, 197, 94, 0.3); /* Green border */
    border-radius: 1rem;
    padding: 3rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 50px -10px rgba(34, 197, 94, 0.15); /* Green Glow */
}

/* Effet de scanline vert subtil */
.success-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, transparent, #22c55e, transparent);
    opacity: 0.5;
}

/* Icône Cadenas */
.success-icon-wrapper {
    position: relative;
    width: 6rem; height: 6rem;
    margin: 0 auto 1.5rem auto;
    display: flex; align-items: center; justify-content: center;
}
.success-glow {
    position: absolute; inset: 0;
    background-color: #22c55e;
    filter: blur(40px);
    opacity: 0.2;
    border-radius: 50%;
}
.animate-pulse-slow { animation: pulse 3s infinite; }

/* Titres */
.success-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: white;
    margin-bottom: 0.5rem;
    letter-spacing: 0.05em;
}
.success-desc {
    color: #94a3b8;
    font-size: 0.9rem;
    margin-bottom: 2.5rem;
}

/* BOITE CLÉ & ID (Zone technique) */
.key-box {
    background-color: rgba(15, 23, 42, 0.6); /* Slate 900 */
    border: 1px solid #1e293b;
    border-radius: 0.75rem;
    padding: 1.5rem;
    text-align: left;
    margin-bottom: 2rem;
}

.key-group { margin-bottom: 1.5rem; }

.key-label {
    display: block;
    font-size: 0.7rem;
    font-weight: bold;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}

.key-display-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #020617;
    border: 1px solid #334155;
    border-radius: 0.5rem;
    padding: 0.25rem;
}

.key-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.1rem;
    color: #4ade80; /* Green 400 */
    padding: 0.5rem 1rem;
    word-break: break-all;
}

/* Bouton Copier */
.btn-copy {
    background-color: #1e293b;
    border: 1px solid #334155;
    color: #cbd5e1;
    padding: 0.5rem 1rem;
    border-radius: 0.35rem;
    font-size: 0.75rem;
    font-weight: bold;
    display: flex; align-items: center; gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-copy:hover {
    background-color: #334155;
    color: white;
}
.btn-copy.copied {
    background-color: #22c55e;
    color: #020617;
    border-color: #22c55e;
}

/* Date */
.date-value {
    font-size: 1.25rem;
    font-weight: bold;
    color: white;
    letter-spacing: 0.05em;
}

/* Warning Box */
.warning-box {
    margin-top: 1.5rem;
    background-color: rgba(245, 158, 11, 0.1); /* Amber 10% */
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 0.5rem;
    padding: 0.75rem;
    display: flex; gap: 0.75rem; align-items: start;
}
.warning-box p {
    font-size: 0.75rem;
    color: #fbbf24; /* Amber 400 */
    margin: 0; line-height: 1.4;
}

/* Bouton Retour */
.btn-home {
    display: inline-block;
    padding: 0.75rem 2rem;
    background-color: #1e293b;
    border: 1px solid #334155;
    color: white;
    border-radius: 0.5rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.8rem;
}
.btn-home:hover {
    background-color: #334155;
}

/* SECTION GUIDES (Rassurance) */
.guides-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 3rem;
}
@media (min-width: 768px) { .guides-grid { grid-template-columns: 1fr 1fr; } }

.guide-card {
    background-color: rgba(15, 23, 42, 0.5);
    border: 1px solid #1e293b;
    border-radius: 0.75rem;
    padding: 1.5rem;
}
.guide-card h3 {
    font-size: 0.85rem;
    font-weight: bold;
    color: #e2e8f0;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-left: 3px solid #06b6d4; /* Cyan accent */
    padding-left: 0.75rem;
}
.guide-card p {
    font-size: 0.8rem;
    color: #94a3b8;
    line-height: 1.6;
}


/* ==========================================================================
   14. PAGE OPEN (Recherche & Résultats)
   ========================================================================== */

.open-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem;
    display: flex; flex-direction: column; align-items: center;
    position: relative;
    min-height: 60vh;
}

/* Fond lumineux d'ambiance */
.ambient-glow {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 600px; height: 600px;
    background-color: rgba(6, 182, 212, 0.05); /* Cyan glow very subtle */
    border-radius: 50%;
    filter: blur(100px);
    z-index: -1;
    pointer-events: none;
}

/* Header Texte */
.open-header { text-align: center; margin-bottom: 3rem; }
.open-title {
    font-size: 2.5rem;
    font-weight: 200; /* Thin */
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    text-shadow: 0 0 15px rgba(255,255,255,0.1);
    margin-bottom: 0.5rem;
}
.open-subtitle {
    color: rgba(6, 182, 212, 0.7); /* Cyan dim */
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

/* Formulaire Recherche */
.search-form { width: 100%; max-width: 600px; position: relative; margin-bottom: 3rem; }

.context-box {
    text-align: center; margin-bottom: 1.5rem;
    color: #94a3b8; font-size: 0.8rem;
}
.context-box strong { color: #e2e8f0; display: block; margin-bottom: 0.25rem; }

.input-wrapper {
    position: relative;
    background-color: #020617;
    border: 1px solid #1e293b;
    border-radius: 0.75rem;
    display: flex; align-items: center;
    padding: 0.5rem;
    box-shadow: 0 0 20px rgba(0,0,0,0.3);
    transition: all 0.3s;
}
.input-wrapper:focus-within {
    border-color: #06b6d4;
    box-shadow: 0 0 30px rgba(6, 182, 212, 0.15);
}

.input-icon { padding: 0 1rem; color: #64748b; }

.search-input {
    flex-grow: 1;
    background: transparent; border: none;
    color: white; font-size: 1.25rem;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.15em;
    text-align: center;
    padding: 1rem;
    outline: none;
}
.search-btn {
    background-color: #1e293b;
    color: #06b6d4;
    border: none;
    padding: 0.75rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}
.search-btn:hover { background-color: #06b6d4; color: #020617; }

/* Messages Erreur */
.error-box {
    background-color: rgba(239, 68, 68, 0.1);
    border-left: 4px solid #ef4444;
    color: #f87171;
    padding: 1rem 1.5rem;
    border-radius: 0 0.5rem 0.5rem 0;
    margin-bottom: 2rem;
    width: 100%; max-width: 600px;
}

/* CARTE RÉSULTAT (Le "Status") */
.capsule-card {
    width: 100%; max-width: 700px;
    background-color: rgba(15, 23, 42, 0.8); /* Slate 900 */
    backdrop-filter: blur(12px);
    border: 1px solid; /* Couleur définie par status */
    border-radius: 1rem;
    padding: 0.5rem; /* Padding pour le cadre */
    position: relative;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
}

/* Coins Tech */
.corner { position: absolute; width: 1rem; height: 1rem; border-color: rgba(255,255,255,0.2); pointer-events: none; }
.tl { top: 0; left: 0; border-top: 2px solid; border-left: 2px solid; border-top-left-radius: 0.5rem; }
.tr { top: 0; right: 0; border-top: 2px solid; border-right: 2px solid; border-top-right-radius: 0.5rem; }
.bl { bottom: 0; left: 0; border-bottom: 2px solid; border-left: 2px solid; border-bottom-left-radius: 0.5rem; }
.br { bottom: 0; right: 0; border-bottom: 2px solid; border-right: 2px solid; border-bottom-right-radius: 0.5rem; }

.card-content {
    background-color: rgba(2, 6, 23, 0.5); /* Inner darker bg */
    border-radius: 0.75rem;
    padding: 3rem 2rem;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.05);
}

/* Variantes de Status (Couleurs) */
.status-locked { border-color: rgba(245, 158, 11, 0.5); box-shadow: 0 0 40px rgba(245, 158, 11, 0.15); }
.status-open { border-color: rgba(34, 197, 94, 0.5); box-shadow: 0 0 40px rgba(34, 197, 94, 0.15); }
.status-destroyed { border-color: rgba(239, 68, 68, 0.5); box-shadow: 0 0 40px rgba(239, 68, 68, 0.15); }

/* Icones Cerclées */
.icon-circle {
    width: 6rem; height: 6rem;
    margin: 0 auto 1.5rem auto;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid;
}
.icon-circle.locked { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.5); color: #f59e0b; }
.icon-circle.open { background: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.5); color: #22c55e; }
.icon-circle.destroyed { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.5); color: #ef4444; }

/* Typo Status */
.status-title { font-size: 1.5rem; font-weight: 800; letter-spacing: 0.2em; margin-bottom: 1rem; text-transform: uppercase; }
.status-desc { font-size: 0.75rem; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; color: #64748b; }

/* Compte à rebours */
.countdown-box {
    margin: 2rem 0;
    padding: 1.5rem;
    background-color: #020617;
    border: 1px solid #1e293b;
    border-radius: 0.5rem;
}
.countdown-digits {
    font-size: 2.5rem; font-family: 'JetBrains Mono', monospace;
    color: white; letter-spacing: 0.1em; margin-bottom: 0.5rem;
}
.countdown-label { font-size: 0.7rem; color: #64748b; text-transform: uppercase; }

/* Bouton Decrypt */
.btn-decrypt {
    display: inline-flex; items-center: center; gap: 0.75rem;
    background-color: #16a34a; /* Green 600 */
    color: white;
    font-weight: bold; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.1em;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    text-transform: uppercase;
    transition: all 0.3s;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.4);
    width: 100%; justify-content: center; margin-top: 2rem;
}
.btn-decrypt:hover { background-color: #22c55e; transform: translateY(-2px); }

.info-box-success {
    background-color: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    padding: 1rem; border-radius: 0.5rem;
    color: #86efac; font-size: 0.8rem; margin-bottom: 1.5rem;
}

/* ==========================================================================
   FIX : STATUS FOOTER (Correction de la taille)
   ========================================================================== */

/* On force le style spécifique pour le footer uniquement */
.cyber-footer .status-title {
    font-size: 0.65rem !important; /* Retour à la taille discrète */
    margin-bottom: 0 !important;   /* On enlève la marge du gros titre */
    font-weight: bold;
    color: #22c55e; /* Vert Matrix */
    letter-spacing: 0.1em;
    line-height: 1.2;
    display: block;
}

/* On ajuste aussi le conteneur pour qu'il soit bien aligné */
.cyber-footer .system-status-box {
    padding: 0.5rem 1rem; /* Un peu plus compact */
    max-width: fit-content;
}



/* ==========================================================================
   15. MANIFESTE (Blockchain Visualization)
   ========================================================================== */

.manifest-container {
    max-width: 1000px;
    margin: 0 auto;
    padding-bottom: 4rem;
}

/* Header */
.manifest-header { text-align: center; margin-bottom: 3rem; }
.manifest-title {
    font-size: 2rem; font-weight: 300; color: white; letter-spacing: 0.2em; text-transform: uppercase;
}
.manifest-subtitle {
    font-size: 0.75rem; color: #06b6d4; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.1em; margin-top: 0.5rem;
}

/* Info Grid (Pédagogie) */
.manifest-info-grid {
    display: grid; grid-template-columns: 1fr; gap: 1.5rem;
    margin-bottom: 3rem;
}
@media (min-width: 768px) { .manifest-info-grid { grid-template-columns: 1fr 1fr; } }

.info-card {
    background-color: rgba(15, 23, 42, 0.5);
    border: 1px solid #1e293b; border-radius: 0.75rem;
    padding: 1.5rem;
    display: flex; gap: 1rem; align-items: flex-start;
}
.info-card.privacy { border-color: rgba(6, 182, 212, 0.3); background-color: rgba(6, 182, 212, 0.05); }

.info-icon {
    min-width: 2.5rem; height: 2.5rem;
    background-color: #0f172a; border: 1px solid #334155;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: #94a3b8;
}
.info-card h3 {
    font-size: 0.8rem; font-weight: bold; color: white; letter-spacing: 0.05em; margin-bottom: 0.5rem;
}
.info-card p {
    font-size: 0.75rem; color: #94a3b8; line-height: 1.5;
}

/* Live Feed Label */
.live-feed-label {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.7rem; font-weight: bold; color: #22c55e;
    text-transform: uppercase; letter-spacing: 0.1em;
    margin-bottom: 2rem; padding-left: 1rem;
}
.pulse-dot {
    width: 6px; height: 6px; background-color: #22c55e; border-radius: 50%;
    box-shadow: 0 0 8px #22c55e; animation: pulse 2s infinite;
}

/* Timeline */
.timeline-wrapper {
    position: relative;
    padding-left: 2rem; /* Espace pour la ligne */
}

.timeline-vertical-line {
    position: absolute; left: 7px; top: 0; bottom: 0; width: 2px;
    background: linear-gradient(to bottom, #334155, rgba(51, 65, 85, 0.1));
}

.timeline-item { position: relative; margin-bottom: 2rem; }

/* Les Points (Dots) */
.timeline-dot {
    position: absolute; left: -2.35rem; top: 1.5rem;
    width: 1rem; height: 1rem; border-radius: 50%;
    border: 2px solid #020617;
    z-index: 10;
}
.timeline-dot.cyan { background-color: #06b6d4; box-shadow: 0 0 10px rgba(6, 182, 212, 0.5); }
.timeline-dot.red { background-color: #ef4444; box-shadow: 0 0 10px rgba(239, 68, 68, 0.5); }
.timeline-dot.white { background-color: #94a3b8; }

/* Block Card */
.block-card {
    background-color: rgba(2, 6, 23, 0.8);
    border: 1px solid #1e293b;
    border-radius: 0.75rem;
    padding: 1.25rem;
    transition: all 0.2s;
}
.block-card:hover { border-color: #475569; transform: translateX(5px); }
.block-card.cyan:hover { border-color: rgba(6, 182, 212, 0.5); }
.block-card.red:hover { border-color: rgba(239, 68, 68, 0.5); }

/* Block Header */
.block-header {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
    margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid #1e293b;
}

.block-id .label { font-size: 0.65rem; color: #64748b; margin-right: 0.5rem; }
.block-id .value { font-size: 0.9rem; font-weight: bold; color: white; font-family: 'JetBrains Mono', monospace; }

.block-badge {
    font-size: 0.65rem; font-weight: bold; padding: 0.25rem 0.75rem; border-radius: 0.25rem;
    text-transform: uppercase;
}
.block-badge.cyan { background-color: rgba(6, 182, 212, 0.15); color: #22d3ee; }
.block-badge.red { background-color: rgba(239, 68, 68, 0.15); color: #f87171; }
.block-badge.white { background-color: rgba(148, 163, 184, 0.15); color: #e2e8f0; }

.block-time { font-size: 0.7rem; color: #64748b; font-family: 'JetBrains Mono', monospace; }

/* Block Details */
.block-details { display: flex; flex-direction: column; gap: 0.5rem; }
.detail-row { display: flex; flex-direction: column; }
@media (min-width: 768px) {
    .detail-row { flex-direction: row; align-items: baseline; gap: 1rem; }
}

.detail-label {
    min-width: 140px; font-size: 0.6rem; font-weight: bold; color: #475569;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.detail-value {
    font-family: 'JetBrains Mono', monospace; font-size: 0.75rem;
    word-break: break-all;
}
.text-cyan { color: #22d3ee; }
.text-red { color: #f87171; }

/* Footer */
.manifest-footer {
    text-align: center; margin-top: 4rem;
    color: #475569; font-size: 0.7rem; letter-spacing: 0.1em;
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.genesis-icon { color: #334155; }


/* --- SECTION : ACCÈS MOT DE PASSE (CYBERPUNK) --- */

/* Champ de saisie du mot de passe */
.cyber-pass-input {
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid #f59e0b; /* Amber-500 */
    color: #fbbf24; /* Amber-300 */
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 2px;
    font-size: 1.2rem;
    padding: 15px;
    width: 100%;
    border-radius: 8px;
    outline: none;
    transition: all 0.3s ease;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
}

.cyber-pass-input:focus {
    border-color: #fbbf24;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.4), inset 0 0 10px rgba(0,0,0,0.8);
}

.cyber-pass-input::placeholder {
    color: rgba(251, 191, 36, 0.4);
    font-size: 0.9rem;
    letter-spacing: 1px;
}

/* Bouton de déverrouillage "Gold" */
.btn-unlock-gold {
    background: linear-gradient(180deg, #d97706 0%, #b45309 100%);
    border: 1px solid #f59e0b;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 12px 24px;
    width: 100%;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}

.btn-unlock-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(245, 158, 11, 0.3);
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
}

/* Message d'erreur spécifique au mot de passe */
.pass-error-msg {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 15px;
    font-size: 0.9rem;
    text-align: center;
}

/* Conteneur du formulaire centré */
.password-form-container {
    max-width: 320px;
    margin: 30px auto;
}

.input-group-relative {
    position: relative;
    margin-bottom: 15px;
}

/* --- ACCÈS MOT DE PASSE (CYBERPUNK GOLD) --- */

/* Conteneur du formulaire pour centrer et espacer */
.password-gate-container {
    max-width: 400px;
    margin: 2rem auto;
    position: relative;
    z-index: 10;
}

/* Champ de saisie (Input) */
.cyber-pass-input {
    width: 100%;
    background-color: rgba(10, 10, 15, 0.85); /* Fond très sombre */
    border: 2px solid #d97706; /* Bordure Or foncé */
    color: #fbbf24; /* Texte Or brillant */
    padding: 1rem 1.5rem;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.25rem;
    text-align: center;
    border-radius: 0.5rem;
    outline: none;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.8);
    transition: all 0.3s ease;
    margin-bottom: 1.5rem; /* Espace sous le champ */
    display: block;
}

.cyber-pass-input:focus {
    border-color: #fbbf24; /* Bordure Or clair au focus */
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.3), inset 0 0 10px rgba(0,0,0,0.8);
}

.cyber-pass-input::placeholder {
    color: rgba(251, 191, 36, 0.3);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

/* Bouton Déverrouiller */
.btn-unlock-gold {
    width: 100%;
    background: linear-gradient(135deg, #b45309 0%, #d97706 100%); /* Dégradé Or */
    border: 1px solid #fbbf24;
    color: #ffffff;
    padding: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    border-radius: 0.5rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    appearance: none; /* Reset natif */
    -webkit-appearance: none;
}

.btn-unlock-gold:hover {
    background: linear-gradient(135deg, #d97706 0%, #fbbf24 100%);
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(251, 191, 36, 0.5);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Message d'erreur */
.pass-error-msg {
    background-color: rgba(127, 29, 29, 0.3);
    border: 1px solid #ef4444;
    color: #fca5a5;
    padding: 0.75rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    text-align: center;
    font-weight: bold;
    animation: pulse 2s infinite;
}


/* --- STATUTS MANIFESTE (Blockchain Colors) --- */

/* CYAN (SCELLÉ) - Déjà existant normalement, je le remets pour ref */
.block-card.cyan { border-left: 3px solid #22d3ee; box-shadow: 0 0 15px rgba(34, 211, 238, 0.1); }
.block-badge.cyan { background: rgba(34, 211, 238, 0.1); color: #22d3ee; }
.timeline-dot.cyan { background: #22d3ee; box-shadow: 0 0 10px #22d3ee; }
.text-cyan { color: #22d3ee; }

/* GREEN (OUVERT) - Nouveau */
.block-card.green { border-left: 3px solid #4ade80; box-shadow: 0 0 15px rgba(74, 222, 128, 0.1); }
.block-badge.green { background: rgba(74, 222, 128, 0.1); color: #4ade80; }
.timeline-dot.green { background: #4ade80; box-shadow: 0 0 10px #4ade80; }
.text-green { color: #4ade80; }

/* RED (DÉTRUIT) - Nouveau */
.block-card.red { border-left: 3px solid #f87171; box-shadow: 0 0 15px rgba(248, 113, 113, 0.1); }
.block-badge.red { background: rgba(248, 113, 113, 0.1); color: #f87171; }
.timeline-dot.red { background: #f87171; box-shadow: 0 0 10px #f87171; }
.text-red { color: #f87171; }

/* --- NAVIGATION HEADER (Fix Espacement & Style) --- */

/* Le conteneur du menu : Il force l'espacement */
.nav-container {
    display: flex;
    align-items: center;
    gap: 40px; /* Espace large entre les liens */
}

/* Le lien de base : Discret et Pro */
.nav-item {
    text-decoration: none;
    color: #94a3b8; /* Gris ardoise (Slate 400) */
    font-size: 0.75rem; /* Petit et élégant */
    font-weight: 700;
    letter-spacing: 0.15em; /* Espacement entre les lettres */
    text-transform: uppercase;
    padding: 8px 0;
    position: relative;
    transition: all 0.3s ease;
}

/* Au survol : Il s'allume en blanc */
.nav-item:hover {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* Lien Actif (La page en cours) : Cyan néon */
.nav-item-active {
    text-decoration: none;
    color: #22d3ee; /* Cyan Itylos */
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 8px 0;
    position: relative;
    text-shadow: 0 0 15px rgba(34, 211, 238, 0.6);
}

/* La petite barre lumineuse sous le lien actif */
.nav-item-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #22d3ee;
    box-shadow: 0 0 10px #22d3ee;
}


/* Animation des particules de secrets */
.secret-particle {
    width: 6px;
    height: 6px;
    background: #22d3ee;
    border-radius: 50%;
    animation: float 3s infinite ease-in-out;
    box-shadow: 0 0 10px #22d3ee;
}
.secret-particle:nth-child(2) { animation-delay: 0.5s; background: #818cf8; }
.secret-particle:nth-child(3) { animation-delay: 1.2s; background: #fb7185; }

@keyframes float {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.3; }
    50% { transform: translateY(-20px) scale(1.5); opacity: 1; }
}

/* Animation du Vault (Cadenas) */
.outer-ring {
    position: absolute;
    width: 150px;
    height: 150px;
    border: 2px dashed rgba(34, 211, 238, 0.4);
    border-radius: 50%;
    animation: spin 10s linear infinite;
}
.inner-lock {
    font-size: 80px;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 0 20px rgba(34, 211, 238, 0.5));
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.use-case-card {
    @apply p-8 rounded-xl bg-slate-900/30 border border-slate-800 hover:bg-slate-900/50 transition-all duration-300;
}

/* Optimisation pour les petits écrans */
@media (max-width: 768px) {
    .about-page {
        @apply pt-24; /* Compense le header fixe */
    }
    .brand-title {
        @apply text-xl;
    }
}

/* --- ABOUT WRAPPER --- */
.about-wrapper {
    max-width: 850px; /* On resserre l'ensemble */
    margin: 0 auto;
    padding: 80px 24px;
    background: radial-gradient(50% 50% at 50% 0%, rgba(34, 211, 238, 0.05) 0%, transparent 100%);
}

.about-hero-compact { text-align: center; margin-bottom: 60px; }
.main-title { font-size: 2.2rem; font-weight: 800; color: #fff; letter-spacing: -0.02em; line-height: 1.2; }
.sub-intro { color: #22d3ee; margin-top: 15px; font-family: monospace; font-size: 0.9rem; opacity: 0.8; }

/* SVG Flow */
.schema-container { margin: 40px 0; display: flex; justify-content: center; }
.flow-svg { width: 100%; max-width: 400px; fill: none; }
.path-line { stroke: #22d3ee; stroke-width: 0.5; stroke-dasharray: 2 2; animation: dash 10s linear infinite; }
.dot-glow { fill: #22d3ee; filter: blur(2px); }
.svg-text { fill: rgba(255,255,255,0.2); font-size: 4px; letter-spacing: 2px; font-weight: bold; }
@keyframes dash { to { stroke-dashoffset: -100; } }

/* Section Content */
.section-cosy { margin-bottom: 80px; }
.vision-bubble {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    padding: 40px;
    border-radius: 20px;
    line-height: 1.7;
    color: #94a3b8;
    text-align: center;
}

/* Tech Grid Horizontale */
.tech-grid-compact { display: flex; flex-direction: column; gap: 4px; }
.tech-item {
    display: flex; align-items: center; gap: 24px;
    padding: 20px; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.icon-wrap { font-size: 1.5rem; opacity: 0.6; }
.tech-txt h3 { font-size: 0.9rem; color: #fff; text-transform: uppercase; letter-spacing: 1px; }
.tech-txt p { font-size: 0.85rem; color: #64748b; margin-top: 4px; }

/* Bento Grid Resserrée */
.label-tiny { text-align: center; font-size: 0.7rem; color: #475569; letter-spacing: 4px; margin-bottom: 30px; }
.use-case-bento {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
}
.bento-box {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(34, 211, 238, 0.1);
    padding: 30px; border-radius: 12px;
    transition: all 0.3s ease;
}
.bento-box:hover { border-color: #22d3ee; background: rgba(34, 211, 238, 0.05); transform: translateY(-3px); }
.box-emoji { font-size: 1.5rem; display: block; margin-bottom: 15px; }
.bento-box h4 { color: #fff; font-size: 0.95rem; margin-bottom: 8px; }
.bento-box p { color: #64748b; font-size: 0.8rem; line-height: 1.5; }

/* Final CTA */
.final-cta-section { text-align: center; padding: 40px 0; }
.btn-capsule-glow {
    display: inline-block; padding: 18px 45px;
    background: #22d3ee; color: #000;
    font-weight: 800; text-transform: uppercase; letter-spacing: 2px;
    border-radius: 50px; box-shadow: 0 0 20px rgba(34, 211, 238, 0.4);
    transition: 0.3s; text-decoration: none;
}
.btn-capsule-glow:hover { transform: scale(1.05); box-shadow: 0 0 40px rgba(34, 211, 238, 0.6); }

/* Mobile */
@media (max-width: 600px) {
    .use-case-bento { grid-template-columns: 1fr; }
    .main-title { font-size: 1.6rem; }
}



/* prix */
/* --- PRICING PAGE STRUCTURE --- */
.pricing-page {
    max-width: 1100px;
    margin: 0 auto;
    /* On réduit le haut à 40px car le header fixe prend déjà de la place */
    padding: 40px 20px 100px 20px; 
    text-align: center;
}

.pricing-hero {
    max-width: 700px; /* Plus serré pour éviter l'étalement */
    margin: 0 auto 50px;
}

.pricing-hero .main-title {
    margin-top: 0 !important; /* Supprime le décalage du H1 */
    font-size: 2.8rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.hero-description {
    color: #64748b; /* Plus discret, plus fin */
    line-height: 1.6;
    font-size: 0.95rem;
    margin-top: 15px;
}

/* --- FOOTER EXPLICATIF (CROISEMENT ITYLOS) --- */
.pricing-footer-info {
    max-width: 650px;
    margin: 80px auto 0;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 40px;
}

.info-box p {
    color: #475569;
    font-size: 0.85rem;
    margin-bottom: 25px;
    line-height: 1.6;
}

.itilos-cross {
    background: rgba(34, 211, 238, 0.03);
    padding: 20px;
    border-radius: 8px;
    color: #94a3b8;
    font-size: 0.85rem;
    border: 1px dashed rgba(34, 211, 238, 0.1);
}

.link-cyan {
    color: #22d3ee;
    text-decoration: none;
    font-weight: 600;
    margin-left: 5px;
    border-bottom: 1px solid transparent;
    transition: 0.3s;
}

.link-cyan:hover { border-bottom-color: #22d3ee; }
}

.main-title {
    font-size: 3rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 20px;
}

.hero-description {
    color: #94a3b8;
    line-height: 1.6;
    font-size: 1.1rem;
}

/* Grille rééquilibrée */
.pricing-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 80px;
}

.price-card {
    flex: 1;
    max-width: 320px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 40px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.price-card.featured {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid #22d3ee;
    transform: scale(1.05);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.plan-label {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    color: #64748b;
    font-size: 0.8rem;
    margin-bottom: 20px;
    display: block;
}

.price-val {
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 30px;
}

.price-val small { font-size: 0.9rem; color: #475569; }

.check-list {
    text-align: left;
    margin-bottom: 40px;
    list-style: none;
    padding: 0;
    flex-grow: 1;
}

.check-list li {
    color: #94a3b8;
    margin-bottom: 15px;
    padding-left: 25px;
    position: relative;
    font-size: 0.9rem;
}

.check-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: #22d3ee;
}

/* Boutons */
.btn-price-ghost {
    padding: 15px;
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.9rem;
}

.btn-price-cyan {
    padding: 15px;
    background: #22d3ee;
    color: #000;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 800;
    font-size: 0.9rem;
}

/* Footer Info */
.pricing-footer-info {
    max-width: 700px;
    margin: 0 auto;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 40px;
}

.info-box p {
    color: #475569;
    font-size: 0.85rem;
    margin-bottom: 30px;
    line-height: 1.5;
}

.itilos-cross {
    background: rgba(34, 211, 238, 0.05);
    padding: 20px;
    border-radius: 12px;
    color: #94a3b8;
    font-size: 0.9rem;
}

.link-cyan {
    color: #22d3ee;
    text-decoration: none;
    font-weight: bold;
    margin-left: 10px;
}

@media (max-width: 900px) {
    .pricing-grid { flex-direction: column; align-items: center; }
    .price-card { max-width: 100%; width: 100%; }
    .price-card.featured { transform: none; }
}
}


/* Suppression du vide en haut */
.pricing-page { padding-top: 40px !important; }
.main-title { margin-top: 0 !important; font-size: 2.5rem; }

/* Correction du retour à la ligne sur le prix */
.price-val small { 
    display: block; 
    font-size: 0.7rem; 
    opacity: 0.6; 
    margin-top: -5px;
    letter-spacing: 0.5px;
}

/* Style Legacy (Plus luxueux) */
.legacy-gold {
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
}
.legacy-gold .plan-label { color: #d4af37; }
.legacy-gold .btn-price-ghost:hover { border-color: #d4af37; color: #d4af37; }

/* Badge de mise en avant */
.badge-tag {
    background: #22d3ee;
    color: #000;
    font-size: 0.6rem;
    font-weight: 900;
    padding: 3px 10px;
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 20px;
}

/* Effet de profondeur sur les cartes */
.price-card {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.4));
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}


.time-projection {
    background: radial-gradient(circle at center, rgba(34, 211, 238, 0.02) 0%, transparent 70%);
}
.projection-item {
    padding: 20px;
    border-left: 1px solid rgba(34, 211, 238, 0.1);
}