/* =================================================================
   1. RESET & VARIABLES
================================================================= */
:root {
    --color-primary: #2C8654;
    --color-secondary: #A7E8BD;

    /* Encre posée sur --color-secondary (titres de catégorie, titre de bannière).
       --color-primary y servait, mais il est d'abord un fond (header, footer, boutons)
       et ne peut pas être calibré pour les deux : le contraste échouait sur les 10
       palettes. Une encre dédiée permet aussi de partir vers le clair quand
       --color-secondary est sombre — le seul cas où assombrir ne suffit pas
       (« dark sapphire » : le noir pur ne dépasse pas 3,65:1 sur son #1565C0). */
    --color-on-secondary: #246C44;

    --color-background: #E0F7FA;
    --color-text: #1C3D5A;
    --color-text-secondary: #3B6978;
    --color-border: #26A69A;
    --color-white: #ffffff;
    --color-hover: #21664F;
    --color-link: #00c9b1;

    /* Le contenu (sujets, commentaires, profils) est posé sur des cartes blanches,
       alors que --color-text est calibré pour --color-background. Sur une palette
       "dark" les deux sont incompatibles : le texte devenait illisible (1,14:1 sur
       "dark sapphire"). Ces trois variables portent les teintes destinées aux cartes.
       Sur une palette "light" elles valent la même chose que leurs équivalents de
       fond de page, donc le rendu reste inchangé. */
    --color-text-on-surface: #1C3D5A;
    --color-text-on-surface-secondary: #3B6978;
    --color-link-on-surface: #00c9b1;


    --font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
    --spacing: 20px;
    --radius: 6px;
}

* {
    box-sizing: border-box; 
}

body {
    font-family: var(--font-family);
    margin: 0;
    padding: 0;
    background-color: var(--color-background);
    color: var(--color-text);
    line-height: 1.5;
}

a {
    text-decoration: none;
    color: var(--color-link);
    transition: 0.2s;
}

a:hover {
    color: var(--color-primary);
}

/* Le fil d'Ariane et la pagination sont posés sur --color-background, pas sur une carte.
   Le survol global vise --color-primary, qui est calibré pour le blanc des cartes et
   devient illisible dès que le fond de page est sombre (1,55:1 sur « dark sapphire »).
   --color-text est lisible sur ce fond par construction. */
.breadcrumb a:hover,
.pagination .page-link:hover {
    color: var(--color-text);
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    display: block;
}

