/*------------------------------*\
    #POPIN/POPUP bootstrap
/*------------------------------*/
#loginPopup {
    /* correctif position en mobile */
    padding-right: 0!important;
}
.modal-open .modal,
.modal {
    background: rgba(0, 41, 72, .8);
}

/* modal bootstrap large -> utilisé pour voir société uniquement */
.modal .modal-dialog.modal-lg .close {
    top:-44px;
}

@media(min-width: 768.98px) {
    .modal-dialog__large {
        width: 60%;
        max-width: 60%;
    }
}

@media(max-width: 768px) {
  .modal-dialog {
    min-height: calc(100vh - 20px);
  }
}
.modal-content {
    /**--- Skew transform ---**/
    border-radius: 20px;
}
/* corrige l'effet skew pour les enfants */
.modal-content  > .modal-body {
    padding: 50px;
}

.modal-content .close {
    position: absolute;
    top: -28px;
    right: 0;
    background: var(--white);
    color: var(--main-color_esn-forfait);
    font-size: calc(4 * var(--basePX));
    line-height: 40px;
    font-weight: 100;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
}
.modal-content .close:hover {
    color: var(--main-color_profil);
    opacity: 1!important;
}

/*------------------------------*\
    #POPIN/POPUP bootstrap cookie
/*------------------------------*/
#cookiePopup .modal,
#cookiePopup.modal,
#cookiePopupParams .modal,
#cookiePopupParams.modal,
#cookiePopupParamsPlusPlus .modal,
#cookiePopupParamsPlusPlus.modal {
    background: transparent;
}
.modal-dialog.modal-dialog-bottomed {
    min-width: 80%;
    align-items: end!important;
}
#cookiePopupParamsPlusPlus {
    padding-right: 0!important;
}
@media(min-width: 768.98px) {
    #cookiePopupParamsPlusPlus .modal-dialog {
        min-width: 100%;
    }
}
/*-------- pas de skew ---------*/
.modal-content.cookies,
.modal-content.cookies > .modal-body {
    transform: initial;
}
.modal-content.cookies {
    border-radius: 20px;
    box-shadow: 5px 5px 5px var(--main-color_paragraphe);
}

.modal-title,
.modal-angular-title {
    color: var(--main-color_esn-forfait);
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
}

.modal-subtitle,
.modal-angular-subtitle {
    font-size: calc(2 * var(--basePX));
    color: var(--draggable-bleu-ciel);
    font-family: "Poppins", sans-serif;
    background: var(--white);
    padding-top: .5rem;
    padding-bottom: .5rem;
    margin-right: 0!important; /* compense le scroll horizontal lors de la position sticky */
}
.modal-subtitle.engagements {
    font-size: calc(var(--basePX) + 7px);
    /* charte */
    /* un effet de sticky proposé par mes soins */
    padding: .5rem!important;
    border: 2px solid var(--main-color_paragraphe);
    text-align: center;
}
.modal-subtitle.titleEngagements {
    top: 40px;
}
.modal-paragraph {
    font-size: calc(var(--basePX) + 4px);
    color: var(--main-color_paragraphe);
    font-family: "Poppins", sans-serif;
    text-align: justify;
}

.modal-paragraph ol {
    font-size: calc(var(--basePX) + 3px);
    margin-top:.5rem;
}

.modal-content .form-control {
    border: transparent;
    font-size: calc(var(--basePX) + 4px);
    border-radius: 0;
}
.modal-content label {
    font-size: calc(var(--basePX) + 2px);
    font-family: "Poppins", sans-serif;
}

.modal-content .pwd-miss a {
    color: var(--main-color_paragraphe);
    font-size: calc(var(--basePX) + 2px);
}

/*------------------------------*\
    #POPIN/POPUP angular
/*------------------------------*/
md-backdrop.md-opaque {
    background: rgba(0, 41, 72, .8);
    opacity: 1;
}
body.md-dialog-is-showing {
    top: 0!important;
}
body.md-dialog-is-showing .md-dialog-container {
    overflow-x: hidden;
    overflow-y: auto;
}

.md-dialog-container {
    top: -90px !important;
    height: 100% !important;
}
md-dialog {
    max-height: 92vh;
}
md-dialog md-dialog-content {
    max-height: calc(92vh - 140px);
    overflow-y: auto;
}

.wrapper-scrollbar-modal {
    height: 250px;
    overflow-x: hidden;
}

.wrapper-scrollbar-modal__profil {
    height: 500px;
    overflow-x: hidden;
}

md-dialog.fake--bootstrap-modal {
    position: relative;
    overflow: initial;
    background-color:initial;
    box-shadow: none;
}

