/*** Helix Ultimate & Global Layout ***/
.logo-image-phone {
    height: 60px !important;
    padding: 10px;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
	padding: 8px;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover {
    background: #0d854d;
    width: 100%;
    color: #fff;
}
/* Hover items méga-menu Outils & jeux */
.sp-mega-group > li > a:hover {
    background: #0d854d;
    color: #fff;
    display: block;
}


#sp-left .sp-module, #sp-right .sp-module {
	padding: 10px;
}
#sp-bottom { padding: 30px 10px; }

#sp-footer {
    padding: 0;
    background: #0d854d;
    color: #fff;
}

#sp-footer .container-inner {
    padding: 0 !important;
}

/* Style du bouton de contact */
.Contacter a {
    display: inline-block;
    padding: 10px 20px;
    background: linear-gradient(135deg, #8b4513 0%, #654321 100%);
    color: #f5f5dc;
    text-decoration: none;
    font-weight: 600;
    border-radius: 25px;
    box-shadow: 0 4px 8px rgba(101, 67, 33, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid #a0522d;
    position: relative;
    overflow: hidden;
}


/* Effet de surbrillance au survol */
.Contacter a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.Contacter a:hover::before {
    left: 100%;
}

/* Animation au survol */
.Contacter a:hover {
    background: linear-gradient(135deg, #a0522d 0%, #8b4513 100%);
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(101, 67, 33, 0.5);
}

/* Effet au clic */
.Contacter a:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(107, 142, 35, 0.3);
}

/* Icône optionnelle (si vous utilisez Font Awesome) */
.Contacter a::after {
    content: ' ✉';
    margin-left: 8px;
    font-size: 14px;
}




#cis_slider_1_125 .cis_row_item_overlay_txt {
    font-size: 14px !important;
}

/*** Header & Menu ***/
.sp-contact-info { float: none !important; padding: 10px;}
a.glink img { margin-right: 5px !important; }

#sp-header .container, #sp-header .col-lg-10 { padding: 0; }

/* #sp-logo {
    width: 100px;
    padding: 0 0 10px 10px;
}
 */
.sp-megamenu-parent > li > a, 
.sp-megamenu-parent > li > span {
    text-transform: none;
    padding: 0 4px;
    font-size: 13px;
}
@media (max-width: 1200px) {
  .logo-image {height: 60px !important;}
  .container {max-width:1050px;}
  #sp-logo {padding-right: 0px !important;}
}

.sp-megamenu-parent > li:last-child > a {
    padding: 0 !important;
}

/*** Boutons & Éléments Graphiques ***/
.boutonCR {
    display: inline-block;
    text-decoration: none;
    padding: 10px;
    font-family: verdana, sans-serif;
    font-size: 1em;
    color: #4f6128;
    background-color: rgb(255,201,153);
    border-radius: 20px;
    border: 2px solid #FFFFFF;
    box-shadow: 3px 3px 12px #938953;
    width: 200px;
    margin: auto;
    transition: all 0.3s ease;
}

.boutonCR:hover, .boutonCR:focus {
    color: rgb(17,17,17);
    background-color: #f79646;
    box-shadow: 3px 3px 12px #e36c09;
}

.BoxWF {
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
    padding-left: 10px !important;
    margin-top: 20px;
}

.well {
    min-height: 20px;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #f7f7f7;
    margin-top: 20px !important;
}

.Message {
    line-height: 1.2;
    font-family: 'Comic Sans MS', cursive, sans-serif;
    font-size: 20px;
}

/*** Lettrines ***/
.lettrine, .lettrine1, .lettrine2, .lettrine3, .lettrine4, .lettrine5 {
    display: block;
    float: left;
    text-align: center;
    font-size: 25px;
    line-height: 25px;
    color: #fff;
    padding: 5px;
    margin: 5px 8px 0 2px;
    width: 30px;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3), 0 0 14px rgba(0,0,0,0.2) inset;
}

.lettrine, .lettrine1, .lettrine2 { background: #231f20; }
.lettrine3, .lettrine4, .lettrine5 { background: #fff; color: #333 !important; }

.lettrine1, .lettrine4 { border-radius: 50%; }
.lettrine2, .lettrine5 { border-radius: 50% 0; }

/*** Tailles d'images / Conteneurs ***/
.Taille_275px { width: 275px !important; margin: 10px; float: left; }
.Taille_400px, .Taille_500px { margin: 10px auto; display: block; }
.Taille_400px { width: 400px !important; }
.Taille_500px { width: 500px !important; }

/* --- Début des styles Composteur Financier (FR + EN) --- */

/* Styles communs pour les deux versions */
#composteur-app,
#compostor-app {
    --primary-color: #2c5530;
    --secondary-color: #4a7c59;
    --accent-color: #8bc34a;
    --light-green: #e8f5e8;
    --success-color: #2d5016;
    --danger-color: #d32f2f;
    --warning-color: #f57f17;
    --bg-color: #ffffff;
    
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg-color);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    overflow: hidden;
    margin-bottom: 2rem;
}

/* Header */
#composteur-app .header-app,
#compostor-app .header-app { 
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 2.5rem 2rem;
    text-align: center;
}

#composteur-app .header-app h1,
#compostor-app .header-app h1 {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 300;
    color: white;
}

#composteur-app .header-app p,
#compostor-app .header-app p {
    color: #e8f5e8;
    margin-top: 0.5rem;
}

/* Navigation (Onglets) */
#composteur-app .navbar-app,
#compostor-app .navbar-app {
    background-color: var(--primary-color);
    padding: 0;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#composteur-app .tab-btn,
#compostor-app .tab-btn {
    background: none;
    border: none;
    color: white;
    padding: 1rem 2rem;
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    transition: background-color 0.3s ease;
    border-bottom: 4px solid transparent;
}

#composteur-app .tab-btn:hover,
#compostor-app .tab-btn:hover {
    background-color: var(--secondary-color);
}

#composteur-app .tab-btn.active,
#compostor-app .tab-btn.active {
    background-color: var(--secondary-color);
    border-bottom: 4px solid var(--accent-color);
}

