/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #2563eb;
    --primary-dark: #1e40af;
    --secondary-color: #64748b;
    --accent-color: #f59e0b;
    --text-dark: #1e293b;
    --text-light: #64748b;
    --bg-light: #f8fafc;
    --bg-white: #ffffff;
    --border-color: #e2e8f0;
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    background-color: var(--bg-white);
}

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

/* Navigation */
.navbar {
    background-color: var(--bg-white);
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow);
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Quatorze liens plus le menu utilisateur depassent la largeur du conteneur :
       sans retour a la ligne, la barre fait defiler toute la page lateralement. */
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.nav-brand a {
    text-decoration: none;
}

.brand-logo-link {
    display: block;
}

.brand-logos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.brand-logo {
    height: 80px;
    width: auto;
    max-height: 80px;
}

.brand-logo-text {
    height: 30px;
    width: auto;
    max-height: 30px;
}

.nav-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    align-items: center;
    min-width: 0;
    /* Les liens tiennent desormais sur la meme ligne que la marque : ils sont six et
       non douze. Le renvoi a la ligne (`order: 3; flex-basis: 100%`) etait la parade
       a une barre qui debordait a toute resolution ; la parade n'a plus d'objet. */
}

/* Le profil et le selecteur de langue forment un seul groupe, colle a droite : ils
   etaient voisins dans le DOM mais separes a l'ecran par un menu qui prenait toute la
   largeur. */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
}

.nav-link {
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 500;
    transition: color 0.3s;
}

.nav-link:hover {
    color: var(--primary-color);
}

.language-switcher select {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background-color: var(--bg-white);
    color: var(--text-dark);
    cursor: pointer;
    font-size: 0.9rem;
    transition: border-color 0.3s;
}

.language-switcher select:hover {
    border-color: var(--primary-color);
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 6rem 0;
    text-align: center;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.hero-subtitle {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

.hero-description {
    font-size: 1.1rem;
    max-width: 800px;
    margin: 0 auto 2rem;
    opacity: 0.95;
    line-height: 1.8;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Buttons */
.btn {
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
    display: inline-block;
    cursor: pointer;
    border: none;
    font-size: 1rem;
}

.btn-primary {
    background-color: white;
    color: var(--primary-color);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background-color: transparent;
    color: white;
    border: 2px solid white;
}

.btn-secondary:hover {
    background-color: white;
    color: var(--primary-color);
}

.btn-admin {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.5);
    padding: 0.75rem 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-admin:hover {
    background-color: rgba(255, 255, 255, 0.3);
    border-color: white;
    transform: translateY(-2px);
}

.btn-large {
    padding: 1rem 3rem;
    font-size: 1.2rem;
}

/* Features Section */
.features {
    padding: 5rem 0;
    background-color: var(--bg-light);
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 3rem;
    color: var(--text-dark);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.feature-card {
    background-color: var(--bg-white);
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: var(--shadow);
    transition: transform 0.3s, box-shadow 0.3s;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.feature-card h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--primary-color);
}

.feature-card p {
    color: var(--text-light);
    line-height: 1.6;
}

/* How it works Section */
.how-it-works {
    padding: 5rem 0;
}

.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
    margin-top: 3rem;
}

.step {
    text-align: center;
}

.step-number {
    width: 60px;
    height: 60px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 auto 1rem;
}

.step h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
}

.step p {
    color: var(--text-light);
}

/* CTA Section */
.cta-section {
    background-color: var(--primary-color);
    color: white;
    padding: 5rem 0;
    text-align: center;
}

.cta-section h2 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
}

/* Footer */
.footer {
    background-color: var(--text-dark);
    color: white;
    padding: 3rem 0 1rem;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-section h3 {
    margin-bottom: 1rem;
}

.footer-section h4 {
    margin-bottom: 0.5rem;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.5rem;
}

.footer-section a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.3s;
}

.footer-section a:hover {
    color: white;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
}

/* Dashboard Metrics */
.dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin: 3rem 0 2rem;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.metric-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 1.5rem;
    border-radius: 1rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.metric-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: white;
    margin-bottom: 0.5rem;
}

.metric-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

/* Latest Analyses Section */
.latest-analyses {
    padding: 5rem 0;
    background-color: var(--bg-light);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.view-all-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s;
}

.view-all-link:hover {
    color: var(--primary-dark);
}

.analyses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.analysis-card {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: var(--shadow);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
}

