.messageExclusiviteEpaf {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: end;
    height: 15rem;
    padding: 0 5rem;
    font-size: 2rem;
    font-family: 'Raleway';
    text-align: center;
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(33,104,142,1) 75%);
}
/**********************************************************************************/
/* BANDEAU INFOS */
.bandeau {
    height: 5rem;
    margin-bottom: 2rem;
    overflow: hidden;
    background: rgba(0,102,153,0.8);
}
.format {
    display: inline-block;
    padding-right: 100%;
    padding-left: 100%;
    line-height: 5rem;
    white-space: nowrap;
    color: #FFFFFF;
    overflow: hidden;
}
.format:hover {
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused;
    animation-play-state:paused;
    cursor: pointer;
}
.actu {
    display: inline-block;
    padding: 0 2rem;
    font-size: 2rem;
    color: #FFFFFF;
}
.actu a {
    text-decoration: underline;
    color: #FFFFFF;
}
@keyframes bandeauActu {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(-100%, 0, 0);
                transform: translate3d(-100%, 0, 0);
    }
}
.format#formatActu1 {
    animation-name: bandeauActu;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 60s;
}
.format#formatActu2 {
    animation-name: bandeauActu;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 80s;
}
.format#formatActu3 {
    animation-name: bandeauActu;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 80s;
}
.format#formatActu4 {
    animation-name: bandeauActu;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 80s;
}
.format#formatActu5 {
    animation-name: bandeauActu;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 80s;
}
/**********************************************************************************/
/* FORMULAIRE ACCUEIL */
/**********************************************************************************/
#formulaireAccueil {
    width: 80%;
    margin: 1rem auto 5rem auto;
    background: #FFFFFF;
    z-index: 3;
}
#formulaireAccueil input:not(input[type="submit"]),
#formulaireAccueil .select select {
    height: 3rem;
    border: none;
    border-bottom: 1px solid black;
    border-radius: 0;
    text-align: left;
}
#formulaireAccueil a,
#formulaireAccueil label {
    color: #FFFFFF;
    text-decoration: none;
}
#formulaireAccueil #topLabels {
    display: flex;
}
#formulaireAccueil .labelTop {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 15rem;
    font-family: 'Gotham Narrow Book';
    font-size: 1.5rem;
    font-weight: 400;
    text-align: center;
    text-transform: uppercase;
    color: #FFFFFF;
}
.labelTop span {
    font-family: 'Museo Slab 900';
    font-size: 1.5rem;
}
#formulaireAccueil .labelBottom {
    position: absolute;
    bottom: -3.8rem;
    left: 0;
    display: flex;
    justify-content: space-around;
    width: 90%;
    font-family: 'Gotham Narrow Book';
    font-size: 1.3rem;
    text-align: center;
}
#formulaireAccueil .labelBoutons {
    display: flex;
    width: 100%;
}
#formulaireAccueil .labelBoutons a {
    width: 100%;
    margin: 0 0.05rem;
}
#formulaireAccueil .labelBottom label,
#formulaireAccueil .labelBoutons label {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25%;
    padding: 0.5rem 0;
    font-size: 1.3rem;
    text-transform: uppercase;
    color: #FFFFFF;
    background: #9797AC;
    border-radius: 0 0 0.5rem 0.5rem;
}
#formulaireAccueil .labelBoutons label {
    width: 100%;
    height: 100%;
    text-align: center;
    border-radius: 0.3rem;
}
#formulaireAccueil .labelBottom label img,
#formulaireAccueil .labelBoutons label img {
    /* height: 2.5rem;
    margin-right: 1rem; */
    display: none;
}
#labelResidenceAccueil {
    background: #006699 !important;
}
#labelColonieAccueil {
    background: #FF6633 !important;
	border-radius: 0.5rem 0 0 0.5rem;
}
#formulaireAccueil .tripleFormulaire {
    display: none;
    position: relative;
    width: 100%;
    border-top-right-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}
