:root { 
    --main-gray: #2c3e50; 
    --medium-gray: #7f8c8d;
    --light-gray: #f4f7f6; 
    --accent: #34495e; 
    --white: #ffffff;
    --border: #dddddd;
}

html {
    background-color: #696969; /* dimgray */
}

body {
    margin: 0;
    display: flex;
    flex-direction: column; /* Empile Header, Main, Footer */
    align-items: center; /* Centre la colonne */
    min-height: 100vh;
}
/* Header & Nav */
header, footer, main {
    width: 100%;
    max-width: 1200px; /* Largeur fixe du couloir */
    background-color: #f4f7f6; /* Fond clair pour le contenu */
    box-sizing: border-box;
}

header {  
    color: var(--white); 
    padding: 15px 30px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    position: sticky; 
    top: 0; 
    z-index: 9999 !important; 
    box-shadow: 0 2px 5px #1e1704;
    border-bottom: 1px solid #ddd;
    background-color: #635635;
    text-decoration: none;
}

.nav-container { display: flex; align-items: center; gap: 20px; }
.nav-container > a:hover { color:#332a02; text-decoration: none;}

.dropdown { position: relative; display: inline-block;}
.dropdown-content { 
    display: none; 
    position: absolute; 
    background: none; 
    min-width: 220px; 
    box-shadow: 0px 8px 16px rgba(0,0,0,0.1); 
    z-index: 1; 
    border-radius: 0 0 4px 4px;
}
.dropdown:hover .dropdown-content { display: block; }
.dropdown-content a { color: #fdf8e8; padding: 10px 16px; text-decoration: none; display: block; border: 1px outset #ddc575; font-size: 0.9em; border-radius: 8px;background-color: #625207; font-weight: bold;}
.dropdown-content a:hover { background-color: #9e8f2f; color: #403503; }

/* Boutons */
.btn { padding: 8px 18px; border-radius: 6px; text-decoration: none; cursor: pointer; border: none; font-size: 0.9em; transition: 0.3s; }
.btn-login { background: rgb(132, 119, 56); color: rgb(243, 215, 131); border:1px outset rgb(211, 198, 85);}
.btn-login:hover { background: #d9c355; border:2px inset rgb(211, 198, 85);color:#403503; }
.btn-sign { background: #2980b9; color: white; margin-left: 10px; }
.btn-sign:hover { background: #3498db; }

/* Conteneur Principal */
main {
    background-color: #f4f7f6;
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1000px; /* On centre sur 1000px */
    min-height: 100vh;
    flex: 1; /* Prend toute la hauteur restante */
    padding: 40px;
    box-shadow: 0 0 50px rgba(0,0,0,0.3);
    max-width: 1000px;
    display: flow-root; /* Force le parent à englober tous ses enfants flottants ou en grille */
    padding-bottom: 50px; /* Espace de sécurité avant le footer */
}

footer { 
    text-align: center; 
    padding: 15px 20px; 
    color: var(--medium-gray); 
    font-size: 0.85em; 
    border-top: 1px solid #e0e0e0; 
    margin-top: 5px;
    max-width: 1000px;; 
}

.forum-list div:hover {
    border-color: var(--main-gray);
    box-shadow: 2px 2px 10px rgba(0,0,0,0.05);
}

.forum-list h3 a:hover {
    color: #2980b9 !important;
}

/* Style général des textes du header */
.header-auth-text {
    font-variant: small-caps;
    font-size: 0.9em;
    letter-spacing: 1px;
    font-family: Arial, Helvetica, sans-serif;
}

/* Conteneur des boutons à droite */
.auth-buttons-container {
    display: flex;
    flex-direction: column; /* L'un au-dessus de l'autre */
    gap: 5px;
    align-items: flex-end;
}

/* Classe commune pour les boutons rectangulaires */
.btn-header {
    display: inline-block;
    padding: 3px 5px;
    text-decoration: none;
    font-variant: small-caps;
    font-size: 0.9em;
    border-radius: 5px;
    text-align: center;
    min-width: 100px;
    transition: 0.2s;
    margin: 5px;
}

/* Bouton spécifique Gestion (ex-Gouvernance) */
.btn-gestion {
    background-color: #8b0d06;
    color: white;
    margin-right: 20px;
    font-weight: bold;
    border: 2px solid #cb4634;
    font-variant: small-caps;
}

/* Boutons de base (Connexion / Profil) */
.btn-auth-top { background-color: #7e6901; color: white; border: 2px outset aliceblue; font-family: Arial, Helvetica, sans-serif;}
.btn-auth-bottom { background-color: #b8b177; color: #2c3e50; border: 2px outset darkgrey;  font-family: Arial, Helvetica, sans-serif;}

.debat-container {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.debat-main {
    flex: 7; /* 70% de l'espace */
}

.debat-sidebar {
    flex: 3; /* 30% de l'espace */
    background: #fdfdfd;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    position: sticky;
    top: 20px; /* La barre reste visible quand on scrolle */
}

.phase-badge {
    display: inline-block;
    padding: 5px 10px;
    background: #3498db;
    color: white;
    border-radius: 4px;
    font-size: 0.8em;
    font-variant: small-caps;
    margin-bottom: 15px;
}

/* Grille de base */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 70px;
    margin-top: 20px;
    align-items: start;
}

/* Style des cartes */
.category-card {
    background: white;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    height: 100%; /* Pour que toutes les cartes aient la même hauteur */
    display: flex;
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s;
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    border-color: #3498db;
}

.badge-themes {
    background: #3498db;
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: bold;
    width:70px;
    text-align: center;
}

.badge-modo {
    background: #27ae60; /* Vert pour le côté "actif/validé" */
    color: white;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: bold;
    margin-top: 3px;
}
nav-container + main, 
header + main {
    min-height: calc(100vh - 160px); /* Force le main à prendre toute la hauteur moins le header/footer */
    display: block;
    overflow: hidden; /* Empêche les débordements bizarres */
    padding-bottom: 80px;
    clear: both;
}
.onglet {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 7px;
    text-decoration: none;
    font-size: 0.9em;
    border: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    transition: 0.3s;
    font-family: Arial, Helvetica, sans-serif;
}