body {font-family: Verdana, sans-serif; background-color: #f4f2f6;}
h1 {color: #7a00e6; line-height: 1.3em; font-size: 150%;}
h1.impact {font-size: 300%;}
h2 {color: #7a00e6; line-height: 1.3em; font-size: 150%;}
h1 span, h2 span, h3 span {color: #000;}
h3 {color: #7a00e6;}
p {font-size: 0.9em;}
ul li, ol li {font-size: 100%;}
div.header {text-align: center; margin: 0 auto;}
div#coldroite p {text-align: justify;}
div#coldroite h3 {color: #FFF; padding: 2%;}
div#coldroite figure figcaption a:hover {color: #7a00e6;}
span.bouton {background-color: #7a00e6; padding: 1% 2%; border-radius: 2em; color: #FFF; margin: 5% auto; width: 20%; display: block; text-align: center;}
span.bouton a {display: block; text-decoration: none; color: #FFF;}
div.flex {justify-content: space-around; border: 1px solid #000000; border-radius: 0.5em;}
div.centrer {text-align: center;}
div.bloc_cadre {border: 1px solid #CCCCCC; border-radius: 0.5em; padding: 0.5em 1.5em;}
div.bloc_cadre p {text-align: justify;}
div.cours_ghu {border: 1px solid #000000; border-radius: 0.5em; max-width: 48%; padding: 0 1em;}
figure.vig {float: left; margin: 0 1em 1em 0;}
figcaption {font-size: 0.8em; font-style: italic;}
.button {padding: 10px 20px; text-align: center;  text-decoration: none; display: inline-block; font-size: 0.9em;
font-weight: bold; cursor: pointer; margin: 1em; background-color: #7a00e6; color: #FFFFFF; border-radius: 1em; border: none;}
.button:hover, .button:active {background-color: #05DF40;}
form label {font-size: 0.8em;}
div#inscription_simple { padding: 1em; border: 1px solid #7a00e6; border-radius: 1em; }

.oModal_video {position: fixed; z-index: 99999; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.8); opacity:0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; width: 100%; height: 100%;}
.oModal_video:target {opacity: 1; pointer-events: auto;}
.oModal_video:target > div {transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; max-width: 900px; margin-top: 10%;} 
.oModal_video > div {max-width: 100%; position: relative; margin: 1% auto; padding: 0px; transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out;}
.oModal_video .close_modal {background: #BB0339; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center;	top: -10px;	width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000;}
.oModal_video .close_modal:hover {background: #00d9ff;}

.oModal .close {display: none;} /* Pour supprimer la possibilité de fermer me modal login en restant sur la page*/
.hide {display: none;}

.tabs-buttons {display: flex; flex-wrap: wrap; font-size : 14px; max-width: 1170px; margin: 0 auto;}

.tabs-buttons__btn {
width : auto;
font-weight : bold;
border-radius: 15px 0 0 0 ;
border-top : #000 solid 1px;
border-right : #000 solid 1px;
border-left : #000 solid 1px;
color : #fff;
background-color : #7a00e6;
outline : none;
padding : 12px 20px;
cursor : pointer;
transition : background-color 0.3s;
margin-right : 5px;
}
.tabs-buttons__btn:hover, .tabs-buttons__btn--active {
background-color : #000;
}

@media only screen and (min-width: 1300px){

div#conteneur_2024 {max-width: 80%; justify-content: space-between;}
div#conteneur_2024 div#principale {width: 72%;}
div#conteneur_2024 div#coldroite {width: 25%;}
.tabs-buttons {max-width: 77%;}
}

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {

h1 {font-size: 160%; }
img {max-width: 100%;}
span.bouton {width: 50%;}
.oModal_video:target > div {max-width: 100%;} 
.tabs-buttons {display: flex; justify-content: space-around; flex-wrap: wrap; margin: auto;}
.tabs-buttons__btn {padding : 5px;}
.tabs-buttons__btn:hover, .tabs-buttons__btn--active {background-color : #000;}
.tabs-buttons__btn:not(:last-child) {margin-bottom : 2px;}
div.cours_ghu {max-width: 100%; margin-top: 1em;}
div.flex {text-align: center;}
}