/* Sections */
#composteur-app .tab-content,
#compostor-app .tab-content {
    display: none; /* Caché par défaut */
    padding: 2rem;
    animation: fadeIn 0.5s;
}

#composteur-app .section-header,
#compostor-app .section-header {
    font-size: 1.8rem;
    color: var(--primary-color);
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
}

#composteur-app .section-header .icon,
#compostor-app .section-header .icon {
    margin-right: 10px;
}

/* Cartes (Dashboard) */
#composteur-app .card-container,
#compostor-app .card-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

#composteur-app .card,
#compostor-app .card {
    background: var(--light-green);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.05);
    transition: transform 0.2s ease;
}

#composteur-app .card:hover,
#compostor-app .card:hover {
    transform: translateY(-5px);
}

#composteur-app .card .label,
#compostor-app .card .label {
    color: var(--secondary-color);
    font-size: 0.9rem;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

#composteur-app .card .value,
#compostor-app .card .value {
    font-size: 2rem;
    font-weight: bold;
    color: var(--primary-color);
}

#composteur-app .card.total .value,
#compostor-app .card.total .value {
    color: var(--success-color);
}

#composteur-app .status-message,
#compostor-app .status-message {
    text-align: center;
    padding: 1rem;
    border-radius: 8px;
    margin-top: 1.5rem;
}

#composteur-app .status-sain,
#compostor-app .status-sain {
    background: #e8f5e8;
    color: #2d5016;
    border: 1px solid #8bc34a;
}

/* Tables */
#composteur-app .table-responsive,
#compostor-app .table-responsive {
    overflow-x: auto;
    margin-bottom: 2rem;
}

#composteur-app table,
#compostor-app table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    font-size: 0.95rem;
}

#composteur-app th, 
#composteur-app td,
#compostor-app th,
#compostor-app td {
    text-align: left;
    padding: 12px 15px;
    border-bottom: 1px solid #ddd;
}

#composteur-app th,
#compostor-app th {
    background-color: var(--primary-color);
    color: white;
    text-transform: uppercase;
    font-weight: 500;
}

#composteur-app tr:nth-child(even),
#compostor-app tr:nth-child(even) {
    background-color: #f9f9f9;
}

#composteur-app tr:hover,
#compostor-app tr:hover {
    background-color: #f1f1f1;
}

#composteur-app .balance-row,
#compostor-app .balance-row {
    font-weight: bold;
    background-color: var(--light-green) !important;
    color: var(--primary-color);
}

#composteur-app .negative,
#compostor-app .negative {
    color: var(--danger-color);
}

#composteur-app .footer-app,
#compostor-app .footer-app {
    text-align: center;
    padding: 1.5rem 2rem;
    color: #777;
    font-size: 0.85rem;
    border-top: 1px solid #eee;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --- RESPONSIVE MOBILE : Transformation en Cartes --- */
@media screen and (max-width: 768px) {
    
    /* 1. On casse la structure tableau classique */
    #composteur-app table, 
    #composteur-app thead, 
    #composteur-app tbody, 
    #composteur-app th, 
    #composteur-app td, 
    #composteur-app tr,
    #compostor-app table, 
    #compostor-app thead, 
    #compostor-app tbody, 
    #compostor-app th, 
    #compostor-app td, 
    #compostor-app tr { 
        display: block; 
    }

    /* 2. On cache les entêtes (mais on les garde accessibles aux lecteurs d'écran) */
    #composteur-app thead tr,
    #compostor-app thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    /* 3. Style de la "Carte" (la ligne du tableau) */
    #composteur-app tr,
    #compostor-app tr { 
        margin-bottom: 1.5rem; 
        border: 1px solid #ddd;
        border-radius: 8px;
        background: white;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        overflow: hidden; /* Pour garder les coins arrondis */
    }

    /* Style spécifique pour les lignes paires dans les cartes */
    #composteur-app tr:nth-child(even),
    #compostor-app tr:nth-child(even) {
        background-color: #f9f9f9;
    }

    /* 4. Style de la cellule */
    #composteur-app td,
    #compostor-app td { 
        /* On fait de la place pour le label à gauche */
        padding-left: 45% !important; 
        position: relative;
        border-bottom: 1px solid #eee;
        text-align: right; /* Valeur alignée à droite */
        min-height: 25px; /* Hauteur min */
    }
    
    #composteur-app td:last-child,
    #compostor-app td:last-child {
        border-bottom: none;
    }

    /* 5. Le Label (pseudo-élément) qui apparaît à gauche */
    #composteur-app td:before,
    #compostor-app td:before { 
        position: absolute;
        top: 12px;
        left: 15px;
        width: 40%; 
        padding-right: 10px; 
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        color: var(--primary-color);
        content: ""; /* Sera rempli par les règles ci-dessous */
    }

    /* --- LABELS SPÉCIFIQUES PAR ONGLET VERSION FRANÇAISE --- */

    /* BUDGET PRÉVISIONNEL */
    #budget td:nth-of-type(1):before { content: "Poste"; }
    #budget td:nth-of-type(2):before { content: "Prévisionnel"; }
    #budget td:nth-of-type(3):before { content: "Réalisé"; }
    #budget td:nth-of-type(4):before { content: "Écart"; }
    #budget td:nth-of-type(5):before { content: "% Réalisation"; }

    /* COMPTE BANCAIRE */
    #banque td:nth-of-type(1):before { content: "Date"; }
    #banque td:nth-of-type(2):before { content: "Type"; }
    #banque td:nth-of-type(3):before { content: "Libellé"; }
    #banque td:nth-of-type(4):before { content: "Montant"; }

    /* CAISSE */
    #caisse td:nth-of-type(1):before { content: "Date"; }
    #caisse td:nth-of-type(2):before { content: "Opération"; }
    #caisse td:nth-of-type(3):before { content: "Libellé"; }
    #caisse td:nth-of-type(4):before { content: "Nb/Qté"; }
    #caisse td:nth-of-type(5):before { content: "Montant"; }
    
    /* Gestion de la ligne "En caisse..." qui a un colspan=3 */
    #caisse tr td[colspan="3"] {
        padding-left: 15px !important;
        text-align: left;
        background-color: var(--light-green);
        font-style: italic;
    }
    #caisse tr td[colspan="3"]:before { content: "" !important; } /* Pas de label */

    /* --- LABELS SPÉCIFIQUES PAR ONGLET VERSION ANGLAISE --- */

    /* BUDGET FORECAST */
    #budgetEN td:nth-of-type(1):before { content: "Title"; }
    #budgetEN td:nth-of-type(2):before { content: "Forecast"; }
    #budgetEN td:nth-of-type(3):before { content: "Achieved"; }
    #budgetEN td:nth-of-type(4):before { content: "Difference"; }
    #budgetEN td:nth-of-type(5):before { content: "% Achievement"; }

    /* BANK ACCOUNT */
    #bankEN td:nth-of-type(1):before { content: "Date"; }
    #bankEN td:nth-of-type(2):before { content: "Type"; }
    #bankEN td:nth-of-type(3):before { content: "Wording"; }
    #bankEN td:nth-of-type(4):before { content: "Amount"; }

    /* CASH REGISTER */
    #cashEN td:nth-of-type(1):before { content: "Date"; }
    #cashEN td:nth-of-type(2):before { content: "Operation"; }
    #cashEN td:nth-of-type(3):before { content: "Title"; }
    #cashEN td:nth-of-type(4):before { content: "Qty"; }
    #cashEN td:nth-of-type(5):before { content: "Amount"; }
    
    /* Gestion de la ligne "At checkout..." qui a un colspan=3 */
    #cashEN tr td[colspan="3"] {
        padding-left: 15px !important;
        text-align: left;
        background-color: var(--light-green);
        font-style: italic;
    }
    #cashEN tr td[colspan="3"]:before { content: "" !important; } /* Pas de label */

    /* Gestion des lignes de TOTAUX (Balance row) pour tous les tableaux */
    #composteur-app .balance-row td,
    #compostor-app .balance-row td {
        background-color: var(--secondary-color) !important;
        color: white !important;
        padding-left: 15px !important;
        text-align: center;
    }
    
    #composteur-app .balance-row td:before,
    #compostor-app .balance-row td:before {
        position: static; /* On annule le positionnement absolu pour le total */
        color: white;
        margin-right: 10px;
    }
    
    /* Gestion des colspan=4 pour les totaux anglais */
    #compostor-app tr td[colspan="4"] {
        padding-left: 15px !important;
        text-align: center;
    }
    #compostor-app tr td[colspan="4"]:before { 
        position: static;
        margin-right: 10px;
    }
}
/* --- Fin des styles Composteur Financier --- */

