/* ==========================================================
   CHARTE GRAPHIQUE – ÉCOLOGIE28
   Joomla 6 Cassiopea extended recopié de Joomla 5 / Cassiopeia
   ========================================================== */


/* ================= VARIABLES GLOBALES ================= */

:root {

    /* ===== Couleurs principales ===== */

    --color-primary: #2E7D32;        /* Vert principal */
    --color-primary-dark: #1B5E20;   /* Vert foncé */
    --color-primary-light: #A5D6A7;  /* Vert clair */


    /* ===== Couleur secondaire ===== */

    --color-secondary: #264653;      /* Bleu ardoise */


    /* ===== Neutres ===== */

    --color-background: #FCFCFA;     /* Fond général */
    --color-surface: #F6F3EA;        /* Cartes / blocs */
    --color-border: #E4E8E2;         /* Bordures */
    --color-text: #2F3A33;           /* Texte principal */


    /* ===== Accent ===== */

    --color-accent: #D4A017;         /* Or discret */


    /* ===== Ombres ===== */

    --shadow-light: 0 2px 8px rgba(0,0,0,.08);
    --shadow-medium: 0 6px 20px rgba(0,0,0,.12);


    /* ===== Formes ===== */

    --radius: 12px;


    /* ===== Logo ===== */

    --logo-text-color: #1A211B;


    /* ===== Compatibilité ancienne charte ===== */

    --menu-bg: var(--color-secondary);
    --menu-text: var(--color-accent);
    --menu-border: var(--color-accent);

    --menu-hover-bg: #ffffff;
    --menu-hover-text: var(--color-primary-dark);

    --menu-active-bg: var(--color-primary);


    /* ===== Mise en page ===== */

    --content-width: 72ch;


    /* ===== Espacements ===== */

    --space-xs: .25rem;
    --space-sm: .5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-xxl: 3rem;
}



/* ==========================================================
   HEADER
   ========================================================== */


header.container-header {

    /* Fond personnalisé Écologie28 */
    background-image: url('/images/headers/cathedrale_chartres.png') !important;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;

    min-height: 180px;

    position: sticky;
    position: -webkit-sticky;

    top: 0;
    z-index: 1000;

    overflow: hidden;
}



/* Voile léger pour améliorer la lisibilité */

header.container-header::before {

    content: "";

    position: absolute;
    inset: 0;

    background: rgba(255,255,255,0.08);

    z-index: 0;
}



/* Contenu au-dessus du fond */

header.container-header .grid-child,
header.container-header .navbar-brand,
header.container-header .container-nav {

    position: relative;
    z-index: 2;
}

/* ==========================================================
   LOGO - ÉCOLOGIE28 (Mis à jour pour Joomla 6)
   ========================================================== */

/* 1. Taille du logo */
header.container-header .navbar-brand img,
header.container-header .brand-logo img {
    max-height: 200px !important; /* Ajustez à 120px ou 160px selon vos souhaits */
    width: auto !important;
    height: auto !important;
    display: inline-block;
}

/* 2. Centrage du conteneur du logo */
.navbar-brand {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    margin: 15px auto !important;
    position: relative;
    z-index: 2;
    
    /* Animation d'apparition */
    animation: fadeIn 1.5s ease 1s forwards;
    opacity: 0;
}

/* 3. Texte sous le logo */
header .site-description,
.site-description {
    display: block;
    text-align: center;
    color: var(--logo-text-color) !important;
    font-weight: 500;
    font-size: 24px;
    letter-spacing: .5px;
    text-shadow:
        0 0 5px rgba(255,255,255,.7),
        0 0 5px rgba(0,0,0,.35);
}



/* ================= MENU ================= */
.container-nav {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 3;
}

/* Neutraliser Bootstrap */
.mod-menu_dropdown-metismenu.nav-pills {
    padding: 0;
    margin: 0;
    background: none;
}

