/* @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,700;1,100;1,300;1,400;1,700&display=swap'); */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css");

:root {
    --bleu-claire: #DAE6F0;
    --bleu: #1479cc;
    --bleu-fonce: #095797;
    --gris-claire: #F2F1F1;
    --couleur-bordure: #1479CC;
    --couleur-erreur: #d10000;
    --succes-couleur-pale: #BCDA9A;
    --erreur-couleur-pale: #EDBAB1;
    --general-couleur-pale: #D9E6F0;
    --succes-couleur: #4F813D;
    --erreur-couleur: #CB381F;
    --general-couleur: #095797;
    --boite-avis-bordure: #C5CAD2;
    --boite-avis-arriere-plan: #ffffff;
}

*, html, body {
    color: #223654;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    font-size: 1em;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}




.police-icone {
    display: inline-block;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -0.125em;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, legend {
    font-weight: 700;
    font-family: 'Roboto', sans-serif;
}

h1, h2, legend {
    font-size: 2.5em;
    margin-top: 0;
    margin-bottom: 1.2em;
    letter-spacing: inherit;
    line-height: 1.2;
}

.contenant {
    margin-top: 7em;
}

.title-bar::after {
    content: " ";
    display: block;
    height: 0.3125rem;
    line-height: 0.3125rem;
    margin: 0.75rem 0 0;
    width: 2.5rem;
    background: #1479cc;
}

.note-info,
.note-succes,
.note-erreur {
    display: flex;
    border: 1px solid var(--boite-avis-bordure);
    margin-bottom: 1.5em;
}

.bloc {
    display: flex;
    flex-direction: column;
    position: relative;
    margin-bottom: 1.5em;
    border: 1px solid var(--boite-avis-bordure);
}


    .bloc::before {
        content: "";
        height: 1.5em;
        width: 1px;
        background: var(--boite-avis-bordure);
        position: absolute;
        left: 50%;
        top: -1.5em;
    }

    .bloc.removeBefore::before {
        display: none;
    }

    .bloc > em, fieldset > em {
        position: absolute;
        font-style: normal;
        top: -20px;
        font-size: small;
    }


blockquote {
    margin: 2em auto;
    width: 70%;
}

    blockquote ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

.li_label {
    font-weight: bold;
}

fieldset {
    position: relative;
}

fieldset > .bloc:nth-child(2)::before {
    width: 0;
}

.bloc-info {
    background: var(--bleu-claire);
    padding: 1.5em;
}

.note-info-txt, .bloc-txt {
    padding: 2em;
}

    .bloc-txt legend {
        font-size: 1em;
    }

.note-info > i.bi {
    background-color: var(--general-couleur-pale);
    padding: 1.5em 0.5em;
    font-size: 1.5em;
    color: var(--general-couleur);
}

.note-succes i {
    background-color: var(--succes-couleur-pale);
    padding: 1.5em 0.5em;
    font-size: 1.5em;
    color: var(--succes-couleur);
}

.note-erreur i {
    background-color: var(--erreur-couleur-pale);
    padding: 1.5em 0.5em;
    font-size: 1.5em;
    color: var(--erreur-couleur);
}



#division-generale .btn-conteneur-quitter {
    text-align: center;
}


#division-generale .btn-conteneur, .btn-conteneur-quitter {
    display: flex;
    margin-bottom: 5em;
    justify-content: center;
}

#division-generale .btn {
    /*font-family: "Open Sans";*/
    font-size: 16px;
    font-weight: bold;
    /* si Compact font-weight: 600; */
    line-height: 24px;
    display: inline-block;
    box-sizing: border-box;
    transition: all 0.24s ease-in-out;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    border: 2px solid transparent;
    /* si Compact border: 1px solid transparent; */
    border-radius: 0;
    /* si Arrondi border-radius: 4px; */
}

#division-generale .btn.btn-primaire {
        color: #fff;
        border-color: #095797;
        background-color: #095797;
        box-shadow: 0 1px 4px rgba(34, 54, 84, 0.16);
    }

