@font-face {
    font-family: "Paris2024";
    src: url('/assets/fonts/Paris2024/Paris2024VariableRegular.ttf') format("woff2"),url('/assets/fonts/Paris2024/Paris2024VariableRegular.woff') format("woff"),url('webfont.ttf') format('truetype');font-display: swap;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    /* cursor: url(/assets/img/Icones/Curseur\ blanc.svg), auto; */
}

body {
    width: 100%;
    height: 100%;
    font-family: "Paris2024";
    font-weight: 400;
    font-size: 22px;
    line-height: 2.5rem;
    background-color: #080808;
    color: #BFA65A;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
} 

h2,h3 {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: semi-bold;
    color: #eeeeee;
    margin : 4rem 0 3rem 0;
    letter-spacing: 1px;
}

h3 {
    font-size: 30px;
}
h4 {
    color: #ececec;
}

p {
    padding: 1rem auto;
}


/* ============================================================================
===============   BACKGROUND   ====================================================
==============================================================================  */

body.BGColorBK {
    background-color: #080808;
}
body.BGColorOR {
    background-color: #BFA65A;
    color: #080808;
}

.formations,.experiences,.competences,.atouts,.loisirs,.contact {
    opacity: 0;
    margin: 6rem 0px;
    transition: all 0.4s ease-in-out;
}

.formations.active,.experiences.active,.competences.active,.atouts.active,.loisirs.active,.contact.active {
    opacity: 1;
    transition: all 0.4s ease-in-out;
}
.experiences.active {
    color: #080808;
}
/* .choix.inactive {
    opacity: 0;
    transition: all 0.4s ease-in-out;
} */

/* ============================================================================
===============   CHARGEMENT   ====================================================
==============================================================================  */

/*
@keyframes pencil-animation {
    0% {
        transform: rotate(135deg);
    }
    20% {
        transform: rotate(315deg);
    }
    45% {
        transform: translateX(300px) rotate(315deg);
    }
    55% {
        transform: translateX(300px) rotate(495deg);
    }
    100% {
        transform: rotate(495deg);
    }
}

.pencil {
    position: relative;
    width: 150px;
    height: 20px;
    transform-origin: center;
    transform: rotate(135deg);
    animation: pencil-animation 8s infinite;
}

.pencil__ball-point {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: #BFA65A;
    height: 5px;
    width: 5px;
    border-radius: 50px;
}

.pencil__cap {
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    clip-path: polygon(20% 40%, 100% 0%, 100% 100%, 20% 60%);
    background: #232123;
    width: 12%;
    height: 100%;
}

.pencil__cap-base {
    position: absolute;
    left: 12%;
    top: 0;
    height: 100%;
    width: 20px;
    background: #232123;
}

.pencil__middle {
    position: absolute;
    left: calc(12% + 20px);
    top: 0;
    height: 100%;
    width: 70%;
    background: #BFA65A;
}

.pencil__eraser {
    position: absolute;
    left: calc(12% + 70% + 20px);
    top: 0;
    height: 100%;
    width: 11%;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    background: #232123;
}


@keyframes line-animation {
    20% {
        transform: scaleX(0);
    }
    45% {
        transform: scaleX(0.6);
    }
    55% {
        transform: scaleX(0.6);
    }
    100% {
        transform: scaleX(0);
    }
}

.line {
    position: relative;
    top: 40px;
    right: 52px;
    height: 5px;
    width: 1000px;
    z-index: -1;
    border-radius: 50px;
    background: #BFA65A;
    transform: scaleX(0);
    transform-origin: center;
    animation: line-animation 8s infinite;
}
.line+p {
    margin-top: 4rem;
}
*/

/* ============================================================================
===============   BOUTONS   ====================================================
==============================================================================  */

button {
    font-size: 20px;
    letter-spacing: 1px;
    color: #eeeeee;
    border: 3px solid #080808;
    border-radius: 3rem;
    padding-inline: 20px;
    background-color: #9D1437;
    box-shadow: 5px 5px 0px #1e1e1e;
    margin: 1rem 0.3rem 1rem -0.2rem;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}
button:hover,button:focus {    
    margin: 20px -2px 0 0px;
    box-shadow: 0px 0px 0px black;
    transition: all 0.2s ease-in-out;
}

