/* TEMP POPUP CONSULTATION CITOYENNE */
.temp-popup {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    display: none;
    align-items: center;
}

.temp-popup .overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: grey;
    opacity: 0.3;
}

.temp-popup .temp-popup-content {
    width: 95%;
    max-width: 635px;
    margin: 0 auto;
    padding: 2rem;
    background-color: #fff;
    position: relative;
}

.temp-popup .temp-popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}


/* Emphasize local navmenu's selected item */
.app-navmenu li.nav-item:nth-child(1)::after {
    content: "\25b4";
    color: var(--app-color-green);
    text-align: center;
    bottom: -8px;
    left: calc(100% / 2.25);
    position: absolute;
  }
.app-navmenu li:nth-child(1) {
    border-bottom-color: var(--app-color-green);
}

.rule-130px {
    height: 6px!important;
    margin-left:auto;
    margin-right: auto;
    margin-top: 0;
    width: 130px!important;
}


/*  -----------------------------
    ---- Bootstrap carousel en haut -----
    ----------------------------- */
#demo .carousel-control-prev span, #demo .carousel-control-next span {
  background-color: var(--app-bgcolor-pastel-gray);
}
#demo .carousel-indicators li {
    background-color: var(--app-color-darkgray);
    border-radius: 50%;
    width: 10px;
    height: 10px;
    opacity:0.9;
}
#demo .carousel-indicators .active {
    background-color: var(--app-color-white);
}
#demo .carousel-inner .carousel-item {
    height: 85vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
#demo .carousel-inner img {
    width: 100%;
}
#demo-slides .carousel-inner {
    max-height: 85vh;
}
#overlapping-box {
    font-size: 2em;
    left: 0em;
    line-height: 1.2em;
    margin-left:3.5em;
    max-width:12em;
    opacity: 0.8;
    position: relative;
    top: -8.5em;
    width: 40%;
}
#overlapping-box > div {
    background-color: var(--app-color-darkgray);
    background-color: var(--app-color-gray);
    padding: 0.6em;
}


/*  -------------------------------------
    ---- related-sites-presentation -----
    ------------------------------------- */
.card .card-title  {
    font-size: 1.8em;
    padding-left: 1rem;
    height: 2.4em;
    line-height: 1.2;
    margin-top: 0.3em;
}
.cartes-sites .card-header {
    max-height: 14vw;
    height: 14vw;
    overflow: hidden;
}
.cartes-sites .card-header img {
    min-height: 100%
}
@media (max-width: 768px) {
    .cartes-sites .card-header {
        max-height: 250px;
        height: unset;
    }
}
.link-btn {
    border: 2px solid var(--app-color-white);
    color: var(--app-color-white);
    margin-bottom: 1.5em;
    margin-top: 20px;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    width: 100%;
}
.strip-thin {
    height: 1.25em;
    width: 100%;
}



/*  ---------------------
    ---- innovations ----
    --------------------- */
.innovations {
    font-family: 'Marianne Bold';
    line-height: normal;
}



/*  ------------------
    ---- agencies ----
    ------------------ */
.agencies-background-image {
    background: url('../images/photos/REFlex_16049-min.jpg') no-repeat center;
    background-size: cover;
    /*height: 400px;*/
    height: 15em;
    opacity: 0.5;
    width: 100%;

}
.agencies-details {
    justify-content: space-between;

}
.agencies-informations {
    margin-left: auto;
    margin-right: auto;
    margin-top: -16em;
}
.agencies-informations .details-btn {
    padding-right: 0;
}


/*  --------------
    ---- news ----
    -------------- */
.news {
    margin-top: 5em;
}
.news .card-deck {
    justify-content: space-between;
}
.news h3 {
    font-size: 1.1em;
    padding-top: 10px;
}
.news p.text {
    font-size: 0.8em;
}



/*  -----------------------------------
    ---- related sites (nos sites) ----
    ------------------------------------ */
.related-sites img {
    width: 40px;
}
.related-sites .row {
    justify-content: space-between;
}
.related-sites .image-box:nth-child(2) {
    left: 3em;
    position:relative; 
}


/*  ------------------
    ---- partners ----
    ------------------ */
.partners .image-box {
    padding: 2em 0;
    width: 100px!important;
}

.carousel-control-prev, .carousel-control-next {
    opacity: unset;
}

.carousel-control-prev span, .carousel-control-next span {
    position: absolute;
    overflow: hidden;
}

/*  --------------
    ---- news ----
    -------------- */


/*|==============================================|
  |                                              |
  |             RESPONSIVE BREAKPOINTS           |
  |                                              |
  |                                              |
  | USING BOOTSTRAP VALUES : 576, 768, 992, 1200 |
  |                                              |
  |==============================================| */

/* Nota: iPhone6 : 375 x 667 */



