/* =================================================================
   1. RESET & VARIABLES
================================================================= */
:root {
    --color-primary: #7B2D26;
    --color-secondary: #E57373;

    /* 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: #521E19;

    --color-background: #3A0E0E;
    --color-text: #ffaeae;
    --color-text-secondary: #D98880;
    --color-border: #922B21;
    --color-white: #ffffff;
    --color-hover: #C0392B;
    --color-link: #E85041;

    /* 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: #4A1414;
    --color-text-on-surface-secondary: #8A3A3A;
    --color-link-on-surface: #C0392B;


    --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 {
    display: inline-block;
    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);
}

/* Image de bannière fournie par le moteur : centrée comme le reste du bandeau */
.banner img {
    margin: 0 auto;
    height: auto;
}

/* 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;
}

/* Pagination des pages catégorie (posée sur le fond de page) */
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.pagination .page-link,
.pagination .current-page {
    min-width: 36px;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-align: center;
    font-weight: bold;
}

.pagination .current-page {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

/* =================================================================
   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;
}

/* Catégorie sans aucun fil : masquée (ne vise pas les .forum-section des profils) */
.forum-section:has(> a > .forum-header):not(:has(.forum-item)) {
    display: none;
}

/* --- 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 */
    min-width: 0;
    margin-right: 20px;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-on-surface);
    overflow-wrap: anywhere;
}

/* 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;
    overflow-wrap: anywhere;
}

.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: 210px;
    padding-left: 10px;
    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);
    overflow-wrap: anywhere;
}

/* Auteur du fil : un pseudo, comme dans les messages. --color-link est calibré
   pour le fond de page, pas pour la carte blanche. */
.thread-header a {
    color: var(--color-text-on-surface);
}

.thread-header a:hover {
    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;
    flex-wrap: wrap;
    gap: 6px 15px;
    justify-content: space-between;
    align-items: center;
}

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

.comment-author {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Reste calée à droite quand elle passe sous un pseudo long */
.comment-metadata .comment-date {
    margin-left: auto;
}

.comment-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid #ccc;
}

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

/* Contenu libre des messages (fil et aperçus du profil) : médias et blocs de code
   tenus dans la carte */
.comment-content img,
.comment-content video,
.activity-list .comment img,
.activity-list .comment video {
    max-width: 100%;
    height: auto;
}

.comment-content iframe,
.activity-list .comment iframe {
    display: block;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
}

.comment-content pre,
.activity-list .comment pre {
    white-space: pre-wrap;
}

/* 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%;
    flex-shrink: 0;
    object-fit: cover;
    border: 4px solid var(--color-secondary);
}

.user-name {
    min-width: 0;
    margin: 0;
    color: var(--color-primary);
    font-size: 26px;
    overflow-wrap: anywhere;
}

/* 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);
    overflow-wrap: anywhere;
}

.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);
    overflow-wrap: anywhere;
}

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

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

/* Aperçu d'un message (Forum.php) : du texte et des liens à la suite, pas une carte
   en colonnes comme .comment dans le fil. */
.activity-list .comment {
    display: block;
    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;
}

/* head.html enveloppe déjà le pied de page dans un <footer class="footer"> :
   celui du modèle, imbriqué, ne doit pas doubler marge et retraits. */
.footer .footer {
    margin: 0;
    padding: 0;
}

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

.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
================================================================= */
/* Liste des fils : avatar à gauche, sujet, puis auteur + messages, puis date.
   Sous 1000 px, les colonnes fixes ne laissent plus assez de place au sujet. */
@media (max-width: 1000px) {
    .forum-header {
        padding: 12px 15px;
    }

    .forum-item {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) auto;
        column-gap: 14px;
        row-gap: 6px;
        align-items: center;
        padding: 15px;
    }

    .forum-avatar {
        grid-column: 1;
        grid-row: 1 / span 3;
        align-self: start;
        width: 44px;
        height: 44px;
        margin: 0;
    }

    .forum-subject {
        grid-column: 2 / -1;
        grid-row: 1;
        margin: 0;
    }

    .forum-author {
        grid-column: 2;
        grid-row: 2;
        width: auto;
        text-align: left;
    }

    .forum-messages {
        grid-column: 3;
        grid-row: 2;
        width: auto;
        white-space: nowrap;
    }

    .forum-last-message {
        grid-column: 2 / -1;
        grid-row: 3;
        width: auto;
        padding-left: 0;
        text-align: left;
    }
}

@media (max-width: 850px) {
    .header-container {
        flex-direction: column;
        gap: 15px;
    }

    .menu-list {
        justify-content: center;
    }

    /* Fil de discussion */
    .thread-header {
        padding: 18px;
    }

    .thread-header h1 {
        font-size: 20px;
    }

    .comment-metadata {
        padding: 10px 15px;
    }

    .comment-content {
        padding: 15px;
    }

    .user-header {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    :root {
        --spacing: 12px;
    }

    .banner {
        padding: 20px var(--spacing);
        margin-bottom: 20px;
    }

    .menu-list {
        gap: 4px 8px;
    }

    .footer {
        padding: 30px 0;
    }

    .footer-nav ul,
    .social-links {
        gap: 8px 16px;
    }

    /* Profil */
    .user-header {
        gap: 15px;
        padding: 20px var(--spacing);
    }

    .user-avatar {
        width: 80px;
        height: 80px;
    }

    .user-name {
        font-size: 22px;
    }

    .user-info, .user-account, .user-activity, .user-stats {
        padding: 18px 15px;
    }

    .activity-list > li > div {
        padding: 12px;
    }
}