@charset "UTF-8";
/* ======================================================================== */
/* VARIABLES DE BREAKPOINTS (SCSS)                                          */
/* Note: Les variables CSS pures (ex. :root { --bp-lg: 992px; }) ne         */
/* fonctionnent pas dans les media queries classiques. Ici on utilise donc   */
/* des variables SCSS pour que @media puisse les interpréter correctement.   */
/* ======================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;500;600;700;900&family=Roboto:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800&family=Roboto:wght@100;300;400;500;700;900&display=swap");
:root {
  /* Neutral */
  --blanc: #ffffff;
  --neutral50: #fafafa;
  --neutral100: #f5f5f5;
  --neutral200: #eeeeee;
  --neutral300: #e0e0e0;
  --neutral400: #bdbdbd;
  --neutral500: #9e9e9e;
  --neutral600: #757575;
  --neutral700: #616161;
  --neutral800: #424242;
  --neutral900: #272727;
  /* PDF */
  --pdfBlack: rgba(0, 0, 0, 0.8);
  --pdfMedium: #333639;
  --pdfGrey: #717375;
  /* COLORS */
  --green: #488f81;
  --greenBg: #d2f3ee;
  --pink: #ff6c6c;
  --pinkBg: #ffe9eb;
  --orange: #e39d17;
  --orangeBg: #fff6ed;
  --saumonDisabled: #ffa9a9;
  --saumonHover: #e66060;
  --erreur: #960808;
  --orangeDisabled: #e6b766;
  --orangeHover: #d49115;
  --rouge: rgba(150, 8, 8, 1);
  /* MAQUETTES */
  --jaune: #ffffeb;
  --violet: #7b61ff;
  --turquoise: #26cce2;
  --nuit: #201c59;
  --overlay: rgba(0, 0, 0, 0.5);
}

/* ============================================================= */
/* =                           NEW                         = */
/* ============================================================= */
#divorceo-logo-page {
  display: block;
  width: 193px;
  max-width: 100%;
  margin: 0 auto 48px;
}
@media screen and (min-width: 992px) {
  #divorceo-logo-page {
    margin: 0 auto 96px 0;
  }
}

@media screen and (min-width: 992px) {
  .row-login {
    display: flex;
  }
  .row-login > * {
    width: 50%;
  }
  .row-login .column_image {
    position: relative;
  }
  .row-login .column_image img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: top center;
  }
}

@media screen and (max-width: 992px) {
  .column_image {
    display: none !important;
  }
}
.column_image.second_column_paiement {
  position: relative;
  background: url("../images/photos/v2/fond_connexion.jpg") center/cover no-repeat;
}
.column_image.second_column_paiement::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
}
.column_image.second_column_paiement img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  max-width: 80%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.container-login {
  padding: 0 clamp(24px, 8.6vw, 100vw);
}

.bloc-infos-login .bloc-infos-login--wrapper > *:not(:last-child) {
  margin-bottom: 48px;
}

.form-login-page > *:not(:last-child):not(.connect--wrapper) {
  margin-bottom: 24px;
}

.connect--wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
}
@media screen and (max-width: 992px) {
  .connect--wrapper {
    flex-wrap: wrap;
    gap: 16px;
  }
  .connect--wrapper .btn {
    width: 100%;
  }
  .connect--wrapper > * {
    width: 100%;
  }
}

.trustpilot--wrapper .trustpilot--rate {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}
@media screen and (min-width: 768px) {
  .trustpilot--wrapper .trustpilot--rate {
    flex-direction: row;
  }
}
@media screen and (max-width: 576px) {
  .trustpilot--wrapper .trustpilot--rate {
    align-items: flex-start;
  }
}
.trustpilot--wrapper .trustpilot--rate img {
  display: block;
  height: 24px;
  width: auto;
}
.trustpilot--wrapper > p {
  font-size: 13px;
}

.inexisting-account-mail-icon {
  display: block;
  width: 48px;
  height: auto;
}

.txt-compte-verrouille a {
  color: inherit !important;
  text-decoration: underline;
}

/* ============================================================= */
/* =           1. LOGIN / FORGOT PASSWORD / CONFIRMATION        = */
/* ============================================================= */
.column_contenu {
  min-height: 100vh;
  padding: 96px 0;
  display: flex;
  align-items: center;
  border: 1px solid var(--neutral300);
}
@media screen and (min-width: 992px) {
  .column_contenu {
    padding: 30px 0;
  }
}

/* ============================================================= */
/* =                 2. TEXTE COMPTE VERROUILLE                = */
/* ============================================================= */
.txt-compte-verrouille {
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.01em;
  text-align: left;
  color: var(--pink);
}
.txt-compte-verrouille a {
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.01em;
  text-align: left;
  color: var(--pink);
}

