/******************************GENERAL ****************************************/

body {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #000000;
    background: #000000;
}



/******************************** HEADER **************************************/

header {
    background-image: #000000;
    color: #FFFFFF;
}

header .col-right {
    text-align: right;
}

header .col-right p {
    display: inline-block;
    vertical-align: top;
    margin: 25px 20px 5px 0;
    text-align: right;
    font-weight: 700;
    font-size: 12px;
    line-height: 12px;
}

header .col-right .btn-noir i {
    display: none;
}

@media (max-width:767px) {
    header .col-right p {
        display: none;
    }

    header .col-right .btn-noir {
        margin: 17px 2px 10px 2px !important;
        border-radius: 0;
        padding: 5px;
    }

    header .col-right .btn-noir span {
        display: none;
    }

    header .col-right .btn-noir i {
        display: block;
    }
}

/************************** MENU **********************************************/

nav#main {
    background-color: #4A4A4A;
}

nav#main ul {
    display: flex;
    list-style: none;
    margin: 5px 0;
}

nav#main ul li {
    padding-right: 20px;
}

nav#main ul li a {
    font-weight: 700;
    font-size: 12px;
    color: #FFFFFF;
    line-height: 12px;
    padding: 10px 20px;
    display: inline-block;
    vertical-align: top;

    border: 1px solid #9C9C9C;
    border-radius: 3px;
    text-decoration: none;
}

nav#main ul li a:focus,
nav#main ul li a:hover {
    text-decoration: none;
    background-color: #FFFFFF;
    color: #FF720D;
    border: 1px solid #FFFFFF;
}

.btn-menu {
    display: none;
    margin: 5px 0;
    background-color: transparent;
    color: #DDDDDD;
    border: 0;

}

.btn-menu > i {
    padding: 5px 6px;
    border: 1px solid #DDDDDD;
}


@media(max-width:767px) {
    nav#main ul {
        display: none;
        margin: 10px 0 0 0;
    }

    nav#main ul li {
        padding: 0 0 15px 0;
        width: 100%;
        display: block;
    }

    nav#main ul.active {
        display: block;
    }

    .btn-menu {
        display: block;
    }

}

/******************************************************************************/


.content {
    background-color: #FFFFFF;
}

.foule {
    background: url(../img/foule.jpg) center top no-repeat #000;
    background-size: cover;
    height: 400px;
    border-bottom: 1px solid #717170;
}

.casque {
    background: url(../img/casque.jpg) center top no-repeat transparent;
    background-size: cover;
    padding: 30px 0 40px;
}

.casque-orange {
    background: url(../img/casque-orange.jpg) center top no-repeat transparent;
    background-size: cover;
    padding: 30px 0 80px;
}

.explications {
    background: #FFFFFF;
    height: 400px;
}

.gradiant {
    background-image: linear-gradient(-180deg, #FFAA1E 0%, #FF720D 100%);
    border-top: 1px solid #FFFFFF;
    color: #FFFFFF;
    font-size: 16px;
    line-height: 19px;
    padding-bottom: 80px;
}

@media (max-width:767px) {

    .foule,
    .explications {
        padding: 20px 0;
        /*height:auto;*/
    }
}


/******************************************************************************/

a {
    color: #FF720D;
}

a:hover,
a:focus {
    color: #FF720D;
}

strong {
    font-weight: 700;
}

strong span {
    font-weight: 700;
    color: #FF720D;
}

ul {
    padding: 0;
}


.big {
    font-weight: 900;
    font-size: 40px;
    line-height: 40px;
    color: #FFFFFF;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.50);
    margin: 80px 0 80px 0;
}

@media (max-width:767px) {
    .big {
        margin: 20px 0;
    }
}

.semi-big {
    font-weight: 900;
    font-size: 26px;
    color: #FFFFFF;
    line-height: 26px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.50);
    text-transform: uppercase;
}

.sous-titre {
    color: #FFFFFF;
    font-weight: 400;
    font-size: 30px;
    line-height: 30px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.50);
}