.analysis-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.analysis-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.analysis-score {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.score-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
}

.score-max {
    font-size: 1rem;
    color: var(--text-light);
}

.analysis-date {
    font-size: 0.85rem;
    color: var(--text-light);
}

.analysis-content {
    flex: 1;
    margin-bottom: 1rem;
}

.analysis-author,
.analysis-source {
    font-size: 0.9rem;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.analysis-preview {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.5;
    margin-top: 0.5rem;
}

.analysis-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.analysis-link:hover {
    color: var(--primary-dark);
}

.loading-placeholder,
.no-analyses {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem;
    color: var(--text-light);
}

/* Responsive */
@media (max-width: 768px) {
    .nav-menu {
        display: none;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .dashboard-metrics {
        grid-template-columns: repeat(3, 1fr);
    }

    .metric-value {
        font-size: 2rem;
    }
}

/* Mobile: 2 columns */
@media (max-width: 640px) {
    .dashboard-metrics {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .metric-card {
        padding: 1rem;
    }

    .metric-value {
        font-size: 1.75rem;
    }

    .metric-label {
        font-size: 0.8rem;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}

/* ==================== Score Color System ==================== */

/* Total Score Colors (0-30) */
:root {
    --score-green: #10b981;      /* 0-7 : Factual information */
    --score-blue: #3b82f6;       /* 8-14: Moderate influence */
    --score-orange: #f59e0b;     /* 15-22: Structured manipulation */
    --score-red: #ef4444;        /* 23-30: Advanced social engineering */
}

/* Dimension Score Colors (0-5) */
:root {
    --dim-green: #10b981;        /* 0-1 : Absent/Very weak */
    --dim-blue: #3b82f6;         /* 2   : Weak/Limited */
    --dim-orange: #f59e0b;       /* 3   : Moderate */
    --dim-red: #ef4444;          /* 4-5 : Strong/Very strong */
}

/* Score color utility classes for total scores */
.score-color-green {
    color: var(--score-green) !important;
}

.score-color-blue {
    color: var(--score-blue) !important;
}

.score-color-orange {
    color: var(--score-orange) !important;
}

.score-color-red {
    color: var(--score-red) !important;
}

/* Background variants */
.score-bg-green {
    background-color: rgba(16, 185, 129, 0.1) !important;
    border-color: var(--score-green) !important;
}

.score-bg-blue {
    background-color: rgba(59, 130, 246, 0.1) !important;
    border-color: var(--score-blue) !important;
}

.score-bg-orange {
    background-color: rgba(245, 158, 11, 0.1) !important;
    border-color: var(--score-orange) !important;
}

.score-bg-red {
    background-color: rgba(239, 68, 68, 0.1) !important;
    border-color: var(--score-red) !important;
}

/* Border-left variants for metadata headers */
.score-border-green {
    border-left-color: var(--score-green) !important;
}

.score-border-blue {
    border-left-color: var(--score-blue) !important;
}

.score-border-orange {
    border-left-color: var(--score-orange) !important;
}

.score-border-red {
    border-left-color: var(--score-red) !important;
}

/* ==================== Analysis Cards Enhancements ==================== */

.analysis-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.analysis-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.analysis-confidence {
    font-size: 1.2rem;
    line-height: 1;
    opacity: 0.8;
}

.analysis-count-badge {
    display: inline-block;
    background: #e3f2fd;
    color: #1976d2;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

/* Completion buttons */
.complete-btn {
    padding: 0.5rem 1rem;
    border: 2px solid;
    border-radius: 0.5rem;
    background: white;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s ease;
    font-family: inherit;
}

.complete-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.complete-btn-standard {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.complete-btn-standard:hover {
    background: var(--primary-color);
    color: white;
}

.complete-btn-premium {
    border-color: #ffc107;
    color: #856404;
    background: linear-gradient(135deg, #fff9e6 0%, #fff3cd 100%);
}

.complete-btn-premium:hover {
    background: linear-gradient(135deg, #ffc107 0%, #ffd700 100%);
    color: white;
}

/* User Menu Styles */
.user-menu {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.user-menu-guest,
.user-menu-auth {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.btn-register {
    padding: 0.5rem 1rem;
    background-color: var(--primary-color);
    color: white;
    text-decoration: none;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: background-color 0.3s;
}

.btn-register:hover {
    background-color: var(--primary-dark);
}

/* ==========================================================================
   Tableaux de donnees — charte commune
   --------------------------------------------------------------------------
   Quatre ecrans (persistance, fiabilite des sources, faits contredits,
   statistiques) rendaient leurs tableaux avec des styles en ligne, chacun les
   siens : bordures differentes, espacements differents, aucune couleur de la
   charte. Un style partage plutot que quatre styles voisins — c'est ce qui fait
   qu'un changement de charte se fait a un seul endroit.
   ========================================================================== */
.tableau-charte {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--bg-white);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.tableau-charte thead th {
    text-align: left;
    padding: 1rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-light);
    background-color: var(--bg-light);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.tableau-charte tbody td {
    padding: 0.95rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-dark);
    vertical-align: top;
}

.tableau-charte tbody tr:last-child td {
    border-bottom: none;
}

.tableau-charte tbody tr:hover {
    background-color: var(--bg-light);
}

/* Un tableau large ne doit pas faire defiler la PAGE horizontalement : il
   defile dans sa propre boite. */
.tableau-defilant {
    overflow-x: auto;
    border-radius: 0.75rem;
}

/* Message « rien a afficher » : meme forme partout, pour qu'un ecran vide se
   distingue d'un ecran casse. */
.etat-vide {
    text-align: center;
    color: var(--text-light);
    font-style: italic;
    padding: 2.5rem 1rem;
}

/* ==========================================================================
   Listes de dossiers et mentions de reserve — charte commune
   --------------------------------------------------------------------------
   Les modules « frises » et « mise en balance » sont des jumeaux : meme liste,
   meme bandeau de reserve, et jusqu'ici les memes styles en ligne recopies de
   part et d'autre, avec des couleurs ecrites en dur qui n'etaient dans aucun
   jeton de la charte. Les partager, c'est aussi s'assurer qu'ils ne divergeront
   pas — quatre fois dans ce depot, un defaut est passe par un jumeau modifie
   seul.
   ========================================================================== */
.liste-dossiers {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dossier-item {
    background-color: var(--bg-white);
    border-radius: 1rem;
    box-shadow: var(--shadow);
    padding: 1.25rem 1.5rem;
    margin-bottom: 0.85rem;
    transition: transform 0.3s, box-shadow 0.3s;
}

.dossier-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.dossier-titre {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--primary-color);
    text-decoration: none;
}

.dossier-titre:hover {
    text-decoration: underline;
}

.dossier-meta {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-top: 0.35rem;
}

/* Le bandeau qui dit ce que le module NE prouve pas. Il porte la couleur d'accent
   de la charte, et non trois hexadecimaux ecrits a la main. */
.mention-reserve {
    background-color: #fef3c7;
    border-left: 4px solid var(--accent-color);
    color: #78350f;
    padding: 1.25rem 1.5rem;
    border-radius: 0.5rem;
    margin: 0 0 2rem;
    line-height: 1.7;
}


/* ==========================================================================
   Cartes d'outil — la page « Analyser »
   --------------------------------------------------------------------------
   Une carte entiere est cliquable : c'est un `a` de niveau bloc, pas une carte
   contenant un lien. Un utilisateur qui vise le titre et clique a cote ne doit
   pas se retrouver a n'avoir rien fait.
   ========================================================================== */
.grille-outils {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

.carte-outil {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-white);
    border-radius: 1rem;
    box-shadow: var(--shadow);
    padding: 1.75rem;
    text-decoration: none;
    color: inherit;
    border-top: 3px solid transparent;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.carte-outil:hover,
.carte-outil:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-top-color: var(--primary-color);
}

/* Le focus doit se voir : la carte est un bouton, et on doit pouvoir l'atteindre
   au clavier. */
.carte-outil:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 3px;
}

.carte-outil-icone {
    font-size: 2.25rem;
    line-height: 1;
    margin-bottom: 0.85rem;
}

.carte-outil h3 {
    font-size: 1.25rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

/* Les trois lignes de chaque carte : ce que ca fait, a quoi ca sert, quand s'en
   servir. Meme gabarit partout, pour qu'on les compare d'un coup d'oeil. */
.carte-outil dl {
    margin: 0;
    display: grid;
    gap: 0.6rem;
}

.carte-outil dt {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-light);
}

.carte-outil dd {
    margin: 0.15rem 0 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-dark);
}

.carte-outil-fleche {
    margin-top: auto;
    padding-top: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}