/* Complément de mutualise_css.css */


/* Important spécial Safari correction comportement row bootsrap 4*/

.row:before,
.row:after {
    display: none !important;
}


/* Définition des polices et taille de polices */

:root {
    --typo-principale: 'Oswald', 'Arial Narrow', Arial, sans-serif;
    --typo-secondaire: 'votre police à définir';
    --font-size-hero-h1: 7rem;
    --font-size-hero-h1-mobile: 2.9rem;
    --font-size-normale-h1: 5rem;
    --font-size-mobile-h1: 3rem;
    --font-size-normale-h2: 3.2rem;
    --font-size-tablette-h2: 2.5rem;
    --font-size-mobile-h2: 1.9rem;
    --font-size-normale-h3: 2rem;
    --font-size-normale-corps: 14px;
    --font-size-normale-card-text: 12px;
    /*A remplacer par .fs-sm*/
    --font-size-normal-input: 20px;
    --font-size-tablette-card-text: 22px;
    /* Fontsize button à harmoniser */
    --font-size-normale-header: 16px;
    --font-size-normale-footer: 14px;
    /*A remplacer par .fs-norm*/
    /* Définition d'une palette de couleurs  */
    --main-bg-color: #0D2624; /*Inscription*/
    --second-bg-color: #D1E3E7; /* Concept */
    --second-button-color: #23898C; /*second navbar */
    --second-button-color-transparent: #23898C; /*second navbar */
    --dark-bg-color: #071A1E;
    --white-bg-color : #fff;
    --main-button-color: #3FF9FF;
    --diff-blue: #18D7DE; /* boutons */
    --diff-light-blue: #6ee4c2;
    --main-text-color: #fff;
    --clear-text-color: #CECECE;
    --dark-text-color: #292929;
    --dropdown-transparent-bg: #CECECE80;
    /* Définition de bordure A RENOMMER + Explicite  */
    --normal_px: 4px;
    --fin_px: 2px;
    --xl_px: 10px;
    --marseille-color: #01A7CC;
    --ciotat-color: #679E89;
}

:root {
    --font-size-normale-bouton: 22px;
    --large_rem: 5rem;
    --fin_rem: 1rem;
    /* = bootstrap -3 ex : pr-3*/
    --normal_rem: 2rem;
    --moyen_rem: 3rem;
    --x-large_rem: 20rem;
}


/* colonnes filtres */
.filterColumn .dropdown-toggle,
.selection_Annee {
    font-size: 22px;
    color: var(--second-button-color);
}

.filterColumn .dropdown-toggle:hover,
.selection_Annee:hover {
    color: var(--main-button-color);
}

/* Seulement sur tablettes */
#tablette_MainMenu {
    margin-bottom: var(--large_rem);
}

/* Formulaires généraux */
.appelFooter {
    border: var(--clear-text-color) solid var(--fin_px);
    font-size: var(--moyen_rem);
    background-color: var(--main-button-color);
    padding: var(--xl_px);
}

/* cpyright */
.footer_bas {
    font-size: 12px;
    color: var(--clear-text-color);
}

/* MENUS */
header .nav>li>a {
    padding: calc(var(--xl_px)/2) calc(var(--xl_px)*2);
}

.btn-navbar {
    font-size: var(--font-size-normale-bouton);
    text-decoration: none;
    margin-bottom: calc(var(--xl_px));
    margin-top: calc(var(--xl_px)/2);
    color: var(--main-bg-color);
    background-color: var(--main-text-color);
    position: relative;
    display: inline-block;
    text-decoration: none !important;
    text-align: center;
    word-break: break-word;
}

.btn-navbar:active {
    -webkit-transform: translate(0px, calc(var(--xl_px)/2));
    transform: translate(0px, calc(var(--xl_px)/2));
    box-shadow: 0px 1px 0px 0px;
}

.nav-item {
    justify-content: center !important;
    display: flex !important;
}

