/*
Theme Name: Chari Baguirmi Theme PRO
Author: Kamaladine
Description: Thème officiel du Conseil Provincial du Chari-Baguirmi
Version: 1.2
*/

/* ================= VARIABLES DE COULEURS ================= */
:root{
    /* Couleurs principales */
    --primary: #0b5f3c;
    --secondary: #06402b;
    --accent: #c9a227; /* or institutionnel */
      --bg-header: #0b5f3c;
    --bg-footer: #06402b;
    --text-main: #222222;

    /* Texte */
    --text-main: #222222;
    --text-light: #ffffff;
    --text-muted: #6b6b6b;
    --link-color: #0b5f3c;
    --link-hover: #06402b;

    /* Fonds */
    --bg-body: #f4f6f5;
    --bg-box: #ffffff;
    --bg-header: #0b5f3c;
    --bg-menu: #0b5f3c;
    --bg-footer: #06402b;
    --bg-footer-bottom: #053525;

    /* Cadres & bordures */
    --border-color: #e0e0e0;
    --border-radius: 6px;

    /* Boutons */
    --btn-bg: #0b5f3c;
    --btn-hover: #06402b;
    --btn-text: #ffffff;

    /* Hero */
    --hero-overlay: rgba(0,0,0,0.45);
    --hero-text-accent: #ffd700;
}

/* ================= RESET ================= */
*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:var(--bg-body);
    color:var(--text-main);
}

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

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

/* ================= HEADER ================= */
header{
    background:var(--bg-header);
}

.navbar{
    max-width:1200px;
    margin:auto;
    padding:15px 20px;
    display:flex;
    align-items:center;
}

/* LOGO + IDENTITÉ */
.site-branding{
    display:flex;
    align-items:center;
    gap:15px;
}

.site-branding img{
    height:60px;
    width:auto;
}

.site-identity{
    color:var(--text-light);
}

.site-title{
    font-size:20px;
    margin:0;
}

.site-description{
    font-size:13px;
    opacity:0.85;
}

/* ================= MENU ================= */
.menu{
    margin-left:auto;
}

.menu ul{
    list-style:none;
    display:flex;
    gap:25px;
}

.menu a{
    color:var(--text-light);
    font-weight:bold;
    padding:6px 0;
    border-bottom:2px solid transparent;
}

.menu a:hover{
    border-color:var(--accent);
}

/* ================= HERO ================= */
.hero{
    background:url('assets/images/hero.jpg') center/cover no-repeat;
    height:480px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}

.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:var(--hero-overlay);
}

.hero-content{
    position:relative;
    text-align:center;
    color:var(--text-light);
    max-width:900px;
    padding:20px;
}

.hero h1{
    font-size:42px;
    margin-bottom:15px;
}

.hero p{
    font-size:18px;
    color:var(--hero-text-accent);
}

/* ================= BOUTONS ================= */
.btn{
    display:inline-block;
    margin-top:25px;
    padding:12px 28px;
    background:var(--btn-bg);
    color:var(--btn-text);
    border-radius:var(--border-radius);
    transition:0.3s;
}

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

/* ================= CONTENU ================= */
.container{
    max-width:1200px;
    margin:auto;
    padding:40px 20px;
}

.section-title{
    font-size:26px;
    margin-bottom:20px;
    border-left:5px solid var(--primary);
    padding-left:10px;
    color:var(--primary);
}

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

.col{
    background:var(--bg-box);
    padding:20px;
    border-radius:var(--border-radius);
    flex:1;
    min-width:260px;
    border:1px solid var(--border-color);
}

/* ================= FOOTER ================= */
footer{
    background:var(--bg-footer);
    color:var(--text-light);
    margin-top:40px;
}

.footer-widgets{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    max-width:1200px;
    margin:auto;
    padding:30px 20px;
}

.footer-col{
    flex:1;
    min-width:220px;
}

.footer-col h4{
    color:var(--accent);
    margin-bottom:10px;
}

.footer-bottom{
    text-align:center;
    padding:15px;
    background:var(--bg-footer-bottom);
    font-size:13px;
}

/* ================= RESPONSIVE ================= */
@media(max-width:768px){
    .navbar{
        flex-direction:column;
        gap:15px;
    }

    .menu ul{
        flex-direction:column;
        align-items:center;
    }

    .hero{
        height:300px;
    }

    .hero h1{
        font-size:24px;
    }

    .columns,
    .footer-widgets{
        flex-direction:column;
    }
}
/* ===== MENU DÉROULANT GLOBAL (SAUF ACCUEIL) ===== */

/* Base */
.menu li{
    position:relative;
}

/* Sous-menus */
.menu li.menu-item-has-children > ul{
    position:absolute;
    top:100%;
    left:0;
    background:#ffffff;
    min-width:220px;
    display:none;
    flex-direction:column;
    box-shadow:0 8px 20px rgba(0,0,0,0.25);
    z-index:9999;
    border-radius:6px;
}

/* Liens du sous-menu */
.menu li.menu-item-has-children > ul li a{
    color:#222;
    padding:10px 18px;
    display:block;
    font-weight:normal;
}

.menu li.menu-item-has-children > ul li a:hover{
    background:var(--primary);
    color:white;
}

/* Affichage au survol (SAUF Accueil) */
.menu li.menu-item-has-children:not(.menu-item-home):hover > ul{
    display:block;
}

/* Sécurité : Accueil ne déroule jamais */
.menu li.menu-item-home > ul{
    display:none !important;
}

/* ================= SLIDER ================= */

.slide{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    display:none;
}

.hero{
    position:relative;
    overflow:hidden;
}

/* ================= LAYOUT ACCUEIL ================= */

.layout{
    display:flex;
    gap:20px;
    align-items:flex-start;
}

/* sidebars fixes */
.sidebar-left,
.sidebar-right{
    width:260px;
    flex-shrink:0;
}

/* centre flexible */
.center-content{
    flex:1;
    min-width:0;
}

/* widgets */
.sidebar-left .widget,
.sidebar-right .widget,
.center-content .widget{
    background:var(--bg-box);
    padding:15px;
    margin-bottom:20px;
    border-radius:var(--border-radius);
    border:1px solid var(--border-color);
}

/* mobile */
@media(max-width:900px){
    .layout{
        flex-direction:column;
    }

    .sidebar-left,
    .sidebar-right{
        width:100%;
    }
}