#formulaireAccueil #afficheResidence:checked ~ #formResidenceAccueil,
#formulaireAccueil #afficheColonie:checked ~ #formColonieAccueil,
#formulaireAccueil #afficheQf:checked ~ #formQfAccueil,
#formulaireAccueil #afficheCarte:checked ~ #formCarteAccueil {
    display: flex;
}
#formResidenceAccueil {
    border-bottom:3px solid #006699;
    border-top:3px solid #006699;
    border-left:1px solid #006699;
    color: #006699;
}
#formColonieAccueil {
    color: #FF6633;
}
.interieurForm {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    margin-left: 1rem;
}
.tripleFormulaire .select {
    width: 20%;
    margin: 0;
}
.tripleFormulaire .select select {
    height: 2rem;
}
#formulaireAccueil .tripleFormulaire [type="submit"],
#formulaireAccueil #submitQf {
    width: 10rem;
    height: 100%;
    border: none;
    font-family: 'Museo Slab 700';
    font-size: 2rem;
    color: #FFFFFF;
}
#formColonieAccueil #divFormColo {
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin: auto;
}
#divFormColo p {
    font-family: 'HMS Gilbert Script';
    font-size: 4rem;
    margin: 0;
}
#formColonieAccueil input::placeholder {
    color: #FF6633;
}
#formResidenceAccueil input::placeholder {
    color: #006699;
}
#formColonieAccueil #divFormColo .divDateColoAccueil {
    width: 45%;
}
#formColonieAccueil #divFormColo .divDateColoAccueil p {
    margin: 0;
    text-align: center;
}
#formColonieAccueil #divFormColo .divDateColoAccueil input,
#formColonieAccueil #divFormColo .divDateColoAccueil .custom-select {
    width: 100% !important;
    margin: 1rem 0 0 0;
}
#submitResidence {
    background: #006699;
}
#submitResidence:hover,
#formulaireAccueil #labelResidenceAccueil:hover,
#formulaireAccueil .labelBoutons #labelResidenceAccueil:hover {
    background: #3385AD !important;
}
#submitColonie {
    background: #FF6633;
}
#submitColonie:hover,
#formulaireAccueil #labelColonieAccueil:hover,
#formulaireAccueil .labelBoutons #labelColonieAccueil:hover {
    background: #FF845B !important;
}
#formulaireAccueil .labelBottom label:hover, 
#formulaireAccueil .labelBoutons label:hover {
    background: #5C5C7D;
}
#mapPopUp {
    position: fixed;
    top: 0;
    left: -1000%;
    width: 100%;
    height: 100vh; 
    background: rgba(0,0,0,0.7);
    z-index: 7;
}
#afficheCarte:checked ~ #mapPopUp {
    left: 0;
}
#mapPopUp #conteneurMap {
    position: relative;
    height: 100%;
}
#mapPopUp #divMap {
    display: flex;
    justify-content: center;
    height: 100%;
}
#mapPopUp #mapid {
    position: relative;
    margin: 0 auto;
    width: 60%;
    height: 70%;
    border: 5px solid #FFFFFF;
    box-shadow: 2px 2px 20px #000000;
}
#mapid .pictoMapPrestation {
    height: 2rem;
}
#mapid #legendeCarte {
    max-width: 15rem;
    padding: 1rem;
    background: rgba(255,255,255,0.4);
}
#mapid #legendeCarte img {
    margin-right: 1.5rem;
}
#mapPopUp #labelFermer {
    position: relative;
    display: block;
    top: 0;
    right: 0;
    width: 10rem;
    margin: 1rem 0 1rem auto;
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    color: #FFFFFF;
    z-index: 5;
}
#mapPopUp #labelFermer {
    text-decoration: none;
    color: red;
}
#calendrierListeColonies fieldset {
    border: 2px solid #FF6633;
}
/**********************************************************************************/
/* CAROUSEL */
/**********************************************************************************/
.carouselPromotion600,
.imageCarouselPromotion600 {
    display: none;
}
/**********************************************************************************/
/* SECTION ACTU ET COUPS DE COEURS */
/**********************************************************************************/
.vignetteAccueil a {
    text-decoration: none;
}
#articlesAccueil h3 {
    padding-bottom: 1rem;
    border-bottom: 1px solid #000033;
    margin: 3rem auto 1rem auto;
}
#articlesAccueil article {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    width: 100%;
    margin: 1rem auto;
}
.vignetteAccueil {
    flex-basis: 31%;
    margin: 1%;
    padding: 0;
}
.promoCarousel {
    display: flex;
    justify-content: space-between;
    flex-basis: 100%;
    width: 100%;
}
.textePromo {
    max-width: 35%;
    margin-right: 2rem;
    font-family: 'Gotham Narrow Bold';
    text-align: center;
    color: #000000;
}
.textePromo img {
    width: 50%;
    margin: auto;
}
.textePromo p {
    margin: 1rem 0;
    font-family: 'Gotham Narrow Book';
    font-size: 1.4rem;
    text-align: justify;
}
.textePromo h4 {
    margin: 0.5rem 0;
    font-size: 1.5rem;
}
.textePromo h5 {
    margin: 1rem 0;
    font-size: 1.8rem;
}
.textePromo h6 {
    margin: 1rem 0;
    font-size: 1.6rem;
    font-weight: lighter;
}
.textePromo .asterisque {
    font-size: 1.2rem;
}
.textePromo .promoPourcentage {
    font-size: 2.1rem;
    color: #1D71B8;
}
.textePromo .prixBarre {
    -webkit-text-decoration-line: line-through;
   text-decoration-line: line-through; 
   text-decoration-color: red;
   -webkit-text-decoration-color: red;
}
.textePromo a {
    display: block;
    font-size: 1.8rem;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    color: #1D71B8;
}
.textePromo a:hover {
    text-decoration: underline;
}
.imagePromo {
    max-width: 75%;
}
.imagePromo100 {
    width: 100%;
    /* height: 300px; */
    object-fit: cover;
}
.vignetteAccueil h4 {
    margin: 0.5rem 0 0 0;
    font-family: 'Museo Slab 700';
    font-size: 1.5rem;
    font-weight: normal;
    color: #2B4274;
}
.vignetteAccueil img {
    display: block;
    width: 100%;
}
.vignetteAccueil p {
    margin: 0.1rem 0;
    font-family: 'Gotham Book';
    font-size: 1.5rem;
    color: #000000;
}
/**********************************************************************************/
/* EFFET DE HOVER SUR LES IMAGES */
/**********************************************************************************/
.vignetteAccueil .overlayExterieur {
    display: block;
    position: relative;
    margin: auto;
    overflow: hidden;
}
.vignetteAccueil .overlayInterieur {
    position: absolute;
    top: -50%;
    right: -200%;
    display: flex;
    align-items: center;
    width: 107%;
    height: 200%;
    margin: auto;
    font-size: 1.5rem !important;
    font-weight: bold;
    background:rgba(51,201,153,0.7);
    border-radius: 100% 0 0 100%;
    transition: all .5s linear;
}
.vignetteAccueil .overlayInterieur p {
    position: absolute;
    transition: position .5s;
    width: 50%;
    margin-left: 5rem;
    color: #FFFFFF !important;
}
.vignetteAccueil .overlayExterieur:hover .overlayInterieur {
    right: 0;
}
.vignetteAccueil .overlayExterieur:hover .overlayInterieur p {
    position: inherit;
}
/**********************************************************************************/
/* EN DESSOUS DE 1300PX */
/**********************************************************************************/
@media screen and (max-width: 1300px) {
    #formulaireAccueil {
        width: 80%;
    }
    #formulaireAccueil .labelTop {
        width: 10rem;
        font-size: 1.2rem;
    }
    #formulaireAccueil .labelBottom {
        bottom: -2.7rem;
    }
    #formulaireAccueil .labelBoutons label {
        font-size: 1.2rem;
        flex-direction: column;
    }
    #formulaireAccueil .labelBottom label {
        width: 12rem !important;
        padding: auto 0.5rem;
        font-size: 1.1rem !important;
    }
    #formulaireAccueil .labelBottom label img,
    #formulaireAccueil .labelBoutons label img {
        display: none;
    }
    #formulaireAccueil .select {
        width: auto;
    }
    #formulaireAccueil input, #formulaireAccueil select {
        width: 11rem;
    }
    #formulaireAccueil .labelBottom label img {
        display: none;
    }
    #formulaireAccueil .tripleFormulaire [type="submit"], #formulaireAccueil #submitQf {
        width: 7rem;
    }
}
/**********************************************************************************/
/* EN DESSOUS DE 1000PX */
/**********************************************************************************/
@media screen and (max-width: 1000px) {
    .vignetteAccueil h4,
    .vignetteAccueil p {
        font-size: 1.2vw;    
    }
    .promoCarousel {
        flex-direction: column;
    }
    .textePromo, .textePromo p, .imagePromo {
        width: 100%;
        max-width: 100%;
        text-align: center;
    }
    .textePromo img {
        width: 25%;
    }
    .textePromo a {
        margin: 1.5rem 0;
    }
}
/**********************************************************************************/
/* EN DESSOUS DE 950PX */
/**********************************************************************************/
@media screen and (max-width: 950px) {
    .messageExclusiviteEpaf {
        width: 60%;
    }
}
/**********************************************************************************/
/* EN DESSOUS DE 800PX */
/**********************************************************************************/
@media screen and (max-width: 800px) {
    .messageExclusiviteEpaf {
        width: 80%;
    }
    #formulaireAccueil {
        display: block;
        min-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }
    #formulaireAccueil .labelBoutons {
        flex-direction: column;
    }
    #formulaireAccueil #topLabels {
        flex-direction: row-reverse;
    }
    #formulaireAccueil .labelBoutons a {
        margin: 0;
    }
    #formulaireAccueil .labelTop,
    #formulaireAccueil .labelBoutons label {
        width: 100% !important;
        padding: 1rem 0;
        border-radius: 0;
    }
    #formulaireAccueil #labelTop label:hover {
        top: 0;
        transform: none !important;
    }
    #formulaireAccueil .labelBottom {
        position: static;
        flex-direction: column;
        width: 100%;
    }
    #formulaireAccueil .labelBottom label {
        width: 100% !important;
        margin-top: 0.5rem;
        border-radius: 0 !important;
        font-size: 1.5rem !important;
        text-transform: uppercase;
    }
    #formulaireAccueil .labelBottom label img {
        display: none;
    }
    .interieurForm {
        width: 100%;
    }
    .tripleFormulaire {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
    }
    #formResidenceAccueil, #formColonieAccueil, #formQfAccueil {
        border: none;
    }
    .tripleFormulaire .interieurForm {
        display: flex;
        flex-direction: column;
        height: 90%;
    }
    #divFormColo {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        width: 100% !important;
    }
    .divDateColoAccueil {
        width: 70% !important;
    }
    #formulaireAccueil .affichageForm, #divMap {
        display: none;
        margin: auto;
    }
    #formulaireAccueil .tripleFormulaire .select, 
    #formulaireAccueil .tripleFormulaire input:not([type="submit"]) {
        width: 85%;
        height: 4rem !important;
        margin: 2rem auto !important;
        font-size: 1.8rem;
    }
    #formulaireAccueil .tripleFormulaire select {
        width: 100%;
        height: 4rem;
        font-size: 1.8rem;
    }
    #formulaireAccueil .tripleFormulaire .select:after {
        top: 2rem;
        right: 2.5rem;
        border-color: #000000 transparent transparent;
    }
    #formulaireAccueil .tripleFormulaire [type="submit"], 
    #formulaireAccueil #submitQf {
        width: auto !important;
        height: 5rem;
        border-radius: 3rem;
    }
    #afficheResidence:checked ~ #affichageFormResidence, 
    #afficheColonie:checked ~ #affichageFormColonie, 
    #afficheQf:checked ~ #affichageFormQf,
    #afficheCarte:checked ~ #divMap  {
        display: block !important;
    }
    #mapPopUp {
        position: fixed;
        background: rgba(0,0,0,0.7);
    }
    #mapPopUp #conteneurMap {
        display: flex;
        flex-direction: column-reverse
    }
    #mapPopUp #mapid {
        width: 80%;
        height: 50rem;
    }
    #calendrierListeColonies {
        width: 90%;
    }
    #articlesAccueil {
        width: 90%;
    }
    #articlesAccueil h3 {
        font-size: 2.5rem;
    }
    .vignetteAccueil .overlayInterieur {
        display: none;
        position: initial;
    }
    .vignetteAccueil {
        width: 100%;
        flex-basis: 100%;
        margin: 1.5rem 0;
    }
    .vignetteAccueil img {
        width: 100%;
    }
    .vignetteAccueil h4,
    .vignetteAccueil p {
        font-size: 1.3rem;    
    }
    .carouselPromotion,
    .imageCarouselPromotion {
        display: none !important;
    }
    .carouselPromotion600,
    .imageCarouselPromotion600 {
        display: block !important;
    }
}
/**********************************************************************************/
/* EN DESSOUS DE 400PX */
/**********************************************************************************/
@media screen and (max-width: 400px) {
    #formulaireAccueil .tripleFormulaire .select, 
    #formulaireAccueil .tripleFormulaire input:not([type="submit"]) {
        width: 90%;
        height: 3.5rem !important;
        font-size: 1.5rem;
    }
    #formulaireAccueil .tripleFormulaire select {
        width: 100%;
        height: 3.5rem;
        font-size: 1.5rem;
    }
    #formulaireAccueil .tripleFormulaire .select:after {
        top: 1.5rem;
    }
}