/* passer sur les éléments d'une liste dans nav */
.nav>li>a:hover {
    background-color: transparent;
    color: var(--main-button-color);
    transition: ease-in 200ms;
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

/* Bouton avec changement de taille au survol */
/* class à fixer sur btn qui enveloppe <a>  */
.upScale_btn {
    background: var(--main-button-color)0% 0% no-repeat padding-box;
    color: var(--main-text-color);
    box-shadow: 7px 7px 15px #0000005D;
    transition: 0.2s;
}

.upScale_btn:hover {
    transform: scale(1.1);
    color: var(--main-text-color);
    box-shadow: 0px 0px 2rem var(--second-button-color);
}

/* fin Bouton avec changement de taille au survol */

/*INFO & COMPETENCES*/
.info {
    background-color: var(--main-text-color);
    margin-top: 6rem;
    margin-bottom: 5rem;
}

.info .box {
    background-color: var(--main-bg-color);
    width: 98%;
    margin: inherit;
}

/* .competence {
    height: 498px;
} */


/* Définition du formulaire de contact  */
.contactForm h2 {
    color: var(--main-text-color);
    border: var(--fin_px) solid var(--main-text-color);
    font-size: 4rem;
    padding: var(--xl_px);
    width: 70%;
    margin: auto;
    margin-bottom: 50px;
    text-align: center;

}

/* images */
.bg_resultats {
    background-image: url(/img/images/resultats_resized.jpg);
}
.bg_gallery {
    background-image: url(/img/images/galerie_resized.jpg);
}
.bg_defi {
    background-image: url(/img/images/hero_inscription_resized.jpg);
}


/* shopeo checkout */

.invalide_mdp {
    background-color: #ac000b;
    border: none;
    border-radius: 5px;
}

.invalide_mdp p {
    color: var(--white-bg-color);
}

/* basket */
/* class btn plus et moins */
.qty .count {
    color: #000;
    display: inline-block;
    font-size: 20px;

    padding: 0 2px;
    min-width: 60px;
    width: 60px;
}

.qty .plus {
    cursor: pointer;
    display: inline-block;
    width: 30px;
    height: 30px;
    font-size: 25px;
}

.qty .minus {
    cursor: pointer;
    display: inline-block;
    width: 30px;
    height: 30px;
    font-size: 33px;
}

.plusminus {
    border: 0;
    width: 4%;
    margin: 0;
    text-align: center;
    background-color: var(--white-bg-color);
    appearance: none;
}

.card-subtitle__event-name {
    color: var(--second-button-color);
}

/* ─── Headersecond Navbar ────────────────────────────────────────────────── */
.navbar {
    padding: 0;
    height: 70px;
    /* position: sticky; */
}

.navbar-collapse {
    height: 100%;
}

.navbar-nav,
.header__redirection {
    padding: .5rem 1rem;
    min-width: 8.125rem;
    max-height: 70px;
}


#second-navbar {
    display: none;
    flex-flow: row nowrap;
    justify-content: space-around;
    /* position: fixed;
    top: 70px;
    left: 0;
    z-index: 100; */
    height: 0;
    width: 100%;
    background-color: var(--second-button-color);
}

#second-navbar.Marseille {
    background-color: var(--marseille-color);
}
#second-navbar.La_Ciotat {
    background-color: var(--ciotat-color);
}
#accordionMenuMobile *.Marseille {
    background-color: var(--marseille-color) !important;
}
#accordionMenuMobile *.La_Ciotat {
    background-color: var(--ciotat-color) !important;
}

#second-navbar.show {
    display: flex;
    animation: slideDown 0.2s cubic-bezier(.17, .67, .83, .67);
    animation-fill-mode: both;
}

#second-navbar.hide {
    display: none;
    animation: slideUp 0.2s cubic-bezier(.17, .67, .83, .67);
    animation-fill-mode: both;
}

@keyframes slideDown {
    0% {
        height: 0;
        opacity: 0;
    }

    60% {
        opacity: 1;
        transform: scaleY(0.6) translateY(-30px) rotate(0deg);
    }

    100% {
        height: 50px;
        transform: scaleY(1) translateY(0) rotate(0deg);
    }
}

@keyframes slideUp {
    0% {
        transform: scaleY(1) translateY(0) rotate(0deg);
    }

    60% {
        opacity: 1;
        transform: scaleY(0.6) translateY(-30px) rotate(0deg);
    }

    100% {
        height: 0;
        opacity: 0;
    }
}

#defiLink {
    width: 150px;
}

#resultats_dropdownMenuButton {
    cursor: default;
}


/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -webkit-appearance: textfield !important;
    -moz-appearance: textfield !important;
}


/* tous les liens en bleu turquoise */

a.nav-link {
    text-decoration: none;
    color: var(--white-bg-color);
}

a {
    text-decoration: none;
    color: var(--main-button-color);
}

a:hover {
    text-decoration: underline;
    color: var(--main-button-color);
}


/* classe à créer / intégrer
 */

.button_padding {
    padding: 0.5rem 1.5rem;
}

.bord-rad-10 {
    border-radius: var(--xl_px);
}

.bord-rad-0 {
    border-radius: 0;
}


/* font-size */

.fs-norm {
    font-size: var(--font-size-normale-corps);
}

.fs-sm {
    font-size: var(--font-size-normale-card-text);
}


/* Déclaration font-family à conserver sinon header ne la prend pas en compte */

body {
    font-family: var(--typo-principale);
    background-color: var(--main-bg-color);
    letter-spacing: 0.05rem;
}


/* Définition du HEADER  */

header {
    font-family: var(--typo-principale);
    font-size: var(--font-size-normale-header);
    z-index: 200;
}

header button {
    font-size: var(--font-size-normale-header) !important;
}


/* Définition du logo  */

.logoHeader {
    max-width: 35%;
}

