/* attention : modification des scss bootstrap : buttons.scss et nav.scss  pour que cela soit toujours 
le navigateur qui fasse le focus-visible*/
@import url('https://fonts.cdnfonts.com/css/aileron');
:root {
    --bs-body-font-family: 'Aileron', sans-serif;
    --bs-border-color: #989494;
    --bs-secondary-color: #989494;
    
    --bs-form-valid-color: #006000;
    --bs-form-valid-border-color: #006000;
    --bs-form-invalid-color: #aa0000;/*dc3545*/
    --bs-form-invalid-border-color: #aa0000;
}

/*enlever le focus bootstrap*/
.accordion {
    --bs-accordion-btn-focus-border-color: transparent;
    --bs-accordion-btn-focus-box-shadow: transparent;
}
.form-check-input:focus,
.accordion-button:focus {
    outline: revert;
}
.form-check-input:focus {
    border-color: transparent;
    box-shadow: 0 0 0 0.25rem transparent;
}

img.ddd-logo {
    max-height: 55px;
}
html {
    font-size: 14px;
}
header {
    border-bottom: 2px solid #d7dbDe;
}
main>div.container,
div.volet-gauche,
div.volet-droite {
    padding-top: 35px;
    @media (max-width: 575.98px) {
        padding-top: 23px;
    }
}
.container-fluid.volets {
    height: calc(100vh - 80px);
}
.container-fluid.volets .etape-form {
    min-height:calc(100vh - 296px);
}
.min-height.etape-form {
    min-height:calc(100vh - 296px);
}
/* Alert */
.alert:not(.not_border_left) {
    border-left-width: 5px;
    border-left-color: #fa5a68
}
.alert>img{
    align-self: flex-start;
}
.alert ul {
    list-style-type: "- ";
}
.alert li {
    margin-left: 0.6rem;
}
.alert p:last-child {
    margin-bottom: 0;
}
.alert-light {
    --bs-alert-border-color:#97A0A9;
    --bs-alert-bg:#fff;
    --bs-danger-text-emphasis: #1E274A;
}
.alert-danger {
    --bs-alert-border-color:#fbeaeb;
    --bs-alert-bg:#fbeaeb;
    --bs-danger-text-emphasis: #1E274A;
}

.ddd-verifier-ddd-peut-aider,
div.volet-gauche,
.alert-gris {
    background-color: #EAEDFC;
}

.alert-brun {
    background-color: #F5F5F5;
}
/* Modal */
.modal {
    /**/
    --bs-modal-header-border-width:0;
    --bs-modal-footer-border-width:0;
}

/* Card */
.card {
    --bs-card-spacer-x: 1.65rem;
    --bs-card-spacer-y: 1.65rem;
    --bs-card-title-spacer-y: 2.15rem;
    --bs-card-cap-bg: #FFF;
    --bs-card-border-width: 0;
    cursor: pointer;
}

.ddd-card {
    display:flex;
    flex-wrap: wrap;
}
.ddd-card .card-title {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-direction: row-reverse;
}
.ddd-card label,
.ddd-card input {
    cursor: pointer;
}
.card-body {
    border: 1px solid var(--bs-card-border-color);
    margin: 1px;
}

.card-body:hover,
.card-body.checked {
    border: 2px solid blue;
    margin: 0px;
}

.card-footer {
    text-align: left;
}

.error {
    color: red;
    background-color: #000000;
}
/* liste */
ol,
ul {
    padding-left: 0;/* TODO modifier bootstrap */
}
li {
    margin-left: 1.2rem;
}