@media (width: 576px) {
    md-dialog.fake--bootstrap-modal {
        width: 80%;
    }
    md-dialog.fake--bootstrap-modal.fake--bootstrap-modal__mini,
    md-dialog.fake--bootstrap-modal.fake--bootstrap-modal__medium {
        max-width: 550px;
    }

    .fake--bootstrap-modal .modal-content .close {
        top: 0;
    }
}
@media (width: 768px) {
    md-dialog.fake--bootstrap-modal {
        width: 80%;
    }
    md-dialog.fake--bootstrap-modal.fake--bootstrap-modal__mini {
        max-width: 550px;
    }
    md-dialog.fake--bootstrap-modal.fake--bootstrap-modal__medium,
    .fake--bootstrap-modal.fake--bootstrap-modal__medium .modal-dialog {
        max-width: 700px;
    }

    .fake--bootstrap-modal .modal-content .close {
        top: 0;
    }
}

@media (width: 834px) {
    md-dialog.fake--bootstrap-modal {
        width: 80%;
    }
    md-dialog.fake--bootstrap-modal.fake--bootstrap-modal__mini {
        max-width: 550px;
    }
    md-dialog.fake--bootstrap-modal.fake--bootstrap-modal__medium,
    .fake--bootstrap-modal.fake--bootstrap-modal__medium .modal-dialog {
        max-width: 700px;
    }

}
@media (width: 992px) {
    md-dialog.fake--bootstrap-modal {
        width: 80%;
    }
    md-dialog.fake--bootstrap-modal.fake--bootstrap-modal__mini {
        max-width: 550px;
    }
    md-dialog.fake--bootstrap-modal.fake--bootstrap-modal__medium,
    .fake--bootstrap-modal.fake--bootstrap-modal__medium .modal-dialog {
        max-width: 700px;
    }

    .fake--bootstrap-modal .modal-content .close {
        top: 0;
    }
}
@media (width: 1024px) {
    md-dialog.fake--bootstrap-modal {
        width: 80%;
    }
    md-dialog.fake--bootstrap-modal.fake--bootstrap-modal__mini {
        max-width: 550px;
    }
    md-dialog.fake--bootstrap-modal.fake--bootstrap-modal__medium,
    .fake--bootstrap-modal.fake--bootstrap-modal__medium .modal-dialog {
        max-width: 700px;
    }

    /* .fake--bootstrap-modal .modal-content .close {
        top: 0;
    } */
}
@media (min-width: 1200px) { 
    /* il faut avoir une modal taille fixe car le btn close ne suis pas le skew, sauf entre les breakpoint, car à chaque px, il faudrait mettre un style */
    md-dialog.fake--bootstrap-modal {
        max-width: initial;
        width: 1100px;
    }
    .fake--bootstrap-modal .modal-content .close {
        top: 5px;
        border-radius: 50%;
        right: 5px;
    }
    .not__angular.fake--bootstrap-modal .modal-content .close {
        top: 5px;
        border-radius: 50%;
        right: 5px;
    }

    md-dialog.fake--bootstrap-modal.fake--bootstrap-modal__mini {
        width: 550px;
    }
    md-dialog.fake--bootstrap-modal.fake--bootstrap-modal__medium,
    .fake--bootstrap-modal.fake--bootstrap-modal__medium .modal-dialog {
        max-width: 700px;
    }
    md-dialog.fake--bootstrap-modal.fake--bootstrap-modal__mini .close{
        top: 5px;
        right: 10px;
    }
}
/* reset skew modal pour responsive */
@media (max-width: 959.98px) {
    .fake--bootstrap-modal .modal-content,
    .fake--bootstrap-modal .modal-content > *,
    .modal-content .close,
    .modal-content .close > div,
    .not__angular.fake--bootstrap-modal.fake--bootstrap-modal__mini,
    .not__angular.fake--bootstrap-modal.fake--bootstrap-modal__medium {
        transform: initial;
    }

    .modal-content .close {
        top: 6px;
        right: 6px;
    }
    
}

@media (min-width: 959.98px) and (max-width: 1199.98px) {
    .modal-content .close {
        top: 6px;
        right: 6px;
    }
    
}

.fake--bootstrap-modal .modal-body {
    position: initial;
}

.md--modal-content {
    /**--- Skew transform ---**/
    border-radius: 0;
}

.md--modal-content .modal-content {
    border: 0;
}
/* corrige l'effet skew pour les enfants */
.md--modal-content > .md--modal-body {
    padding: 50px;
}

.md--modal-content .modal-content .close {
    top: 0;
    right: 0;
}

.fake--bootstrap-modal .md-dialog-content {
    padding: 0;
}

.md-dialog-container .md-toolbar:not(.md-menu-toolbar) {
    background: var(--white);
}

.fake--bootstrap-modal .md-button:not([disabled]) {
    border: 1px solid transparent;
}
.fake--bootstrap-modal .md-button:not([disabled]):hover {
    background: var(--white);
    color: var(--main-color_paragraphe);
    border: 1px solid var(--main-color_paragraphe);
}

