/*
Theme Name:        IEPB Child — WPLMS
Theme URI:         https://www.iepb.fr/
Description:       Thème enfant du thème WPLMS 4.973 (VibeThemes) pour la plateforme IEPB. Applique la charte graphique IEPB édition 2025 (Russian Violet / Cerise / Hunyadi / Sky Blue / Mint / Eerie Black) avec les typographies Domine et Poppins, par-dessus l'architecture WPLMS + BuddyPress + VibeBP. Préserve toutes les fonctionnalités natives LMS (cours, quiz, profils, dashboards, attestations).
Author:            IEPB - Jérôme Cusanno
Author URI:        https://www.iepb.fr/
Template:          wplms
Version:           2.0.0
Requires at least: 6.0
Tested up to:      6.7
Requires PHP:      7.4
License:           GNU General Public License v2 or later
License URI:       http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       iepb-child
Tags:              education, e-learning, lms, wplms, vibebp, elementor
*/

/* =========================================================
   IEPB CHILD THEME pour WPLMS 4.973
   ---------------------------------------------------------
   Stratégie : on N'ÉCRASE PAS les templates PHP du parent
   (single-course.php, etc.) pour préserver la compatibilité
   avec les mises à jour de VibeThemes. On applique uniquement
   la charte IEPB par-dessus, via CSS et hooks.
   ========================================================= */

/* --- Variables CSS de la charte IEPB --- */
:root {
    --iepb-navy:        #1A3560;
    --iepb-navy-deep:   #0F2347;
    --iepb-violet:      #4A154B;
    --iepb-cerise:      #CE375C;
    --iepb-black:       #212529;
    --iepb-sky:         #64C3EB;
    --iepb-mint:        #5BB381;
    --iepb-yellow:      #F0A733;
    --iepb-yellow-deep: #C58A2E;
    --iepb-cream:       #FFF4DA;
    --iepb-white:       #FFFFFF;

    /* Aliases pour surcharger les variables natives WPLMS si elles existent */
    --wplms-primary-color:   #1A3560;
    --wplms-secondary-color: #F0A733;
    --wplms-tertiary-color:  #4A154B;
    --wplms-link-color:      #CE375C;
}

/* =========================================================
   1. TYPOGRAPHIE GLOBALE
   ========================================================= */

