@font-face {
    font-family: Lets_Play;
    src: url('typo/Lets Play.ttf');
}
@font-face {
    font-family: Roboto;
    src: url('typo/Roboto-Regular.ttf');
}
body {
    margin: 0;
    padding: 0;
}

#corps{
    max-width: 980px;
    margin: 0 auto;
    margin-top:-300px;
}
/*---------------------------------- Header ----------------------------------*/
#header {
    width: 100%;
    position: relative;
    overflow-x: hidden;
    z-index:-1;
}
#box_logo{
    width:100%;
    background-color:#e51e25;
}
#logo_occitanie{
    width: 200px;
    margin-left:8%
}
@media screen and (max-width: 1010px) and (min-width: 701px){
    #logo_occitanie{
        width: 150px;
    }
}
@media screen and (max-width: 700px){
    #logo_occitanie{
        width: 100px;
    }
}
#logo_occitanie>img{
    width:100%;
    border-radius: 0 0 15px 15px;
}
#header-red{
    height: 200px;
    width:100%;
    background-color:#e51e25;
    position:absolute;
    margin-top: -1px;
}
#header-img {
    width: 2000px;
    position: relative;
    overflow: hidden;
    left: 50%;
    transform: translateX(-50%);
}

#header-img > img {
    width: 100%;
    height: auto;
}

/*---------------------------------- Boutons d'action ----------------------------------*/
.boutons_action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.boutons_action > * {
    flex-grow: 1;
    margin: 1em 0 1em 0;
    white-space: nowrap;
}

.boutons_action_texte {
    background-color: rgb(47, 49, 82);
    border-radius: 10px;
    padding: 0.8em;
    transition: padding 0.3s ease-in-out;
}

.boutons_action_texte:hover {
    padding: 1em;
}

.boutons_action_texte h2 {
    color: rgb(255, 255, 255);
    font-family: Lets_Play, Arial, sans-serif;
    margin: 0;
    font-weight: 500;
    font-size: 28px;
}

.boutons_action_texte a {
    text-decoration: none;
}

/*---------------------------------- Bloc dépliable ----------------------------------*/
#bloc_depliable{
    width:100%;
    margin-top:100px;
    margin-bottom:100px;
    border:2px solid #D9DDE6;
    border-radius:8px;
}

#bloc_depliable_titre{
    font-size: 1em;
    clear: left;
    cursor: pointer;
    position: relative;
    background: none;
    margin: 0 !important;
    padding:15px;
}
#bloc_depliable_titre > h2{
    margin:0;
    color: black;
    font-family: Roboto, sans-serif;
}
#bloc_depliable_titre:hover > h2{
    margin:0;
    color: #C10230;
}
#bloc_depliable_titre:after{
    content: "";
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    -webkit-transform: translateY(-50%) rotate(45deg);
    border: solid #C10230;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 4px;
    z-index: 12;
    transition: transform 0.3s;
}

#bloc_depliable_titre.opened:after {
    transform: translateY(-50%) rotate(-135deg);
}

#bloc_depliable_content{
    padding:0 20px;
}

#bloc_depliable_content>h2{
    color: #e51e25;
    text-transform: uppercase;
    font-family: Lets_Play, Arial, sans-serif;
    margin: 40px 0 0 0;
    font-weight: 500;
    font-size: 28px;
}
#bloc_depliable_content li,
#bloc_depliable_content p{
    font-family: Roboto, sans-serif;
    margin: 10px 0 10px 0;
    color:#293254;
    font-size: 18px;
}

#bloc_depliable_content a {
    text-decoration: underline;
    color: #293254;
}

.depliable_content_bold,
.depliable_content_h3{
    text-transform: uppercase;
    font-weight: bold;
}
#bloc_depliable_baseline{
    position:relative;
}
#bloc_depliable_baseline:after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -.75em;
    width: 48px;
    height: 3px;
    background-color: #e51e25;
    border-radius: 5px;
}
@media screen and (max-width: 1010px) and (min-width: 701px){
    #bloc_depliable {
        width: 80%;
        margin: auto;
        margin-top:20px;
        margin-bottom:20px;
    }
    #bloc_depliable_content>h2{
        margin: 30px 0 0 0;
        font-size: 22px;
    }
    #bloc_depliable_titre > h2 {
        font-size: 22px;
    }
    #bloc_depliable_content li, #bloc_depliable_content p {
        font-size: 14px;
    }
}
@media screen and (max-width: 700px){
    #bloc_depliable {
        width: 80%;
        margin: auto;
        margin-top:20px;
        margin-bottom:20px;
    }
    #bloc_depliable_content>h2{
        margin: 15px 0 0 0;
        font-size: 16px;
    }
    #bloc_depliable_titre > h2 {
        font-size: 16px;
    }
    #bloc_depliable_content li, #bloc_depliable_content p {
        font-size: 10px;
    }
}

/*---------------------------------- Footer ----------------------------------*/
footer{
    width:100%;
    background-color: #293034;
    min-height:80px;
}
footer > section{
    display:flex;
    flex-wrap:wrap;
    gap:50px;
    justify-content: space-around;
    padding:25px;
}
footer > section > article{
    min-width: 150px;
    text-align: center;
}
footer > section > article > a{
    color: #FFCD00;
    font-family: Roboto, sans-serif;
    padding: .5em 0;
    text-underline-offset: .3em;
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: 0.2s ease-out;
}
footer > section > article > a:hover{
    text-decoration: underline;
    text-decoration-color: #FFCD00;
}
/*---------------------------------- Menu ----------------------------------*/
.menu{
    display:flex;
    justify-content:center;
    gap:50px;
    width:100%;
}
.menu > article{
    width:33%;
    text-align:center;
}
.menu > article > article {
    cursor:pointer;
    margin: auto;
    text-align: center;
    overflow: hidden;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}
.menu_pourquoi > article > img{
    width:100%;
}
.menu_pour_qui > article > img{
    width:100%;
}
.menu_comment > article > img{
    width:55%;
}
.menu > article > article > h2{
    text-transform: uppercase;
    letter-spacing: 3px;
    font-family: Lets_Play, Arial, sans-serif;
    margin:25px 0 0 0;
}
.menu_red {
    background-color:#e51e25;
    color:white;
}
.menu_grey{
    background-color: #b7bdc8;
    color:#54607b;
}

.menu > article > article:hover {
    background-color:#e51e25;
    color:white;
}