@keyframes animationLogoAccueil {
    0% {
        opacity: 1;
    }

    80% {
        opacity: 0.85;
    }

    100% {
        display: none;
        opacity: 0;
    }
}

.habillage_video_accueil {
    position: absolute;
    max-height: 82vh;
}

.video_accueil_logo {
    position: absolute;
    transform: translate(-50%, 50%);
    left: 50%;
    top: -100px;
    z-index: 100;
    animation-name: animationLogoAccueil;
    animation-duration: 9000ms;
    animation-fill-mode: forwards;
}

.video_accueil_logo_titre {
    font-size: 1.8rem;
    color: white;
    opacity: 0.95;
}


/* Définition de barre de navigation */

#navbarMainMenuToggler {
    background: var(--dark-bg-color);
    /* opacity: 0.95; */
    color: var(--main-text-color);
}

#navbarMainMenuToggler:hover,
#navbarMainMenuToggler:active {
    transition: ease-in-out 200ms;
}

#navbarMainMenuToggler a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}


/* Style du lien correspondant à la quand la page active  */

.active_navLink {
    text-decoration: underline 2px var(--main-button-color);
    color: var(--main-text-color) !important;
}


/* Définition des boutons menus coulissant */

.header_dropdown-toogle {
    color: var(--main-text-color);
    font-size: var(--font-size-normale-header);
}

.header_dropdown-toogle:hover,
.navbar-nav .nav-item .nav-link:hover,
.navbar-nav .nav-item .nav-link:focus {
    /*background: var(--second-button-color);*/
    border-radius: 0;
    transition: none !important;
}

/*.navbar-nav>li:hover {
    background: var(--clear-text-color);
}*/

.nav-link {
    transition: none;
}

#second-navbar.Marseille .dropdown-menu,
#second-navbar.Marseille * .dropdown-menu {
    background: var(--marseille-color);
    min-width: 1rem !important;
}
#second-navbar.La_Ciotat .dropdown-menu,
#second-navbar.La_Ciotat * .dropdown-menu {
    background: var(--ciotat-color);
    min-width: 1rem !important;
}

.header_dropdown-item {
    color: var(--white-bg-color);
    padding: 0.1rem;
}

#navbarMainMenuToggler ul .dropdown .dropdown-menu .dropdown-item:hover {
    background-color: var(--dropdown-transparent-bg);
}


/* Ouverture du drodpdown-menu au survol du bouton Dropdown  */

.dropdown:hover .dropdown-menu {
    display: block;
}


/* Seulement sur Mobile */

#accordionMenuMobile .card:hover {
    background-color: var(--second-bg-color);
}

#accordionMenuMobile .nav-item .nav-link {
    color: var(--main-bg-color);
}

#accordionMenuMobile {
    position: absolute;
    width: 100%;
    left: 0;
    top: 3.5rem
}


/* Définition des messages de succès et erreur */

.alert {
    margin: 0 !important;
    border-radius: 0 !important;
    text-align: center;
}

.alert-success {
    color: var(--second-button-color) !important;
    background-color: var(--second-bg-color) !important;
    border-color: var(--second-bg-color) !important;
}


/* Définition du FOOTER  */

footer {
    color: var(--main-text-color);
    background-color: var(--dark-bg-color);
    font-size: var(--font-size-normale-footer);
    margin-top: -20px;
}

.logo_sinscrire:hover {
    opacity: 0.5;
}

.logo_bg {
    background-image: url("/img/assets/logo_blanc_sans_titre.png");
    background-size: contain;
    height: 280px;
    width: 308px;
}

.logo_bg:hover {
    background-image: url("/img/assets/logo_bleu_clair_sans_titre.png");
}

.logo_footer_bg {
    background-image: url("/img/assets/logo_blanc_avec_titre.png");
    background-size: contain;
    height: 309px;
    width: 308px;
}

.logo_footer_bg:hover {
    background-image: url("/img/assets/logo_bleu_clair_avec_titre.png");
}

.footer_hr {
    height: var(--fin_px);
    border: 0;
    background-color: var(--clear-text-color);
    position: relative;
    top: calc(10*var(--xl_px));
    margin-bottom: calc(5*var(--xl_px));
    display: none;
}

footer a {
    color: var(--main-text-color);
    font-size: var(--font-size-normale-corps);
}

footer a:hover,
footer i:hover {
    color: var(--main-button-color) !important;
}

footer i {
    font-size: 4rem;
}


/* Paragraphes CK Editor */

.no-padding_paragraph p {
    margin: 0;
    padding-bottom: 0;
}


/* def Owl Carousel  */

.owl-prev {
    left: -30px;
}

.owl-next {
    right: -30px
}

.owl-prev,
.owl-next {
    position: absolute;
    top: 35%;
}

.owl-carousel .owl-nav button.owl-next {
    padding-bottom: 10px !important;
}

