/*** Variable de couleurs ***/
:root{
    --background-general: #009b48;
    --link-hover-background-general: #007e49;
    --input-background: #ececec;
    --headings-color: #092869;
    --headings-color-alternative: #99002A;
    --text-color: #333333;
    --font-headings: 'Helvetica', sans-serif;
    --form-color: #092869;
    --a-color: #092869;
    --a-link-menu: #4e4e4e;
    --hover-menu1: #00aa00;
    --hover-menu2: #00e0ff;
    --hover-menu3: #ffc061;
    --hover-menu4: #ff4261;
    --hover-menu5: #808080;
    --hover-menu6: #ebe3eb;
    --color-compte: #fbb03b;
    --color-compte-hover: #fb7d32;
    --vert-leroy: #018172;
    --bleu-actus: #1224cc;
    --magenta-agenda : #ff4262;
}

body{font-size: 16px !important; font-family: 'Helvetica', sans-serif; color: var(--text-color); background: url('/skin/default/image/CSEC_LS-fond_summer.webp') no-repeat; background-size: 100% auto;}
h1, h2, h3, h4, h5, h6{font-family: var(--font-headings); color: var(--headings-color);}
a{color: var(--background-general);}
a:hover{color: var(--link-hover-background-general);}

.clear{clear: both;}
form{ padding: 15px; }
label{font-weight: bold;}
label.required:after{content: "*"; color: red; margin-left: 5px;}
span.required{color: red;}
p.description{font-size: 0.75em;}
ul.errors{color: red; font-size: 0.85em;font-family: var(--font-headings);}
.clear{ clear: both;}
.container{margin: 0px auto; display: block;}
.button, .button.disabled, .button.disabled:focus, .button.disabled:hover, .button[disabled], .button[disabled]:focus, .button[disabled]:hover{background-color: var(--background-general); font-family: var(--font-headings); font-size: 1em !important; border-radius:30px; padding:0.5em 1em;}
.button:focus, .button:hover{background-color: var(--link-hover-background-general);}

.bulleLeft{overflow: hidden; position: relative; display: inline-block;padding-left:15px;}
.bulleRight{overflow: hidden; position: relative; display: inline-block;padding-right:30px;}
.bulleRight h1{padding: 5px 20px 5px 10px; border-radius: 30px 30px 0px 30px; font-weight: bold; color: white; margin: 0px;}
.bulleRight h1:before{content: ""; position: absolute; right: 15px; top: 55px; width: 35px; height: 35px; border-radius: 5px; transform: rotate(45deg); }
.bulleRight h1:after{content: ""; position: absolute; right: 20px; top: 41px; width: 20px; height: 30px; }
.bulleRight h2{padding: 5px 20px 5px 10px; border-radius: 30px 30px 0px 30px; font-weight: bold; color: white; margin: 0px;}
.bulleRight h2:before{content: ""; position: absolute; right: 15px; top: 47px; width: 30px; height: 30px; border-radius: 5px; transform: rotate(45deg); }
.bulleRight h2:after {content: ""; position: absolute; right: 22px; top: 30px; width: 10px; height: 20px; }
.bulleRight h3{padding: 5px 20px 5px 10px; border-radius: 30px 30px 0px 30px; font-weight: bold; color: white; margin: 0px;}
.bulleRight h3:before{content: ""; position: absolute; right: 15px; top: 47px; width: 30px; height: 30px; border-radius: 5px; transform: rotate(45deg); }
.bulleRight h3:after {content: ""; position: absolute; right: 22px; top: 30px; width: 10px; height: 20px; }

