@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Open+Sans');/*font-family: 'Open Sans', sans-serif;*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');/*font-family: 'Open Sans Condensed', sans-serif;*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');/*font-family: 'Poppins', sans-serif;*/
@import url('https://fonts.googleapis.com/css2?family=Yeseva+One&display=swap');/*font-family: 'Yeseva One', cursive;*/

@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap');/*font-family: "Fjalla One", sans-serif;*/
/* HEADER */
/*#header { background:#fff; width: 100%; height: 200px; background-size:100%;}*/


/*HEADER VIDEO*/

header {
  position: relative;
  background-color: black;
  height: 100vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}

header img { width:auto}


@media (max-width: 1400px) {
header {
    position: relative;
    background-color: black;
    height: 62vh;
    min-height: 25rem;
    width: 100%;
    overflow: hidden;
}
}


@media (max-width: 1200px) {
    header {
        position: relative;
        background-color: black;
        height: 50vh;
        min-height: 25rem;
        width: 100%;
        overflow: hidden;
    }
}



@media (max-width: 992px) {
header {
  position: relative;
  background-color: black;
  height:33vh;
  min-height:15rem;
  width: 100%;
  overflow: hidden;
}

    header img { width:40%}

}
header h3 { font-size:28px; font-family: "Fjalla One", sans-serif; color:#0867a9}

@media (max-width: 992px) {
header h3 { font-size:18px; font-family: "Fjalla One", sans-serif;}
}

header a { color:#0867a9}
header a:hover { color:#0867a9}
header video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}


header #carouselExampleControls  {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}


header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: white;
  opacity: 0.5;
  z-index: 1;
}





@media (max-width: 1400px) {
header #carouselExampleControls  {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 200%;
  width: 100%;
  background-color: white;
  opacity: 0.5;
  z-index: 1;
}

}



header .container {
  position: relative;
  z-index: 2;
}


/*HEADER VIDEO*/


#header.base {background:url("../charte/back-header-1920.webp") no-repeat; background-size: 100%; height: auto; color:#0867a9}
#header.base a {color:#0867a9}
#header p { font-size:28px; font-family: "Fjalla One", sans-serif; color:#0867a9; line-height:1.2em}
#header img {width: auto}
@media (max-width:1024px) {
#header.base {background:url("../charte/back-header-1024.webp") no-repeat; background-size: 100%; height: auto; color:#0867a9}
#header p { font-size:18px; font-family: "Fjalla One", sans-serif; color:#0867a9; line-height:1.2em}
#header img {width: 40%}
}


/*MENU*/
.bg-light {
background-color: #0867a9 !important;
}

.navbar-brand {
display: none!important
}
.navbar-brand.scrolled{
display: block!important
}


.navbar-nav { margin: 0 auto}

@media (max-width: 992px) {
.navbar-nav {margin: 20px 0px;}
.bg-light {background-color: #0867a9 !important;}
}

.navbar-nav.active { display: block}
.navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show > .nav-link {
    color: #fff;
    background-color:  #000; border-radius:20px
}


.navbar-light .navbar-nav .nav-link {
    color: #fff;
    font-family: "Fjalla One", sans-serif;
    font-size:20px; border-radius:20px; text-align: center;
}


.navbar-light .navbar-nav .nav-link:hover {
    color: #fff;
    background-color:  #000; border-radius:20px
}

.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 1rem;
    padding-left: 1rem;
}


.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}


/*Custom ouverture menu mobile*/
@media (max-width: 992px) {
.navbar-collapse {
        position: absolute;
        top: 54px;
        left: 0;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px;
        width: 100%;
    }
.navbar-collapse.collapsing {
        height: auto;
        -webkit-transition: left 0.3s ease;
        -o-transition: left 0.3s ease;
        -moz-transition: left 0.3s ease;
        transition: left 0.3s ease;
        left: -100%;
    }
.navbar-collapse.show {
        left: 0;
        -webkit-transition: left 0.3s ease-in;
        -o-transition: left 0.3s ease-in;
        -moz-transition: left 0.3s ease-in;
        transition: left 0.3s ease-in;
		background-color:#0867a9;height: 900px;
		text-align: center;
    }
 }


/*MENU*/