.owl-carousel .owl-nav button.owl-prev {
    padding-bottom: 10px !important;
}

.owl-prev span,
.owl-next span {
    font-size: 60px;
    color: var(--dark-text-color);
}

.owl-carousel-year .owl-prev {
    left: -15px;
}

.owl-carousel-year .owl-next {
    right: -15px
}

.owl-carousel-year .owl-prev span,
.owl-carousel-year .owl-next span {
    font-size: 60px;
    color: var(--main-text-color);
}

.partenaire_card {
    height: 28vh !important;
}

.partenaire_card img {
    width: 28vh !important;
}


/* Formulaire Newsletter du footer */

.form-in_footer span {
    font-size: 80%;
    font-weight: 300;
}

.form-control {
    font-size: 1.5rem;
}

.form-control::placeholder {
    color: var(--main-button-color);
    opacity: 0.9;
}

.form-control:focus {
    color: var(--main-button-color);
    background-color: var(--main-bg-color);
    border-color: var(--main-button-color);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}


/* MENUS Général*/


/* Définition de liste  */

li {
    list-style-type: none;
}

.nav-item {
    justify-content: center !important;
    display: flex !important;
}


/* FORMULAIRES */


/* Définition des checkbox  (diminuer de 10px pour tablettes et mobiles) */

input[type=checkbox] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    height: calc(4*var(--xl_px));
    width: calc(4*var(--xl_px));
    background: var(--main-bg-color);
    border: var(--fin_px) solid var(--main-text-color);
    margin-top: -3px;
}


/* (diminuer de 10px pour tablettes et mobiles) */

input[type="checkbox"]:checked {
    border: 0px;
    /* avec checkbox personnalisée*/
    background-image: url("/img/assets/checkbox_checked.svg");
    background-size: calc(4*var(--xl_px)) calc(4*var(--xl_px));
}


/* Définitions de BOUTONS et LIENS */

.cta_button {
    color: var(--main-text-color);
    background-color: var(--diff-blue);
    font-size: 1.5rem;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
}

.cta_button:hover {
    color: var(--main-text-color);
    transform: scale(1.1);
}


/* Définition du lien de sélection  */

.link {
    color: var(--main-text-color);
    /* font-size: var(--font-size-normale-corps); */
}

.link:hover,
a:hover {
    color: var(--main-button-color);
    transition: ease-in 200ms;
}

.flags:hover {
    text-decoration: none !important;
}

.lienRecherche {
    width: 85%;
    color: var(--main-text-color);
    border: 3px var(--main-button-color) solid;
    padding: 12px;
    background: var(--diff-blue);
    display: flex;
    margin: auto;
    margin-top: auto;
    margin-bottom: auto;
    transition: 0.2s;
}
.lienRecherche::placeholder {
    color: var(--main-text-color);
}

.lienRecherche a {
    color: var(--main-bg-color);
    background-color: var(--second-button-color);
    font-size: 4vh;
    padding: var(--xl_px);
}

.lienRecherche a {
    border: 3px solid;
    border-radius: var(--xl_px);
}

.lienRecherche a:hover,
.card-link:hover {
    color: var(--second-button-color);
    background-color: var(--main-bg-color);
    text-transform: uppercase;
    transition: ease-in 200ms;
    text-decoration: none;
}


/* Style boutons carousel Partenaires dans footer*/

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%3FF9FF' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%3FF9FF' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e");
}


/* Définition de CONTENU PRINCIPAL  */

.pagePrincipale {
    /* top: -20px;
    position: relative; */
}


/* Définition des BACKGROUNDS */

.very-dark_green-bg {
    color: var(--main-text-color);
    background-color: var(--dark-bg-color);
    font-weight: 300;
    letter-spacing: 0.10rem;
}

.very-dark_green-bg .title_underline {
    border-color: var(--main-text-color);
}

.dark_green-bg {
    color: var(--main-text-color);
    background-color: var(--main-bg-color);
    font-weight: 300;
    letter-spacing: 0.10rem;
}

.dark_green-bg .title_underline {
    border-color: var(--main-text-color);
}

.light_green-bg {
    color: var(--main-bg-color);
    background-color: var(--second-bg-color);
}

.light_green-bg h2 {
    color: var(--main-bg-color);
}

.white-bg,
.white-bg h2,
.white-bg .card-text,
.white-bg h3 {
    color: var(--main-bg-color);
    background-color: var(--main-text-color);
}

.practical_informations_page h2 {
    margin-left: 0.6rem;
}

.video_h3 {
    background-color: transparent !important;
    color: var(--main-button-color) !important;
    position: absolute;
    transform: translateX(-50%);
    left: 50.7%;
    bottom: 5%;
    font-size: 1.8rem;
    font-weight: 300;
    margin: auto;
}


/* Définition des TITRAGES */

h1,
h2,
h3 {
    color: var(--main-text-color);
    font-family: var(--typo-principale);
    margin: 1rem;
}