.fake--bootstrap-modal .color--black {
    color: var(--background_menu-gauche)!important;
}
.fake--bootstrap-modal .color--black .custom-control-label {
    color: var(--black)!important;
}


#newSubscribePopup .modal-body {
    text-align: center;
    font-family: "Poppins", sans-serif;
    line-height: 1.2;
    letter-spacing: 0px;
}
 
/* ── Icône cadenas ── */
#newSubscribePopup .ab-icon {
    position: relative;
    width: 112px;
    height: 48px;
    margin: 0 auto 16px;
}
#newSubscribePopup .ab-icon__lock {
    width: 20px;
    height: 20px;
    stroke: #fff;
    fill: none;
}
#newSubscribePopup .ab-icon__badge {
    position: absolute;
    top: -6px;
    right: -2px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--main-color_esn-forfait);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}
#newSubscribePopup .ab-icon__badge svg {
    width: 12px;
    height: 12px;
    fill: #fff;
}

/* ── Titres ── */
#newSubscribePopup .ab-eyebrow {
    font-size: 1rem;
    font-weight: 700;
    color: #65C9F6;
    letter-spacing: 0.5px;
    margin: 0 0 8px;
}
#newSubscribePopup .ab-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--black);
    margin: 0 0 12px;
}
#newSubscribePopup .ab-subtitle {
    font-size: 0.82rem;
    color: var(--black);
    line-height: 1.55;
    margin: 0 0 22px;
}

/* ── Liste des avantages ── */
#newSubscribePopup .ab-features {
    list-style: none;
    margin: 0 0 10px;
    padding: 6px 18px;
    border: 1px solid #e8eef4;
    box-shadow: 0px 3px 6px #0000001A;
    border-radius: 12px;
    text-align: left;
}
#newSubscribePopup .ab-features li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 4px;
    border-bottom: 1px solid #e8eef4;
    font-size: 0.85rem;
    color: var(--black);
}
#newSubscribePopup .ab-features li:last-child { border-bottom: none; }

#newSubscribePopup .ab-features__check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #65C9F6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
#newSubscribePopup .ab-features__check svg {
    width: 11px;
    height: 11px;
    stroke: #fff;
    fill: none;
}
/* ── CTA ── */
#newSubscribePopup .ab-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    background: #65C9F6;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 16px 24px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}
#newSubscribePopup .ab-cta:hover { 
    background: var(--white); 
    color: var(--main-color_esn-forfait); 
    text-decoration: none; 
    border: 1px solid var(--main-color_esn-forfait); 
}

#newSubscribePopup .ab-cta svg {
    width: 32px;
    height: 24px;
    
}

#newSubscribePopup .ab-footnote {
    font-size: 0.78rem;
    color: var(--black);
    margin: 10px 0 0;
}

#newSubscribePopup .ab-subtext {
    font-size: calc(var(--basePX) + 3px);
    color: var(--black);
    font-style: italic;
    margin-bottom: 10px;
    color: #6b7280;
}

#newSubscribePopup .ab-btn-register {
    display: flex;
    align-items: center;       /* centrage vertical */
    justify-content: center;   /* centrage horizontal */
    width: 100%;
    margin-bottom: 16px;
    background: var(--white);
    color: var(--main-color_esn-forfait);
    border: 2px solid var(--main-color_esn-forfait);
    border-radius: 30px;
    padding: 10px;
    font-size: calc(1* var(--basePX) + 5px);
    line-height: 1.2;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
    height: 56px;
}
#newSubscribePopup .ab-btn-register:hover { 
    background: var(--main-color_esn-forfait); 
    color: #fff; 
    text-decoration: none; 
}

#newSubscribePopup .ab-text {
    font-size: calc(var(--basePX) + 4px);
    color: var(--black);
    margin-bottom: 14px;
}

#newSubscribePopup .ab-btn-connect {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    font-weight: bold;
    background: #fff;
    color: var(--black);
    border: 1px solid var(--black);
    border-radius: 30px;
    padding: 10px;
    font-size: calc(1* var(--basePX) + 5px);
    line-height: 1.2;
    cursor: pointer;
    margin-bottom: 10px;
    text-decoration: none;
    transition: background 0.2s;
}
#newSubscribePopup .ab-btn-connect:hover { 
    background: #f0f0f0; 
    color: var(--black); 
    text-decoration: none; 
    border: 1px solid var(--black);
}

#newSubscribePopup .ab-footnote a {
    font-weight: bold;
    color: var(--main-color_esn-forfait);
    text-decoration: none;
}

#newSubscribePopup .ab-signup__separator {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #8a8f9c;
    font-size: 0.82rem;
    margin: 0 0 0.5rem;
}

#newSubscribePopup .ab-signup__separator::before,
#newSubscribePopup .ab-signup__separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #dfe3ea;
}

@media (min-width: 576px) {
    #newSubscribePopup .modal-dialog {
        max-width: 550px;
    }
}