#pour_qui{
    display:none;
}
#comment{
    display:none;
}
/*---------------------------------- Sous-menu ----------------------------------*/
.sous_menu {
    display: flex;
    justify-content: center;
    gap: 30px;
    width: 100%;
    margin-top:30px;
}
.sous_menu > article{
    width:12%;
    text-align:center;
}
.sous_menu > article > article {
    cursor: pointer;
    margin: auto;
    text-align: center;
    overflow: hidden;
    width: 125px;
    height: 62px;
    border-radius: 31px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.sous_menu > article > article > h3 {
    text-transform: uppercase;
    letter-spacing: 3px;
    margin: 0;
    padding: 9px 7px;
    font-size: 15px;
    font-family: Lets_Play, Arial, sans-serif;
}
.sous_menu_red {
    background-color:#e51e25;
    color:white;
}
.sous_menu_grey{
    background-color: #b7bdc8;
    color:#54607b;
}

.sous_menu > article > article:hover {
    background-color:#e51e25;
    color:white;
}

#corps_27_59{
    display:none;
}
#corps_60{
    display:none;
}

/*---------------------------------- Pourquoi ----------------------------------*/

#corps_pourquoi .illustation > img{
    width:100%;
}

/*---------------------------------- Pour qui ----------------------------------*/

#corps_pour_qui .illustation > img{
    width:100%;
}

/*---------------------------------- Comment ----------------------------------*/

#corps_comment .illustation > img{
    width:100%;
}

/*---------------------------------- Texte ----------------------------------*/
.texte{
    width:175px;
}
.texte h2{
    color: #e51e25;
    text-transform: uppercase;
    font-family: Lets_Play, Arial, sans-serif;
    margin: 0;
    font-weight: 500;
    font-size: 28px;
}
.texte p{
    font-family: Roboto, sans-serif;
    margin: 0;
    color:#293254;
    font-size: 18px;
}

/*---------------------------------- Pourquoi ----------------------------------*/

#corps_pourquoi .illustation > img{
    width:100%;
}

/*---------------------------------- Comment ----------------------------------*/
#corps_comment .illustation{
    text-align:center;
}
#corps_comment .illustation > img{
    width:80%;
}

/*---------------------------------- Animations ----------------------------------*/

#corps_pourquoi,
#content_12_26,
#content_27_29,
#content_60,
#corps_comment{
    position:relative;
}

/*---------------------------------- Pourquoi ----------------------------------*/
/*----- Pourquoi 1 -----*/
#pourquoi1{
    position:absolute;
    top:135px;
    left:90%;
    opacity:0;
}
#pourquoi1.move-horizontal-pourquoi1 {
    animation: moveHorizontalPourquoi1 1s forwards;
}
#pourquoi1.move-horizontal-pourquoi1-Return {
    animation: moveHorizontalPourquoi1Return 1s forwards;
}
@keyframes moveHorizontalPourquoi1 {
    from {
        left: 90%;
        opacity:0;
    }
    to {
        left: 76%;
        opacity:1;
    }
}
@keyframes moveHorizontalPourquoi1Return {
    from {
        left: 76%;
        opacity:1;
    }
    to {
        left: 90%;
        opacity:0;
    }
}
/*------ Pourquoi 2 ------*/
#pourquoi2{
    position:absolute;
    top:460px;
    width:182px;
    left:0;
    opacity:0;
}
#pourquoi2.move-horizontal-pourquoi2 {
    animation: moveHorizontalPourquoi2 1s forwards;
}
#pourquoi2.move-horizontal-pourquoi2-Return {
    animation: moveHorizontalPourquoi2Return 1s forwards;
}
@keyframes moveHorizontalPourquoi2 {
    from {
        left: 0;
        opacity:0;
    }
    to {
        left: 6%;
        opacity:1;
    }
}
@keyframes moveHorizontalPourquoi2Return {
    from {
        left: 6%;
        opacity:1;
    }
    to {
        left: 0;
        opacity:0;
    }
}
/*------ Pourquoi 3 ------*/
#pourquoi3{
    position:absolute;
    top:500px;
    left:90%;
    opacity:0;
}
#pourquoi3.move-horizontal-pourquoi3 {
    animation: moveHorizontalPourquoi3 1s forwards;
}
#pourquoi3.move-horizontal-pourquoi3-Return {
    animation: moveHorizontalPourquoi3Return 1s forwards;
}
@keyframes moveHorizontalPourquoi3 {
    from {
        left: 90%;
        opacity:0;
    }
    to {
        left: 77%;
        opacity:1;
    }
}
@keyframes moveHorizontalPourquoi3Return {
    from {
        left: 77%;
        opacity:1;
    }
    to {
        left: 90%;
        opacity:0;
    }
}
/*------ Pourquoi 4 ------*/
#pourquoi4{
    position:absolute;
    top:770px;
    left:0;
    opacity:0;
}
#pourquoi4.move-horizontal-pourquoi4 {
    animation: moveHorizontalPourquoi4 1s forwards;
}
#pourquoi4.move-horizontal-pourquoi4-Return {
    animation: moveHorizontalPourquoi4Return 1s forwards;
}
@keyframes moveHorizontalPourquoi4 {
    from {
        left: 0;
        opacity:0;
    }
    to {
        left: 15%;
        opacity:1;
    }
}
@keyframes moveHorizontalPourquoi4Return {
    from {
        left: 15%;
        opacity:1;
    }
    to {
        left: 0;
        opacity:0;
    }
}
/*------ Pourquoi Cloche ------*/
#pourquoi_cloche{
    position:absolute;
    top:330px;
    left:160px;
    width:28%;
    transform: rotateZ(-4deg);
    animation: movePourquoi_cloche 7s infinite;
}
#pourquoi_cloche>img{
    width:100%;
}
@keyframes movePourquoi_cloche {
    0% {
        top: 310px;
        left:160px;
        transform: rotateZ(-4deg);
    }
    50% {
        top: 280px;
        left:150px;
        transform: rotateZ(-15deg);
    }
    100%{
        top: 310px;
        left:160px;
        transform: rotateZ(-4deg);
    }
}
/*------ Pourquoi cochon ------*/
#pourquoi_cochon{
    position:absolute;
    top:680px;
    left:495px;
    width:2%;
    animation:movePourquoi_cochon 5s infinite;
}
#pourquoi_cochon>img{
    width:100%;
}
@keyframes movePourquoi_cochon {
    0% {
        top: 680px;
        transform: rotateZ(0deg);
    }
    50% {
        top: 730px;
        transform: rotateZ(360deg);
    }
    100%{
        top: 680px;
        transform: rotateZ(0deg);
    }
}
/*---------------------------------- 12/26 ----------------------------------*/