button.cvWeb,button.cvPrint {
    margin: 0.2rem 0.3rem 0.3rem -0.2rem;
}
button.cvWeb:hover,button.cvWeb:focus,button.cvPrint:hover,button.cvPrint:focus {
    margin: 0.5rem 0.3rem 0rem 0.5rem;
}

a,a:link { color: #eeeeee;text-decoration:none; }    
.footer a,.footer a:link { color: #080808;text-decoration:underline; }    
a:visited,a:active { color: #ececec;text-decoration:none; } 
.footer a:visited,.footer a:active { color: #080808;text-decoration:underline; } 
a:hover {text-decoration:none; }

/* bouton retour en haut  */

#flecheRouge.active {
    position: sticky;
    top: 80%;
    left: 92%;
    transform: rotate(540deg); 
    transition: all 2s ease;
    /* border: 0px solid; */
    width: 60px;
    margin: 20px;
    z-index: 2;
}

/* Color Theme Swatches in Hex */
.Anaïs-#8-1-hex { color: #D4A9A0; }
.Anaïs-#8-2-hex { color: #9d1437; }
.Anaïs-#8-3-hex { color: #D8C478; }
.Anaïs-#8-4-hex { color: #BFA65A; }
.Anaïs-#8-5-hex { color: #080808; }


/* ---------------ANIMATIONS---------------------------------------------------*/

@-webkit-keyframes defilement {
    0%  {margin-top: 0}
    50%  {margin-top: 20px}
    50%  {margin-bottom: -20px}
    100% {margin-top: 0}
}
@keyframes defilement {
    0%  {margin-top: 0}
    50%  {margin-top: 20px}
    50%  {margin-bottom: -20px}
    100% {margin-top: 0}
}
@-webkit-keyframes anim {
    0%  {margin-top: 100%;}
    100%  {opacity: 1;}
    100% {margin-top: 0%;}
    0%  {margin-bottom: -100%;}
    100% {margin-bottom: 0%;}
}
@keyframes anim {
    0%  {margin-top: 100%;}
    100%  {opacity: 1;}
    100% {margin-top: 0%;}
    0%  {margin-bottom: -100%;}
    100% {margin-bottom: 0%;}
}
@-webkit-keyframes apparition {
    0%  {opacity: 0}
    50% {opacity: 25%}
    100% {opacity: 100%}
}
@keyframes apparition {
    0%  {opacity: 0}
    50% {opacity: 25%}
    100% {opacity: 100%}
}
@-webkit-keyframes disparition {
    0%  {opacity: 1}
    100% {opacity: 0}
}
@keyframes disparition {
    0%  {opacity: 1}
    100% {opacity: 0}
}
@-webkit-keyframes apparitionGauche {
    50% {opacity: 25%}
    100% {opacity: 100%}
    0%  {margin-right: 50vw;}
    80% {margin-right: -1vw;}
    100% {margin-right: 0vw;}
}
@keyframes apparitionGauche {
    50% {opacity: 25%}
    100% {opacity: 100%}
    0%  {margin-right: 50vw;}
    80% {margin-right: -1vw;}
    100% {margin-right: 0vw;}
}
@-webkit-keyframes apparitionDroite {
    50% {opacity: 25%}
    100% {opacity: 100%}
    0%  {margin-left: 50vw;}
    80% {margin-left: -1vw;}
    100% {margin-left: 0vw;}
}
@keyframes apparitionDroite {
    50% {opacity: 25%}
    100% {opacity: 100%}
    0%  {margin-left: 50vw;}
    80% {margin-left: -1vw;}
    100% {margin-left: 0vw;}
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------------
    SECTION BIENVENUE 
-----------------------------------------------------------------------------------------------------------------------------------------------------*/


#avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#avatar img {
    width: 180px;
    opacity: 0;
    -webkit-animation: apparition 1s ease-out forwards 0.5s;
    animation: apparition 1s ease-out forwards 0.5s;
}

h1,.txt2 {
    font-size: 60px;
    margin-bottom: 0;
}
.name,.iam {
    display: flex;
    flex-wrap: nowrap;
    padding: 0 1.5rem;
    align-items: center;
    flex-wrap: nowrap;
    line-height: 1.2;
    margin: 10vh 0 13vh 0;
    
}
.name {
    justify-content: right;
}
.iam {
    justify-content: left;
    flex-direction: row-reverse;
}
.txt1,.txt3 {
    font-size: 26px;
    padding: 0 1.5rem;
    margin-top: 1rem;
    color: #eeeeee;
}
.txt1,.txt2,.txt3,.txt4,.envie {
    opacity: 0;
    transition: all 0.4s ease-out;
    white-space: nowrap;
}
.txt1 {
    -webkit-animation: apparitionGauche 1s forwards 2.6s;
    animation: apparitionGauche 1s forwards 2.6s;
}
.txt2 {
    -webkit-animation: apparitionGauche 1s ease-out forwards 1s;
    animation: apparitionGauche 1s ease-out forwards 1s;
}
.txt3 {
    -webkit-animation: apparitionDroite 1s ease-out forwards 2.6s;
    animation: apparitionDroite 1s ease-out forwards 2.6s;
}
.txt4 {
    -webkit-animation: apparitionDroite 1s ease-out forwards 1.8s;
    animation: apparitionDroite 1s ease-out forwards 1.8s;
} 

.envie {
    font-size: 26px;
    -webkit-animation: apparition 1s ease-out forwards 3.5s;
    animation: apparition 1s ease-out forwards 3.5s;
} 

/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
    3 cards choix début
--------------------------------------------------------------------------------------------------*/

.choix {
    display: flex;
    justify-content: center;
    transition: all 0.4s ease-in-out;
    
}
.souhait,.souhait p {
    display: flex;
    justify-content: center;
    transition: all 0.4s ease-in-out;
}

.choix .card {
    width: 230px;
    height: 200px;
    opacity: 0;
    font-size: 24px;
    align-items: center;
    background-color: #BFA65A;
    border: 5px solid #BFA65A;
    margin: 24px;
    border-radius: 24px 0px;
    -webkit-animation: apparition 1s linear forwards 4s;
    animation: apparition 1s linear forwards 4s;
}
.choix .card:nth-child(2) {
    height: 240px;
}
.choix .card:hover {
    border: 5px solid #D8C478;
}
.choix .card span {
    opacity: 0;
    font-size: 0.8em;
}

.choix .card:hover span {
    opacity: 1;
}
.choix .card p {
    text-align: center;
    color: #080808;
    margin: 16px;
    line-height: 30px;
}

.card.portfolio {
    transition: apparition 1s ease-in-out 0s;
}
.card.CV {
    transition: apparition 1s ease-in-out 0.4s;
}
.card.continuer {
    transition: apparition 1s ease-in-out 0.8s;
}

/*------------------texte qui défile horizontalement---------------------------------------*/

h2.bandeauTitle {
    display: none;
}
.profil .bandeauTitle {
    display: block;
}

@-webkit-keyframes scroll {
    0%  {transform: translateX(0%);}
    100% {transform: translatex(-100%)}
}
@keyframes scroll {
    0%  {transform: translateX(0%);}
    100% {transform: translatex(-100%)}
}
.containerBandeau {
    opacity: 0;
}

/* ----------------------------------------------------------------------------
catégorie & nombre
------------------------------------------------------------------------------ */
.numberCategory {
    position: sticky;
    top: 30%;
    display: flex;
    justify-content: center;
    margin-top: -5rem;
}
.profil .numberCategory {
    margin-top: -60rem;
}
.formations .numberCategory {
    margin-top: 0rem;
}
.numberCategory img {
    width: 180px;
}
    

/* ----------------------------------------------------------------------------
containers
-------------------------------------------------------------------------------- */
section {
    display: flex;
    align-items: center;
    align-content: center;
}
.scroll-page {
    display: flex;
    height: 100%;
}

.PE {
    margin-right: -8rem;
}

/*-----------------------------------------------------------------------------------------------------------------------------------------------------
    SECTION PROFIL 
-----------------------------------------------------------------------------------------------------------------------------------------------------*/

.cta {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 60px;
}
.cta button {
    border: 2px solid #d9d9d9;
    margin: 2rem 0;
    
}
.cta button:hover {
    align-items: center;
    display: flex;
    margin:0;
    flex-direction: column;
    margin: 36px 0 0 6px;
    transition: all 0.2s ease-in-out;
}
.profil p img {
    width: 16px;
    transform: rotateZ(270deg);
    margin-left: 24px;
    margin-right: 20px;
}
.fleche p {
    margin-top: 6rem;
}

.fleche {
    /* z-index: 1; */
    margin: 2rem 0 8rem 0;
    opacity: 0;
    text-align: center;
    -webkit-animation: apparition 1s linear forwards;
    animation: apparition 1s linear forwards;
}
.fleche img {
    height: 35px;
    -webkit-animation: defilement 1s ease-in infinite;
    animation: defilement 1s ease-in-out infinite;
}
/* SECTION FORMATIONS */ 

.formationsCards,.experiencesCards {
    display: flex;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}
.formations .box {
    border: none;
    perspective: 500px;
    width: 20.5vw;
    height: 275px;
    position: relative;
    background-color: transparent;
    margin: 0.5rem;
    transition: all 1s;
}
.formations .box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}
.formations .box:hover .box-inner {
    transform: rotateY(-180deg);
    transition: all 0.8s ease-in-out
}
.formations .box-front,.formations .box-back {
    position: absolute;
    color: #BFA65A;
    width: 100%;
    height: 100%;
    box-shadow: 0px 0px 12px #080808b9;
    backface-visibility: hidden;
}
.formations .box-front {
    display: flex;
    border-radius: 24px 0px;
    padding: 12px;
    background-color: rgb(20, 20, 20);
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
}
.formations .box-front .date {
    font-size: 36px;
    margin-bottom: 3rem;
    color: #BFA65A;
    line-height: 2rem;
}
.formations .box-back {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    border-radius: 0px 24px;
    background-color: rgb(20, 20, 20);
    transform: rotateY(-180deg);
}
.formations .box-front .belin {
    width: 100px;
}
#maison {
    margin-top: 1.8rem;
    color: #eeeeee;
} 
.formations .box-back .title {
    color: #eeeeee;
    font-size: 22px;
    margin: 24px auto;
    line-height: 1.5rem;
}
.formations .box-back .text_container {
    font-size: 20px;
    padding: 0px 16px;
    line-height: 1.5em;
}

/* SECTION EXPERIENCES */ 

input[type=radio] {
display: none;
}

.experiences,.competences {
    height: 500px;
}
.atouts {
    height: 400px;
}
.cardCarousel {
    position: absolute;
    width: 60%;
    height: 100%;
    left: 0;
    right: 0;
    margin: auto;
    transition: transform .4s ease;
    cursor: pointer;
}

.containerExperience {
    transform-style: preserve-3d;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cardsCarousel {
    position: relative;
    width: 100%;
    height: 100%;
    margin-bottom: 14rem;
}

#exp-1,#exp-2,#exp-3,#exp-4,#exp-5 {
    max-width: 30vw;
    max-height: 30vh;
    object-fit: contain;
    color: #BFA65A
} 

#item-1:checked ~ .cardsCarousel #exp-4, #item-2:checked ~ .cardsCarousel #exp-5, #item-3:checked ~ .cardsCarousel #exp-1, #item-4:checked ~ .cardsCarousel #exp-2, #item-5:checked ~ .cardsCarousel #exp-3 {
    transform: translatex(-95%) scale(.5);
    opacity: .5;
    z-index: 1;
    transition: all 0.8s ease;
}
#item-1:checked ~ .cardsCarousel #exp-3, #item-2:checked ~ .cardsCarousel #exp-4, #item-3:checked ~ .cardsCarousel #exp-5, #item-4:checked ~ .cardsCarousel #exp-1, #item-5:checked ~ .cardsCarousel #exp-2 {
    transform: translatex(95%) scale(.5);
    opacity: .5;
    z-index: 1;
    transition: all 0.8s ease;
}
#item-1:checked ~ .cardsCarousel #exp-5, #item-2:checked ~ .cardsCarousel #exp-1, #item-3:checked ~ .cardsCarousel #exp-2, #item-4:checked ~ .cardsCarousel #exp-3, #item-5:checked ~ .cardsCarousel #exp-4 {
    transform: translatex(-62%) scale(.9);
    opacity: .85;
    z-index: 2;
    margin-top: 20px;
    transition: all 0.8s ease;
}

