/* ==========================================================================
   CHAPELLE-VAUDANNE — PALETTE COULEUR GLOBALE
   Bootstrap 5 + Drupal
   ========================================================================== */

:root {
    /* ----------------------------------------------------------------------
       Palette officielle
       ---------------------------------------------------------------------- */

    --cv-light: #F2F7FF;
    --cv-blue: #0B409C;
    --cv-yellow: #FFE867;
    --cv-blue-dark: #10376B;


    /* ----------------------------------------------------------------------
       Bootstrap — couleurs principales
       ---------------------------------------------------------------------- */

    --bs-primary: var(--cv-blue);
    --bs-primary-rgb: 11, 64, 156;

    --bs-warning: var(--cv-yellow);
    --bs-warning-rgb: 255, 232, 103;

    --bs-dark: var(--cv-blue-dark);
    --bs-dark-rgb: 16, 55, 107;

    --bs-light: var(--cv-light);
    --bs-light-rgb: 242, 247, 255;


    /* ----------------------------------------------------------------------
       Bootstrap — Body
       ---------------------------------------------------------------------- */

    --bs-body-color: var(--cv-blue-dark);
    --bs-body-color-rgb: 16, 55, 107;

    --bs-body-bg: var(--cv-light);
    --bs-body-bg-rgb: 242, 247, 255;


    /* ----------------------------------------------------------------------
       Bootstrap — Links
       ---------------------------------------------------------------------- */

    --bs-link-color: var(--cv-blue);
    --bs-link-color-rgb: 11, 64, 156;

    --bs-link-hover-color: var(--cv-blue-dark);
    --bs-link-hover-color-rgb: 16, 55, 107;


    /* ----------------------------------------------------------------------
       Bootstrap — Borders
       ---------------------------------------------------------------------- */

    --bs-border-color: var(--cv-blue);
    --bs-border-color-translucent: rgba(11, 64, 156, 0.20);


    /* ----------------------------------------------------------------------
       Typographie
       ---------------------------------------------------------------------- */

    --bs-font-sans-serif: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
}


/* ==========================================================================
   GLOBAL
   ========================================================================== */

html,
body {
    background-color: var(--cv-light);
    color: var(--cv-blue-dark);
}

body,
#page,
#main-wrapper {
    background-color: var(--cv-light);
    color: var(--cv-blue-dark);
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--cv-blue);
}

/* ==========================================================================
   LIENS
   ========================================================================== */

a,
.link {
    color: var(--cv-blue);
}

a:hover,
a:focus,
.link:hover,
.link:focus,
a:active,
.link:active {
    color: var(--cv-blue-dark);
}


/* ==========================================================================
   UTILITAIRES BOOTSTRAP — TEXTE
   ========================================================================== */

.text-primary {
    color: var(--cv-blue) !important;
}

.text-dark {
    color: var(--cv-blue-dark) !important;
}

.text-light {
    color: var(--cv-light) !important;
}

.text-warning {
    color: var(--cv-yellow) !important;
}


/* ==========================================================================
   UTILITAIRES BOOTSTRAP — FONDS
   ========================================================================== */

.bg-primary {
    background-color: var(--cv-blue) !important;
}

.bg-dark {
    background-color: var(--cv-blue-dark) !important;
}

.bg-light {
    background-color: var(--cv-light) !important;
}

.bg-warning {
    background-color: var(--cv-yellow) !important;
}


/* ==========================================================================
   NAVIGATION
   ========================================================================== */

#navbar-top {
    background-color: var(--cv-blue-dark);
}

#navbar-main {
    background-color: var(--cv-blue);
}

.nav-link {
    color: var(--cv-light);
}

.nav-link:hover,
.nav-link:focus,
.nav-link.active,
.nav-link.show {
    color: var(--cv-yellow);
}

.nav-item .dropdown-item a.active {
    color: var(--cv-blue-dark);
}


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

.region-header,
.region-header a,
.region-header li a.is-active,
.region-header .site-branding__text,
.region-header .site-branding,
.region-header .site-branding__text a,
.region-header .site-branding a,
.region-secondary-menu .menu-item a,
.region-secondary-menu .menu-item a.is-active {
    color: var(--cv-light);
}


/* ==========================================================================
   PRIMARY MENU
   ========================================================================== */

.region-primary-menu .menu-item a.is-active,
.region-primary-menu .menu-item--active-trail a {
    color: var(--cv-blue-dark);
    background-color: var(--cv-light);
}


/* ==========================================================================
   TABS
   ========================================================================== */

.tabs ul.primary li a.is-active,
.tabs ul.primary li.is-active a {
    color: var(--cv-blue-dark);
    background-color: var(--cv-yellow);
}