/*----- 12/26 1 -----*/
#t12_26_1{
    position:absolute;
    top:360px;
    left:0;
    opacity:0;
}
#t12_26_1.move-horizontal-12_26_1 {
    animation: moveHorizontal12_26_1 1s forwards;
}
#t12_26_1.move-horizontal-12_26_1-Return {
    animation: moveHorizontal12_26_1Return 1s forwards;
}
@keyframes moveHorizontal12_26_1 {
    from {
        left: 0;
        opacity:0;
    }
    to {
        left: 10%;
        opacity:1;
    }
}
@keyframes moveHorizontal12_26_1Return {
    from {
        left: 10%;
        opacity:1;
    }
    to {
        left: 0;
        opacity:0;
    }
}
/*------ 12/26 2 ------*/
#t12_26_2{
    position:absolute;
    top:640px;
    left:0;
    opacity:0;
}
#t12_26_2.move-horizontal-12_26_2 {
    animation: moveHorizontal12_26_2 1s forwards;
}
#t12_26_2.move-horizontal-12_26_2-Return {
    animation: moveHorizontal12_26_2Return 1s forwards;
}
@keyframes moveHorizontal12_26_2 {
    from {
        left: 0;
        opacity:0;
    }
    to {
        left: 8%;
        opacity:1;
    }
}
@keyframes moveHorizontal12_26_2Return {
    from {
        left: 8%;
        opacity:1;
    }
    to {
        left: 0;
        opacity:0;
    }
}
/*------ 12/26 3 ------*/
#t12_26_3{
    position:absolute;
    top:880px;
    width:180px;
    left:90%;
    opacity:0;
}
#t12_26_3.move-horizontal-12_26_3 {
    animation: moveHorizontal12_26_3 1s forwards;
}
#t12_26_3.move-horizontal-12_26_3-Return {
    animation: moveHorizontal12_26_3Return 1s forwards;
}
@keyframes moveHorizontal12_26_3 {
    from {
        left: 90%;
        opacity:0;
    }
    to {
        left: 80%;
        opacity:1;
    }
}
@keyframes moveHorizontal12_26_3Return {
    from {
        left: 80%;
        opacity:1;
    }
    to {
        left: 90%;
        opacity:0;
    }
}
/*------ 12/26 soleil ------*/
#soleil12_26{
    position:absolute;
    top:105px;
    left:778px;
    width:14%;
    animation: rotatesoleil12_26 15s linear infinite;
}
#soleil12_26>img{
    width:100%;
}
@keyframes rotatesoleil12_26 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
/*------ 12/26 cochon ------*/
#cochon12_26{
    position:absolute;
    top:850px;
    left:650px;
    width:2%;
    animation:moveCochon12_26 5s infinite;
}
#cochon12_26>img{
    width:100%;
}
@keyframes moveCochon12_26 {
    0% {
        top: 850px;
        transform: rotateZ(0deg);
    }
    50% {
        top: 880px;
        transform: rotateZ(360deg);
    }
    100%{
        top: 850px;
        transform: rotateZ(0deg);
    }
}

/*---------------------------------- 27/29 ----------------------------------*/

/*----- 27/29 1 -----*/
#t27_29_1{
    position:absolute;
    top:50px;
    left:100%;
    width:165px;
    opacity:0;
}
#t27_29_1.move-horizontal-27_29_1 {
    animation: moveHorizontal27_29_1 1s forwards;
}
#t27_29_1.move-horizontal-27_29_1-Return {
    animation: moveHorizontal27_29_1Return 1s forwards;
}
@keyframes moveHorizontal27_29_1 {
    from {
        left: 100%;
        opacity:0;
    }
    to {
        left: 90%;
        opacity:1;
    }
}
@keyframes moveHorizontal27_29_1Return {
    from {
        left: 90%;
        opacity:1;
    }
    to {
        left: 100%;
        opacity:0;
    }
}
/*------ 27/29 2 ------*/
#t27_29_2{
    position:absolute;
    top:500px;
    left:5%;
    opacity:0;
    width:200px;
}
#t27_29_2.move-horizontal-27_29_2 {
    animation: moveHorizontal27_29_2 1s forwards;
}
#t27_29_2.move-horizontal-27_29_2-Return {
    animation: moveHorizontal27_29_2Return 1s forwards;
}
@keyframes moveHorizontal27_29_2 {
    from {
        left: 5%;
        opacity:0;
    }
    to {
        left: 18%;
        opacity:1;
    }
}
@keyframes moveHorizontal27_29_2Return {
    from {
        left: 18%;
        opacity:1;
    }
    to {
        left: 5%;
        opacity:0;
    }
}
/*------ 27/29 3 ------*/
#t27_29_3{
    position:absolute;
    top:915px;
    left:90%;
    opacity:0;
    width:235px;
}
#t27_29_3.move-horizontal-27_29_3 {
    animation: moveHorizontal27_29_3 1s forwards;
}
#t27_29_3.move-horizontal-27_29_3-Return {
    animation: moveHorizontal27_29_3Return 1s forwards;
}
@keyframes moveHorizontal27_29_3 {
    from {
        left: 90%;
        opacity:0;
    }
    to {
        left: 75%;
        opacity:1;
    }
}
@keyframes moveHorizontal27_29_3Return {
    from {
        left: 75%;
        opacity:1;
    }
    to {
        left: 90%;
        opacity:0;
    }
}
/*------ 27/29 soleil ------*/
#soleil27_29{
    position:absolute;
    top:310px;
    left:325px;
    width:15%;
    animation: rotatesoleil27_29 15s linear infinite;
}
#soleil27_29>img{
    width:100%;
}
@keyframes rotatesoleil27_29 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
/*------ 27/29 cochon ------*/
#cochon27_29{
    position:absolute;
    top:850px;
    left:615px;
    width:2%;
    animation:moveCochon27_29 5s infinite;
}
#cochon27_29>img{
    width:100%;
}
@keyframes moveCochon27_29 {
    0% {
        top: 850px;
        transform: rotateZ(0deg);
    }
    50% {
        top: 880px;
        transform: rotateZ(360deg);
    }
    100%{
        top: 850px;
        transform: rotateZ(0deg);
    }
}
/*---------------------------------- 60 ----------------------------------*/