#item-1:checked ~ .cardsCarousel #exp-2, #item-2:checked ~ .cardsCarousel #exp-3, #item-3:checked ~ .cardsCarousel #exp-4, #item-4:checked ~ .cardsCarousel #exp-5, #item-5:checked ~ .cardsCarousel #exp-1 {
    transform: translatex(62%) scale(.9);
    opacity: .85;
    z-index: 2;
    margin-top: 20px;
    transition: all 0.8s ease;
}

#item-1:checked ~ .cardsCarousel #exp-1, #item-2:checked ~ .cardsCarousel #exp-2, #item-3:checked ~ .cardsCarousel #exp-3, #item-4:checked ~ .cardsCarousel #exp-4, #item-5:checked ~ .cardsCarousel #exp-5 {
    transform: translatex(0) scale(1);
    opacity: 1;
    z-index: 3;
    margin-top: 32px;
    transition: all 0.8s ease;
}

.player {
    background-color: #D8C478;
    border-radius: 24px 0px;
    width: 72vw;
    height: 110px;
    padding: 10px;
    overflow: hidden;
}

.upper-part {
    position: relative;
    display: none;
    align-items: center;
    height: 36px;
    margin-bottom: 12px;
    overflow: hidden;
}

.play-icon{
    margin-right: 10px;
    color: #9D1437
}

