:root {
     --white: #fff;
     --black: #111;
     --orange: #ffcc00;
     --gps-fond: #fcf8f4;
     --gps-noir-fond: #2f3236;
     --gps-noir-fond-transparent: #10539080;
     --gps-noir-text: #2f3236;
     --gps-orange-clair: #fce9da;
     --gps-orange-clair-transparent: #fce9da50;
     --gps-orange-fond: #df7400;
     --gps-orange-text: #ef7d01;
     --gps-gris-clair: #E9E9E9;
     --ombre: #00000028;
     --ombre-sombre: #00000080;
     --orange: #ef7d01;
     --orange-hvr: #f19128;
     --black: #000000;
     --black-hvr: #313131;
     --background: #f7f7f7;
}
 @font-face {
     font-family: 'Quicksand';
     src: url("fonts/quicksand/Quicksand-VariableFont_wght.ttf");
}
 @font-face {
     font-family: 'Montserrat';
     src: url("fonts/montserrat/Montserrat-VariableFont_wght.ttf");
}
 body {
     font-family: 'Prompt', sans-serif;
    /*background-color: var(--gps-fond) !important;
    */
     word-wrap: break-word;
}
 u {
     text-decoration-color: var(--orange);
     font-weight:bold;
}
 #contenu {
     padding-top: 5.5em !important;
}
 #navbarNav .navbar-nar {
     margin-top: 10px;
}
 #navbarNav .navbar-nar .nav-item {
     margin: 5px 0;
}
 #navigation {
     top: 0;
     z-index: 1500;
     margin-bottom: 5rem;
     transition: all .3s;
}
 #navigation:has( > div > #navbarNav.show) {
     min-height: 50vh;
     background-color: var(--gps-orange-clair) !important;
}
 #navigation:has( > div > #navbarNav.collapsing) {
     min-height: 50vh;
     background-color: var(--gps-orange-clair) !important;
}
 #navbarNav {
     margin-top: 10px;
     flex-direction: row;
}
 #navbarNav > div > div{
     justify-content: center 
}
 #navbarNav a.nav-link {
     color: var(--gps-noir-text);
     font-family: 'Montserrat', sans-serif;
     font-weight: bold;
     font-size: 12pt;
     letter-spacing: 1px;
     text-transform: uppercase;
}
 .modal {
     margin-top: 6.5rem;
}
 @media (min-width: 576px){
     .modal {
         --bs-modal-margin: 8.75rem;
    }
}
 .nav-item {
     margin: 0 15px;
}
 .nav-link {
     color: var(--bleu);
     font-weight: 400;
     transition: all .4s;
}
 .dropdown-toggle {
     white-space: unset;
}
 .dropdown-toggle::after{
     display: inline;
     vertical-align: -0.845em;
}
 @media (max-width: 992px) {
     footer {
         padding: 0 0 65px 0 !important;
    }
     #navbarNav > div {
         justify-content: center;
    }
     #navbarNav li.nav-item {
         border-bottom: 1px solid var(--gps-orange-fond);
    }
     .nav-link:hover {
         text-decoration: underline;
         text-decoration-thickness: 2px;
         text-decoration-color: var(--vert);
    }
     #navbarNav {
         transition: all .3s;
         color: var(--gps-noir-text);
         text-align: center;
         min-height: 50vh;
         flex-direction: column;
         justify-content: space-around;
    }
}
 .title {
     color: var(--gps-noir-text);
     font-size: calc(1.275rem + 1.3vw);
    /*2em*/
     text-transform: uppercase;
     font-weight: bold;
     line-height: 1.35em;
     font-family: 'Montserrat' !important;
     padding: 2px 0;
     margin-bottom: 1px;
}
 .subtitle {
     color: var(--gps-orange-text);
     font-size: 20pt;
     font-weight: semi-bold;
     line-height: 21pt;
     padding: 5px 0;
}
 .main-text, .main-text p, .main-text p span {
     color: var(--gps-noir-text);
     text-align: justify;
     font-size: 13pt;
     font-weight: normal;
     line-height: 17pt;
     font-family: 'Montserrat', sans-serif;
}
 .main-text ul {
     list-style-image: url(list/check-gps.png);
}
 .main-text ul.unstyle {
     list-style-image: none;
     list-style-type: disc;
}
 .main-btn {
     background-color: var(--gps-orange-fond);
     color: var(--white);
     border-radius: 24pt;
     padding: 1.7vw 1.8vw;
     font-weight: 700;
     font-size: 1vw;
     line-height: 17pt;
     text-transform: uppercase;
     font-family: 'Montserrat', sans-serif;
     border: none;
     text-decoration: none;
     display: inline-block;
     transition-duration: 0.4s;
     cursor: pointer;
}
 .text-blue {
     color: var(--orange);
}
 .text-white {
     color: white !important;
}
 .text-white .title {
     color: white !important;
}
 .text-orange{
     color: var(--orange);
}
 .main-btn:hover {
     background-color: var(--gps-noir-fond);
     color: var(--white);
}
 .a-link {
     color: var(--gps-noir-text);
     font-size: 13pt;
     position: relative;
     padding: 0 5px;
     font-weight: 500;
     line-height: 20pt;
     font-family: 'Raleway', sans-serif;
     text-decoration: none;
}
 .a-link:hover span {
     color: var(--gps-orange-text);
}
 .a-link-green {
     color: var(--gps-orange-text);
     font-size: 13pt;
     position: relative;
     padding: 0 5px;
     font-weight: 500;
     line-height: 17pt;
     font-family: 'Raleway', sans-serif;
     text-decoration: none;
}
 .glassmorph .a-link {
     color: var(--gps-orange-text);
}
 .arrow-right {
     transition: all 0.4s;
     display: inline-block;
     position: relative;
     border: 1px solid var(--gps-orange-text);
     border-radius: 50%;
     width: 28px;
     height: 28px;
     line-height: 17px;
     font-family: 'Raleway', sans-serif;
}
 .arrow-right:before {
     transition: all 0.4s;
     content: "";
     border-top: 1px solid var(--gps-orange-text);
     position: absolute;
     width: 15px;
     top: 50%;
     left: 6px;
}
 .arrow-right:hover::before {
     width: 21px;
     left: 2px;
}
 .arrow-right:after {
     transition: all 0.4s;
     content: "";
     border-right: 1px solid var(--gps-orange-text);
     border-top: 1px solid var(--gps-orange-text);
     position: absolute;
     width: 10px;
     height: 10px;
     rotate: 45deg;
     top: 8.5px;
     left: 10px;
}
 .arrow-right:hover::after {
     left: 13px;
}
 .card-gps {
     transition: all .3s;
     text-align: center;
     margin: 30px 0;
     padding: 40px 50px;
     border: 3px solid var(--gps-orange-fond);
     border-radius: 24pt;
     background-color: var(--white);
     box-shadow: 9px 11px 0px -1px var(--gps-noir-fond);
     -webkit-box-shadow: 9px 11px 0px -1px var(--gps-noir-fond);
     -moz-box-shadow: 9px 11px 0px -1px var(--gps-noir-fond) 
}
 .card-gps:hover {
     background-color: var(--ag-bleu-fond);
     border-color: var(--ag-bleu-fond);
     box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
 .card-gps:hover .title, .card-gps:hover .subtitle, .card-gps:hover .main-text, .card-gps:hover .main-text p, .card-gps:hover .main-text p span {
     color: var(--gps-orange-fond);
}
 .divider {
     border-bottom: 1px solid var(--gps-orange-fond);
     margin: 30px 60px;
}
 .title-divider {
     text-transform: uppercase;
     color: var(--gps-noir-text);
     font-size: 18pt;
     line-height: 21pt;
     font-family: 'Prompt', sans-serif;
}
 .title-divider::after {
     content: "";
     display: inline-block;
     width: 85px;
     margin: 0 0 0 22px;
     height: 2px;
     background-color: var(--gps-orange-fond);
     margin-right: 20px;
}
 .shadow-blue {
     padding: 15px 5px;
     background: var(--white);
}
 .shadow-blue .quote {
     padding 5px 10px;
     border-right: 1px solid var(--gps-orange-fond);
}
 .shadow-blue .quote .title {
     color: var(--gps-orange-text);
     font-size: 18px;
}
 .shadow-blue .quote .subtitle {
     color: var(--gps-noir-text);
     font-weight: 300;
     font-size: 16px;
}
 .shadow-img-colors .img-colors:nth-child(even) img, .shadow-blue {
     box-shadow: 9px 11px 0px -1px var(--gps-noir-fond);
     -webkit-box-shadow: 9px 11px 0px -1px var(--gps-noir-fond);
     -moz-box-shadow: 9px 11px 0px -1px var(--gps-noir-fond) 
}
 .shadow-img-colors .img-colors:nth-child(odd) img{
     box-shadow: 9px 11px 0px -1px var(--gps-orange-fond);
     -webkit-box-shadow: 9px 11px 0px -1px var(--gps-orange-fond);
     -moz-box-shadow: 9px 11px 0px -1px var(--gps-orange-fond) 
}
 .shadow-img-colors .img-colors:nth-child(odd) img {
     margin-top: 25px;
}
 .blue-shadow-block {
     box-shadow: 9px 11px 0px -1px var(--gps-noir-fond);
     -webkit-box-shadow: 9px 11px 0px -1px var(--gps-noir-fond);
     -moz-box-shadow: 9px 11px 0px -1px var(--gps-noir-fond) 
}
 .green-shadow-block {
     box-shadow: 9px 11px 0px -1px var(--gps-orange-fond);
     -webkit-box-shadow: 9px 11px 0px -1px var(--gps-orange-fond);
     -moz-box-shadow: 9px 11px 0px -1px var(--gps-orange-fond) 
}
 @media screen and (min-width: 992px){
     .card-gps {
         margin: 30px 0;
         padding: 40px 15px;
    }
     .shadow-img-colors .img-colors:nth-child(odd) img{
         box-shadow: 0px 0px 0px 44px var(--gps-orange-fond);
         -webkit-box-shadow: 0px 0px 0px 44px var(--gps-orange-fond);
         -moz-box-shadow: 0px 0px 0px 44px var(--gps-orange-fond) 
    }
     .shadow-img-colors .img-colors:nth-child(even) img{
         box-shadow: 0px 0px 0px 44px var(--gps-noir-fond);
         -webkit-box-shadow: 0px 0px 0px 44px var(--gps-noir-fond);
         -moz-box-shadow: 0px 0px 0px 44px var(--gps-noir-fond);
         margin-top: 45px !important;
    }
}
 .glassmorph {
     position: absolute;
     top: calc(50% - 35%);
     left: calc(50% - 25%);
     background: var(--gps-orange-clair-transparent);
     backdrop-filter: blur(4px);
     border-radius: 7pt;
     width: 50%;
     height: 70%;
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;
     align-items: center;
     color: var(--gps-noir-text);
     font-size: 20pt;
     font-weight: bold;
}
 .relative {
     position: relative;
}
 .negative-margin {
     margin-top: -203px;
     margin-bottom: 75px;
}
 .skew-blue {
     transform: skewY(5deg) !important;
     background-color: var(--gps-noir-fond);
     min-height: 50px;
     padding: 90px 0;
}
 .anti-skew-blue {
     display: flex;
     justify-content: center;
     margin: 0 0 0 0;
     transform: skewY(-5deg);
     background-color: var(--gps-noir-fond);
     min-height: 50px;
}
 .blue-card, .white-card {
     padding: 25px 10px 25px 10px;
     margin: 15px 0 15px 0;
}
 .white-card {
     background-color: var(--white);
}
 .blue-card {
     background-color: var(--gps-orange-clair);
}
 .check {
     color: var(--white);
     display: inline-block;
     width: 20px;
     height: 20px;
     border-radius: 50%;
     background-color: var(--gps-orange-fond);
     font-size: 11pt;
     font-weight: bold;
     line-height: 23px;
     text-align: center;
     margin-right: 15px;
}
 .image-title {
     position:absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
     color: var(--white);
     font-family: 'Prompt', sans-serif;
     font-size: 20pt;
     font-weight: bold;
     line-height: 21pt;
     border-radius: 7pt;
     padding: 10px 10px;
     background-color: var(--gps-noir-fond-transparent);
}
/* =============== Timeline =============== */
 .timeline-container {
    /*box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -45px inset;
    */
     background: var(--white);
     padding: 20px 15px;
}
 .timeline-container .history-date {
     padding: 5px 5px;
     position: relative;
     width: 70px;
     height: 70px;
     border-radius: 50%;
     background-color: var(--white);
     box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}
 .timeline-container .history-date > .date {
     font-size: 11pt;
     font-weight: bold;
     line-height: 51px;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: calc(100% - 20px);
     height: calc(100% - 20px);
     color: var(--white);
     text-align: center;
     border-radius: 50%;
     background-color: var(--gps-noir-fond);
}
 .timeline-container .timeline:last-of-type .history-date > .date {
     background-color: var(--gps-orange-fond);
}
 .timeline-container .history-divider {
     font-size: 21pt;
     line-height: 21pt;
     height: 70px;
     letter-spacing: 4px;
     color: var(--gps-noir-fond);
}
 .history-divider {
     display: none;
}
 .timeline-container .history-text {
     padding: 0 0 0 20px;
     vertical-align: top;
}
 .timeline-container .timeline .next-down {
     border-right: 3px solid var(--gps-orange-fond);
     border-bottom: 3px solid var(--gps-orange-fond);
     padding: 0;
     height: 20px;
     width: 20px;
     position: absolute;
     top: 80px;
     left: 49px;
     transform: rotate(45deg);
}
 @media (max-width: 992px) {
     .timeline-container .history-text {
         padding-top: 40px;
    }
}
 .timeline-container .timeline:last-of-type .next-down {
     height: 0;
     width: 0;
     border: none;
}
/* =============== Green card =============== */
 .green-card {
     background-color: var(--gps-orange-fond);
}
 .green-card .title, .green-card .subtitle, .green-card .main-text p {
     color: var(--white);
}
/* =============== Testimonials =============== */
 .testimonials-container {
     background-color: var(--gps-gris-clair);
}
/* =============== Quote =============== */
 .quote .title {
     padding-top: 11px;
}
 .quote .subtitle{
     font-size: 19px;
}
 .quote-sign {
     line-height: 2em;
     font-size: 30px;
     color: var(--orange);
}
/* =============== Assureur =============== */
 .assureur-tel-link {
     transition: all .2s;
     text-decoration: none;
     font-size: 45px;
     font-family: 'Prompt', sans-serif;
     color: var(--black);
}
 .assureur-tel-link:hover, .assureur-tel-link:hover > .orange, .assureur-tel-link:hover > .blue {
     color: var(--gps-orange-text) !important;
}
 .assureur-tel-link > .orange {
     transition: all .2s;
     color: var(--orange);
}
 .assureur-tel-link > .blue {
     transition: all .2s;
     color: var(--gps-noir-text);
}
 .glass-black-text {
     position:absolute;
     width: calc(50vw / 0.7);
     top: 25%;
     left: 50%;
     transform: translate(-50%, -25%);
     text-align: center;
     color: var(--white);
     font-family: 'Prompt', sans-serif;
     font-size: 20pt;
     font-weight: bold;
     line-height: 21pt;
     border-radius: 7pt;
     padding: 45px 30px;
     background-color: var(--ombre-sombre);
}
/* =============== Footer =============== */
 footer {
     background-color: var(--gps-noir-fond);
     padding: 20px 0;
     color: white;
     font-size: 10pt;
     font-weight: bold;
     text-align: center;
     letter-spacing: 1px;
     line-height: 20pt;
}
 footer, footer ul li > a {
     color: white !important;
}
 a .ico-text {
     color: black;
     text-decoration-color: var(--orange);
}
 .footer-navigation {
     list-style-type: none;
}
 .footer-navigation li {
     display: block;
     font-weight: lighter;
}
 .footer-navigation li a{
     text-decoration: none;
}
 footer .copyright {
     text-align: start;
     color: var(--white);
}
/* =============== Slide =============== */
 .carte-de-france path {
     stroke: #000;
     stroke-width: 1px;
     stroke-linecap: round;
     stroke-linejoin: round;
     stroke-opacity: .25;
     fill: #ddd;
     transition: all .3s;
}
 .carte-de-france path{
     fill: #ddd;
     transition: all .3s;
}
 .carte-de-france path.concessionaire{
     fill: var(--orange);
}
/* .carte-de-france g:hover path.concessionaire {
     fill: var(--gps-orange-fond);
}*/
 .carte-de-france g path.concessionaire:hover {
     fill: var(--gps-orange-fond);
}
/* =============== Helper =============== */
 .rounded {
     border-radius: 10px !important;
}
 @media (max-width: 767.98px) {
     .col-sm-0 {
         display: none;
    }
     .col-0 {
         display: none;
    }
}
 @media (max-width: 450px) {
     .p-5 {
         padding: 0px!important;
    }
}
 @media (max-width: 991.98px) {
     .main-btn {
         font-size: clamp(16px, 1.2vw, 4vw);
    }
     .col-md-0 {
         display: none;
    }
}
 @media (min-width: 991.99px) {
     .col-lg-0 {
         display: none;
    }
     .-mr-1 {
         margin-right: -1.5rem;
    }
     .px-0-md {
         padding-right: 0;
         padding-left: 0;
    }
     .pl-0-md {
         padding-left: 0;
    }
     .pr-0-md {
         padding-right: 0;
    }
}
 @media (min-width: 1399.99px) {
     .-mr-1 {
         margin-right: -2.5rem;
    }
}
 .skew {
     transform: skewY(2deg) !important;
     margin: 40px 0 0 0;
}
 .rec_1 {
     padding: 0 44px !important;
     font-size: 0.7vw;
}
 .rec_2 {
     padding: 10px 44px 0 44px !important;
     font-size: 0.7vw;
}
 .glassmorph_rec1, .glassmorph_rec2 {
     position: absolute;
     top: calc(50% - 35%);
     left: calc(50% - 25%);
     background: var(--gps-orange-clair-transparent);
     backdrop-filter: blur(4px);
     border-radius: 7pt;
     width: 50%;
     height: 70%;
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;
     align-items: center;
     color: var(--gps-noir-text);
     font-size: 0.7vw;
     font-weight: bold;
}
 @media (min-width: 991.99px) {
     .glassmorph_rec2 {
         top: calc((50% - 35%) + 30px) !important;
    }
}
 @media (max-width: 991.99px) {
     .rec_1 {
         margin: 22px 0 !important;
    }
     .rec_2 {
         margin: 22px 0 !important;
    }
     .glassmorph_rec2 h2, .glassmorph_rec1 h2 {
        /*font-size: 3.2vw !important;
        */
         font-size: calc(1rem + 1vw) !important;
    }
}
 .marge-plus {
     padding: 0 calc(var(--bs-gutter-x) * 3) 0 calc(var(--bs-gutter-x) * 3) !important;
}
/* New style */
 .bg-orange {
     background-color: var(--orange);
     transition: all .3s;
}
 .bg-orange:hover {
     background-color: var(--orange-hvr);
     transition: all .3s;
}
 .bg-black {
     background-color: var(--black);
}
 .bg-black:hover {
     background-color: var(--black-hvr);
}
 .little-radius {
     border-radius: 9px;
}
 .skew-container {
     transform: skew(-15deg, 0deg);
     overflow-y: clip;
     position: absolute;
     width: 50%;
     height: 100%;
}
 #orange-part {
     color: var(--black);
     padding: calc(100vw / 40) 25% 0 26%;
     margin-top: -5%;
     margin-left: -25%;
     height: 55%;
     width: 125%;
     font-size: 2.5vw;
     font-weight: 700;
}
 #black-part > div, #orange-part > div{
     display: flex;
     flex-direction: column;
     align-content: center;
     justify-content: center;
}
 #black-part {
     color: var(--orange);
     margin-left: -1%;
     padding: calc(15vw / 15) 20% calc(2vw / 15) 12%;
     height: 55%;
     width: 101%;
     font-size: 2.5vw;
     font-weight: 700;
     display: flex;
     flex-direction: column;
     align-content: center;
     justify-content: center;
}
 @media (max-width: 992px){
     #black-part {
         padding-left: 16%;
    }
}
 .anti-skew {
     transform: skew(15deg, 0deg);
     overflow-y: clip;
     width: 100%;
     height: 100%;
     font-size: 2vw;
}
 .tile {
     padding: 35px;
     margin: 0;
}
 .tile-image {
     padding: 0;
     height: 100%;
}
/*

.tile-image > picture{
    height: 100%;
    display: block;
}

.tile-image > picture > img{
    height: 100%;
    width: auto;
    display: block;
}*/

 .tile.bg-black h3.h3 {
     color: var(--orange);
}
 .btn-action-link {
     color: var(--orange);
     padding: 7px 17px 12px 17px;
     font-weight: 400;
     font-size: 1.6em;
     text-decoration: none;
     border: var(--orange) 1px solid;
     border-radius: 50%;
     transition: all .3s;
}
 .btn-action-link:hover {
     color: var(--orange-hvr);
     border: var(--orange-hvr) 3px solid;
     font-size: 1.8em;
}
 .tile.bg-orange .btn-action-link {
     color: var(--black);
     border: var(--black) 1px solid;
}
 .tile.bg-orange .btn-action-link:hover {
     color: var(--black-hvr);
     border: var(--black-hvr) 3px solid;
}
 .btn-call-intro{
     color: white;
     padding: 6px 8px;
     border: 2px solid white;
     border-radius: 6px;
     text-decoration: none;
}
 .btn-call-intro:hover{
     color:white;
}
 .ls{
     letter-spacing: .2rem;
}
 .font-weight-bold {
     font-weight: bold;
}
 .h0 {
     font-size: 2.3vw;
}
 a{
     text-decoration-color: var(--orange) !important;
}
 .sticky-image-container {
     position: -webkit-sticky;
     position: sticky;
     top: 0;
     z-index: 100;
    /* Assurez-vous que le z-index est supérieur à d'autres éléments pour qu'il reste visible en haut */
}
 .planSite li {
     margin: 3px 5px;
     padding: 5px 7px;
     list-style: none;
     border: black 1px solid;
     border-radius: 5px;
}
 .planSite li a {
     text-decoration: none;
     color: var(--orange);
     transition: all .3S;
}
 .planSite li a:hover {
     color: #000;
}
 .bloc-enfant .sticky-top {
     z-index :0 !important;
}
 #titre\ skew {
     background: var(--orange);
     color: white;
     font-weight: 800;
     padding: 5px 0 5px 0;
}
 #titre\ skew .main-text > div {
     text-align:center;
}
 .linksistel a.link {
     border: 2px solid black;
     border-radius: 6px;
}
 .linksistel > a[href] {
     border-color: black;
     color: white;
     font-weight: bold;
     background-color: black;
     transition: all .3s;
}
 .linksistel > a[href]:hover {
     color: var(--orange);
}
 .linksistel > a[href^="tel:"] {
     border-color: var(--orange);
     color: white;
     font-weight: bold;
     background-color: var(--orange);
     transition: all .3s;
}
 .linksistel > a[href^="tel:"]:hover {
     background-color: var(--gps-orange-fond);
     border-color: var(--gps-orange-fond);
}
 .linksistel > a[href^="tel:"]:hover span {
     color: black;
}
 a {
     color: var(--orange);
     font-weight: bold;
}