.sous-titre-italic {
    font-style: italic;
    font-size: 30px;
    color: #000000;
    text-align: center;
    line-height: 30px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.50);
}

.notes {
    font-size: 13px;
    line-height: 16px;
}

.bloc {
    background: #FFFFFF;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.50);
    border-radius: 5px;
    padding: 30px;
    color: #000000;
}

.titre-bloc {
    font-weight: 700;
    font-size: 20px;
    line-height: 20px;
    color: #000000;
    text-transform: uppercase;
}

.titre1 {
    font-weight: 900;
    font-size: 50px;
    line-height: 50px;
    color: #000000;
    text-align: center;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.50);
    text-transform: uppercase;
    margin: 5px 0 65px;
}

.titre2 {
    font-weight: 400;
    font-size: 30px;
    line-height: 36px;
    color: #000000;
    text-align: center;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.50);
    margin: 0;
}

.titre3 {
    font-weight: 900;
    font-size: 30px;
    color: #000000;
    line-height: 25px;
}

.titre3:after {
    content: "";
    background: #FF720D;
    display: block;
    height: 5px;
    width: 70px;
    margin: 20px 0 30px;
}


/* Cachons la case à cocher */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
    position: absolute;
    left: -9999px;
}

/* on prépare le label */
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
    position: relative;
    /* permet de positionner les pseudo-éléments */
    padding-left: 20px;
    /* fait un peu d'espace pour notre case à venir */
    padding-right: 0px;
    /* fait un peu d'espace pour notre case à venir */
    cursor: pointer;
    /* affiche un curseur adapté */
    line-height: 14px;
}


/* Aspect des checkboxes cochée */
[type="checkbox"]:checked + label {
    background: url('/assets/img/checkbox.png') 0px 0px no-repeat transparent;
}

/* Aspect des checkboxes pas cochée */
[type="checkbox"]:not(:checked) + label {
    background: url('/assets/img/checkbox.png') 0px -14px no-repeat transparent;
}

label {
    font-size: 13px;
    color: #FF720D;
    line-height: 13px;
    font-weight: 400;
}

::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    font-weight: 400;
    font-size: 13px;
    color: #4A4A4A;
    letter-spacing: 0;
    text-align: left;
    line-height: 14px;
}

::-moz-placeholder {
    /* Firefox 19+ */
    font-weight: 400;
    font-size: 13px;
    color: #4A4A4A;
    letter-spacing: 0;
    text-align: left;
    line-height: 14px;
}

:-ms-input-placeholder {
    /* IE 10+ */
    font-weight: 400;
    font-size: 13px;
    color: #4A4A4A;
    letter-spacing: 0;
    text-align: left;
    line-height: 14px;
}

:-moz-placeholder {
    /* Firefox 18- */
    font-weight: 400;
    font-size: 13px;
    color: #4A4A4A;
    letter-spacing: 0;
    text-align: left;
    line-height: 14px;
}


/**************************** BOUTONS *****************************************/

.btn-noir {
    font-weight: 700;
    font-size: 12px;
    color: #FFFFFF;
    line-height: 12px;
    padding: 10px 20px;
    display: inline-block;
    vertical-align: top;

    border: 1px solid #9C9C9C;
    border-radius: 3px;
    text-align: center;
    text-decoration: none;
}

.btn-noir:focus,
.btn-noir:hover {
    text-decoration: none;
    background-color: #FFFFFF;
    color: #000000;
    border: 1px solid #FFFFFF;
}

.btn-orange {
    font-weight: 700;
    font-size: 16px;
    line-height: 16px;
    color: #FFFFFF;
    padding: 10px 20px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    background: #FF720D;
    border: 1px solid #FF720D;
    border-radius: 3px;
    text-decoration: none;
}

.btn-orange:focus,
.btn-orange:hover {
    text-decoration: none;
    background-color: #FFFFFF;
    color: #FF720D;
    border: 1px solid #FF720D;
}

