@font-face {
    font-family: Aero;
    src: url(../fonts/Aero.ttf);
}
@font-face {
    font-family: Ethnocentric;
    src: url(../fonts/ethnocentric-rg.otf);
}

/*
	Couleurs : 
	Bleu = 057b98
	orange = f99d1c
	orange2 = f47b20
	kaki = 667545
	gris noir = 181c1e
*/

body {
    font-family: 'Roboto', sans-serif;
    color: #ffffff; /* Couleur du texte en blanc */
    background-color: #181c1e; /* Couleur de fond en gris foncé */
}

.title {
    font-family: 'Ethnocentric', sans-serif;
    text-transform: uppercase;
}
.orange{color:#f47b20}
.bleu{color:#057b98}
.kaki{color:#667545}
.gris-noir{color:#181c1e}
.gold { background: linear-gradient(45deg, #8d610b 6%, #bb8120 17%, #b98d36 27%, #fdeb9d 45%, #f4f1c2 50%, #ffef9a 54%, #ab7840 78%, #d6a947 86%, #8d610b 100%);}
.section-table{display:table;height:100%;width:100%;overflow:hidden}
.section-table-cell{display:table-cell;height:100%;vertical-align:middle}

header {
    background-color: #c4c3c6;
    background-image: url(../img/header.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; /* Ajouté pour couvrir l'intégralité du bloc */
    height: 400px;
    width: 100%;
    position: relative;
}
a {
    color: #fff;
    text-decoration: none;
}
a:hover,
a:focus {
  color: #667545 !important; /* Changer la couleur lors du survol et du focus */
  text-decoration: underline !important; /* Ajouter une décoration de texte */
}
.section-table-cell {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; /* Ajouté pour couvrir l'intégralité du bloc */
}
header.static{background-attachment:fixed}
header #logo{position:absolute;top:20px;left:20px;max-height:300px;}
header #logo img{max-height:250px;}

header #title{text-align:center;}
header #title .section-table{height:400px;}
header #title .rf {
    font-size: 35px;
    margin: 0;
    text-transform: uppercase;
    background: linear-gradient(140deg, #8d610b 6%, #bb8120 17%, #b98d36 27%, #667545 45%, #f4f1c2 50%, #ffef9a 54%, #ab7840 78%, #d6a947 86%, #8d610b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}
header #title .cta{color:#667545;font-size:30px;margin:0}
header #title .ll{color:#667545;font-size:30px;margin:0}
header #title .ll a {
  background: linear-gradient(140deg, #8d610b 6%, #bb8120 17%, #b98d36 27%, #fdeb9d 45%, #f4f1c2 50%, #ffef9a 54%, #667545 78%, #667545 86%, #667545 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-decoration: none !important; /* Pour enlever le soulignement */
}

header nav{text-align:center}
header #menu{color:#fff;font-size:20px;text-align:center;width:120px;cursor:pointer;padding:5px 10px;transition:0.2s;display:none;}
header #menu a:hover,
header #menu a:focus {
  color: #667545 !important; /* Changer la couleur lors du survol et du focus pour les liens du menu */
}
header nav{position:absolute; top:30px;right:15px;}
header nav.open{background:rgba(0,0,0,0.8);}
header nav.open li a{color:#FFF}
header nav.open li a:hover{background:none}
header nav.open #menu{color:#FFF}
header nav li{display:inline-block}
header nav li a{text-decoration:none;font-size:18px;font-family: 'Open Sans', sans-serif;color:#fff;margin:0 10px;text-transform:uppercase;padding:10px}
header nav li a:hover{background:rgba(0,0,0,0.5);text-decoration:none;color:#FFF}
nav a:active {
    color: #667545 !important; /* Couleur lorsqu'un lien est cliqué */
}

header .rect {
    height: 100px;
    width: 50vw;
    position: absolute;
    bottom: -55px;
    background: #181c1e;
    z-index: 1; /* S'assurer que le rectangle est en dessous de tout */
}

header .rect::before {
    content: "";
    position: absolute;
    top: -6px; /* Ajuster cette valeur pour aligner correctement */
    left: 0;
    width: 100%;
    height: 6px; /* Taille de la bordure */
    background: linear-gradient(45deg, #8d610b 6%, #bb8120 17%, #b98d36 27%, #fdeb9d 45%, #f4f1c2 50%, #ffef9a 54%, #ab7840 78%, #d6a947 86%, #8d610b 100%);
    transform: skewY(0deg); /* Appliquer la même inclinaison que le rectangle */
    z-index: 2; /* S'assurer que la bordure est au-dessus du rectangle */
}

header .rect.right::before {
    transform: skewY(0deg); /* Inclinaison inversée pour le rectangle de droite */
    right: 0;
    background: linear-gradient(45deg, #8d610b 6%, #bb8120 17%, #b98d36 27%, #fdeb9d 45%, #f4f1c2 50%, #ffef9a 54%, #ab7840 78%, #d6a947 86%, #8d610b 100%);
}

section#home {
    position: relative;
    z-index: 3; /* Plus élevé que les rectangles */
}

header .rect.left{left:0;transform: skewY(4.5deg);}
header .rect.right{right:0;transform: skewY(-4.5deg);}

#home{padding-top:50px;padding-bottom:50px;}
#home .description{text-align:justify;font-size:16px;padding-bottom:20px}
#home .description strong{font-size:17px;}
#home .horaire{padding:15px;background: linear-gradient(45deg, #8d610b 6%, #bb8120 17%, #b98d36 27%, #fdeb9d 45%, #f4f1c2 50%, #ffef9a 54%, #ab7840 78%, #d6a947 86%, #8d610b 100%);height:200px}
#home .horaire h2{margin:0 0 20px; color: #181c1e;}
#home .horaire p {
    color: #181c1e; /* Couleur du texte des paragraphes en gris noir */
}
#home .local{height:200px}
#home .btn-responsive{display:none;}
#home .btn-responsive a{display:inline-block;}
#home .photos div{overflow:hidden;padding-bottom:10px}
#home .photos img{width:100%}
#tarifs{background:#667545;padding-bottom:30px}
#tarifs .btn-resa{width:250px;height:250px;margin-top:-125px;margin-bottom:-100px;z-index:50}
#tarifs h2,#tarifs h3,#tarifs h4{color:#FFF;margin:0;text-align:center;}
#tarifs h2{font-size:42px}
#tarifs h3,#tarifs h4{font-size:15px;}
#tarifs h4{margin-bottom:30px}
#tarifs .bloc {
    background: #181c1e; /* gris-noir */
    height: 200px;
    text-align: center;
    margin: 30px 10px; /* Ajusté de 20px à 10px pour éviter les chevauchements */
    text-transform: uppercase;
    font-weight: bold;
    position: relative;
    padding: 20px; /* Ajuster selon le design souhaité */
    border: 1px solid #ddd; /* Optionnel : pour voir clairement les contours */
}

#tarifs .bloc .prix {
    font-family: 'Ethnocentric', sans-serif;
    color: #667545; /* kaki */
    font-size: 50px;
    padding-top: 20px;
}
#tarifs .bloc .prix-reduc {
    color: #181c1e;
    background: linear-gradient(45deg, #8d610b 6%, #bb8120 17%, #b98d36 27%, #fdeb9d 45%, #f4f1c2 50%, #ffef9a 54%, #ab7840 78%, #d6a947 86%, #8d610b 100%);
    font-size: 14px;
    text-transform: none;
    font-family: 'Open Sans', sans-serif;
}
#tarifs .bloc .type {
    font-size: 12px;
    left: 0;
    right: 0;
    bottom: 40px;
}
#tarifs .bloc .type span {
    text-transform: lowercase;
    font-weight: 100;
}
#tarifs .bloc .autre-type, #tarifs .bloc .autre-prix{text-align:left;line-height:35px;padding:12px 20px;margin:0;font-size:14px}
#tarifs .bloc .autre-prix,#tarifs .autre-type span{text-align:right;font-family:'Ethnocentric', sans-serif;color:#667545;font-size:18px}
#tarifs .bloc.no-height{height:auto;}
#tarifs .bloc .bloc-titre{padding:15px;border-bottom:1px solid #667545;color:#667545;font-size:25px;font-family:'Ethnocentric', sans-serif;} /* kaki */
#tarifs .bloc .border-bottom{border-bottom:1px solid #667545;}
#tarifs .autre-type span{display:none;}
#tarifs .autre-presta{text-align:center;color:#FFF;font-size:14px;text-transform:uppercase}
#tarifs .autre-prix .prix-reduc, #tarifs .autre-type .prix-reduc{color:#F47B20;color:#777;background:none;text-decoration:line-through}
.promo{font-family: 'Open Sans', sans-serif;text-transform:uppercase;padding:10px;background:#ED1612;color:#FFF;margin:0 20px;font-size:20px;text-align:center}
#home .promo{margin:0 0 20px 0}

#plan{padding-bottom:50px;}
#plan h2{color:#fff;text-align:center;margin:50px;font-size:42px}
#plan iframe{width:100%;height:500px;}
#plan .bloc{background:#667545;padding:10px 20px 10px;color:#FFF;margin-bottom:20px;font-size:16px}
#plan .bloc .title{font-size:20px;margin-bottom:10px}
#plan .bloc a{text-decoration:none;color:#FFF}
#plan .bloc a:hover{text-decoration:none;color:#FFF}

footer{background:#444444;padding:50px 0;color:#FFF;text-transform:uppercase}
footer .logo{text-align:right}
footer .logo img{width:90px}
footer .title{font-size:25px}
footer a{text-decoration:none;color:#FFF}
footer a:hover{text-decoration:none;color:#FFF}
footer .btn-default.btn-plan{font-size:15px;margin-right:30px}
footer .btn-default.btn-resa{font-size:12px}
footer .btn-default.btn-plan i.fa{font-size:30px;line-height:20px}
footer .btn-default.btn-resa i.fa{font-size:30px;line-height:20px}

.btn-default{border:2px solid ;border-radius:50%;color:#FFF;font-size:15px;text-align:center;display:inline-block;text-transform:uppercase;transition:0.2s;width:150px;height:150px;}
.btn-default i.fa{font-size:40px;}
.btn-default.btn-plan{background:#667545;border-color:#667545}
.btn-default.btn-plan:hover{color:#FFF;background: linear-gradient(45deg, #8d610b 6%, #bb8120 17%, #b98d36 27%, #fdeb9d 45%, #f4f1c2 50%, #ffef9a 54%, #ab7840 78%, #d6a947 86%, #8d610b 100%);}
.btn-default.btn-resa{background: linear-gradient(45deg, #8d610b 6%, #bb8120 17%, #b98d36 27%, #fdeb9d 45%, #f4f1c2 50%, #ffef9a 54%, #ab7840 78%, #d6a947 86%, #8d610b 100%);color:#181c1e;border-color:#f99d1c;font-size:20px}
.btn-default.btn-resa i.fa{line-height:60px}
.btn-default.btn-resa:hover{color:#fff;background:#667545}

#modal-resa iframe{width:100%;height:600px}
#modal-resa .modal-body{padding:0}

#btn-resa{position:relative}
#btn-resa .bonnet{width:100%;position:absolute;top:-90px;right:-80px;bottom:0;}

.prix-top{background:#AAA;padding:5px;color:#fff;}
.prix-second{background: linear-gradient(45deg, #8d610b 6%, #bb8120 17%, #b98d36 27%, #fdeb9d 45%, #f4f1c2 50%, #ffef9a 54%, #ab7840 78%, #d6a947 86%, #8d610b 100%);padding:5px;color:#181c1e;margin-bottom:-30px}

/* Pour les écrans de taille moyenne */
@media screen and (max-width: 1199px) {
    .col-md-3 {
        width: 50%;
        float: left;
    }
	header #logo img{max-height:200px;}
	#tarifs .btn-resa{width:200px;height:200px;font-size:15px;}
	#tarifs .bloc .prix{font-size:50px}
	#tarifs .autre-presta{padding:10px;}
}

/* Pour les écrans de taille moyenne */
@media screen and (max-width: 991px) {
	#plan .bloc{min-height:140px;margin-top:20px}
	#home .btn-default.btn-plan{margin-top:80px}
}

/* Pour les petits écrans */
@media screen and (max-width: 767px) {
    .col-md-3 {
        width: 100%;
        float: none;
    }
	header #logo{text-align:center;position:relative;left:0;top:0}
	header #logo img{height:180px;}
	header #title .section-table{height:220px}
	header #menu{display:inline-block}
	header #title .ll{font-size:30px}
	header nav ul{display:none;}
	header nav{position:fixed;z-index:1000;background:rgba(255,255,255,0.5);transition:0.2s}
	header nav li{text-align:center;display:block;margin:10px 0}
	#home .btn-default.btn-plan,#home .btn-responsive a{width:200px;height:200px;font-size:15px;margin-top:50px}
	#home .btn-responsive{display:block}
	#tarifs .btn-resa{display:none;}
	 #tarifs .bloc {
        height: auto;
        margin-bottom: 20px;
        padding: 20px;
    }

    #tarifs .bloc .prix {
        font-size: 30px;
        margin-bottom: 30px;
    }

    #tarifs .bloc .prix-reduc {
        font-size: 16px;
        margin-top: 5px;
    }

    #tarifs .bloc .type {
        font-size: 14px;
        margin-top: 10px;
        padding: 0 5px;
    }

    #tarifs .bloc .type span {
        display: inline-block; /* Assurer que chaque type de véhicule occupe son propre espace */
    }

    #tarifs .bloc .content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
	footer .btn-default.btn-plan{font-size:15px;width:120px;height:120px;margin-right:30px;}
	footer .btn-default.btn-resa{font-size:13px;width:120px;height:120px}
	footer .btn-default.btn-plan i.fa{font-size:20px;line-height:13px}
	footer .btn-default.btn-resa i.fa{font-size:20px;line-height:13px}
}

/* Pour les écrans très petits */
@media screen and (max-width: 525px) {
  	header #logo{text-align:center;position:relative;left:0;top:0}
	header #logo img{height:150px;}
  header #title .cta {
        padding: 0 20px;
    }
    header #title .section-table {
        height: 180px;
    }
    header .rect {
        display: none;
    }
    #tarifs .col-xs-8 {
        width: 100%;
    }
    #tarifs .resp {
        display: none;
    }
    #tarifs .autre-type span {
        display: inline;
    }
    #btn-resa:before {
        display: none;
    }

    #tarifs .bloc {
        height: auto;
        margin-bottom: 20px;
        padding: 15px;
    }

    #tarifs .bloc .prix {
        font-size: 40px;
        margin-bottom: 30px;
    }

    #tarifs .bloc .prix-reduc {
        font-size: 14px;
        margin-top: 5px;
    }

    #tarifs .bloc .type {
        font-size: 12px;
        margin-top: 10px;
        padding: 0 5px;
    }
}

/* Pour les écrans très très petits */
@media screen and (max-width: 500px) {
  	header #logo{text-align:center;position:relative;left:0;top:0}
	header #logo img{height:130px;}   
   #home .col-xs-6 {
        width: 100%;
    }
    #home .local {
        width: 100%;
        height: auto;
    }
    #tarifs .autre-bloc {
        height: auto;
    }
    #tarifs .bloc {
        height: auto;
        margin-bottom: 20px;
        padding: 10px;
    }
    #tarifs .bloc .prix {
        font-size: 26px;
        margin-bottom: 10px;
    }
    #tarifs .bloc .prix-second {
        padding: 5px;
        margin-bottom: -10px;
    }
    #tarifs .bloc .prix-reduc {
        font-size: 14px;
        margin-top: 5px;
    }
    #plan .col-xs-4 {
        width: 100%;
    }
    #plan .bloc {
        height: auto;
        min-height: auto;
    }
    footer .col-xs-2,
    footer .col-xs-10 {
        width: 100%;
        text-align: center;
    }
    footer .col-xs-2 .logo {
        text-align: center;
    }
}

