body,html {
    margin: 0;
    padding: 0;
    font-family: 'Overpass', 'Roboto', sans-serif;
    overflow-x: hidden
}

body {
    color: #333
}
:root{
      --couleur-principale: rgba(54, 94, 123, 1) ;
}

a {
    color: #365e7b
}

a:hover,a:focus {
    text-decoration: none;
    outline: 0px;
    color: #6a6a58;
    transition: all 225ms ease-in-out 0ms
}

h1{
    font-size : clamp(20px ,40px, 45px);
    color : var(--couleur-principale);
    font-weight : 900;
}

h2,.h2 {
    font-size: 1.6rem;
    line-height: 2rem;
    font-weight: 900;
    /* color: #6a6a58; */
    color : var(--couleur-principale);
    text-transform: uppercase
}

h3,.h3 {
    font-size: 1.4rem;
    line-height: 1.7rem;
    /* color: #6a6a58; */
    color : var(--couleur-principale);
    font-weight: 700
}

@media (max-width: 768px) {
    h2,.h2 {
        font-size:1.5rem;
        line-height: 1.7rem
    }

    h3,.h3 {
        font-size: 1.3rem;
        line-height: 1.5rem
    }
}

.type-agence table tr th {
    color : var(--couleur-principale); 
    font-size : clamp(16px , 20px , 22px)
}

.bleu {
    color: #365e7b
}

.bleu-f {
    color: #172e36
}

.bleu-c {
    color: #5ea3d5
}

.bleu-ciel {
    color: #ccf4ff
}

.bleu-marine {
    color: #00679f
}

.bg-sidebar {
    background: #0093d9
}

.maron {
    color: #bfa360
}

.blanc {
    color: #fff
}

.noire {
    color: #000
}

.gold {
    color: #ffca08
}

.bg-blanc {
    background: #fff
}

.bleu-vert {
    color: #52b1c7
}

.bg-maron {
    background: #bfa360
}

.bg-maron-c {
    background: #efe5bd
}

.bg-maron-ciel {
    background: #f6f1db
}

.bg-maron-f {
    background: #b0a98b
}

.bg-bleu {
    background: #365e7b
}

.bg-bleu-c {
    background: #5ea3d5
}

.bg-bleu-ciel {
    background: #ccf4ff
}

.bg-bleu-marine {
    background: #00679f
}

.bg-gris {
    background: #6a6a58
}

.bg-gris-c {
    background: #c6c6bf
}

.bg-gris-ciel {
    background: #f1f1f1
}

.bg-bleu-fonce {
    background: #0e5179
}

.gris {
    color: #6a6a58
}

.gris-c {
    color: #c6c6bf
}

.gris-ciel {
    color: #f1f1f1
}

.yellow {
    color: #ffe400
}

ul {
    padding-left: 0px
}

ul>li {
    list-style: none;
    font-size: 1em
}

select:focus {
    background: transparent !important
}

.display-block-mobile {
    display: none !important
}

.display-none-mobile {
    display: block !important
}

.padding-article-left {
    padding-left: 100px
}

.border-ra {
    border-radius: 0px
}

.cur-pointer {
    cursor: pointer
}

.text-shadow {
    text-shadow: 0 0 0.5rem rgba(0,0,0,0.5)
}

.overflow-hidden {
    overflow: hidden
}

.page-content {
    min-height: 40vh;
    padding: 0 0.75rem 3rem 0.75rem
}

.page-content img {
    max-width: 100%
}

@media (max-width: 576px) {
    .page-content {
        min-height:30vh;
        padding: 0 0 3rem 0
    }
}

.card.box-shadow {
    transition: box-shadow .5s ease-in-out;
    border: 1px solid #f1f1f1
}

.card.box-shadow:hover {
    box-shadow: 0 0.2rem 1rem rgba(0,0,0,0.15)
}

.article-link {
    color: #000
}

.primary-block-title {
    text-transform: uppercase;
    background: #496f8c;
    color: #fff;
    padding: 10px;
    text-align: center
}