/*-------------------------------------------------
-------------- RESPONSIVE BREAKPOINT --------------
----------------- OVER 576 pixels -----------------
--------------------------------------------------- */
@media only screen and (min-width: 576px) {
}


/*-------------------------------------------------
-------------- RESPONSIVE BREAKPOINT -------------- 
----------------- OVER 768 pixels -----------------
--------------------------------------------------- */
@media only screen and (min-width: 768px) {
}

/*-------------------------------------------------
-------------- RESPONSIVE BREAKPOINT --------------
----------------- OVER 992 pixels -----------------
--------------------------------------------------- */
@media only screen and (min-width: 992px) {
}


/*-------------------------------------------------
-------------- RESPONSIVE BREAKPOINT --------------
---------------- OVER 1200 pixels -----------------
--------------------------------------------------- */
@media only screen and (min-width: 1200px) {
  
}





/*-------------------------------------------------
-------------- RESPONSIVE BREAKPOINT --------------
---------------- UNDER 768 pixels -----------------
--------------------------------------------------- */
@media only screen and (max-width: 767px) {
    .agencies-informations #details-btn a {
        text-align: right!important;
    }
    #overlapping-box {
        font-size: 1.2em;
        top: -8em;
        max-width: 12em;
    }
    .partners .image-box {
        padding: 1em 0;
        width: 80px!important;
    }
    .related-sites .image-box:nth-child(2) {
        position: static;
    }
    .related-sites .row {
        flex-direction: column;
    }
}


/*-------------------------------------------------
-------------- RESPONSIVE BREAKPOINT --------------
------------------ UNDER 576 px -------------------
--------------------------------------------------- */
@media only screen and (max-width: 575px) {
    #overlapping-box {
        font-size: 1em;
    }
    .partners .image-box {
        padding: 0.6em 0;
        width: 60px!important;
    }
    #related-sites-presentation .link-btn {
        margin-bottom: 2.5em;
    }
}

/*-------------------------------------------------
-------------- RESPONSIVE BREAKPOINT --------------
------------------ UNDER 450 px -------------------
--------------------------------------------------- */
@media only screen and (max-width: 450px) {
    .agencies-informations #details-btn {
        padding-left: calc(6vw + 2em);
    }
    .agencies-informations #details-btn span {
        font-size: small;
    }
    #news h2.title {
        margin-right: 0.5em!important;
    }
    #news hr {
        width: 44vw!important;
    }
    #overlapping-box {
        font-size: small;
    }
    .partners .image-box {
        padding: 0.7em 0;
        width: 50px!important;
    }
}

/*-------------------------------------------------
-------------- RESPONSIVE BREAKPOINT -------------- 
---------------- UNDER 394 pixels -----------------
--------------------------------------------------- */
@media only screen and (max-width: 393px) {
    .agencies-informations {
        top: 1em;    
    }
    .agencies-informations #details-btn {
        padding-left: 0.5em;
    }
    #overlapping-box {
        font-size: x-small;
    }
}


/*-------------------------------------------------
-------------- RESPONSIVE BREAKPOINT -------------- 
---------------- UNDER 330 pixels -----------------
--------------------------------------------------- */
@media only screen and (max-width: 393px) {
    .agencies-informations #details-btn {
        padding-left: 4em;
    }
}

/* ------------------------------------------------
-------------- RESPONSIVE BREAKPOINT -------------- 
------------ BETWEEN 394 px AND 626 px  -----------
--------------------------------------------------- */
@media only screen and (min-width: 394px) and (max-width: 626px) {
}


/*-------------------------------------------------
-------------- RESPONSIVE BREAKPOINT --------------
------------- BETWEEN 450 px AND 576 px -----------
--------------------------------------------------- */
@media only screen and (min-width: 450px) and (max-width: 576px) {
    .agencies-informations #details-btn {
        padding-left: 7em;
    }
    .agencies-informations #details-btn  span {
        font-size: small;
    }
}

/*-------------------------------------------------
-------------- RESPONSIVE BREAKPOINT --------------
------------- BETWEEN 576 px AND 768 px -----------
--------------------------------------------------- */
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .agencies-informations #details-figures {
        padding-left: 3em!important;
        padding-right: 3em!important;
    }
    .agencies-informations {
        top: 2em;    
    }
    .agencies-informations #details-btn {
        padding-left: 18em;
        padding-right: 0;
    }

}

/*-------------------------------------------------
-------------- RESPONSIVE BREAKPOINT --------------
--------------  BETWEEN 768 px AND 992 px ---------
--------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .agencies-details #map-regions {
        width: unset;
    }
    .agencies-informations #details-figures {
        padding-left: 0!important;
        padding-right: 0!important;
    }
}


/*-------------------------------------------------
-------------- RESPONSIVE BREAKPOINT --------------
------------ BETWEEN 992 px AND 1200 px -----------
--------------------------------------------------- */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
}