/* Structure */
.mod-menu_dropdown-metismenu {
    display: flex;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

/* Items */
.mod-menu_dropdown-metismenu > li {
    position: relative;
}

/* Liens */
.mod-menu_dropdown-metismenu > li > a {
    display: block;
    padding: 6px 10px;
    background: var(--menu-bg);
    color: var(--menu-text);
    border: 2px solid var(--menu-border);
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    transition: 0.3s;
}

/* Hover */
.mod-menu_dropdown-metismenu > li > a:hover {
    background: var(--menu-hover-bg);
    color: var(--menu-hover-text);
    border-color: var(--menu-hover-text);
}

/* Actif */
.mod-menu_dropdown-metismenu > li.active > a,
.mod-menu_dropdown-metismenu > li.current > a {
    background: var(--menu-active-bg);
}

/* ================= SOUS-MENUS ================= */
.mod-menu_dropdown-metismenu li ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    padding: 0;
    list-style: none;

    background: rgba(240,240,240,0.9);
    backdrop-filter: blur(6px);
    border-radius: 5px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

.mod-menu_dropdown-metismenu li:hover > ul {
    display: block;
}

.mod-menu_dropdown-metismenu li ul a {
    display: block;
    padding: 10px 15px;
    color: #001f3f;
    text-decoration: none;
}

.mod-menu_dropdown-metismenu li ul a:hover {
    background: rgba(255,215,0,0.25);
}

/* ================= STICKY EFFECT (optionnel amélioration) ================= */
header.container-header.scrolled {
    backdrop-filter: blur(6px);
    background-color: rgba(255,255,255,0.8);
}

/* ==========================================================
   ARTICLES ET ÉDITORIAL
   ========================================================== */

/* Éditorial : marge intérieure des blocs colorés */
.item-content > div {
    padding: 10px;
}

/* Fond de la zone contenant les cartes */
.com-content-category-blog__items {
    background: #eceff1;
    padding: 20px;
    border-radius: 10px;
}

/* Cartes des articles */
.com-content-category-blog__item {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #d8e8d8;
    border-top: 4px solid #4caf50;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    margin-bottom: 1.5rem;
    transition: transform .25s ease, box-shadow .25s ease;
}

/* Effet au survol */
.com-content-category-blog__item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

/* Image */
.com-content-category-blog__item .item-image {
    margin: 0;
    height: 220px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.com-content-category-blog__item .item-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform .4s ease;
}

.com-content-category-blog__item:hover .item-image img {
    transform: scale(1.03);
}

/* Contenu */
.com-content-category-blog__item .item-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 15px;
}

/* Titres */
.com-content-category-blog__item h1,
.com-content-category-blog__item h2,
.com-content-category-blog__item h3 {
    color: #2e7d32;
    margin-bottom: .75rem;
}

/* Paragraphes */
.com-content-category-blog__item p {
    line-height: 1.6;
}

/* Bouton toujours en bas */
.com-content-category-blog__item .readmore {
    margin-top: auto;
    padding-top: 15px;
}

/* Bouton "Lire la suite" */
.readmore .btn-secondary {
    background-color: #4caf50;
    border-color: #4caf50;
    color: #fff;
    transition: all .2s ease;
}

.readmore .btn-secondary:hover {
    background-color: #388e3c;
    border-color: #388e3c;
    transform: translateX(2px);
}

/* Mobile */
@media (max-width: 768px) {
    .com-content-category-blog__items {
        padding: 12px;
    }

    .com-content-category-blog__item .item-image img {
        height: 180px;
    }
}

/* ================= RESPONSIVE ================= */
@media (max-width: 992px) {

    /* Menu vertical */
    .mod-menu_dropdown-metismenu {
        flex-direction: column;
        align-items: center;
    }

    .mod-menu_dropdown-metismenu > li {
        width: 100%;
        text-align: center;
    }

    .mod-menu_dropdown-metismenu > li > a {
        width: 100%;
    }

    /* Sous-menus en mobile */
    .mod-menu_dropdown-metismenu li ul {
        position: static;
        box-shadow: none;
        background: rgba(240,240,240,1);
    }

    .mod-menu_dropdown-metismenu li:hover > ul {
        display: none; /* désactive hover mobile */
    }

    /* Option : affichage au clic (si besoin JS plus tard) */
}

/* Très petits écrans */
@media (max-width: 480px) {

    .navbar-brand img {
        max-width: 90%;
        height: auto;
    }

    .site-description {
        font-size: 0.9rem;
    }
}

/* Cartes articles */
.com-content-article {
    background-color: #f5f5f5;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* Images d'introduction centrées */
.blog-item .item-image img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}