:root {
  --orange: #a72a01;
  --orangefonce: #a72a01;
  --rouge: #800000;
  --vert: #404c3c;
  --verttexte: #535938;
  --vertmoyen: #00812a;
  --bleuclair: #3468a2;
  --mauve: #4d1a84;
  --noir: #404040;
  --blanc: #fefdfd;
  --gris: #eee;
  --gristexte: #929292;
}

.montserrat-regular {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-style: normal;
}
.montserrat-bold {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-style: normal;
}

body{
    font-family: "Montserrat", sans-serif;
    font-weight:500;
    min-width:320px;
    color:var(--noir);
    line-height:1.3;
    font-size:16px;
    background:var(--blanc);
}


/*---------------------classes récurentes--------------------*/
.haut1,
.haut10,
.haut20, 
.haut30,
.haut40,
.haut60,
.hautxxl{
	display:block;
}
.haut1{
	height:1px;
}
.haut10{
	height:10px;
}
.haut20{
	height:20px;
}
.haut30{
	height:30px;
}
.haut40{
	height:40px;
}
.haut60{
	height:60px;
}
.hautxxl{
	height:100px;
}


a, a:hover, a:active, a:visited{
	text-decoration:none;
}


.img-resp img, img.img-resp{
    max-width:100%;
    height:auto;
}

.visuel img{
    width:100%;
    height:auto;
}

.box img:hover{
    cursor:zoom-in;
    -webkit-filter: brightness(0.8);
    filter: brightness(0.8);
    transition: all 0.3s ease 0s;
}


.bold, strong{
    font-weight: 700;
}
.blanc{
    color:var(--blanc);
}
.orange{
    color:var(--orange);
}
.rouge{
    color:var(--rouge);
}
.vert{
    color:var(--verttexte);
}
.fond-blanc{
    background:var(--blanc);
}
.fond-noir{
    background:var(--noir);
}
.fond-rouge{
    background:var(--rouge);
}
.fond-orange{
    background:var(--orange);
}

.relative{
    position: relative;
}
.tabs--primary li{
    padding:5px 10px;
    border-top:1px solid #ccc;
    border-right:1px solid #ccc;
    background: var(--blanc);
}
.tabs--primary li:first-child{
    border-left:1px solid #ccc;
}
.tabs--primary {
    margin-top:20px;
    margin-bottom:20px;
    position: relative;
}
.plus-grand{
    font-size: 22px;
}
.plus-petit{  
    font-size: 14px;
}
.font-20{
    font-size: 20px;
}

.cadre img{
    border:1px solid var(--noir);
}
.no-link a {
    display: none;
}

/*---------------------------barre de menus-------------------------------*/

.toolbar .toolbar-bar {
    background-color: #0036B1;
}
/*-------------------------navigation---------------------------*/
.barre{
    z-index: 5;
}
.navbar-brand{
    display: none;
}
.navbar{
    height: 50px;    
    /*background: rgba(64,76,60, 0.7);*/
    background: url(../img/nav_bg.png) repeat-y center center;
    top: 15px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    text-align: center;
}
.navbar-nav{
    margin: auto;
}
.nav-item{
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
}
.nav-link, .nav-link:hover, .nav-link.dropdown-toggle.show{
    color:var(--blanc);
    
}
.nav-link{
    border-bottom: 2px solid transparent;
}
.nav-link:hover, .nav-link:focus{
    border-bottom: 2px solid var(--blanc);
}
.dropdown-menu{
    border-radius: 0;
}
.dropdown-item a{
    color: var(--noir); 
    font-size: 17px;
}
 
.dropdown-item:hover{
    background: rgba(64,76,60, 0.7);
    color:var(--blanc);
}
.dropdown-item a:hover,
.dropdown-item:hover a{
    color: var(--blanc); 
}

.navbar-toggler {
    color: var(--blanc); 
    background-color: transparent;
    border: none;
    border-radius: 0;
}
.navbar-toggler-icon {
  background-image: url(../img/icone-menu.png);
}
.navbar-toggler:focus {
  box-shadow: none;
}

.navbar .offcanvas-header {
   border-bottom: 2px solid rgba(120, 128, 117, 1);
}

/*----------------------slider-----------------------*/
.bloc-slider-accueil {
    top:-50px;
    z-index: -1;
    text-align: center;
    position: relative;
}

/*.carousel-control-prev-icon {
    background-image: url(../img/fleche-gauche.png);
    background-size:contain;   
}

.carousel-control-next-icon {
    background-image: url(../img/fleche-droite.png);
    background-size:contain;
}*/


