/*
 * Design tokens extraits du site PROD https://diraj.fr
 * Sources :
 *   - Kit Elementor PROD (post 6 / .elementor-kit-6)
 *   - Header Elementor PROD (post 11)
 *   - Footer Elementor PROD (post 128)
 *   - theme_mods_oceanwp (customizer OceanWP)
 *
 * Préfixes :
 *   --diraj-*       : tokens internes au thème (à utiliser dans nos CSS)
 *   --e-global-*    : alias compat Elementor (consommés par elementor-clone.css)
 *   --wp-admin-*    : override des vars admin/login (WP 5.7+)
 */

:root,
body,
body.login {
    /* ================================================================
       COULEURS
       ================================================================ */
    /* Bleu DirAJ — couleur de marque principale */
    --diraj-color-primary:          #3C78C1;
    --diraj-color-primary-darker:   #2F68AD; /* hover boutons, dropdown header */
    --diraj-color-primary-darkest:  #225A98; /* active / pressed */
    --diraj-color-primary-soft:     rgba(60, 120, 193, .12); /* bg léger, focus ring */
    --diraj-color-primary-shadow:   rgba(60, 120, 193, .25);

    /* Orange DirAJ — accent (liens, CTA actifs) */
    --diraj-color-accent:           #EE9208;
    --diraj-color-accent-light:     #EF9E52;
    --diraj-color-accent-darker:    #C97A06;

    /* Neutres */
    --diraj-color-text:             #474747;
    --diraj-color-text-muted:       #6B6B6B;
    --diraj-color-secondary:        #474747; /* alias historique */
    --diraj-color-heading:          #474747;

    --diraj-color-white:            #FFFFFF;
    --diraj-color-border:           #E5EAF1;
    --diraj-color-border-soft:      rgba(255, 255, 255, .45);

    /* Surfaces */
    --diraj-color-surface:          #FFFFFF;
    --diraj-color-surface-alt:      #F7FAFD; /* off-white bleuté — footer PROD */
    --diraj-color-surface-muted:    #F2F4F8;

    /* États sémantiques */
    --diraj-color-success:          #2E8B57;
    --diraj-color-warning:          #D97706;
    --diraj-color-error:            #C0392B;
    --diraj-color-info:             #3C78C1;

    /* Liens OceanWP */
    --diraj-color-link:             #EE9208;
    --diraj-color-link-hover:       #3C78C1;

    /* ================================================================
       TYPOGRAPHIE
       ================================================================ */
    /* Familles (Kit Elementor PROD) */
    --diraj-font-primary:     "Roboto", "Helvetica", "Arial", sans-serif;
    --diraj-font-secondary:   "Roboto Slab", "Georgia", "Times New Roman", serif;
    --diraj-font-text:        "Roboto", "Helvetica", "Arial", sans-serif;
    --diraj-font-accent:      "Roboto", "Helvetica", "Arial", sans-serif;
    --diraj-font-heading:     "Barlow", "Helvetica", "Arial", sans-serif;
    --diraj-font-nav:         "Barlow", "Helvetica", "Arial", sans-serif;
    --diraj-font-button:      "Mada", "Helvetica", "Arial", sans-serif;

    /* Poids */
    --diraj-fw-light:     300;
    --diraj-fw-regular:   400;
    --diraj-fw-medium:    500;
    --diraj-fw-semibold:  600;
    --diraj-fw-bold:      700;

    /* Échelle (PROD) */
    --diraj-fs-h1:        40px;
    --diraj-fs-h2:        32px;
    --diraj-fs-h3:        24px;
    --diraj-fs-h4:        20px;
    --diraj-fs-h5:        18px;
    --diraj-fs-h6:        16px;
    --diraj-fs-body:      16px;
    --diraj-fs-small:     14px;
    --diraj-fs-xs:        13px;
    --diraj-fs-button:    15px;
    --diraj-fs-nav:       16px;

    --diraj-lh-tight:     1.2;
    --diraj-lh-normal:    1.5;
    --diraj-lh-loose:     1.7;

    /* ================================================================
       LAYOUT
       ================================================================ */
    --diraj-container-max:        1140px;  /* Kit Elementor par défaut */
    --diraj-container-wide:       1600px;  /* Break-out header/hero PROD */
    --diraj-content-padding:      24px;

    --diraj-header-height:        104px;
    --diraj-header-height-mobile: 70px;
    --diraj-footer-padding-y:     32px;

    /* Espacements (échelle 4) */
    --diraj-space-1:   4px;
    --diraj-space-2:   8px;
    --diraj-space-3:   12px;
    --diraj-space-4:   16px;
    --diraj-space-5:   20px;  /* widgets-spacing Elementor */
    --diraj-space-6:   24px;
    --diraj-space-8:   32px;
    --diraj-space-10:  40px;
    --diraj-space-12:  48px;
    --diraj-space-16:  64px;

    /* Rayons */
    --diraj-radius-sm:    4px;
    --diraj-radius-md:    5px;  /* boutons PROD */
    --diraj-radius-lg:    8px;
    --diraj-radius-xl:    16px;
    --diraj-radius-pill:  999px;

    /* Ombres */
    --diraj-shadow-sm: 0 1px 2px rgba(20, 30, 60, .06);
    --diraj-shadow-md: 0 4px 12px rgba(20, 30, 60, .08);
    --diraj-shadow-lg: 0 8px 24px rgba(20, 30, 60, .12);
    --diraj-shadow-cta: 0 6px 16px rgba(60, 120, 193, .25);

    /* Transitions */
    --diraj-ease:        cubic-bezier(.4, 0, .2, 1);
    --diraj-transition:  .15s var(--diraj-ease);

    /* ================================================================
       BREAKPOINTS (référence — utilisés en @media uniquement)
       ================================================================ */
    --diraj-bp-sm:         480px;
    --diraj-bp-md:         767px;
    --diraj-bp-lg:         1024px;
    --diraj-bp-laptop:     1370px;
    --diraj-bp-widescreen: 2500px;

    /* ================================================================
       ALIASES ELEMENTOR (pour réutiliser des CSS extraits sans changer les noms)
       ================================================================ */
    --e-global-color-primary:                       var(--diraj-color-primary);
    --e-global-color-secondary:                     var(--diraj-color-secondary);
    --e-global-color-text:                          var(--diraj-color-text);
    --e-global-color-accent:                        var(--diraj-color-primary);
    --e-global-typography-primary-font-family:      "Roboto";
    --e-global-typography-primary-font-weight:      600;
    --e-global-typography-secondary-font-family:    "Roboto Slab";
    --e-global-typography-secondary-font-weight:    400;
    --e-global-typography-text-font-family:         "Roboto";
    --e-global-typography-text-font-weight:         400;
    --e-global-typography-accent-font-family:       "Roboto";
    --e-global-typography-accent-font-weight:       500;

    /* ================================================================
       ALIASES WP ADMIN / LOGIN (WP 5.7+)
       Override les couleurs de thème admin utilisées par .button-primary
       ================================================================ */
    --wp-admin-theme-color:              var(--diraj-color-primary);
    --wp-admin-theme-color-darker-10:    var(--diraj-color-primary-darker);
    --wp-admin-theme-color-darker-20:    var(--diraj-color-primary-darkest);
    --wp-admin-border-color-focus:       rgba(60, 120, 193, .8);
}