h1,
h2 {
    text-transform: uppercase;
}

h1 {
    font-size: var(--font-size-normale-h1);
}

h2 {
    font-size: var(--font-size-normale-h2);
}

h3 {
    font-size: var(--font-size-normale-h3);
}

.title_underline {
    border-top: 3px solid var(--main-bg-color);
}


/* Définition des SECTIONS */


/* A Corriger */

section .container {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.sub-Title_box {
    margin-top: 2rem;
    margin-bottom: 1rem;
}


/*page INSCRIPTION DEFI Juillet & Septembre*/

#hero,
.hero {
    background-color: var(--main-bg-color);
    background-size: cover;
    height: 91vh;
    background-position: bottom;
    margin-top: 0;
}

.hero_title {
    margin-bottom: 7vh;
    margin-left: 7vw;
    font-size: var(--font-size-hero-h1);
}

.title_notice {
    color: var(--main-button-color);
    font-size: 2.8rem;
    position: absolute;
    top: 6rem;
    left: 1.5rem;
}

.vertical_line {
    border-left: 8px solid var(--main-text-color);
    height: 7rem;
    position: absolute;
    left: 0rem;
    top: 2rem;
}

.vertical_line_defi {
    border-left: 8px solid var(--main-text-color);
    height: 7rem;
    position: absolute;
    left: 5%;
    top: 1rem;
}

.titre_defi,
.titre_info {
    padding-left: 5%;
    margin-bottom: 5%;
}

.titre_defi p,
.titre_info p {
    color: var(--main-button-color);
    font-size: 2.8rem;
}


/* Si hero_title sur une seule ligne */

.vertical_line-uniqueLine {
    height: 4.5rem;
}

.timer_inscriptions {
    color: var(--main-button-color);
    border: 3px var(--main-button-color) solid;
    padding: 0;
    border-radius: 10%;
    width: 95%;
    margin: auto;
}

.timer_inscriptions p {
    color: var(--main-text-color);
    text-align: center;
}

.Accordion_Title {
    font-size: 2rem;
    color: var(--main-bg-color);
    text-align: left;
}

.Accordion_Title:hover {
    color: var(--second-button-color);
    text-decoration: none;
}

.Accordion_Title:focus {
    text-decoration: none;
}

.accordion_icon {
    width: 88%;
    display: flex;
    justify-content: end;
}

.accordion-header {
    margin: 0rem;
}

.accordion-body {
    padding-left: 0.4rem;
}

.accordion-header hr {
    border-top: 2px solid var(--main-bg-color);
}

.accordion_inDark_bg {
    color: var(--main-text-color) !important;
    margin: 0rem;
    font-size: 1.7rem;
    letter-spacing: 0.07rem;
}

.accordion_inDark_bg>div>button:hover {
    color: var(--main-button-color) !important;
}

.accordion_inDark_bg hr {
    border-top: 2px solid var(--main-text-color);
}

#rules_accordion p strong {
    color: var(--main-button-color);
}

.btn-link+.Accordion_Title {
    margin-left: auto;
}

.programm_date-box {
    position: relative;
    top: -3rem;
    left: 2rem;
}

.programm_date-day {
    font-size: 8rem;
}

.programm_date-mounth {
    /* color: var(--main-button-color); */
    color: var(--diff-blue);
    font-size: 3.5rem;
    position: absolute;
    top: 9rem;
    left: 6.2rem;
}

.programm_date-weekday {
    text-transform: uppercase;
    font-weight: bold;
    margin-left: 4px;
    position: relative;
    top: -4.5rem;
}

.programm_date-vertical_line {
    border-right: 3px solid var(--main-bg-color);
    height: 7rem;
    position: absolute;
    left: 10rem;
    top: 3.5rem;
    border-radius: 5%;
}


/* Video Modal */

#video-section .modal-content,
.modal-dialog {
    min-width: 600px;
}

#video-section .modal-content iframe {
    width: 560px;
    height: 315px;
}

.videoButton {
    margin-bottom: 2rem;
}

.videoButton h3 {
    background: transparent;
    color: var(--main-text-color);
}

.videoButton .card-body a {
    width: 85%;
    color: var(--main-button-color);
    border: 3px var(--main-button-color) solid;
    padding: 12px;
    border-radius: var(--xl_px);
    margin: auto;
    transition: 0.2s;
}

.videoButton .card-body a:hover {
    background: var(--diff-blue);
}

.videos_defi:hover {
    transform: scale(1.05);
}

.global_map {
    background-image: url("/img/images/plan_d_acces.png");
    background-size: cover;
    height: 73vh;
    background-position: center;
}

.global_map_marker {
    position: relative;
    top: 45%;
    left: 42%;
    width: 3%;
}

.info-icon_box {
    border: 2px var(--main-text-color) solid;
    margin: auto;
    border-radius: 50%;
    width: 12rem;
    height: 12rem;
}