path {
    display: none;
}

.exp-info {
    width: calc(100% - 32px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.4rem;
    height: 7rem;
    margin-left: -0.5rem;
    padding-right: 1rem;
    overflow: hidden;
}
#exp-info-1 {
    margin-top: 1.15rem;
}

.sub-line {
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    width: 100%;
    line-height: 32px;
}
.subtitle {
    font-size: 18px;
}

.sub-line .date {
    font-size: 20px;
    font-weight: 500;
    width: 160px;
    padding-right: 2rem;
    text-align: right;
}
.info-area {
    width: 100%;
    position: absolute;
    color: #080808;
    top: 0;
    left: 40px;
    transition: all .4s linear;
}
.progress-bar {
    display: none;
    overflow: hidden;
}
.progress {
    display: none;
}

/* décalage des infos*/

#item-1:checked ~ .player #test  {
    transform: translateY(200px);
    transition: all 0.8s ease;
}

#item-2:checked ~ .player #test  {
    transform: translateY(88px);
    transition: all 0.8s ease;
} 

#item-3:checked ~ .player #test {
    transform: translateY(-22px);
    transition: all 0.8s ease;
}

#item-4:checked ~ .player #test {
    transform: translateY(-136px);
    transition: all 0.8s ease;
}

#item-5:checked ~ .player #test {
    transform: translateY(-246px);
    transition: all 0.8s ease;
}