.bloc-slider-accueil .carousel-control-prev,
.bloc-slider-accueil .carousel-control-next {
   display: none; 
   width: 10%;
}

.masque-slider{
    height: auto;
    position:absolute;
    bottom:-1px;
    left: 49%; 
    transform: translate(-49%); 
    z-index: 1; 
    width: 100%;
}

.logo-slider{
    position: absolute; 
    top: 50%; left: 50%; 
    transform: translate(-50%, -50%); 
    z-index: 4;
    max-width: 50%;
}

.telechargement a {
    color: var(--rouge);
    display: inline-block;
    font-size: 20px;
    padding: 0 10px 20px;
    height: 44px;
    margin-bottom: 20px;
}
.telechargement a:before{
    content:'';
    background: url(../img/telecharger.png) no-repeat;
    background-size: contain;
    height: 29px;
    width: 32px;
    display: inline-block;
    margin-right:10px;
    position: relative;
    top:3px;
}


.activite .telechargement a{
    font-size: 16px;
}
.sstitre{
    font-size: 17px;
}
 
.sstitre:before{
    content:'> ';
    font-size: 20px;
    position: relative;
    top:2px;
}
.lien a{
  color: var(--rouge);  
}
.lien a:hover,
.telechargement:hover a{
    color: var(--blanc);
    background: var(--rouge);
}

/*----------------------accueil-----------------------*/

.slogan{
    font-size: 28px;
    text-align: center;
    color: var(--rouge);
    line-height: 1.4;
}
h1.titre-accueil{
    font-size: 24px;
    color: var(--verttexte);
}


/*----------------------paragraph téléchargement-----------------------*/

.telechargement a:hover:before,
.telechargement:hover a:before{
    background: url(../img/telecharger-hover.png) no-repeat; 
    background-size: contain;
}

/*----------------------actualites-----------------------*/
.accroche-actu-full{
    font-size: 18px;
    color: var(--rouge);
}

.legende{
    min-height: 30px;
}
.actu-teaser a{
    color:var(--noir);
}
.actu-teaser:hover a{
    color:var(--rouge);
}

/*----------------------programme des activites-----------------------*/

.views-exposed-form .js-form-item,
.views-exposed-form .js-form-wrapper{
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
}

.views-exposed-form label{
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--rouge);
}
.form-item-field-activite-date-value-min label,
.form-item-field-activite-date-value-max label{
    display: block;
}

#edit-submit-activites,
#edit-reset,
#edit-reset-activites,
#edit-field-activite-type-target-id,
#edit-field-activite-niveau-target-id,
#edit-field-activite-date-value-min,
#edit-field-activite-date-value-max{
    border: var(--bs-border-width) solid var(--rouge);
    border-radius: var(--bs-border-radius); 
    height: 38px;
}
#edit-field-activite-date-value-min,
#edit-field-activite-date-value-max{
   padding:0 5px;
}
#edit-submit-activites,
#edit-reset,
#edit-reset-activites{
    padding-left: 10px;
    padding-right: 10px;
    background: var(--blanc);
}

#edit-submit-activites{
    margin-right: 10px;
}

a.bouton{
    background: var(--blanc);
    color:var(--rouge);
    display: inline-block; 
    padding: 10px;
    font-size: 18px;
    border:2px solid var(--rouge);   
}

#edit-submit-activites:hover,
#edit-reset:hover,
#edit-reset-activites:hover,
a.bouton:hover{
    background: var(--rouge);
    color:var(--blanc);
}
a.bouton:before{
    content:'>';
    display: inline-block;
    width: 10px;
    margin-right: 7px;
}

.form-select:focus {
  border-color: var(--rouge);
  outline: 0;
  box-shadow: none
}


.duree, .distance, .denivele, .niveau{
    display: inline-block;
    font-size: 18px;
}
.niveau{
   display: block;
}
.duree:before, .distance:before, .denivele:before{
    content:'';
    height: 30px;
    width: 30px;
    display: block;
    position: relative;
    top:5px;
    margin: 5px auto 12px;
}
.duree:before{
    background: url(../img/duree.png) no-repeat;
    background-size: contain;
}
.distance:before{
    background: url(../img/distance.png) no-repeat;
    background-size: contain;
}
.denivele:before{
    background: url(../img/denivele.png) no-repeat;
    background-size: contain;
}
.activite-bleu-fond, .activite-vert-fond, .activite-orange-fond, .activite-mauve-fond{
    color:var(--blanc);
    margin-left: 0;
    margin-right: 0;
    height: 60px;
}
.offcanvas-body .activite-bleu-fond, .offcanvas-body .activite-vert-fond, .offcanvas-body .activite-orange-fond, .offcanvas-body .activite-mauve-fond{
    height: 34px;
}
.activite-bleu-fond{
   background: var(--bleuclair); 
}
.activite-bleu-border{
    border: 1px solid var(--bleuclair); 
    padding-left:0;
    padding-right:0;
    padding-bottom:5px;
}
.activite-bleu{
    color: var(--bleuclair); 
}

