@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');
.metismenu-item {
    color: #000000 !important;
}
/* Changement de la couleur de fond et du texte du bouton de changement de langue */
.btn-secondary.dropdown-toggle {
    background-color: #00346F !important; /* Définissez votre couleur de fond préférée ici */
    color: #FFFFFF; /* Définissez votre couleur de texte ici */
    border: 1px solid #FFFFFF; /* Optionnel: ajouter une bordure */
}
/* Changement de la couleur de fond au survol */
.btn-secondary.dropdown-toggle:hover {
    background-color: #FFFFFF !important; /* Couleur plus foncée au survol */
    color: #00346F; /* Garder la couleur du texte inchangée */
    border: 1px solid #00346F; /* Optionnel: ajouter une bordure */
}
:root {
    --dark-color: #00346F; /* Turquoise foncé */
    --light-color: #61ABFF; /* Turquoise clair */
    --main-background: #D0E6FF ; /* E5F1FF * Fond principal, turquoise très clair */
    --primary-background: #87AFDC; /* Fond primaire, turquoise moyen */
    --primary-textColor: #FFFFFF; /* Texte primaire, blanc */
    --secondary-background: #D8EAFF; /* Fond du bouton FR/EN et des sous-menus, turquoise plus soutenu */
    --secondary-textColor: #FFFFFF; /* Texte secondaire, blanc pour contraste */
    --accent-background: #FFFFFF; /* Ligne sous la bannière et lignes importantes, crème léger */
    --accent-textColor: #61ABFF; /* Texte d'accent, turquoise foncé */
    --primary-gradient: linear-gradient(180deg, #00346F, #87AFDC); /* Dégradé primaire de turquoise foncé à turquoise clair */
    --secondary-gradient: linear-gradient(180deg, #00346F, #87AFDC); /* Dégradé secondaire de turquoise moyen à turquoise très clair */
}
body {
  color: #000000 !important; /* Couleur du texte par défaut */
}

h1, h2, h3, h4, h5, h6 {
  color: #000000 !important; /* Couleur des titres */
}

p {
  color: #000000 !important; /* Couleur du texte des paragraphes */
}
body {
    background: var(--main-background);
    color: var(--light-color);
}

.container-header {
    background-color: var(--primary-background);
    background-image: var(--primary-gradient);
}

.page-header {
    display: none;
}

.mod-articlesnews-horizontal li, .no-card .newsflash-horiz li {
    background-color: var(--primary-background);
    color: var(--primary-text-color);
    border: 1px solid var(--primary-background);
}

.btn.btn-primary {
    background-color: var(--primary-background);
    border-color: var(--primary-background);
    color: var(--primary-text-color);
}

.mod-articlesnews-horizontal li .btn.btn-secondary, .no-card .newsflash-horiz li .btn.btn-secondary {
    background-color: var(--accent-background);
    border-color: var(--accent-background);
    color: var(--dark-color);
}

.btn.btn-secondary {
    background-color: var(--secondary-background);
    border-color: var(--secondary-background);
    color: var(--secondary-text-color);
}

.bg-info {
    color: var(--accent-text-color);
    background-color: var(--accent-background) !important;
}

.card {
    border: 1px solid var(--primary-background);
    border-radius: 0;
    background-color: var(--primary-background);
}

.card-header {
    background-color: var(--primary-background);
    border-bottom: 1px solid var(--primary-background);
    color: var(--primary-text-color);
}

.card-body {
    background-color: var(--primary-background);
    border-bottom: 3px solid var(--accent-background);
    color: var(--primary-text-color);
}

.card-body a {
    color: var(--primary-text-color);
}

.card.secondary {
    border: 1px solid var(--secondary-background);
    border-radius: 0;
    background-color: var(--secondary-background);
}

.card-header.secondary {
    background-color: var(--secondary-background);
    border-bottom: 1px solid var(--secondary-background);
    color: var(--secondary-text-color);
}

.card-body.secondary {
    background-color: var(--secondary-background);
    border-bottom: 3px solid var(--secondary-background);
    color: var(--secondary-text-color);
}

.card-body.secondary a {
    color: var(--secondary-text-color);
}

.plg_system_webauthn_login_button svg {
    fill: var(--primary-color);
}

.footer {
    background-color: var(--secondary-background);
    background-image: var(--secondary-gradient);
    color: var(--secondary-text-color);
}

::selection {
    background-color: var(--accent-background);
    color: var(--dark-color);
}

.metismenu.mod-menu .metismenu-item > ul {
    background-color: var(--secondary-background);
    border: 1px solid var(--secondary-background);
    color: var(--secondary-text-color);
}

.metismenu.mod-menu .metismenu-item > ul a {
    color: var(--secondary-text-color);
}

.main-top.card.colorpicker-module {
    background-color: var(--main-background);
    color: var(--dark-color);
    border: none;
}

.colorpicker-module .card-header, .colorpicker-module .card-body  {
    background-color: var(--main-background);
    color: var(--dark-color);
}

.article-info {
    background-color: var(--main-background);
    padding: 15px 20px;
}

.article-info dd {
    color: var(--main-color);
}

.btn.btn-info {
    background-color: var(--primary-background);
    border: 1px solid var(--main-background);
    color: var(--primary-text-color);
}

.btn-primary .icon-white:before {
    color: var(--primary-text-color);
}

.btn-secondary .icon-white:before {
    color: var(--secondary-text-color);
}

.form-control {
    background-color: var(--main-background);
    border: 1px solid var(--main-color);
    color: var(--primary-text-color);
    border-radius: 0;
}

label {
    font-weight: bold;
}

h1, .h1 {
    font-size: clamp(18px, 5vw, 28px);
}

h2, .h2 {
    font-size: clamp(16px, 5vw, 26px);
}

h3, .h3 {
    font-size: clamp(14px, 5vw, 24px);
}

h6 {
    border: 1px solid #d3c1b4;
    padding: 10px;
    display: inline-block;
    border-radius: 7px;
    color: #00346F;
}

h4 {
    color: #00346F;
    font-family: 'Caveat', cursive;
    font-size: 28px;
}

.mybanner {
  min-width: 90%;
  position: relative;
  right: 0;
  transform: none;
}

.banner-class {
    width: 120% !important;
    height: auto !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

menu-item-home {
    display: none;
}