/* SECTION COMPETENCES */ 

.competences {
    color: #080808;
}
.competencesInfos p {
    display: flex;
    flex-direction: column;
    margin-bottom: 36px;
}
.competencesLogo {
    display: flex;
    justify-content: space-evenly;
    padding: 20px 10px;
}
.comp1,.comp2,.comp3 {
    display: flex;
    flex-direction: column;
    border: 2px solid black;
    border-radius: 24px 0px;
    align-items: center;
}
.comp1 p,.comp2 p,.comp3 p {
    margin: 0.6rem;
    font-size: 0.9em;
}
.comp1 div,.comp2 div,.comp3 div {
    display: flex;
    align-items: center;
    margin: 0.6rem;
    justify-content: center;
    flex-wrap: wrap;
}
.comp1 img,.comp2 img,.comp3 img {
    width: 2.5rem;
    margin: 3px;
}
.comp2 {
    margin: 0px 16px;
}

/* SECTION ATOUTS   */ 


@-webkit-keyframes mot {
    0% {font-size: 1em;}
    50% {font-size: 1.5em;}
    100% {font-size: 1em}
}
@keyframes mot{
    0% {font-size: 1em;}
    50% {font-size: 1.5em;}
    100% {font-size: 1em}
}

.mots {
    align-items: center;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    flex-direction: column;
}
.ligne {
    display: flex;
    flex-direction: row;
}
.mot {
    line-height: 2.2rem;
    padding: 0.5rem 32px;
}
.red {
    color: #bb1f46;
}
.mot:hover {
    animation-play-state: paused;
    transition: all 1s ease-in-out;
}
.mot1, .mot5, .mot9 {
    -webkit-animation: mot 4.5s infinite 1s;
    animation: mot 4.5s ease infinite 1s;
}
.mot2, .mot6, .mot10 {
    -webkit-animation: mot 5s infinite 2s;
    animation: mot 5s ease infinite 2s;
}
.mot3, .mot7, .mot11 {
    -webkit-animation: mot 4.5s infinite 3s;
    animation: mot 4.5s ease infinite 3s;
}
.mot4, .mot8, .mot12 {
    -webkit-animation: mot 5s infinite 4s;
    animation: mot 5s ease infinite 4s;
}