body,
body.wplms,
.bp-wrap,
.widget,
.elementor-widget-text-editor {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-weight: 300;
    color: var(--iepb-black);
    line-height: 1.7;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.widget-title,
.elementor-heading-title,
.bp-profile-name {
    font-family: 'Domine', Georgia, serif !important;
    font-weight: 700;
    color: var(--iepb-violet);
    line-height: 1.25;
}

h1, .entry-title.h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

/* Liens */
a {
    color: var(--iepb-cerise);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover,
a:focus {
    color: var(--iepb-violet);
    text-decoration: underline;
}

/* =========================================================
   2. HEADER & NAVIGATION (top bar IEPB navy)
   ========================================================= */

.site-header,
.header-wrap,
.main-header,
header#masthead,
.header.fixed {
    background-color: var(--iepb-navy) !important;
    color: var(--iepb-white);
    border-bottom: none;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}

.site-header a,
.header-wrap a,
.main-header a {
    color: var(--iepb-white);
}

/* Logo : laissons WPLMS gérer la taille via Customizer */
.site-branding img,
.site-logo img,
.custom-logo {
    max-height: 64px;
    width: auto;
}

/* Menu principal */
.main-navigation,
nav#site-navigation,
.menu-primary,
.primary-menu {
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.875rem;
}

.main-navigation a,
nav#site-navigation a,
.primary-menu a {
    color: var(--iepb-white) !important;
    padding: 1rem 1.25rem;
    transition: color 0.2s ease;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a,
.main-navigation li.active > a,
.primary-menu .current-menu-item > a {
    color: var(--iepb-yellow) !important;
}

/* Sous-menus déroulants : fond navy profond */
.main-navigation ul ul,
.primary-menu ul ul,
.sub-menu {
    background-color: var(--iepb-navy-deep) !important;
    border: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    min-width: 240px;
    padding: 0.5rem 0;
}

.main-navigation ul ul a,
.sub-menu a {
    text-transform: none;
    letter-spacing: 0.02em;
    font-weight: 500;
    padding: 0.75rem 1.5rem !important;
}

.main-navigation ul ul a:hover,
.sub-menu a:hover {
    background-color: var(--iepb-navy);
    color: var(--iepb-yellow) !important;
}

/* Icônes panier / connexion */
.cart-icon,
.user-profile-link,
.login-link {
    color: var(--iepb-white) !important;
}

.cart-count-bubble,
.cart-icon .count {
    background-color: var(--iepb-yellow);
    color: var(--iepb-violet);
}

/* =========================================================
   3. BOUTONS (style IEPB : pill jaune dégradé)
   ========================================================= */

.button,
button:not(.menu-toggle),
input[type="submit"],
.wp-block-button__link,
a.btn,
a.button,
.bp-button,
.btn-primary,
.wplms-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    background: linear-gradient(180deg, var(--iepb-yellow) 0%, var(--iepb-yellow-deep) 100%) !important;
    color: var(--iepb-violet) !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.875rem 2rem !important;
    border-radius: 999px !important;
    border: none !important;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.button:hover,
button:not(.menu-toggle):hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
a.btn:hover,
.elementor-button:hover,
.btn-primary:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
    background: linear-gradient(180deg, var(--iepb-yellow-deep) 0%, var(--iepb-yellow) 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(240, 167, 51, 0.4);
    color: var(--iepb-violet) !important;
}

/* Bouton secondaire (navy) — classe à appliquer manuellement */
.btn-navy,
.button.btn-navy,
.elementor-button.btn-navy {
    background: var(--iepb-navy) !important;
    color: var(--iepb-white) !important;
}

a.elementor-button:hover,
.elementor-widget-button a:hover {
    background: #4A154B !important;
}

.btn-navy:hover {
    background: var(--iepb-violet) !important;
    color: var(--iepb-white) !important;
}

/* =========================================================
   4. WPLMS - PAGES DE COURS
   ========================================================= */

/* Sidebar de cours (jaune avec progress, comme votre capture) */
.course-sidebar,
.wplms-course-sidebar,
.lp-course-sidebar,
.single-course .course-meta-wrap,
.course-curriculum-sidebar {
    background-color: var(--iepb-yellow) !important;
    color: var(--iepb-navy-deep);
}

.course-sidebar h2,
.course-sidebar h3,
.wplms-course-sidebar .course-title,
.course-curriculum-sidebar .course-title {
    color: var(--iepb-violet) !important;
    font-family: 'Domine', serif !important;
}

/* Barre de progression du cours */
.course-progress,
.progress-bar,
.wplms-progress {
    background-color: rgba(74, 21, 75, 0.2);
}

.course-progress .progress,
.progress-bar .progress-inner,
.wplms-progress .progress-fill {
    background-color: var(--iepb-violet) !important;
}

/* Curriculum / sections du cours */
.course-curriculum .section-header,
.curriculum-sections .section-title,
.course-content-list .section {
    background-color: var(--iepb-navy) !important;
    color: var(--iepb-white) !important;
    border-radius: 6px;
}

/* Boutons d'action de cours : "Marquer comme terminé", "Suivant", "Précédent" */
.course-action-buttons .button,
.unit-actions .button,
.course-button-primary,
button.mark-complete,
.next-unit,
.prev-unit {
    background: var(--iepb-navy) !important;
    color: var(--iepb-white) !important;
    border-radius: 999px !important;
}

.course-action-buttons .button:hover,
.unit-actions .button:hover,
.mark-complete:hover {
    background: var(--iepb-violet) !important;
}

/* Item de leçon / unit dans le curriculum */
.curriculum-item,
.course-unit-item,
.curriculum-list li {
    border-color: rgba(26, 53, 96, 0.1);
    transition: background-color 0.2s ease;
}

.curriculum-item.completed,
.course-unit-item.completed {
    background-color: rgba(91, 179, 129, 0.1); /* Mint clair */
}

.curriculum-item.completed::after,
.course-unit-item.completed::after {
    content: "✓";
    color: var(--iepb-mint);
    font-weight: bold;
}

/* =========================================================
   5. BUDDYPRESS / VIBEBP (profils, membres)
   ========================================================= */

.bp-profile-header,
.profile-header,
#item-header {
    background-color: var(--iepb-navy);
    color: var(--iepb-white);
    border-radius: 8px;
    padding: 2rem;
}

.bp-profile-header h2,
.bp-profile-header .profile-name,
#item-header h2 {
    color: var(--iepb-white) !important;
}

.bp-tab,
.bp-nav-link,
#item-nav a,
.bp-navs a {
    color: var(--iepb-navy);
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.875rem;
}

.bp-tab.active,
.bp-nav-link.current,
#item-nav .current a,
.bp-navs li.current a {
    color: var(--iepb-yellow-deep) !important;
    border-bottom: 3px solid var(--iepb-yellow);
}

/* Avatars membres */
.bp-avatar img,
.avatar.full,
img.avatar {
    border-radius: 50%;
    border: 3px solid var(--iepb-yellow);
}

/* =========================================================
   6. WOOCOMMERCE (boutique des formations)
   ========================================================= */

/* Card produit dans le catalogue */
.woocommerce ul.products li.product {
    background-color: var(--iepb-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: 'Domine', serif !important;
    color: var(--iepb-violet) !important;
    font-weight: 700;
    padding: 0 1rem;
}

.woocommerce ul.products li.product .price {
    color: var(--iepb-yellow-deep) !important;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    padding: 0 1rem;
}

/* Page produit individuelle */
.woocommerce div.product .product_title {
    color: var(--iepb-violet);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--iepb-yellow-deep);
    font-weight: 700;
}

/* Catégories de produits (sidebar) */
.product_meta .posted_in a,
.woocommerce-product-details__short-description {
    color: var(--iepb-navy);
}

/* =========================================================
   7. COMPOSANTS UTILITAIRES IEPB
   (classes à appliquer manuellement dans Elementor)
   ========================================================= */

.iepb-hero-banner {
    background: linear-gradient(135deg, var(--iepb-sky) 0%, var(--iepb-navy) 100%);
    color: var(--iepb-white);
    padding: 4rem 3rem;
    border-radius: 12px;
    text-align: center;
}

.iepb-hero-banner h1,
.iepb-hero-banner h2,
.iepb-hero-banner h3 {
    color: var(--iepb-white) !important;
}

.iepb-section-navy {
    background-color: var(--iepb-navy);
    color: var(--iepb-white);
    padding: 4rem 2rem;
}

.iepb-section-navy h2,
.iepb-section-navy h3 {
    color: var(--iepb-white) !important;
}

.iepb-section-yellow {
    background-color: var(--iepb-yellow);
    color: var(--iepb-violet);
    padding: 4rem 2rem;
}

.iepb-section-yellow h2 {
    color: var(--iepb-violet) !important;
}

/* Bandeau d'alerte crème (le "Prêt à faire la différence ?" de votre accueil) */
.iepb-alert {
    background-color: var(--iepb-cream);
    border-left: 4px solid var(--iepb-yellow);
    padding: 1rem 1.5rem;
    border-radius: 6px;
    color: var(--iepb-black);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0;
}

.iepb-alert::before {
    content: "⚠️";
    font-size: 1.25rem;
    flex-shrink: 0;
}

.iepb-alert a {
    color: var(--iepb-yellow-deep);
    font-weight: 600;
}

/* Cards blanches arrondies (POUR QUI / POURQUOI) */
.iepb-card {
    background-color: var(--iepb-white);
    border-radius: 32px;
    padding: 2.5rem 3rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.iepb-card h3 {
    color: var(--iepb-yellow) !important;
}

/* Feature card (Crédit / Assurance / Immobilier / CIF) */
.iepb-feature-card {
    background-color: var(--iepb-white);
    border-radius: 16px;
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.iepb-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.iepb-feature-card .iepb-icon {
    color: var(--iepb-violet);
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.iepb-feature-card h3 {
    color: var(--iepb-violet) !important;
}

/* =========================================================
   8. FOOTER (fond navy avec actualités)
   ========================================================= */

.site-footer,
footer#colophon,
.footer-wrap {
    background-color: var(--iepb-navy) !important;
    color: var(--iepb-white);
    padding: 3rem 2rem 1rem;
}

.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer .widget-title,
.footer-wrap h2,
.footer-wrap h3,
.footer-wrap .widget-title {
    color: var(--iepb-yellow) !important;
    font-family: 'Domine', serif !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 1rem;
    margin-bottom: 1rem;
}

.site-footer a,
.footer-wrap a {
    color: var(--iepb-white);
}

.site-footer a:hover,
.footer-wrap a:hover {
    color: var(--iepb-yellow);
}

.site-footer .widget,
.footer-wrap .widget {
    background: transparent;
}

/* =========================================================
   9. ELEMENTOR (pages buildées avec Elementor)
   ========================================================= */

.elementor-heading-title {
    font-family: 'Domine', serif !important;
}

.elementor-widget-text-editor,
.elementor-widget-text-editor p {
    font-family: 'Poppins', sans-serif !important;
    line-height: 1.7;
}

/* Sélecteur de couleurs Elementor : on expose les couleurs IEPB */
/* (à configurer aussi dans Elementor > Site Settings > Global Colors) */

/* =========================================================
   10. RESPONSIVE
   ========================================================= */

@media (max-width: 992px) {
    .main-navigation,
    .primary-menu {
        font-size: 0.8125rem;
    }
}

@media (max-width: 768px) {
    .iepb-hero-banner {
        padding: 2.5rem 1.5rem;
    }
    .iepb-card {
        padding: 1.5rem;
        border-radius: 24px;
    }
    .button,
    .wp-block-button__link,
    .elementor-button,
    .woocommerce a.button {
        padding: 0.75rem 1.5rem !important;
        font-size: 0.875rem !important;
    }
}

/* =========================================================
   11. NETTOYAGE / OVERRIDES SPÉCIFIQUES
   ========================================================= */

/* Notice WPLMS "WPLMS not active" : on la masque si pas d'utilité */
/* .notice-wplms-inactive { display: none !important; } */

/* WhatsApp floating button : harmoniser couleur */
.wa-floating-button,
.whatsapp-float {
    background-color: var(--iepb-mint) !important;
}

/* Scroll-to-top button */
.scroll-to-top,
.back-to-top {
    background-color: var(--iepb-yellow) !important;
    color: var(--iepb-violet) !important;
    border-radius: 50% !important;
}