/* ============================================================= */
/* =              4. SHOW DOSSIER NUMBER & BLOC INFO            = */
/* ============================================================= */
.bloc_info_mdp_confidentiel {
  display: flex;
  padding: 16px;
  background: var(--neutral100);
  align-items: center;
  border-radius: 4px;
  margin-top: 24px;
  margin-bottom: 24px;
}
.bloc_info_mdp_confidentiel .bloc_icone_mdp_confidentiel {
  margin-right: 16px;
}
.bloc_info_mdp_confidentiel .bloc_texte_info_mdp_confidentiel p {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 18px;
  color: var(--neutral900);
}

/* ============================================================= */
/* =      5. AUTOFILL & STYLISATION (INPUTS, PLACEHOLDERS)      = */
/* ============================================================= */
/* Très petits écrans (Téléphone en portrait, largeur < 576px) */
input:-internal-autofill-selected {
  background-color: #f8f8f8 !important;
  background-image: none !important;
  color: #4a4a4a !important;
}

/* Stylisation de l'autocomplete du navigateur */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #fff inset !important;
}

input:-webkit-autofill {
  -webkit-text-fill-color: #4a4a4a !important;
}

/* Focus sur les inputs */
textarea:focus,
input[type=text]:focus,
input[type=password]:focus,
input[type=datetime]:focus,
input[type=datetime-local]:focus,
input[type=date]:focus,
input[type=month]:focus,
input[type=time]:focus,
input[type=week]:focus,
input[type=number]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=color]:focus,
.uneditable-input:focus {
  border-color: rgba(39, 39, 39, 0.8);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(39, 39, 39, 0.6);
  outline: 0 none;
}

/* ============================================================= */
/* =          6. FOND LOGIN / REGISTER / CONFIRMEMAIL           = */
/* ============================================================= */
.fond-login {
  width: 100%;
}

.fond-register {
  width: 100%;
  /* height: 665px; */
  border-radius: 6px;
  /* background-color: #fff; */
  /* Media query => Sur tablettes (md) ou plus grands */
}
@media (min-width: 992px) {
  .fond-register {
    border-radius: 6px;
    /* width: 520px; */
    /* height: 665px; */
  }
}

.fond-confirmEmail {
  display: flex;
  justify-content: center;
  align-items: baseline;
  /* Large écrans */
}
@media (min-width: 992px) {
  .fond-confirmEmail {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

/* ============================================================= */
/* =               7. LOGO SMARTPHONE + FIRST ROW               = */
/* ============================================================= */
.logo-smartphone {
  padding-top: 30px;
}

.first-row {
  padding-top: 0;
  height: auto;
  /* Sur tablettes (md) */
  /*
  @media (min-width: $bp-lg) {
    padding-top: 72px;
    height: 100%;
  }
  */
}

/* ============================================================= */
/* =                8. TITRES & SOUS-TITRES LOGIN               = */
/* ============================================================= */
.login-title {
  font-family: "Montserrat", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.25em;
  letter-spacing: 0.01em;
  text-align: left;
  color: var(--neutral900);
}

.login-subtitle-creation {
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  color: #252253;
  margin-top: 18px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  /* Sur tablettes (md) */
}
@media (min-width: 992px) {
  .login-subtitle-creation {
    font-size: 16px;
  }
}

.login-subtitle-simple {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #8e8e99;
  text-decoration: none;
  margin-top: 18px;
}

/* ============================================================= */
/* =          9. BOUTONS VALIDER FORGOTTEN / NEW PASSWORD        = */
/* ============================================================= */
.valide-forgotten-password,
.valide-new-password {
  border-radius: 4px;
  background: var(--neutral900);
  color: var(--blanc);
  height: 42px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 18px;
  padding: 0 24px;
}

/* ============================================================= */
/* =         10. SOUS-TITRE INSCRIPTION TERMINEE + FORM         = */
/* ============================================================= */
.inscription-terminee-subtitle {
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0em;
  text-align: left;
  color: #272727;
  margin-bottom: 21px;
}

/* ============================================================= */
/* =                    11. LABELS DE FORM                      = */
/* ============================================================= */
label:not(.btn) {
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
  text-align: left;
  color: var(--neutral600);
  /* Sur tablettes (md) (exemples) */
}
@media (min-width: 992px) {
  label:not(.btn) {
    font-size: 15px;
  }
}

/* ============================================================= */
/* =                   12. REGISTER NEW COMPTE                   = */
/* ============================================================= */
.registerNewCompte {
  opacity: 1;
}
.registerNewCompte:disabled {
  opacity: 0.5;
}
.registerNewCompte:hover:enabled {
  background-color: #02787d;
}

/* ============================================================= */
/* =                  13. INPUT DIVORCEO STYLE                   = */
/* ============================================================= */
/* ============================================================= */
/* =       14. MESSAGES DE VALIDATION EMAIL / PASSWORD           = */
/* ============================================================= */
.validation-email,
.validation-password {
  display: none;
  font-family: EBGaramond;
  font-size: 14px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 0.79;
  letter-spacing: normal;
  padding-left: 15px;
}

/* ============================================================= */
/* =           15. CLASSES DE MARGE (mt / mb UTILES)            = */
/* ============================================================= */
.mt-21 {
  margin-top: 21px;
}

.mt-30 {
  margin-top: 30px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mt-50 {
  margin-top: 50px;
}

.mt-54 {
  margin-top: 54px;
}

/* ============================================================= */
/* =                    16. BOUTON #valideRegistre               = */
/* ============================================================= */
#valideRegistre,
#valideRegistre[disabled],
#valideRegistre[disabled]:hover {
  width: 100%;
  height: 40px;
  object-fit: contain;
  background-color: #fabe91;
  border-radius: 20px;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 0.79;
  letter-spacing: normal;
  color: #fff;
  border: 1px solid #fabe91;
  /* Sur tablettes (md) => ex. width 288px */
}
#valideRegistre:hover, #valideRegistre:focus,
#valideRegistre[disabled]:hover,
#valideRegistre[disabled]:focus,
#valideRegistre[disabled]:hover:hover,
#valideRegistre[disabled]:hover:focus {
  background-color: #02787d;
  border: 1px solid #02787d;
  color: #fff;
}
@media (min-width: 992px) {
  #valideRegistre,
  #valideRegistre[disabled],
  #valideRegistre[disabled]:hover {
    width: 288px;
  }
}