/* SECTION LOISIRS */ 

.loisirsInfos {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: space-evenly;
    overflow: hidden;
}
.loisirsInfos p {
    font-size: 1.6rem;
    margin: 1rem;
}
.imgLoisir img:nth-child(2) {
    margin-left: 0;
}
.imgLoisir img:nth-child(4) {
    margin-left: -15px;
}
.imgLoisir img {
    max-width: 240px;
    max-height: 240px;
    margin: -20px -30px;
}

/* SECTION CONTACT */ 

.contactInfos {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    overflow: hidden;
    line-height: 4rem;
}
.contactInfos img {
    padding-right: 16px;
    width: 65px;
    margin-top: -0.6rem;
}
.contactInfos a {
    text-decoration: none;
    color: #BFA65A;
    transition: all 0.4s;
}
.txtContact {
    color: #eeeeee;
    font-size: 1.5rem;
}
.txtContact a:hover {
    color: #9D1437;
    font-size: 1.2em;
    transition: all 0.4s;
}

@-webkit-keyframes scrollRS {
    0%  {transform: translateX(0%);}
    100% {transform: translatex(-100%)}
}
@keyframes scrollRS {
    0%  {transform: translateX(0%);}
    100% {transform: translatex(-100%)}
}
.txtRéseaux {
    color: #eeeeee;
    margin-top:4rem;
    font-size: 1.5rem;
    transition: all 0.4s;
    width: 100%;
}
.containerRéseaux {
    color: #BFA65A;
    height: 6rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    transition: all 0.4s;
}
.containerRéseaux .icones {
    animation :scrollRS 15s linear infinite;
}
.containerRéseaux .icones a{
    padding: 0px 36px;
    color: #D8C478;
    transition: all 0.4s;
}
.containerRéseaux .icones a:hover {
    font-size: 1.2em;
    color: #9D1437;
    transition: all 0.4s;
    animation-play-state: paused;
}
.containerRéseaux:hover .icones {
    animation-play-state: paused;
}
.contact {
    margin-bottom: 0;
}

/* FOOTER */ 

.footer {
    margin: 0;
    padding: 0;
    color: #080808;
    width: 100%;
    font-size: 17px;
    background-image: url(/assets/img/footer.png);
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    justify-content: center;
}
.footer p {
    margin-top: 3rem;
    margin-bottom: 0rem;
}
.logoFooter img {
    width: 50px;
    margin: 2rem;
    margin-top: 5rem;
}
.footer div {
    display: flex;
}
.copyright {
    margin: 0rem 1.5rem;
}
.AG {
    height: 40px;
    margin: 3rem 0 0 0.2rem;
}


/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
        TABLETTE
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

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

.button {
    padding: 8px;
}
}