.activite-vert-fond{
   background: var(--vertmoyen); 
}
.activite-vert-border{
    border: 1px solid var(--vertmoyen); 
}
.activite-vert{
    color: var(--vertmoyen); 
}

.activite-orange-fond{
   background: var(--orangefonce); 
}
.activite-orange-border{
    border: 1px solid var(--orangefonce); 
}
.activite-orange{
    color: var(--orangefonce);
}

.activite-mauve-fond{
   background: var(--mauve); 
}
.activite-mauve-border{
    border: 1px solid var(--mauve); 
}
.activite-mauve{
    color: var(--mauve);
}
.activite-bleu-fond-titre, .activite-vert-fond-titre, .activite-orange-fond-titre, .activite-mauve-fond-titre{
    margin-left: 0;
    margin-right: 0;
    height: auto;
    min-height: 70px;
    padding-top: 8px;
    padding-bottom: 3px;
}
.offcanvas-body .activite-bleu-fond-titre, .offcanvas-body .activite-vert-fond-titre, .offcanvas-body .activite-orange-fond-titre, .offcanvas-body .activite-mauve-fond-titre{
    min-height:inherit;
}
.activite-bleu-fond-titre h2, .activite-vert-fond-titre h2, .activite-orange-fond-titre h2, .activite-mauve-fond-titre h2{
    font-size: 20px;
}

.bouton-plus{
    position: absolute;
    bottom:0; 
    right:0;
    height: 60px;
    width: 60px;
    color:var(--blanc);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.bouton-plus img{
    width: 75%;
    height: auto;
}
.bouton-plus.activite-bleu img{
    filter: invert(30%) sepia(13%) saturate(4576%) hue-rotate(181deg) brightness(106%) contrast(74%);
}
.bouton-plus.activite-vert img{
    filter: invert(14%) sepia(94%) saturate(6456%) hue-rotate(154deg) brightness(101%) contrast(102%);
}
.bouton-plus.activite-orange img{
    filter: invert(10%) sepia(99%) saturate(6262%) hue-rotate(36deg) brightness(97%) contrast(99%);
}
.bouton-plus.activite-mauve img{
    filter: invert(15%) sepia(64%) saturate(2682%) hue-rotate(256deg) brightness(93%) contrast(106%);
}
.offcanvas-size-xl {
    --bs-offcanvas-width: min(95vw, 750px) !important;
}
.offcanvas-header .btn-close {
    margin: 0; 
    background-color: transparent; /* Pour ne pas affecter l'arrière-plan */
    filter: invert(1);
    opacity: 0.8;
}

.table-striped th{
    padding-left:0;
}

.annulation{
    position: absolute;
    z-index: 3;
    height: 100%;
    width: 100%;
    background: rgba(255,255,255,0.7);
    display: none;
    bottom:0;
    overflow: hidden;
}
.annulation.activation{
    display: block;
}
.annulation p{
    position: absolute;
    background-color: rgba(100,100,100,0.9);
    transform: rotate(-7deg) translate(-50%, -40%);
    top: 40%; left: 50%;
    width: 110%;
    /*text-transform: uppercase;*/
    padding: 0.6rem; 
    display: block;
    text-align: center;
    color: var(--blanc);
    font-weight: 700;
    font-size: 32px;
    margin: 0;
    
}
.programme p{
    margin-bottom: 0.7rem;
}

/*----------------------fenetre modale inscription-----------------------*/

.ui-dialog {
    z-index: 2000 !important;
    font-family: "Montserrat", sans-serif !important;
    border-radius: 5px;
}
.ui-widget.ui-widget-content {
    border: 2px solid var(--rouge);
    padding: 0;
}
.ui-dialog div {
   margin-bottom:5px ;
}
.ui-dialog .ui-dialog-title {
   white-space: normal;
}
.ui-widget-header {
    border: none !important;
    background: var(--rouge) !important;
    color: #fff !important;
 
}
.ui-dialog .ui-dialog-content {
    padding: 3px 10px;
    overflow: hidden;
}


.ui-dialog .fieldset-legend{
    font-size: 18px !important;
    color: var(--rouge) !important;
}
.ui-dialog .ui-dialog-titlebar {
    padding:5px 8px;
}
.ui-dialog .ui-dialog-titlebar-close {
    background-image: url(../img/bt-close.png);
    background-size: contain;
    top: 15px;
    border:none;
}

/*---------------------------formulaire------------------------------*/
.formulaire{
    position: relative;
}
h3{
    margin-top:0;
    margin-bottom: 10px;
}

.formulaire input[type="text"],
.formulaire input[type="password"],
.formulaire input[type="email"],
.formulaire textarea{
    display: block;
    width: 100%;
}
.formulaire input[type="text"]{
      height: 30px;
}

.bouton input[type="button"],
.bouton input[type="submit"]{
    background: var(--blanc);
    color:var(--rouge);
    display: inline-block; 
    padding: 10px;
    font-size: 18px;
    border:2px solid var(--rouge); 
    margin-top: 20px;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
}
.bouton input[type="button"]:hover,
.bouton input[type="submit"]:hover{
    background: var(--rouge);
    color:var(--blanc);
} 
.formulaire .js-form-type-radio{
    display: inline-block;
    margin-right: 20px;
}
.formulaire legend,
.formulaire label
.formulaire .field--name-field-inscription-participant label,
.formulaire .js-form-type-number label,
.formulaire .js-form-type-textarea label{
    display:block;
    margin-bottom:5px;
    margin-top:10px;
    color: var(--rouge);
    font-size: 18px;
    
}
#edit-inscription-participant{
    border: none;
    font-size: 20px;
    color: var(--rouge); 
    font-weight: bold;
}
.password div{
    margin-top: 15px;
    display: block;
}