#division-generale .btn.btn-primaire:hover {
            border-color: #156bb2;
            background-color: #156bb2;
        }

      #division-generale .btn.btn-primaire:focus {
            border-color: #223654;
            background-color: #156bb2;
            box-shadow: 0 2px 8px rgba(34, 54, 84, 0.16), 0 0 0 2px #4a98d9;
        }

       #division-generale .btn.btn-primaire:active {
            border-color: #3783c9;
            background-color: #3783c9;
        }

    #division-generale .btn.btn-secondaire {
        color: #095797;
        border-color: #095797;
    }

       #division-generale .btn.btn-secondaire:hover {
            background-color: rgba(9, 87, 151, 0.16);
        }

        #division-generale .btn.btn-secondaire:focus {
            border-color: #223654;
            background-color: rgba(9, 87, 151, 0.16);
            box-shadow: 0 0 0 2px #4a98d9;
        }

        #division-generale .btn.btn-secondaire:active {
            background-color: rgba(9, 87, 151, 0.08);
        }

#produit_info-1 .supprimer {
    display: none;
}

#produit_info-1 .form-row:first-child .form-group:nth-child(1) {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
}

#produit_info-1 .form-row:first-child .form-group:nth-child(2) {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
}

p:first-child, p:last-child {
    margin: 0;
}

.supprimer label {
    visibility: hidden;
}

.btn-supprimer span {
    display: none;
    font-size: 0.6em;
}

.btn-supprimer:before {
    content: "\f5de";
}

.btn-supprimer {
    padding: 0;
    /*min-width: 100%;*/
    margin: 5px 0;
    min-width: 45px;
    color: var(--bleu-fonce);
    text-align: center;
}

    .btn-supprimer:hover {
        color: var(--couleur-erreur);
    }

/*.btn-supprimer::before {
    color:#8893A2;
    content: "\f5de";
    display: inline-block;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -0.125em;
    -webkit-font-smoothing: antialiased;
}*/

label span.titre {
    font-weight: 700;
    font-family: 'Roboto', sans-serif;
    margin-top: 2%;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}


/** Inputs form **/
input[type=checkbox], input[type=radio], label, .editer {
    cursor: pointer;
}

.editer {
    text-decoration: underline;
}

    .editer:hover {
        text-decoration: none;
    }

label:first-letter {
    text-transform: uppercase;
}

/*,
span.required > label:first-of-type::after, span.required > label:first-of-type::after*/
.required > p:first-of-type::after,
.required > span:first-of-type::after,
.required > label:not(.error):first-of-type::after {
    content: "*";
    color: var(--couleur-erreur);
}

.form-check:last-child, .form-group:last-child {
    margin-bottom: 0 !important;
}

textarea.form-control {
    height: 16em;
}

/** CSS Erreur **/
input.error, textarea.error, select.error {
    border-color: var(--couleur-erreur);
}

    input.error:focus, textarea.error:focus, select.error:focus {
        color: #495057;
        background-color: #fff;
        border-color: var(--couleur-erreur);
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgb(209 0 0 / 25%);
    }

label.error {
    margin: 3px 0 0;
    color: var(--couleur-erreur);
    font-size: 0.7em;
    display: block;
}

html .resume h3:first-child {
    margin-top: 0 !important;
}

p[id]:not([id=""]),
.required > label:first-of-type {
    font-weight: bold;
    display: inline-block;
}

p[id]:not([id=""]) {
    margin: 0;
}

#p_consigne_preuves {
    font-weight: normal;
}

/** Inputs form - Liste des fichiers **/

#division-generale input[type="file"] {
    display: none;
}

#division-generale input[readonly] {
    cursor: not-allowed;
}

.fichiers_plainte {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

#liste_fichiers ul:not(:empty) {
    padding: 0;
    margin: 0;
    list-style: none;
    background: var(--gris-claire);
    padding: 1.5em;
}

#liste_fichiers li {
    border-bottom: 1px solid var(--couleur-bordure);
    display: flex;
    margin: 0 0 10px;
}

#liste_fichiers .nom_fichier {
    flex: 1;
}

#liste_fichiers .btn-supprimer {
    padding: 0;
    margin: 0;
    min-width: 50px;
}

.info-nbr-fichiers {
    display: none;
}

.legal-txt {
    background: #F1F1F2;
}

.red {
    color: var(--couleur-erreur);
}


/** Produit info **/
.produit_info:not(:first-child) {
    border-top: 1px solid var(--couleur-bordure);
}

.produits_restant {
    padding-top: 1em;
    margin-bottom: 2.5em;
    border-top: 1px solid var(--couleur-bordure);
}

.produit_info {
    padding-top: 2em;
}