.btn-orange-mini {
    font-weight: 700;
    font-size: 13px;
    line-height: 16px;
    color: #FFFFFF;
    padding: 10px 15px;
    display: inline-block;
    vertical-align: top;
    text-align: center;

    background: #FF720D;
    border: 1px solid #FF720D;
    border-radius: 3px;
    text-decoration: none;
}

.btn-orange-mini:focus,
.btn-orange-mini:hover {
    text-decoration: none;
    background-color: #FFFFFF;
    color: #FF720D;
    border: 1px solid #FF720D;
}


.btn-blanc {
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    line-height: 16px;
    color: #FF720D;
    padding: 10px 20px;
    display: inline-block;
    vertical-align: top;

    background: #FFFFFF;
    border: 1px solid #FFFFFF;
    border-radius: 3px;
    text-decoration: none;
}

.btn-blanc:focus,
.btn-blanc:hover {
    text-decoration: none;
    background-color: #FF720D;
    color: #FFFFFF;
    border: 1px solid #FF720D;
}

.btn-rouge {
    font-weight: 700;
    font-size: 16px;
    line-height: 16px;
    color: #FFFFFF;
    padding: 10px 20px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    background: #FF0000;
    border: 1px solid #FF0000;
    border-radius: 3px;
    text-decoration: none;
}

.btn-rouge:focus,
.btn-rouge:hover {
    text-decoration: none;
    background-color: #FFFFFF;
    color: #FF0000;
    border: 1px solid #FF0000;
}


.btn-gris-orange {
    font-weight: 700;
    font-size: 13px;
    line-height: 16px;
    color: #9B9B9B;
    padding: 10px 15px;
    display: inline-block;
    vertical-align: top;
    background: #FFFFFF;
    border: 1px solid #FF9F19;
    border-radius: 3px;
    text-decoration: none;
}

.btn-gris-orange:focus,
.btn-gris-orange:hover {
    text-decoration: none;
    background-color: #FF720D;
    color: #FFFFFF;
    border: 1px solid #FF720D;
}

.btn-player {
    font-size: 16px;
    line-height: 16px;
    display: inline-block;
    vertical-align: top;
    padding: 5px 6px;
    color: #FFFFFF;
    background: #FF720D;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none;
}

.btn-player:focus,
.btn-player:hover {
    color: #FFFFFF;
    background-color: #9B9B9B;
}