/* =================================================================
   2. HEADER (Logo corrigé)
================================================================= */
.header {
    background-color: var(--color-primary);
    padding: 15px 0;
    width: 100%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

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

/* Correction Logo pour qu'il ne s'écrase pas */
.logo {
    flex-shrink: 0;
    margin-right: 20px;
    display: flex;
    align-items: center;
}

.logo img {
    height: 50px;
    width: auto; 
}

.menu-list {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.menu-list li a {
    color: var(--color-white);
    font-weight: 600;
    font-size: 15px;
    padding: 8px 12px;
    border-radius: var(--radius);
}

.menu-list li a:hover {
    background-color: rgba(255,255,255,0.15);
}

/* =================================================================
   3. GLOBAL LAYOUT (Banner, Breadcrumb)
================================================================= */
.home, .thread, .user-profile {
    max-width: 1200px;
    margin: 0 auto 50px;
    padding: 0 var(--spacing);
}

/* Bannière */
.banner {
    background-color: var(--color-secondary);
    padding: 30px;
    text-align: center;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 30px;
}

.banner h1 {
    margin: 0 0 10px 0;
    color: var(--color-on-secondary);
}

/* Fil d'Ariane */
.breadcrumb {
    max-width: 1200px;
    margin: 15px auto;
    padding: 0 var(--spacing);
    font-size: 13px;
    color: var(--color-text-secondary);
}

.breadcrumb-separator {
    margin: 0 8px;
}

/* =================================================================
   4. PAGE ACCUEIL (FLEXBOX - PAS DE GRID)
================================================================= */
.forum-section {
    background: var(--color-white);
    color: var(--color-text-on-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 30px;
}

/* Titre Catégorie */
.forum-header {
    background-color: var(--color-secondary);
    color: var(--color-on-secondary);
    padding: 15px 20px;
    margin: 0;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid var(--color-border);
}

.forum-section > a {
    display: block;
}

/* --- ITEM DU FORUM (Style Liste Flexbox) --- */
.forum-item {
    display: flex;             /* FLEXBOX ici */
    align-items: center;       /* Centrage vertical */
    justify-content: space-between;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    background-color: var(--color-white);
    transition: background-color 0.2s;
}

.forum-item:last-child {
    border-bottom: none;
}

.forum-item:hover {
    background-color: #f9f9f9;
}

/* Avatar (gauche fixe) */
.forum-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 20px;
    flex-shrink: 0;
    object-fit: cover;
    border: 1px solid #ddd;
}

/* Sujet (Prend toute la place dispo) */
.forum-subject {
    flex-grow: 1; /* C'est lui qui s'étire */
    margin-right: 20px;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-on-surface);
}

/* Colonnes de droite (Largeurs fixes pour alignement) */
.forum-author {
    width: 140px;
    text-align: center;
    font-size: 13px;
    color: var(--color-text-on-surface-secondary);
    flex-shrink: 0;
}

.forum-author a {
    font-weight: bold;
    color: var(--color-text-on-surface);
    display: block;
}

.forum-messages {
    width: 100px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    background-color: #f0f0f0;
    padding: 4px 8px;
    border-radius: 12px;
    color: var(--color-text-on-surface-secondary);
    flex-shrink: 0;
}

.forum-last-message {
    width: 180px;
    text-align: right;
    font-size: 12px;
    color: var(--color-text-on-surface-secondary);
    font-style: italic;
    flex-shrink: 0;
}

/* =================================================================
   5. PAGE THREAD (Discussion)
================================================================= */
.thread-header {
    background-color: var(--color-white);
    color: var(--color-text-on-surface);
    padding: 25px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: 25px;
    border-left: 5px solid var(--color-primary);
}

.thread-header h1 {
    margin: 0 0 10px 0;
    font-size: 24px;
    color: var(--color-primary);
}

.comments h2 {
    font-size: 20px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* Le message d'origine du fil, à distinguer des réponses : même idiome que
   .thread-header, dont il est la suite directe. */
.original-post .comment {
    border-left: 3px solid var(--color-primary);
}

/* Message / Commentaire */
.comment {
    background-color: var(--color-white);
    color: var(--color-text-on-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.comment-metadata {
    background-color: #f8f8f8;
    padding: 12px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comment-author-link {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: bold;
    color: var(--color-text-on-surface);
}

.comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #ccc;
}

.comment-content {
    padding: 20px;
    font-size: 15px;
}

/* Les commentaires sont du HTML généré : ils peuvent contenir des liens.
   --color-link est calibré pour le fond de page, pas pour le blanc de la carte. */
.comment-content a,
.activity-list .comment a {
    color: var(--color-link-on-surface);
}

.btn {
    display: inline-block;
    padding: 12px 25px;
    background-color: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius);
    font-weight: bold;
    cursor: pointer;
    font-size: 14px;
}

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

/* =================================================================
   6. PAGE USER (Profil)
================================================================= */
.user-profile {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* En-tête profil */
.user-header {
    display: flex;
    align-items: center;
    gap: 30px;
    background: var(--color-white);
    color: var(--color-text-on-surface);
    padding: 30px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.user-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--color-secondary);
}

.user-name {
    margin: 0;
    color: var(--color-primary);
    font-size: 26px;
}

/* Cartes d'infos */
.user-info, .user-account, .user-activity, .user-stats {
    background: var(--color-white);
    color: var(--color-text-on-surface);
    padding: 25px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.section-title {
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-secondary);
    font-size: 18px;
    color: var(--color-text-on-surface);
}

.info-list li, .account-list li, .stats-list li {
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
}

/* Activité Récente */
.activity-list > li {
    font-weight: bold;
    color: var(--color-primary);
    margin-top: 20px;
}

.activity-list > li > div {
    font-weight: normal;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    padding: 15px;
    margin-top: 10px;
    border-radius: 4px;
    border-left: 3px solid var(--color-primary);
}

.comment-thread-title {
    font-size: 16px;
    margin: 5px 0;
}

.comment-thread-title a {
    color: var(--color-text-on-surface);
    font-weight: bold;
}

.activity-list .comment {
    border: none;
    margin: 10px 0 0;
    padding-left: 10px;
    border-left: 3px solid #ccc;
    font-style: italic;
    color: var(--color-text-on-surface-secondary);
    background: transparent;
}

/* =================================================================
   7. FOOTER
================================================================= */
.footer {
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 40px 0;
    margin-top: 50px;
    text-align: center;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing);
}

.footer-nav ul {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.footer-nav a, .social-links a {
    color: rgba(255,255,255,0.8);
    font-size: 14px;
}

.footer-nav a:hover, .social-links a:hover {
    color: var(--color-white);
    text-decoration: underline;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* =================================================================
   8. RESPONSIVE MOBILE
================================================================= */
@media (max-width: 850px) {
    .header-container {
        flex-direction: column;
        gap: 15px;
    }
    
    .menu-list {
        justify-content: center;
    }

    /* Transformation de la liste flex en colonnes sur mobile */
    .forum-item {
        flex-direction: column;
        align-items: flex-start;
        position: relative;
    }

    .forum-avatar {
        margin-bottom: 10px;
    }

    .forum-subject {
        margin-right: 0;
        margin-bottom: 10px;
        width: 100%;
    }

    .forum-author, .forum-messages, .forum-last-message {
        width: auto;
        text-align: left;
        margin-bottom: 5px;
    }
    
    .user-header {
        flex-direction: column;
        text-align: center;
    }
}