.comment_faire_appel_au_ddd_enfant ol {counter-reset: repas;} /* on initialise et nomme un compteur */
.comment_faire_appel_au_ddd_enfant ol>li {
	list-style-type: none;
	counter-increment: repas; /* on incrémente le compteur à chaque nouveau li */
}
/* .etape-form c’est pour ne pas afficher le compteur sur les boutons précédent et suivant */
.comment_faire_appel_au_ddd_enfant ol>li:before {
	content: counter(repas); /* on affiche le compteur */
	padding: 3px 6px;
	margin-right: 8px;
	vertical-align: text-bottom;
	background: #D1D1D1;
	-moz-border-radius: 60px;
	border-radius: 160px;
	font-weight: bold;
	font-size: 0.8em;
	/* color: white; */
}
.etape-form {
    position: relative;
}


.offcanvas-header {
    justify-content: end;
}

/* cookie banner */
div#cookies-eu-banner {
    position: absolute;
    top: 80px;
}

/* formulaire liste_un_choix_radio*/
.liste_plusieurs_choix_checkbox_box,
.liste_un_choix_radio_box,
.liste_un_choix_radio_box_avec_details {
    background-color: #e5f1fa;
    display: flex;
    border-radius: 5px;
    border: 1px solid black;
    padding: 15px;
    margin-top: 15px;
    margin-left: 0px;
    cursor: pointer;
}
.liste_plusieurs_choix_checkbox_box .invalid-feedback,
.liste_un_choix_radio_box_avec_details .invalid-feedback,
.liste_un_choix_radio_box .invalid-feedback {
    position: relative;
    top: 41px;
}
p.invalid-feedback {
    margin:0;
}
.liste_plusieurs_choix_checkbox_box input,
.liste_un_choix_radio_box input,
.liste_un_choix_radio_box_avec_details input {
    margin-right: 15px;
}
.liste_plusieurs_choix_checkbox_box label,
.liste_un_choix_radio_box label,
div.liste_un_choix_radio_label_et_details label {
    font-weight: bold;
}
/* pose problème lorsque l’on diminue l’écran
.liste_un_choix_radio_box_avec_details {
    max-height: 91px;
    height: 91px;
}
Solution proposé ci-dessous*/
.liste_un_choix_radio_box_avec_details {
    min-height: 91px;
}
.liste_un_choix_radio .form-check,
.liste_plusieurs_choix .form-check,
.liste_un_choix_radio_box_avec_details .form-check {
    margin-bottom: 0;
}
.liste_plusieurs_choix .form-check {
    display: flex;
    flex-direction: row-reverse;
}