/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
MOBILE
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 768px) {

    body {
        width: 100vw;
        font-size: 24px;
        line-height: 2.5rem;
        margin: 0;
        padding: 0;
        align-items: center;
    }
    h1 {
        letter-spacing: 0px;
        font-size: 3rem;
        line-height: 3rem;
        margin: 0rem;
    }
    h2,h3,h4 {
        padding: 0 1rem;
    }
    h4 {
        font-size: 24px;
    }
    #avatar img {
        width: 160px;
        margin-top: 1rem;
    }
    
    .name,.iam {
        margin-top: 0rem;
        margin-bottom: 1rem;
        flex-direction: column;
    }
    .txt4 {
        margin-top: -4px;
        margin-bottom: 4rem;
    }
    .txt2 {
        font-size: 48px;
    }
    .fleche img {
        height: 36px;
        -webkit-animation: defilement 1s ease-in infinite;
        animation: defilement 1s ease-in-out infinite;
    }
    .cta {
        font-size: 1.8rem;
    }
        
    .PE {
        margin-right: 0;
    }

    #flecheRouge.active {
        left: 88%;
        top: 90%;
        width: 50px;
        margin: 0px;
    }

    
    /*---------------------------------------------------------------------------
                    texte qui défile
    -----------------------------------------------------------------------*/
    
    .containerBandeau {
        opacity: 1;
        height: 5rem;
        width: 100%;
        margin-top: 5rem;
        margin-bottom: 4rem;
        display: flex;
        align-items: center;
        z-index: 20;
        overflow: hidden;
    }
    .formations .containerBandeau {
        margin-top: 0rem;
    }
    .containerBandeau .txt {
        font-size: 2.8rem;
        font-weight: bold;
        margin-top : 5rem;
        margin-bottom : 3rem;
        letter-spacing: 2px;
        font-weight: bold;
        white-space: nowrap;
        padding: 0rem 3rem;
        animation:scroll 4s linear infinite;
    }

    #PROFIL .txt,#EXPÉRIENCES .txt,#ATOUTS .txt,#CONTACT .txt  {
        color: #eeeeee;
    }

    .row {
        margin: 0;
        justify-content: center;
    }
    .numberCategory {
        display: none;
    }

    /* ----------------------------------------------------------------------------
    containers
    -------------------------------------------------------------------------------- */

    .container-fluid {
        display: content;
        flex-direction: column;
        margin: 0;
        padding: 0;
        height: 100%;
        /* overflow-y: scroll; */
    }
    
    p {
        display: flex;
        justify-content: center;
        padding: 0 1rem;
    }
    
    .profil .bandeauTitle {
        display: none;
    }
    
    /* CHOIX */
    
    .choix .card {
        height: 180px;
        width: 240px;
    }
    
    .choix .card p {
        height: 65px;
        font-size: 2rem;
        margin-bottom: 4px;
        flex-direction: column;
    }
    button.cvWeb,button.cvPrint {
        margin: 1rem 0.3rem 0.5rem -0.2rem;
    }
    button.cvWeb:hover,button.cvWeb:focus,button.cvPrint:hover,button.cvPrint:focus {
        margin: 1.3rem 0.3rem 0.2rem 0.5rem;
    }
    





    /* SECTION PROFIL */ 

    #profil {
        display: flex;
        flex-direction: column-reverse;
        flex-wrap: nowrap;
        justify-content: center;
        height: 100vh;
        padding: 5px;
        transition: all 0.4s linear;
    }    
    .job {
        text-align: center;
        padding: 0px 18% 50px 18%;
        font-size: 4rem;
        font-weight: bold;
        line-height: 3rem;
    }
    .job p {
        position: relative;
        top: 0px;
    }

    /* SECTION formation  */

    .formationsCards {
        margin-top: 0;
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        width: 95vw;
        flex-direction: column-reverse;
    }
    
    .formations .box {
        height: 22vh;
        padding: 5px;
        margin: 8px;
        width: 70vw;
        transition: all 0.8s;
    } 

    .formations .box-front .date {
        margin-bottom: 1rem;
    }

    .formations .box-back .title {
        margin: 4px auto;
    }

    .player {
        width: 82vw;
        margin-top: 15rem;
        height: 13rem;
    }
    .exp-info {
        margin-left: 1.5rem;
        padding-right: 5.8rem;
        height: 15rem;
    }
    #exp-info-1 {
        margin-top: 15.2rem;
    }
    .sub-line .date {
        padding-right: 0rem;
        width: 100%;
        margin-bottom: 1rem;
    }
    .sub-line {
        flex-wrap: wrap;
    }