.tabs ul.primary li.is-active a {
    border-bottom-color: var(--cv-yellow);
}


/* ==========================================================================
   BUTTONS — PRIMARY
   ========================================================================== */

.btn-primary {
    --bs-btn-color: var(--cv-light);
    --bs-btn-bg: var(--cv-blue);
    --bs-btn-border-color: var(--cv-blue);

    --bs-btn-hover-color: var(--cv-blue-dark);
    --bs-btn-hover-bg: var(--cv-yellow);
    --bs-btn-hover-border-color: var(--cv-yellow);

    --bs-btn-focus-shadow-rgb: 11, 64, 156;

    --bs-btn-active-color: var(--cv-blue-dark);
    --bs-btn-active-bg: var(--cv-yellow);
    --bs-btn-active-border-color: var(--cv-yellow);

    --bs-btn-disabled-color: var(--cv-light);
    --bs-btn-disabled-bg: var(--cv-blue);
    --bs-btn-disabled-border-color: var(--cv-blue);

    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}

.btn-primary:focus,
.btn-primary:active:focus,
.btn-primary.active:focus {
    box-shadow: 0 0 0 0.25rem rgba(11, 64, 156, 0.25);
}


/* ==========================================================================
   BUTTONS — OUTLINE PRIMARY
   ========================================================================== */

.btn-outline-primary {
    --bs-btn-color: var(--cv-blue);
    --bs-btn-border-color: var(--cv-blue);

    --bs-btn-hover-color: var(--cv-light);
    --bs-btn-hover-bg: var(--cv-blue);
    --bs-btn-hover-border-color: var(--cv-blue);

    --bs-btn-focus-shadow-rgb: 11, 64, 156;

    --bs-btn-active-color: var(--cv-light);
    --bs-btn-active-bg: var(--cv-blue);
    --bs-btn-active-border-color: var(--cv-blue);

    color: var(--bs-btn-color);
    border-color: var(--bs-btn-border-color);
    background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}


/* ==========================================================================
   PAGINATION
   ========================================================================== */

.pagination {
    --bs-pagination-color: var(--cv-blue);
    --bs-pagination-bg: var(--cv-light);
    --bs-pagination-border-color: var(--cv-blue);

    --bs-pagination-hover-color: var(--cv-light);
    --bs-pagination-hover-bg: var(--cv-blue);
    --bs-pagination-hover-border-color: var(--cv-blue);

    --bs-pagination-focus-color: var(--cv-light);
    --bs-pagination-focus-bg: var(--cv-blue);

    --bs-pagination-active-color: var(--cv-blue-dark);
    --bs-pagination-active-bg: var(--cv-yellow);
    --bs-pagination-active-border-color: var(--cv-yellow);

    --bs-pagination-disabled-color: var(--cv-blue-dark);
    --bs-pagination-disabled-bg: var(--cv-light);
    --bs-pagination-disabled-border-color: var(--cv-blue);
}

.page-link {
    color: var(--cv-blue);
    background-color: var(--cv-light);
    border-color: var(--cv-blue);
}

.page-link:hover,
.page-link:focus {
    color: var(--cv-light);
    background-color: var(--cv-blue);
    border-color: var(--cv-blue);
}

.page-item.active .page-link {
    color: var(--cv-blue-dark);
    background-color: var(--cv-yellow);
    border-color: var(--cv-yellow);
}

.page-item.disabled .page-link {
    color: var(--cv-blue-dark);
    background-color: var(--cv-light);
    opacity: 0.45;
}


/* ==========================================================================
   SIDEBAR
   ========================================================================== */

.sidebar .block {
    color: var(--cv-blue-dark);
    background-color: var(--cv-light);
    border-color: var(--cv-blue);
}


/* ==========================================================================
   CARDS
   ========================================================================== */

.card {
    --bs-card-color: var(--cv-blue-dark);
    --bs-card-bg: var(--cv-light);
    --bs-card-border-color: var(--cv-blue);

    color: var(--cv-blue-dark);
    background-color: var(--cv-light);
    border-color: var(--cv-blue);
}

.card-header,
.card-footer {
    background-color: var(--cv-light);
    border-color: var(--cv-blue);
}


/* ==========================================================================
   BADGES
   ========================================================================== */

.badge.bg-primary {
    color: var(--cv-light);
    background-color: var(--cv-blue) !important;
}

.badge.bg-warning {
    color: var(--cv-blue-dark);
    background-color: var(--cv-yellow) !important;
}

.badge.bg-dark {
    color: var(--cv-light);
    background-color: var(--cv-blue-dark) !important;
}

.badge.bg-light {
    color: var(--cv-blue-dark);
    background-color: var(--cv-light) !important;
}