/* ============================================================= */
/* =          17. DANS LE MODAL JoinDossier + CANCEL BTN         = */
/* ============================================================= */
#modalJoinDossier #valideRegistre,
#modalJoinDossier #valideRegistre[disabled],
#modalJoinDossier #valideRegistre[disabled]:hover {
  width: 100%;
  height: 40px;
  object-fit: contain;
  background-color: #252253;
  border-radius: 20px;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 0.79;
  color: #fff;
  border: 1px solid #252253;
}
#modalJoinDossier #valideRegistre:hover, #modalJoinDossier #valideRegistre:focus,
#modalJoinDossier #valideRegistre[disabled]:hover,
#modalJoinDossier #valideRegistre[disabled]:focus,
#modalJoinDossier #valideRegistre[disabled]:hover:hover,
#modalJoinDossier #valideRegistre[disabled]:hover:focus {
  background-color: #02787d;
  border: 1px solid #02787d;
  color: #fff;
}
@media (min-width: 992px) {
  #modalJoinDossier #valideRegistre,
  #modalJoinDossier #valideRegistre[disabled],
  #modalJoinDossier #valideRegistre[disabled]:hover {
    width: 288px;
  }
}
#modalJoinDossier .cancel-modal-btn {
  max-width: 288px;
  width: 100%;
  height: 40px;
  object-fit: contain;
  background-color: #fff;
  border-radius: 20px;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 0.79;
  letter-spacing: normal;
  color: #252253;
  border: 1px solid #252253;
}

/* ============================================================= */
/* =                18. BTN CANCEL (HORS MODAL)                 = */
/* ============================================================= */
.cancel-modal-btn {
  max-width: 288px;
  width: 100%;
  height: 40px;
  object-fit: contain;
  background-color: #252253;
  border-radius: 20px;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 0.79;
  letter-spacing: normal;
  color: #fff;
  border: 1px solid #252253;
}
.cancel-modal-btn:hover, .cancel-modal-btn:focus {
  background-color: #02787d;
  border: 1px solid #02787d;
  color: #fff;
}

/* ============================================================= */
/* =             19. MESSAGES ERREUR CONNEXION (#ID)            = */
/* ============================================================= */
#connexionErrorMsg {
  color: #960808 !important;
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.01em;
  text-align: left;
}
#connexionErrorMsg ul {
  list-style: none;
  padding: 0;
}
#connexionErrorMsg ul li {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================= */
/* =      20. MDP OUBLIE + LIEN PAS_INSCRIT / INSCRIT           = */
/* ============================================================= */
/* ============================================================= */
/* =           21. BOUTONS CONNEXION / INSCRIPTION DIVORCEO      = */
/* ============================================================= */
/* ============================================================= */
/* =                    22. LOGIN EXTERNES                      = */
/* ============================================================= */
.container-external-login {
  border-top: 1px solid var(--neutral300);
  padding-top: 24px;
}

/* ============================================================= */
/* =                          RGPD / AUTRE                      = */
/* ============================================================= */
/* ============================================================= */
/* =       23. INFOS REGISTER MOBILE / SHOW INFOS REGISTER       = */
/* ============================================================= */
#show_infos_register_mobile {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  position: sticky;
  bottom: 0;
}

#close_this {
  cursor: pointer;
}

