body {
    font-family: OpenSans, arial, "Segoe UI", helvetica, sans-serif;
    background: linear-gradient(#fff, #d7d6d2);
    color: #656565;
    font-size: 1em;
}

/* Exemples de données en italique */
input::placeholder {
    font-style: italic;     
}

h4 {
    font-weight: bold;
}

:root {
    /* Couleurs importantes */
    --moz-color-bleu-mozaik-rgb: 0, 115, 207;
    --moz-color-bleu-mozaik: rgb(var(--moz-color-bleu-mozaik-rgb));
    --sie-color-ancien-vert: #34B233;
    --sie-color-bleu-fonce-rgb: 9, 87, 151;

    /* Couleurs courantes */
    --sie-current-primary-color-rgb: var(--sie-color-bleu-fonce-rgb);
    --sie-current-primary-color: rgb(var(--sie-current-primary-color-rgb));
    --sie-current-moz-button-color: var(--sie-current-primary-color); /*var(--sie-current-primary-color);*/ /*var(--moz-color-bleu-mozaik);*/

    --sie-footer-bg-color: #37424a; /* Gris */

    /* Couleur de sélection - prendre la même bleu que le reste */
    --bs-primary-rgb: var(--sie-current-primary-color-rgb);

    /* Couleur lien de navigation actif lorsqu'on hover par dessus.  Bleu un peu plus foncé.  */
    --sie-navbar-active-link-hover-color: rgb(6,60,105);

    /* Couleurs - Bouton succès */
    --sie-btn-success-bg-color: var(--sie-current-primary-color);
    --sie-btn-success-color: white;
    --sie-btn-success-hover-opacity: 0.6;
}


/* Prendre notre bleu pour les cases à cocher */
.form-check-input:checked {
    background-color: var(--sie-current-primary-color) !important;
}

/* <BOOTSTRAP>
    Classes propres à Bootstrap qu'on ajuste à notre goût
*/
.container {
    max-width: 940px !important;
}


.btn.dropdown-toggle.show,
.btn.dropdown-toggle {
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

/* Bordure de succès - On l'utilise pour la ligne séparatrice */
.border-success {
    border-color: var(--sie-btn-success-bg-color) !important;
}

/* Couleur lien de navigation actif lorsqu'on hover par dessus.  Bleu un peu plus foncé.  */
.navbar .nav-link.active:focus, .nav-link.active:hover {
    color: var(--sie-navbar-active-link-hover-color) !important;
}



/* Pour les checkbox "bootstrap" qui ne sont pas cochés, comme le toggle de changement d'adresse : on rend le contour un peu plus foncé sinon il est trop pâle dans le gris de nos formulaires. */
input.form-check-input:not(:checked) {
    border-color: #adb5bd !important;
}

/* </BOOTSTRAP> */



/* ------------------------------------------------------------ 
   <SIE>
   ------------------------------------------------------------ */

/* ------------------------------------------------------------ 
   <BOUTONS>
   ------------------------------------------------------------ */
.sie-btn-success {
    --bs-btn-color: var(--sie-btn-success-color);
    --bs-btn-bg: var(--sie-btn-success-bg-color);
    --bs-btn-border-color: var(--sie-btn-success-bg-color);
    --bs-btn-hover-color: var(--sie-btn-success-color);
    --bs-btn-hover-bg: var(--sie-btn-success-bg-color);
    --bs-btn-hover-border-color: var(--sie-btn-success-bg-color);
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: var(--sie-btn-success-color);
    --bs-btn-active-bg: var(--sie-btn-success-bg-color);
    --bs-btn-active-border-color: var(--sie-btn-success-bg-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--sie-btn-success-color);
    --bs-btn-disabled-bg: var(--sie-btn-success-bg-color);
    --bs-btn-disabled-border-color: var(--sie-btn-success-bg-color);
}
    .sie-btn-success:hover {
        background-color: var(--sie-btn-success-bg-color);
        opacity: var(--sie-btn-success-hover-opacity);
    }
    .sie-btn-success:active {
        background-color: var(--sie-btn-success-bg-color);
        opacity: calc( var(--sie-btn-success-hover-opacity) + 0.2 ) !important;
    }


/* Bouton en cercle de la langue */
.sie-btn-circle {
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px; /* Ajustez la taille selon vos besoins */
    height: 30px;
    border-radius: 50%;
    background-color: var(--sie-btn-success-bg-color);
    color: var(--sie-btn-success-color) !important;
    text-decoration: none;
}
    .sie-btn-circle:hover {
        background-color: var(--sie-btn-success-bg-color) !important;
        color: var(--sie-btn-success-color) !important;
        opacity: var(--sie-btn-success-hover-opacity) !important;
    }
/* </BOUTONS> */


/* Zone de footer dans la page master. */
.sie-footer
{
    background-color: var(--sie-footer-bg-color);
}


/* Cadre pour la connexion / authentification des pages d'accueil. */
.sie-card-connexion {
    background: #37424a;
}


/* Mettre la première lettre en majuscule */
.sie-capitalize-first-letter::first-letter {
    text-transform: uppercase;
}

.sie-rotate-90 {
   transform: rotate(90deg);
   transform-origin: center;
}

/* Drop down de sélection années : réduire la largeur et centrer le texte.
      À utiliser en conjonction avec .sie-start-sm-50 .sie-translate-sm-middle-x pour le centrer sous le dropdown.
*/ 
.sie-dropdown-menu-annees {
    min-width: 100px !important;
    max-width: 100px !important;
    text-align: center;
}

/* Pastille pour les relevés et feuillets, pour accentuer le focus et changer le curseur.  De plus, cette classe est ciblée via le javascript pour ajouter du code pour traiter tout le DIV comme un lien. */
.sie-focus-ring-clickable:hover {
    box-shadow: var(--bs-box-shadow-lg) !important;
    cursor: pointer;
    transition-delay: 0.1s;
}
/* </SIE> */

/* ------------------------------------------------------------ 
   <AUTHENTIFICATION MOZAÏK>
   ------------------------------------------------------------ */

/* Boutons de connexion */
button.btnConnecterMozaik[data-theme] {
    border: 1px solid transparent;
    display: inline-block;
    font-size: 13px;
    line-height: 38px;
    margin: 0;
    outline: none;
    padding: 0 16px 0 0;
    position: relative;
    text-align: center;
    vertical-align: top;
    white-space: nowrap;
    -webkit-appearance: none;
    border-radius: 3px;
    box-shadow: 2px 2px 3px rgba(0,0,0,0.4);
    box-sizing: border-box !important; /* Ajout requis suite à inclusion de bootstrap pour garder même taille */
}


button.btnConnecterMozaik[data-theme="sombre"] {
    background-color: var(--sie-current-moz-button-color);
    border-color: var(--sie-current-moz-button-color);
    color: #fff;
}

    button.btnConnecterMozaik[data-theme="sombre"][data-couleur="anthracite"] {
        background-color: #37424a;
        border-color: #37424a;
    }

button.btnConnecterMozaik[data-theme="clair"] {
    background-color: #fff;
    border-color: var(--sie-current-moz-button-color);
    color: var(--sie-current-moz-button-color);
}

    button.btnConnecterMozaik[data-theme="clair"][data-couleur="anthracite"] {
        border-color: #37424a;
        color: #37424a;
    }

button.btnConnecterMozaik[data-theme] > span {
    display: inline-block;
}

/* Hover et focus */
button.btnConnecterMozaik[data-theme]:focus {
    outline: none;
}

button.btnConnecterMozaik[data-theme]::after {
    background-color: currentColor;
    border-radius: inherit;
    box-sizing: border-box;
    content: '';
    display: inline-block;
    height: calc(100% + 2px);
    opacity: 0;
    position: absolute;
    left: -1px;
    top: -1px;
    -moz-transition: opacity .2s ease;
    -o-transition: opacity .2s ease;
    -webkit-transition: opacity .2s;
    transition: opacity .2s ease;
    width: calc(100% + 2px);
}

button.btnConnecterMozaik[data-theme="sombre"]:hover::after {
    opacity: .2;
}

button.btnConnecterMozaik[data-theme="sombre"]:focus::after {
    opacity: .3;
}

button.btnConnecterMozaik[data-theme="clair"]:hover::after {
    opacity: .1;
}

button.btnConnecterMozaik[data-theme="clair"]:focus::after {
    opacity: .2;
}

/* Inactif */
button.btnConnecterMozaik[data-theme][disabled] {
    cursor: default;
    opacity: .6;
    pointer-events: none;
}

/* Icône  */
button.btnConnecterMozaik[data-theme]::before {
    background-color: transparent;
    background-position: 12px center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    content: '';
    display: block;
    float: left;
    height: 38px;
    width: 48px;
}

button.btnConnecterMozaik[data-theme="sombre"]::before {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNC4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNDYuMSA0NS44IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0Ni4xIDQ1Ljg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNmZmZmZmY7fQ0KPC9zdHlsZT4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0yMC42LDEyLjJjMCw0LjUtMy42LDguMS04LjEsOC4xYy00LjUsMC04LjEtMy42LTguMS04LjFjMC00LjUsMy42LTguMSw4LjEtOC4xQzE3LDQuMSwyMC42LDcuNywyMC42LDEyLjJ6Ii8+DQo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDIuMywzMy45YzAsNC41LTMuNiw4LjEtOC4xLDguMWMtNC41LDAtOC4xLTMuNi04LjEtOC4xYzAtNC41LDMuNi04LjEsOC4xLTguMUMzOC42LDI1LjcsNDIuMywyOS40LDQyLjMsMzMuOQ0KCXoiLz4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NSwyM0gzNC4xYy02LDAtMTAuOCw0LjgtMTAuOCwxMC44YzAsNi00LjgsMTAuOC0xMC44LDEwLjhjLTYsMC0xMC44LTQuOC0xMC44LTEwLjhjMC02LDQuOC0xMC44LDEwLjgtMTAuOA0KCWM2LDAsMTAuOC00LjgsMTAuOC0xMC44VjEuNEg0NVYyM3oiLz4NCjwvc3ZnPg0K');
}

button.btnConnecterMozaik[data-theme="clair"]::before {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNC4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNDYuMSA0NS44IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0Ni4xIDQ1Ljg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiMwMDczY2Y7fQ0KPC9zdHlsZT4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0yMC42LDEyLjJjMCw0LjUtMy42LDguMS04LjEsOC4xYy00LjUsMC04LjEtMy42LTguMS04LjFjMC00LjUsMy42LTguMSw4LjEtOC4xQzE3LDQuMSwyMC42LDcuNywyMC42LDEyLjJ6Ii8+DQo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDIuMywzMy45YzAsNC41LTMuNiw4LjEtOC4xLDguMWMtNC41LDAtOC4xLTMuNi04LjEtOC4xYzAtNC41LDMuNi04LjEsOC4xLTguMUMzOC42LDI1LjcsNDIuMywyOS40LDQyLjMsMzMuOQ0KCXoiLz4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NSwyM0gzNC4xYy02LDAtMTAuOCw0LjgtMTAuOCwxMC44YzAsNi00LjgsMTAuOC0xMC44LDEwLjhjLTYsMC0xMC44LTQuOC0xMC44LTEwLjhjMC02LDQuOC0xMC44LDEwLjgtMTAuOA0KCWM2LDAsMTAuOC00LjgsMTAuOC0xMC44VjEuNEg0NVYyM3oiLz4NCjwvc3ZnPg0K');
}

button.btnConnecterMozaik[data-theme="clair"][data-couleur="anthracite"]::before {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNC4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FscXVlXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNDYuMSA0NS44IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0Ni4xIDQ1Ljg7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiMzNzQyNGE7fQ0KPC9zdHlsZT4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0yMC42LDEyLjJjMCw0LjUtMy42LDguMS04LjEsOC4xYy00LjUsMC04LjEtMy42LTguMS04LjFjMC00LjUsMy42LTguMSw4LjEtOC4xQzE3LDQuMSwyMC42LDcuNywyMC42LDEyLjJ6Ii8+DQo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDIuMywzMy45YzAsNC41LTMuNiw4LjEtOC4xLDguMWMtNC41LDAtOC4xLTMuNi04LjEtOC4xYzAtNC41LDMuNi04LjEsOC4xLTguMUMzOC42LDI1LjcsNDIuMywyOS40LDQyLjMsMzMuOQ0KCXoiLz4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NSwyM0gzNC4xYy02LDAtMTAuOCw0LjgtMTAuOCwxMC44YzAsNi00LjgsMTAuOC0xMC44LDEwLjhjLTYsMC0xMC44LTQuOC0xMC44LTEwLjhjMC02LDQuOC0xMC44LDEwLjgtMTAuOA0KCWM2LDAsMTAuOC00LjgsMTAuOC0xMC44VjEuNEg0NVYyM3oiLz4NCjwvc3ZnPg0K');
}

/* </AUTHENTIFICATION MOZAÏK> */



/*------------------------------------------------------------------------------------------------------
    <MEDIA QUERIES>    
            
        PRINCIPES À APPLIQUER 
           -Toujours utiliser les styles existants de Bootstrap lorsque possible.
           -Garder au minimum l'utilisation des media queries.                
           -Autant que possible, faire des classes réutilisables/génériques 
            et les appliquer au contrôle souhaité au lieu de le cibler directement dans une media query.
           -Autant que possible, utiliser les dimensions Bootstrap existantes.
                    xs	<576px
                    sm	≥576px
                    md	≥768px
                    lg	≥992px
                    xl	≥1200px
                    xxl	≥1400px
------------------------------------------------------------------------------------------------------*/
/* Cacher sur les appareils avec petite hauteur. */
@media (max-height: 700px) {
    .sie-hide-on-very-small-height {
        display: none !important;
    }
}

/*-------------------------------------------------------------------
    Bootstrap 'xs'
        Très petits appareils 
                (téléphones en mode portrait, moins de 576px) 

    NOTE: Garder au minimum (voir les 'principes à appliquer'
          au début des media queries.)
-------------------------------------------------------------------*/
@media (max-width: 575.98px) {
}

/*-------------------------------------------------------------------
    Bootstrap 'sm'
        Petits appareils (téléphones en mode paysage, ≥576px) 

    NOTE: Garder au minimum (voir les 'principes à appliquer'
          au début des media queries.)
-------------------------------------------------------------------*/
@media (min-width: 576px) {

    /* Déplacer de 50% vers la (taille 'sm' et plus).  Utilisé avec le dropdown des années par exemple (sie-dropdown-menu-annees).
       On s'inspire de start-50 de bootstrap.
    */
    .sie-start-sm-50 {
        left: 50% !important;
    }

    /* Centrer horizontalement (taille 'sm' et plus). Utilisé avec le dropdown des années par exemple (sie-dropdown-menu-annees).
       On s'inspire de translate-middle-x de bootstrap.
    */
    .sie-translate-sm-middle-x {
        transform: translateX(-50%) !important;
    }
}

/*-------------------------------------------------------------------
    Bootstrap 'md'
        Appareils moyens (tablettes, ≥768px) 

    NOTE: Garder au minimum (voir les 'principes à appliquer'
          au début des media queries.)
-------------------------------------------------------------------*/
@media (min-width: 768px) {
}

/*-------------------------------------------------------------------
    Bootstrap 'lg' et +.
        lg = 992
        xl = 1200
        xxl = 1400
        Grands appareils (ordinateurs portables, ≥992px) 

    NOTE: Garder au minimum (voir les 'principes à appliquer'
          au début des media queries.)
-------------------------------------------------------------------*/
@media (min-width: 992px) {
}

/* </MEDIA QUERIES> */