/* Pour les écrans très très très petits */
@media screen and (max-width: 450px) {
  	header #logo{text-align:center;position:relative;left:0;top:0}
	header #logo img{height:120px;}    
	header #menu {
        width: 50px;
    }
    header #menu span {
        display: none;
    }
    #tarifs .col-xs-4 {
        width: 50%;
    }

    #tarifs .bloc {
        height: auto;
        margin-bottom: 20px;
        padding: 10px;
    }

    #tarifs .bloc .prix {
        font-size: 24px;
        margin-bottom: 10px;
    }

    #tarifs .bloc .prix-reduc {
        font-size: 12px;
        margin-top: 5px;
    }

    #tarifs .bloc .type {
        font-size: 10px;
        margin-top: 10px;
        padding: 0 5px;
    }
}

/* Pour les écrans les plus petits */
@media screen and (max-width: 375px) {
      	header #logo{text-align:center;position:relative;left:0;top:0}
	header #logo img{height:80px;}
	header #title .rf {
        font-size: 30px;
    }
    header #title .cta {
        font-size: 20px;
    }
    header #title .ll {
        font-size: 30px;
    }

    /* Ajouter les styles spécifiques pour les blocs tarifaires */
    header #title .rf {
        font-size: 30px;
    }
    header #title .cta {
        font-size: 20px;
    }
    header #title .ll {
        font-size: 30px;
    }

    #tarifs .bloc {
        height: auto;
        margin-bottom: 20px;
        padding: 5px;
    }

    #tarifs .bloc .prix {
        font-size: 22px;
        margin-bottom: 10px;
    }

    #tarifs .bloc .prix-reduc {
        font-size: 10px;
        margin-top: 5px;
    }

    #tarifs .bloc .type {
        font-size: 8px;
        margin-top: 10px;
        padding: 0 5px;
    }
	#tarifs .bloc .bloc-titre {
    padding: 15px;
    border-bottom: 1px solid #667545;
    color: #667545;
    font-size: 15px;
    font-family: 'Ethnocentric', sans-serif;
}
}
/* ===== Bandeau promo doré ===== */
.promo-rails {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 15px 0; /* espace au-dessus et en dessous */
  font-size: 16px;
  font-weight: bold;
  color: #000;
  text-transform: uppercase;
  background: linear-gradient(45deg, #8d610b 6%, #bb8120 17%, #b98d36 27%, #fdeb9d 45%, #f4f1c2 50%, #ffef9a 54%, #ab7840 78%, #d6a947 86%, #8d610b 100%);
  padding: 8px 0;
  border-radius: 4px;
}


}