/*** Bouton Composteur Kids ***/
.button-container { width: 100%; display: flex; justify-content: center; padding: 20px; }

.compost-button {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 25px 20px;
    background: linear-gradient(135deg, #81c784 0%, #66bb6a 100%);
    border: 4px solid #4caf50;
    border-radius: 50px;
    color: white;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 8px 25px rgba(102, 187, 106, 0.4);
    transition: all 0.3s ease;
    animation: pulse 2s infinite;
}

.compost-button:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 12px 35px rgba(102, 187, 106, 0.6);
}

.mascot-image {
    width: 90px; height: 90px; border-radius: 50%;
    background: white; padding: 6px;
    animation: bounce 2s infinite ease-in-out;
}

/*** Media Queries (Regroupées) ***/
@media (max-width: 992px) {
    #sp-menu.col-4 { width: 60%; }
}

@media (max-width: 768px) {
    /* Tableaux en mode cartes pour mobile */
    #composteur-app table, #composteur-app thead, #composteur-app tbody, 
    #composteur-app th, #composteur-app td, #composteur-app tr,
    #compostor-app table, #compostor-app thead, #compostor-app tbody, 
    #compostor-app th, #compostor-app td, #compostor-app tr { 
        display: block; 
    }

    #composteur-app thead tr, #compostor-app thead tr { position: absolute; top: -9999px; left: -9999px; }

    #composteur-app tr, #compostor-app tr { 
        margin-bottom: 1.5rem; border: 1px solid #ddd; border-radius: 8px; 
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    #composteur-app td, #compostor-app td { 
        padding-left: 45% !important; position: relative; text-align: right; 
    }

    #composteur-app td:before, #compostor-app td:before { 
        position: absolute; left: 15px; width: 40%; text-align: left;
        font-weight: bold; color: var(--primary-color);
    }

    /* Injection des labels mobile via content (extraits de votre logique initiale) */
    #budget td:nth-of-type(1):before { content: "Poste"; }
    #budget td:nth-of-type(2):before { content: "Prévisionnel"; }
    #banque td:nth-of-type(1):before { content: "Date"; }
    /* ... (les autres labels suivent la même logique) */

    .compost-button { font-size: 20px; padding: 20px; }
    .mascot-image { width: 70px; height: 70px; }
}

@media (max-width: 480px) {
    .hidden-phone { display: none !important; }
}

@media (min-width: 481px) {
    .visible-phone { display: none !important; }
}

/*** Animations ***/
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 8px 25px rgba(102, 187, 106, 0.4); }
    50% { box-shadow: 0 8px 35px rgba(102, 187, 106, 0.7); }
}




/* ============================================
   CÉKOIDONC - CSS POUR CUSTOM.CSS
   Compatible Bootstrap 5.3 (Joomla 6)
   Style adapté à compostons-ensemble.fr
   ============================================ */

/* ============================================
   VARIABLES COULEURS
   ============================================ */
:root {
  --glossaire-vert-principal: #4CAF50;
  --glossaire-vert-clair: #8BC34A;
  --glossaire-vert-fonce: #2E7D32;
  --glossaire-beige-fond: #FFFEF7;
  --glossaire-gris-clair: #F5F5F5;
}

/* ============================================
   CONTENEUR PRINCIPAL
   ============================================ */