.info-icon {
    width: 50%;
    margin: auto;
    position: relative;
    top: 4rem;
}

.info_card-title {
    letter-spacing: 2px;
}


/* Page ACCUEIL */

.overlayButton {
    font-size: 1.2rem;
    margin: 2rem;
}

.overlayButton a {
    border: var(--main-text-color) 3px solid;
    padding: 0.5rem 2rem;
    opacity: 0.8;
    letter-spacing: 0.5rem;
}

.videoAccueil {
    width: 100%;
    height: 100%;
    /* width: auto;
    height: 101vh; */
    top: -88px;
    margin-bottom: -88px;
}

.chiffres_accueil {
    font-size: 5.5rem;
    color: white;
}

.chiffres_accueil .unite {
    font-size: 2rem;
}

.texte_chiffres_accueil {
    font-size: 1.3rem;
    color: var(--diff-blue);
}

.chiffres_et_texte_accueil {
    margin-top: 2.5rem;
    margin-bottom: 2rem;
    padding: 0rem 2rem;
}


/* Page Galerie */

.galerie {
    background-color: var(--second-button-color-transparent);
    background-size: cover;
    height: 80vh;
    background-position: bottom;
}

.logo_video {
    max-width: 45%;
    margin-top: 1rem;
}

.video_galerie:hover {
    text-decoration: none;
    transform: scale(1.02);
}

.custom_overlay {
    position: absolute;
    top: 28%;
    left: 0;
    right: 0;
    text-align: center;
    opacity: 90%;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
}

.custom_overlay:hover {
    opacity: 100;
}

.custom_overlay_inner {
    position: absolute;
    top: 50%;
    left: 10px;
    right: 10px;
    transform: translateY(-10%);
}

.custom_overlay h4 {
    position: relative;
    margin-bottom: 4px;
}

.custom_overlay p {
    color: #000;
    line-height: 1.4em;
}

.custom_overlay h4:after {
    background-color: red;
    content: "";
    position: absolute;
    left: 35%;
    right: 35%;
    bottom: 0;
    height: 4px;
}


/* Page résultats */

.years_results:hover,
.years_gallery:hover {
    text-decoration: none;
}

.years_results div:hover,
.years_gallery div:hover {
    transform: scale(1.05);
}


/* Page CONTACT */

.page-holder {
    min-height: 100vh;
}

.bg-cover {
    background-size: cover !important;
}


/* Définition du formulaire de contact  */

.contactForm input,
.contactForm textarea {
    font-size: var(--font-size-normal-input);
    font-family: var(--typo-principale);
    width: 100%;
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom-color: white;
    background-color: transparent;
    color: var(--main-text-color);
    margin: 3rem 0rem 5rem 0rem;
}

textarea {
    border: 2px solid white !important;
    border-radius: 0.3rem;
    padding: 0.6rem;
}

.contactForm input::placeholder,
.contactForm textarea::placeholder,
.contactForm label {
    font-size: 15px;
    color: var(--main-text-color);
    text-transform: uppercase;
}

.contactForm label {
    color: var(--main-button-color);
}

.contactForm input:focus,
.contactForm textarea:focus {
    border-color: var(--second-button-color);
    box-shadow: 0 0 0 .2rem var(--second-button-color-transparent);
}

#inputUser_message {
    width: 100% !important;
    /* border: laissez class border de BS4 color : #ced4da 1px solid*/
    padding: var(--xl_px) !important;
    height: 100px;
}

.formSubmit {
    color: var(--main-text-color);
    /* background-color: var(--main-button-color); */
    /* background-color: var(--diff-blue); */
    font-size: 1rem;
    border: 3px solid var(--main-button-color);
}

.formSubmit:hover {
    color: var(--main-text-color);
    background-color: var(--second-button-color);
}

.formSubmit:active {
    color: var(--diff-blue);
    background-color: var(--main-bg-color);
    border: var(--second-button-color) solid var(--fin_px);
}


.header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header__nav {
    width: 100%;
    position: relative;
    z-index: 200;
}

.header__nav .active-link {
    text-decoration: underline;
    text-decoration-thickness: 0.125em;
    /*background-color: var(--clear-text-color);*/
}


/*  MediaQueries */


/* Ipad vertical 10.5'' */


/* Ecrans XL */

@media screen and (min-width: 1200px) {
    .timer_inscriptions p:first-child {
        font-size: 5rem;
    }

    .timer_inscriptions p:last-child {
        font-size: 3rem;
    }

    .overlayButton {
        font-size: 1.5rem;
        margin: 4rem;
    }

    .overlayButton a {
        padding: 0.5rem 4rem;
    }
}


/* Ecrans LG */