/*----- 60 1 -----*/
#t60_1{
    position:absolute;
    top:330px;
    left:0%;
    opacity:0;
    width:200px
}
#t60_1.move-horizontal-60_1 {
    animation: moveHorizontal60_1 1s forwards;
}
#t60_1.move-horizontal-60_1-Return {
    animation: moveHorizontal60_1Return 1s forwards;
}
@keyframes moveHorizontal60_1 {
    from {
        left: 0;
        opacity:0;
    }
    to {
        left: 8%;
        opacity:1;
    }
}
@keyframes moveHorizontal60_1Return {
    from {
        left: 8%;
        opacity:1;
    }
    to {
        left: 0;
        opacity:0;
    }
}
/*------ 60 2 ------*/
#t60_2{
    position:absolute;
    top:585px;
    left:5%;
    opacity:0;
    width:200px;
}
#t60_2.move-horizontal-60_2 {
    animation: moveHorizontal60_2 1s forwards;
}
#t60_2.move-horizontal-60_2-Return {
    animation: moveHorizontal60_2Return 1s forwards;
}
@keyframes moveHorizontal60_2 {
    from {
        left: 5%;
        opacity:0;
    }
    to {
        left: 15%;
        opacity:1;
    }
}
@keyframes moveHorizontal60_2Return {
    from {
        left: 15%;
        opacity:1;
    }
    to {
        left: 5%;
        opacity:0;
    }
}
/*------ 60 3 ------*/
#t60_3{
    position:absolute;
    top:870px;
    left:67%;
    opacity:0;
    width:200px;
}
#t60_3.move-horizontal-60_3 {
    animation: moveHorizontal60_3 1s forwards;
}
#t60_3.move-horizontal-60_3-Return {
    animation: moveHorizontal60_3Return 1s forwards;
}
@keyframes moveHorizontal60_3 {
    from {
        left: 67%;
        opacity:0;
    }
    to {
        left: 57%;
        opacity:1;
    }
}
@keyframes moveHorizontal60_3Return {
    from {
        left: 57%;
        opacity:1;
    }
    to {
        left: 67%;
        opacity:0;
    }
}
/*------ 60 soleil ------*/
#soleil60{
    position:absolute;
    top:45px;
    left:760px;
    width:13%;
    animation: rotatesoleil60 15s linear infinite;
}
#soleil60>img{
    width:100%;
}
@keyframes rotatesoleil60 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
/*----- 60 ampoule -----*/
#ampoule60{
    position: absolute;
    top: 768px;
    left: 367px;
    width: 13%;
    opacity: 0;
    animation: moveampoule60 2s linear infinite;
}
#ampoule60>img{
    width:100%;
}
@keyframes moveampoule60 {
    0% {
        opacity:0;
    }
    50% {
        opacity:1;
    }
    100% {
        opacity:0;
    }
}
/*---------------------------------- comment ----------------------------------*/
/*----- comment 1 -----*/
#comment1{
    position:absolute;
    top:170px;
    left:15%;
    opacity:0;
}
#comment1.move-horizontal-comment1 {
    animation: moveHorizontalcomment1 1s forwards;
}
#comment1.move-horizontal-comment1-Return {
    animation: moveHorizontalcomment1Return 1s forwards;
}
@keyframes moveHorizontalcomment1 {
    from {
        left: 15%;
        opacity:0;
    }
    to {
        left: 25%;
        opacity:1;
    }
}
@keyframes moveHorizontalcomment1Return {
    from {
        left: 25%;
        opacity:1;
    }
    to {
        left: 15%;
        opacity:0;
    }
}
/*------ comment 2 ------*/
#comment2{
    position:absolute;
    top:365px;
    left:0;
    opacity:0;
    width:150px;
}
#comment2.move-horizontal-comment2 {
    animation: moveHorizontalcomment2 1s forwards;
}
#comment2.move-horizontal-comment2-Return {
    animation: moveHorizontalcomment2Return 1s forwards;
}
@keyframes moveHorizontalcomment2 {
    from {
        left: 0;
        opacity:0;
    }
    to {
        left: 10%;
        opacity:1;
    }
}
@keyframes moveHorizontalcomment2Return {
    from {
        left: 10%;
        opacity:1;
    }
    to {
        left: 0;
        opacity:0;
    }
}
/*------ comment 3 ------*/
#comment3{
    position:absolute;
    top:370px;
    left:98%;
    width:129px;
    opacity:0;
}
#comment3.move-horizontal-comment3 {
    animation: moveHorizontalcomment3 1s forwards;
}
#comment3.move-horizontal-comment3-Return {
    animation: moveHorizontalcomment3Return 1s forwards;
}
@keyframes moveHorizontalcomment3 {
    from {
        left: 98%;
        opacity:0;
    }
    to {
        left: 88%;
        opacity:1;
    }
}
@keyframes moveHorizontalcomment3Return {
    from {
        left: 88%;
        opacity:1;
    }
    to {
        left: 98%;
        opacity:0;
    }
}
/*------ comment 4 ------*/
#comment4{
    position:absolute;
    top:670px;
    left:0;
    opacity:0;
    width:128px;
}
#comment4.move-horizontal-comment4 {
    animation: moveHorizontalcomment4 1s forwards;
}
#comment4.move-horizontal-comment4-Return {
    animation: moveHorizontalcomment4Return 1s forwards;
}
@keyframes moveHorizontalcomment4 {
    from {
        left: 0;
        opacity:0;
    }
    to {
        left: 13%;
        opacity:1;
    }
}
@keyframes moveHorizontalcomment4Return {
    from {
        left: 13%;
        opacity:1;
    }
    to {
        left: 0;
        opacity:0;
    }
}
/*------ comment 5 ------*/
#comment5{
    position:absolute;
    top:820px;
    left:95%;
    opacity:0;
}
#comment5.move-horizontal-comment5 {
    animation: moveHorizontalcomment5 1s forwards;
}
#comment5.move-horizontal-comment5-Return {
    animation: moveHorizontalcomment5Return 1s forwards;
}
@keyframes moveHorizontalcomment5 {
    from {
        left: 95%;
        opacity:0;
    }
    to {
        left: 85%;
        opacity:1;
    }
}
@keyframes moveHorizontalcomment5Return {
    from {
        left: 85%;
        opacity:1;
    }
    to {
        left: 95%;
        opacity:0;
    }
}
/*----- comment main -----*/
#comment_main{
    position:absolute;
    top:90px;
    left:59%;
    width:5%;
    animation: movecomment_main 2s infinite;
}
#comment_main > img{
    width:100%;
}
@keyframes movecomment_main {
    0% {
        left: 59%;
        top:90px;
    }
    50% {
        left: 62%;
        top:105px;
    }
    100% {
        left: 59%;
        top:90px;
    }
}
/*----- comment start -----*/
#comment_start{
    position:absolute;
    top:493px;
    left:75%;
    width:10%;
    animation:movecomment_start 5s infinite;
}
#comment_start > img{
    width:100%;
}
@keyframes movecomment_start {
    0% {
        left: 75%;
        top:493px;
    }
    50% {
        left: 57%;
        top:482px;
    }
    100% {
        left: 75%;
        top:493px;
    }
}
/*----- comment stop -----*/
#comment_stop{
    position:absolute;
    top:800px;
    left:24%;
    width:10%;
    animation:movecomment_stop 5s infinite;
    animation-delay: 1.7s;
}
#comment_stop > img{
    width:100%;
}
@keyframes movecomment_stop {
    0% {
        left: 24%;
        top:800px;
    }
    50% {
        left: 42%;
        top:773px;
    }
    100% {
        left: 24%;
        top:800px;
    }
}

/*----- comment fairtiq -----*/
#comment_fairtiq {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#comment_fairtiq > * {
    flex-grow: 1;
    padding-bottom: 0.3em;
}

#comment_fairtiq img {
    width: 200px;
    height: 70px;
}

#comment_fairtiq article {
    white-space: nowrap;
}