/* décalage des infos*/

    #item-1:checked ~ .player #test  {
        transform: translateY(200px);
    }

    #item-2:checked ~ .player #test  {
        transform: translateY(-40px);
    } 

    #item-3:checked ~ .player #test {
        transform: translateY(-280px);
    }

    #item-4:checked ~ .player #test {
        transform: translateY(-520px);
    }

    #item-5:checked ~ .player #test {
        transform: translateY(-760px);
    }


    /* SECTION experiences  */

    
#item-1:checked ~ .cardsCarousel #exp-4, #item-2:checked ~ .cardsCarousel #exp-5, #item-3:checked ~ .cardsCarousel #exp-1, #item-4:checked ~ .cardsCarousel #exp-2, #item-5:checked ~ .cardsCarousel #exp-3 {
    transform: translateY(0) scale(1.5);
    margin-top: 0px;
    /*mazars*/
}
#item-1:checked ~ .cardsCarousel #exp-3, #item-2:checked ~ .cardsCarousel #exp-4, #item-3:checked ~ .cardsCarousel #exp-5, #item-4:checked ~ .cardsCarousel #exp-1, #item-5:checked ~ .cardsCarousel #exp-2 {
    transform: translateY(338px) scale(1.5);
    margin-top: 0px;
    /*latelier*/

}
#item-1:checked ~ .cardsCarousel #exp-5, #item-2:checked ~ .cardsCarousel #exp-1, #item-3:checked ~ .cardsCarousel #exp-2, #item-4:checked ~ .cardsCarousel #exp-3, #item-5:checked ~ .cardsCarousel #exp-4 {
    transform: translateY(50px) scale(2.2);
    margin-top: 0px;
    /*dimeco*/
}

#item-1:checked ~ .cardsCarousel #exp-2, #item-2:checked ~ .cardsCarousel #exp-3, #item-3:checked ~ .cardsCarousel #exp-4, #item-4:checked ~ .cardsCarousel #exp-5, #item-5:checked ~ .cardsCarousel #exp-1 {
    transform: translateY(250px) scale(2.2);
    margin-top: 0px;
    /*swaag*/
}

#item-1:checked ~ .cardsCarousel #exp-1, #item-2:checked ~ .cardsCarousel #exp-2, #item-3:checked ~ .cardsCarousel #exp-3, #item-4:checked ~ .cardsCarousel #exp-4, #item-5:checked ~ .cardsCarousel #exp-5 {
    transform: translateY(130px) scale(3);
    margin-top: 0px;
    /*cactus*/
}

    /* SECTION compétences  */

    .competencesLogo {
        flex-wrap: wrap;
        justify-content: space-evenly;
        margin: 0 2rem;
    }

    .comp2 {
        margin: 16px 0px;
    }

    /* SECTION atouts  */

    .ligne {
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
    }
    .mot {
        font-size: 28px;
        padding: 0;
    }

    /* SECTION loisirs  */

    .imgLoisir img {
        max-width: 200px;
        max-height: 200px;
    }
    .imgLoisir {
        margin: 1rem 3rem;
    }

    /* SECTION réseaux  */

    .containerRéseaux {
        /* justify-content: center; */
    }
    .containerRéseaux .icones {
        animation-play-state: paused;
    }
    .containerRéseaux .icones a {
        padding: 0 22px;
        font-size: 24px;
        width: 24px;
    }
    .containerRéseaux span:nth-child(2),.containerRéseaux span:nth-child(3),.containerRéseaux span:nth-child(4),.containerRéseaux span:nth-child(5) {
        display: none;
    }

    /* FOOTER  */


    .footer {
        display: flex;
        flex-direction: column;
        font-size: 20px;
        background-image: url(/assets/img/footer_mobile.png);

    }
    .footer p {
        margin-top: 0;
    }
    .footerGauche {
        width: 80vw;
        margin-top: 90px !important; 
        text-align: center;
    }
    .logoFooter img {
        margin: 1.5rem;
    }
    .footer div {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        flex-direction: column;
    }
    .AG {
        width: 85px;
        margin: 0 0 2rem 0;
        align-self: center;
    }
    p.copyright {
        margin: 2rem;
    }

}