a, a:hover {color:#000; text-decoration: none}


#section1 {background: none}
#section1 h1 {color:#333333; line-height: 1.4em}
#section1 h2, h3, h4, h5 {color:#333333; line-height: 1.4em}
#section1 p {color:#000;}

#section2 {background: none}
#section2 h1 {color:#333333; line-height: 1.4em}
#section2 h2, h3, h4, h5 {color:#333333; line-height: 1.4em}
#section2 p {color:#000;}

#section3 {background: none}
#section3 h1 {color:#333333; line-height: 1.4em}
#section3 h2, h3, h4 {color:#333333; line-height: 1.4em}
#section3 h5 {color:#333333 !important; line-height: 1.4em}
#section3 p {color:#000;}

#section4 {background: none}
#section4 h1 {color:#333333; line-height: 1.4em}
#section4 h2, h3, h4, h5 {color:#333333; line-height: 1.4em}
#section4 p {color:#000;}

#section5 {background: #000}
#section5 h1 {color:#fff; line-height: 1.4em}
#section5 h2 {color:#fff; line-height: 1.4em}
#section5 h3, h4 {color:#0A0A0A !important; line-height: 1.4em}
#section5 h5 {color:#333333 !important; line-height: 1.4em}
#section5 p {color:#fff;}

#section6 {background: #3d3d3d}
#section6 h1 {color:#fff; line-height: 1.4em}
#section6 h2 {color:#fff; line-height: 1.4em}
#section6 h3 {color:#fff !important; line-height: 1.4em}
#section6 h4 {color:#fff !important; line-height: 1.4em}
#section6 h5 {color:#fff !important; line-height: 1.4em}
#section6 p {color:#fff;}


#section7 {background: url("../../../assets/theme3/charte/back-forfait.webp") no-repeat; background-size:100%; background-color:#fff}
#section7 h1 {color:#000; line-height: 1.4em}
#section7 h2 {color:#000; line-height: 1.4em}
#section7 h3 {color:#000 !important; line-height: 1.4em}
#section7 h4 {color:#000 !important; line-height: 1.4em}
#section7 h5 {color:#000 !important; line-height: 1.4em}
#section7 p {color:#000;}


#section-bouton {background: #0867a9}
#section-bouton h2 {color: #fff}


#section-parallax img {padding-top:30px;}
#section-parallax h2 { color:#000; text-align: center }

@media (max-width: 1400px) {
    #section-parallax h2 {padding-top:50px}
    #section-parallax img {padding-top:10px;}
}

@media (max-width: 992px) {
    #section-parallax h2 {padding-top:50px}
    #section-parallax img {padding-top:10px;}
}

.parallax {
    /* The image used */
    background-image: url("../../../assets/theme3/charte/img-parallax.webp");
    /* Set a specific height */
    height:600px;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


@media (max-width: 1400px) {
    .parallax {
        background-attachment: scroll;
        height:600px;
    }
}


@media (max-width: 960px) {
    .parallax {
        background-attachment: scroll;
        height:600px;
    }
}
/*boutons custom bootstrap*/
.btn-custom {
	color: #fff;
    background-color: #0867a9;
    border-color: #0867a9;
}
.btn-custom:hover, .btn-custom:focus, .btn-custom:active, .btn-custom.active, .open>.dropdown-toggle.btn-custom {
    color: #fff;
    background-color: #0867a9;
    border-color: #0867a9; /*set the color you want here*/
}
/*fin boutons custom bootstrap*/


/*boutons custom bootstrap*/
.button {
  flex: 1 1 auto;
  margin: 0px;
  padding: 20px;
  border: 2px solid #fff;
  text-align: center;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transition: 0.3s; color:#0867a9; background:#fff
}
.button:after {
  position: absolute;
  transition: 0.3s;
  content: "";
  width: 0;
  left: 50%;
  bottom: 0;
  height: 3px;
  background: #000;
}
.button:hover:nth-of-type(1) {
  border-radius: 30px;
}
.button:hover:nth-of-type(1):after {
  width: 0%;
}
.button:hover {
  cursor: pointer;
}
.button:hover:after {
  width: 100%;
  left: 0;
}

/*Fin Boutons*/





/*boutons custom bootstrap*/
.button2 {
    flex: 1 1 auto;
    margin: 0px;
    padding: 20px;
    border: 2px solid #0867a9;
    text-align: center;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    transition: 0.3s; color:#fff; background:#0867a9
}
.button2:after {
    position: absolute;
    transition: 0.3s;
    content: "";
    width: 0;
    left: 50%;
    bottom: 0;
    height: 3px;
    background: #000;
}
.button2:hover:nth-of-type(1) {
    border-radius: 30px;
}
.button2:hover:nth-of-type(1):after {
    width: 0%;
}
.button2:hover {
    cursor: pointer;
}
.button2:hover:after {
    width: 100%;
    left: 0;
}

/*Fin Boutons*/


/*FOOTER*/


footer {
background: #000;
padding: 20px;
min-height: 100px;
}
footer h2 {color: #fff; font-size:18px}
footer p {color: #fff; font-size:14px}
footer p a {color: #fff; }
footer p a:hover {color:#fff; text-decoration: none}
footer p a:visited {color:#fff; text-decoration: none}
footer hr {border-color:#fff; margin: 0rem 0 !important;}
footer ul.list-unstyled li a {color: #fff}
footer .rubrique { color: #fff}
footer .fab {color:#fff}
/*FOOTER*/



.encart { background-color: #9e9e9e;border: 1px solid #eee; padding:20px; border-radius: 10px}



/*FIN INTEGRATION*/

/* ====== Uniquement ce que Bootstrap ne fournit pas : l'animation du marquee ====== */
.logo-marquee {
    overflow: hidden;
}

.logo-marquee__track {
    width: max-content;
    animation: logo-marquee-scroll 28s linear infinite;
    will-change: transform;
}

.logo-marquee:hover .logo-marquee__track {
    animation-play-state: paused;
}

@keyframes logo-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-100% - 2rem)); }
}

@media (prefers-reduced-motion: reduce) {
    .logo-marquee__track { animation-duration: 90s; }
}

.logo-marquee__item {
    width: 300px;
    flex: 0 0 auto;
    opacity: .6;
    transition: filter .2s ease, opacity .2s ease, transform .2s ease;
}

.logo-marquee__item:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.logo-marquee__badge {
    width: 200px;
    height: 200px;
    font-size: 1.2rem;
}




/* ====== Technique "No More Tables" ======
     Sur mobile, le tableau se transforme en liste de cartes empilées :
     chaque ligne devient un bloc, chaque cellule affiche son libellé
     (via data-label) au lieu de dépendre des colonnes du <thead>. */
@media screen and (max-width: 576px) {
    .tarifs-table thead {
        display: none;
    }
    .tarifs-table, .tarifs-table tbody, .tarifs-table tr, .tarifs-table td {
        display: block;
        width: 100%;
    }
    .tarifs-table tr {
        margin-bottom: 1rem;
        border: 1px solid var(--bs-border-color);
        border-radius: .75rem;
        overflow: hidden;
    }
    .tarifs-table td {
        text-align: right;
        padding: .65rem 1rem;
        position: relative;
        padding-left: 50%;
        border: none;
        border-bottom: 1px solid var(--bs-border-color);
    }
    .tarifs-table td:last-child {
        border-bottom: none;
    }
    .tarifs-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 1rem;
        width: 45%;
        text-align: left;
        font-weight: 600;
        color: var(--bs-secondary-color);
    }
}

.tarifs-table td, .tarifs-table th {
    vertical-align: middle;
}

.prix-badge {
    font-size: 0.95rem;
    padding: .45em .9em;
    background-color: #0867a9;
}

.tarifs-table thead th {
    background-color: #0867a9;
    color: #fff;
    border-color: #0867a9;
}




/* Toutes les cartes de forfaits partagent la même hauteur minimale,
   calculée pour laisser tenir le contenu le plus long (Forfait complet VAE).
   Sur mobile (colonnes empilées), la hauteur s'adapte quand même au contenu
   si besoin grâce au min-height (jamais de texte coupé). */
.forfait-col {
    display: flex;
}

.forfait-card {
    width: 100%;
    min-height: 200px;
    display: flex;
    flex-direction: column;
}

@media (max-width: 767.98px) {
    .forfait-card {
        min-height: 0;
    }
}