.custom-notifications small:nth-of-type(2) {
    display: none;
}

@media (min-width: 1200px) {
    .custom-notifications small:nth-of-type(2) {
        display: none;
    }

    .custom-notifications p:nth-of-type(2) {
        width: 50%;
    }

    .custom-notifications p {
        margin-top: 0;
    }
}

.h4 {
    font-weight: 800;
    font-size: 2rem;
    line-height: 2.62rem;
    color: var(--main-color);
}

.sr-only-focusable:not(:focus):not(:focus-within):not(caption), .sr-only:not(caption) {
    position: absolute !important;
}

.sr-only, .sr-only-focusable:not(:focus):not(:focus-within) {
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.warning {
    justify-content: center;
}

.info {
    justify-content: center;
    display: inline-flex;
}

.subprice {
    color: orangered;
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.red {
    color: var(--main-danger-color) !important;
}

.flex-hor-center {
    display: flex;
    justify-content: center;
}

.flex-vert-center {
    display: flex;
    align-items: center;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.border-none {
    border: none !important;
}

abbr[title] {
    text-decoration: none;
}

footer{
    margin-top:0;
}

.pre-footer {
    background-color: var(--main-color);
    padding: 16px 24px;
    display: flex;
    justify-content: center;
}

.pre-footer a {
    color: var(--white-color);
    text-decoration: none;
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
}

.pre-footer a:hover {
    text-decoration: underline;
}

.layout-sidebar {
    margin-left: 72px;
    padding-top: 4rem;
    min-height: 90rem;
}

.layout-sidebar .portlet h1 {
    margin-top: 0;
}

.layout-sidebar .form-row p {
    line-height: 22px;
    margin-bottom: 8px;
}

.layout-sidebar .row p {
    line-height: 22px;
    margin-bottom: 8px;
}

.main-header ~ .main-service-title {
    z-index: 1;
}

.main-header ~ .main-service-title ~ #main {
    margin-top:7.6rem;
}

.btn-primary:hover figcaption, .btn-primary:hover figcaption * {
    background-color: transparent !important;
}

#main-menu-sidebar{
    box-shadow: none;
    width: 30rem;
    padding:0 8px;
    top: 14rem;
    position: sticky;
    left: 0;
    width: 29.5rem;
    height: 100vh;
    transition: all .5s;
    z-index:2;
}

#main-menu-sidebar hr {
    border-top: 1px solid var(--blue-color);
}

#main-menu-sidebar .navbar-nav li a{
    color: var(--main-color);
    text-decoration: none;
    font-weight: 400;
    line-height: 24px;
}

#main-menu-sidebar .nav-item .nav-link {
    padding: 12px 6px;
    width: 100%;
    font-weight: initial;
    line-height: initial;
    letter-spacing: initial;
}
#main-menu-sidebar .navbar-nav li.active{
    position:relative;
}
#main-menu-sidebar .navbar-nav li.active:before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background-color: var(--main-info-color);
}

#main-menu-sidebar .navbar-nav li.active a {
    color: var(--main-info-color);
    font-weight: bold;
}

#main-menu-sidebar .navbar-nav li.active i{
    fill: var(--main-info-color);
}

#main-menu-sidebar .navbar-nav li:hover {
    background-color: #F6F6F6;
}

.custom-section {
    border-bottom: 1px solid var(--white-strong-color);
}

.custom-section hr {
    border-top: 1px solid var(--blue-color) !important;
    margin-top: 8px !important;
    margin-bottom: 16px;
}

.add-info-container {
    background-color: var(--white-strong-color);
    padding: 32px;
}

.sidebar-nav h4{
    margin: 8px 0;
    font-size:16px;
    line-height: 20px;
    padding: 12px 0 8px;
}

.help-menu-item {
    margin-top: 24px;
}

.banner.welcome-banner{
    background-repeat: no-repeat;
    background-position: center;
    height:30rem;
    top:0;
}

.ui-autocomplete .ui-menu-item:hover>a{
    background-color:transparent;
}

#accnotification-accordeon .notification-image-container{
    position: relative;
    margin-right: 16px;
    padding: 3px 0;
}

#accnotification-accordeon .notification-number{
    position: absolute;
    top: 0px;
    left: 15px;
    margin: 0;
    height: 16px;
    width: 16px;
    background-color: var(--main-danger-color);
    border-radius: 50%;
    text-decoration: none;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid white;
    font-size: 10px;
}

#accnotification-accordeon .card-body{
    padding: 0;
}

.card-body hr {
    border-top: 1px solid var(--blue-color);
}

.menu-icon{
    width:24px;
    display:flex;
    justify-content:center;
    position:relative;
    top: -1.5px
}

#main-menu-sidebar .nav-item.active .nav-link svg{margin-inline-start:0;}

.notif-pill{
    width: 12px;
    height: 12px;
    background-color: var(--main-danger-color);
    position: absolute;
    top: -2px;
    right: -3px;
    border-radius: 50%;
    border: 2px solid var(--white-color);
}