/* ====================================================================
   APPLICATION AUX ÉLÉMENTS GLOBAUX
   ==================================================================== */

body {
    font-family: var(--diraj-font-text);
    font-weight: var(--diraj-fw-regular);
    font-size: var(--diraj-fs-body);
    line-height: var(--diraj-lh-normal);
    color: var(--diraj-color-text);
}

h1, .entry-title, h1.entry-title {
    font-family: var(--diraj-font-heading);
    font-weight: var(--diraj-fw-medium);
    font-size: var(--diraj-fs-h1);
    line-height: var(--diraj-lh-tight);
    color: var(--diraj-color-heading);
}

h2 { font-size: var(--diraj-fs-h2); }
h3 { font-size: var(--diraj-fs-h3); }
h4 { font-size: var(--diraj-fs-h4); }
h5 { font-size: var(--diraj-fs-h5); }
h6 { font-size: var(--diraj-fs-h6); }

h2, h3, h4, h5, h6 {
    font-family: var(--diraj-font-primary);
    font-weight: var(--diraj-fw-semibold);
    line-height: var(--diraj-lh-tight);
    color: var(--diraj-color-heading);
}

/* Liens : orange par défaut (OceanWP), bleu au hover */
a {
    color: var(--diraj-color-link);
    transition: color var(--diraj-transition);
}
a:hover,
a:focus,
a:active {
    color: var(--diraj-color-link-hover);
}

/* Boutons / champs : bleu primaire PROD */
input[type=submit],
button.submit,
.gform_button,
.gform_next_button {
    background-color: var(--diraj-color-primary);
    color: var(--diraj-color-white);
    border: none;
    font-family: var(--diraj-font-primary);
    font-weight: var(--diraj-fw-semibold);
    border-radius: var(--diraj-radius-md);
    transition: background-color var(--diraj-transition);
}
input[type=submit]:hover,
button.submit:hover,
.gform_button:hover,
.gform_next_button:hover {
    background-color: var(--diraj-color-primary-darker);
}

/* Override des zones brandées historiques de govpress (anciennement #579CD1) */
#site-navigation,
#hero-widgets,
#secondary .widget-title,
#home-page-featured .widget-title,
.site-footer {
    background: var(--diraj-color-primary);
}

.diraj.panel-widget-style h3 {
    background-color: var(--diraj-color-primary);
}

/* État menu actif */
@media screen and (min-width: 1100px) {
    .main-navigation .current-menu-item > a {
        color: var(--diraj-color-primary);
    }
}

.entry-title {
    color: var(--diraj-color-primary);
}

/* Encadrés éditoriaux — historique */
.edito.panel-widget-style {
    border: 3px solid var(--diraj-color-link) !important;
}
.panel-row-style-faq.faq {
    border: 3px solid var(--diraj-color-primary);
}

.faq #cattitle1,
.faq-title,
.faq div#ttext1,
.faq-title:before,
.faq div#ttext1:before {
    color: var(--diraj-color-primary) !important;
}