/*----------------------------------- Responsive Tablet -----------------------------------*/
@media screen and (max-width: 1010px) and (min-width: 701px) {
    #corps {
        max-width: 700px;
        margin: 0 auto;
        margin-top: -200px;
    }
    /*-------------------------- Header --------------------------*/
    #header-red {
        height: 135px;
    }
    #header-img {
        width: 1360px;
    }
    /*-------------------------- Menu --------------------------*/
    .menu{
        gap:30px;
    }
    .menu > article > article{
        width:170px;
        height:170px;
    }
    .menu > article > article > h2 {
        font-size: 18px;
    }
    /*-------------------------- Sous-Menu --------------------------*/
    .sous_menu > article {
        width: 20%;
    }
    .sous_menu > article > article > h3 {
        letter-spacing: 2px;
        font-size: 13px;
    }
    /*-------------------------- Texte --------------------------*/
    .texte{
        width:130px;
    }
    .texte h2 {
        font-size: 22px;
    }
    .texte p {
        font-size: 12px;
    }
    /*-------------------------- Pourquoi --------------------------*/
    /*----- Pourquoi 1 -----*/
    #pourquoi1{
        top:105px;
    }
    /*------ Pourquoi 2 ------*/
    #pourquoi2{
        top:335px;
        width:130px;
    }
    /*------ Pourquoi 3 ------*/
    #pourquoi3{
        top:361px;
    }
    /*------ Pourquoi 4 ------*/
    #pourquoi4{
        top:545px;
    }
    /*------ Pourquoi Cloche ------*/
    #pourquoi_cloche{
        top:220px;
        left:105px;
    }
    @keyframes movePourquoi_cloche {
        0% {
            top: 220px;
            left:105px;
            transform: rotateZ(-4deg);
        }
        50% {
            top: 190px;
            left:95px;
            transform: rotateZ(-15deg);
        }
        100%{
            top: 220px;
            left:105px;
            transform: rotateZ(-4deg);
        }
    }
    /*------ Pourquoi cochon ------*/
    #pourquoi_cochon{
        top:473px;
        left:352px;
    }
    @keyframes movePourquoi_cochon {
        0% {
            top: 473px;
            transform: rotateZ(0deg);
        }
        50% {
            top: 523px;
            transform: rotateZ(360deg);
        }
        100%{
            top: 473px;
            transform: rotateZ(0deg);
        }
    }
    /*---------------------------------- 12/26 ----------------------------------*/

    /*----- 12/26 1 -----*/
    #t12_26_1{
        top:245px;
        width: 132px;
    }
    /*------ 12/26 2 ------*/
    #t12_26_2{
        top:480px;
        width:95px;
    }
    /*------ 12/26 3 ------*/
    #t12_26_3{
        top:642px;
        width:140px;
    }
    /*------ 12/26 soleil ------*/
    #soleil12_26{
        top:75px;
        left:550px;
    }
    /*------ 12/26 cochon ------*/
    #cochon12_26{
        top:590px;
        left:466px;
    }
    @keyframes moveCochon12_26 {
        0% {
            top: 590px;
            transform: rotateZ(0deg);
        }
        50% {
            top: 627px;
            transform: rotateZ(360deg);
        }
        100%{
            top: 590px;
            transform: rotateZ(0deg);
        }
    }
    /*---------------------------------- 27/29 ----------------------------------*/

    /*----- 27/29 1 -----*/
    #t27_29_1{
        top:33px;
        width:100px;
    }
    /*------ 27/29 2 ------*/
    #t27_29_2{
        top:345px;
        width:130px;
    }
    /*------ 27/29 3 ------*/
    #t27_29_3{
        top:662px;
        width:185px;
    }
    /*------ 27/29 soleil ------*/
    #soleil27_29{
        top:212px;
        left:221px;
    }
    /*------ 27/29 cochon ------*/
    #cochon27_29{
        top:580px;
        left:440px;
    }
    @keyframes moveCochon27_29 {
        0% {
            top: 580px;
            transform: rotateZ(0deg);
        }
        50% {
            top: 630px;
            transform: rotateZ(360deg);
        }
        100%{
            top: 580px;
            transform: rotateZ(0deg);
        }
    }
    /*---------------------------------- 60 ----------------------------------*/

    /*----- 60 1 -----*/
    #t60_1{
        top:243px;
        width:135px;
    }
    /*------ 60 2 ------*/
    #t60_2{
        top:425px;
        width:135px;
    }
    /*------ 60 3 ------*/
    #t60_3{
        top:625px;
        width:145px;
    }
    /*------ 60 soleil ------*/
    #soleil60{
        top:30px;
        left:545px;
    }
    /*----- 60 ampoule -----*/
    #ampoule60{
        top: 547px;
        left: 261px;
    }
    /*---------------------------------- comment ----------------------------------*/
    /*----- comment 1 -----*/
    #comment1{
        top:115px;
    }
    /*------ comment 2 ------*/
    #comment2{
        top:260px;
        width:90px;
    }
    /*------ comment 3 ------*/
    #comment3{
        top:260px;
        width:95px;
    }
    /*------ comment 4 ------*/
    #comment4{
        top:475px;
        width:95px;
    }
    /*------ comment 5 ------*/
    #comment5{
        top:580px;
    }
    /*----- comment main -----*/
    #comment_main{
        top:55px;
    }
    @keyframes movecomment_main {
        0% {
            left: 59%;
            top:55px;
        }
        50% {
            left: 62%;
            top:75px;
        }
        100% {
            left: 59%;
            top:55px;
        }
    }
    /*----- comment start -----*/
    #comment_start{
        top:352px;
    }
    @keyframes movecomment_start {
        0% {
            left: 75%;
            top:352px;
        }
        50% {
            left: 57%;
            top:344px;
        }
        100% {
            left: 75%;
            top:352px;
        }
    }
    /*----- comment stop -----*/
    #comment_stop{
        top:572px;
    }
    @keyframes movecomment_stop {
        0% {
            left: 24%;
            top:572px;
        }
        50% {
            left: 42%;
            top:552px;
        }
        100% {
            left: 24%;
            top:572px;
        }
    }
}
/*----------------------------------- Responsive Grand Mobile -----------------------------------*/
@media screen and (max-width: 700px) and (min-width: 501px) {
    #corps {
        max-width: 500px;
        margin: 0 auto;
        margin-top: -165px;
        overflow: hidden;
    }
    /*-------------------------- Header --------------------------*/
    #header-red {
        height: 100px;
    }
    #header-img {
        width: 1030px;
    }
    /*-------------------------- Menu --------------------------*/
    .menu{
        gap:20px;
    }
    .menu > article > article{
        width:120px;
        height:120px;
    }
    .menu > article > article > h2 {
        font-size: 15px;
        margin: 10px 0 0 0;
        letter-spacing: 2px;
    }
    /*-------------------------- Sous-Menu --------------------------*/
    .sous_menu > article {
        width: 20%;
    }
    .sous_menu > article > article {
        width: 100px;
    }
    .sous_menu > article > article > h3 {
        letter-spacing: 2px;
        font-size: 13px;
    }
    /*-------------------------- Texte --------------------------*/
    .texte{
        width:130px;
    }
    .texte h2 {
        font-size: 15px;
    }
    .texte p {
        font-size: 10px;
    }
    /*-------------------------- Pourquoi --------------------------*/
    /*----- Pourquoi 1 -----*/
    #pourquoi1{
        top: 73px;
        width: 110px;
    }
    /*------ Pourquoi 2 ------*/
    #pourquoi2{
        top:240px;
        width:106px;
    }
    /*------ Pourquoi 3 ------*/
    #pourquoi3{
        width: 115px;
        top: 248px;
    }
    /*------ Pourquoi 4 ------*/
    #pourquoi4{
        width: 115px;
        top: 388px;
    }
    /*------ Pourquoi Cloche ------*/
    #pourquoi_cloche{
        top:158px;
        left:75px;
    }
    @keyframes movePourquoi_cloche {
        0% {
            top: 158px;
            left:75px;
            transform: rotateZ(-4deg);
        }
        50% {
            top: 140px;
            left:55px;
            transform: rotateZ(-15deg);
        }
        100%{
            top: 158px;
            left:75px;
            transform: rotateZ(-4deg);
        }
    }
    /*------ Pourquoi cochon ------*/
    #pourquoi_cochon{
        top:335px;
        left:252px;
    }
    @keyframes movePourquoi_cochon {
        0% {
            top: 335px;
            transform: rotateZ(0deg);
        }
        50% {
            top: 374px;
            transform: rotateZ(360deg);
        }
        100%{
            top: 335px;
            transform: rotateZ(0deg);
        }
    }
    /*---------------------------------- 12/26 ----------------------------------*/

    /*----- 12/26 1 -----*/
    #t12_26_1{
        top:147px;
        width: 90px;
    }
    /*------ 12/26 2 ------*/
    #t12_26_2{
        top: 335px;
        width: 75px;
    }
    /*------ 12/26 3 ------*/
    #t12_26_3{
        top: 453px;
        width: 100px;
    }
    /*------ 12/26 soleil ------*/
    #soleil12_26{
        top: 45px;
        left: 395px;
    }
    /*------ 12/26 cochon ------*/
    #cochon12_26{
        top:422px;
        left:333px;
    }
    @keyframes moveCochon12_26 {
        0% {
            top: 422px;
            transform: rotateZ(0deg);
        }
        50% {
            top: 447px;
            transform: rotateZ(360deg);
        }
        100%{
            top: 422px;
            transform: rotateZ(0deg);
        }
    }
    /*---------------------------------- 27/29 ----------------------------------*/

    /*----- 27/29 1 -----*/
    #t27_29_1{
        top:20px;
        width:90px;
    }
    /*------ 27/29 2 ------*/
    #t27_29_2{
        top: 250px;
        width: 108px;
    }
    /*------ 27/29 3 ------*/
    #t27_29_3{
        top: 471px;
        width: 125px;
    }
    /*------ 27/29 soleil ------*/
    #soleil27_29{
        top:168px;
        left:155px;
    }
    /*------ 27/29 cochon ------*/
    #cochon27_29{
        top:405px;
        left:315px;
    }
    @keyframes moveCochon27_29 {
        0% {
            top: 405px;
            transform: rotateZ(0deg);
        }
        50% {
            top: 448px;
            transform: rotateZ(360deg);
        }
        100%{
            top: 405px;
            transform: rotateZ(0deg);
        }
    }
    /*---------------------------------- 60 ----------------------------------*/

    /*----- 60 1 -----*/
    #t60_1{
        top: 160px;
        width: 111px;
    }
    /*------ 60 2 ------*/
    #t60_2{
        top:243px;
        width:135px;
    }
    /*------ 60 3 ------*/
    #t60_3{
        top: 310px;
        width: 107px;
    }
    /*------ 60 soleil ------*/
    #soleil60{
        top:25px;
        left:392px;
    }
    /*----- 60 ampoule -----*/
    #ampoule60{
        top: 390px;
        left: 186px;
    }
    /*---------------------------------- comment ----------------------------------*/
    /*----- comment 1 -----*/
    #comment1{
        top:82px;
    }
    /*------ comment 2 ------*/
    #comment2{
        top: 175px;
        width: 75px;
    }
    /*------ comment 3 ------*/
    #comment3{
        top:185px;
        width:72px;
    }
    /*------ comment 4 ------*/
    #comment4{
        top:335px;
        width:68px;
    }
    /*------ comment 5 ------*/
    #comment5{
        top:410px;
    }
    /*----- comment main -----*/
    #comment_main{
        top:35px;
    }
    @keyframes movecomment_main {
        0% {
            left: 59%;
            top:35px;
        }
        50% {
            left: 62%;
            top:55px;
        }
        100% {
            left: 59%;
            top:35px;
        }
    }
    /*----- comment start -----*/
    #comment_start{
        top:251px;
    }
    @keyframes movecomment_start {
        0% {
            left: 75%;
            top:251px;
        }
        50% {
            left: 57%;
            top:246px;
        }
        100% {
            left: 75%;
            top:251px;
        }
    }
    /*----- comment stop -----*/
    #comment_stop{
        top:408px;
    }
    @keyframes movecomment_stop {
        0% {
            left: 24%;
            top:408px;
        }
        50% {
            left: 42%;
            top:393px;
        }
        100% {
            left: 24%;
            top:408px;
        }
    }
}
/*----------------------------------- Responsive moyen Mobile -----------------------------------*/
@media screen and (max-width: 500px) and (min-width: 401px) {
    #corps {
        max-width: 400px;
        margin: 0 auto;
        margin-top:-140px;
        overflow: hidden;
    }
    /*-------------------------- Header --------------------------*/
    #header-red {
        height: 87px;
    }
    #header-img {
        width: 885px;
    }
    /*-------------------------- Menu --------------------------*/
    .menu{
        gap:16px;
    }
    .menu > article > article{
        width:110px;
        height:110px;
    }
    .menu > article > article > h2 {
        font-size: 15px;
        margin: 10px 0 0 0;
        letter-spacing: 2px;
    }
    /*-------------------------- Sous-Menu --------------------------*/
    .sous_menu > article {
        width: 20%;
    }
    .sous_menu > article > article {
        width: 100px;
    }
    .sous_menu > article > article > h3 {
        letter-spacing: 1px;
        font-size: 11px;
    }
    /*-------------------------- Texte --------------------------*/
    .texte{
        width:81px;
    }
    .texte h2 {
        font-size: 12px;
    }
    .texte p {
        font-size: 8px;
    }
    /*-------------------------- Pourquoi --------------------------*/
    /*----- Pourquoi 1 -----*/
    #pourquoi1{
        top: 53px;
        width: 73px;
    }
    /*------ Pourquoi 2 ------*/
    #pourquoi2{
        top:190px;
        width:81px;
    }
    /*------ Pourquoi 3 ------*/
    #pourquoi3{
        width: 76px;
        top: 204px;
    }
    /*------ Pourquoi 4 ------*/
    #pourquoi4{
        width: 73px;
        top: 312px;
    }
    /*------ Pourquoi Cloche ------*/
    #pourquoi_cloche{
        top:128px;
        left:61px;
    }
    @keyframes movePourquoi_cloche {
        0% {
            top: 128px;
            left:61px;
            transform: rotateZ(-4deg);
        }
        50% {
            top: 110px;
            left:45px;
            transform: rotateZ(-15deg);
        }
        100%{
            top: 128px;
            left:61px;
            transform: rotateZ(-4deg);
        }
    }
    /*------ Pourquoi cochon ------*/
    #pourquoi_cochon{
        top:275px;
        left:202px;
    }
    @keyframes movePourquoi_cochon {
        0% {
            top: 275px;
            transform: rotateZ(0deg);
        }
        50% {
            top: 300px;
            transform: rotateZ(360deg);
        }
        100%{
            top: 275px;
            transform: rotateZ(0deg);
        }
    }
    /*---------------------------------- 12/26 ----------------------------------*/

    /*----- 12/26 1 -----*/
    #t12_26_1{
        top:140px;
        width: 70px;
    }
    /*------ 12/26 2 ------*/
    #t12_26_2{
        top: 265px;
        width: 64px;
    }
    /*------ 12/26 3 ------*/
    #t12_26_3{
        top: 360px;
        width: 79px;
    }
    /*------ 12/26 soleil ------*/
    #soleil12_26{
        top: 23px;
        left: 310px;
    }
    /*------ 12/26 cochon ------*/
    #cochon12_26{
        top:334px;
        left:267px;
    }
    @keyframes moveCochon12_26 {
        0% {
            top: 334px;
            transform: rotateZ(0deg);
        }
        50% {
            top: 358px;
            transform: rotateZ(360deg);
        }
        100%{
            top: 334px;
            transform: rotateZ(0deg);
        }
    }
    /*---------------------------------- 27/29 ----------------------------------*/
    #content_27_29{
        padding-top:20px;
    }
    /*----- 27/29 1 -----*/
    #t27_29_1{
        top:5px;
        width:90px;
    }
    @keyframes moveHorizontal27_29_1 {
        from {
            left: 100%;
            opacity:0;
        }
        to {
            left: 77%;
            opacity:1;
        }
    }
    @keyframes moveHorizontal27_29_1Return {
        from {
            left: 77%;
            opacity:1;
        }
        to {
            left: 100%;
            opacity:0;
        }
    }
    /*------ 27/29 2 ------*/
    #t27_29_2{
        top: 215px;
        width: 86px;
    }
    /*------ 27/29 3 ------*/
    #t27_29_3{
        top: 390px;
        width: 100px;
    }
    /*------ 27/29 soleil ------*/
    #soleil27_29{
        top:150px;
        left:127px;
    }
    /*------ 27/29 cochon ------*/
    #cochon27_29{
        top:340px;
        left:253px;
    }
    @keyframes moveCochon27_29 {
        0% {
            top: 340px;
            transform: rotateZ(0deg);
        }
        50% {
            top: 378px;
            transform: rotateZ(360deg);
        }
        100%{
            top: 340px;
            transform: rotateZ(0deg);
        }
    }
    /*---------------------------------- 60 ----------------------------------*/

    /*----- 60 1 -----*/
    #t60_1{
        top:124px;
        width:90px;
    }
    /*------ 60 2 ------*/
    #t60_2{
        top: 240px;
        width: 86px;
    }
    /*------ 60 3 ------*/
    #t60_3{
        top: 352px;
        width: 92px;
    }
    /*------ 60 soleil ------*/
    #soleil60{
        top:14px;
        left:309px;
    }
    /*----- 60 ampoule -----*/
    #ampoule60{
        top: 313px;
        left: 149px;
    }
    /*---------------------------------- comment ----------------------------------*/
    /*----- comment 1 -----*/
    #comment1{
        top:63px;
    }
    /*------ comment 2 ------*/
    #comment2{
        top: 139px;
        width: 59px;
    }
    /*------ comment 3 ------*/
    #comment3{
        top:260px;
        width:93px;
    }
    @keyframes moveHorizontalcomment3 {
        from {
            left: 98%;
            opacity:0;
        }
        to {
            left: 75%;
            opacity:1;
        }
    }
    @keyframes moveHorizontalcomment3Return {
        from {
            left: 75%;
            opacity:1;
        }
        to {
            left: 98%;
            opacity:0;
        }
    }
    /*------ comment 4 ------*/
    #comment4{
        top:264px;
        width:55px;
    }
    /*------ comment 5 ------*/
    #comment5{
        top:350px;
        width:72px;
    }
    @keyframes moveHorizontalcomment5 {
        from {
            left: 95%;
            opacity:0;
        }
        to {
            left: 81%;
            opacity:1;
        }
    }
    @keyframes moveHorizontalcomment5Return {
        from {
            left: 81%;
            opacity:1;
        }
        to {
            left: 95%;
            opacity:0;
        }
    }
    /*----- comment main -----*/
    #comment_main{
        top:30px;
    }
    @keyframes movecomment_main {
        0% {
            left: 59%;
            top:30px;
        }
        50% {
            left: 62%;
            top:40px;
        }
        100% {
            left: 59%;
            top:30px;
        }
    }
    /*----- comment start -----*/
    #comment_start{
        top:201px;
    }
    @keyframes movecomment_start {
        0% {
            left: 75%;
            top:201px;
        }
        50% {
            left: 57%;
            top:197px;
        }
        100% {
            left: 75%;
            top:201px;
        }
    }
    /*----- comment stop -----*/
    #comment_stop{
        top:326px;
    }
    @keyframes movecomment_stop {
        0% {
            left: 24%;
            top:326px;
        }
        50% {
            left: 42%;
            top:315px;
        }
        100% {
            left: 24%;
            top:326px;
        }
    }
}
/*----------------------------------- Responsive petit Mobile -----------------------------------*/
@media screen and (max-width: 400px){
    #corps {
        max-width: 300px;
        margin: 0 auto;
        margin-top:-100px;
        overflow: hidden;
    }
    /*-------------------------- Header --------------------------*/
    #header-red {
        height: 64px;
    }
    #header-img {
        width: 650px;
    }
    /*-------------------------- Menu --------------------------*/
    .menu{
        gap:10px;
    }
    .menu > article > article{
        width:85px;
        height:85px;
    }
    .menu > article > article > h2 {
        font-size: 13px;
        margin: 10px 0 0 0;
        letter-spacing: 0px;
    }
    /*-------------------------- Sous-Menu --------------------------*/
    .sous_menu > article {
        width: 20%;
    }
    .sous_menu > article > article {
        width: 76px;
        height: 40px;
    }
    .sous_menu > article > article > h3 {
        letter-spacing: 0px;
        font-size: 10px;
        padding: 0px 7px;
    }
    /*-------------------------- Texte --------------------------*/
    .texte{
        width:61px;
    }
    .texte h2 {
        font-size: 8px;
    }
    .texte p {
        font-size: 6px;
    }
    /*-------------------------- Pourquoi --------------------------*/
    /*----- Pourquoi 1 -----*/
    #pourquoi1{
        top: 41px;
        width: 55px;
    }
    /*------ Pourquoi 2 ------*/
    #pourquoi2{
        top:142px;
        width:61px;
    }
    /*------ Pourquoi 3 ------*/
    #pourquoi3{
        width: 57px;
        top: 153px;
    }
    /*------ Pourquoi 4 ------*/
    #pourquoi4{
        width: 56px;
        top: 240px;
    }
    /*------ Pourquoi Cloche ------*/
    #pourquoi_cloche{
        top:95px;
        left:46px;
    }
    @keyframes movePourquoi_cloche {
        0% {
            top: 95px;
            left:46px;
            transform: rotateZ(-4deg);
        }
        50% {
            top: 83px;
            left:33px;
            transform: rotateZ(-15deg);
        }
        100%{
            top: 95px;
            left:46px;
            transform: rotateZ(-4deg);
        }
    }
    /*------ Pourquoi cochon ------*/
    #pourquoi_cochon{
        top:203px;
        left:151px;
    }
    @keyframes movePourquoi_cochon {
        0% {
            top: 203px;
            transform: rotateZ(0deg);
        }
        50% {
            top: 222px;
            transform: rotateZ(360deg);
        }
        100%{
            top: 203px;
            transform: rotateZ(0deg);
        }
    }
    /*---------------------------------- 12/26 ----------------------------------*/

    /*----- 12/26 1 -----*/
    #t12_26_1{
        top:105px;
        width: 54px;
    }
    /*------ 12/26 2 ------*/
    #t12_26_2{
        top: 193px;
        width: 63px;
    }
    /*------ 12/26 3 ------*/
    #t12_26_3{
        top: 281px;
        width: 61px;
    }
    /*------ 12/26 soleil ------*/
    #soleil12_26{
        top: 20px;
        left: 235px;
    }
    /*------ 12/26 cochon ------*/
    #cochon12_26{
        top:334px;
        left:200px;
    }
    @keyframes moveCochon12_26 {
        0% {
            top: 250px;
            transform: rotateZ(0deg);
        }
        50% {
            top: 267px;
            transform: rotateZ(360deg);
        }
        100%{
            top: 250px;
            transform: rotateZ(0deg);
        }
    }
    /*---------------------------------- 27/29 ----------------------------------*/
    #content_27_29{
        padding-top:20px;
    }
    /*----- 27/29 1 -----*/
    #t27_29_1{
        top:5px;
        width:66px;
    }
    @keyframes moveHorizontal27_29_1 {
        from {
            left: 100%;
            opacity:0;
        }
        to {
            left: 77%;
            opacity:1;
        }
    }
    @keyframes moveHorizontal27_29_1Return {
        from {
            left: 77%;
            opacity:1;
        }
        to {
            left: 100%;
            opacity:0;
        }
    }
    /*------ 27/29 2 ------*/
    #t27_29_2{
        top: 175px;
        width: 61px;
    }
    /*------ 27/29 3 ------*/
    #t27_29_3{
        top: 295px;
        width: 73px;
    }
    /*------ 27/29 soleil ------*/
    #soleil27_29{
        top:117px;
        left:95px;
    }
    /*------ 27/29 cochon ------*/
    #cochon27_29{
        top:340px;
        left:188px;
    }
    @keyframes moveCochon27_29 {
        0% {
            top: 260px;
            transform: rotateZ(0deg);
        }
        50% {
            top: 287px;
            transform: rotateZ(360deg);
        }
        100%{
            top: 260px;
            transform: rotateZ(0deg);
        }
    }
    /*---------------------------------- 60 ----------------------------------*/

    /*----- 60 1 -----*/
    #t60_1{
        top:88px;
        width:70px;
    }
    /*------ 60 2 ------*/
    #t60_2{
        top: 202px;
        width: 67px;
    }
    /*------ 60 3 ------*/
    #t60_3{
        top: 264px;
        width: 70px;
    }
    /*------ 60 soleil ------*/
    #soleil60{
        top:14px;
        left:230px;
    }
    /*----- 60 ampoule -----*/
    #ampoule60{
        top: 234px;
        left: 112px;
    }
    /*---------------------------------- comment ----------------------------------*/
    /*----- comment 1 -----*/
    #comment1{
        top:47px;
    }
    /*------ comment 2 ------*/
    #comment2{
        top: 109px;
        width: 43px;
    }
    /*------ comment 3 ------*/
    #comment3{
        top:195px;
        width:70px;
    }
    @keyframes moveHorizontalcomment3 {
        from {
            left: 98%;
            opacity:0;
        }
        to {
            left: 75%;
            opacity:1;
        }
    }
    @keyframes moveHorizontalcomment3Return {
        from {
            left: 75%;
            opacity:1;
        }
        to {
            left: 98%;
            opacity:0;
        }
    }
    /*------ comment 4 ------*/
    #comment4{
        top:200px;
        width:37px;
    }
    /*------ comment 5 ------*/
    #comment5{
        top:250px;
        width:55px;
    }
    @keyframes moveHorizontalcomment5 {
        from {
            left: 95%;
            opacity:0;
        }
        to {
            left: 82%;
            opacity:1;
        }
    }
    @keyframes moveHorizontalcomment5Return {
        from {
            left: 81%;
            opacity:1;
        }
        to {
            left: 95%;
            opacity:0;
        }
    }
    /*----- comment main -----*/
    #comment_main{
        top:22px;
    }
    @keyframes movecomment_main {
        0% {
            left: 59%;
            top:22px;
        }
        50% {
            left: 62%;
            top:35px;
        }
        100% {
            left: 59%;
            top:22px;
        }
    }
    /*----- comment start -----*/
    #comment_start{
        top:151px;
    }
    @keyframes movecomment_start {
        0% {
            left: 75%;
            top:151px;
        }
        50% {
            left: 57%;
            top:148px;
        }
        100% {
            left: 75%;
            top:151px;
        }
    }
    /*----- comment stop -----*/
    #comment_stop{
        top:244px;
    }
    @keyframes movecomment_stop {
        0% {
            left: 24%;
            top:244px;
        }
        50% {
            left: 42%;
            top:236px;
        }
        100% {
            left: 24%;
            top:244px;
        }
    }
}