/*----------------------messages-----------------------*/

.le-message-status, .le-message-error{
    background: var(--vert);
    color: var(--blanc);
    padding: 10px;
    width: 600px;
    max-width: 100%;
}
.le-message-error{
    background: var(--rouge);
    color: var(--blanc);
    padding: 10px;
}

/*----------------------liste des inscrits-----------------------*/

.table-vue th, .table-vue td{
    padding: 5px 10px;
    border:1px solid #ccc;
    text-align: center;
}
.table-vue th {
     background: #eee;
}

.views-field-field-inscription-message p{
    margin-bottom: 0;
}
td.views-field-field-inscription-message{
    width: 30%;
    text-align: left;
}
th.views-field-field-inscription-presence-rv,
th.views-field-field-inscription-voiture,
th.views-field-field-inscription-nb-passagers{
    width: 10%;
}
[class*="views-field-field-inscription-participant"] a { /*tous les éléments dont les noms de classe contiennent la chaîne*/
    color:var(--rouge);
    white-space: nowrap;
}
[class*="views-field-field-inscription-participant"] a:hover {
    background: var(--rouge);
    color:var(--blanc);
}

/*----------------------albums photos-----------------------*/
.date-publication-teaser,
.field_album_date div, 
.field_album_date_vue div {
    font-size: 18px;
    margin-bottom: .5rem;
    background: var(--orangefonce);
    color:var(--blanc);
    display: inline-block;
    padding: 3px 10px;
}
.field_album_date div {
    font-size: 24px;
}
.date-publication-teaser{
    font-size: 15px;
}
.actu-teaser:hover .date-publication-teaser{
     background:var(--rouge);
}
.titre-album{
    font-size: 24px;
    color:var(--orangefonce);
    margin-top: 10px;
    margin-bottom: 5px;
}
.actu-teaser:hover .titre-album{
     color:var(--rouge);
}
ul.pager__items{
    padding-left: 0;
}
li.pager__item{
    display: inline-block;
}
.pager__item a{
    color: var(--rouge);
    display: inline-block;
    padding: 3px 5px;
    border: 1px solid var(--rouge);
}
.pager__item.is-active a,
.pager__item a:hover{
    color: var(--blanc);
    background: var(--rouge);
}

/*----------------------editeur-----------------------*/

.editeur ul{
    margin-top:10px;
}

.editeur li{
    margin-bottom:6px;
}

.editeur p:last-child{
    margin-bottom: 0;
}
.editeur p{
    margin-bottom: 8px;
}

.editeur a{
    color: var(--rouge);
}
.editeur a:hover, .editeur a:focus{
    background: var(--rouge);
    color: var(--blanc);
}