.primary-block-title a {
    color: #fff
}

.hike-path-title {
    clear: both
}

.dotted-bottom {
    border-bottom: 4px dotted #496f8c
}
.hero-location{
background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),
url('https://www.marseilletourisme.fr/wp-content/uploads/marseille-vieux-port.jpg') center/cover no-repeat;
padding:80px 0
}
.widget-wrapper{background:#fff;border-radius:10px;padding:15px}
.content-section{padding:60px 0}
.cta-pro{background:#0b4c6a;color:#fff;padding:60px 0}
.cta-pro .btn-primary{background:#ec5727;border:none}

.vehicules table tr th{
    font-size : clamp(18px , 22px , 22px)
}
/* points cles  */
.points-cles{
   background : rgba(175, 218, 249, 0.5) !important;
   padding : 50px !important;
}
/* faqAccordion */
#faqAccordion h5 button{
    color : rgba(22, 90, 129, 1) !important;
    font-weight : 600;
    text-decoration : none !important
}
#faqAccordion .card {
   border : 1px solid rgba(0, 0, 0, 1) !important;
}
#faqAccordion .card .card-header {
    background-color : transparent !important;
    border : none !important;
}
/* Budget  */
#budget .container .row .voiture {
    background-color: rgba(239, 239, 239, 1) !important;
    border-radius : 4px;
}
#budget .container .row .voiture img , #budget .container .row .voiture p{
    position: relative;
}
#budget .container .row .voiture img{
    top: -45px;
}
#budget .container .row .voiture p{
    top : -20px;
}
#budget .container .row .voiture p strong{
    color : rgba(54, 94, 123, 1) !important;
    font-weight :700;
    font-size : 16px !important;
}
#budget .container .row .voiture p span{
    color : rgba(85, 85, 85, 1) !important;
    font-size : clamp(18px , 24px , 24px)
}
/* Prix carburant  */
#budget .row{
    gap : 20px !important;
}
#budget .prix-carburant{
  background-color: rgba(215, 236, 252, 1) !important;
  border-radius : 4px !important;
}
#budget .prix-carburant h4{
    font-size : clamp(18px , 20px , 24px);
    font-weight : 900 !important;
    color : rgba(54, 94, 123, 1) !important;
}
#budget .prix-carburant p{
    font-size : clamp(18px , 24px , 24px);
    color : rgba(85, 85, 85, 1);
}

@media (min-width: 768px) {
    #budget .prix-carburant{
     flex : 0 0 48% !important;
    }
    #budget .container .row .voiture {
    flex :  0 0 32% !important;
    }
}

/* p-text  */
.p-text {
    color : rgba(22, 90, 129, 1) !important;
    font-weight : 600 !important;
}
/*  banner */
.banner .container {
    display : flex !important;
    align-items : center;
    gap : 20px;
    background : #000; 
    border-radius : 20px;
    padding-left : 0px;
}
.banner .container .left{
  width : 40%;
}
.banner .container .right{
  width : 60% ;
}
.banner .container .left img {
    border-radius : 20px;
    width : 100%
}
.banner .container .right{
    color : #FFF;
    padding-left : 50px
}
.banner .container .right h2{
    color : #FFF;
    text-transform : capitalize;
}
.banner .container .right a{
    color : #000;
    background : #FFF;
    padding : 10px 30px;
    border-radius : 50px;
    font-weight : 700;
}
@media(max-width : 765px){
    .banner .container {
        flex-direction : column;
        padding : 20px;
        padding-left : 20px !important;
    }
    .banner .container .left{
     width : 100%;
    }
    .banner .container .right{
    width : 100% ;
    }
    .banner .container .right{
    padding-left : 0px
    }
}
/* CTA  */
.cta a {
    /* background: var(--couleur-principale); */
    background: rgb(75 131 172);
    border-radius: 27px;
    color: #FFF;
    padding: 16px 34px;
    margin: 0 auto;
}