div.liste_un_choix_radio_label_et_details {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.liste_un_choix_radio_box.checked,
.liste_un_choix_radio_box_avec_details.checked {
    background-color: #c7e7ff;
}

.liste_un_choix_radio_box_avec_details .form-check-label {
    cursor: pointer;
}
.liste_un_choix_radio_box_avec_details:focus .form-check-label,
.liste_un_choix_radio_box_avec_details:hover .form-check-label,
.liste_un_choix_radio_box_avec_details.checked .form-check-label {
    text-decoration: underline;
}

.liste_un_choix_radio.radio_row legend {
    display: none;
}
.liste_un_choix_radio.radio_row .liste_un_choix_radio_box {
    flex: 1;
    margin: 1rem;
    display: flex;
    justify-content: center;
}

/* margin element */
.form-check,
.form-select,
.form-control {
    margin-bottom: 1.5rem;
}

/* margin element ab-datepicker bootstrap5 */
.ab-datepicker-input-group-wrapper {
    margin-bottom: 1.5rem;
}
.ab-datepicker-input-group-wrapper .input-group .form-control {
    margin-bottom: 0;
}

.form-select+.invalid-feedback,
.form-control+.invalid-feedback {
    position: relative;
    bottom: 1.5rem;
    height: 0;
}
.titi .form-select+.invalid-feedback,
.titi .form-control+.invalid-feedback {
    bottom: 0.2rem;
}

/* aide */
ul.aide {
    list-style-type: none;
}
ul.aide li {
    padding-top: 20px;
    padding-bottom: 20px;
}
ul.aide li:not(:last-child) {
    border-bottom: 1px solid #D1D1D1
}

/* donnees.personne_morale autocomplete */

.autocomplete-api-ban-list,
.autocomplete-api-sirene-list {
    max-height: 25vh;
    overflow-y: scroll;
    overflow-x: hidden;
}

li.autocomplete-api-ban-entry div,
li.autocomplete-api-sirene-entry div {
    cursor: pointer
}

li.autocomplete-api-ban-entry p.autocomplete-api-ban-entry-addr,
li.autocomplete-api-sirene-entry p.autocomplete-api-sirene-entry-addr {
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
}

/* donnees.file_upload et donnees.enregistreur_vocal */

div.enregistreur_vocal {
    padding: 2rem;
}

div.enregistreur_vocal,
button.file_upload {
    border-radius: 5px;
    border: 1px dashed #344DDB;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1rem;
    width: inherit;
}

button.file_upload p {
    display: flex;
    flex-direction: column;
}

div.enregistreur_vocal input[type="file"],
button.file_upload input[type="file"] {
    display: none;
}

div.enregistreur_vocal label,
button.file_upload .form-label {
    color: #344DDB;
    cursor: pointer;
}

div.enregistreur_vocal:hover,
button.file_upload:hover {
    background-color: #e5f1fa;
}

div.enregistreur_vocal.disabled,
button.file_upload.disabled {
    background-color: #f5f5f5;
    border: 1px dashed #97a0a9;
    color: #97a0a9;
    pointer-events: none;
}

div.enregistreur_vocal.disabled label,
button.file_upload.disabled label {
    color: #97a0a9;
}

div.enregistreur_vocal-invalid-feedback,
div.file_upload-invalid-feedback {
    display: none;
}

div.enregistreur_vocal img {
    width: 21px;
    height: 23px;
}

.recording {
  /* animation: blinker 1.5s cubic-bezier(.5, 0, 1, 1) infinite alternate;   */
}

@keyframes blinker {  
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* donnees.files_uploaded */

div.files_uploaded ul.files_uploaded_list {
    list-style: none;
    margin: 0px;
    margin-bottom: 1rem;
}

div.files_uploaded ul.files_uploaded_list li {
    border: 1px solid #97a0a9;
    border-radius: 5px;
    margin: 0px;
    margin-top: 2px;
    padding: 15px;
}

div.files_uploaded button.uploaded_file_action {
    cursor: pointer;
    margin-right: 1rem;
    display: flex;
    align-items: center;
    color: #344DDB;
    border-width: 0;
    background-color: transparent;
    padding:0;
}
div.files_uploaded audio {
    height: 42px;
}

/* documents-en-attente */

.documents-en-attente {
    border-radius: 5px;
    border: 1px solid #97a0a9;
    padding: 1rem;
    margin-bottom: 1rem;
}

/* desktop-ui-etapes */

div.desktop-ui-etapes {
    display: none;
}

h1.etapes-title {
    display: none;
}

/* mobile-ui-etapes */

div.mobile-ui-etapes-badge {
    height: 2rem;
    width: 2rem;
    border-radius: 1rem;
    border: 1px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
}

progress.mobile-ui-etapes-progress {
    border: 0;
    height: 4px;
    width: 100%;
    -webkit-appearance: none;
}

progress.mobile-ui-etapes-progress::-webkit-progress-bar {
    border: 0;
    width: 100%;
    height: 4px;
    background-color:#97a0a9;
}

progress.mobile-ui-etapes-progress::-webkit-progress-value {
    background: #344DDB;
}

progress.mobile-ui-etapes-progress::-moz-progress-bar {
    background-color: #344DDB;
}

h1.etapes-title.desktop {
    display:inline-block;
}
div.desktop-ui-etapes.desktop {
    display:block;
}
div.mobile-ui-etapes.desktop {
    display:none;
}
.etapedesktope,
.etapemobile {
    cursor: pointer;
    padding: 3px 6px 3px 6px;
    width: 33px;
    -webkit-appearance: none;
}

.etapedesktope+p {
    display: inline-block;
    margin-bottom: 0;
    margin-left: 3px;
}
.etapemobile {
    display: none;
}
.etapemobile.desktop {
    display: inline;
}

/* etapes-nav */
div.etapes-nav {
    border-top: 3px solid #d9e7f3;
    justify-content: flex-end;
    padding: 15px;
    /* padding: 1em; */
}

div.etapes-nav ul {
    display: flex;
    margin: 0px;
    /* padding: 15px; */
    list-style-type: none;
    /* padding-bottom: 0; */
}

div.etapes-nav ul li {
    display: flex;
    flex: 1;
    margin-left: 0.5em;
}

div.etapes-nav ul li a[name="action"] {
    flex: 1;
}

div.etapes-nav ul li button {
    flex: 1;
}
div.etapes-nav button {
    width: auto;
}

.w-sm-100 {
    width: 100%;
}

/* actuellement, mis sur les boutons d’aide */
.non_affichage_mobile { 
    display:none;
}

.nav-item.bouton_quitter {
    border-top: 2px solid #d7dbDe;
    padding-top: 15px;
}

@media (min-width: 576px) {
    /* mobile-ui-etapes */
    div.mobile-ui-etapes {
        display: none;
    }
    .etapemobile.desktop {
        display: none;
    }
    /* desktop-ui-etapes */
    div.desktop-ui-etapes {
        display: block;
    }
    h1.etapes-title {
        display: block;
    }
    /* etapes-nav */
    div.etapes-nav ul {
        display: flex;
        justify-content: flex-end;
    }
    div.etapes-nav ul li {
        display: block;
        flex: none;
    }
    .container-fluid.volets .etape-form {
        height:calc(100vh - 196px);
        overflow-y: auto;
        overflow-x: hidden;
    }
    .min-height.etape-form {
        height:calc(100vh - 196px);
    }
    /* btn quit in burger menu */
    .w-sm-100 {
        width: auto;
    }
    .non_affichage_mobile { 
        display:inline;
    }
    .liste_un_choix_radio.radio_row ul {
        display: flex;
    }
    .nav-item.bouton_quitter {
        border-top: 0;
        padding-top: 0;
        border-left: 2px solid #d7dbDe;
        padding-left: 1.2rem;
        
    }
    .retour,
    .btn[data-bs-toggle="modal"],
    .btn[name="action"] {
        min-width: 200px;
    }
    /* .liste_plusieurs_choix_checkbox_box, */
    /* .liste_un_choix_radio_box { */
        /* max-height: 48px; */
        /* height: 48px; */
    /* } */
    /* bouton */
    .retour,
    .btn[data-bs-toggle="modal"],
    .btn[name="action"] {
        min-width: 158px;
        /* min-height: 48px */
    }
}



/* navbar-nav */

ul.navbar-nav li {
    /* margin: 0px; */
}

ul.navbar-nav li.btn {
    width: 100%;
}
ul.navbar-nav button.nav-link:hover,
ul.navbar-nav a:hover {
    background-color: #eaedfb;
    border-radius: 100px;
}

/* bouton */
.retour,
.btn[data-bs-toggle="modal"],
.btn[name="action"] {
    /* min-width: 158px; */
    min-height: 48px
}

/* 
typographie : 
Display : .display-1
H1 : <h1> ou .h1
H2 : <h2> ou .h2
H3 : <h3> ou .h3
H4 : <h4> ou .h4
H5 : <h5> ou .h5
text 14 : .fs-5
text 16 : .fs-4
text 18 : .fs-3
link 14 : <a>.fs-5
link 16 : <a>.fs-4
link 18 : <a>.fs-3

rajouter du semi-bold (700) pour les h1... et lien(<a>)
créer form-check.petit
modifier la classe <span class="text-secondary"> en mettant #707070



CTA primaire = button.btn.btn-primary
CTA secondaire = button.btn.btn-outline-primary
CTA tertiaire = button.btn.btn-link
Menu = ?
Lien = <a>
radio grand = div.form-check.grand.checkbox
                input.form-check-input
                label.form-check-label
radio petit = div.form-check 
                input.form-check-input
                label.form-check-label
selecteur de date = n’existe pas dans bootstrap, choisir un bootstrap datepicker
case à cocher grand = div.form-check.grand.radio
                input.form-check-input
                label.form-check-label
case à cocher petit = div.form-check 
                input.form-check-input
                label.form-check-label
carte domaien = card
menu déroulant = label.form-label
                 select.form-select
                    option
Bandeau d’information = Alerts
Déposer des documents = ? À faire

accessiblité
img : il faut aria-label ou alt ou title
img de décoration : alt="" ou aria-hidden="true" ou role="presentation"
img captcha
img porteuse d’information : longdesc ou lien, bouton adjacent pour afficher la description + autres règles
exemple :
<input class="textFormDate value-check-form" type="date" size="15" name="pos_saisine_adulte_suite_datenaissdeo" id="pos_saisine_adulte_suite_datenaissdeo" value="">
*/

/* aide et liste avec exemple */
.liste_un_choix_radio_box:hover label,
.liste_plusieurs_choix_checkbox_box:hover label {
    text-decoration: underline;
    cursor: pointer;
}
.liste_un_choix_radio.aide .numero_suivi {
    color:#344ddb;
}
.liste_plusieurs_choix_checkbox_box,
.liste_un_choix_radio_box {
    background-color: #E5F1FA;
    /* border-color: #97A0A9; */
}
fieldset.liste_plusieurs_choix.aide,
fieldset.liste_un_choix_radio.aide {
    margin-bottom : 35px;
}
.exemple_aide {
    padding: 7px;
    margin-top: 15px;
}
.liste_plusieurs_choix_checkbox_box.checked,
.liste_un_choix_radio_box.checked {
    background-color: #c7e7ff;
}
.iti {
    display: block;
}
ul.resume-demande {
    list-style-type: none;
}
ul.resume-demande li::before {
    content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
    color: red; /* Change the color */
    font-weight: bold; /* If you want it to be bold */
    display: inline-block; /* Needed to add space between the bullet and the text */
    width: 1em; /* Also needed for space (tweak if needed) */
    transform: scale(2);
}

ul.accessiblite-demande {
    list-style-type: none;
}
ul.accessiblite-demande>li::before {
    content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
    color: #1937FA; /* Change the color */
    font-weight: bold; /* If you want it to be bold */
    display: inline-block; /* Needed to add space between the bullet and the text */
    width: 1em; /* Also needed for space (tweak if needed) */
    transform: scale(2);
}
ul.accessiblite-demande ul>li {
    margin-left:4em;
}
.lanceur-alerte-highlight {
    color: orange;
}
.lanceur-alerte-highlight2 {
    color: blue;
}

div.recap_entry,
li.recap_entry {
    padding: 0.5rem;
}

div.recap_entry:hover,
li.recap_entry:hover {
    background-color: #EAEDFC;
}

div.recap_entry p,
li.recap_entry p {
    margin: 0px;
}


/* Sondage */
[data-help="ddd_sondage_niveau_scolaire7"],
[data-help="ddd_sondage_emploi5"],
[data-help="ddd_sondage_emploi6"],
[data-help="ddd_sondage_emploi7"],
[data-help="ddd_sondage_categorie_socio_professionnelle7"],
[data-help="ddd_sondage_categorie_socio_professionnelle8"],
[data-help="ddd_sondage_menage_financierement1"],
[data-help="ddd_sondage_menage_financierement2"],
[data-help="ddd_sondage_menage_financierement3"],
[data-help="ddd_sondage_menage_financierement4"],
[data-help="ddd_sondage_menage_financierement5"],
[data-help="ddd_sondage_menage_financierement6"] {
    visibility: hidden;
}

@keyframes fadeCheckmark {
  from { opacity: 0; }
  to { opacity: 1; }
}

div.checkmark_success {
    animation: fadeCheckmark 3s;
}

div.checkmark_success .checkmark_circle_3 {
    position: relative;
    background-color: rgb(100 230 154 / 45%);
    width: 12rem;
    height: 12rem;
    border-radius: 6rem;
    z-index: 1;
}

div.checkmark_success .checkmark_circle_2 {
    position: relative;
    background-color: rgb(100 230 154 / 70%);;
    width: 10rem;
    height: 10rem;
    border-radius: 5rem;
    transform: translate(1rem, 1rem);
    z-index: 2;
}
div.checkmark_success .checkmark_circle_1 {
    position: relative;
    background-color: #03be58;
    width: 8rem;
    height: 8rem;
    border-radius: 4rem;
    transform: translate(1rem, 1rem);
    z-index: 3;
}

div.checkmark_success .checkmark {
    border-radius: 0.5rem;
    border: 0px;
    border-left: 0.5rem solid white;
    border-bottom: 0.5rem solid white;
    height: 3rem;
    width: 4rem;
    transform: translate(2rem, 2rem) rotate(-45deg);
}

a#cookies-eu-banner-status {
    cursor: pointer;
}

div.suivi-statut-demande {
    background-color: #1E274A;
    border-radius: 5px;
    color: white;
    display: flex;
    padding: 14px;
    display: flex;
    flex-direction: column;
}

div.suivi-demande-encadre {
    border: 1px solid #97A0A9;
    border-radius: 5px;
    padding: 14px;
}

ol.historique {
    list-style-type: none;
    background-color: #EAEDFC;
    padding: 14px;
}

li.historique-evt {
    margin-left:0;
    padding-left: 1rem;
    display: flex;
    align-items: center;
}

li.historique-evt div.bullet {
    display: inline-block;
    background-color: white;
    border-radius: 0.75em;
    border: 1px solid black;
    height: 1.5em;
    width: 1.5em;
    margin-right: 0.5em;
}

li.historique-evt div.bullet div.checkmark {
    border-left: 3px solid white;
    border-bottom: 3px solid white;
    height: 0.5em;
    width: 0.8em;
    transform: rotate(-45deg);
    margin-top: 0.4em;
    margin-left: 0.4em;
}

li.historique-evt.active div.bullet,
li.historique-evt.completed div.bullet {
    background-color: #1937FA;
}

li.historique-evt.active {
    font-weight: bold;
}

li.historique-evt a.historique-evt-link {
    text-decoration: none;
    cursor: pointer;
}

.historique-evt-edge {
    margin-left: 1.5rem;
    border-left: 6px solid white;
    min-height: 1em;
}

.historique-evt-edge.active {
    border-left: 6px solid #1937FA;
}

div.historique-evt-edge {
    margin-left: 0.4rem;
    margin-top: 0.5rem;
}

li.historique-evt-edge span.historique-evt-edge-text {
    margin-left: 2rem;
}

li.historique-evt span.historique-evt-link {
    margin-left: 1rem;
}

#accordionFermerDossier h2 button {
    font-weight: 600;
    line-height: 1.2;
}

a.evitement {
   display: inline-block;
   color: #555;
   background: #fff;
   padding: .5em;
   position: absolute;
   left: -99999rem;
   z-index: 100;
}
a.evitement:focus {
   left: 0;
}
.modal-header {
    flex-direction: row-reverse;
}
.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag,
.iti--separate-dial-code .iti__selected-flag,
.iti__country.iti__highlight,
.iti__country.iti__highlight .iti__dial-code {
    background-color: #767676;
    color: #fff;
}
.fs-7 {
    font-size: 0.9rem;
}
.fs-8 {
    font-size: 0.8rem;
}

.iti__dial-code {
    color: #666;
}