/*-----------------------footer-------------------*/	
footer{
    margin-top: 30px;
}
.fond-vert{
    background: url(../img/fond-footer.webp) no-repeat left top;
    background-color: var(--vert);
    padding: 20px 0;
    color:var(--blanc);
}
.fond-vert a,
.fond-noir .lien a{
    padding: 3px;
    color:var(--blanc);
}
.fond-vert a.reseaux{
    padding: 0;
}
.fond-vert a.reseaux img:hover{
    background: var(--rouge);
}
.fond-noir .lien a{
    margin: 0 15px;
}

.fond-vert a:hover, 
.fond-vert a:focus, 
.fond-noir .lien a:hover, 
.fond-noir .lien a:focus{
    background: var(--rouge);
    color:var(--blanc);
}
.fond-vert .partenaires img{
    display: block;
    margin: 10px auto;
    max-width: 100%;
}


/*-----------------------responsive-------------------*/



@media (max-width: 1399px) {
	
    
       
}




@media (max-width: 1199px) {
    
    
	
}



@media (max-width: 991px) {
	
	.plus-grand {
		font-size: 20px;
    }
    
    /*-------------------------navigation 991 ---------------------------*/   
    
    .navbar{
        height: 50px;    
        position: static;
        background: rgba(120, 128, 117, 1);
    }
   .navbar-brand{
        display: inherit;
        padding-top: 0;
    } 
    .navbar-toggler{
        position: relative;
        top: -12px;
        right: 15px;
    }
    .titre-rando, .titre-rando-xs{
        font-size: 34px;
        position: relative;
        left:20px;
        color:var(--blanc);
        font-weight: 700;
    }
    .titre-rando-xs{
         color:var(--noir);
    }
    .nav-link, .nav-link:hover, 
    .nav-link.dropdown-toggle.show{
       color:var(--noir);
    }
    
    /*----------------------accueil 991-----------------------*/
    
    .slogan{
        margin-top: 20px;
    }
    
    /*----------------------albums photos-----------------------*/
    .field_album_date div, .field_album_date_vue div {
        font-size: 20px;
    }
    
}

@media (max-width: 767px) {
    
    /*----------------------accueil 767-----------------------*/
    .bloc-slider-accueil {
        top:0;
    }
    .slogan{
        font-size: 22px;
        margin-top: 40px;
    }
    h1.titre-accueil{
        font-size: 20px;
    }
    
    /*-----------------------footer767-------------------*/	
    .fond-noir .lien a{
        margin: 10px auto;
        display: block;
    }


}
@media (max-width: 575px) {
    /*----------------------accueil 575-----------------------*/
    
    .slogan{
        font-size: 20px;
    }
    
    
    .carousel-control-prev, .carousel-control-next {
        width: 15%;
    }
    
    /*-------------------------navigation 575 ---------------------------*/
    
    .titre-rando{
        font-size: 28px;
    }
    .nav-link{
        font-size: 18px;
    }
    
    .field_album_date div, .field_album_date_vue div {
        margin-bottom: 5px;
    }
    
    .activite-bleu-fond, .activite-vert-fond, .activite-orange-fond, .activite-mauve-fond{
        height: 105px;
    }
    
    
}

@media (max-width: 360px) {
    
     /*-------------------------navigation 360 ---------------------------*/
    .titre-rando-xs{
        font-size: 30px;
    }
    .titre-rando{
        font-size: 24px;
    }
    
}


/*------------------------ scroll up-----------------------------*/

#scroll-up {
    position: fixed;
    z-index: 900;
    bottom: 20px;
    right: 15px;
    display: none;
    width: 52px; 
    height: 52px;
    font-size: 18px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    background-color: var(--blanc);
    color:var(--fonce);
    border-radius: 100%;
    cursor: pointer;
    border:2px solid var(--verttexte);
    transition: all 0.3s;
}



#scroll-up:after{
    content:'\25B2';
    font-size: 25px;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    transition:all 0.5s;
}

#scroll-up:hover {
    background-color: var(--verttexte);
    border:2px solid var(--verttexte);
    color: var(--blanc);
}

/*------------------user login---------------------------*/

#user-login-form label{
    display: block;
}
#user-login-form {
    margin-top: 20px;
}
#user-login-form input{
    margin:10px 0 15px;
}




.draggable.fond-gris,
.fond-gris{
    background:var(--gris);
    color: var(--gristexte);
}
.fond-gris a{
    color: var(--color-link-hover);
}



.table-activites-realisees {
    width: 100%;
}


.table-activites-realisees th {
    color:var(--rouge);
    padding: 3px;
    border: 1px solid var(--noir);
    background: #eee;
}

.table-activites-realisees td {
    padding: 3px;
    border: 1px solid var(--noir);
    vertical-align: top;
}


.table-activites-realisees p {
    padding: 0;
    margin: 0;
}