.vert {background-color: green; padding: 2px 5px; font-weight: bold; color: white; }
.orange {background-color: orange; padding: 2px 5px; font-weight: bold;}
.orangeDC {background-color: #FF630F; padding: 2px 5px; font-weight: bold; color: black;}
.rouge {background-color: #A80000; padding: 2px 5px; font-weight: bold; color: white;}

#menucache{display:none;}

header, main, footer{margin: 0px auto; display: block; padding: 10px;}

/*** HEADER ***/
header{padding:90px 10px 0px 10px;}
header form{border: none;}
header img.logo{margin:10px;}
header #search{border-radius: 30px; background: url('/skin/default/image/icone_search.svg') no-repeat var(--input-background); background-position: right 10px top 7px;}
header #search::placeholder{color: #7f7f7f;}
header #rechercheCarte{border-radius: 30px; background: var(--input-background); padding: .5rem .6rem; margin-top:15px;}
header #rechercheCarte span{display: none;}

/*header .title-bar{background: var(--background-general);}
header nav{background-color: var(--background-general);}*/
header nav .top-bar, header nav .top-bar ul{background-color: transparent;}
header nav .top-bar ul.menu{justify-content: right;}
header nav .top-bar ul.menu li{position: relative;margin-bottom: 5px;}
header nav .top-bar ul.menu li div{overflow: hidden; position: relative; padding-left:15px}
/*header nav .top-bar ul.menu li a:before{content: ""; position: absolute; right: 100%; top: 23px; width: 0; height: 0; border-top: 15px solid transparent; border-right: 18px solid var(--input-background);}*/
header nav .top-bar ul.menu li a{background-color: var(--input-background); margin: 0px; border-radius: 30px 30px 30px 0px;}
header nav .top-bar ul.menu li a:before{content: ""; position: absolute; left: 7px; top: 25px; width: 15px; height: 20px; background: var(--input-background); border-radius: 5px; transform: rotate(45deg); }
header nav .top-bar ul.menu li a:after {content: ""; position: absolute; left: 7px; top: 13px; width: 10px; height: 20px; background-image: radial-gradient(circle at -28px -9px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 39px, #ececec 40px);}

header nav .top-bar ul.menu li.actif a{background-color: var(--link-hover-background-general); color: white;}
header nav .top-bar ul.menu li.actif a:before{content: ""; position: absolute; left: 7px; top: 25px; width: 15px; height: 20px; background: var(--link-hover-background-general); border-radius: 5px; transform: rotate(45deg); }
header nav .top-bar ul.menu li.actif a:after {content: ""; position: absolute; left: 7px; top: 13px; width: 10px; height: 20px; background-image: radial-gradient(circle at -28px -9px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 39px, var(--link-hover-background-general) 40px);}
header nav .top-bar ul.menu li.actif > a{color: white;}
header nav .top-bar ul.menu li.actif > a:hover{color: var(--background-general) !important;}

/*** HOVER ***/
header nav .top-bar ul.menu li div:hover a{background-color: var(--link-hover-background-general);}
header nav .top-bar ul.menu li div:hover a:before{background: var(--link-hover-background-general); }
header nav .top-bar ul.menu li div:hover a:after {background-image: radial-gradient(circle at -28px -9px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 40px, var(--link-hover-background-general) 40px);}

header nav a{color: var(--a-link-menu);}

/*header nav .dropdown.menu>li.is-dropdown-submenu-parent>a::after{border-color: white transparent transparent;}*/
header nav a:hover, header nav a:focus{color: white !important;}

header #blocConnected{padding: 10px; margin-bottom: 10px;}
header #blocConnected div.cell{display: flex; justify-content: space-between; align-items: center;}
header #blocConnected span{display: inline-block; color: white;}
header #blocConnected #link_moncompte, header #blocConnected #link_logout{margin:10px; }

header nav .submenu{z-index: 9999;}

/*** CONTENU ***/
main {background-color: white; padding: 0px 0px 20px 0px;}
main #inscriptionform #ins_password{margin-bottom: 0px; padding-bottom: 0px;}
main .inscription{padding: 15px;}
main .inscription h1.titreRubrique{margin-left: 0px;}{padding: 15px;}
#complementsInscription h2{background-color: var(--color-compte); padding: 5px 20px 6px 10px;}
#complementsInscription h2:before{background: var(--color-compte);}
#complementsInscription h2:after {background-image: radial-gradient(circle at -28px -9px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 39px, var(--color-compte) 40px); transform: rotateY(180deg);}
form#complementinscriptionform .button{background-color: var(--color-compte);}
form#complementinscriptionform .button:hover;{background-color: var(--color-compte-hover);}


main #reinitialisationMDP{padding:15px;}
main #reinitialisationMDP h1.titreRubrique{margin-left: 0px;}
main #reinitialisationMDP #noteReinitialisationMDP{margin-top: 30px;}
main #reinitialisationMDP .callout{margin-top: 30px;}

#connexionModal h2{background-color: var(--background-general); padding: 5px 20px 6px 10px;}
#connexionModal h2:before{background: var(--background-general);}
#connexionModal h2:after {background-image: radial-gradient(circle at -28px -9px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 39px, var(--background-general) 40px); transform: rotateY(180deg);}
#mdpModal h2{background-color: var(--background-general); padding: 5px 20px 6px 10px;}
#mdpModal h2:before{background: var(--background-general);}
#mdpModal h2:after {background-image: radial-gradient(circle at -28px -9px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 39px, var(--background-general) 40px); transform: rotateY(180deg);}


main #contenu_compte{padding: 15px;}
main #contenu_compte h1.titreMonCompte{margin-left:15px; background-color: var(--link-hover-background-general); color: white;}
main #contenu_compte h1.titreMonCompte:before{background: var(--link-hover-background-general);}
main #contenu_compte h1.titreMonCompte:after {background-image: radial-gradient(circle at -28px -9px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 39px, var(--link-hover-background-general) 40px); transform: rotateY(180deg);}
main #contenu_compte h2{color: var(--link-hover-background-general); padding:0px 10px; margin-right: 10px; font-size: 2rem; margin-top: 30px;}
/*main #contenu_compte .button{background-color: var(--color-compte);}
main #contenu_compte .button:hover{background-color: var(--color-compte-hover);}
form#compte .button{background-color: var(--color-compte);}
form#compte .button:hover{background-color: var(--color-compte-hover);}*/

main #homeDiaporama{position: relative;}
/*main #homeDiaporama h1{position: absolute; bottom: 0; z-index: 100; color: white; font-size: 2.2em; padding: 0.5em 0.5em; margin: 0px; }*/
main #homeDiaporama h1{display:none;}
main #homeDiaporama .owl-item div{position:relative;}
main #homeDiaporama .owl-item div h2{color: white; font-size: 4.3rem; position: absolute; bottom: 40%; padding-left: 11%; font-weight: bold;}
main #homeDiaporama .owl-item div p{color: white; font-size: 1rem; position: absolute; bottom: 35%; padding-left: 11%;}
main #homeDiaporama .owl-dots{text-align: center; bottom:40px; position: relative;}
main #homeDiaporama .owl-dots button{width:20px; height:20px; border-radius: 30px; background-color: white; margin: 5px;}
main #homeDiaporama .owl-dots button.active{background-color: var(--background-general);}

main #aLaUne{margin-top: 30px;}
main #aLaUne .blocArticle{height: 300px; margin-bottom:20px; display: flex; align-content: center; flex-wrap: inherit; justify-content: center; background-size: cover !important; background-position: center !important;}
main #aLaUne .blocArticle a{font-weight: bold; color: var(--a-color); font-size: 1.25em;}

main .tetiere_content{position: relative;}
main .tetiere_content img{width: 100%;}

main .breadcrumbs{margin-top:15px; margin-left: 15px;}
main .breadcrumbs a{color: var(--a-color);}

main #contenu_page{padding: 15px;}
main #contenu_page .imgArticle{border-bottom: solid 1px var(--link-hover-background-general); padding-bottom:5px; margin: 0px 0px 1em 1em;}
main #contenu_page .fichier i{font-size: 2em; color: var(--link-hover-background-general);}
main #contenu_page .rubItem{padding: 0px; border: solid 1px var(--hover-menu5); height: 280px; display: flex; flex-direction: column; justify-content: space-between; background-color: #f9f9f9; flex-wrap: nowrap;}
main #contenu_page .rubItem h3{font-size: 1rem; margin: 1rem;}
main #contenu_page .rubItem h3 a{color: var(--hover-menu5);}
main #contenu_page .rubItem img{max-height: 235px; width: auto;}

main #noteEspaceProtege{margin-top:30px;}

main #navTransverse{margin: 20px 15px 0px 15px; background-color: var(--link-hover-background-general); color: white; padding: 0px 15px;}
main #navTransverse #navPrev, main #navTransverse #navNext{padding-top:10px; margin-bottom: 10px;}
main #navTransverse a{color: white;}

main h2.titre_rechercheLoc, main h2.titreResultLoc{margin-top:30px; color: var(--hover-menu1); font-size: 2rem; padding: 15px;}
main #searchloc{background-color: var(--hover-menu1); margin: 0px 15px;}
main #searchloc .button{background-color: var(--link-hover-background-general);}
main #searchloc #submitbuttonLoc:hover{border: solid 1px var(--background-general);}

main .recherche_liste{position: relative; align-items: start; margin-top:20px; padding-bottom: 20px; margin-bottom: 40px;}
main .recherche_liste:after{content: ""; position: absolute; bottom: 0px; left:20%; width:60%; border-bottom: solid 1px var(--link-hover-background-general);}
main .recherche_liste .imgLoc{ margin: 0px 1em 1em 0px; vertical-align: top; width: 100%;}
main .recherche_liste h3{color: var(--link-hover-background-general);}
main .recherche_liste .lienLoc{font-weight: bold; color: var(--hover-menu1);}
main .recherche_liste .lienLoc:hover{text-decoration: underline !important;}
main .notation_globale i, main .notation i, main .notation_globale i, .notation_autre i, #bloc_formnote i{color: var(--link-hover-background-general);}
main .notation_globale i.note-off, main .notation i.note-off, .notation_autre i.note-off,  #bloc_formnote i.note-off{color: grey;}
main .recherche_liste .resume_liste{font-size: 1.1em;}

main #detailLoc{margin-top: 30px; padding: 15px;}
main #detailLoc2{padding: 15px;}
main #detailLoc #zoneLoc{position: relative;}
main #detailLoc h3{color: var(--link-hover-background-general);}
main #detailLoc h4{color: var(--hover-menu1);}
main #detailLoc button.plusde{margin-top:10px; }
main #detailLoc .resume_liste{font-size: 1.1em;}
main #entete_comments{align-items: center; border-bottom: solid 1px var(--link-hover-background-general); margin-bottom: 20px; padding:15px;}
main #entete_comments h5{color: var(--link-hover-background-general);}
main .pseudo{font-weight: bold; color: var(--hover-menu1); font-family: var(--font-headings);}
main .loc_descr{padding: 15px;}
main .detailComment h6{color: var(--hover-menu1);}
main .bloc_video{margin-left: 15px;}
.comment_autre{margin-bottom: 20px;}
.comment_autre h6{color: var(--link-hover-background-general);}
#bloc_recherche{align-items: center;}
#bloc_formnote label{display: inline-block; position: relative;}
#bloc_formnote label input{position: absolute; left: -3000px; z-index: 1;}
#bloc_formnote label i{z-index: 2; position: relative;}
small{color: red;}
#zone {position: relative; padding: 15px; margin-top:30px;}
#apercu img{margin-right: 10px;}
#bloc_lieu h3{color: var(--link-hover-background-general);}
#bloc_lieu h4{color: var(--hover-menu1);}
#bloc_note {width: 66%; padding: 10px 10px 0px 10px; border-radius: 10px; border: solid 1px var(--background-general);}
.apercu_note {font-size: 1.5em; font-weight: bold; font-family: var(--font-headings); color: var(--link-hover-background-general); padding-bottom: 10px; margin-bottom: 10px; border-bottom: solid 1px var(--background-general); }
.nb_avis { color: #808080; font-size: 1em; margin-bottom: 10px; font-weight: bold; }
main .commentLine{margin: 0px 15px;}

main #galerie_loc{margin-bottom: 20px;}
main #galerie_loc .item{display: flex; justify-content: center;}
main #galerie_loc img{max-height:500px; width: unset; max-width: 100%;}
main #galerie_loc div.caption{position: absolute; bottom: 0px; color: white; background-color: rgba(0,0,0,0.5); padding: 1em;}
main #galerie_loc .owl-dots{text-align: center; margin-top:5px;}
main #galerie_loc .owl-dot{width:20px; height:20px; background-color: var(--link-hover-background-general); border-radius: 20px; margin-right: 10px;}
main #galerie_loc .owl-dot.active{background-color: white; border: solid 1px var(--link-hover-background-general);}

main .actDate{font-size: 1.2em; font-weight: bold; display: inline-block;}

main #blocActus{margin-top:30px; margin-bottom: 30px;}
main #blocActus .homeTitreSectionActu{margin-bottom:30px;}
main #blocActus #sectionActuCSE{position: relative; min-height: 325px;}
main #blocActus #sectionActuCSE:before{content:''; position: absolute; bottom: 45px; height: 280px; border-left: 3px solid var(--bleu-actus);; left: -15px;}
main #blocActus .bulleRight{margin-right: 50px; margin-bottom: 30px;}
main #blocActus h2{background-color: var(--bleu-actus); padding: 5px 20px 6px 10px;}
main #blocActus h2:before{background: var(--bleu-actus);}
main #blocActus h2:after {background-image: radial-gradient(circle at -28px -9px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 39px, var(--bleu-actus) 40px); transform: rotateY(180deg);}
main #blocActus #noteinfospersos{display: inline-block; color: var(--hover-menu5); width:50%;}
main #blocActus .homeItemActu{padding: 0px; border: solid 1px var(--hover-menu5); height: 280px; display: flex; flex-direction: column; justify-content: space-between; background-color: #f9f9f9; flex-wrap: nowrap;}
main #blocActus .homeItemActu h3{font-size: 1rem; margin: 1rem;}
main #blocActus .homeItemActu h3 a{color: var(--hover-menu5);}
main #blocActus .owl-dots{text-align: center; margin-top:15px;}
main #blocActus .owl-dots button{width:20px; height:20px; border-radius: 30px; background-color: var(--hover-menu5); margin: 5px;}
main #blocActus .owl-dots button.active{background-color: var(--bleu-actus);}

main #blocActus .tabs, main #blocActus .tabs-content{border: solid 1px var(--background-general);}
main #blocActus .tabs-content{border-top:0;}
main #blocActus .tabs-title>a{font-size: 1em; color: var(--a-color);}
main #blocActus .tabs-title>a:focus, main #blocActus .tabs-title>a[aria-selected=true]{background-color: var(--link-hover-background-general);}
main #blocActus article{font-size: 0.9em; margin-bottom: 20px; position: relative;}
main #blocActus article:after{content:""; border-bottom: 1px solid var(--background-general); width:50%; display: block; margin: 0 auto; position: absolute; bottom:0; left:25%; }
main #blocActus article h3 a{color: var(--headings-color-alternative);}
main #blocActus article h3 a:hover{text-decoration: underline;}
main #blocActus article h4{margin-bottom: 0px;}
main #blocActus article img{margin-bottom:10px;}
main #blocActus article p{line-height: 1.4em;}

main article.actu{padding:15px 15px 20px 15px; position: relative;}
main article.actu h2 a{color: var(--bleu-actus); font-size: 2rem;}
main article.actu h2 a:hover{text-decoration: underline;}
main article.actu:after{content: ""; border-bottom: solid 1px var(--bleu-actus); width: 60%; position: absolute; left:20%; bottom:-20px; margin-top: 20px; margin-bottom:30px;}

main #blocAgenda.agendaInterieur{padding: 15px;}
main #blocAgenda .bulleRight{ margin-bottom: 30px;}
main #blocAgenda .bulleRight h2{background-color: var(--magenta-agenda); padding: 5px 20px 6px 10px;}
main #blocAgenda .bulleRight h2:before{background: var(--magenta-agenda);}
main #blocAgenda .bulleRight h2:after {background-image: radial-gradient(circle at -28px -9px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 39px, var(--magenta-agenda) 40px); transform: rotateY(180deg);}
main #blocAgenda .eveItem{border-top: solid 2px var(--magenta-agenda); padding:15px 5px 5px 5px; align-items: center;}
main #blocAgenda.agendaInterieur .eveItem{border-top: none; padding:15px 5px 5px 5px; align-items: center; position: relative;}
main #blocAgenda.agendaInterieur .eveItem:before{content: ""; position: absolute; top: 0px; left: 15px;width: 97%; border-top: solid 2px var(--magenta-agenda);}
main #blocAgenda .eveDate{color: var(--magenta-agenda); font-weight: bold; font-size: 1.45rem;}
main #blocAgenda .eveItem .eveTitre h3 a{color: var(--hover-menu5); font-weight: bold; font-size: 1.25rem; letter-spacing: -1px; line-height: 1.2rem}
main #blocAgenda .eveItem .eveTitre h3 span.type_eve{color: var(--link-hover-background-general);font-weight: bold; font-size: 1.25rem; letter-spacing: -1px; line-height: 1.2rem}
main #blocAgenda .eveItem .eveResume p{font-size: 0.9rem; line-height: 1.1rem;}
main #blocAgenda #blocAgendaBottom{background-color: var(--magenta-agenda); padding:10px 25px; color: white;}
main #blocAgenda #blocAgendaBottom a{color: white; text-decoration: underline; vertical-align: text-bottom;}
main #blocAgenda #blocAgendaBottom span{font-size: 2rem;}

/*main #blocAgenda .agenda_date{margin: 0px 10px 5px 0px !important; font-weight: bold;}
main #blocAgenda .agenda_date .jour_num{font-size: 1.5em;}
main #blocAgenda .agenda_date .jour_lettre{font-size: 1.15em;}
main #blocAgenda h3 a{color: var(--headings-color-alternative); font-size: 0.75em;}
main #blocAgenda h3 a:hover{text-decoration: underline;}
main #blocAgenda .agenda_lieu{font-size:0.75em; font-style: italic; font-weight: bold;}
main #blocAgenda .eveItem{position: relative; margin-bottom: 25px;}
main #blocAgenda .eveItem:after{content:""; border-bottom: 1px solid var(--background-general); width:50%; display: block; margin: 0 auto; position: absolute; bottom:0; left:25%; }*/

main #blocPartenaires{margin-top:50px;}
main #blocPartenaires .itemPartenaireHome{height: 130px; vertical-align: middle; display: flex; justify-content: center; align-items: center;}
main #blocPartenaires .itemPartenaireHome img{ max-height:125px; width: auto; filter: grayscale(100%);}

main #agenda h2{color: var(--magenta-agenda); font-size: 2rem; padding: 15px;}
main #agendaform{margin-bottom: 20px; position: relative; padding: 15px;}
main #agendaform .button{background-color: var(--magenta-agenda);}
main #agendaform dd, main #agendaform dt{float: left; margin-right:10px; }
main .evenement{margin-bottom: 20px; position: relative;  padding-bottom: 20px;}
main .evenement:after{content: "";display: block; width: 50%; position: absolute; bottom: 0px; left: 25%; border-bottom: solid 1px var(--headings-color);}
main .evenement .laDate{font-weight: bold;}
main .evenement h3 a{color: var(--headings-color-alternative);}
main .evenement h3 a:hover{text-decoration: underline;}
main .evenement h3 span.type_eve{font-size:0.75em;}

main .agenda_detail{padding: 15px;}
main .agenda_detail h2{color: var(--magenta-agenda); font-size: 2rem;}
main .agenda_detail h2 span.type_eve{font-size: 0.75em; color: var(--link-hover-background-general);}
main .agenda_detail h3{font-size: 1.875rem; color: var(--link-hover-background-general);}

main #filtrePartenaires{color: white; background-color: var(--link-hover-background-general); border: solid 1px var(--link-hover-background-general); padding:10px; margin:30px 15px 0px 15px;}
main #filtrePartenaires span{display: inline-block; margin-left: 20px; margin-right: 20px;}
main .itemPartenaire{margin: 20px 0px; padding-bottom: 20px; position: relative; cursor: pointer;}
main .itemPartenaire:after{content: "";display: block; width: 75%; position: absolute; bottom: 0px; left: 12%; border-bottom: solid 1px var(--link-hover-background-general);}
main .itemPartenaire h2{font-size: 2rem; font-weight: bold; color: var(--link-hover-background-general);}
#detailPartenaire h4{margin-top: 20px !important; color: var(--link-hover-background-general);}

main .item_promo h3, main .item_promo h2{color: var(--headings-color-alternative); font-size: 1.5em;}
main .item_promo h3 a, main .item_promo h2 a{color: var(--headings-color-alternative);}

main .recherche_liste h4 a{color: var(--background-general);}
main .recherche_liste h4 a:hover{text-decoration: underline;}

main .liste_promo{margin-bottom: 30px;}
main .liste_promo .item_promo{position: relative; padding-bottom: 20px; margin: 20px 0px;}
main .liste_promo .item_promo:after{content: "";display: block; width: 75%; position: absolute; bottom: 0px; left: 12%; border-bottom: solid 1px var(--headings-color);}

main .accordion-title{background-color: var(--background-general); color: white; font-size: 1.5em;}
main .accordion-title:hover,main .accordion-title:focus{background-color: var(--link-hover-background-general); color: var(--background-general);}
main .accordion-content a{color: var(--headings-color-alternative); font-weight: bold;}
main .accordion-content a:hover{text-decoration: underline;}

main h1.titreRubrique{margin-left:15px; background-color: var(--link-hover-background-general); color: white;}
main h1.titreRubrique:before{background: var(--link-hover-background-general);}
main h1.titreRubrique:after {background-image: radial-gradient(circle at -28px -9px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 39px, var(--link-hover-background-general) 40px); transform: rotateY(180deg);}
main h1.titreActu{margin-left:15px; background-color: var(--bleu-actus); color: white;}
main h1.titreActu:before{background: var(--bleu-actus);}
main h1.titreActu:after {background-image: radial-gradient(circle at -28px -9px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 39px, var(--bleu-actus) 40px); transform: rotateY(180deg);}
main h1.titreAgenda{margin-left:15px; background-color: var(--magenta-agenda); color: white;}
main h1.titreAgenda:before{background: var(--magenta-agenda);}
main h1.titreAgenda:after {background-image: radial-gradient(circle at -28px -9px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 39px, var(--magenta-agenda) 40px); transform: rotateY(180deg);}
main h1.titrePartenaires{margin-left:15px; background-color: var(--link-hover-background-general); color: white;}
main h1.titrePartenaires:before{background: var(--link-hover-background-general);}
main h1.titrePartenaires:after {background-image: radial-gradient(circle at -28px -9px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 39px, var(--link-hover-background-general) 40px); transform: rotateY(180deg);}
main h1.titreLocations{margin-left:15px; background-color: var(--hover-menu1); color: white;}
main h1.titreLocations:before{background: var(--hover-menu1);}
main h1.titreLocations:after {background-image: radial-gradient(circle at -28px -9px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 39px, var(--hover-menu1) 40px); transform: rotateY(180deg);}


#contentPartenaire h3.titrePartenaires{margin-left:15px; background-color: var(--link-hover-background-general); color: white;}
#contentPartenaire h3.titrePartenaires:before{background: var(--link-hover-background-general);}
#contentPartenaire h3.titrePartenaires:after {background-image: radial-gradient(circle at -28px -9px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 39px, var(--link-hover-background-general) 40px); transform: rotateY(180deg);}

main #uneActu{padding: 15px;}

/*** FOOTER ***/
footer{padding:40px 0px 20px 0px; background-color: white;}
footer h2{background-color: var(--background-general); margin-left:15px !important;}
footer h2:before{background: var(--background-general);}
footer h2:after {background-image: radial-gradient(circle at -28px -9px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 39px, var(--background-general) 40px); transform: rotateY(180deg);}

footer #lineContact{margin-top:20px;}
footer #lineContactHoraires{color: var(--background-general); border-left: solid 3px var(--background-general); padding-left: 15px; letter-spacing: -0.5px;}
footer #lineContactHoraires p{line-height: 1.2em;}
footer #bloc_contact{color: var(--hover-menu5); display: flex; justify-content: center; letter-spacing: -0.5px;}
footer #bloc_contact span{margin-right: 6em;}

footer #bloc_form_contact{margin-top:50px; margin-bottom: 75px;}
footer #bloc_form_contact input[type="text"]{border: solid 1px #cccccc; border-radius: 30px; background: linear-gradient(180deg,rgba(236, 236, 236, 1) 0%, rgba(251, 251, 251, 1) 100%); padding: 5px 20px; color: #878787}
footer #bloc_form_contact textarea{border: solid 1px #cccccc; border-radius: 20px; background: linear-gradient(180deg,rgba(236, 236, 236, 1) 0%, rgba(251, 251, 251, 1) 100%); padding: 10px 20px; color: #878787; height:160px;}
footer #bloc_form_contact input[type="text"]::placeholder{color: #878787; margin-bottom: 8px;}
footer #bloc_form_contact textarea::placeholder{color: #878787}
footer #bloc_form_contact #nom-element, footer #bloc_form_contact #prenom-element{display: inline-block; width:49%;}
footer #bloc_form_contact #nom-element{margin-right: 1%;}
footer #bloc_form_contact #btnSubmitContact-label{display: none;}
footer #bloc_form_contact #btnSubmitContact-element{text-align: center; display: flex; justify-content: center;}
footer #bloc_form_contact #btnSubmitContact-element button{font-size:1.875em; font-weight: bold; color: white; background-color: var(--background-general); margin: 0px; border-radius: 30px 30px 30px 0px; padding: 10px 20px;}
footer #bloc_form_contact #btnSubmitContact-element button:before{content: ""; position: absolute; left: 3px; top: 35px; width: 15px; height: 20px; background: var(--background-general); border-radius: 5px; transform: rotate(45deg); }
footer #bloc_form_contact #btnSubmitContact-element button:after {content: ""; position: absolute; left: 7px; top: 19px; width: 10px; height: 20px; background-image: radial-gradient(circle at -28px -9px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 39px, var(--background-general) 40px);}

footer img{margin-right: 30px;}
footer i{margin-right: 5px;}
footer a{color: var(--hover-menu5);}
footer a:hover, footer a:focus{color: var(--link-hover-background-general);}

/*** MEDIA QUERIES ***/
@media screen and (max-width:639px){
    .bulleRight h2{margin-left: 5px;}
    header{padding-top:25px;}
    header img.logo{width:75%; margin-left: 12%;}
    header #globalsearch{padding-bottom: 0px;}
    header #rechercheCarte{margin: 0px 0px 15px 15px;}
    header #rechercheCarte span{display: inline-block;}
    header #blocConnected span:first-child{color: black;}
    header li{width: 100%;}
    header .title-bar{background: var(--link-hover-background-general); margin-bottom: 10px;}
    main #homeDiaporama h1{font-size: 1em;}
    main #homeDiaporama .owl-item div h2{font-size: 2rem;}
    main #homeDiaporama .owl-item div p{font-size: 0.8rem; bottom:20%;}
    main #homeDiaporama .owl-dots{bottom: 30px;}
    main #homeDiaporama .owl-dot{margin: 10px;}
    main #blocActus #noteinfospersos{width: auto; padding: 5px;}
    main .diapoactu4{margin-left: 5px;}    
    main #blocActus .homeItemActu{height: 280px;}
    main .recherche_liste{padding: 10px;}
    main #blocAgenda.agendaInterieur .eveItem:before{width:90%;}
    main #filtrePartenaires span{margin-right: 0px}
    footer #bloc_contact span{margin:0px 1em;}
    footer #lineContactHoraires{margin-left: 10px}
}

@media screen and (min-width:768px){
    main #homeDiaporama h1{background-color: rgba(0,0,0,0.5);}
    main #searchloc dt, main #searchloc dd{float: left;}
    main #searchloc dt{width:20%; padding-right: 1em; text-align: right;}
    main #blocAgenda.agendaInterieur .eveItem:before{width:90%;}
    main #searchloc dd{width:29%; margin-right: 1%;}
    main #blocActus .homeItemActu{height: 315px;}
    header{padding-top:0px;}

}
@media screen and (min-width:1024px){
    header{padding-top:20px;}
    main #searchloc dt{width:15%; padding-right: 1em; text-align: right;}
    main #searchloc dd{width:34%; margin-right: 1%;}
    main #blocActus .homeItemActu{height: 280px;}
    main #blocAgenda.agendaInterieur .eveItem:before{width:96%;}
}
@media screen and (min-width:1200px){
    header{padding-top:90px;}
    .container{width: 1200px;}
    header, main, footer{width: 1200px; }    
    footer{padding-top: 70px;}
}