.tab-dropdown{
    position: absolute;
    bottom: 10px;
    right: 0;
    width: 25%;
}

.activites-checkbox-list{
    flex-wrap: wrap;
    max-height:900px;
}

.banner-header {
    border: 2px solid var(--main-color);
    padding: 28px 32px;
}

.banner-header a {
    fill: var(--main-info-color);
}

.custom-tab .tab-pane {
    padding: 2rem 0;
}

.custom-tab .nav-tabs .nav-item {
    padding: 20px 0 1px 0;
}

@media (max-width: 1300px){
    .activites-checkbox-list{
        flex-wrap: nowrap;
        max-height:none;
    }
}
@media (min-width: 767.98px){
    #layout-sidebar-wrapper{
        display: grid;
        grid-template-columns: 29.5rem 1fr;
    }
}

@media (max-width: 767.98px){
    .main-header ~ .main-service-title ~ #main{
        margin-top:0;
        padding-top:0;
    }

    .layout-sidebar {
        margin-left: 0;
    }

    .navbar-collapse{
        padding-top:90px;
    }

    .main-header ~ .main-service-title{
        margin-top: 5.25rem;
    }

    .sidebar-nav .bi{
        display: none;
    }
    .main-header .navbar-nav{
        margin-top: 0;
    }
    .main-header .navbar-nav .nav-item{
        border: none;
        height: 58px;
        flex-direction: row-reverse;
        justify-content: flex-end;
    }

    .main-header .navbar-nav .nav-item::after{
        top:22px;
    }

    .sidebar-nav h4, .navbar-main h4{
        margin-bottom:0;
        font-size: 1.8rem;
    }

    .navbar-main hr{
        border-top: 2px solid var(--blue-color);
        width: 93%;
    }

    .main-header .navbar-nav .nav-link{
        font-weight:400;
        font-size:1.6rem;
    }

    .main-header .help-menu-item.navbar-nav{
        margin-bottom: 32px;
    }

    .menu-icon{
        margin-left:8px;
    }

    .notif-pill{
        position:initial;
        width: 20px;
        height: 20px;
        display:flex;
        align-items: center;
        justify-content: center;
        color:white;
        border:none;
    }

    .tab-dropdown{
        position: initial;
        width: 100%;
        margin-top:16px;
        padding-bottom: 1px;
    }

    .help-menu-item{
        margin: 0 1.7rem;
    }

    .button-full-width-mobile {
        width: 100%;
    }

    /* Menu mobile Paris Familles (elements_menu_haut.html) :
       - le thème réinitialise .navbar-main .nav-link en height:auto/padding-inline:0 au survol,
         ce qui compresse les lignes et fait bouger le texte ; on impose une hauteur/un padding stables
         identiques en état normal/hover/focus (évite le recalcul de hauteur qui fait "sauter" le texte).
       - on retire le border-right ajouté par le thème sur chaque lien, non souhaité ici.
       - #main-site-menu porte lui-même la classe .navbar-main : la règle thème
         ".main-header #navbarMainMenu .navbar-main{align-items:center}" s'applique donc AUSSI à cet <ul>
         et centre horizontalement les <li>/<h4> qui n'occupent pas toute la largeur (cross-axis d'un
         flex-direction:column). On force align-items:flex-start pour repasser à un alignement à gauche. */
    #main-site-menu.navbar-main {
        align-items: flex-start !important;
    }

    #main-site-menu .nav-item,
    #main-site-menu .nav-item .nav-link,
    #main-site-menu .nav-item .nav-link:hover,
    #main-site-menu .nav-item .nav-link:focus {
        align-items: center !important;
        height: 58px !important;
        min-height: 58px !important;
        margin-block: 0 !important;
        border-right: none !important;
    }

    #main-site-menu h4 {
        align-self: flex-start;
        width: 100%;
        text-align: left;
    }
}

.btn-button-link-modal .btn-label {
    color: var(--main-danger-color);
    text-decoration: underline;
    font-weight: 400;
    font-size: 1.6rem;
}

.btn-button-link-modal:hover .btn-label {
    color: var(--main-color) ;
    text-decoration: none ;
}

.invalid-feedback-form {
    width: 100%;
    margin-top: .25rem;
    font-size: .875em;
    color: #dc3545;
}

.custom-title-border {
    padding-bottom: 8px;
    border-bottom: .6rem solid var(--white-light-color);
}

.accordion .card.with-border {
    border-color: var(--white-strong-color);
}

.accordion .card.with-border .collapse.show {
    border-top-color: var(--white-strong-color);
}

.card.no-shadow {
    border: 1px solid var(--white-strong-color);
}

#certificationInfoModal .modal-footer {
    justify-content: center;
}

#main-site-menu .nav-item .nav-link:after{
    display: none;
}

.card.body-m-0 .card-body{
    margin-top:0
}

.card.body-flex .card-body{
    display:flex;
    flex-direction:column;
}

.card .card-figure {
    height:auto;
}

.icon-profil-famille {
    width: 5rem;
    height: 5rem;
    min-width: 5rem;
    min-height: 5rem;
}