/** Barre de progression **/
#barre-de-progression ol {
    display: flex;
    flex-direction: row;
    padding: 0;
    margin: 0;
    border-bottom: 4px solid #DAE6F0;
    margin-bottom: 3em;
}

    #barre-de-progression ol span {
        display: block;
        font-size: 0.8em;
        font-family: 'Roboto', sans-serif;
        font-weight: bold;
        color: #8893A2;
    }

ol {
    list-style: none;
    counter-reset: my-awesome-counter;
}

    ol li {
        counter-increment: my-awesome-counter;
        margin: 0 0.5em -0.1em;
        padding: 0 0.8em 0.8em;
        font-family: 'Roboto', sans-serif;
        color: #8893A2;
        border: 1px solid #8893A2;
        border-bottom: none;
    }

        ol li:first-child {
            margin-left: 0;
        }

        ol li:last-child {
            margin-right: 0;
        }

        ol li.actif, #barre-de-progression ol li.actif span {
            background: #DAE6F0;
            color: inherit;
            border: none;
        }

        ol li::before {
            content: counter(my-awesome-counter);
            display: block;
            font-size: 1.9em;
            font-weight: bold;
        }

/*ol li:nth-child(3) {
            width:87%;
        }*/

ul.resume {
    list-style: none;
    padding: 0;
    margin: 0;
}

span.reponse {
    display: block;
    margin: 0 0 1em;
}

span.question {
    font-weight: bold;
}

span.reponse::before {
    content: "Votre réponse : ";
}

.btn-conteneur-quitter {
    display: none;
}

html a.lien_aide {
    font-size: 1em;
    color: var(--bleu-fonce) !important;
    text-decoration: none !important;
}

a.lien_aide:before {
    content: "i";
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50px;
    text-decoration: none;
    border: none;
    background-color: #095797;
    color: #ffffff !important;
    text-align: center;
    position: relative;
    font-family: ui-serif;
    font-weight: bold;
    font-size: 0.9rem;
}

.tooltip.show {
    opacity: 1;
}

.tooltip-inner {
    max-width: 250px;
    padding: 0.8rem 0.8rem;
    color: #0e245d;
    text-align: left;
    box-shadow: 0 0 2px 0 rgba(0 0 0 / 50%);
    background: #fff;
}

.bs-tooltip-top .arrow::before {
    border-top-color: #fff !important;
}

.bs-tooltip-top .arrow::after {
    position: absolute;
    content: ' ';
    z-index: -1;
    bottom: 0.2rem;
    left: 0.2rem;
    transform: rotate(-45deg);
    width: 0.8rem;
    height: 0.4rem;
    border-width: 0.4rem 0.4rem 0;
    border-top-color: #fff;
    box-shadow: 2px 2px 4px 0px rgba(0 0 0 / 50%);
}

.bs-tooltip-right .arrow::before {
    border-right-color: #fff !important;
}

.bs-tooltip-right .arrow::after {
    position: absolute;
    content: ' ';
    z-index: -1;
    right: -0.4rem;
    transform: rotate(45deg);
    width: 0.4rem;
    height: 0.8rem;
    border-width: 0.4rem 0.4rem 0.4rem 0;
    border-right-color: #fff;
    box-shadow: 2px 2px 4px 0px rgba(0 0 0 / 50%);
}

.bs-tooltip-bottom .arrow::before {
    border-bottom-color: #fff !important;
}

.bs-tooltip-bottom .arrow::after {
    position: absolute;
    content: ' ';
    z-index: -1;
    top: 0.4rem;
    left: 0.4rem;
    width: 0.4rem;
    height: 0.8rem;
    transform-origin: 0 0;
    transform: rotate(-45deg);
    border-width: 0 0.4rem 0.4rem;
    border-right-color: #fff;
    box-shadow: -3px -2px 2px 3px rgb(0 0 0 / 20%);
}

.bs-tooltip-left .arrow::before {
    border-left-color: #fff !important;
}

.bs-tooltip-left .arrow::after {
    position: absolute;
    content: ' ';
    z-index: -1;
    left: -0.2rem;
    transform-origin: 0 0.4rem;
    transform: rotate(45deg);
    width: 0.4rem;
    height: 0.8rem;
    border-width: 0.4rem 0 0.4rem 0.4rem;
    border-right-color: #fff;
    box-shadow: 2px 2px 4px 0px rgba(0 0 0 / 50%);
}

