/*
 * Thème du site, chargé sur toutes les pages après custom.site.css
 * (voir Config/html-header-config.json).
 *
 * Ordre des feuilles :
 *   1. Bootstrap (CDN)
 *   2. custom.site.css : anciens styles du site, sans source SCSS à jour
 *   3. site.css : thème et éléments communs, à modifier en priorité
 *   4. pages.css : pages refondues, ajouté par Controller::loadPageStyles()
 */

:root {
    --bs-primary: #35a806;
    --bs-primary-rgb: 53, 168, 6;
    --bs-primary-hover: #3c8d53;
    --bs-btn-bg: #35a806;
}

/* Liens
   ------------------------------------------------------------------ */
.text-primary,
a:not(.btn, .navigation a, .breadcrumb-container a) {
    color: var(--bs-primary) !important;
}

a:not(.btn, .navigation a, .breadcrumb-container a):is(:hover, :focus) {
    color: #236d06 !important;
    text-decoration: underline !important;
}

/* Boutons
   ------------------------------------------------------------------ */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary-hover);
    --bs-btn-hover-border-color: var(--bs-primary-hover);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary-hover);
    --bs-btn-active-border-color: var(--bs-primary-hover);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-primary,
.btn-check + .btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary-hover);
    --bs-btn-hover-border-color: var(--bs-primary-hover);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary-hover);
    --bs-btn-active-border-color: var(--bs-primary-hover);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-primary {
    --bs-gradient: none;
}

.btn-check + .btn-outline-primary {
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
}

/* Fonds
   ------------------------------------------------------------------ */
.bg-primary {
    background-color: var(--bs-primary) !important;
}

.bg-primary-subtle {
    background-color: rgba(var(--bs-primary-rgb), .12) !important;
}

.bg-primary a:not(.btn) {
    color: #fff;
}

.bg-primary a:not(.btn):is(:hover, :focus) {
    color: #f0f0f0 !important;
}

.progress-bar {
    background-color: var(--bs-primary);
}

/* Navigation
   ------------------------------------------------------------------ */
.navigation.scrolled {
    box-shadow: 0 -25px 50px rgba(100, 100, 100, .5);
}

.nav-link {
    color: #2e2e2e;
    font-size: .85rem;
}

.nav-link.active,
.nav-link:not(.btn, .navigation a, .breadcrumb-container a):focus {
    background: var(--bs-primary) !important;
    color: #fff !important;
}

.nav-link.active:hover,
.nav-link:focus {
    color: #fff !important;
}

/* Une seule ligne : sur deux lignes, la barre fixe grandit et couvre le haut de la page */
.breadcrumb-container .breadcrumb {
    flex-wrap: nowrap;
}

.breadcrumb-container .breadcrumb-item {
    flex: none;
    white-space: nowrap;
}

.breadcrumb-container .breadcrumb-item:last-child {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bouton de retour en haut
   ------------------------------------------------------------------ */
#scroll-to-top {
    position: fixed;
    right: 2rem;
    bottom: 2rem;
    z-index: 1050;
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--bs-primary);
    border-radius: 50%;
    background-color: var(--bs-primary);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    transform: rotate(-90deg);
    transition: background-color .3s;
}

#scroll-to-top.show {
    display: flex;
}

#scroll-to-top:hover {
    background-color: transparent;
    color: var(--bs-primary);
}

/* Formulaires
   ------------------------------------------------------------------ */
label {
    z-index: 1 !important;
}

.form-control {
    z-index: 0 !important;
}

/* custom.site.css fixe un texte blanc, invisible sur le fond blanc des menus déroulants */
.form-select,
.form-select option {
    color: var(--bs-body-color);
}

.form-check label {
    top: 0 !important;
    left: 15px;
}

.form-check-input {
    --bs-form-check-bg: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    background-color: var(--bs-form-check-bg);
}

.form-check-input:checked,
.form-check-input:checked:focus {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary);
}

.form-check-input:focus {
    border-color: var(--bs-primary);
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

.form-check-input:active {
    filter: brightness(90%);
}

/* Boutons de partage
   ------------------------------------------------------------------ */
.social-buttons a {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 8px 12px;
    border-radius: 5px;
    color: #fff;
    text-decoration: none;
    transition: background-color .3s;
}

.social-buttons a.facebook { background-color: #1877f2; }
.social-buttons a.facebook:hover { background-color: #115293; }
.social-buttons a.twitter { background-color: #1da1f2; }
.social-buttons a.twitter:hover { background-color: #0d86c9; }
.social-buttons a.linkedin { background-color: #0077b5; }
.social-buttons a.linkedin:hover { background-color: #005f86; }
.social-buttons a.messenger { background-color: #0084ff; }
.social-buttons a.messenger:hover { background-color: #005f86; }
.social-buttons a.pinterest,
.social-buttons a.pinterest:hover { background-color: #bd081c; }
.social-buttons a.mailto { background-color: #999; }
.social-buttons a.mailto:hover { background-color: #777; }

.social-buttons.circle {
    display: flex;
    justify-content: center;
}

.social-buttons.circle a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    font-size: 1.2rem;
}