#infos_register_mobile {
  background: #e7f4f5;
  display: block;
  min-height: 900px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

/* ============================================================= */
/* =                       GRECAPTCHA BADGE                     = */
/* ============================================================= */
/* ============================================================= */
/* =                   24. PAGE INSCRIPTION                     = */
/* ============================================================= */
.fond-register .login-subtitle {
  font-family: "Montserrat", sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0.01em;
  text-align: left;
  color: var(--neutral900);
  margin-bottom: unset;
}
.fond-register .confirmemail-text {
  color: #272727;
  font-family: "Roboto";
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.01em;
  text-align: left;
}
.fond-register .confirmemail-text a {
  color: var(--green);
  font-family: "Roboto";
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.01em;
  text-align: left;
}
.fond-register .acceptation_cgvu .libelle-reponse {
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.01em;
  text-align: left;
  color: #272727;
}
.fond-register .acceptation_cgvu .libelle-reponse a {
  color: var(--green);
}

.bloc_formulaire_inscription {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ligne_form_inscription {
  display: flex;
  gap: 24px;
}

.ligne_form_inscription div:not([class*=iti__]) {
  flex: 1;
}

@media screen and (max-width: 576px) {
  .ligne_form_inscription {
    flex-direction: column;
    justify-content: space-between;
  }
}
.ligne_compte {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ligne_compte.existant {
  background-color: var(--neutral100);
  border-radius: 4px;
  padding: 16px;
}

/* ============================================================= */
/* =    25. SWITCH NOUVEAU DOSSIER / REJOINDRE DOSSIER (INSCR)   = */
/* ============================================================= */
.choix-inscription {
  list-style-type: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 0;
}
.choix-inscription li {
  width: 50%;
  position: relative;
  color: var(--neutral900);
}
.choix-inscription li label.btn {
  width: 100% !important;
}
.choix-inscription li:first-of-type .btn {
  border-radius: 4px 0px 0px 4px;
}
.choix-inscription li:last-of-type .btn {
  border-radius: 0px 4px 4px 0px;
}
.choix-inscription li input[type=radio] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  opacity: 0;
}
.choix-inscription li input[type=radio]:checked + label {
  background: var(--neutral900);
  color: var(--blanc);
}
.choix-inscription li label {
  margin-bottom: unset;
  width: 100%;
  background: var(--neutral300);
}

/* ============================================================= */
/* =   26. COLUMNS + TITRES + CHECKBOXES PREREQUIS (DIVERS)      = */
/* ============================================================= */
.label-column {
  width: 203px !important;
  max-width: 203px !important;
  border-top: 1px solid transparent !important;
  text-align: left !important;
  height: 80px !important;
  padding: 0 10px !important;
  vertical-align: middle !important;
}
.label-column label {
  font-family: "Roboto", sans-serif !important;
  font-size: 16px !important;
  font-weight: normal !important;
  font-style: italic !important;
  line-height: normal !important;
  color: #8e8e99 !important;
}

.switch-column {
  border-top: 1px solid transparent !important;
  vertical-align: middle !important;
}

.checkboxes-prerequis-inscr {
  width: 100%;
  /* Sur grands écrans */
}
@media (min-width: 992px) {
  .checkboxes-prerequis-inscr {
    width: 69%;
  }
}

.login-info-title {
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  font-weight: bold;
  font-style: italic;
  line-height: normal;
  text-align: center;
  color: #252253;
}

.first-row-colonne-droite {
  padding-top: 0px !important;
}
@media (min-width: 992px) {
  .first-row-colonne-droite {
    padding-top: 72px !important;
  }
}
.first-row-colonne-droite p {
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.01em;
  text-align: left;
  color: #272727;
}
.first-row-colonne-droite h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.01em;
  text-align: left;
  color: #272727;
}

/* ============================================================= */
/* =                   27. IMAGES ILLUSTRATIONS                  = */
/* ============================================================= */
.illustr-confirmEmail {
  width: 100%;
}
@media (min-width: 992px) {
  .illustr-confirmEmail {
    width: 453.6px;
  }
}

@media (min-width: 992px) {
  .illustr-okConfirmEmail {
    width: 467px !important;
  }
}

.img-validation-email {
  width: 120px;
}
@media (min-width: 992px) {
  .img-validation-email {
    width: 180px;
  }
}

/* ============================================================= */
/* =        28. COLONNE GAUCHE LOGIN (SUR LARGE ÉCRAN)          = */
/* ============================================================= */
@media (min-width: 992px) {
  .colonne-gauche-login {
    border: 1px solid #252253;
    border-radius: 5px;
    padding-top: 40px;
    margin-bottom: 50px;
  }
}

/* Fin du fichier SCSS, toutes les media queries sont placées
   au plus près des blocs/classes concernés. */

/*# sourceMappingURL=loginlogout.css.map */