.info {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50px;
    text-decoration: none;
    border: none;
    background-color: #095797;
    color: #ffffff !important;
    text-align: center;
    position: relative;
    font-family: ui-serif;
    font-weight: bold;
    font-size: 0.9rem;
}

.btn-tooltip {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
    width: 20px;
    height: 20px;
}

    .btn-tooltip:focus {
        outline: none;
    }

*[data-toggle*="tooltip"] {
    cursor: pointer;
}

address {
    margin-bottom: 0;
}

    address ul {
        margin: 0;
        padding: 0;
    }

        address ul li {
            list-style: none;
        }

.date {
    background: #fff;
    padding: 0.5em 0.5em;
    display: inline-block;
}

.contenu-fixe,
.contenant {
    padding: 0 !important;
}



/** Fléche select **/
select, .select-field {
    -webkit-appearance: none;
    appearance: none;
    background-color: white;
    background-color: var(--base-bg);
    background-image: url("/images/ico_chevrondown_select.svg");
    background-position: center right 0.5rem;
    background-repeat: no-repeat;
    background-size: 1rem 0.5rem;
    border: 1px solid;
    box-sizing: border-box;
    box-shadow: none;
    color: #223654;
    color: var(--base-fg);
    display: block;
    height: 2.5rem;
    /*max-width: 33rem;*/
    min-width: 3.9375rem;
    padding-left: 0.5rem;
    padding-right: 2.25rem;
    width: 100%;
}
/** cellulaire à tablette **/
@media (max-width: 768px) {
    h1, h2, legend {
        font-size: 2rem;
        line-height: 1.175;
    }
}

@media (max-width: 767px) {
    /*Type telephone*/
    label[for^=type_] {
        display: none;
    }
}

@media (max-width: 576px) {
   #division-generale .btn-secondaire {
        order: 2;
    }

    #logos-ms {
        /*scale: 80%*/
    }

    .section_telephone {
        margin-top: 1rem !important;
    }

    ol li {
        flex: 1;
    }

    #produit_info-1 .form-row:first-child .form-group:nth-child(1),
    #produit_info-1 .form-row:first-child .form-group:nth-child(2) {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/** Media print **/
@media screen {
    #div_zoneTxt_impression {
        display: block;
    }
}

/**** HOT FIX ****/
#fs-2-1-2-0 .form-group {
    margin-bottom: 0;
}


@media print {


#header-menu-princ {
    display: none;
}
.breadcrumb{
    display: none;
}

.liens-rapides {
    display: none;
}

#pied-page {
    display: none;
}

.piv {
    display: none;
}

.dateMaJ {
    display: none;
}

    #barre-de-progression, button, .editer {
        display: none !important;
    }

    #formulairePlainte {
        margin-top: 4em;
    }
}

.modal-title {
    margin: 0;
}

.sous-titre {
    background: var(--bleu-claire);
    color: var(--general-couleur);
    padding: 0.2em 0.5em;
    display: inline;
    font-size: 1rem;
}

    /*.sous-titre:before {
        content: " ";
        width: 0;
        height: 0;
        border-top: 100px solid red;
        border-left: 100px solid transparent;
    }

    .sous-titre:after {
        content: " ";
        width: 0;
        height: 0;
        border-bottom: 100px solid red;
        border-right: 100px solid transparent;
    }*/

.modal-content {
    padding: 2em;
}

    .modal-content .close {
        position: absolute;
        top: 0.3em;
        right: 0.5em;
    }

.modal-header, .modal-body {
    padding: 0;
}

.modal-body {
    margin-top: 1.5em;
}

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 600px;
        margin: 1.75rem auto;
    }
}

.modal h3:after {
    /*border-color: #f09686;*/
}
.modal-footer {
    border:none;
}

.overlay {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    background: #ffffff;
    z-index: 9999999999;
}

.overlay__inner {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
}

.overlay__content {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.spinner {
    width: 75px;
    height: 75px;
    display: inline-block;
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.05);
    border-top-color: #095797;
    animation: spin 1s infinite linear;
    border-radius: 100%;
    border-style: solid;
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}


/* Styles pour uniformiser le font

.liens-rapides {
        font-size: 12px !important;
}

html body div#pied-page {

    font-size: 0.92em;
}
 */