@media screen and (min-width: 992px) and (max-width: 1200px) {
    .programm_date-box {
        left: 0rem;
    }

    .timer_inscriptions p:first-child {
        font-size: 4.5rem;
    }

    .timer_inscriptions p:last-child {
        font-size: 2.5rem;
    }

    .video_accueil_logo {
        max-width: 28vh;
    }

    .overlayButton {
        font-size: 1.4rem;
        margin: 2.5rem;
    }

    .overlayButton a {
        padding: 0.5rem 4rem;
    }

    #defi-juillet {
        min-width: 10rem;
    }
}

@media screen and (min-width: 992px) and (max-width: 1020px) {

    header,
    .header_dropdown-toogle {
        font-size: 1.1rem;
    }
}


/* Jusqu'à écrans LG */

@media (max-width: 991px) {
    .owl-prev {
        left: -3.5rem;
    }

    .owl-next {
        right: -3.5rem;
    }
}


/* Ecrans MD */

@media screen and (min-width: 768px) and (max-width: 992px) {
    .programm_date-box {
        left: 0rem;
    }

    .programm_date-vertical_line {
        height: 4.5rem;
        left: 8rem;
    }

    .programm_date-day {
        font-size: 7rem;
    }

    .programm_date-mounth {
        font-size: 2rem;
        top: 8rem;
        left: 5.8rem;
    }

    .programm_date-weekday {
        top: -4.2rem;
    }

    .timer_inscriptions p:first-child {
        font-size: 3.5rem;
    }

    .timer_inscriptions p:last-child {
        font-size: 1.7rem;
    }

    .contactForm input,
    .contactForm textarea {
        margin: 1rem 0rem 3rem 0rem;
    }

    .chiffres_accueil {
        font-size: 4.5rem;
    }

    .chiffres_accueil .unite {
        font-size: 1.6rem;
    }

    .texte_chiffres_accueil {
        font-size: 1.2rem;
    }

    .chiffres_et_texte_accueil {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        padding: 0rem 1rem;
    }

    .video_accueil_logo {
        max-width: 22vh;
    }

    .video_accueil_logo_titre {
        font-size: 1.5rem;
    }

    .overlayButton {
        font-size: 1.2rem;
        margin: 2rem;
    }

    .overlayButton a {
        padding: 0.5rem 2rem;
    }

    .video_h3 {
        font-size: 1.4rem;
    }

    .logo_footer_bg {
        height: 240px;
        width: 200px;
    }
}

@media screen and (max-width: 834px) and (max-height: 1112px) {
    .video_accueil_logo {
        max-width: 16vh !important;
    }
}


/* Gestion modal */

@media (max-width: 660px) {

    #video-section .modal-content,
    .modal-dialog {
        min-width: 2rem;
        width: 100%;
    }

    #video-section .modal-content iframe {
        width: 100%;
        height: 315px;
    }

    .owl-dots {
        display: none;
    }
}


/* Ecrans SM */

@media screen and (min-width: 576px) and (max-width: 767px) {
    .programm_date-box {
        left: 1rem;
    }

    .timer_inscriptions p:first-child {
        font-size: 3rem;
    }

    .timer_inscriptions p:last-child {
        font-size: 1.1rem;
    }

    .vertical_line_defi {
        border-left: 7px solid var(--main-text-color);
        height: 5rem;
        left: 3%;
        top: 0.8rem;
    }

    .titre_defi {
        padding-left: 3%;
    }

    .titre_defi h1 {
        font-size: 4rem;
    }

    .titre_defi p {
        font-size: 2rem;
    }

    .contactForm input,
    .contactForm textarea {
        margin: 0rem 0rem 3rem 0rem;
    }

    .chiffres_accueil {
        font-size: 4rem;
    }

    .chiffres_accueil .unite {
        font-size: 1.4rem;
    }

    .texte_chiffres_accueil {
        font-size: 1rem;
    }

    .chiffres_et_texte_accueil {
        padding: 0rem 1rem;
    }

    .video_accueil_logo,
    .video_accueil_logo_titre {
        display: none;
    }

    .global_map {
        background-image: url("/img/images/plan_d_acces_recadre.png");
        background-position: left;
    }

    #second-navbar {
        position: fixed;
        top:-1000px;
    }

}


/* Ecrans XS */