.btn-haricot-orange {
    font-family: 'Lato';
    font-weight: 700;
    font-size: 12px;
    line-height: 16px;
    color: #333333;

    padding: 8px 15px;

    background-color: #FFFFFF;
    border: 1px solid #FF720D;
    border-radius: 3px;

    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-haricot-orange:hover {
    background-color: #FF720D;
    color: #FFFFFF;
}

.btn-download {
    font-size: 14px;
    line-height: 20px;
    color: #808080;
    border: 1px solid #FF720D;
    background-color: #FFFFFF;
    padding: 5px 6px;
    text-decoration: none;
}

ul.dossier table tr:hover .btn-download,
.btn-download:focus,
.btn-download:hover {
    color: #FFFFFF;
    background-color: #FF720D;

}



/********************* METHODES ***********************************************/

.methode {
    margin-bottom: 50px;
}

.thumbnail {
    display: inline-block;
    max-width: 100%;
    width: min(100%, 250px);
    height: auto;
    padding: 10px;
    line-height: 1.42857143;
    background-color: #fff;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
    border: none;
    border-radius: 5px;
}

.methode h3 {
    font-weight: 700;
    font-size: 20px;
    color: #4A4A4A;
    line-height: 25px;
    margin: 0;
}

.methode h3:after {
    content: "";
    display: block;
    width: 70px;
    height: 5px;
    background: #FF720D;
    margin: 15px 0;
}

.methode p {
    font-size: 13px;
    color: #4A4A4A;
}

.detail-methode {
    font-size: 13px;
    color: #4A4A4A;
}

.detail-methode ul {
    margin-top: 10px;
    padding-left: 25px;
}

/************************** DOSSIERS MEDIAS ***********************************/

ul.dossier {
    list-style: none;
    padding: 0;
}

ul.dossier h3 {
    background-color: #808080;
    padding: 15px 10px;
    margin: 0;
    font-weight: 700;
    font-size: 12px;
    color: #FFFFFF;
    line-height: 14px;
    text-transform: uppercase;
    margin-bottom: 1px;
}

ul.dossier h3.open {
    background-color: #4D4D4D;
    padding: 6px 5px;
    color: #FF7200;
}

ul.dossier h3 i {
    margin-right: 15px;
    font-size: 16px;
}

ul.dossier h3 i.fa-folder {
    margin-left: 5px;
}

ul.dossier ul {
    list-style: none;
    padding: 0;
    border-top: 1px solid #FFFFFF;
}

ul.dossier ul li {
    padding: 7px 30px 7px 45px;
    background-color: rgba(0, 0, 0, 0.1);
    background-color: #FFFFFF70;
    margin-bottom: 1px;
}

ul.dossier h4 {
    margin: 0;
    font-weight: 400;
    font-size: 14px;
    color: #4A4A4A;
    line-height: 14px;
    cursor: pointer;
}

ul.dossier table {
    width: 100%;
}

ul.dossier table tr .svg {
    color: #333333;
}

ul.dossier table tr:hover {
    color: #FF720D;
}

ul.dossier table tr:hover .svg {
    /* This line convert #333333 to #FF720D */
    filter: invert(55%) sepia(28%) saturate(7340%) hue-rotate(354deg) brightness(106%) contrast(101%);
}

ul.dossier .fa-folder-open {
    color: #FFFFFF;
    padding: 10px 7px 9px 10px;
    border-radius: 500px;
    background-color: #FF7200
}


/*------------------Modal : player video et audio--------------------------*/

.modal-header h3 {
    font-weight: 700;
    font-size: 20px;
    line-height: 20px;
    color: #4A4A4A;
    margin: 0;
}

.modal-header h4 {
    font-weight: 700;
    font-size: 15px;
    color: #4A4A4A;
    margin: 15px 0 0 0;
    text-transform: uppercase;
}

.modal-footer {
    border-top: none;
}


/* VIDEO-JS change hover color of SVG */
.video-js:hover .vjs-big-play-button {
    filter:
        invert(53%) sepia(72%) saturate(2787%) hue-rotate(352deg) brightness(100%) contrast(103%);
}

.vjs-big-play-button {
    transition: none !important;
}


.list-group {
    --bs-list-group-active-bg: #FF7200;
    --bs-list-group-active-border-color: #FF7200;
}

.plyr--audio .plyr__control:focus-visible,
.plyr--audio .plyr__control:hover,
.plyr--audio .plyr__control[aria-expanded=true] {
    background: #FF7200;
}

.plyr--full-ui input[type=range] {
    color: #FF7200;
}


/************************ Formulaire de contact *******************************/

.form-control,
.form-select {
    font-size: 14px;
}

.form_type {
    text-align: left;
}

.form_type input:not([type='checkbox']),
.form_type select {
    /* Police */
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: 0;
    line-height: 16px;

    height: 36px;
    margin: 0;
}

.form_type textarea {
    /* Police */
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #4A4A4A;
    letter-spacing: 0;
    line-height: 16px;

    margin: 0;
}

.form_type select,
.form_type #date_naissance {
    width: 170px;
}



/*************************** FOOTER *******************************************/

footer {
    color: #FFFFFF;
    border-top: 1px solid #FFFFFF;
    padding: 30px 0;
}

footer h5 {
    font-size: 13px;
    line-height: 15px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    border-bottom: 1px solid #FFFFFF;
    padding-bottom: 20px;
    margin-bottom: 20px;
    margin-top: 0;
}

.social-links {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

.social-links a {
    font-size: 30px;
    color: #FFFFFF;
}

.social-links a:focus,
.social-links a:hover {
    text-decoration: none;
    color: #FFFFFF;
}