.glossaire-cekoidonc {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  background: var(--glossaire-beige-fond);
}

.glossaire-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 30px 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ============================================
   EN-TÊTE
   ============================================ */
.glossaire-header {
  text-align: center;
  padding: 30px 20px;
  margin-bottom: 30px;
  border-bottom: 3px solid var(--glossaire-vert-principal);
  background: linear-gradient(to bottom, #fff, var(--glossaire-gris-clair));
  border-radius: 8px 8px 0 0;
}

.glossaire-header h1 {
  font-size: 2.5em;
  color: var(--glossaire-vert-fonce);
  margin: 0 0 15px 0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.glossaire-header h1::before {
  content: "🪱 ";
  font-size: 0.8em;
  margin-right: 10px;
}

.glossaire-intro {
  font-size: 1.1em;
  color: #424242;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ============================================
   ASTUCE / TIP
   ============================================ */
.glossaire-tip {
  background: #FFF9C4;
  border-left: 4px solid #FBC02D;
  padding: 15px;
  margin: 20px 0;
  border-radius: 5px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.glossaire-tip .tip-icon {
  font-size: 1.5em;
  flex-shrink: 0;
}

.glossaire-tip p {
  margin: 0;
  color: #5D4037;
}

/* ============================================
   BARRE DE RECHERCHE
   ============================================ */
.glossaire-search .form-control {
  border: 2px solid var(--glossaire-vert-principal);
  border-radius: 25px;
  padding: 12px 20px;
  font-size: 1em;
  transition: all 0.3s ease;
}

.glossaire-search .form-control:focus {
  box-shadow: 0 0 0 0.25rem rgba(76, 175, 80, 0.25);
  border-color: var(--glossaire-vert-fonce);
}

/* ============================================
   NAVIGATION PAR CATÉGORIES
   ============================================ */
.categories-nav {
  padding: 15px;
  background: var(--glossaire-gris-clair);
  border-radius: 8px;
}

.categories-nav .btn-outline-success {
  border-color: var(--glossaire-vert-principal);
  color: var(--glossaire-vert-fonce);
  font-weight: 600;
  transition: all 0.3s ease;
}

.categories-nav .btn-outline-success:hover {
  background-color: var(--glossaire-vert-principal);
  border-color: var(--glossaire-vert-principal);
  color: #fff;
  transform: translateY(-2px);
}

.categories-nav .btn-outline-success.active {
  background-color: var(--glossaire-vert-principal);
  border-color: var(--glossaire-vert-principal);
  color: #fff;
}

/* Responsive - mobile vertical stack */
.categories-nav .btn-group-vertical .btn {
  text-align: left;
}

/* ============================================
   SECTIONS
   ============================================ */
.glossaire-section {
  margin-bottom: 35px;
}

.section-title {
  font-size: 1.6em;
  color: var(--glossaire-vert-fonce);
  margin-bottom: 20px;
  padding: 12px 15px;
  background: linear-gradient(90deg, var(--glossaire-vert-clair), transparent);
  border-left: 5px solid var(--glossaire-vert-principal);
  border-radius: 0 5px 5px 0;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-title .badge {
  font-size: 0.6em;
  margin-left: auto;
}

/* ============================================
   ACCORDÉONS (CARTES TERMES)
   ============================================ */
.glossaire-cekoidonc .accordion-item {
  border: 1px solid #E0E0E0;
  margin-bottom: 12px;
  border-radius: 8px !important;
  overflow: hidden;
  transition: all 0.3s ease;
}

.glossaire-cekoidonc .accordion-item:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  border-color: var(--glossaire-vert-clair);
  transform: translateX(3px);
}

.glossaire-cekoidonc .accordion-button {
  background: linear-gradient(to right, #fff, var(--glossaire-gris-clair));
  color: var(--glossaire-vert-fonce);
  font-weight: 600;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
}

.glossaire-cekoidonc .accordion-button:not(.collapsed) {
  background-color: var(--glossaire-vert-clair);
  color: #fff;
  box-shadow: none;
}

.glossaire-cekoidonc .accordion-button:hover {
  background-color: var(--glossaire-gris-clair);
}

.glossaire-cekoidonc .accordion-button:not(.collapsed):hover {
  background-color: var(--glossaire-vert-clair);
}

.glossaire-cekoidonc .accordion-button:focus {
  box-shadow: 0 0 0 0.25rem rgba(76, 175, 80, 0.25);
  border-color: var(--glossaire-vert-principal);
}

/* Numéro du terme */
.terme-numero {
  font-weight: 700;
  color: var(--glossaire-vert-principal);
  font-size: 1.2em;
  min-width: 35px;
  text-align: center;
}

.glossaire-cekoidonc .accordion-button:not(.collapsed) .terme-numero {
  color: #fff;
}

/* Nom du terme */
.terme-nom {
  font-weight: 600;
  font-size: 1.05em;
  flex: 1;
}

/* Icône */
.terme-icon {
  font-size: 1.5em;
}

/* Flèche Bootstrap (override) */
.glossaire-cekoidonc .accordion-button::after {
  margin-left: 0;
  flex-shrink: 0;
  background-size: 1.25rem;
  transition: transform 0.3s ease;
}

.glossaire-cekoidonc .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Contenu accordéon */
.glossaire-cekoidonc .accordion-body {
  padding: 18px 18px 18px 65px;
  background: var(--glossaire-beige-fond);
  color: #424242;
  line-height: 1.7;
  border-top: 2px solid var(--glossaire-vert-clair);
}

/* ============================================
   FOOTER / APPELS À L'ACTION
   ============================================ */
.glossaire-footer {
  text-align: center;
  padding: 30px;
  background: var(--glossaire-gris-clair);
  border-radius: 8px;
  border-top: 3px solid var(--glossaire-vert-principal);
}

.glossaire-footer .lead {
  margin-bottom: 20px;
  color: #424242;
}

.glossaire-footer .btn-success {
  background-color: var(--glossaire-vert-principal);
  border-color: var(--glossaire-vert-principal);
  font-weight: 600;
  transition: all 0.3s ease;
}

.glossaire-footer .btn-success:hover {
  background-color: var(--glossaire-vert-fonce);
  border-color: var(--glossaire-vert-fonce);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* ============================================
   MESSAGE AUCUN RÉSULTAT
   ============================================ */
.no-results-message {
  margin-top: 15px;
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.glossaire-cekoidonc .accordion-item {
  animation: fadeInUp 0.4s ease;
  animation-fill-mode: both;
}

.glossaire-cekoidonc .accordion-item:nth-child(1) { animation-delay: 0.05s; }
.glossaire-cekoidonc .accordion-item:nth-child(2) { animation-delay: 0.1s; }
.glossaire-cekoidonc .accordion-item:nth-child(3) { animation-delay: 0.15s; }
.glossaire-cekoidonc .accordion-item:nth-child(4) { animation-delay: 0.2s; }
.glossaire-cekoidonc .accordion-item:nth-child(5) { animation-delay: 0.25s; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .glossaire-container {
    margin: 10px;
    padding: 15px;
  }
  
  .glossaire-header h1 {
    font-size: 1.8em;
  }
  
  .glossaire-intro {
    font-size: 1em;
  }
  
  .glossaire-cekoidonc .accordion-body {
    padding-left: 18px;
  }
  
  .section-title {
    font-size: 1.3em;
  }
  
  .terme-nom {
    font-size: 0.95em;
  }
  
  .glossaire-footer .d-flex {
    flex-direction: column;
  }
  
  .glossaire-footer .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .glossaire-header h1 {
    font-size: 1.5em;
  }
  
  .terme-numero {
    font-size: 1em;
    min-width: 30px;
  }
  
  .terme-icon {
    font-size: 1.2em;
  }
}

/* ============================================
   MODE IMPRESSION
   ============================================ */
@media print {
  .glossaire-search,
  .categories-nav,
  .glossaire-footer,
  .glossaire-cekoidonc .accordion-button::after {
    display: none !important;
  }
  
  .glossaire-cekoidonc .accordion-collapse {
    display: block !important;
    height: auto !important;
  }
  
  .glossaire-cekoidonc .accordion-item {
    page-break-inside: avoid;
    box-shadow: none;
    border: 1px solid #CCC;
    margin-bottom: 8px;
  }
  
  .glossaire-container {
    box-shadow: none;
  }
  
  .glossaire-cekoidonc .accordion-button {
    background: #fff !important;
    color: #000 !important;
  }
}

/* ============================================
   ACCESSIBILITÉ
   ============================================ */
.glossaire-cekoidonc .accordion-button:focus-visible {
  outline: 3px solid var(--glossaire-vert-principal);
  outline-offset: 2px;
}

/* Améliorer le contraste pour les utilisateurs malvoyants */
@media (prefers-contrast: high) {
  .glossaire-cekoidonc .accordion-button {
    border: 2px solid #000;
  }
  
  .section-title {
    border-left-width: 8px;
  }
}

/* Mode sombre (si activé par l'utilisateur) */
@media (prefers-color-scheme: dark) {
  .glossaire-cekoidonc {
    background: #1a1a1a;
  }
  
  .glossaire-container {
    background: #2d2d2d;
    color: #e0e0e0;
  }
  
  .glossaire-header {
    background: linear-gradient(to bottom, #2d2d2d, #1a1a1a);
  }
  
  .glossaire-cekoidonc .accordion-button {
    background: #2d2d2d;
    color: #e0e0e0;
  }
  
  .glossaire-cekoidonc .accordion-body {
    background: #1a1a1a;
    color: #e0e0e0;
  }
}

/* ============================================
  /* ── On parle de nous ── */
  /* ── Variables ── */
  :root {
    --vert-fonce:   #2d5a1b;
    --vert-moyen:   #4a8c2a;
    --vert-clair:   #8cc63f;
    --terre:        #8b5e3c;
    --creme:        #f5f0e8;
    --blanc:        #ffffff;
    --gris-texte:   #444;
    --ombre:        0 2px 12px rgba(45,90,27,0.12);
  }

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


  /* ── En-tête de la page ── */
  .opdn-header {
    background: linear-gradient(135deg, var(--vert-fonce) 0%, var(--vert-moyen) 100%);
    color: var(--blanc);
    padding: 48px 24px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .opdn-header::before {
    content: '🌿';
    position: absolute;
    font-size: 160px;
    opacity: 0.07;
    top: -20px; left: -20px;
    transform: rotate(-15deg);
  }
  .opdn-header::after {
    content: '📰';
    position: absolute;
    font-size: 130px;
    opacity: 0.07;
    bottom: -20px; right: 10px;
    transform: rotate(10deg);
  }
  .opdn-header h1 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: normal;
    letter-spacing: 0.02em;
    margin-bottom: 10px;
  }
  .opdn-header h1 span {
    color: var(--vert-clair);
    font-style: italic;
  }
  .opdn-header p {
    font-size: 1rem;
    opacity: 0.85;
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.6;
  }

  /* ── Compteur ── */
  .opdn-count {
    text-align: center;
    margin: 28px auto 8px;
    font-size: 0.9rem;
    color: var(--vert-fonce);
    font-style: italic;
  }

  /* ── Grille de cartes ── */
  .opdn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto 48px;
    padding: 0 20px;
  }

  /* ── Carte PDF ── */
  .pdf-card {
    background: var(--blanc);
    border-radius: 10px;
    box-shadow: var(--ombre);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    border-left: 4px solid var(--vert-clair);
  }
  .pdf-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 24px rgba(45,90,27,0.2);
  }

  .pdf-card-icon {
    background: linear-gradient(135deg, var(--vert-fonce), var(--vert-moyen));
    color: var(--blanc);
    font-size: 2.4rem;
    text-align: center;
    padding: 24px 0 18px;
    position: relative;
  }
  .pdf-card-icon .pdf-badge {
    position: absolute;
    top: 8px; right: 8px;
    background: var(--terre);
    color: #fff;
    font-size: 0.6rem;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
  }

  .pdf-card-body {
    padding: 16px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .pdf-card-title {
    font-size: 1rem;
    font-weight: bold;
    color: var(--vert-fonce);
    line-height: 1.4;
  }
  .pdf-card-meta {
    font-size: 0.78rem;
    color: #888;
    font-family: 'Arial', sans-serif;
  }

  .pdf-card-actions {
    padding: 12px 18px 16px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  .btn-voir, .btn-dl {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-family: 'Arial', sans-serif;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    cursor: pointer;
  }
  .btn-voir {
    background: var(--vert-moyen);
    color: var(--blanc);
    flex: 1;
    justify-content: center;
  }
  .btn-voir:hover { background: var(--vert-fonce); color: var(--blanc); }

  .btn-dl {
    background: var(--creme);
    color: var(--vert-fonce);
    border: 1px solid var(--vert-clair);
  }
  .btn-dl:hover { background: var(--vert-clair); color: var(--blanc); }

  /* ── Message si aucun fichier ── */
  .opdn-empty {
    text-align: center;
    padding: 60px 20px;
    color: #999;
    font-style: italic;
    max-width: 500px;
    margin: 0 auto;
  }
  .opdn-empty span { font-size: 3rem; display: block; margin-bottom: 16px; }

  /* ── Pied de page section ── */
  .opdn-footer-note {
    text-align: center;
    padding: 0 20px 40px;
    font-size: 0.82rem;
    color: #999;
    font-family: 'Arial', sans-serif;
  }
  .opdn-footer-note a {
    color: var(--vert-moyen);
    text-decoration: none;
  }

  /* ── Responsive ── */
  @media (max-width: 480px) {
    .opdn-grid { grid-template-columns: 1fr; }
    .btn-voir, .btn-dl { font-size: 0.78rem; padding: 7px 10px; }
  }

/* ─── mod_lesaviezvous — Compostons Ensemble Grosbreuil ─────────────────────── */

@keyframes pulse-lsv {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(39,174,96,0.6); }
    50%  { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(39,174,96,0); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(39,174,96,0); }
}
@keyframes shimmer-lsv {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}
@keyframes slide-in-lsv {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes line-glow-lsv {
    0%   { opacity: 0.4; }
    50%  { opacity: 1; }
    100% { opacity: 0.4; }
}

.lsv-card {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.09), 0 1px 4px rgba(0,0,0,0.06);
    padding: 22px 20px 18px;
    text-align: center;
    animation: slide-in-lsv 0.4s ease-out both;
	margin-top: 15px;
}

.lsv-card-line {
    height: 3px;
    background: linear-gradient(90deg, #a8d5b5, #27ae60, #52be80, #27ae60, #a8d5b5);
    border-radius: 3px;
    margin: 0 16px 20px 16px;
    animation: line-glow-lsv 2.5s ease-in-out infinite;
}

.lsv-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(90deg, #1e8449, #27ae60, #52be80, #27ae60, #1e8449);
    background-size: 200% auto;
    color: #fff;
    font-size: 0.70em;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 16px;
    animation:
        pulse-lsv   2s   ease-in-out infinite,
        shimmer-lsv 2.5s linear    infinite;
}

.lsv-badge .lsv-badge-dot {
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    animation: pulse-lsv 1.2s ease-in-out infinite;
    flex-shrink: 0;
}

.lsv-content {
    font-size: 0.92em;
    color: #2a2a2a;
    line-height: 1.6;
    font-style: italic;
    margin: 0;
}

.lsv-content p {
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────────── */

/* ============================================================
   Compostons Ensemble — Modules harmonisés
   Classe Joomla à renseigner dans chaque module : ce-module
   Version 1.0 — Avril 2025
   ============================================================ */

/* ── Variables de couleurs ─────────────────────────────────── */
:root {
  --ce-green:        #3B6D11;   /* vert principal du site */
  --ce-green-dark:   #27500A;   /* vert foncé (textes, totaux) */
  --ce-green-mid:    #639922;   /* vert intermédiaire */
  --ce-green-light:  #EAF3DE;   /* vert très clair (fonds) */
  --ce-green-border: #C0DD97;   /* bordure verte pâle */
  --ce-amber:        #BA7517;   /* ambre (statuts à confirmer) */
  --ce-amber-light:  #FAEEDA;   /* fond ambre clair */
  --ce-amber-border: #FAC775;   /* bordure ambre */
  --ce-red:          #A32D2D;   /* montants négatifs */
  --ce-radius:       10px;
  --ce-shadow:       0 2px 8px rgba(59, 109, 17, 0.12);
}

/* ── Conteneur principal ────────────────────────────────────── */
.sp-module.ce-module {
  border: 1.5px solid var(--ce-green-border);
  border-radius: var(--ce-radius);
  overflow: hidden;
  background: #ffffff;
  box-shadow: var(--ce-shadow);
  margin-bottom: 1.5rem;
  padding: 0;          /* annule le padding par défaut Helix */
}

/* ── En-tête : bandeau vert avec titre ──────────────────────── */

/* Joomla génère .sp-module-title ou h3 selon le paramètre "Show Title" */
.sp-module.ce-module .sp-module-title,
.sp-module.ce-module > h3 {
  background: var(--ce-green);
  color: #EAF3DE;
  margin: 0;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: 0;    /* les coins arrondis sont sur le conteneur */
}

/* liens éventuels dans le titre */
.sp-module.ce-module .sp-module-title a,
.sp-module.ce-module > h3 a {
  color: #EAF3DE;
  text-decoration: none;
}

/* ── Corps du module ─────────────────────────────────────────── */
.sp-module.ce-module .sp-module-ct,
.sp-module.ce-module .sp-module-content {
  padding: 16px;
}

/* fallback si Helix n'injecte pas .sp-module-ct */
.sp-module.ce-module > div:not(.sp-module-title):not(h3) {
  padding: 16px;
}

/* ── Séparateur fin vert pâle ───────────────────────────────── */
.ce-divider,
.sp-module.ce-module hr {
  border: none;
  border-top: 1px solid var(--ce-green-border);
  margin: 12px 0;
}

/* ── Pastille / badge ───────────────────────────────────────── */
.ce-badge {
  display: inline-block;
  background: var(--ce-green-light);
  color: var(--ce-green-dark);
  border: 1px solid var(--ce-green-border);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
  margin-bottom: 10px;
  line-height: 1.4;
}

/* variante ambre pour statuts incertains ("à confirmer"…) */
.ce-badge.ce-badge-amber {
  background: var(--ce-amber-light);
  color: var(--ce-amber);
  border-color: var(--ce-amber-border);
}

/* ── Lignes de données (budget, liste…) ─────────────────────── */
.ce-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: 14px;
}

.ce-row .ce-label {
  color: #555;
  font-size: 13px;
}

.ce-row .ce-amount {
  font-weight: 500;
  color: var(--ce-green-dark);
}

.ce-row .ce-amount.ce-deficit {
  color: var(--ce-red);
}

/* ── Ligne de total (budget) ────────────────────────────────── */
.ce-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--ce-green-light);
  border: 1px solid var(--ce-green-border);
  border-radius: 6px;
  padding: 8px 12px;
  margin-top: 8px;
  font-weight: 500;
  font-size: 14px;
  color: var(--ce-green-dark);
}

/* ── Grille mini-cartes (Club des Mini-Composteurs…) ────────── */
.ce-kids-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

.ce-kid-card {
  background: var(--ce-green-light);
  border: 1px solid var(--ce-green-border);
  border-radius: 8px;
  padding: 8px 10px;
}

.ce-kid-card .ce-kid-name {
  font-weight: 500;
  color: var(--ce-green-dark);
  font-size: 13px;
}

.ce-kid-card .ce-kid-info {
  color: #666;
  font-size: 11px;
  margin-top: 2px;
}

/* ── Entrées agenda / prochainement ─────────────────────────── */
.ce-soon {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
}

.ce-soon-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 8px;
  background: var(--ce-green-light);
  border: 1px solid var(--ce-green-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}

.ce-soon-title {
  font-weight: 500;
  font-size: 14px;
  color: #222;
  margin-bottom: 2px;
}

.ce-soon-desc {
  font-size: 12px;
  color: #666;
}

/* ── Responsive : une colonne sous 400 px ───────────────────── */
@media (max-width: 400px) {
  .ce-kids-grid {
    grid-template-columns: 1fr;
  }
}
/* ── Bouton lien vers le blog ─────────────────────────────── */
.ce-btn-blog {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ce-green);
  color: #EAF3DE;
  text-decoration: none;
  border-radius: 24px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 6px rgba(59, 109, 17, 0.18);
  transition: background 0.18s, box-shadow 0.18s;
}

.ce-btn-blog:hover {
  background: var(--ce-green-dark);
  box-shadow: 0 4px 12px rgba(59, 109, 17, 0.25);
  color: #EAF3DE;
  text-decoration: none;
}

/* ============================================================
   Compostons Ensemble — Modules harmonisés
   Classe Joomla à renseigner dans chaque module : ce-module
   Version 2.1 — Mai 2026
   ============================================================ */

/* ── Variables ──────────────────────────────────────────────── */
:root {
  --ce-green:        #3B6D11;
  --ce-green-dark:   #27500A;
  --ce-green-mid:    #639922;
  --ce-green-light:  #EAF3DE;
  --ce-green-border: #C0DD97;
  --ce-amber:        #BA7517;
  --ce-amber-light:  #FAEEDA;
  --ce-amber-border: #FAC775;
  --ce-red:          #A32D2D;
  --ce-radius:       10px;
  --ce-shadow:       0 2px 8px rgba(59, 109, 17, 0.12);
}

/* ── Conteneur principal (ce-module) ────────────────────────── */
.sp-module.ce-module {
  border: 1.5px solid var(--ce-green-border);
  border-radius: var(--ce-radius);
  overflow: hidden;
  background: #ffffff;
  box-shadow: var(--ce-shadow);
  margin-bottom: 1.5rem;
  padding: 0;
}

/* ── En-tête bandeau vert ───────────────────────────────────── */
.sp-module.ce-module .sp-module-title,
.sp-module.ce-module > h3 {
  background: var(--ce-green);
  color: var(--ce-green-light);
  margin: 0;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: 0;
}

.sp-module.ce-module .sp-module-title a,
.sp-module.ce-module > h3 a {
  color: var(--ce-green-light);
  text-decoration: none;
}

/* ── Corps du module ─────────────────────────────────────────── */
.sp-module.ce-module .sp-module-ct,
.sp-module.ce-module .sp-module-content {
  padding: 16px;
}

/* ── Séparateur ─────────────────────────────────────────────── */
.ce-divider,
.sp-module.ce-module hr {
  border: none;
  border-top: 1px solid var(--ce-green-border);
  margin: 12px 0;
}

/* ── Badge ──────────────────────────────────────────────────── */
.ce-badge {
  display: inline-block;
  background: var(--ce-green-light);
  color: var(--ce-green-dark);
  border: 1px solid var(--ce-green-border);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
  margin-bottom: 10px;
  line-height: 1.4;
}

.ce-badge.ce-badge-amber {
  background: var(--ce-amber-light);
  color: var(--ce-amber);
  border-color: var(--ce-amber-border);
}

/* ── Lignes de données ──────────────────────────────────────── */
.ce-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: 14px;
}

.ce-row .ce-label  { color: #555; font-size: 13px; }
.ce-row .ce-amount { font-weight: 500; color: var(--ce-green-dark); }
.ce-row .ce-amount.ce-deficit { color: var(--ce-red); }

/* ── Total ──────────────────────────────────────────────────── */
.ce-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--ce-green-light);
  border: 1px solid var(--ce-green-border);
  border-radius: 6px;
  padding: 8px 12px;
  margin-top: 8px;
  font-weight: 500;
  font-size: 14px;
  color: var(--ce-green-dark);
}

/* ── Grille mini-cartes ─────────────────────────────────────── */
.ce-kids-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

.ce-kid-card {
  background: var(--ce-green-light);
  border: 1px solid var(--ce-green-border);
  border-radius: 8px;
  padding: 8px 10px;
}

.ce-kid-card .ce-kid-name { font-weight: 500; color: var(--ce-green-dark); font-size: 13px; }
.ce-kid-card .ce-kid-info { color: #666; font-size: 11px; margin-top: 2px; }

/* ── Entrées agenda ─────────────────────────────────────────── */
.ce-soon {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
}

.ce-soon-icon {
  width: 36px; height: 36px; min-width: 36px;
  border-radius: 8px;
  background: var(--ce-green-light);
  border: 1px solid var(--ce-green-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}

.ce-soon-title { font-weight: 500; font-size: 14px; color: #222; margin-bottom: 2px; }
.ce-soon-desc  { font-size: 12px; color: #666; }

/* ── Bouton blog ────────────────────────────────────────────── */
.ce-btn-blog {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ce-green);
  color: var(--ce-green-light);
  text-decoration: none;
  border-radius: 24px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 6px rgba(59, 109, 17, 0.18);
  transition: background 0.18s, box-shadow 0.18s;
}

.ce-btn-blog:hover {
  background: var(--ce-green-dark);
  box-shadow: 0 4px 12px rgba(59, 109, 17, 0.25);
  color: var(--ce-green-light);
  text-decoration: none;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 400px) {
  .ce-kids-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   Modules bas de page — 4 cartes uniformes
   ============================================================ */

/* ── Carte de base ──────────────────────────────────────────── */
.mod-uniforme,
#sp-prochainement .sp-module,
#sp-blog .sp-module {
  background: #ffffff;
  border: 1.5px solid var(--ce-green);
  border-radius: 12px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

/* ── Titre des cartes bas de page ───────────────────────────── */
.mod-uniforme h3.module-title,
#sp-prochainement h3.sp-module-title,
#sp-blog h3.sp-module-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 14px 10px;
  margin: 0;
  border-bottom: 1px solid var(--ce-green-border);
  font-size: 14px;
  font-weight: 600;
  color: var(--ce-green);
  background: transparent;
}

/* Icônes Font Awesome avant le titre */
.mod-uniforme h3.module-title::before,
#sp-prochainement h3.sp-module-title::before,
#sp-blog h3.sp-module-title::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 14px;
  color: var(--ce-green);
}

#sp-prochainement h3.sp-module-title::before { content: "\f073"; } /* fa-calendar */
#sp-blog h3.sp-module-title::before          { content: "\f02d"; } /* fa-book-open */

/* ── Contenu générique ──────────────────────────────────────── */
.mod-uniforme .module-ct {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}

/* ── Pied de carte partagé (Budget + Mini-Composteurs) ──────── */
.mod-budget .card-footer,
.mod-minicomp .card-footer {
  background: var(--ce-green-light);
  border-top: 1px solid var(--ce-green-border);
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--ce-green-dark);
  text-align: center;
  width: 100%;
}

/* ── Description partagée (Budget + Mini-Composteurs) ───────── */
.mod-budget .card-desc,
.mod-minicomp .card-desc {
  font-size: 11px;
  color: #666;
  text-align: center;
  line-height: 1.4;
  max-width: 140px;
}

/* ── Budget ─────────────────────────────────────────────────── */
.mod-budget h3.module-title { display: none; }
.mod-budget .module-ct      { padding: 0; }

.mod-budget .budget-button {
  width: 100%; min-height: 160px; margin: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px; padding: 14px;
}

.mod-budget .btn-budget {
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  text-decoration: none;
}

.mod-budget .btn-budget img   { width: 80px; }
.mod-budget .btn-budget span  { font-size: 13px; font-weight: 600; color: var(--ce-green); }

.mod-budget .btn-budget:hover { transform: scale(1.05); }
.mod-budget .btn-budget:hover img {
  transform: rotate(10deg) scale(1.1);
  filter: drop-shadow(0 0 6px gold);
}

/* ── Mini-Composteurs ───────────────────────────────────────── */
.mod-minicomp h3.module-title { display: none; }
.mod-minicomp .module-ct      { padding: 0; }

.mod-minicomp .button-container {
  width: 100%; min-height: 160px;
  display: flex; flex-direction: column;
  align-items: stretch;
}

.mod-minicomp .compost-button {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px; text-decoration: none; padding: 14px;
}

.mod-minicomp .mascot-image { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.mod-minicomp .button-text  { font-size: 13px; font-weight: 600; color: var(--ce-green-dark); text-align: center; }

/* ── Prochainement (JEvents) ────────────────────────────────── */
#sp-prochainement .sp-module-content {
  flex: 1;
  padding: 10px 14px;
}

#sp-prochainement .mod_events_latest_table {
  width: 100%;
  border: none;
  border-collapse: separate;
  border-spacing: 0 5px;
}

#sp-prochainement td.mod_events_latest_first,
#sp-prochainement td.mod_events_latest {
  display: block;
  background: var(--ce-green-light);
  border: 1px solid var(--ce-green-border) !important;
  border-left: 3px solid var(--ce-green) !important;
  border-radius: 7px;
  padding: 7px 8px 7px 10px !important;
  font-size: 12px;
  color: #555555;
  vertical-align: top;
}

#sp-prochainement td br { display: none; }

#sp-prochainement .mod_events_latest_content {
  display: block;
  margin-top: 4px;
}

#sp-prochainement .mod_events_latest_content a {
  color: var(--ce-green);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
}

#sp-prochainement .mod_events_latest_content a:hover { text-decoration: underline; }

#sp-prochainement [class^="icon-"] {
  color: var(--ce-green);
  margin-right: 4px;
}

/* ── Blog ───────────────────────────────────────────────────── */
#sp-blog .sp-module-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}

#sp-blog .ce-btn-blog {
  background: var(--ce-green);
  color: #ffffff;
  border-radius: 20px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease;
}

#sp-blog .ce-btn-blog:hover { background: var(--ce-green-dark); }