@media (max-width: 576px) {

    #second-navbar {
        position: fixed;
        top:-1000px;
    }

    #navbarMainMenuToggler {
        opacity: 1;
    }

    h2 {
        font-size: var(--font-size-tablette-h2);
    }

    h3 {
        font-size: 1.8rem;
    }

    #hero {
        background-image: url("/img/images/hero_inscription_resized-mobile.jpg");
    }

    .hero_title {
        margin-bottom: 10vh;
    }

    .hero_title h1 {
        font-size: var(--font-size-hero-h1-mobile);
    }

    .vertical_line {
        height: 7rem;
        left: 0.5rem;
        top: 1rem;
        border-left: 6px solid var(--main-text-color);
    }

    .vertical_line-uniqueLine {
        height: 3.5rem;
    }

    .title_notice {
        top: 3rem;
        line-height: 1;
        margin-top: 14px;
        font-size: 2rem;
    }

    section {
        padding-bottom: 0rem;
        padding-top: 1rem;
    }

    .cta_button {
        font-size: 1.2rem;
    }

    .global_map_marker {
        left: 30%;
        top: 42%;
        width: 13%;
    }

    .Accordion_Title {
        font-size: 1.1rem;
    }

    .small {
        font-size: 0.8rem;
    }

    .footer_logo {
        max-width: 10rem;
    }

    footer i {
        font-size: 3rem;
    }

    .sub-Title_box {
        margin-top: 0rem;
        margin-bottom: 0rem;
    }

    .info-icon_box {
        width: 7rem;
        height: 7rem;
    }

    .info-icon {
        width: 45%;
        margin: auto;
        position: relative;
        top: 2.5rem;
    }

    .timer_inscriptions {
        border-radius: var(--xl_px);
        width: 100%;
    }

    .timer_inscriptions-day_box {
        width: 70%;
        display: flex;
    }

    .timer_inscriptions p:first-child {
        font-size: 2.5rem;
    }

    .timer_inscriptions p:last-child {
        font-size: 1.5rem;
        letter-spacing: 0rem;
    }

    .timer_inscriptions-day {
        font-size: 3rem !important;
        margin: auto;
        justify-content: center;
        display: flex;
    }

    .programm_date-box {
        left: 4rem;
        top: -0.7rem;
    }

    .programm_date-vertical_line {
        height: 4.5rem;
        left: 5.5rem;
        top: 1.5rem;
    }

    .programm_date-day {
        font-size: 5rem;
    }

    .programm_date-mounth {
        font-size: 2rem;
        top: 6rem;
        left: 4.5rem;
    }

    .programm_date-weekday {
        top: -2.5rem;
        left: -0.8rem;
        font-size: 0.9rem;
    }

    .programm_date-day,
    .programm_date-mounth,
    .programm_date-box,
    .programm_container {
        padding: 0rem;
    }

    .vertical_line_defi {
        border-left: 5px solid var(--main-text-color);
        height: 3.5rem;
        left: 4%;
        top: 0.2rem;
    }

    .titre_defi {
        padding-left: 4%;
        margin-bottom: 10%;
    }

    .titre_defi h1 {
        font-size: 2.5rem;
    }

    .titre_defi p {
        font-size: 1.8rem;
    }

    .contactForm input,
    .contactForm textarea {
        margin: 0rem 0rem 0.5rem 0rem;
    }

    .chiffres_accueil {
        font-size: 4rem;
    }

    .chiffres_accueil .unite {
        font-size: 1.4rem;
    }

    .texte_chiffres_accueil {
        font-size: 1rem;
    }

    .chiffres_et_texte_accueil {
        margin-top: 0.5rem;
        margin-bottom: 1rem;
    }

    .video_accueil_logo,
    .video_accueil_logo_titre {
        display: none;
    }

    .video_h3 {
        font-size: 1.6rem;
    }

    .logo_bg {
        height: 163px;
        width: 150px;
    }

    .logo_footer_bg {
        height: 180px;
        width: 150px;
    }

    .global_map {
        background-image: url("/img/images/plan_d_acces_recadre.png");
        background-position: left;
    }
}

@media (max-width: 420px) {
    .timer_inscriptions p:last-child {
        font-size: 1rem;
    }

    .timer_inscriptions-day {
        font-size: 2rem !important;
    }

    .programm_date-box {
        left: 2.5rem;
    }

    .overlayButton {
        font-size: 1.2rem;
    }

    .titre_defi h1 {
        font-size: 2.2rem;
    }

    .titre_defi p {
        font-size: 1.3rem;
    }

    #video-section .modal-content iframe {
        height: auto;
    }

    .overlayButton {
        font-size: 1rem;
        margin: 1.5rem 0rem;
    }

    .overlayButton a {
        padding: 0.5rem 0.5rem;
    }

    .video_h3 {
        font-size: 1.2rem;
    }

    .videoAccueil {
        top: 0;
        margin-bottom: 0;
    }
}


/* Ecrans très petits */

@media (max-width: 360px) {
    h2 {
        font-size: var(--font-size-mobile-h2);
    }

    .hero_title {
        margin-bottom: 12vh;
        margin-left: 2vw;
    }

    .programm_date-box {
        left: 2rem;
    }

    .vertical_line {
        border-left: 4px solid var(--main-text-color);
        height: 5rem;
        position: absolute;
        left: 1rem;
        top: 1.5rem;
    }

    .vertical_line-uniqueLine {
        height: 3rem;
    }

    .global_map_marker {
        top: 41%;
    }

    .video_accueil_logo {
        max-width: 18vh;
    }
}