@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Raleway:400,600");
@font-face {
    font-family: "zaptron";
    src: url("Zaptron-Regular.ttf");
}
@font-face {
    font-family: "venus";
    src: url("VenusRisingRg-Bold.ttf");
}
@font-face {
    font-family: nova;
    src: url("a_lcdnova_[fr.allfont.net].ttf");
}
@font-face {
    font-family: retro;
    src: url("Retro Gaming.ttf");
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.index__page1 {
    background-color: white;
}
@media (prefers-color-scheme: dark) {
    .index__page1 {
        background-color: #262626;
    }
}
.accueil__page2 {
    margin: 0;
    padding: 0;
    font-family: zaptron;
    font-size: 62.5%;
    background-image: url("images/Fond/alveoles2.jpg");
    background-size: contain;
    background-attachment: fixed;
}
@media (max-width: 770px) {
    .accueil__page2 {
        background-size: contain;
        background-repeat: unset;
    }
}
.index_myProgress {
    background: white;
    box-shadow: inset -1px 1px 2px rgba(200, 200, 200, 0.2), inset 1px -1px 2px rgba(200, 200, 200, 0.2), inset -1px -1px 2px rgba(79, 204, 243, 0.9), inset 1px 1px 3px rgba(79, 204, 243, 0.9);
    box-shadow: 0px 0px 40px 11px #4fccf3;
    width: 50%;
    height: 20px;
    border-radius: 50px;
    margin-left: 25%;
    margin-top: 300px;
    margin-bottom: 50px;
    z-index: -2;
    position: relative;
    overflow: hidden;
}
@media (prefers-color-scheme: dark) {
    .index_myProgress {
        background: #262626;
    }
}
.index_myProgress_myBar {
    background: #4fccf3;
    width: 100%;
    height: 100%;
    border-radius: 50px;
    transform-origin: left;
    animation: progress__bar 2500ms 500ms both;
}
@keyframes progress__bar {
    0% {
        transform: scaleX(0);
    }
    17% {
        transform: scaleX(0.18);
    }
    24% {
        transform: scaleX(0.4);
        animation-timing-function: cubic-bezier(0.9, 0, 0.1, 1);
    }
    46% {
        transform: scaleX(0.81);
        animation-timing-function: cubic-bezier(0.25, 0.25, 1);
    }
    85%, 100% {
        opacity: 1;
    }
    100% {
        transform: scaleX(1);
    }
}
.index_scanner {
    display: flex;
    position: relative;
}
.index_scanner__span1 {
    color: #4fccf3;
    font-family: zaptron;
    font-size: 24px;
    margin-left: 15%;
    position: absolute;
    overflow: hidden;
    background-position: -20%;
    z-index: -2;
    animation: span 500ms 500ms both;
}
.index_scanner__span2 {
    color: #4fccf3;
    font-family: zaptron;
    font-size: 24px;
    margin-left: 15%;
    position: absolute;
    top: 50px;
    overflow: hidden;
    background-position: -20%;
    z-index: -2;
    animation: span 500ms 1000ms both;
}
.index_scanner__span3 {
    color: #4fccf3;
    font-family: zaptron;
    font-size: 24px;
    margin-left: 15%;
    position: absolute;
    top: 100px;
    overflow: hidden;
    background-position: -20%;
    z-index: -2;
    animation: span 500ms 1800ms both;
}
@keyframes span {
    0% {
        transform: translateX(-99999px);
    }
    100% {
        transform: translateX(0);
    }
}
.index_welcome {
    display: flex;
    justify-content: center;
    animation: welcome 500ms 2500ms both;
    position: initial;
}
.index_welcome__message {
    background-color: white;
    text-shadow: #4fccf3 4px 0 25px;
    color: #4fccf3;
    display: flex;
    width: 93%;
    height: 600px;
    position: absolute;
    top: 0;
    left: 3.5%;
    z-index: -1;
    align-items: center;
    text-align: center;
    justify-content: center;
    font-size: 45px;
    font-family: zaptron;
}
@media (prefers-color-scheme: dark) {
    .index_welcome__message {
        background-color: #262626;
    }
}
.index_welcome__btn {
    border: 2px solid #4fccf3;
    color: #4fccf3;
    margin-top: 10%;
    padding: 0.8em 1.8em;
    position: relative;
    overflow: hidden;
    background-color: transparent;
    text-align: center;
    text-transform: uppercase;
    font-size: 32px;
    transition: .3s;
    z-index: 1;
    font-family: zaptron;
    text-decoration: none;
}
.index_welcome__btn::before {
    content: '';
    background: #4fccf3;
    width: 0;
    height: 300%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    transition: .5s ease;
    display: block;
    z-index: -1;
}
.index_welcome__btn:hover::before {
    width: 105%;
}
.index_welcome__btn:hover {
    color: white;
    border-top-left-radius: 40px;
    border-bottom-right-radius: 40px;
}
@media (prefers-color-scheme: dark) {
    .index_welcome__btn:hover {
        color: #262626;
    }
}
@keyframes welcome {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.nav {
    background-color: white;
    color: #000000;
    position: fixed;
    width: 96%;
    margin-left: 2%;
    top: 2%;
    z-index: 6;
    border-radius: 50px;
    box-shadow: 0px 0px 63px 0px rgba(79, 204, 243, 0.75);
}
.toggle {
    position: absolute;
    top: 0.7rem;
    right: 1rem;
    cursor: pointer;
}
.toggle .menu {
    height: 3rem;
    align-items: center;
    width: auto;
    margin-top: 4px;
}
.nav-checkbox {
    display: none;
}
.menu {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.menu li {
    display: none;
    padding: 1rem;
    list-style: none;
}
.menu li:first-child {
    display: block;
    margin-right: auto;
    padding: 0;
}
.menu a {
    color: inherit;
    font-size: 1.2rem;
    text-decoration: none;
}
.logo {
    display: block;
    align-items: center;
    height: 4.5em;
}
#nav-checkbox:checked ~ ul.menu li {
    display: block;
}
#nav-checkbox:checked ~ label.toggle .menu {
    display: block;
}
@media (min-width: 750px) {
    .toggle {
        display: none;
    }
    .menu {
        flex-direction: row;
    }
    .menu li {
        display: block;
    }
}
.footer-distributed {
    background: white;
    box-shadow: 0px 0px 63px 0px rgba(79, 204, 243, 0.75);
    border-radius: 80px;
    box-sizing: border-box;
    width: 98%;
    margin-left: 1%;
    margin-bottom: 2%;
    margin-top: 5%;
    text-align: left;
    font: bold 16px retro;
    padding: 55px 50px;
}
.footer-distributed .footer-bottom {
    font-size: 10px;
    text-align: center;
}
.footer-distributed .footer-left, .footer-distributed .footer-center, .footer-distributed .footer-right {
    display: inline-block;
    vertical-align: top;
}
.footer-distributed .footer-left {
    width: 40%;
}
.footer-distributed h3 {
    color: black;
    font: normal 36px zaptron;
    margin: 0;
}
.footer-distributed h3 span {
    color: #4fccf3;
}
.footer-distributed .footer-links {
    color: black;
    margin: 20px 0 12px;
    padding: 0;
}
.footer-distributed .footer-links a {
    display: inline-block;
    line-height: 1.8;
    font-weight: 400;
    text-decoration: none;
    color: inherit;
}
.footer-distributed .footer-company-name {
    color: #222;
    font-size: 14px;
    font-weight: normal;
    margin: 0;
}
.footer-distributed .footer-center {
    width: 35%;
}
.footer-distributed .footer-center i {
    background-color: #33383b;
    color: black;
    font-size: 25px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    text-align: center;
    line-height: 42px;
    margin: 10px 15px;
    vertical-align: middle;
}
.footer-distributed .footer-center i.fa-envelope {
    font-size: 17px;
    line-height: 38px;
}
.footer-distributed .footer-center p {
    display: inline-block;
    color: black;
    font-weight: 400;
    vertical-align: middle;
    margin: 0;
}
.footer-distributed .footer-center p span {
    display: block;
    font-weight: normal;
    font-size: 14px;
    line-height: 2;
}
.footer-distributed .footer-center p a {
    color: #4fccf3;
    text-decoration: none;
}
.footer-distributed .footer-links a:before {
    content: "|";
    font-weight: 300;
    font-size: 20px;
    left: 0;
    color: black;
    display: inline-block;
    padding-right: 5px;
}
.footer-distributed .footer-links .link-1:before {
    content: none;
}
.footer-distributed .footer-right {
    width: 20%;
}
.footer-distributed .footer-company-about {
    line-height: 20px;
    color: black;
    font-size: 13px;
    font-weight: normal;
    margin: 0;
}
.footer-distributed .footer-company-about span {
    display: block;
    color: black;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 20px;
}
.footer-distributed .footer-icons {
    margin-top: 25px;
}
.footer-distributed .footer-icons a {
    display: inline-block;
    width: 35px;
    height: 35px;
    cursor: pointer;
    border-radius: 2px;
    font-size: 20px;
    color: black;
    text-align: center;
    line-height: 35px;
    margin-right: 3px;
    margin-bottom: 5px;
}
@media (max-width: 955px) {
    .footer-distributed {
        font: bold 14px retro;
    }
    .footer-distributed h3 {
        font-size: 22px;
    }
    .footer-distributed .footer-left, .footer-distributed .footer-center, .footer-distributed .footer-right {
        display: block;
        width: 100%;
        margin-bottom: 40px;
        text-align: center;
    }
    .footer-distributed .footer-center i {
        margin-left: 0;
    }
}
.warning_button {
    box-sizing: border-box;
    margin-top: 200px;
    padding: 0;
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.base {
    background: #cacaca;
    width: 23.75vmin;
    border-radius: 27vmin;
    box-shadow: 0 6vmin 0.15vmin 0vmin #777, 0 4vmin 0.15vmin 0vmin #777, 0 2vmin 0.15vmin 0vmin #777;
    padding: 0vmin 2vmin 2vmin 2vmin;
    z-index: 1;
    transform: rotateX(60deg) rotateZ(0deg);
    margin-top: -4.5vmin;
    height: 22vmin;
}
button#activate {
    background: #d60505;
    border: 0;
    width: 20vmin;
    height: 19vmin;
    border-radius: 100%;
    position: relative;
    cursor: pointer;
    outline: none;
    z-index: 2;
    box-shadow: 0 4vmin 0.15vmin 0vmin #af0000, 0 2vmin 0.15vmin 0vmin #af0000;
    top: -2.5vmin;
    border: 0.5vmin solid #af0000a1;
    transition: all 0.25s ease 0s;
}
button#activate:hover {
    box-shadow: 0 3vmin 0.15vmin 0vmin #af0000, 0 1vmin 0.15vmin 0vmin #af0000;
    top: -1.5vmin;
    transition: all 0.5s ease 0s;
}
button#activate:active, button#activate.pushed {
    box-shadow: 0 1vmin 0.15vmin 0vmin #af0000, 0 1vmin 0.15vmin 0vmin #af0000;
    top: 0.5vmin;
    transition: all 0.25s ease 0s;
}
button#activate.pushed {
    box-shadow: 0 0 20px 10px #ff3c3c, 0 0 100px 50px #ff2828;
    background: #ff0000;
    border-bottom: 3px solid #00000020;
}
.box {
    transform: rotateX(-35deg) rotateY(45deg) rotateZ(0deg) rotate3d(1, 0, 0, 90deg);
    transform-origin: center top;
    transform-style: preserve-3d;
    width: 45vmin;
    position: absolute;
    z-index: 5;
    margin-top: 27vmin;
    transition: transform 1s ease 0s;
    cursor: pointer;
    height: 45vmin;
    margin-left: -32vmin;
}
.box.opened {
    transform: rotateX(-35deg) rotateY(45deg) rotateZ(0deg) rotate3d(1, 0, 0, 180deg);
}
.box div {
    position: absolute;
    width: 45vmin;
    height: 45vmin;
    background: #00bcd47d;
    opacity: 0.5;
    border: 3px solid #00a4b9;
    border-radius: 3px;
    box-sizing: border-box;
    box-shadow: 0 0 3px 0 #00bcd48a;
}
.box > div:nth-child(1) {
    opacity: 0;
}
.box > div:nth-child(2) {
    transform: rotateX(90deg) translate3d(0px, 5vmin, 5vmin);
    height: 10vmin;
}
.box > div:nth-child(3) {
    transform: rotateX(0deg) translate3d(0, 0, 10vmin);
}
.box > div:nth-child(4) {
    transform: rotateX(270deg) translate3d(0px, -5vmin, 40vmin);
    height: 10vmin;
}
.box > div:nth-child(5) {
    transform: rotateY(90deg) translate3d(-5vmin, 0, 40vmin);
    width: 10vmin;
}
.box > div:nth-child(6) {
    transform: rotateY(-90deg) translate3d(5vmin, 0vmin, 5vmin);
    width: 10vmin;
}
.warning {
    position: absolute;
    z-index: 0;
    width: 45vmin;
    height: 45vmin;
    background: repeating-linear-gradient(-45deg, black, black 3vmin, yellow 3vmin, yellow 6vmin);
    transform: rotateX(-35deg) rotateY(45deg) rotateZ(0deg) rotate3d(1, 0, 0, 90deg);
    box-shadow: 0 0 0 3vmin #af0000;
}
.warning:before {
    content: "";
    width: 80%;
    height: 80%;
    background: linear-gradient(45deg, #000000 0%, #414141 74%);
    float: left;
    margin-top: 10%;
    margin-left: 10%;
    border: 1vmin solid yellow;
    border-radius: 1vmin;
    box-sizing: border-box;
}
.warning:after {
    content: "WARNING:\2009 DANGER";
    color: white;
    transform: rotate(90deg);
    float: left;
    background: #af0000;
    position: absolute;
    bottom: 18.5vmin;
    left: -35vmin;
    font-size: 5vmin;
    font-family: Arial, Helvetica, serif;
    width: 49vmin;
    text-align: center;
    padding: 1vmin;
    text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000;
}
.hinges {
    position: absolute;
    z-index: 3;
    transform: rotateX(-35deg) rotateY(45deg) rotateZ(0deg) rotate3d(1, 0, 0, 90deg);
}
.hinges:before, .hinges:after {
    content: "";
    background: #2b2b2b;
    width: 5vmin;
    height: 1.5vmin;
    position: absolute;
    margin-top: -24.5vmin;
    z-index: 5;
    border: 2px solid #00000010;
    border-radius: 5px 5px 0 0;
    box-sizing: border-box;
    margin-left: -16.25vmin;
}
.hinges:after {
    margin-left: 13.75vmin;
    margin-top: -24.5vmin;
}
.box > span:before, .box > span:after {
    content: "";
    width: 5vmin;
    height: 1.5vmin;
    background: #103e4480;
    position: absolute;
    margin-left: 6vmin;
    border-radius: 0 0 5px 5px;
}
.box > span:after {
    margin-left: 36vmin;
}
.box > span {
    transform: rotateX(89deg) translate(0.3vmin, 0.3vmin);
    position: absolute;
}
.text {
    position: absolute;
    margin-top: 55vmin;
    color: white;
    font-family: Arial, Helvetica, serif;
    font-size: 5vmin;
    text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000;
    perspective-origin: left;
    background: #af0000;
    padding: 1vmin;
    transform: rotateX(-35deg) rotateY(45deg) rotateZ(0deg) rotate3d(1, 0, 0, 90deg) translate(33.5vmin, -2vmin);
    text-align: center;
    width: 49vmin;
}
div#panel:before {
    content: "WARNING";
    top: 3vmin;
    position: relative;
    font-size: 10vmin;
    width: 100vw;
    left: 0;
    z-index: 8;
    text-shadow: 0 0 1px #fff, 0 0 3px #fff;
    border-bottom: 1vmin dotted #fff;
}
#panel {
    position: absolute;
    background: #ff0000d0;
    color: #ffffff;
    font-family: Arial, Helvetica, serif;
    width: 90vmin;
    box-sizing: border-box;
    font-size: 3.25vmin;
    padding: 1vmin 2vmin;
    height: 60vmin;
    box-shadow: 0 0 0 100vmin #ff000060, 0 0 0 5vmin #ff000060;
    z-index: 7;
    display: none;
    text-align: center;
    text-shadow: 0 0 1px #fff, 0 0 3px #fff, 0 0 5px #fff;
    animation: warning-ligth 1s 0s infinite;
}
#panel.show {
    display: block !important;
}
#msg {
    margin-top: 5vmin;
    text-shadow: 0 0 2px #fff;
}
#time {
    font-size: 10vmin;
    background: #00000080;
    max-width: 35vmin;
    margin: 6vmin auto 5vmin !important;
    position: relative;
    border-radius: 0.25vmin;
    text-shadow: 0 0 3px #000, 0 0 2px #000, 0 0 3px #000, 0 0 4px #000, 0 0 5px #000;
    padding: 1vmin 0;
}
#time:before {
    content: "00:0";
}
#abort {
    background: #ffffffb8;
    color: #d30303;
    cursor: pointer;
    padding: 1vmin 2.75vmin;
    font-size: 6vmin;
    border-radius: 0.25vmin;
    font-weight: bold;
    animation: highlight 1s 0s infinite;
}
#abort:hover {
    background: #ffffff;
    box-shadow: 0 0 15px 5px #fff;
}
@keyframes highlight {
    50% {
        box-shadow: 0 0 15px 5px #fff;
    }
}
div#turn-off {
    position: fixed;
    background: #ffffff80;
    left: 0;
    width: 100vw;
    height: 0vh;
    z-index: 7;
}
div#turn-off:before, div#turn-off:after {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    height: 0vh;
    background: #000;
    width: 100vw;
    transition: height 0.5s ease 0s;
}
div#turn-off:after {
    top: inherit;
    bottom: 0;
}
div#turn-off.close {
    height: 100vh;
}
div#turn-off.close:before, div#turn-off.close:after {
    transition: height 0.1s ease 0.1s;
    height: 50vh;
}
#time.crono {
    background: #ffffffba;
    transition: background 0.5s ease 0s;
    color: #ff0000;
    text-shadow: 0 0 1px #ffffff, 0 0 2px #ffffff, 0 0 2px #ffffff;
}
#detonate {
    display: none;
    color: #fff;
    z-index: 5;
    font-size: 8vmin;
    font-family: Arial, Helvetica, serif;
    text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff;
}
#detonate.show {
    display: block;
    animation: blink 0.25s 0s infinite;
}
#abort.hide {
    display: none;
}
@keyframes blink {
    50% {
        opacity: 0;
    }
}
#closing {
    width: 95vw;
    height: 100vh;
    left: 0;
    position: absolute;
}
div#closing:before, div#closing:after {
    display: block;
    content: "";
    width: 50vw;
    height: 1.5vh;
    left: -50vw;
    top: 49vh;
    position: absolute;
    background: #000000;
    z-index: 7;
    transition: left 0.2s ease 0s;
}
div#closing:after {
    right: 100vw;
    transition: right 0.2s ease 0s;
    left: initial;
}
div#closing.close:before {
    left: 0;
    transition: left 0.2s ease 0.2s;
}
div#closing.close:after {
    right: 0;
    transition: right 0.2s ease 0.2s;
}
#restart {
    position: absolute;
    z-index: 8;
    display: none;
}
#reload {
    position: absolute;
    z-index: 8;
    width: 10vmin;
    height: 10vmin;
    border-radius: 100%;
    border: 0;
    margin-top: -5vmin;
    margin-left: -2.5vmin;
    opacity: 0;
    cursor: pointer;
    transform: rotate(0deg);
    transition: transform 0.5s ease 0s;
    outline: none;
}
#reload:hover {
    background: #ef0000;
    transform: rotate(360deg);
    transition: transform 0.5s ease 0s;
}
#restart.show {
    display: block;
}
#restart.show #reload {
    animation: refresh 3.5s 0s 1;
    opacity: 1;
}
@keyframes refresh {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
button#reload:before {
    content: "";
    width: 6vmin;
    height: 6vmin;
    position: absolute;
    left: 2vmin;
    top: 2vmin;
    border-radius: 100%;
    border: 1vmin solid #000;
    box-sizing: border-box;
    border-bottom-color: transparent;
}
button#reload:after {
    content: "";
    border: 1.25vmin solid transparent;
    border-top: 2vmin solid black;
    position: absolute;
    transform: rotate(40deg) translate(0.5vmin, 1.25vmin);
}
@keyframes warning-ligth {
    0% {
        box-shadow: 0 0 0 100vmin #ff000060, 0 0 0 5vmin #ff000060;
    }
    50% {
        box-shadow: 0 0 0 100vmin #ff000020, 0 0 0 5vmin #ff000020;
    }
}
#mute {
    position: absolute;
    bottom: 1vmin;
    right: 1vmin;
    background: #8bc34a80;
    width: 6vmin;
    height: 6vmin;
    cursor: pointer;
    border: 0.5vmin solid #151515;
}
#mute.muted {
    background: #ff000080;
}
#mute:before {
    content: "";
    border: 0.75vmin solid transparent;
    height: 2vmin;
    border-right: 2vmin solid #151515;
    position: absolute;
    border-left-width: 0;
    top: 1.25vmin;
    right: 1.25vmin;
}
#mute:after {
    content: "";
    border: 0vmin solid transparent;
    height: 2vmin;
    border-right: 1.5vmin solid #151515;
    position: absolute;
    top: 2vmin;
    right: 3.5vmin;
}
.accueil_firstpage {
    margin-top: 150px;
    margin-bottom: 50px;
    display: flex;
    list-style: none;
    justify-content: space-around;
    align-items: center;
    padding: 20px;
    background-color: #fff;
    border-radius: 50px;
    width: 88%;
    margin-left: 6%;
    box-shadow: 0px 0px 63px 0px rgba(79, 204, 243, 0.75);
}
.accueil_firstpage img {
    width: 80px;
    margin-left: 40px;
}
.accueil_firstpage .accueil_title {
    column-span: all;
    text-align: center;
    margin: 15px;
}
.accueil_firstpage .accueil_article {
    margin-left: 10px;
    column-gap: 25px;
    font-size: 14px;
    font-family: retro;
}
.lien_adherer {
    text-decoration: none;
    color: #000;
    margin-top: 50px;
    margin-bottom: 50px;
    display: flex;
    list-style: none;
    justify-content: space-around;
    align-items: center;
    padding: 20px;
    background-color: #fff;
    border-radius: 50px;
    width: 20%;
    margin-left: 41%;
    font-size: 12px;
    box-shadow: 0px 0px 63px 0px rgba(79, 204, 243, 0.75);
}
@media (min-width: 591px) {
    .accueil_firstpage .accueil_article {
        display: flex;
    }
    .lien_adherer {
        font-size: 18px;
    }
}
.accueil__sponsos {
    width: 100%;
    background-position: center top;
    background-size: cover;
    margin-bottom: 50px;
}
.accueil__sponsos div {
    border-top: 2px solid linear-gradient(90deg, rgba(49, 134, 160, 0.622374) 100%, #4fccf3 100%);
    border-bottom: 2px solid linear-gradient(90deg, rgba(49, 134, 160, 0.622374) 100%, #4fccf3 100%);
    background: #3186a0;
    background: linear-gradient(90deg, rgba(49, 134, 160, 0.622374) 100%, #4fccf3 100%);
}

.accueil__sponsor-container {
    white-space: nowrap;
    overflow: hidden;
    display: flex;
    align-items: center;
  }

.accueil__sponsos .accueil__sponsor {

    width: 205px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    align-content: center;
}


  
  .accueil__sponsor {
    display: inline-block;
    margin-right: 15%; /* Espace entre les images */
  }

  #derniereImage{
    margin-right: 100%;
  }
  
.accueil_detail1, .accueil_detail2, .accueil_detail3, .accueil_detail4, .accueil_detail5, .accueil_detail6 {
    background-color: #fff;
    border-radius: 50px;
    margin: 30px auto;
    width: 100%;
    max-width: 300px;
    box-shadow: 0px 0px 63px 0px rgba(79, 204, 243, 0.75);
}
.accueil_detail_main h2 {
    font-size: 24px;
    font-family: zaptron;
    text-align: center;
    margin-bottom: 30px;
}
.accueil_detail {
    display: block;
    list-style: none;
    justify-content: space-around;
    align-items: center;
    z-index: -1;
}
details summary, details p {
    padding: 20px;
    cursor: pointer;
}
details p {
    color: black;
    border-top: 1px solid #afafaf;
    font-family: retro;
    font-size: 12px;
}
details summary, .accueil_tuto {
    list-style: none;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 1rem;
}
.accueil_logotuto {
    margin-left: auto;
}
i {
    font-size: 30px;
    cursor: pointer;
    font-weight: 300;
    transition: 0.3s all ease;
}
details[open] summary i {
    transform: rotate(90deg);
    transition: 0.3s all ease;
}
@media (min-width: 591px) {
    .accueil_detail {
        display: flex;
    }
}
.apropos_asso {
    text-align: center;
    margin-top: 150px;
    background-color: white;
    width: 88%;
    box-shadow: 0px 0px 63px 0px rgba(79, 204, 243, 0.75);
    margin-left: 6%;
    margin-bottom: 50px;
    border-radius: 50px;
    padding: 20px;
}
.apropos_asso p {
    font-family: retro;
    font-size: 14px;
}
.apropos_asso h2 {
    font-size: 24px;
}
.apropos_container2 h2 {
    text-align: center;
    margin-top: 30px;
    font-size: 24px;
}
.apropos_box {
    display: flex;
    justify-content: center;
    margin-bottom: 100px;
}
@media (max-width: 591px) {
    .apropos_box {
        display: grid;
    }
}
.apropos_flip-card {
    background-color: transparent;
    width: 200px;
    height: 300px;
    perspective: 1000px;
    font-family: sans-serif;
    margin: 80px;
}
@media (max-width: 770px) {
    .apropos_flip-card {
        margin: 20px;
    }
}
.apropos_title {
    font-size: 1rem;
    font-weight: 900;
    text-align: center;
    margin: 5px;
}
.apropos_title a img {
    margin-top: 10px;
}
.apropos_flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}
.apropos_flip-card:hover .apropos_flip-card-inner {
    transform: rotateY(180deg);
}
.apropos_front {
    box-shadow: 0 8px 14px 0 rgba(0, 0, 0, 0.2);
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    box-shadow: 0px 0px 20px 0px rgba(79, 204, 243, 0.75);
    border-radius: 1rem;
    justify-content: flex-end;
    padding: 10px;
}

.apropos_front p{
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.201), rgba(0, 0, 0, 0));
}
.apropos_flip-card-back {
    box-shadow: 0 8px 14px 0 rgba(0, 0, 0, 0.2);
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    box-shadow: 0px 0px 20px 0px rgba(79, 204, 243, 0.75);
    border-radius: 1rem;
    justify-content: center;
    padding: 3px;
    margin-bottom: 5px;
}
.apropos_flip-card-front1 {
    background-size: cover;
    color: white;
    background-image: url("images/bureaux/president.jpg");
}
.apropos_flip-card-front2 {
    background-size: cover;
    color: white;
    background-image: url("images/bureaux/vicePresident.jpg");
}
.apropos_flip-card-front3 {
    background-size: cover;
    color: white;
    background-image: url("images/bureaux/respoMachine.jpg");
}
.apropos_flip-card-front4 {
    background-size: cover;
    color: white;
    background-image: url("images/bureaux/tresorier.jpg");
}
.apropos_flip-card-front5 {
    background-size: cover;
    color: white;
    background-image: url("images/bureaux/viceTresorier.jpg");
}
.apropos_flip-card-front6 {
    background-size: cover;
    color: white;
    background-image: url("images/bureaux/respo5S.jpg");
}
.apropos_flip-card-front7 {
    background-size: cover;
    color: white;
    background-image: url("images/bureaux/respoCom.jpg");
}
.apropos_flip-card-front8 {
    background-size: cover;
    color: white;
    background-image: url("images/bureaux/viceRespoCom.jpg");
}
.apropos_flip-card-front9 {
    background-size: cover;
    color: white;
    background-image: url("images/bureaux/respoEvenements.jpg");
}
.apropos_flip-card-front10 {
    background-size: cover;
    color: white;
    background-image: url("images/bureaux/viceRespoMachine.jpg");
}
.apropos_flip-card-back {
    background-color: white;
    color: black;
    font-family: retro;
    font-size: 14px;
    transform: rotateY(180deg);
}
.apropos_salles {
    display: grid;
}
.apropos_salles h2 {
    font-size: 24px;
    text-align: center;
    margin-bottom: 30px;
}
.apropos_salle_commune {
    max-width: 400px;
    margin: 50px auto;
    box-shadow: 0px 0px 63px 0px rgba(79, 204, 243, 0.75);
    display: flex;
    flex-direction: column;
    border-radius: 0.75rem;
    background-color: white;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    justify-content: center;
    margin: 20px auto;
}
.apropos_salle_meca1 {
    max-width: 400px;
    margin: 50px auto;
    box-shadow: 0px 0px 63px 0px rgba(79, 204, 243, 0.75);
    display: flex;
    flex-direction: column;
    border-radius: 0.75rem;
    background-color: white;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    margin: 50px auto;
    z-index: -1000;
}
.apropos_salle_meca2 {
    max-width: 400px;
    margin: 50px auto;
    box-shadow: 0px 0px 63px 0px rgba(79, 204, 243, 0.75);
    display: flex;
    flex-direction: column;
    border-radius: 0.75rem;
    background-color: white;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    margin: 50px auto;
    z-index: 1;
}
.apropos_salle_meca3 {
    max-width: 400px;
    margin: 50px auto;
    box-shadow: 0px 0px 63px 0px rgba(79, 204, 243, 0.75);
    display: flex;
    flex-direction: column;
    border-radius: 0.75rem;
    background-color: white;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    margin: 50px auto;
    z-index: -1000;
}
.apropos_salle_meca {
    display: flex;
}
@media (max-width: 990px) {
    .apropos_salle_meca {
        display: block;
    }
}
.apropos_salle_commune a, .apropos_salle_meca1 a, .apropos_salle_meca2 a, .apropos_salle_meca3 a {
    text-decoration: none;
}
.apropos_header {
    margin-left: 1rem;
    margin-right: 1rem;
    margin-top: 1rem;
}
.apropos_post-image1 {
    width: auto;
    border-radius: 0.5rem;
    height: 15rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("images/locaux/salle_commune.jpg");
}
.apropos_post-image2 {
    width: auto;
    border-radius: 0.5rem;
    height: 15rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("images/locaux/salle_meca2.jpeg");
}
.apropos_post-image3 {
    width: auto;
    border-radius: 0.5rem;
    height: 15rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("images/locaux/salle_meca.jpeg");
}
.apropos_post-image4 {
    width: auto;
    border-radius: 0.5rem;
    height: 15rem;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("images/locaux/salle_meca3.jpeg");
}
.apropos_content {
    flex: 1 1 0%;
    padding: 1rem;
    display: flex;
    flex-direction: column;
}
.apropos_tag {
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    color: royalblue;
    font-family: zaptron;
}
.apropos_salle_title {
    margin-top: 0.5rem;
    font-weight: 500;
    font-size: 23px;
    color: black;
    font-family: zaptron;
}
.apropos_description {
    margin-bottom: 0.75rem;
    color: #474444;
    font-family: retro;
    font-size: 14px;
}
.apropos_footer {
    background-color: transparent;
    padding: 1.5rem;
    padding-top: 0rem;
    display: flex;
}
.apropos_poster {
    height: 2.5rem;
    width: 2.5rem;
}
.apropos_poster .apropos_image {
    height: 100%;
    width: 100%;
    border-radius: 0.75rem;
    background-color: royalblue;
}
.apropos_info {
    margin-left: 0.75rem;
}
.info .apropos_name {
    margin-bottom: 0rem;
    font-weight: 700;
    color: #334155;
}
.apropos_info .apropos_date {
    margin-bottom: 0rem;
    font-size: 0.75rem;
    line-height: 1rem;
    color: #474444;
}
.projet_container {
    margin-top: 130px;
    width: 80%;
    margin-left: 10%;
}
.projet_container h1 {
    text-align: center;
    padding: 30px 0 0 0;
    font-size: 24px;
}
.projet_container h4 {
    font-size: 1.2em;
    text-align: center;
    padding: 0 0 30px 0;
    margin-bottom: 20px;
}
.projet_timeline {
    list-style: none;
    padding: 20px 0 20px;
    position: relative;
}
.projet_timeline:before {
    top: 0;
    bottom: 0;
    position: absolute;
    content: "";
    width: 3px;
    background-color: #d9d9d9;
    margin-left: -1.5px;
    left: 20px;
}
@media (min-width: 576px) {
    .projet_timeline:before {
        left: 50%;
    }
}
.projet_timeline > li {
    margin-bottom: 20px;
    position: relative;
    padding-left: 55px;
}
.projet_timeline > li:after, .projet_timeline > li:after {
    content: "";
    display: table;
    clear: both;
}
.projet_timeline > li .projet_panel {
    width: 100%;
    float: left;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    background: #fff;
    box-shadow: 1px 2px 80px 0 rgba(0, 0, 0, 0.1);
}
.projet_timeline > li .projet_panel p {
    border-top: 0;
}
.projet_timeline > li .projet_panel summary {
    display: block;
    user-select: none;
    outline: none;
    padding: 20px;
    margin-bottom: 0px;
    transition: all 600ms cubic-bezier(0.23, 1, 0.32, 1);
    transition-property: margin, background;
    font-weight: 600;
}
.projet_timeline > li .projet_panel summary::-webkit-details-marker {
    display: none;
}
.projet_timeline > li .projet_panel summary:hover {
    background: rgba(0, 0, 0, 0.1);
}
.projet_timeline > li .projet_panel p {
    padding: 0 20px 10px;
}
.projet_timeline > li .projet_panel .projet_img {
    display: block;
    margin: 20px auto;
    border-radius: 20px;
}
.projet_timeline > li .projet_panel[open] summary {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
@media (min-width: 576px) {
    .projet_timeline > li {
        padding-left: 0px;
    }
    .projet_timeline > li .projet_panel {
        width: 50%;
    }
    .projet_timeline > li:not(:nth-child(even)) {
        padding-right: 90px;
    }
    .projet_timeline > li:nth-child(even) {
        padding-left: 90px;
    }
    .projet_timeline > li:nth-child(even) > :nth-child(even) {
        float: right;
    }
}
.projet_timeline > li > .projet_icon {
    color: #d9d9d9;
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 2.5em;
    text-align: center;
    position: absolute;
    left: 20px;
    margin-left: -25px;
    background-color: #fafafa;
    z-index: 1;
    border-radius: 50%;
    font-family: Font Awesome\ 5 Free;
}
@media (min-width: 576px) {
    .projet_timeline > li > .projet_icon {
        left: 50%;
    }
}
.projet_timeline > li > .projet_icon.projet_done {
    background-image: url("images/projet/valide.png");
    background-repeat: no-repeat;
    background-size: cover;
}
.projet_timeline > li > .projet_icon.projet_working {
    background-image: url("images/projet/time.png");
    background-repeat: no-repeat;
    background-size: cover;
}
.projet_timeline > li > .projet_icon.projet_novalid {
    background-image: url("images/projet/annuler.png");
    background-repeat: no-repeat;
    background-size: cover;
}
.projet_timeline > li > .projet_icon.projet_point {
    background-image: url("images/projet/point.png");
    background-repeat: no-repeat;
    background-size: cover;
}
iframe {
    margin-top: 150px;
    margin-left: auto;
    margin-right: auto;
    width: 600px;
    height: 400px;
    box-shadow: 0px 0px 63px 0px rgba(79, 204, 243, 0.75);
    display: grid;
    place-items: center;
}
@media (max-width: 880px) {
    iframe {
        width: 400px;
        height: 300px;
        margin-top: 130px;
        margin-left: auto;
        margin-right: auto;
    }
}
@media (max-width: 362px) {
    iframe {
        width: 300px;
        height: 300px;
        margin-top: 150px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50px;
    }
}