/* ==========================================================================
   FORMS
   ========================================================================== */

.form-control,
.form-select {
    color: var(--cv-blue-dark);
    background-color: var(--cv-light);
    border-color: var(--cv-blue);
}

.form-control:focus,
.form-select:focus {
    color: var(--cv-blue-dark);
    background-color: var(--cv-light);
    border-color: var(--cv-blue);
    box-shadow: 0 0 0 0.25rem rgba(11, 64, 156, 0.20);
}

.form-check-input {
    border-color: var(--cv-blue);
}

.form-check-input:checked {
    background-color: var(--cv-blue);
    border-color: var(--cv-blue);
}

.form-check-input:focus {
    border-color: var(--cv-blue);
    box-shadow: 0 0 0 0.25rem rgba(11, 64, 156, 0.20);
}


/* ==========================================================================
   DROPDOWNS
   ========================================================================== */

.dropdown-menu {
    --bs-dropdown-color: var(--cv-blue-dark);
    --bs-dropdown-bg: var(--cv-light);
    --bs-dropdown-border-color: var(--cv-blue);

    --bs-dropdown-link-color: var(--cv-blue-dark);
    --bs-dropdown-link-hover-color: var(--cv-blue-dark);
    --bs-dropdown-link-hover-bg: var(--cv-yellow);

    --bs-dropdown-link-active-color: var(--cv-light);
    --bs-dropdown-link-active-bg: var(--cv-blue);

    color: var(--cv-blue-dark);
    background-color: var(--cv-light);
    border-color: var(--cv-blue);
}

.dropdown-item {
    color: var(--cv-blue-dark);
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--cv-blue-dark);
    background-color: var(--cv-yellow);
}

.dropdown-item.active,
.dropdown-item:active {
    color: var(--cv-light);
    background-color: var(--cv-blue);
}


/* ==========================================================================
   ACCORDION
   ========================================================================== */

.accordion {
    --bs-accordion-color: var(--cv-blue-dark);
    --bs-accordion-bg: var(--cv-light);
    --bs-accordion-border-color: var(--cv-blue);

    --bs-accordion-btn-color: var(--cv-blue-dark);
    --bs-accordion-btn-bg: var(--cv-light);

    --bs-accordion-active-color: var(--cv-light);
    --bs-accordion-active-bg: var(--cv-blue);

    --bs-accordion-btn-focus-border-color: var(--cv-blue);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(11, 64, 156, 0.20);
}

.accordion-item {
    color: var(--cv-blue-dark);
    background-color: var(--cv-light);
    border-color: var(--cv-blue);
}

.accordion-button {
    color: var(--cv-blue-dark);
    background-color: var(--cv-light);
}

.accordion-button:not(.collapsed) {
    color: var(--cv-light);
    background-color: var(--cv-blue);
}


/* ==========================================================================
   ALERTS
   ========================================================================== */

.alert-primary {
    color: var(--cv-blue-dark);
    background-color: var(--cv-light);
    border-color: var(--cv-blue);
}

.alert-warning {
    color: var(--cv-blue-dark);
    background-color: var(--cv-yellow);
    border-color: var(--cv-yellow);
}


/* ==========================================================================
   TABLES
   ========================================================================== */

.table {
    --bs-table-color: var(--cv-blue-dark);
    --bs-table-bg: var(--cv-light);
    --bs-table-border-color: var(--cv-blue);

    color: var(--cv-blue-dark);
    border-color: var(--cv-blue);
}

.table > :not(caption) > * > * {
    background-color: var(--cv-light);
    color: var(--cv-blue-dark);
    border-bottom-color: var(--cv-blue);
}

.table-primary > * {
    color: var(--cv-light);
    background-color: var(--cv-blue);
}

.table-warning > * {
    color: var(--cv-blue-dark);
    background-color: var(--cv-yellow);
}


/* ==========================================================================
   BORDERS
   ========================================================================== */

.border-primary {
    border-color: var(--cv-blue) !important;
}

.border-dark {
    border-color: var(--cv-blue-dark) !important;
}

.border-light {
    border-color: var(--cv-light) !important;
}

.border-warning {
    border-color: var(--cv-yellow) !important;
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
    color: var(--cv-light);
    background-color: var(--cv-blue-dark);
}

.site-footer a {
    color: var(--cv-light);
}

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


/* ==========================================================================
   COLOR FORM — RTL
   ========================================================================== */

[dir="rtl"] .color-form .color-palette {
    margin-left: 0;
    margin-right: 20px;
}

[dir="rtl"] .color-form .form-item label {
    float: right;
}

[dir="rtl"] .color-form .color-palette .lock {
    right: -20px;
    left: 0;
}